Spaces:
Runtime error
Runtime error
File size: 4,149 Bytes
46252cd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
:root {
--primary: #25d366;
--primary-hover: #1da851;
--primary-soft: rgba(37, 211, 102, 0.12);
--bg-light: #f8fafc;
--bg-white: #ffffff;
--bg-card: #ffffff;
--text-primary: #0f172a; /* Slate 900 */
--text-secondary: #475569; /* Slate 600 */
--text-muted: #94a3b8; /* Slate 400 */
--border: #e2e8f0; /* Slate 200 */
--error: #ef4444;
--success: #22c55e;
--warning: #f59e0b;
--info: #2563eb; /* Blue 600 — info/permission/log badges + qr-ready pill */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--radius: 10px;
}
/* Dark Mode */
[data-theme='dark'] {
/* Make native controls (select option popups, scrollbars, date pickers) follow the EXPLICIT
app theme, not just the OS preference — otherwise toggling dark while the OS is light left
native dropdowns rendered in the light scheme (#249). */
color-scheme: dark;
--bg-light: #0f172a; /* Slate 900 */
--bg-white: #1e293b; /* Slate 800 */
--bg-card: #1e293b;
--text-primary: #f1f5f9; /* Slate 100 */
--text-secondary: #cbd5e1; /* Slate 300 */
--text-muted: #64748b; /* Slate 500 */
--border: #334155; /* Slate 700 */
--info: #60a5fa; /* Blue 400 — lighter so it reads over the dark translucent-blue tints */
--primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}
/* Explicit light toggle: keep native controls light even if the OS prefers dark. */
[data-theme='light'] {
color-scheme: light;
}
/* System preference dark mode */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
/* Match native controls (e.g. the Login page <select> option popup) to the dark theme.
The Login screen never sets data-theme, so it relies solely on this block — without an
explicit color-scheme the popup rendered light, leaving the light option text illegible (#249). */
color-scheme: dark;
--bg-light: #0f172a;
--bg-white: #1e293b;
--bg-card: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #64748b;
--border: #334155;
--info: #60a5fa;
--primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
'Plus Jakarta Sans',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--bg-light);
color: var(--text-primary);
line-height: 1.6;
}
button {
font-family: inherit;
}
input,
select,
textarea {
font-family: inherit;
background: var(--bg-white);
color: var(--text-primary);
border-color: var(--border);
}
a {
color: var(--primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Error banner — shared across pages (moved out of Plugins.css so any page can use it). */
.error-banner {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.error-banner svg {
color: var(--error);
}
.error-banner-text {
color: var(--error);
}
/* yarl theme — match dashboard dark palette. */
.yarl__container {
--yarl__color_backdrop: rgba(0, 0, 0, 0.92);
}
.yarl__button {
--yarl__color_button: rgba(255, 255, 255, 0.9);
}
|