Stylizacja i poprawki w układzie

This commit is contained in:
dm
2025-11-26 08:00:00 +01:00
parent d3040f4917
commit 284009d411
56 changed files with 328 additions and 621 deletions

View File

@@ -27,22 +27,34 @@
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
--border1-dark: hsl(var(--brand-hue) 40% 70%);
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
}
:root {
--f-background: var(--surface2-light);
--f-header: var(--brand-light);
--f-background-switch: var(--surface3-light);
--f-text-switcher: var(--brand-dark);
--f-background-switcher: var(--surface4-dark);
--f-header: var(--text1-light);
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-text: var(--text2-light);
--f-link-text: var(--f-header);
--f-text-1: var(--text1-light);
--f-link-text: var(--brand-dim);
/* var(--brand-light); */
--f-link-text-hover: var(--f-text2-light);
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
--f-background-o: var(--surface4-light);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-light);
--btn-outline-text: var(--text1-light);
@@ -52,39 +64,49 @@
--f-input-border: var(--surface1-light);
--f-offers-border: var(--surface4-light);
--f-offers-price: var(--brand-light);
--f-offers-popular: var(--brand-light);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
/* Invert Color */
--f-background-invert: #0d1117;
/* --f-background-invert: #0d1117;
--f-text-invert: #e6edf3;
--btn-bg-invert: #58a6ff;
--btn-text-invert: #0d1117;
--btn-outline-invert: #58a6ff;
--btn-outline-bg-invert: rgba(88, 166, 255, 0.15);
--btn-outline-bg-invert: rgba(88, 166, 255, 0.15); */
/* Links */
--fuz-link: #0050c8;
--fuz-link-hover: #003f9a;
/* --fuz-link: #0050c8;
--fuz-link-hover: #003f9a; */
/* Accent (buttons, highlights) */
--fuz-accent: #0066ff;
/* --fuz-accent: #0066ff;
--fuz-accent-hover: #004bcc;
--fuz-accent-text: #ffffff;
--btn-ghost-text: var(--f-text);
--btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
---f-border-color: rgb(209 213 219);
---f-border-color: rgb(209 213 219); */
/* / var(--tw-border-opacity, 1)); */
}
:root.dark {
--f-background: var(--surface1-dark);
--f-background-switch: var(--surface2-dark);
--f-header: var(--brand-dark);
--f-background-switch: var(--surface3-dark);
--f-text-switcher: var(--brand-dark);
--f-background-switcher: var(--text2-light);
--f-header: var(--text1-dark);
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-text: var(--text1-dark);
--f-link-text: var(--f-header);
--f-text-1: var(--text1-dark);
--f-link-text: var(--brand-dark);
--f-link-text-hover: var(--f-text2-dark);
--btn-background: var(--surface4-dark);
@@ -97,8 +119,17 @@
--btn-outline-background-hover: var(--surface4-dark);
--btn-outline-text-hover: var(--brand-dark);
--f-input-border: var(--surface4-dark);
--f-background-o: var(--surface2-dark);
--f-input-border: var(--surface4-dark);
--f-offers-border: var(--surface4-dark);
--f-offers-price: var(--brand-dark);
--f-offers-popular: var(--brand-dark);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
/* Invert Color */
--f-background-invert: #ffffff;
--f-text-invert: #0d0d0d;