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

Kontakt stylizacja

Browse Source
This commit is contained in:
dm
2025-11-25 12:19:30 +01:00
parent c23576f052
commit 6b1dad3bb1
11 changed files with 164 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/base.css
View File

@@ -7,6 +7,7 @@
@import "./markdown.css";
@import "./footer.css";
@import "./cookie.css";
@import "./contact.css";
.grecaptcha-badge {
display: none !important;

57
src/styles/buttons.css
View File

@@ -1,8 +1,5 @@
.btn {
@apply inline-flex items-center justify-center
font-semibold rounded-lg px-6 py-3
text-base transition-all duration-200
cursor-pointer select-none;
@apply inline-flex items-center justify-center font-semibold rounded-lg px-6 py-3 text-base transition-all duration-200 cursor-pointer select-none;
}
.btn-primary {
@@ -36,39 +33,23 @@
background-color: var(--btn-ghost-hover-bg);
}
.fuz-input {
width: 100%;
padding: 0.75rem 1rem; /* bardziej eleganckie */
border-radius: 0.75rem;
/* Kolory z theme.css */
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);
transition: all 0.2s ease;
.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;
}
/* Hover odcien zależny od border, nie od Tailwind */
.fuz-input:hover {
border-color: var(--f-text);
opacity: 0.9;
.f-input:hover {
@apply border-[var(--f-text)] opacity-[0.9];
}
.f-input:focus {
@apply outline-none border-[var(--f-header)];
box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-header) 40%, transparent);
}
/* Placeholder — używa f-text ale jaśniejszy */
.fuz-input::placeholder {
color: color-mix(in srgb, var(--f-text) 40%, transparent);
}
/* Focus — używa accent */
.fuz-input:focus {
outline: none;
border-color: var(--fuz-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fuz-accent) 40%, transparent);
}
/* Error */
.fuz-input-error {
border-color: #ff4d4f !important;
@@ -107,11 +88,10 @@
/* 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-[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;
border-top: none; /* ważne */
border-top: none;
/* ważne */
animation: fadeIn 0.12s ease-out;
}
@@ -125,6 +105,13 @@
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

105
src/styles/contact.css
View File

@@ -1,68 +1,97 @@
.fuz-contact-grid {
@tailwind base;
.f-contact-grid {
@apply grid md:grid-cols-2 gap-10 items-start max-w-7xl mx-auto;
}
.fuz-contact-box {
.f-contact-col-1 {
background-color: var(--f-background);
color: var(--f-text);
h1,
h2,
h3,
h4 {
@apply f-section-header;
}
}
.fuz-contact-description h3 {
@apply text-xl font-semibold mb-2;
color: var(--f-text);
.f-contact-col-2 {
@apply bg-[var(--f-background)] text-[var(--f-text)];
h1,
h2,
h3,
h4 {
@apply f-section-header;
}
}
.fuz-contact-description h4 {
@apply text-xl font-semibold mb-1;
color: var(--f-text);
.f-contact-item {
@apply space-y-1;
h1,
h2,
h3,
h4 {
@apply text-2xl font-semibold text-[var(--f-text)] m-0;
}
p {
@apply text-xl mt-4 leading-relaxed text-[var(--f-text)];
}
}
.fuz-contact-description p {
@apply text-xl mt-4 leading-relaxed;
color: var(--f-text);
.f-contact-form {
@apply space-y-1;
.f-contact-form-inner {
@apply grid grid-cols-2 gap-4
}
.f-rodo {
@apply flex items-start gap-3 text-lg text-[var(--f-text)];
a {
@apply text-[var(--f-link-text)];
}
a:hover {
@apply text-[var(--fuz-link-hover)];
}
input {
@apply mt-2 h-4 w-4;
}
}
button {
@apply btn btn-outline w-full py-3 text-lg;
}
}
.fuz-contact-form {
@apply space-y-2;
.f-contact-map {
@apply w-full max-w-7xl mx-auto mt-6;
}
/* --- RODO --- */
.fuz-rodo {
@apply flex items-start gap-3 text-sm;
color: var(--f-text);
}
/* .fuz-rodo a {
color: var(--fuz-accent);
} */
.fuz-rodo a:hover {
color: var(--fuz-accent-hover); /* jeśli masz globalne zmienne */
}
/* --- TOAST --- */
/* --- TOAST SYSTEM (Tailwind version) --- */
.fuz-toast {
.s-toast {
@apply fixed top-5 left-1/2 z-[9999] pointer-events-none;
@apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
}
.fuz-toast.visible {
.f-toast.visible {
@apply opacity-100 translate-y-0;
}
.fuz-toast-msg {
.f-toast-msg {
@apply px-5 py-3 rounded-xl shadow-lg text-sm;
background: var(--fuz-accent);
color: var(--fuz-accent-text);
}
.fuz-toast-msg.success {
.f-toast-msg.success {
background: var(--fuz-accent);
}
.fuz-toast-msg.error {
.f-toast-msg.error {
@apply bg-red-500 text-white;
}
}

30
src/styles/footer.css
View File

@@ -4,31 +4,43 @@
}
.f-footer-inner {
@apply max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12;
@apply max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12;
}
.f-footer-col {
@apply max-w-sm pt-4 space-y-1;
}
.f-footer-col-title {
@apply text-xl font-semibold text-[var(--f-header)];
h1,
h2,
h3,
h4,
h5,
h6 {
@apply text-xl font-semibold text-[var(--f-header)];
}
}
a {
@apply text-[var(--f-link-text)];
}
.f-footer-col-text {
@apply text-base;
a:hover {
@apply text-[var(--fuz-link-hover)];
}
p {
@apply text-base;
}
}
.f-footer-copyright {
@apply text-center py-4 text-base text-[var(--f-text)];
}
.f-footer-recaptcha {
.f-footer-recaptcha {
@apply text-base;
a {
@apply text-[var(--f-link-text)];
}
}
}
}

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

@@ -17,10 +17,7 @@
.fuz-map--card {
@apply w-full h-[350px] overflow-hidden mt-8;
}
.fuz-contact-map-wrapper {
/* @apply col-span-2 w-full border-cyan-200; */
@apply w-full max-w-7xl mx-auto mt-6;
}
.map-range-container {
@apply sticky top-[67px] z-[999] flex justify-center w-full pointer-events-auto;

12
src/styles/sections.css
View File

@@ -1,3 +1,13 @@
@layer components{
.f-section-header{
@apply text-3xl md:text-4xl font-bold mb-6 text-[var(--f-header)];
}
}
.f-section{
@apply pt-10 pb-1 mx-2;
}
.fuz-section {
@apply py-10 mx-2;
}
@@ -46,4 +56,4 @@
.dark .fuz-iframe {
background: transparent !important;
}
}

6
src/styles/theme.css
View File

@@ -38,6 +38,7 @@
--f-text: var(--text2-light);
--f-link-text: var(--f-header);
--f-link-text-hover: var(--f-text2-light);
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
@@ -49,6 +50,8 @@
--btn-outline-background-hover: var(--surface4-light);
--btn-outline-text-hover: var(--brand-light);
--f-input-border: var(--surface1-light);
/* Invert Color */
--f-background-invert: #0d1117;
--f-text-invert: #e6edf3;
@@ -82,6 +85,7 @@
--f-text: var(--text1-dark);
--f-link-text: var(--f-header);
--f-link-text-hover: var(--f-text2-dark);
--btn-background: var(--surface4-dark);
--btn-text: var(--text1-dark);
@@ -93,6 +97,8 @@
--btn-outline-background-hover: var(--surface4-dark);
--btn-outline-text-hover: var(--brand-dark);
--f-input-border: var(--surface4-dark);
/* Invert Color */
--f-background-invert: #ffffff;
--f-text-invert: #0d0d0d;