diff --git a/public/css/gildenhalle.css b/public/css/gildenhalle.css index bdf1151..f82f5b9 100644 --- a/public/css/gildenhalle.css +++ b/public/css/gildenhalle.css @@ -1,4 +1,4 @@ -/* ── Gemeinsame Popup-Layout Klassen (wie bazaar.css) ────── */ +/* ── Gemeinsame Popup-Layout Klassen (wie bazaar.css) kopiert von dort ────── */ .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,18 +39,25 @@ 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 { @@ -72,7 +79,9 @@ flex-direction: column; overflow: hidden; } -.mp-panel.active { display: flex; } +.mp-panel.active { + display: flex; +} .mp-col-header { font-family: "Cinzel", serif; @@ -110,14 +119,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 ─────────────────────────────────── */ @@ -138,12 +147,12 @@ } .gh-members-table td { padding: 7px 10px; - border-bottom: 1px solid rgba(139,106,42,.2); + border-bottom: 1px solid rgba(139, 106, 42, 0.2); color: #2a1505; vertical-align: middle; } .gh-members-table tr:hover td { - background: rgba(255,255,255,.03); + background: rgba(255, 255, 255, 0.03); } /* ── Rang-Badge ─────────────────────────────────────────── */ @@ -161,7 +170,7 @@ .gh-rank-badge.leader { border-color: #7a4a00; background: linear-gradient(#6b4b2a, #3c2414); - box-shadow: 0 0 6px rgba(200,160,60,.3); + box-shadow: 0 0 6px rgba(200, 160, 60, 0.3); } /* ── Gilden-Karten im Suchraster ────────────────────────── */ @@ -182,12 +191,14 @@ display: flex; flex-direction: column; gap: 6px; - transition: .2s; + transition: 0.2s; cursor: default; } .gh-guild-card:hover { border-color: #7a4a00; - box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 10px rgba(200,160,60,.15); + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.5), + 0 0 10px rgba(200, 160, 60, 0.15); } .gh-guild-header { @@ -249,7 +260,7 @@ font-size: 11px; font-weight: bold; cursor: pointer; - transition: .15s; + transition: 0.15s; width: 100%; } .gh-join-btn:hover:not(:disabled) { @@ -257,7 +268,7 @@ color: #2a1505; } .gh-join-btn:disabled { - opacity: .45; + opacity: 0.45; cursor: not-allowed; } .gh-join-btn.pending { @@ -287,7 +298,7 @@ .gh-form-input, .gh-form-textarea, .gh-form-select { - background: rgba(0,0,0,.5); + background: rgba(0, 0, 0, 0.5); border: 2px solid var(--guild-border); border-radius: 7px; color: #2a1505; @@ -295,13 +306,20 @@ font-size: 13px; padding: 7px 10px; outline: none; - transition: border-color .15s; + transition: border-color 0.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; @@ -313,11 +331,11 @@ font-size: 13px; font-weight: bold; cursor: pointer; - transition: .2s; + transition: 0.2s; letter-spacing: 2px; } .gh-create-btn:hover { - box-shadow: 0 0 14px rgba(200,160,60,.4); + box-shadow: 0 0 14px rgba(200, 160, 60, 0.4); } .gh-error-msg { @@ -344,11 +362,11 @@ display: flex; flex-direction: column; gap: 8px; - transition: .2s; + transition: 0.2s; } .gh-task-card.completed { border-color: #1a5a10; - opacity: .75; + opacity: 0.75; } .gh-task-header { @@ -381,16 +399,16 @@ } .gh-task-bar-track { height: 8px; - background: rgba(255,255,255,.08); + background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; - border: 1px solid rgba(139,106,42,.3); + border: 1px solid rgba(139, 106, 42, 0.3); } .gh-task-bar-fill { height: 100%; background: linear-gradient(90deg, #4a8a3c, #7ada60); border-radius: 4px; - transition: width .5s ease; + transition: width 0.5s ease; } .gh-task-bar-fill.completed { background: linear-gradient(90deg, var(--guild-green), #8aff60); @@ -415,8 +433,8 @@ align-items: center; justify-content: space-between; padding: 8px 12px; - background: rgba(0,0,0,.25); - border: 1px solid rgba(139,106,42,.25); + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(139, 106, 42, 0.25); border-radius: 7px; gap: 10px; } @@ -444,7 +462,7 @@ font-size: 10px; font-weight: bold; cursor: pointer; - transition: .15s; + transition: 0.15s; flex-shrink: 0; } .gh-req-accept { @@ -452,13 +470,17 @@ 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 { @@ -466,7 +488,7 @@ align-items: center; gap: 12px; padding: 12px 16px; - background: rgba(0,0,0,.3); + background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid var(--guild-border); flex-shrink: 0; } @@ -501,21 +523,24 @@ font-family: "Cinzel", serif; font-size: 11px; cursor: pointer; - transition: .15s; + transition: 0.15s; +} +.gh-leave-btn:hover { + border-color: #cc4040; + color: #ff9090; } -.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,.3); + border-bottom: 1px solid rgba(139, 106, 42, 0.3); flex-shrink: 0; } .gh-search-input { flex: 1; - background: rgba(0,0,0,.5); + background: rgba(0, 0, 0, 0.5); border: 2px solid var(--guild-border); border-radius: 7px; color: #2a1505; @@ -524,7 +549,9 @@ 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); @@ -534,9 +561,11 @@ font-family: "Cinzel", serif; font-size: 12px; cursor: pointer; - transition: .15s; + transition: 0.15s; +} +.gh-search-btn:hover { + border-color: #7a4a00; } -.gh-search-btn:hover { border-color: #7a4a00; } /* ── Keine Gilde Hinweis ────────────────────────────────── */ .gh-no-guild { @@ -551,8 +580,13 @@ 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 { @@ -561,7 +595,7 @@ justify-content: center; gap: 5px; padding: 8px; - border-top: 1px solid rgba(139,106,42,.3); + border-top: 1px solid rgba(139, 106, 42, 0.3); flex-shrink: 0; } .gh-page-btn { @@ -573,17 +607,23 @@ font-size: 11px; padding: 3px 10px; cursor: pointer; - transition: .15s; + transition: 0.15s; +} +.gh-page-btn:hover:not(:disabled) { + border-color: #7a4a00; +} +.gh-page-btn:disabled { + opacity: 0.35; + cursor: not-allowed; } -.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; @@ -599,13 +639,13 @@ letter-spacing: 2px; text-transform: uppercase; padding: 8px 16px 4px; - border-bottom: 1px solid rgba(139,106,42,.25); + border-bottom: 1px solid rgba(139, 106, 42, 0.25); flex-shrink: 0; } /* ── Rang-Select in Mitglieder-Tabelle ──────────────────── */ .gh-rank-select { - background: rgba(0,0,0,.5); + background: rgba(0, 0, 0, 0.5); border: 1px solid var(--guild-border); border-radius: 5px; color: #2a1505; @@ -623,9 +663,11 @@ font-family: "Cinzel", serif; font-size: 10px; cursor: pointer; - transition: .15s; + transition: 0.15s; +} +.gh-kick-btn:hover { + border-color: #cc4040; } -.gh-kick-btn:hover { border-color: #cc4040; } /* ── Popup Größe – an Pergament angepasst ─────────────────── */ #gildenhalle-popup {