admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

bugfix: the whole theming structure overhauled. light/dark mode icon added.

Browse Source
This commit is contained in:
Admin
2026-04-29 01:22:53 +03:30
parent bdd889ac09
commit a264523e12
20 changed files with 422 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/styles/background-web.css Normal file
View File

@@ -0,0 +1,59 @@
.app-web-bg {
position: relative;
isolation: isolate;
background-color: var(--color-background-primary);
overflow: hidden;
}
.app-web-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: calc(var(--web-opacity) * 0.9);
background: radial-gradient(circle at 84% 73%, rgba(12, 126, 196, 0.14), transparent 44%);
}
.app-web-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.96;
background:
/* crisp bright edges (zoomed-out composition) */
linear-gradient(150deg, transparent 77.35%, var(--web-line-strong) 77.48%, var(--web-line-strong) 77.56%, transparent 77.69%),
linear-gradient(122deg, transparent 69.65%, var(--web-line-strong) 69.78%, var(--web-line-strong) 69.86%, transparent 69.99%),
linear-gradient(31deg, transparent 77.75%, var(--web-line-strong) 77.88%, var(--web-line-strong) 77.96%, transparent 78.09%),
linear-gradient(8deg, transparent 80.95%, var(--web-line-strong) 81.08%, var(--web-line-strong) 81.16%, transparent 81.29%),
linear-gradient(171deg, transparent 86.75%, var(--web-line-strong) 86.88%, var(--web-line-strong) 86.96%, transparent 87.09%),
linear-gradient(39deg, transparent 88.45%, var(--web-line-strong) 88.58%, var(--web-line-strong) 88.66%, transparent 88.79%),
/* secondary mesh lines */
linear-gradient(145deg, transparent 75.65%, var(--web-line) 75.77%, var(--web-line) 75.84%, transparent 75.96%),
linear-gradient(18deg, transparent 83.15%, var(--web-line) 83.27%, var(--web-line) 83.34%, transparent 83.46%),
linear-gradient(58deg, transparent 89.25%, var(--web-line) 89.37%, var(--web-line) 89.44%, transparent 89.56%),
linear-gradient(112deg, transparent 81.85%, var(--web-line) 81.97%, var(--web-line) 82.04%, transparent 82.16%),
linear-gradient(176deg, transparent 92.25%, var(--web-line) 92.37%, var(--web-line) 92.44%, transparent 92.56%),
/* compact nodes (less blur) */
radial-gradient(circle at 84% 73%, var(--web-glow) 0 0.12rem, transparent 0.34rem),
radial-gradient(circle at 76.5% 81.5%, var(--web-glow) 0 0.11rem, transparent 0.32rem),
radial-gradient(circle at 92.5% 86.2%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
radial-gradient(circle at 86.2% 66.8%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
radial-gradient(circle at 97.2% 58.6%, var(--web-glow) 0 0.08rem, transparent 0.26rem),
radial-gradient(circle at 73.8% 93.1%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
radial-gradient(circle at 88.4% 96.1%, var(--web-glow) 0 0.08rem, transparent 0.26rem);
background-repeat: no-repeat;
background-size: 112% 112%;
background-position: right -4% bottom -4%;
mask-image: linear-gradient(to right, transparent 0 52%, rgba(0, 0, 0, 0.58) 64%, black 76%);
}
@media (max-width: 900px) {
.app-web-bg::after {
background-size: 126% 126%;
background-position: right -14% bottom -6%;
mask-image: linear-gradient(to right, transparent 0 34%, rgba(0, 0, 0, 0.56) 50%, black 66%);
}
}

128
frontend/src/styles/globals.css
View File

@@ -1,40 +1,140 @@
@import "tailwindcss";
/* 🎨 Design Tokens (CSS-based, no JS dependency) */
:root {
--color-background-primary: #0B1A2B;
--color-background-secondary: #0F2236;
--color-background-card: #132A42;
/* Light theme tokens (future-ready) */
:root[data-theme="light"] {
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--color-text-primary: #FFFFFF;
--color-text-secondary: #A0AEC0;
--color-background-primary: #f6f9fc;
--color-background-secondary: #ffffff;
--color-background-card: #ffffff;
--color-surface-elevated: #f8fbff;
--color-border: #1F3A5F;
--color-text-primary: #0f172a;
--color-text-secondary: #475569;
--color-text-muted: #64748b;
--color-primary: #009CAE;
--color-border: #d2dcec;
--color-border-strong: #aec0de;
--color-primary: #009cae;
--color-primary-contrast: #031014;
--color-primary-soft: rgba(0, 156, 174, 0.16);
--color-icon: #e1bc72;
--web-opacity: 0.12;
--web-line: rgba(0, 188, 255, 0.32);
--web-glow: rgba(0, 188, 255, 0.42);
}
/* Dark theme tokens */
:root[data-theme="dark"] {
--color-background-primary: #000c1c;
--color-background-secondary: #0b1a2b;
--color-background-card: #14253d;
--color-surface-elevated: #1b2f4e;
--color-text-primary: #f5f9ff;
--color-text-secondary: #b6c6dd;
--color-text-muted: #8ea3bf;
--color-border: #29456a;
--color-border-strong: #3b5f8f;
--color-primary: #09a9bc;
--color-primary-contrast: #001117;
--color-primary-soft: rgba(9, 169, 188, 0.2);
--color-icon: #f3bb4b;
}
/* Default theme = dark */
:root {
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--color-background-primary: #000c1c;
--color-background-secondary: #0a1520;
--color-background-card: #14253d;
--color-surface-elevated: #1b2f4e;
--color-text-primary: #f5f9ff;
--color-text-secondary: #b6c6dd;
--color-text-muted: #8ea3bf;
--color-border: #29456a;
--color-border-strong: #3b5f8f;
--color-primary: #09a9bc;
--color-primary-contrast: #001117;
--color-primary-soft: rgba(9, 169, 188, 0.2);
--color-icon: #f3bb4b;
--web-opacity: 0.14;
--web-line: rgba(59, 153, 220, 0.34);
--web-line-strong: rgba(73, 214, 255, 0.78);
--web-glow: rgba(48, 204, 255, 0.55);
}
/* Tailwind theme mapping */
@theme inline {
--color-background-primary: var(--color-background-primary);
--color-background-secondary: var(--color-background-secondary);
--color-background-card: var(--color-background-card);
--color-surface-elevated: var(--color-surface-elevated);
--color-text-primary: var(--color-text-primary);
--color-text-secondary: var(--color-text-secondary);
--color-text-muted: var(--color-text-muted);
--color-border: var(--color-border);
--color-border-strong: var(--color-border-strong);
--color-primary: var(--color-primary);
--color-primary-contrast: var(--color-primary-contrast);
--color-primary-soft: var(--color-primary-soft);
}
/* Base styles */
html, body {
html,
body {
padding: 0;
margin: 0;
}
html {
color-scheme: dark;
}
html[data-theme='light'] {
color-scheme: light;
}
body {
background-color: #f9fafb; /* light gray */
color: #111827; /* dark text */
background-color: var(--color-background-primary);
color: var(--color-text-primary);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.surface-card {
background: color-mix(in srgb, var(--color-background-card) 92%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.surface-panel {
background: color-mix(in srgb, var(--color-background-secondary) 96%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.icon-flat {
stroke-width: 1.9;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Global icon color override (easy to revert) */
.lucide {
color: var(--color-icon);
stroke: currentColor;
}

15
frontend/src/styles/tokens.ts
View File

@@ -1,15 +0,0 @@
export const colors = {
primary: {
DEFAULT: '#00C2FF',
},
background: {
primary: '#0B1A2B',
secondary: '#0F2236',
card: '#132A42',
},
text: {
primary: '#FFFFFF',
secondary: '#A0AEC0',
},
border: '#1F3A5F',
};