style(role-editor): rewrite UI on Foundry Deck dark tokens
Replace hardcoded light-theme inline colors (#fff/#f8f9fa/#e8f5e9/#888…) with semantic CSS classes that consume the existing design tokens (--bg-card/--ember/--ember-soft/--accent/--text-dim/--steel/etc.). Fixes the unreadable role names, faded checkmark cards, and washed-out success banner — everything was rendering "white-on-cream" against the dark Foundry Deck background. Visual structure now: - two-column grid (sidebar 280px / detail flex) - role-card: dark surface, ember-soft + 3px ember edge + glow on selected, Saira Condensed display name + mono permission count - perm-group card with dashed steel header - perm-item: bg-sink default; ember-soft + accent border + ember-tint check glyph on checked; native checkbox restyled with the ember palette - banner pill: success-green or danger-red token, mono text - create-role card: ember left-edge, mono uppercase labels - delete uses .btn-danger (already in the token set) No state/logic changes — same fetch + toggle + save flow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
162
src/index.css
162
src/index.css
@@ -513,6 +513,168 @@ dd { font-size: .92rem; font-family: 'JetBrains Mono', monospace; }
|
||||
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.tab-content { margin-top: 18px; animation: fadeIn .25s ease; }
|
||||
|
||||
/* ---- Role Editor -------------------------------------------------------- */
|
||||
.role-editor-page { animation: deck-in .35s cubic-bezier(.16,1,.3,1) both; }
|
||||
.role-editor-page h2 { display: flex; align-items: center; gap: 10px; }
|
||||
.role-editor-page .lead {
|
||||
color: var(--text-dim); font-size: .82rem;
|
||||
text-transform: uppercase; letter-spacing: .12em; margin: 8px 0 22px;
|
||||
}
|
||||
|
||||
.role-editor-banner {
|
||||
border: var(--hair); border-radius: var(--radius);
|
||||
padding: 12px 16px; margin-bottom: 18px;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: .85rem;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
animation: fadeIn .25s ease;
|
||||
}
|
||||
.role-editor-banner.ok { background: rgba(70,180,135,.10); border-color: var(--success); color: var(--success); }
|
||||
.role-editor-banner.err { background: rgba(226,85,60,.10); border-color: var(--danger); color: var(--danger); }
|
||||
|
||||
.role-editor-create {
|
||||
background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
|
||||
padding: 22px 22px 18px; margin-bottom: 22px;
|
||||
position: relative; max-width: 480px;
|
||||
animation: fadeIn .2s ease;
|
||||
}
|
||||
.role-editor-create::before {
|
||||
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||||
background: var(--ember); border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
.role-editor-create h3 { margin-bottom: 14px; font-size: 1.05rem; letter-spacing: .04em; }
|
||||
.role-editor-create label {
|
||||
display: block; margin-bottom: 5px;
|
||||
font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
|
||||
color: var(--text-dim); font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.role-editor-create input {
|
||||
width: 100%; padding: 9px 12px; margin-bottom: 14px;
|
||||
background: var(--bg-sink); color: var(--text);
|
||||
border: var(--hair); border-radius: var(--radius);
|
||||
font-family: inherit; font-size: .9rem; transition: .15s;
|
||||
}
|
||||
.role-editor-create input:focus { border-color: var(--accent); outline: none; }
|
||||
.role-editor-create .actions { display: flex; gap: 8px; }
|
||||
|
||||
/* ---- two-column body ---- */
|
||||
.role-editor-grid {
|
||||
display: grid; grid-template-columns: 280px 1fr; gap: 22px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 980px) {
|
||||
.role-editor-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.role-editor-sidebar h3,
|
||||
.role-editor-detail h3 {
|
||||
font-size: .82rem; text-transform: uppercase; letter-spacing: .14em;
|
||||
color: var(--text-dim); margin-bottom: 12px;
|
||||
border-bottom: var(--hair); padding-bottom: 8px;
|
||||
}
|
||||
.role-editor-detail h3 .name {
|
||||
color: var(--accent); font-family: 'JetBrains Mono', monospace;
|
||||
letter-spacing: .04em; text-transform: none;
|
||||
}
|
||||
|
||||
.role-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.role-card {
|
||||
position: relative; padding: 12px 14px;
|
||||
background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
|
||||
cursor: pointer; transition: .15s; overflow: hidden;
|
||||
}
|
||||
.role-card:hover { background: var(--bg-hover); border-color: var(--border-bright); }
|
||||
.role-card.active {
|
||||
background: var(--ember-soft); border-color: var(--accent);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
.role-card.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||||
background: var(--ember);
|
||||
}
|
||||
.role-card .role-name {
|
||||
font-family: 'Saira Condensed', sans-serif; font-weight: 700;
|
||||
font-size: .98rem; color: var(--text); letter-spacing: .04em;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.role-card .role-desc {
|
||||
color: var(--text-dim); font-size: .78rem; margin-top: 3px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.role-card .role-meta {
|
||||
color: var(--steel); font-size: .68rem; margin-top: 6px;
|
||||
font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
|
||||
}
|
||||
.role-card .role-badge-global {
|
||||
font-size: .72rem; color: var(--warning);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* ---- permissions ---- */
|
||||
.perm-group {
|
||||
background: var(--bg-card); border: var(--hair); border-radius: var(--radius);
|
||||
padding: 14px 16px 16px; margin-bottom: 14px;
|
||||
}
|
||||
.perm-group-header {
|
||||
font-family: 'Saira Condensed', sans-serif; font-weight: 600;
|
||||
font-size: .85rem; text-transform: uppercase; letter-spacing: .14em;
|
||||
color: var(--steel); margin-bottom: 12px;
|
||||
padding-bottom: 8px; border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.perm-grid {
|
||||
display: grid; gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||||
}
|
||||
.perm-item {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 9px 11px;
|
||||
background: var(--bg-sink); border: 1px solid var(--border); border-radius: 3px;
|
||||
cursor: pointer; transition: .12s;
|
||||
user-select: none;
|
||||
}
|
||||
.perm-item:hover { background: var(--bg-hover); border-color: var(--border-bright); }
|
||||
.perm-item.checked {
|
||||
background: var(--ember-soft);
|
||||
border-color: var(--accent);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,122,31,.18);
|
||||
}
|
||||
.perm-item input[type="checkbox"] {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
width: 14px; height: 14px; margin-top: 2px;
|
||||
background: var(--bg); border: 1px solid var(--border-bright);
|
||||
border-radius: 2px; cursor: pointer; flex: 0 0 14px;
|
||||
position: relative; transition: .12s;
|
||||
}
|
||||
.perm-item input[type="checkbox"]:checked {
|
||||
background: var(--accent); border-color: var(--accent);
|
||||
}
|
||||
.perm-item input[type="checkbox"]:checked::after {
|
||||
content: ''; position: absolute; left: 3px; top: 0px;
|
||||
width: 4px; height: 8px;
|
||||
border: solid #1a0d02; border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.perm-item .perm-body { min-width: 0; }
|
||||
.perm-item .perm-name {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: .82rem;
|
||||
color: var(--text); font-weight: 500; word-break: break-word;
|
||||
}
|
||||
.perm-item.checked .perm-name { color: var(--accent); }
|
||||
.perm-item .perm-desc {
|
||||
color: var(--text-dim); font-size: .72rem; line-height: 1.35; margin-top: 2px;
|
||||
}
|
||||
|
||||
.role-editor-actions {
|
||||
display: flex; gap: 10px; margin-top: 22px;
|
||||
padding-top: 18px; border-top: var(--hair);
|
||||
}
|
||||
|
||||
.role-editor-empty {
|
||||
background: var(--bg-card); border: 1px dashed var(--border);
|
||||
border-radius: var(--radius); padding: 40px 28px;
|
||||
text-align: center; color: var(--text-dim);
|
||||
font-family: 'JetBrains Mono', monospace; font-size: .85rem;
|
||||
}
|
||||
|
||||
/* ---- Responsive --------------------------------------------------------- */
|
||||
@media (max-width: 860px) {
|
||||
:root { --sidebar-w: 0px; }
|
||||
|
||||
Reference in New Issue
Block a user