diff --git a/public/css/gildenhalle.css b/public/css/gildenhalle.css index f82f5b9..9fec02d 100644 --- a/public/css/gildenhalle.css +++ b/public/css/gildenhalle.css @@ -1,4 +1,4 @@ -/* ── Gemeinsame Popup-Layout Klassen (wie bazaar.css) kopiert von dort ────── */ +/* ── Gemeinsame Popup-Layout Klassen (wie bazaar.css) ────── */ .mp-wrap, .mp-body-wrap { display: flex; @@ -15,7 +15,7 @@ flex-direction: column; gap: 6px; padding: 16px 10px; - background: rgba(0, 0, 0, 0.3); + background: rgba(0,0,0,0.3); border-right: 2px solid #6b4b2a; min-width: 150px; flex-shrink: 0; @@ -39,25 +39,18 @@ text-align: left; white-space: nowrap; } -.mp-tab:hover { - color: #2a1505; - filter: brightness(1.2); -} +.mp-tab:hover { color: #2a1505; filter: brightness(1.2); } .mp-tab.mp-tab-active { color: #2a1505 !important; border-color: #7a4a00 !important; background: linear-gradient(135deg, #4a3010, #2a1a08) !important; - box-shadow: - inset 0 0 10px rgba(0, 0, 0, 0.5), - 0 0 14px rgba(200, 160, 60, 0.3); + box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 14px rgba(200,160,60,0.3); } .mp-tab-dot { - width: 10px; - height: 10px; - border-radius: 50%; - flex-shrink: 0; - border: 1px solid rgba(255, 255, 255, 0.3); + width: 10px; height: 10px; + border-radius: 50%; flex-shrink: 0; + border: 1px solid rgba(255,255,255,0.3); background: #8b6a3c; } .mp-tab-active .mp-tab-dot { @@ -79,9 +72,7 @@ flex-direction: column; overflow: hidden; } -.mp-panel.active { - display: flex; -} +.mp-panel.active { display: flex; } .mp-col-header { font-family: "Cinzel", serif; @@ -119,14 +110,14 @@ /* ── Gilden-spezifische Farben ───────────────────────────── */ :root { - --guild-gold: #f0d060; + --guild-gold: #f0d060; --guild-border: #8b6a3c; - --guild-dark: #1a0f04; - --guild-mid: #2a1a08; - --guild-text: #f0d9a6; - --guild-muted: #a08060; - --guild-green: #4aaa30; - --guild-red: #cc3030; + --guild-dark: #1a0f04; + --guild-mid: #2a1a08; + --guild-text: #f0d9a6; + --guild-muted: #a08060; + --guild-green: #4aaa30; + --guild-red: #cc3030; } /* ── Mitglieder-Tabelle ─────────────────────────────────── */ @@ -147,12 +138,12 @@ } .gh-members-table td { padding: 7px 10px; - border-bottom: 1px solid rgba(139, 106, 42, 0.2); + border-bottom: 1px solid rgba(139,106,42,.2); color: #2a1505; vertical-align: middle; } .gh-members-table tr:hover td { - background: rgba(255, 255, 255, 0.03); + background: rgba(255,255,255,.03); } /* ── Rang-Badge ─────────────────────────────────────────── */ @@ -170,7 +161,7 @@ .gh-rank-badge.leader { border-color: #7a4a00; background: linear-gradient(#6b4b2a, #3c2414); - box-shadow: 0 0 6px rgba(200, 160, 60, 0.3); + box-shadow: 0 0 6px rgba(200,160,60,.3); } /* ── Gilden-Karten im Suchraster ────────────────────────── */ @@ -191,14 +182,12 @@ display: flex; flex-direction: column; gap: 6px; - transition: 0.2s; + transition: .2s; cursor: default; } .gh-guild-card:hover { border-color: #7a4a00; - box-shadow: - 0 4px 16px rgba(0, 0, 0, 0.5), - 0 0 10px rgba(200, 160, 60, 0.15); + box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 10px rgba(200,160,60,.15); } .gh-guild-header { @@ -260,7 +249,7 @@ font-size: 11px; font-weight: bold; cursor: pointer; - transition: 0.15s; + transition: .15s; width: 100%; } .gh-join-btn:hover:not(:disabled) { @@ -268,7 +257,7 @@ color: #2a1505; } .gh-join-btn:disabled { - opacity: 0.45; + opacity: .45; cursor: not-allowed; } .gh-join-btn.pending { @@ -298,7 +287,7 @@ .gh-form-input, .gh-form-textarea, .gh-form-select { - background: rgba(0, 0, 0, 0.5); + background: rgba(0,0,0,.5); border: 2px solid var(--guild-border); border-radius: 7px; color: #2a1505; @@ -306,20 +295,13 @@ font-size: 13px; padding: 7px 10px; outline: none; - transition: border-color 0.15s; + transition: border-color .15s; } .gh-form-input:focus, .gh-form-textarea:focus, -.gh-form-select:focus { - border-color: #7a4a00; -} -.gh-form-textarea { - resize: vertical; - min-height: 70px; -} -.gh-form-select { - cursor: pointer; -} +.gh-form-select:focus { border-color: #7a4a00; } +.gh-form-textarea { resize: vertical; min-height: 70px; } +.gh-form-select { cursor: pointer; } .gh-create-btn { padding: 10px 0; @@ -331,11 +313,11 @@ font-size: 13px; font-weight: bold; cursor: pointer; - transition: 0.2s; + transition: .2s; letter-spacing: 2px; } .gh-create-btn:hover { - box-shadow: 0 0 14px rgba(200, 160, 60, 0.4); + box-shadow: 0 0 14px rgba(200,160,60,.4); } .gh-error-msg { @@ -362,11 +344,11 @@ display: flex; flex-direction: column; gap: 8px; - transition: 0.2s; + transition: .2s; } .gh-task-card.completed { border-color: #1a5a10; - opacity: 0.75; + opacity: .75; } .gh-task-header { @@ -399,16 +381,16 @@ } .gh-task-bar-track { height: 8px; - background: rgba(255, 255, 255, 0.08); + background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; - border: 1px solid rgba(139, 106, 42, 0.3); + border: 1px solid rgba(139,106,42,.3); } .gh-task-bar-fill { height: 100%; background: linear-gradient(90deg, #4a8a3c, #7ada60); border-radius: 4px; - transition: width 0.5s ease; + transition: width .5s ease; } .gh-task-bar-fill.completed { background: linear-gradient(90deg, var(--guild-green), #8aff60); @@ -433,8 +415,8 @@ align-items: center; justify-content: space-between; padding: 8px 12px; - background: rgba(0, 0, 0, 0.25); - border: 1px solid rgba(139, 106, 42, 0.25); + background: rgba(0,0,0,.25); + border: 1px solid rgba(139,106,42,.25); border-radius: 7px; gap: 10px; } @@ -462,7 +444,7 @@ font-size: 10px; font-weight: bold; cursor: pointer; - transition: 0.15s; + transition: .15s; flex-shrink: 0; } .gh-req-accept { @@ -470,17 +452,13 @@ border: 2px solid #4a8a3c; color: #1a5a10; } -.gh-req-accept:hover { - border-color: #7ada60; -} +.gh-req-accept:hover { border-color: #7ada60; } .gh-req-reject { background: linear-gradient(#4a1010, #2a0808); border: 2px solid #8a3030; color: #7a1010; } -.gh-req-reject:hover { - border-color: #ff6060; -} +.gh-req-reject:hover { border-color: #ff6060; } /* ── Meine Gilde Info-Box ───────────────────────────────── */ .gh-my-info { @@ -488,7 +466,7 @@ align-items: center; gap: 12px; padding: 12px 16px; - background: rgba(0, 0, 0, 0.3); + background: rgba(0,0,0,.3); border-bottom: 1px solid var(--guild-border); flex-shrink: 0; } @@ -523,24 +501,21 @@ font-family: "Cinzel", serif; font-size: 11px; cursor: pointer; - transition: 0.15s; -} -.gh-leave-btn:hover { - border-color: #cc4040; - color: #ff9090; + transition: .15s; } +.gh-leave-btn:hover { border-color: #cc4040; color: #ff9090; } /* ── Suche ──────────────────────────────────────────────── */ .gh-search-bar { display: flex; gap: 8px; padding: 10px 14px; - border-bottom: 1px solid rgba(139, 106, 42, 0.3); + border-bottom: 1px solid rgba(139,106,42,.3); flex-shrink: 0; } .gh-search-input { flex: 1; - background: rgba(0, 0, 0, 0.5); + background: rgba(0,0,0,.5); border: 2px solid var(--guild-border); border-radius: 7px; color: #2a1505; @@ -549,9 +524,7 @@ padding: 6px 10px; outline: none; } -.gh-search-input:focus { - border-color: #7a4a00; -} +.gh-search-input:focus { border-color: #7a4a00; } .gh-search-btn { padding: 6px 16px; background: linear-gradient(#3a2810, #1a0f04); @@ -561,11 +534,9 @@ font-family: "Cinzel", serif; font-size: 12px; cursor: pointer; - transition: 0.15s; -} -.gh-search-btn:hover { - border-color: #7a4a00; + transition: .15s; } +.gh-search-btn:hover { border-color: #7a4a00; } /* ── Keine Gilde Hinweis ────────────────────────────────── */ .gh-no-guild { @@ -580,13 +551,8 @@ text-align: center; padding: 24px; } -.gh-no-guild-icon { - font-size: 42px; -} -.gh-no-guild-text { - font-size: 13px; - line-height: 1.8; -} +.gh-no-guild-icon { font-size: 42px; } +.gh-no-guild-text { font-size: 13px; line-height: 1.8; } /* ── Pagination ─────────────────────────────────────────── */ .gh-pagination { @@ -595,7 +561,7 @@ justify-content: center; gap: 5px; padding: 8px; - border-top: 1px solid rgba(139, 106, 42, 0.3); + border-top: 1px solid rgba(139,106,42,.3); flex-shrink: 0; } .gh-page-btn { @@ -607,23 +573,17 @@ font-size: 11px; padding: 3px 10px; cursor: pointer; - transition: 0.15s; -} -.gh-page-btn:hover:not(:disabled) { - border-color: #7a4a00; -} -.gh-page-btn:disabled { - opacity: 0.35; - cursor: not-allowed; + transition: .15s; } +.gh-page-btn:hover:not(:disabled) { border-color: #7a4a00; } +.gh-page-btn:disabled { opacity: .35; cursor: not-allowed; } .gh-page-btn.active { background: linear-gradient(#6b4b2a, #3c2414); border-color: #7a4a00; } /* ── Lade/Leer-Zustand ──────────────────────────────────── */ -.gh-loading, -.gh-empty { +.gh-loading, .gh-empty { text-align: center; padding: 40px; font-family: "Cinzel", serif; @@ -639,13 +599,13 @@ letter-spacing: 2px; text-transform: uppercase; padding: 8px 16px 4px; - border-bottom: 1px solid rgba(139, 106, 42, 0.25); + border-bottom: 1px solid rgba(139,106,42,.25); flex-shrink: 0; } /* ── Rang-Select in Mitglieder-Tabelle ──────────────────── */ .gh-rank-select { - background: rgba(0, 0, 0, 0.5); + background: rgba(0,0,0,.5); border: 1px solid var(--guild-border); border-radius: 5px; color: #2a1505; @@ -663,11 +623,9 @@ font-family: "Cinzel", serif; font-size: 10px; cursor: pointer; - transition: 0.15s; -} -.gh-kick-btn:hover { - border-color: #cc4040; + transition: .15s; } +.gh-kick-btn:hover { border-color: #cc4040; } /* ── Popup Größe – an Pergament angepasst ─────────────────── */ #gildenhalle-popup { @@ -675,3 +633,71 @@ height: min(780px, 88vh); max-height: 88vh; } + +/* ══════════════════════════════════════════════ + EXPLIZITE FARBKORREKTUREN + Dunkle Hintergründe → helle Schrift + Pergament-Hintergrund → dunkle Schrift +══════════════════════════════════════════════ */ + +/* Gilden-Karte (dunkler Hintergrund) */ +.gh-guild-card .gh-guild-name { color: #f0d9a6 !important; } +.gh-guild-card .gh-guild-desc { color: #c8a86a !important; } +.gh-guild-card .gh-guild-meta { color: #a08060 !important; } +.gh-guild-card .gh-guild-open { color: #7de87d !important; } +.gh-guild-card .gh-guild-closed { color: #f0a030 !important; } +.gh-guild-tag { color: #f0d060 !important; } + +/* Eigene Gilde Info-Box (dunkler Hintergrund) */ +.gh-my-info .gh-my-name { color: #f0d9a6 !important; } +.gh-my-info .gh-my-sub { color: #a08060 !important; } + +/* Rang-Badge */ +.gh-rank-badge { color: #f0d060 !important; } +.gh-rank-badge.leader { color: #fff !important; } + +/* Mitglieder-Tabelle (Pergament) */ +.gh-members-table th { color: #3a1a05 !important; } +.gh-members-table td { color: #1a0800 !important; } + +/* Aufgaben-Karten (dunkler Hintergrund) */ +.gh-task-card .gh-task-label { color: #f0d9a6 !important; } +.gh-task-card .gh-task-reward { color: #f0d060 !important; } +.gh-task-card .gh-task-done-badge { color: #7de87d !important; } +.gh-task-card .gh-task-progress-text { color: #a08060 !important; } + +/* Suche (Pergament) */ +.gh-search-input { color: #1a0800 !important; background: rgba(255,255,255,.5) !important; } +.gh-search-input::placeholder { color: #7a5030 !important; } +.gh-search-btn { color: #f0d9a6 !important; } + +/* Formular (Pergament) */ +.gh-form-label { color: #3a1a05 !important; } +.gh-form-input, .gh-form-textarea, .gh-form-select { + color: #1a0800 !important; + background: rgba(255,255,255,.6) !important; +} +.gh-form-input::placeholder, +.gh-form-textarea::placeholder { color: #7a5030 !important; } + +/* Section-Titel (Pergament) */ +.gh-section-title { color: #4a2000 !important; } + +/* Leer/Lade (Pergament) */ +.gh-loading, .gh-empty { color: #5a3010 !important; } +.gh-no-guild { color: #4a2000 !important; } + +/* Anfragen (Pergament-Hintergrund) */ +.gh-request-name { color: #1a0800 !important; } +.gh-request-msg { color: #5a3010 !important; } + +/* Pagination (Pergament) */ +.gh-page-btn { + color: #2a1005 !important; + background: rgba(200,160,80,.2) !important; + border-color: #8b6a3c !important; +} +.gh-page-btn.active { + background: linear-gradient(#6b4b2a, #3c2414) !important; + color: #f0d9a6 !important; +}