Stylizacja i poprawki w układzie
This commit is contained in:
dm
@@ -1,212 +1,96 @@
|
||||
/* =========================================
|
||||
TABELA — KONTENER
|
||||
========================================= */
|
||||
|
||||
.fuz-table-wrapper {
|
||||
@apply overflow-x-auto rounded-3xl shadow-lg mb-0;
|
||||
background: var(--f-background);
|
||||
border: 1px solid rgba(0,0,0,0.07);
|
||||
.f-table-wrapper {
|
||||
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[var(--f-offers-border)];
|
||||
}
|
||||
|
||||
:root.dark .fuz-table-wrapper {
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.fuz-table {
|
||||
.f-table {
|
||||
@apply min-w-full border-collapse;
|
||||
color: var(--f-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
NAGŁÓWEK
|
||||
========================================= */
|
||||
|
||||
.fuz-table-head {
|
||||
.f-table-head {
|
||||
background: color-mix(in srgb, var(--f-text) 6%, transparent);
|
||||
}
|
||||
|
||||
:root.dark .fuz-table-head {
|
||||
background: color-mix(in srgb, var(--f-text) 12%, transparent);
|
||||
.f-table-heading {
|
||||
@apply text-center font-semibold text-xl py-4 px-4 text-wrap;
|
||||
}
|
||||
|
||||
.fuz-table-heading {
|
||||
@apply text-center font-semibold py-4 px-4 text-lg;
|
||||
color: var(--f-text);
|
||||
.f-plan-heading {
|
||||
@apply text-center py-4 px-4 align-bottom relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
NAGŁÓWEK PLANU
|
||||
========================================= */
|
||||
|
||||
.fuz-plan-heading {
|
||||
@apply text-center py-4 px-4 align-bottom;
|
||||
position: relative;
|
||||
.f-plan-title {
|
||||
@apply text-xl font-semibold mb-1;
|
||||
}
|
||||
|
||||
.fuz-plan-title {
|
||||
@apply text-lg font-semibold mb-1;
|
||||
color: var(--f-text);
|
||||
.f-plan-price {
|
||||
@apply text-2xl font-extrabold mb-1 text-[var(--f-offers-price)];
|
||||
}
|
||||
|
||||
.fuz-plan-price {
|
||||
@apply text-2xl font-extrabold mb-1;
|
||||
color: var(--fuz-accent);
|
||||
/* Na ten moment ukryte */
|
||||
.f-plan-speed {
|
||||
@apply text-xs opacity-[0.7];
|
||||
}
|
||||
|
||||
.fuz-plan-speed {
|
||||
@apply text-xs;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
/* Badge popularności – jeśli używasz */
|
||||
.fuz-plan-badge {
|
||||
@apply text-[10px] px-2 py-0.5 rounded-full uppercase tracking-wide inline-block mb-2;
|
||||
background: var(--fuz-accent);
|
||||
color: var(--fuz-accent-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
WIERSZE
|
||||
========================================= */
|
||||
|
||||
.fuz-row-even {
|
||||
background: color-mix(in srgb, var(--f-text) 4%, transparent);
|
||||
}
|
||||
|
||||
:root.dark .fuz-row-even {
|
||||
background: color-mix(in srgb, var(--f-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.fuz-row-odd {
|
||||
.f-row-even {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fuz-feature-name {
|
||||
@apply py-3 px-4 text-lg font-medium;
|
||||
color: var(--f-text);
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
.f-row-odd {
|
||||
background: color-mix(in srgb, var(--f-text) 4%, transparent);
|
||||
}
|
||||
|
||||
:root.dark .fuz-feature-name {
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
.f-feature-name {
|
||||
@apply py-3 px-4 text-lg font-medium ;
|
||||
}
|
||||
|
||||
.fuz-feature-cell {
|
||||
.f-feature-cell {
|
||||
@apply py-3 px-4 text-center text-lg;
|
||||
color: var(--f-text);
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
:root.dark .fuz-feature-cell {
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.fuz-feature-cell-btn {
|
||||
@apply py-3 px-4 text-center text-sm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
CHECKMARKS
|
||||
========================================= */
|
||||
|
||||
/* ✔ = kolor accent */
|
||||
.fuz-feature-yes {
|
||||
.f-feature-yes {
|
||||
@apply py-3 px-4 text-center font-bold text-base;
|
||||
color: var(--fuz-accent);
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
:root.dark .fuz-feature-yes {
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
.f-feature-no {
|
||||
@apply py-3 px-4 text-center font-bold text-base opacity-[0.45];
|
||||
}
|
||||
|
||||
/* ✕ = szary / low opacity */
|
||||
.fuz-feature-no {
|
||||
@apply py-3 px-4 text-center font-bold text-base;
|
||||
opacity: 0.45;
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
:root.dark .fuz-feature-no {
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
POPULARNY PLAN — WARIANT C (MOCNY)
|
||||
========================================= */
|
||||
|
||||
/* pełne tło pastel na ACCENT (mocniejsze – C) */
|
||||
/* Popularny */
|
||||
.is-popular,
|
||||
.fuz-popular-col {
|
||||
background: color-mix(in srgb, var(--fuz-accent) 22%, transparent) !important;
|
||||
border-left: 2px solid var(--fuz-accent);
|
||||
border-right: 2px solid var(--fuz-accent);
|
||||
.f-popular-col {
|
||||
background: var(--f-offers-popular-bg);
|
||||
/* color-mix(in srgb, var(--f-offers-popular) 22%, transparent) !important; */
|
||||
border-left: 2px solid var(--f-offers-popular);
|
||||
border-right: 2px solid var(--f-offers-popular);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:root.dark .is-popular,
|
||||
:root.dark .fuz-popular-col {
|
||||
background: color-mix(in srgb, var(--fuz-accent) 32%, transparent) !important;
|
||||
.f-popular-top {
|
||||
border-top: 2px solid var(--f-offers-popular);
|
||||
}
|
||||
|
||||
/* górny border */
|
||||
.fuz-popular-top {
|
||||
border-top: 2px solid var(--fuz-accent);
|
||||
.f-popular-bottom {
|
||||
border-bottom: 2px solid var(--f-offers-popular);
|
||||
}
|
||||
|
||||
/* dolny border */
|
||||
.fuz-popular-bottom {
|
||||
border-bottom: 2px solid var(--fuz-accent);
|
||||
}
|
||||
|
||||
/* zbijamy border wewnątrz popularnych */
|
||||
.fuz-popular-col.fuz-feature-cell,
|
||||
.fuz-popular-col.fuz-feature-yes,
|
||||
.fuz-popular-col.fuz-feature-no {
|
||||
/* .f-popular-col.f-feature-cell,
|
||||
.f-popular-col.f-feature-yes,
|
||||
.f-popular-col.f-feature-no {
|
||||
border-top: none !important;
|
||||
}
|
||||
} */
|
||||
|
||||
/* USŁUGI DODATKOWE */
|
||||
/* Górny border pierwszego wiersza sekcji */
|
||||
.fuz-extra-services table tbody tr:first-child td {
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
:root.dark .fuz-extra-services table tbody tr:first-child td {
|
||||
border-top: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
/* Wiersz "Szczegóły" (opis) — zawsze pełny border-top */
|
||||
.fuz-expand-details {
|
||||
border-top: 0px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
:root.dark .fuz-expand-details {
|
||||
border-top: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
/* I zawsze ładny border-bottom na końcu sekcji */
|
||||
.fuz-extra-services table tbody tr:last-child td {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
:root.dark .fuz-extra-services table tbody tr:last-child td {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
/* Usunięcie "pustych" borderów kolumny szczegóły */
|
||||
.fuz-feature-cell-btn {
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
:root.dark .fuz-feature-cell-btn {
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
.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;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em; */
|
||||
}
|
||||
Reference in New Issue
Block a user