Stylizacja i poprawki w układzie
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user