/* ================================================================ ADMIN SETTINGS MODULE — CSS Add a link to this file in your base.stpl : ================================================================ */ /* ── Layout helpers ─────────────────────────────────────────── */ .container-narrow { max-width: 600px; margin: 0 auto; padding: 0 var(--spacing-xl); } .card { background: var(--bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); } /* ── Page header: title left, action button right ───────────── */ .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); } .admin-header h1 { margin-bottom: 0; } /* ── User table ─────────────────────────────────────────────── */ .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { text-align: left; padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-surface); border-bottom: 2px solid var(--color-border); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .admin-table td { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover { background: var(--bg-surface); } .admin-table tr.row-inactive td { opacity: 0.5; } /* ── Status dot ─────────────────────────────────────────────── */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; position: relative; top: -1px; } .status-active { background: var(--color-success); } .status-inactive { background: var(--text-muted); } /* ── Role badges ────────────────────────────────────────────── */ .role-badge { display: inline-block; padding: 2px 9px; font-size: 0.72rem; font-weight: 600; background: rgba(229, 192, 123, 0.1); color: var(--color-primary); border: var(--border-width) solid rgba(229, 192, 123, 0.3); margin-right: 4px; white-space: nowrap; } .role-badge-admin { background: rgba(224, 108, 117, 0.1); color: var(--color-danger); border-color: rgba(224, 108, 117, 0.3); } /* "you" label next to the current user's name */ .you-badge { display: inline-block; padding: 1px 7px; font-size: 0.7rem; font-weight: 600; background: rgba(229, 192, 123, 0.1); color: var(--color-primary); border: var(--border-width) solid rgba(229, 192, 123, 0.3); margin-left: 6px; vertical-align: middle; } /* ── Small button modifier ──────────────────────────────────── */ .btn-sm { padding: 3px 10px; font-size: 0.8rem; } /* ── Semantic button variants ───────────────────────────────── */ .btn-danger { color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger); color: var(--bg-base); text-decoration: none; } .btn-warning { color: var(--color-warning); border-color: var(--color-warning); } .btn-warning:hover { background: var(--color-warning); color: var(--bg-base); text-decoration: none; } .btn-success { color: var(--color-success); border-color: var(--color-success); } .btn-success:hover { background: var(--color-success); color: var(--bg-base); text-decoration: none; } /* ── Table action cell ──────────────────────────────────────── */ .action-cell { display: flex; gap: var(--spacing-xs); align-items: center; flex-wrap: wrap; } /* ── Edit form section divider ──────────────────────────────── */ .admin-section { margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border); } .admin-section h3 { margin-bottom: var(--spacing-lg); color: var(--text-muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Form hint text ─────────────────────────────────────────── */ .form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--spacing-xs); }