fix css and fonts
This commit is contained in:
@@ -1,5 +1,3 @@
|
||||
/* Abuse registration POC — styled to match the FLÓ/zeitkort POC shell. */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
:root,
|
||||
@@ -9,7 +7,7 @@
|
||||
--fg: #1a1d22;
|
||||
--muted: #595f68;
|
||||
--dim: #9299a2;
|
||||
--border: rgba(26, 29, 34, 0.12);
|
||||
--border: rgba(26, 29, 34, 0.1);
|
||||
--border-soft: rgba(26, 29, 34, 0.06);
|
||||
--dotted: rgba(26, 29, 34, 0.12);
|
||||
--field-bg: rgba(26, 29, 34, 0.03);
|
||||
@@ -18,10 +16,10 @@
|
||||
--btn-bg-hover: rgba(26, 29, 34, 0.09);
|
||||
--btn-border: rgba(26, 29, 34, 0.18);
|
||||
--header-border: rgba(26, 29, 34, 0.12);
|
||||
--link: #2c5a7a;
|
||||
--accent: #2c5a7a;
|
||||
--nav-bg: rgba(244, 241, 236, 0.6);
|
||||
--bg-panel: rgba(255, 253, 250, 0.72);
|
||||
--link: #0f527d;
|
||||
--accent: #164f75;
|
||||
--nav-bg: rgba(255, 253, 250, 0.92);
|
||||
--bg-panel: rgba(255, 255, 255, 0.85);
|
||||
--notice-fg: #2a6e2a;
|
||||
--notice-bg: rgba(42, 110, 42, 0.06);
|
||||
--notice-border: rgba(42, 110, 42, 0.25);
|
||||
@@ -29,45 +27,45 @@
|
||||
--error-bg: rgba(160, 48, 48, 0.06);
|
||||
--error-border: rgba(160, 48, 48, 0.25);
|
||||
--shadow: rgba(0, 0, 0, 0.12);
|
||||
--toggle-bg: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
|
||||
--toggle-bg: linear-gradient(135deg, #24273a 0%, #8aadf4 100%);
|
||||
--toggle-border: rgba(26, 29, 34, 0.2);
|
||||
--toggle-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="tokyo"] {
|
||||
[data-theme="macchiato"] {
|
||||
color-scheme: dark;
|
||||
--bg: #07070d;
|
||||
--fg: #e8f4ff;
|
||||
--muted: #a3b3cc;
|
||||
--dim: #7886a0;
|
||||
--border: rgba(100, 220, 255, 0.12);
|
||||
--border-soft: rgba(100, 220, 255, 0.06);
|
||||
--dotted: rgba(100, 220, 255, 0.1);
|
||||
--field-bg: rgba(100, 220, 255, 0.04);
|
||||
--field-border: rgba(100, 220, 255, 0.15);
|
||||
--btn-bg: rgba(100, 220, 255, 0.06);
|
||||
--btn-bg-hover: rgba(100, 220, 255, 0.1);
|
||||
--btn-border: rgba(100, 220, 255, 0.18);
|
||||
--header-border: rgba(100, 220, 255, 0.12);
|
||||
--link: #64dcff;
|
||||
--accent: #64dcff;
|
||||
--nav-bg: rgba(7, 7, 13, 0.65);
|
||||
--bg-panel: rgba(15, 16, 28, 0.72);
|
||||
--notice-fg: #8fe08f;
|
||||
--notice-bg: rgba(143, 224, 143, 0.06);
|
||||
--notice-border: rgba(143, 224, 143, 0.25);
|
||||
--error-fg: #ff9b9b;
|
||||
--error-bg: rgba(255, 155, 155, 0.06);
|
||||
--error-border: rgba(255, 155, 155, 0.2);
|
||||
--shadow: rgba(0, 0, 0, 0.5);
|
||||
--toggle-bg: #f4f1ec;
|
||||
--toggle-border: rgba(100, 220, 255, 0.4);
|
||||
--toggle-shadow: 0 0 10px rgba(100, 220, 255, 0.5), 0 0 25px rgba(100, 220, 255, 0.3);
|
||||
--bg: #181926;
|
||||
--fg: #cad3f5;
|
||||
--muted: #a5adcb;
|
||||
--dim: #8087a2;
|
||||
--border: rgba(165, 173, 203, 0.15);
|
||||
--border-soft: rgba(165, 173, 203, 0.08);
|
||||
--dotted: rgba(165, 173, 203, 0.12);
|
||||
--field-bg: rgba(165, 173, 203, 0.08);
|
||||
--field-border: rgba(165, 173, 203, 0.2);
|
||||
--btn-bg: rgba(165, 173, 203, 0.1);
|
||||
--btn-bg-hover: rgba(165, 173, 203, 0.15);
|
||||
--btn-border: rgba(165, 173, 203, 0.22);
|
||||
--header-border: rgba(165, 173, 203, 0.12);
|
||||
--link: #8aadf4;
|
||||
--accent: #8aadf4;
|
||||
--nav-bg: rgba(36, 39, 58, 0.65);
|
||||
--bg-panel: #24273a;
|
||||
--notice-fg: #a6da95;
|
||||
--notice-bg: rgba(166, 218, 149, 0.08);
|
||||
--notice-border: rgba(166, 218, 149, 0.25);
|
||||
--error-fg: #ed8796;
|
||||
--error-bg: rgba(237, 135, 150, 0.08);
|
||||
--error-border: rgba(237, 135, 150, 0.25);
|
||||
--shadow: rgba(0, 0, 0, 0.35);
|
||||
--toggle-bg: #1e2030;
|
||||
--toggle-border: rgba(138, 173, 244, 0.4);
|
||||
--toggle-shadow: 0 0 10px rgba(138, 173, 244, 0.4), 0 0 25px rgba(138, 173, 244, 0.2);
|
||||
}
|
||||
|
||||
html, body { max-width: 100%; overflow-x: hidden; }
|
||||
body {
|
||||
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
font-family: 'Noto Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.55;
|
||||
@@ -140,7 +138,7 @@ header {
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
[data-theme="tokyo"] .brand { color: #e8f4ff; text-shadow: 0 0 8px rgba(100, 220, 255, 0.3); }
|
||||
[data-theme="macchiato"] .brand { color: #cad3f5; text-shadow: 0 0 8px rgba(138, 173, 244, 0.25); }
|
||||
|
||||
footer {
|
||||
padding: 0.9rem 1.5rem;
|
||||
@@ -161,7 +159,7 @@ footer a:hover { color: var(--accent); }
|
||||
.footer-icon { color: var(--muted); text-decoration: none; display: flex; align-items: center; border-bottom: none; transition: color 0.25s ease; }
|
||||
.footer-icon:hover { color: var(--accent); border-bottom: none; }
|
||||
|
||||
h1, h2, h3 { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-weight: 700; letter-spacing: -0.02em; }
|
||||
h1, h2, h3 { font-family: 'Noto Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-weight: 700; letter-spacing: -0.02em; }
|
||||
h1 { margin: 0 0 0.9rem; font-size: clamp(1.35rem, 4vw, 2rem); }
|
||||
h2 { margin: 0 0 0.9rem; font-size: 1.1rem; }
|
||||
h3 { margin: 1rem 0 0.4rem; font-size: 0.86rem; color: var(--fg); }
|
||||
@@ -215,7 +213,7 @@ pre {
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
[data-theme="tokyo"] pre { background: rgba(100, 220, 255, 0.04); }
|
||||
[data-theme="macchiato"] pre { background: rgba(138, 173, 244, 0.04); }
|
||||
|
||||
.harmonium {
|
||||
display: grid;
|
||||
@@ -282,8 +280,8 @@ select, input[type=text], input[type=number], input:not([type]) {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
[data-theme="tokyo"] select,
|
||||
[data-theme="tokyo"] option { background: #0f1018; color: #e8f4ff; }
|
||||
[data-theme="macchiato"] select,
|
||||
[data-theme="macchiato"] option { background: #1e2030; color: #cad3f5; }
|
||||
select:focus, input:focus { border-color: var(--accent); }
|
||||
label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.75rem; }
|
||||
label input, label select { margin-top: 0.25rem; }
|
||||
@@ -340,7 +338,7 @@ button:hover { background: var(--btn-bg-hover); }
|
||||
}
|
||||
.reset-label { font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
|
||||
.reset-countdown {
|
||||
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
font-family: 'Noto Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
font-size: clamp(1.5rem, 6vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
(function () {
|
||||
function currentSystemTheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'macchiato' : 'light';
|
||||
}
|
||||
|
||||
var btn = document.getElementById('theme-toggle');
|
||||
if (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var current = document.documentElement.getAttribute('data-theme') || 'light';
|
||||
var next = current === 'light' ? 'tokyo' : 'light';
|
||||
var next = current === 'light' ? 'macchiato' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('poc-theme', next);
|
||||
window.dispatchEvent(new Event('theme-change'));
|
||||
|
||||
Reference in New Issue
Block a user