dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Porządkowanie css, i usuwanie radiowego

Browse Source
This commit is contained in:
dm
2025-11-25 09:52:02 +01:00
parent 0bcc1aeefc
commit 665b787c5c
22 changed files with 202 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/styles/buttons.css
View File

@@ -6,7 +6,8 @@
}
.btn-primary {
background-color: var(--btn-bg);
@apply border-none;
background: var(--btn-background);
color: var(--btn-text);
}
@@ -15,13 +16,15 @@
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--btn-outline-border);
@apply border border-solid;
border-color: var(--btn-outline-border);
color: var(--btn-outline-text);
background: var(--btn-outline-background);
}
.btn-outline:hover {
background-color: var(--btn-outline-bg-hover);
background-color: var(--btn-outline-background-hover);
color: var(--btn-outline-text-hover);
}
.btn-ghost {
@@ -39,8 +42,8 @@
border-radius: 0.75rem;
/* Kolory z theme.css */
background-color: var(--fuz-bg);
color: var(--fuz-text);
background-color: var(--f-background);
color: var(--f-text);
border: 1px solid var(--fuz-border, #d1d5db); /* fallback dla bezpieczeństwa */
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
@@ -50,13 +53,13 @@
/* Hover odcien zależny od border, nie od Tailwind */
.fuz-input:hover {
border-color: var(--fuz-text);
border-color: var(--f-text);
opacity: 0.9;
}
/* Placeholder — używa fuz-text ale jaśniejszy */
/* Placeholder — używa f-text ale jaśniejszy */
.fuz-input::placeholder {
color: color-mix(in srgb, var(--fuz-text) 40%, transparent);
color: color-mix(in srgb, var(--f-text) 40%, transparent);
}
/* Focus — używa accent */
@@ -76,7 +79,7 @@
.fuz-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: color-mix(in srgb, var(--fuz-bg) 80%, #888);
background-color: color-mix(in srgb, var(--f-background) 80%, #888);
}
/* Textarea */
@@ -104,7 +107,7 @@
/* Dropdown */
.autocomplete-list {
@apply absolute left-0 right-0 z-50 bg-[var(--fuz-bg)] text-[var(--fuz-text)]
@apply absolute left-0 right-0 z-50 bg-[var(--f-background)] text-[var(--f-text)]
border border-gray-300 dark:border-slate-700
rounded-b-xl shadow-xl max-h-56 overflow-auto;

12
src/styles/contact.css
View File

@@ -4,23 +4,23 @@
.fuz-contact-box {
background-color: var(--fuz-bg);
color: var(--fuz-text);
background-color: var(--f-background);
color: var(--f-text);
}
.fuz-contact-description h3 {
@apply text-xl font-semibold mb-2;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-contact-description h4 {
@apply text-xl font-semibold mb-1;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-contact-description p {
@apply text-xl mt-4 leading-relaxed;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-contact-form {
@@ -30,7 +30,7 @@
/* --- RODO --- */
.fuz-rodo {
@apply flex items-start gap-3 text-sm;
color: var(--fuz-text);
color: var(--f-text);
}
/* .fuz-rodo a {

4
src/styles/cookie.css
View File

@@ -1,8 +1,8 @@
@layer components {
#cookie-banner {
@apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out;
background: var(--fuz-bg-invert);
color: var(--fuz-text-invert);
background: var(--f-background-invert);
color: var(--f-text-invert);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

4
src/styles/footer.css
View File

@@ -1,6 +1,6 @@
@layer components {
.f-footer {
@apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--fuz-bg)] text-[var(--fuz-text)] pt-2;
@apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--f-background)] text-[var(--f-text)] pt-2;
}
.f-footer-inner {
@@ -21,7 +21,7 @@
}
.f-footer-copyright {
@apply text-center py-4 text-base text-[var(--fuz-text)];
@apply text-center py-4 text-base text-[var(--f-text)];
/* text-center py-0 text-sm */
}

48
src/styles/hero.css
View File

@@ -1,4 +1,4 @@
.fuz-hero {
.f-hero {
@apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient(
@@ -6,58 +6,44 @@
var(--fuz-hero-from),
var(--fuz-hero-to)
);
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover;
opacity: 0.3;
.f-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.7];
}
.fuz-hero-inner {
@apply relative max-w-7xl mx-auto;
color: var(--fuz-text);
.f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)];
}
.fuz-hero-title {
@apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
color: var(--fuz-text);
.f-hero-header {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
}
.fuz-hero-subtitle {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
color: var(--fuz-text-subtle);
/* Animacja główna */
.f-hero-header-2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
animation-name: fade-in;
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
/* Opóźnienie zależne od numeru elementu */
/* animation-delay: calc(var(--delay) * 0.3s); */
}
.fuz-hero-subline {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
color: var(--fuz-text-subtle);
.f-hero-header-items {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
/* color: var(--f-text-subtle); */
animation: fade-in 0.3s ease-out forwards;
animation-delay: calc(var(--delay) * 0.4s);
}
.fuz-hero-description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
color: var(--fuz-text-subtle);
.f-hero-description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
}
.fuz-hero-cta {
@apply flex justify-center items-center flex-wrap gap-4 mt-8;
.f-hero-cta {
@apply flex justify-center items-center flex-wrap gap-3 mt-8;
}
.fuz-hero-cta .btn-primary {
background-color: var(--fuz-accent);
color: white;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }

2
src/styles/map-google.css
View File

@@ -35,7 +35,7 @@
}
.map-range-switch {
background: var(--fuz-bg);
background: var(--f-background);
}
.map-range-switch .fuz-switch-group {

2
src/styles/markdown.css
View File

@@ -47,7 +47,7 @@
.fuz-markdown button.modal-link {
@apply no-underline hover:no-underline mt-2;
background: var(--fuz-bg);
background: var(--f-background);
color: var(--fuz-accent);
}
.fuz-markdown blockquote {

8
src/styles/modal.css
View File

@@ -10,7 +10,7 @@
/* CLOSE BUTTON */
.fuz-modal-close {
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
color: var(--fuz-text);
color: var(--f-text);
opacity: 0.7;
}
@@ -22,8 +22,8 @@
.fuz-modal-panel {
@apply w-full h-full overflow-y-auto;
@apply px-6 py-8 md:px-12 md:py-12;
background: var(--fuz-bg);
color: var(--fuz-text);
background: var(--f-background);
color: var(--f-text);
}
/* INNER LAYOUT */
@@ -33,7 +33,7 @@
.fuz-modal-title {
@apply text-4xl font-bold mb-8 text-center;
color: var(--fuz-text);
color: var(--f-text);
}
/* CONTENT STYLE */

40
src/styles/navbar.css
View File

@@ -1,43 +1,33 @@
.fuz-navbar {
@apply w-full bg-[var(--fuz-bg)] text-[var(--fuz-text)] shadow-sm sticky top-0 z-50;
.f-navbar {
@apply w-full shadow-sm sticky top-0 z-50 bg-[var(--f-background)] text-[var(--f-text)];
}
.fuz-navbar-inner {
.f-navbar-inner {
@apply max-w-7xl mx-auto flex items-center justify-between py-4 px-4;
}
.fuz-navbar-logo {
@apply text-2xl font-bold text-[var(--fuz-text)];
}
.fuz-accent {
color: var(--fuz-accent);
}
.fuz-navbar-links {
.f-navbar-links {
@apply gap-6;
}
.fuz-navbar-link {
.f-navbar-link{
@apply text-base hover:text-[var(--fuz-accent)] transition-colors;
}
.fuz-mobile-toggle {
@apply text-3xl p-2 text-[var(--fuz-text)];
.f-mobile-toggle {
@apply text-3xl p-2 text-[var(--f-text)];
}
/* Panel mobilny */
.fuz-mobile-menu {
@apply fixed top-0 right-0 h-full w-64 bg-[var(--fuz-bg)] shadow-lg
transform translate-x-full transition-transform duration-300
flex flex-col gap-4 p-6;
.f-mobile-menu {
@apply fixed top-0 right-0 h-full w-64 bg-[var(--f-background)] shadow-lg transform translate-x-full transition-transform duration-300 flex flex-col gap-4 p-6;
}
.fuz-mobile-menu.open {
.f-mobile-menu.open {
@apply translate-x-0;
}
.fuz-mobile-link {
@apply text-lg py-2 border-b border-gray-300 dark:border-gray-700
text-[var(--fuz-text)] hover:text-[var(--fuz-accent)];
}
.f-mobile-link {
@apply text-lg py-2 border-b text-[var(--f-text)] hover:text-[var(--fuz-accent)];
border-color: var(--f-border-color);
}

4
src/styles/offers/offers-extra.css
View File

@@ -1,11 +1,11 @@
.fuz-extra-services {
@apply mt-16;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-title-small {
@apply text-xl font-semibold mb-4;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-expand-details {

6
src/styles/offers/offers-main.css
View File

@@ -1,7 +1,7 @@
.fuz-offers-section {
@apply py-12;
background: var(--fuz-bg);
color: var(--fuz-text);
background: var(--f-background);
color: var(--f-text);
}
.fuz-offers-container {
@@ -10,5 +10,5 @@
.fuz-offers-description {
@apply mb-10 text-base leading-relaxed;
color: var(--fuz-text);
color: var(--f-text);
}

2
src/styles/offers/offers-switches.css
View File

@@ -15,7 +15,7 @@
.fuz-switch {
@apply px-6 py-2 text-sm font-semibold cursor-pointer select-none transition-all;
color: var(--fuz-text);
color: var(--f-text);
/* opacity: 0.7; */
}

20
src/styles/offers/offers-table.css
View File

@@ -4,7 +4,7 @@
.fuz-table-wrapper {
@apply overflow-x-auto rounded-3xl shadow-lg mb-0;
background: var(--fuz-bg);
background: var(--f-background);
border: 1px solid rgba(0,0,0,0.07);
}
@@ -14,7 +14,7 @@
.fuz-table {
@apply min-w-full border-collapse;
color: var(--fuz-text);
color: var(--f-text);
}
@@ -24,16 +24,16 @@
========================================= */
.fuz-table-head {
background: color-mix(in srgb, var(--fuz-text) 6%, transparent);
background: color-mix(in srgb, var(--f-text) 6%, transparent);
}
:root.dark .fuz-table-head {
background: color-mix(in srgb, var(--fuz-text) 12%, transparent);
background: color-mix(in srgb, var(--f-text) 12%, transparent);
}
.fuz-table-heading {
@apply text-center font-semibold py-4 px-4 text-lg;
color: var(--fuz-text);
color: var(--f-text);
}
@@ -49,7 +49,7 @@
.fuz-plan-title {
@apply text-lg font-semibold mb-1;
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-plan-price {
@@ -77,11 +77,11 @@
========================================= */
.fuz-row-even {
background: color-mix(in srgb, var(--fuz-text) 4%, transparent);
background: color-mix(in srgb, var(--f-text) 4%, transparent);
}
:root.dark .fuz-row-even {
background: color-mix(in srgb, var(--fuz-text) 10%, transparent);
background: color-mix(in srgb, var(--f-text) 10%, transparent);
}
.fuz-row-odd {
@@ -90,7 +90,7 @@
.fuz-feature-name {
@apply py-3 px-4 text-lg font-medium;
color: var(--fuz-text);
color: var(--f-text);
border-top: 1px solid rgba(0,0,0,0.07);
}
@@ -100,7 +100,7 @@
.fuz-feature-cell {
@apply py-3 px-4 text-center text-lg;
color: var(--fuz-text);
color: var(--f-text);
border-top: 1px solid rgba(0,0,0,0.07);
}

27
src/styles/tailwind.css
View File

@@ -8,29 +8,4 @@ html {
body {
@apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased;
}
/* Simple FUZ section helpers */
/* .fuz-section {
@apply py-16 md:py-24;
} */
/* .fuz-container {
@apply container mx-auto px-4;
}
.fuz-hero-title {
@apply text-3xl md:text-5xl font-bold tracking-tight;
}
.fuz-hero-subtitle {
@apply mt-4 text-lg md:text-xl text-gray-600 dark:text-gray-300;
}
.fuz-header {
@apply border-b border-slate-200/60 dark:border-slate-700/60 bg-white/70 dark:bg-slate-900/70 backdrop-blur;
}
.fuz-footer {
@apply border-t border-slate-200/60 dark:border-slate-700/60 py-6 mt-10 text-sm text-gray-500 dark:text-gray-400;
} */
}

126
src/styles/theme.css
View File

@@ -1,15 +1,60 @@
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
--border1-light: hsl(var(--brand-hue) 5% 80%);
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
--border1-dark: hsl(var(--brand-hue) 40% 70%);
}
:root {
--fuz-bg: #ffffff;
--fuz-text: #0d0d0d;
--f-background: var(--surface2-light);
--f-header: var(--brand-light);
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-text: var(--text2-light);
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-light);
--btn-outline-text: var(--text1-light);
--btn-outline-background-hover: var(--surface4-light);
--btn-outline-text-hover: var(--brand-light);
/* Invert Color */
--fuz-bg-invert: #0d1117;
--fuz-text-invert: #e6edf3;
--btn-bg-invert: #58a6ff;
--btn-text-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);
/* Links */
--fuz-link: #0050c8;
--fuz-link-hover: #003f9a;
@@ -19,57 +64,66 @@
--fuz-accent-hover: #004bcc;
--fuz-accent-text: #ffffff;
/* Buttons */
--btn-bg: var(--fuz-accent);
--btn-text: var(--fuz-accent-text);
--btn-outline-border: var(--fuz-link);
--btn-outline-text: var(--fuz-link);
--btn-outline-bg-hover: rgba(0, 80, 200, 0.08);
--btn-ghost-text: var(--fuz-text);
--btn-ghost-text: var(--f-text);
--btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
--fuz-border: rgb(229, 231, 235);
---f-border-color: rgb(209 213 219);
/* / var(--tw-border-opacity, 1)); */
}
:root.dark {
--fuz-bg: #0d1117;
--fuz-text: #e6edf3;
--f-background: var(--surface1-dark);
--f-header: var(--brand-dark);
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-text: var(--text1-dark);
--btn-background: var(--surface4-dark);
--btn-text: var(--text1-dark);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-dark);
--btn-outline-text: var(--text1-dark);
--btn-outline-background-hover: var(--surface4-dark);
--btn-outline-text-hover: var(--brand-dark);
/* Invert Color */
--fuz-bg-invert: #ffffff;
--fuz-text-invert: #0d0d0d;
--btn-bg-invert: #0066ff;
--f-background-invert: #ffffff;
--f-text-invert: #0d0d0d;
--btn-bg-invert: #0066ff;
--btn-text-invert: #ffffff;
--btn-outline-invert: #0066ff;
/* Links (GitHub Dark palette) */
--fuz-link: #58a6ff;
--fuz-link: var(--brand-dim);
--fuz-link-hover: #79b7ff;
/* Accent */
--fuz-accent: #58a6ff;
--fuz-accent: hsl(var(--hue) calc(var(--saturation) / 1.25) calc(var(--lightness) / 1.25));
--fuz-accent-hover: #79b7ff;
--fuz-accent-text: #0d1117;
/* Buttons */
--btn-bg: var(--fuz-accent);
--btn-text: var(--fuz-accent-text);
--btn-outline-border: var(--fuz-accent);
--btn-outline-text: var(--fuz-accent);
--btn-outline-bg-hover: rgba(88, 166, 255, 0.15);
--btn-ghost-text: var(--fuz-text);
--btn-ghost-hover-bg: rgba(255,255,255,0.08);
--fuz-border: rgb(229, 231, 235);
--btn-ghost-text: var(--f-text);
--btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
--f-border-color: rgb(209 213 219);
/* / var(--tw-border-opacity, 1)) */
}
/* Body */
body {
background-color: var(--fuz-bg);
color: var(--fuz-text);
background-color: var(--f-background);
color: var(--f-text);
}
/* Links */
@@ -84,9 +138,9 @@ a:hover {
/* Theme Toggle */
.theme-toggle-btn {
@apply text-xl p-2 rounded-full cursor-pointer transition-colors;
color: var(--fuz-text);
color: var(--f-text);
}
.theme-toggle-btn:hover {
opacity: 0.8;
}
}