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

Stylizacja, zmiana mapy zasięgu

Browse Source
This commit is contained in:
dm
2025-11-26 14:37:07 +01:00
parent 8bf578e6d9
commit a0f4e8fbab
29 changed files with 339 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles/base.css
View File

@@ -15,7 +15,6 @@
@import "./offers/offers-main.css";
@import "./offers/offers-switches.css";
html {
font-family: 'Nunito', sans-serif;
/* font-family: "Lora", sans-serif; */
@@ -24,10 +23,6 @@ html {
scroll-behavior: smooth;
}
body {
/* @apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased; */
}
.grecaptcha-badge {
display: none !important;
}

48
src/styles/buttons.css
View File

@@ -3,46 +3,39 @@
}
.btn-primary {
@apply border-none;
background: var(--btn-background);
color: var(--btn-text);
@apply border-none bg-[--btn-background] text-[--btn-text];
}
.btn-primary:hover {
filter: brightness(0.95);
@apply brightness-[0.95];
}
.btn-outline {
@apply border border-solid;
border-color: var(--btn-outline-border);
color: var(--btn-outline-text);
background: var(--btn-outline-background);
@apply border border-solid border-[--btn-outline-border] text-[--btn-outline-text] bg-[--btn-outline-background];
}
.btn-outline:hover {
background-color: var(--btn-outline-background-hover);
color: var(--btn-outline-text-hover);
@apply bg-[--btn-outline-background-hover] text-[--btn-outline-text-hover];
}
.btn-ghost {
background-color: transparent;
color: var(--btn-ghost-text);
.btn-ghost {
@apply bg-transparent text-[--btn-ghost-text];
}
.btn-ghost:hover {
background-color: var(--btn-ghost-hover-bg);
@apply bg-[--btn-ghost-hover-bg];
}
.f-input {
@apply w-full py-3 px-4 rounded-xl border border-[var(--f-input-border)] bg-[var(--f-background)] text-[var(--f-text)] transition-all duration-200;
@apply w-full py-3 px-4 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] transition-all duration-200;
}
.f-input:hover {
@apply border-[var(--f-text)] opacity-[0.9];
@apply border-[--f-text] opacity-[0.9];
}
.f-input:focus {
@apply outline-none border-[var(--f-header)];
@apply outline-none border-[--f-header];
box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-header) 40%, transparent);
}
@@ -50,48 +43,31 @@
color: color-mix(in srgb, var(--f-text) 40%, transparent);
}
/* Error */
.fuz-input-error {
border-color: #ff4d4f !important;
box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.3) !important;
}
/* Disabled */
.fuz-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: color-mix(in srgb, var(--f-background) 80%, #888);
}
/* Textarea */
/* textarea.fuz-input {
resize: none;
} */
/* .fuz-link {
color: var(--fuz-accent);
transition: color 0.2s ease;
} */
/* Kapsuła — input + dropdown jako jedna całość */
.autocomplete-wrapper {
position: relative;
}
/* Input (gdy dropdown otwarty) */
.autocomplete-open {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-width: 0 !important;
}
/* Dropdown */
.autocomplete-list {
@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;
@apply absolute left-0 right-0 z-50 bg-[--f-background] text-[--f-text] border border-gray-300 dark:border-slate-700 rounded-b-xl shadow-xl max-h-56 overflow-auto;
border-top: none;
/* ważne */
animation: fadeIn 0.12s ease-out;
}
@@ -101,7 +77,7 @@
.autocomplete-list li:hover,
.autocomplete-list li.active {
@apply bg-gray-100 dark:bg-slate-800;
@apply bg-[--f-autocomplete-hover-bg] text-[--f-autocomplete-hover-text];
}
@keyframes fadeIn {

26
src/styles/contact.css
View File

@@ -15,7 +15,7 @@
}
.f-contact-col-2 {
@apply bg-[var(--f-background)] text-[var(--f-text)];
@apply bg-[--f-background] text-[--f-text];
h1,
h2,
@@ -32,11 +32,11 @@
h2,
h3,
h4 {
@apply text-2xl font-semibold text-[var(--f-text)] m-0;
@apply text-2xl font-semibold text-[--f-text] m-0;
}
p {
@apply text-xl mt-4 leading-relaxed text-[var(--f-text)];
@apply text-xl mt-4 leading-relaxed text-[--f-text];
}
}
@@ -49,14 +49,14 @@
}
.f-rodo {
@apply flex items-start gap-3 text-lg text-[var(--f-text)];
@apply flex items-start gap-3 text-lg text-[--f-text];
a {
@apply text-[var(--f-link-text)];
@apply text-[--f-link-text];
}
a:hover {
@apply text-[var(--fuz-link-hover)];
@apply text-[--fuz-link-hover];
}
input {
@@ -73,8 +73,10 @@
@apply w-full max-w-7xl mx-auto mt-6;
}
.s-toast {
@apply fixed top-5 left-1/2 z-[9999] pointer-events-none;
.f-toast {
@apply fixed left-1/2 z-[999999] pointer-events-none;
top: calc(var(--nav-height, 80px) + 20px);
@apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
}
@@ -83,15 +85,13 @@
}
.f-toast-msg {
@apply px-5 py-3 rounded-xl shadow-lg text-sm;
background: var(--fuz-accent);
color: var(--fuz-accent-text);
@apply px-5 py-3 rounded-xl shadow-lg text-lg bg-[--f-background-o] text-[--f-text];
}
.f-toast-msg.success {
background: var(--fuz-accent);
@apply bg-green-900 text-white;
}
.f-toast-msg.error {
@apply bg-red-500 text-white;
}
}

14
src/styles/cookie.css
View File

@@ -1,9 +1,6 @@
@layer components {
#cookie-banner {
@apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out;
background: var(--f-cookie-background);
color: var(--f-cookie-text);
/* border-top: 1px solid rgba(0, 0, 0, 0.1); */
@apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out bg-[--f-cookie-background] text-[--f-cookie-text];
}
.f-cookie-panel-inner {
@@ -15,8 +12,7 @@
}
.f-cookie-privacy-link {
@apply ml-3;
color: var(--f-link-text);
@apply ml-3 text-[--f-link-text];
}
.f-cookie-accept,
@@ -25,12 +21,10 @@
}
.f-cookie-accept {
background: var(--f-cookie-accept-background);
color: var(--f-cookie-accept-text);
@apply bg-[--f-cookie-accept-background] text-[--f-cookie-accept-text]
}
.f-cookie-reject {
background: var(--f-cookie-reject-background);
color: var(--f-cookie-reject-text);
@apply bg-[--f-cookie-reject-background] text-[--f-cookie-reject-text]
}
}

12
src/styles/footer.css
View File

@@ -1,6 +1,6 @@
@layer components {
.f-footer {
@apply mt-2 border-t border-[var(--f-input-border)] bg-[var(--f-background-o)] text-[var(--f-text)] pt-2;
@apply mt-2 border-t border-[--f-input-border] bg-[--f-background-o] text-[--f-text] pt-2;
}
.f-footer-inner {
@@ -16,15 +16,15 @@
h4,
h5,
h6 {
@apply text-xl font-semibold text-[var(--f-header)];
@apply text-xl font-semibold text-[--f-header];
}
a {
@apply text-[var(--f-link-text)];
@apply text-[--f-link-text];
}
a:hover {
@apply text-[var(--fuz-link-hover)];
@apply text-[--fuz-link-hover];
}
p {
@@ -33,14 +33,14 @@
}
.f-footer-copyright {
@apply text-center py-4 text-base text-[var(--f-text)];
@apply text-center py-4 text-base text-[--f-text];
}
.f-footer-recaptcha {
@apply text-base;
a {
@apply text-[var(--f-link-text)];
@apply text-[--f-link-text];
}
}
}

19
src/styles/hero.css
View File

@@ -1,25 +1,20 @@
.f-hero {
@apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient(to right,
var(--fuz-hero-from),
var(--fuz-hero-to));
color: var(--f-text);
@apply relative overflow-hidden text-center py-28 px-6;
}
.f-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.4];
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.6];
}
.f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)];
@apply relative max-w-7xl mx-auto text-[f-text];
h1 {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[--f-header];
}
h2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[--f-header-2];
animation-name: fade-in;
animation-duration: 0.8s;
animation-timing-function: ease-out;
@@ -27,13 +22,13 @@
}
p {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[--f-header-items];
animation: fade-in 0.3s ease-out forwards;
animation-delay: calc(var(--delay) * 0.4s);
}
p.description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[--f-text];
}
}

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

@@ -31,24 +31,92 @@
}
.map-range-switch {
background: var(--f-background);
/* Pulsująca obwódka budynku */
.pulse-marker {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 170, 255, 0.55);
position: absolute;
transform: translate(-50%, -50%);
animation: pulseAnim 1.3s ease-out forwards;
}
.map-range-switch .fuz-switch-group {
display: flex;
gap: 8px;
@keyframes pulseAnim {
0% {
transform: translate(-50%, -50%) scale(0.2);
opacity: 1;
}
80% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0.3;
}
100% {
opacity: 0;
}
}
/* Mobile: pionowo */
@media (max-width: 640px) {
.map-range-switch .fuz-switch-group {
flex-direction: column;
width: 100%;
/* Animacja markera */
.marker-bounce {
animation: markerBounce 0.35s ease-out forwards;
}
@keyframes markerBounce {
0% {
transform: translateY(-18px);
opacity: 0;
}
.map-range-switch .fuz-switch {
width: 100%;
text-align: center;
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Info window */
.f-info-window {
@apply p-3;
}
/* HEADER */
.f-info-header {
margin-bottom: 10px;
}
.f-info-heading {
@apply text-lg uppercase;
.ok {
color: green;
}
.no {
color: #d00;
}
}
.f-info-city,
.f-info-street {
@apply text-xl ml-3;
}
.gm-style {
background: var(--f--background) !important;
}
.gm-style-iw-c {
background: var(--f-background) !important;
border-radius: 14px !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
padding: 0 !important;
}
.gm-style-iw-d {
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
}

9
src/styles/markdown.css
View File

@@ -33,21 +33,16 @@
}
.fuz-markdown ul li::marker {
color: var(--fuz-accent);
@apply text-[--f-text];
}
.dark .fuz-markdown ul li::marker {
color: var(--fuz-accent);
}
.fuz-markdown a {
@apply no-underline hover:no-underline text-[var(--f-link-text)];
}
.fuz-markdown button.modal-link {
@apply no-underline hover:no-underline mt-2;
background: var(--f-background);
color: var(--fuz-accent);
@apply no-underline hover:no-underline mt-2 bg-[--f-background] text-[--f-link-text];
}
.fuz-markdown blockquote {
@apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 italic mb-4;

18
src/styles/modal.css
View File

@@ -9,34 +9,25 @@
/* CLOSE BUTTON */
.fuz-modal-close {
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
color: var(--f-text);
opacity: 0.7;
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity text-[--f-text] opacity-[0.7];
}
.fuz-modal-close:hover {
@apply opacity-100;
}
/* PANEL — FULLSCREEN PANEL */
.fuz-modal-panel {
@apply w-full h-full overflow-y-auto;
@apply px-6 py-8 md:px-12 md:py-12;
background: var(--f-background);
color: var(--f-text);
@apply w-full h-full overflow-y-auto px-6 py-8 md:px-12 md:py-12 bg-[--f-background] text-[--f-text];
}
/* INNER LAYOUT */
.fuz-modal-inner {
@apply max-w-4xl mx-auto;
}
.fuz-modal-title {
@apply text-4xl font-bold mb-8 text-center;
color: var(--f-text);
@apply text-4xl font-bold mb-8 text-center text-[--f-text];
}
/* CONTENT STYLE */
.fuz-modal-content p {
@apply leading-relaxed text-2xl text-center;
}
@@ -44,7 +35,6 @@
.fuz-modal-content p img {
@apply mt-2 leading-relaxed;
}
/* ANIMATIONS */
@keyframes fadeIn {
from {
@@ -52,6 +42,6 @@
}
to {
opacity: 1;
opacity: 2;
}
}

11
src/styles/navbar.css
View File

@@ -1,5 +1,5 @@
.f-navbar {
@apply w-full shadow-sm sticky top-0 z-50 bg-[var(--f-background)] text-[var(--f-text)];
@apply w-full shadow-sm sticky top-0 z-50 bg-[--f-background] text-[--f-text];
}
.f-navbar-inner {
@@ -11,16 +11,16 @@
}
.f-navbar-link{
@apply text-base hover:text-[var(--fuz-accent)] transition-colors;
@apply text-base hover:text-[--fuz-accent] transition-colors;
}
.f-mobile-toggle {
@apply text-3xl p-2 text-[var(--f-text)];
@apply text-3xl p-2 text-[--f-text];
}
.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;
@apply fixed top-0 right-0 h-full w-64 bg-[--f-background] shadow-lg transform translate-x-full transition-transform duration-300 flex flex-col gap-4 p-6;
}
.f-mobile-menu.open {
@@ -28,8 +28,7 @@
}
.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);
@apply text-lg py-2 border-b text-[--f-text] hover:text-[--fuz-accent] border-[--f-border-color];
}
.f-navbar-logo{

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

@@ -14,9 +14,9 @@
}
.f-feature-link {
@apply underline cursor-pointer w-full h-full text-[var(--f-link-text)];
@apply cursor-pointer w-full h-full text-[--f-link-text] text-lg;
}
.f-feature-link:hover {
@apply text-[var(--f-link-text-hover)];
@apply text-[--f-link-text-hover];
}

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

@@ -3,7 +3,7 @@
}
.f-switch-group {
@apply inline-flex overflow-hidden relative bg-[var(--f-background-switch)] mt-8;
@apply inline-flex overflow-hidden relative bg-[--f-background-switch] mt-8;
}
.f-switch {
@@ -11,7 +11,7 @@
}
.f-switch.active {
@apply text-[var(--f-text-switcher)] bg-[var(--f-background-switcher)] ;
@apply text-[--f-text-switcher] bg-[--f-background-switcher] ;
}
.f-switch:hover {

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

@@ -1,5 +1,5 @@
.f-table-wrapper {
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[var(--f-offers-border)];
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[--f-offers-border];
}
.f-table {
@@ -23,7 +23,7 @@
}
.f-plan-price {
@apply text-2xl font-extrabold mb-1 text-[var(--f-offers-price)];
@apply text-2xl font-extrabold mb-1 text-[--f-offers-price];
}
/* Na ten moment ukryte */
@@ -74,13 +74,6 @@
border-bottom: 2px solid var(--f-offers-popular);
}
/* .f-popular-col.f-feature-cell,
.f-popular-col.f-feature-yes,
.f-popular-col.f-feature-no {
border-top: none !important;
} */
.f-popular-badge {
@apply bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full inline-block mb-2 uppercase tracking-wide;
/* background: #3b82f6;

32
src/styles/sections.css
View File

@@ -1,7 +1,7 @@
@layer components {
.f-section-header {
@apply text-3xl md:text-4xl font-bold mb-6 text-[var(--f-header)];
@apply text-3xl md:text-4xl font-bold mb-6 text-[--f-header];
}
.f-section {
@@ -33,7 +33,7 @@
}
.f-section-title {
@apply text-4xl md:text-5xl font-bold mb-2 text-[var(--f-header)];
@apply text-4xl md:text-5xl font-bold mb-2 text-[--f-header];
}
.f-section-nav {
@@ -42,34 +42,10 @@
}
.f-section-channel {
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-2;
}
.f-channel-box {
@apply flex flex-col items-center p-4 rounded-xl bg-[var(--f-background)] border border-[var(--f-offers-border)] shadow-sm hover:shadow-md transition
}
/* .fuz-iframe-box {
@apply bg-white dark:bg-slate-800 p-4 rounded-xl border border-gray-200 dark:border-slate-700 shadow;
}
.fuz-iframe-wrapper {
@apply w-full overflow-hidden border-0 shadow-none;
background: transparent !important;
aspect-ratio: 16/9;
}
.fuz-iframe {
@apply w-full h-full border-0 shadow-none;
background: transparent !important;
}
.dark .fuz-iframe-wrapper {
background: transparent !important;
}
.dark .fuz-iframe {
background: transparent !important;
} */
@apply flex flex-col items-center p-4 rounded-xl bg-[--f-background] border border-[--f-offers-border] shadow-sm hover:shadow-md transition
}

22
src/styles/theme.css
View File

@@ -33,6 +33,8 @@
:root {
--f-background: var(--surface2-light);
--f-text: var(--text2-light);
--f-text-1: var(--text1-light);
--f-background-switch: var(--surface3-light);
--f-text-switcher: var(--brand-dark);
@@ -42,8 +44,7 @@
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-text: var(--text2-light);
--f-text-1: var(--text1-light);
--f-link-text: var(--brand-dim);
@@ -75,10 +76,21 @@
--f-cookie-accept-background: green;
/* --f-cookie-accept-text: */
--f-cookie-reject-background: var(--text2-light);
--f-autocomplete-hover-bg: var(--surface4-light);
--f-autocomplete-hover-text: var(--surface2-light);
-fuz-hero-from: #3b82f6;
/* niebieski - kolor początkowy */
--fuz-hero-to: #8b5cf6;
/* fioletowy - kolor końcowy */
}
:root.dark {
--f-background: var(--surface1-dark);
--f-text: var(--text1-dark);
--f-text-1: var(--text1-dark);
--f-background-switch: var(--surface2-dark);
--f-background-switch: var(--surface3-dark);
@@ -89,8 +101,7 @@
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-text: var(--text1-dark);
--f-text-1: var(--text1-dark);
--f-link-text: var(--brand-dark);
--f-link-text-hover: var(--f-text2-dark);
@@ -119,6 +130,9 @@
--f-cookie-accept-background: green;
/* --f-cookie-accept-text: */
--f-cookie-reject-background: var(--text2-light);
--f-autocomplete-hover-bg: var(--surface3-dark);
--f-autocomplete-hover-text: var(--text1-dark);
}
/* Body */