Offers, tabelka z uslugami
This commit is contained in:
dm
212
src/styles/offers/offers-table.css
Normal file
212
src/styles/offers/offers-table.css
Normal file
@@ -0,0 +1,212 @@
|
||||
/* =========================================
|
||||
TABELA — KONTENER
|
||||
========================================= */
|
||||
|
||||
.fuz-table-wrapper {
|
||||
@apply overflow-x-auto rounded-3xl shadow-lg mb-0;
|
||||
background: var(--fuz-bg);
|
||||
border: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
:root.dark .fuz-table-wrapper {
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.fuz-table {
|
||||
@apply min-w-full border-collapse;
|
||||
color: var(--fuz-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
NAGŁÓWEK
|
||||
========================================= */
|
||||
|
||||
.fuz-table-head {
|
||||
background: color-mix(in srgb, var(--fuz-text) 6%, transparent);
|
||||
}
|
||||
|
||||
:root.dark .fuz-table-head {
|
||||
background: color-mix(in srgb, var(--fuz-text) 12%, transparent);
|
||||
}
|
||||
|
||||
.fuz-table-heading {
|
||||
@apply text-center font-semibold py-4 px-4 text-lg;
|
||||
color: var(--fuz-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
NAGŁÓWEK PLANU
|
||||
========================================= */
|
||||
|
||||
.fuz-plan-heading {
|
||||
@apply text-center py-4 px-4 align-bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fuz-plan-title {
|
||||
@apply text-lg font-semibold mb-1;
|
||||
color: var(--fuz-text);
|
||||
}
|
||||
|
||||
.fuz-plan-price {
|
||||
@apply text-2xl font-extrabold mb-1;
|
||||
color: var(--fuz-accent);
|
||||
}
|
||||
|
||||
.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(--fuz-text) 4%, transparent);
|
||||
}
|
||||
|
||||
:root.dark .fuz-row-even {
|
||||
background: color-mix(in srgb, var(--fuz-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.fuz-row-odd {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fuz-feature-name {
|
||||
@apply py-3 px-4 text-lg font-medium;
|
||||
color: var(--fuz-text);
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
:root.dark .fuz-feature-name {
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.fuz-feature-cell {
|
||||
@apply py-3 px-4 text-center text-lg;
|
||||
color: var(--fuz-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 {
|
||||
@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);
|
||||
}
|
||||
|
||||
/* ✕ = 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) */
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
|
||||
/* górny border */
|
||||
.fuz-popular-top {
|
||||
border-top: 2px solid var(--fuz-accent);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user