Rollen-Menüs (Carl-Bot-Ersatz) + Setup-Redesign mit Tab-Sidebar
- Rollen-Menüs: Builder im Webinterface (Titel, Beschreibung, Kanal, Emoji/Label/Rolle, Exklusiv-Modus = max. 1 Rolle pro Menü), Bot postet Button-Embeds; Klick = Rolle nehmen/abgeben (ephemeres Feedback), Update editiert den Discord-Post in place, Löschen räumt ihn mit auf - Bewusst Buttons statt klassischer Emoji-Reaktionen: kein Reaction-Spam am Post, kein Custom-Emoji-Parsing, exklusive Menüs möglich; halbfertige Reaction-Variante aus abgebrochener Session entfernt und konsolidiert - Setup-Seite: komplett neu strukturiert in 8 Tabs mit sticky Sidebar (Status/Feeds/Community/Rollen/Support/Composer/System/API), Feedback als Toast - Modern-Polish: weiche Radien auf Karten/Inputs/Buttons, ruhigere Input-Flächen mit Fokus-Glow, Sektions-Hover; JSON-Parser akzeptiert leere Bodies - API: /api/rolemenus CRUD + publish (Admin), README aktualisiert Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -544,6 +544,115 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
font-size: .68rem; color: var(--muted2); white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── SETTINGS-LAYOUT (Sidebar + Content) ───────────── */
|
||||
.content-wide { max-width: 1060px; }
|
||||
|
||||
.settings-layout {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.settings-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .25rem;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
min-width: 11rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.settings-nav-item {
|
||||
display: flex; align-items: center; gap: .7rem;
|
||||
font-family: var(--mono);
|
||||
font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
padding: .55rem .9rem;
|
||||
text-align: left;
|
||||
transition: color .15s, background .15s, border-color .15s;
|
||||
}
|
||||
.settings-nav-item:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
|
||||
.settings-nav-item.active {
|
||||
color: var(--neon);
|
||||
background: rgba(245, 197, 24, .06);
|
||||
border-left-color: var(--neon);
|
||||
}
|
||||
.settings-nav-icon { font-size: .95rem; }
|
||||
|
||||
.settings-content { flex: 1; min-width: 0; animation: riseIn .3s ease both; }
|
||||
|
||||
.section-intro {
|
||||
color: var(--muted);
|
||||
font-weight: 300;
|
||||
margin-bottom: 1.2rem;
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
/* Reaction-Roles-Editor */
|
||||
.rr-row {
|
||||
display: flex; gap: .5rem; align-items: center;
|
||||
margin-bottom: .45rem;
|
||||
}
|
||||
.rr-row select { flex: 1; }
|
||||
.rr-row input[type="text"]:not(.rr-emoji) { flex: 1; }
|
||||
.rr-emoji { width: 5.5rem !important; flex: none !important; text-align: center; }
|
||||
|
||||
/* Kleine Buttons in Listen-Zeilen + Ghost-Variante */
|
||||
.btn-mini {
|
||||
font-family: var(--mono);
|
||||
font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 255, 255, .12);
|
||||
border-radius: 5px;
|
||||
padding: .25rem .6rem;
|
||||
white-space: nowrap;
|
||||
transition: color .15s, border-color .15s;
|
||||
}
|
||||
.btn-mini:hover { color: var(--neon); border-color: var(--neon); }
|
||||
.btn-ghost {
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
border-color: rgba(255, 255, 255, .12);
|
||||
}
|
||||
.btn-ghost:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .04); box-shadow: none; }
|
||||
|
||||
/* Feedback-Toast unten rechts */
|
||||
.feedback-float {
|
||||
position: fixed;
|
||||
right: 1.5rem; bottom: 1.5rem;
|
||||
z-index: 500;
|
||||
font-family: var(--mono);
|
||||
font-size: .78rem; letter-spacing: .1em;
|
||||
color: var(--success);
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(0, 255, 136, .3);
|
||||
padding: .6rem 1.1rem;
|
||||
animation: riseIn .25s ease both;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.settings-layout { flex-direction: column; }
|
||||
.settings-nav {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: .35rem;
|
||||
padding-bottom: .35rem;
|
||||
}
|
||||
.settings-nav-item {
|
||||
border-left: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
padding: .45rem .7rem;
|
||||
}
|
||||
.settings-nav-item.active { border-left: none; border-bottom-color: var(--neon); }
|
||||
}
|
||||
|
||||
/* ── SETTINGS ──────────────────────────────────────── */
|
||||
.settings-section {
|
||||
background: var(--bg2);
|
||||
@@ -727,3 +836,48 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
.commit-row { flex-wrap: wrap; row-gap: .35rem; }
|
||||
.commit-msg { flex-basis: 100%; order: -1; white-space: normal; }
|
||||
}
|
||||
|
||||
/* ── MODERN POLISH ─────────────────────────────────────
|
||||
Weiche Radien + feinere Flächen, überschreibt gezielt
|
||||
die eckigen Basis-Styles weiter oben. */
|
||||
.card, .settings-section, .commit-list, .key-list, .key-created,
|
||||
.wish-row, .release-card, .milestone {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.settings-section {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent 40%), var(--bg2);
|
||||
border-color: rgba(255, 255, 255, .08);
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.settings-section:hover { border-color: rgba(245, 197, 24, .18); }
|
||||
.settings-section + .settings-section,
|
||||
.settings-content > .settings-section { margin-bottom: 1.25rem; }
|
||||
|
||||
.btn, .btn-login, .field select, .field input[type="text"], .field textarea,
|
||||
.search, .user-chip, .feedback-float, .sha, .card-project, .card-delete,
|
||||
.commits th:first-child, .commits th:last-child {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.chip, .key-scopes { border-radius: 99px; }
|
||||
.settings-nav-item { border-radius: 9px; border-left-width: 2px; }
|
||||
.key-list .key-row:first-child { border-radius: 12px 12px 0 0; }
|
||||
.key-list .key-row:last-child { border-radius: 0 0 12px 12px; }
|
||||
.commit-list .commit-row:first-child { border-radius: 12px 12px 0 0; }
|
||||
.commit-list .commit-row:last-child { border-radius: 0 0 12px 12px; }
|
||||
.card-images a, .shot, .progress, .hm-cell { border-radius: 6px; }
|
||||
.card-images.n1 a { border-radius: 10px; }
|
||||
|
||||
/* Inputs: ruhigerer Grundzustand, klarer Fokus */
|
||||
.field select, .field input[type="text"], .field textarea {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
border-color: rgba(255, 255, 255, .09);
|
||||
}
|
||||
.field select:hover, .field input[type="text"]:hover, .field textarea:hover {
|
||||
border-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.field select:focus, .field input[type="text"]:focus, .field textarea:focus {
|
||||
border-color: var(--neon);
|
||||
box-shadow: 0 0 0 3px rgba(245, 197, 24, .12);
|
||||
}
|
||||
.toggle input { border-radius: 99px; }
|
||||
.toggle input::after { border-radius: 50%; }
|
||||
|
||||
Reference in New Issue
Block a user