v_2.2
This commit is contained in:
jpmvaz
@@ -0,0 +1,980 @@
|
||||
/* ============================================================
|
||||
ADMIN PANEL — darker, more clinical than the main app
|
||||
Supports light (default) and dark themes via [data-theme]
|
||||
============================================================ */
|
||||
|
||||
:root,
|
||||
:root[data-theme="light"] {
|
||||
--paper: #eae3d3;
|
||||
--paper-deep: #ddd5c2;
|
||||
--ink: #141210;
|
||||
--ink-soft: #2d2822;
|
||||
--ink-muted: #5e564b;
|
||||
--rule: #bcb09c;
|
||||
--rule-soft: #d2c7b3;
|
||||
--accent: #8a2a1a;
|
||||
--accent-soft: #b8553f;
|
||||
--highlight: #d6c26a;
|
||||
--ok: #2a6635;
|
||||
--warn: #965f1a;
|
||||
--diagonal-stripe: rgba(20, 18, 16, 0.02);
|
||||
--grain-opacity: 0.3;
|
||||
--modal-backdrop: rgba(20, 18, 16, 0.5);
|
||||
|
||||
--font-display: "Fraunces", Georgia, serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--paper: #13110e;
|
||||
--paper-deep: #1c1913;
|
||||
--ink: #e4dac2;
|
||||
--ink-soft: #c0b49a;
|
||||
--ink-muted: #807663;
|
||||
--rule: #342d22;
|
||||
--rule-soft: #26211a;
|
||||
--accent: #c65840;
|
||||
--accent-soft: #df7f63;
|
||||
--highlight: #c9ab47;
|
||||
--ok: #65a572;
|
||||
--warn: #c68c43;
|
||||
--diagonal-stripe: rgba(228, 218, 194, 0.025);
|
||||
--grain-opacity: 0.1;
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0; height: 100%;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01", "onum";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-image:
|
||||
repeating-linear-gradient(45deg, transparent 0, transparent 30px, var(--diagonal-stripe) 30px, var(--diagonal-stripe) 31px);
|
||||
}
|
||||
|
||||
.grain {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
opacity: var(--grain-opacity);
|
||||
mix-blend-mode: multiply;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .grain {
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ============================================================
|
||||
AUTH SCREENS
|
||||
============================================================ */
|
||||
.auth-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
padding: 44px 40px 36px;
|
||||
box-shadow: 10px 10px 0 var(--accent);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.auth-brand h1 {
|
||||
margin: 0;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.auth-tagline {
|
||||
margin: 8px 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.admin-badge {
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.22em;
|
||||
font-weight: 700;
|
||||
color: var(--paper);
|
||||
background: var(--accent);
|
||||
padding: 4px 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.admin-badge.small {
|
||||
margin-bottom: 0;
|
||||
margin-right: 14px;
|
||||
font-size: 0.6rem;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.auth-form { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.auth-intro {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.92rem;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.auth-label { display: flex; flex-direction: column; gap: 6px; }
|
||||
.auth-label > span {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.auth-label small {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.66rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.auth-label input,
|
||||
.auth-label select {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--paper-deep);
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
}
|
||||
.auth-label input:focus,
|
||||
.auth-label select:focus {
|
||||
background: var(--paper);
|
||||
box-shadow: 3px 3px 0 var(--accent);
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
margin-top: 8px;
|
||||
padding: 12px 18px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.auth-btn:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
padding: 10px 14px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
border-left: 3px solid var(--accent);
|
||||
color: var(--accent);
|
||||
font-size: 0.88rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MASTHEAD
|
||||
============================================================ */
|
||||
.masthead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
.masthead-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.masthead-title h1 {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
}
|
||||
.tagline {
|
||||
margin: 4px 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.masthead-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
background: transparent;
|
||||
border: 1px solid var(--rule);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.logout-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
/* Back-to-archive button */
|
||||
.back-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--paper);
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-weight: 500;
|
||||
}
|
||||
.back-btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); transform: translateY(-1px); }
|
||||
|
||||
/* Site footer (shown on the admin view) */
|
||||
#adminApp:not(.hidden) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.admin-main { flex: 1 0 auto; }
|
||||
|
||||
.site-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 14px 40px;
|
||||
border-top: 1px solid var(--ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
text-align: center;
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.site-footer { padding: 12px 20px; font-size: 0.62rem; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
THEME TOGGLE
|
||||
============================================================ */
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper-deep);
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.theme-toggle svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.theme-toggle:hover svg { transform: rotate(25deg); }
|
||||
:root[data-theme="dark"] .theme-toggle:hover svg { transform: rotate(-25deg); }
|
||||
|
||||
.theme-toggle .icon-sun { display: inline-block; }
|
||||
.theme-toggle .icon-moon { display: none; }
|
||||
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
|
||||
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; }
|
||||
|
||||
/* Floating variant shown on auth/setup screens */
|
||||
.theme-toggle-float {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
body:has(#adminApp:not(.hidden)) .theme-toggle-float { display: none; }
|
||||
|
||||
/* ============================================================
|
||||
MAIN
|
||||
============================================================ */
|
||||
.admin-main {
|
||||
padding: 36px 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Tab navigation */
|
||||
.admin-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
.admin-tab {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
color: var(--ink-muted);
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
padding: 10px 22px;
|
||||
cursor: pointer;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
.admin-tab:hover {
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.admin-tab.active {
|
||||
background: var(--paper);
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
.admin-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
height: 4px;
|
||||
background: var(--paper);
|
||||
}
|
||||
.admin-panel { animation: fadeIn 0.2s ease-out; }
|
||||
|
||||
.section-heading {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.toolbar-meta {
|
||||
margin: 6px 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
padding: 10px 18px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.primary-btn:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
USER TABLE
|
||||
============================================================ */
|
||||
.user-list-wrap {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.user-table thead {
|
||||
background: var(--paper-deep);
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
.user-table th {
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
font-weight: 500;
|
||||
}
|
||||
.user-table td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--rule-soft);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-table tr:last-child td { border-bottom: none; }
|
||||
.user-table tr:hover td { background: color-mix(in srgb, var(--paper-deep) 70%, transparent); }
|
||||
|
||||
.username-cell {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.username-cell .me-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.1em;
|
||||
background: var(--accent);
|
||||
color: var(--paper);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.role-pill {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper-deep);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.role-pill.admin {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.role-pill:hover { border-color: var(--accent); }
|
||||
|
||||
.mfa-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.mfa-indicator.on { color: var(--ok); }
|
||||
.mfa-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--ink-muted);
|
||||
}
|
||||
.mfa-indicator.on .mfa-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(42, 102, 53, 0.18); }
|
||||
|
||||
.date-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row-actions button {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.row-actions button:hover {
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
.row-actions button.danger:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.loading-row, .empty-row {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* File table specifics */
|
||||
.filename-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
word-break: break-all;
|
||||
max-width: 280px;
|
||||
}
|
||||
.folder-cell {
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.folder-cell.uncategorized { color: var(--ink-muted); font-style: italic; }
|
||||
|
||||
.status-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.status-pill.ready { color: var(--ok); }
|
||||
.status-pill.indexing { color: var(--warn); }
|
||||
.status-pill.failed { color: var(--accent); }
|
||||
|
||||
.size-cell, .num-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
color: var(--ink-soft);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PERMISSIONS TAB
|
||||
============================================================ */
|
||||
.view-switch {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
.view-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
background: transparent;
|
||||
color: var(--ink-muted);
|
||||
border: none;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.view-btn:hover { color: var(--ink); }
|
||||
.view-btn.active {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.perm-hint {
|
||||
font-size: 0.88rem;
|
||||
font-style: italic;
|
||||
color: var(--ink-muted);
|
||||
margin: 0 0 18px;
|
||||
padding: 12px 16px;
|
||||
background: var(--paper-deep);
|
||||
border-left: 3px solid var(--accent-soft);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.perm-matrix-wrap {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
overflow-x: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.perm-matrix {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.perm-matrix thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--paper-deep);
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
|
||||
.perm-matrix th.rowhead,
|
||||
.perm-matrix td.rowhead {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: var(--paper-deep);
|
||||
border-right: 1px solid var(--rule);
|
||||
min-width: 180px;
|
||||
max-width: 260px;
|
||||
}
|
||||
.perm-matrix thead th.rowhead {
|
||||
z-index: 3; /* top-left corner sits above both sticky axes */
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
|
||||
.perm-matrix .col-header {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
white-space: nowrap;
|
||||
padding: 14px 8px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: 0.92rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: var(--ink);
|
||||
max-height: 220px;
|
||||
height: 220px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.perm-matrix .rowlabel {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
padding: 10px 14px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.perm-matrix .rowlabel .role-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 6px;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.perm-matrix .rowlabel.admin-row {
|
||||
color: var(--ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.perm-matrix .cell {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid var(--rule-soft);
|
||||
border-right: 1px solid var(--rule-soft);
|
||||
width: 52px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.perm-matrix .cell label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.perm-matrix .cell label:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.perm-matrix .cell input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
.perm-matrix .cell input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.perm-matrix .cell.implicit {
|
||||
background: color-mix(in srgb, var(--ink) 6%, transparent);
|
||||
}
|
||||
.perm-matrix .cell.implicit::after {
|
||||
content: "✓";
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.perm-empty {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MODAL
|
||||
============================================================ */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--modal-backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
z-index: 200;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
.modal-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
padding: 36px 36px 30px;
|
||||
max-width: 440px;
|
||||
width: 100%;
|
||||
box-shadow: 8px 8px 0 var(--accent);
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-card.wide { max-width: 720px; }
|
||||
.modal-card h2 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
.modal-subtitle {
|
||||
margin: 0 0 24px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: var(--ink-muted);
|
||||
transition: color 0.15s, transform 0.15s;
|
||||
}
|
||||
.modal-close:hover {
|
||||
color: var(--accent);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MFA PANEL
|
||||
============================================================ */
|
||||
.mfa-panel {
|
||||
padding: 20px;
|
||||
background: var(--paper-deep);
|
||||
border: 1px solid var(--rule);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mfa-status {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.mfa-status.enabled { color: var(--ok); }
|
||||
.mfa-status .badge {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.65rem;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.mfa-status.enabled .badge {
|
||||
background: var(--ok);
|
||||
color: var(--paper);
|
||||
}
|
||||
.mfa-status .badge.off {
|
||||
background: var(--ink-muted);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.mfa-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mfa-actions button {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.92rem;
|
||||
padding: 8px 16px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.mfa-actions button.primary {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
.mfa-actions button:hover {
|
||||
background: var(--accent);
|
||||
color: var(--paper);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.mfa-enroll {
|
||||
padding: 20px;
|
||||
background: var(--paper-deep);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.enroll-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.enroll-qr {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.enroll-qr img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.enroll-step {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.secret-box {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.08em;
|
||||
background: var(--ink);
|
||||
color: var(--highlight);
|
||||
padding: 10px 14px;
|
||||
margin: 0 0 16px;
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.confirm-form { margin-top: 4px; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.enroll-grid { grid-template-columns: 1fr; }
|
||||
.enroll-qr { max-width: 240px; margin: 0 auto; }
|
||||
.admin-main { padding: 20px; }
|
||||
.masthead { padding: 14px 20px; }
|
||||
.user-table th:nth-child(4),
|
||||
.user-table td:nth-child(4) { display: none; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TOAST
|
||||
============================================================ */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 12px 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.06em;
|
||||
border-left: 3px solid var(--accent);
|
||||
z-index: 1000;
|
||||
animation: toastSlide 0.3s ease-out;
|
||||
}
|
||||
@keyframes toastSlide {
|
||||
from { opacity: 0; transform: translate(-50%, 20px); }
|
||||
to { opacity: 1; transform: translate(-50%, 0); }
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--paper); }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
|
||||
Reference in New Issue
Block a user