FLO/abuse-registration-api-golang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css and fonts

Browse Source
This commit is contained in:
bartal-lsn
2026-08-24 10:56:12 +01:00
parent 8b947d28c3
commit c25e6f70be
3 changed files with 47 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/css/style.css
+41 -43
View File
@@ -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;
internal/web/static/js/theme.js
+2 -2
View File
@@ -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'));
internal/web/templates/index.html
+4 -1
View File
@@ -8,11 +8,14 @@
<script>
(function () {
var stored = localStorage.getItem('poc-theme');
var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'macchiato' : 'light');
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>