refactor(css): merge profile + admin dark style
This commit is contained in:
Edouard Vanbelle
@@ -889,253 +889,6 @@
|
||||
background: var(--color-danger-hover-bg);
|
||||
}
|
||||
|
||||
/* ── admin.css ── */
|
||||
[data-theme="dark"] body {
|
||||
background: var(--color-bg-page);
|
||||
color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: var(--color-scrollbar-dark);
|
||||
}
|
||||
[data-theme="dark"] * {
|
||||
scrollbar-color: var(--color-scrollbar-dark) transparent;
|
||||
}
|
||||
[data-theme="dark"] .admin-tabs {
|
||||
background: var(--color-text-heading);
|
||||
box-shadow: 0 1px 4px var(--color-shadow-xl);
|
||||
}
|
||||
[data-theme="dark"] .admin-tab {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .admin-tab:hover {
|
||||
color: var(--color-border-light);
|
||||
background: var(--color-dark-footer);
|
||||
}
|
||||
[data-theme="dark"] .admin-card {
|
||||
background: var(--color-text-heading);
|
||||
box-shadow:
|
||||
0 1px 4px var(--color-shadow-xl),
|
||||
0 0 0 1px var(--color-border-dark-faint);
|
||||
}
|
||||
[data-theme="dark"] .admin-card h2 {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .stat-card {
|
||||
background: var(--color-dark-footer);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .stat-card:hover {
|
||||
box-shadow: 0 4px 12px var(--color-shadow-md);
|
||||
}
|
||||
[data-theme="dark"] .stat-value {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .stat-label {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .stat-card.warn {
|
||||
border-color: var(--color-badge-warning-text);
|
||||
background: var(--color-badge-warning-dark-bg);
|
||||
}
|
||||
[data-theme="dark"] .stat-card.danger {
|
||||
border-color: var(--color-error-text-dark);
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
}
|
||||
[data-theme="dark"] .progress-bar {
|
||||
background: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .table-wrap {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] th {
|
||||
background: var(--color-dark-footer);
|
||||
color: var(--color-text-subtle);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] td {
|
||||
border-bottom-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] tr:hover {
|
||||
background: var(--color-dark-footer);
|
||||
}
|
||||
[data-theme="dark"] .user-name {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .user-email {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .badge-admin {
|
||||
background: var(--color-role-admin-dark-bg);
|
||||
color: var(--color-admin-blue);
|
||||
}
|
||||
[data-theme="dark"] .badge-user {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .badge-active {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] .badge-inactive {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
}
|
||||
[data-theme="dark"] .badge-oidc {
|
||||
background: var(--color-badge-indigo-dark-bg);
|
||||
color: var(--color-badge-indigo-dark-text);
|
||||
}
|
||||
[data-theme="dark"] .badge-local {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .btn-secondary {
|
||||
background: var(--color-text-heading);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .btn-secondary:hover {
|
||||
background: var(--color-border);
|
||||
border-color: var(--color-dark-mid);
|
||||
}
|
||||
[data-theme="dark"] .btn-danger {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
border-color: var(--color-error-text-dark);
|
||||
}
|
||||
[data-theme="dark"] .btn-danger:hover {
|
||||
background: var(--color-badge-error-dark-bg-hover);
|
||||
}
|
||||
[data-theme="dark"] .btn-success {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
color: var(--color-success-text-vivid);
|
||||
border-color: var(--color-badge-success-text);
|
||||
}
|
||||
[data-theme="dark"] .btn-success:hover {
|
||||
background: var(--color-badge-success-fill-dark);
|
||||
}
|
||||
[data-theme="dark"] .form-group label {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .form-group input[type="text"],
|
||||
[data-theme="dark"] .form-group input[type="password"],
|
||||
[data-theme="dark"] .form-group input[type="url"],
|
||||
[data-theme="dark"] .form-group input[type="number"],
|
||||
[data-theme="dark"] .form-group select {
|
||||
background: var(--color-bg-page);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] .form-group input:focus,
|
||||
[data-theme="dark"] .form-group select:focus {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-bg-page);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
|
||||
}
|
||||
[data-theme="dark"] .form-group small {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .toggle-row label {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .slider {
|
||||
background: var(--color-dark-mid);
|
||||
}
|
||||
[data-theme="dark"] .readonly-field {
|
||||
background: var(--color-bg-page);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] .readonly-field button {
|
||||
background: var(--color-text-heading);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .readonly-field button:hover {
|
||||
background: var(--color-border);
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .warning {
|
||||
background: var(--color-badge-warning-dark-bg);
|
||||
border-color: var(--color-badge-warning-text);
|
||||
color: var(--color-star-text);
|
||||
}
|
||||
[data-theme="dark"] .alert-success {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
color: var(--color-success-text-vivid);
|
||||
border-color: var(--color-badge-success-text);
|
||||
}
|
||||
[data-theme="dark"] .alert-error {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
border-color: var(--color-error-text-dark);
|
||||
}
|
||||
[data-theme="dark"] .alert-info {
|
||||
background: var(--color-badge-blue-dark-bg);
|
||||
color: var(--color-badge-blue-dark-text);
|
||||
border-color: var(--color-role-admin-text);
|
||||
}
|
||||
[data-theme="dark"] .discovery-result.ok {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
border-color: var(--color-badge-success-text);
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] .discovery-result.fail {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
border-color: var(--color-error-text-dark);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
}
|
||||
[data-theme="dark"] details {
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] details summary {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] details summary:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
[data-theme="dark"] details[open] summary {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
[data-theme="dark"] .modal {
|
||||
background: var(--color-text-heading);
|
||||
box-shadow: 0 20px 60px var(--color-shadow-4xl);
|
||||
}
|
||||
[data-theme="dark"] .modal h3 {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .modal-overlay {
|
||||
background: var(--color-overlay-mid);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
[data-theme="dark"] .quota-text {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .pagination {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] #access-denied h2 {
|
||||
color: var(--color-multiselect-danger-text);
|
||||
}
|
||||
[data-theme="dark"] #access-denied p {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .modal-confirm p {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .btn-danger {
|
||||
background: linear-gradient(135deg, var(--color-danger-alt), var(--color-error-text));
|
||||
}
|
||||
[data-theme="dark"] #access-denied .access-icon {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
}
|
||||
[data-theme="dark"] #loading {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .toggle-row {
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ── inlineViewer.css ── */
|
||||
[data-theme="dark"] .inline-viewer-progress {
|
||||
background: var(--color-progress-overlay-dark);
|
||||
@@ -1170,231 +923,6 @@
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
/* ── profile.css ── */
|
||||
[data-theme="dark"] body {
|
||||
background: var(--color-bg-page);
|
||||
color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: var(--color-scrollbar-dark);
|
||||
}
|
||||
[data-theme="dark"] * {
|
||||
scrollbar-color: var(--color-scrollbar-dark) transparent;
|
||||
}
|
||||
[data-theme="dark"] .profile-card {
|
||||
background: var(--color-text-heading);
|
||||
box-shadow:
|
||||
0 1px 4px var(--color-shadow-xl),
|
||||
0 0 0 1px var(--color-border-dark-faint);
|
||||
}
|
||||
[data-theme="dark"] .profile-card h2 {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .avatar-info h1 {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .avatar-info .email {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .role-badge-admin {
|
||||
background: var(--color-role-admin-dark-bg);
|
||||
color: var(--color-admin-blue);
|
||||
}
|
||||
[data-theme="dark"] .role-badge-user {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .info-item {
|
||||
background: var(--color-dark-footer);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .info-item .info-label {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .info-item .info-label i {
|
||||
color: var(--color-dark-mid);
|
||||
}
|
||||
[data-theme="dark"] .info-item .info-value {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .storage-stat {
|
||||
background: var(--color-dark-footer);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .storage-stat .stat-value {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .storage-stat .stat-label {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .storage-bar {
|
||||
background: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .storage-text {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .form-group label {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .form-group input {
|
||||
background: var(--color-bg-page);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] .form-group input:focus {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-bg-page);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
|
||||
}
|
||||
[data-theme="dark"] .form-group small {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .alert-success {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
color: var(--color-success-text-vivid);
|
||||
border-color: var(--color-badge-success-text);
|
||||
}
|
||||
[data-theme="dark"] .alert-error {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
border-color: var(--color-error-text-dark);
|
||||
}
|
||||
[data-theme="dark"] #auth-error {
|
||||
background: transparent;
|
||||
}
|
||||
[data-theme="dark"] #auth-error .err-icon {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
}
|
||||
[data-theme="dark"] #auth-error h2 {
|
||||
color: var(--color-multiselect-danger-text);
|
||||
}
|
||||
[data-theme="dark"] #auth-error p {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .section-desc {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .checkbox-label {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .form-select {
|
||||
background: var(--color-bg-page);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] .form-select:focus {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-bg-page);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
|
||||
}
|
||||
[data-theme="dark"] .btn-secondary {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-dark-mid);
|
||||
}
|
||||
[data-theme="dark"] .btn-secondary:hover {
|
||||
background: var(--color-dark-mid);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-table th {
|
||||
color: var(--color-text-subtle);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-table td {
|
||||
border-bottom-color: var(--color-text-heading);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-label-cell {
|
||||
color: var(--color-border-light);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-prefix code {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .badge-active {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] .badge-expired {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-empty {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-token-input {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
border-color: var(--color-badge-success-text);
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-instr-list code {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] #loading {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-desc {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-create input {
|
||||
background: var(--color-bg-page);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-create input:focus {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-bg-page);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-created {
|
||||
background: var(--color-badge-success-dark-bg);
|
||||
border-color: var(--color-badge-success-text);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-created-label {
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-created-value code {
|
||||
background: var(--color-badge-success-fill-dark);
|
||||
color: var(--color-success-text-vivid);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-created small {
|
||||
color: var(--color-badge-success-border);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-table thead th {
|
||||
color: var(--color-text-subtle);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-table tbody td {
|
||||
color: var(--color-text);
|
||||
border-bottom-color: var(--color-text-heading);
|
||||
}
|
||||
[data-theme="dark"] .btn-danger-sm {
|
||||
background: var(--color-badge-error-dark-bg);
|
||||
color: var(--color-multiselect-danger-text);
|
||||
}
|
||||
[data-theme="dark"] .btn-danger-sm:hover {
|
||||
background: var(--color-badge-error-dark-bg-hover);
|
||||
color: var(--color-badge-error-border);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-empty {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-auto-section {
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-auto-toggle {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-auto-toggle:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-auto-count {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
[data-theme="dark"] .app-pw-auto-desc {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
/* ── shared.css ── */
|
||||
[data-theme="dark"] .shared-filters {
|
||||
background-color: var(--color-bg-subtle);
|
||||
|
||||
@@ -198,7 +198,7 @@ body {
|
||||
}
|
||||
.info-item {
|
||||
padding: 16px;
|
||||
background: var(--color-bg-hover);
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
@@ -305,11 +305,14 @@ body {
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
background: var(--color-bg-hover);
|
||||
background: var(--color-bg-input);
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
.form-group input:hover {
|
||||
background: var(--color-bg-surface);
|
||||
}
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
@@ -639,11 +642,16 @@ body {
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
background: var(--color-bg-hover);
|
||||
background: var(--color-bg-input);
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.app-pw-create input:hover {
|
||||
background: var(--color-bg-surface);
|
||||
}
|
||||
|
||||
.app-pw-create input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
|
||||
Reference in New Issue
Block a user