diff --git a/assets/css/custom.css b/assets/css/custom.css index d8e2e0d..e9597d2 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -363,4 +363,72 @@ } .logout-link:hover { color: #d08770 !important; +} +/* Unified Modal Styles - Centered Horizontal & Vertical */ +.modal-overlay { + display: none !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + background: rgba(0, 0, 0, 0.85) !important; + backdrop-filter: blur(5px) !important; + z-index: 2000 !important; + align-items: center !important; /* Vertical Center */ + justify-content: center !important; /* Horizontal Center */ + overflow-y: auto !important; + padding: 20px !important; +} + +.modal-overlay[style*="display: flex"], +.modal-overlay.active { + display: flex !important; +} + +.modal-container { + background: #0f172a; + border: 1px solid #1e293b; + border-radius: 12px; + width: 100%; + max-width: 600px; + max-height: 90vh; + overflow-y: auto; + position: relative; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + margin: auto !important; /* Ensures centering in some flex scenarios */ +} + +/* Base Modal internal layout */ +.modal-header { + padding: 20px 25px; + border-bottom: 1px solid rgba(136, 192, 208, 0.15); + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header h2 { + margin: 0; + font-size: 18px; + color: #88c0d0; +} + +.modal-body { + padding: 25px; +} + +.modal-close { + background: none; + border: none; + color: #88c0d0; + font-size: 28px; + cursor: pointer; + line-height: 1; + padding: 0; + transition: color 0.2s; +} + +.modal-close:hover { + color: #fff; } \ No newline at end of file diff --git a/guilde.php b/guilde.php index e5a3c0d..a7367dd 100644 --- a/guilde.php +++ b/guilde.php @@ -147,13 +147,6 @@ if ($in_guild) { .req-item { background: #1a202c; padding: 8px 12px; border: 1px solid #2d3545; display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; margin-right: 10px; margin-bottom: 10px;} .req-item img { width: 18px; height: 18px; } .req-item.insufficient { border-color: #bf616a; color: #bf616a; } - .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 2000; align-items: flex-start; padding: 40px 0; overflow-y: auto; justify-content: center; } - .modal-container { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; width: 600px; max-height: none; overflow: visible; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); margin: 0 auto; } - .modal-header { padding: 20px; border-bottom: 1px solid #1e293b; display: flex; justify-content: space-between; align-items: center; background: rgba(30, 41, 59, 0.5); } - .modal-header h2 { margin: 0; font-size: 20px; color: #88c0d0; } - .modal-close { background: none; border: none; color: #8c92a3; font-size: 24px; cursor: pointer; transition: color 0.2s; } - .modal-close:hover { color: #fff; } - .modal-body { padding: 25px; } diff --git a/index.php b/index.php index f1bd121..932947f 100644 --- a/index.php +++ b/index.php @@ -207,13 +207,6 @@ function getStatusColor($status, $statuses_map) { .mini-dot { width: 12px; height: 12px; border-radius: 1px; } /* MODAL STYLES */ - .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 2000; align-items: flex-start; padding: 40px 0; overflow-y: auto; justify-content: center; } - .modal-container { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; width: 600px; max-height: none; overflow: visible; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); margin: 0 auto; } - .modal-header { padding: 20px; border-bottom: 1px solid #1e293b; display: flex; justify-content: space-between; align-items: center; background: rgba(30, 41, 59, 0.5); } - .modal-header h2 { margin: 0; font-size: 20px; color: #88c0d0; } - .modal-close { background: none; border: none; color: #8c92a3; font-size: 24px; cursor: pointer; transition: color 0.2s; } - .modal-close:hover { color: #fff; } - .modal-body { padding: 25px; } .planet-hero { display: flex; gap: 25px; margin-bottom: 25px; align-items: center; } .planet-preview-img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 15px rgba(136, 192, 208, 0.3)); } .planet-meta { flex: 1; }