101 lines
4.6 KiB
CSS
101 lines
4.6 KiB
CSS
/* Font size scale variables — applied by FontSettingsContext */
|
|
:root {
|
|
--fs-scale-table: 1.0;
|
|
--fs-scale-card: 1.0;
|
|
--fs-scale-nav: 1.0;
|
|
--fs-scale-heading: 1.0;
|
|
--fs-scale-body: 1.0;
|
|
--fs-scale-small: 1.0;
|
|
}
|
|
|
|
/* Slider styling */
|
|
.fs-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fs-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
border: 3px solid var(--color-surface-strong);
|
|
cursor: pointer;
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
.fs-slider::-webkit-slider-thumb:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.fs-slider::-moz-range-thumb {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
border: 3px solid var(--color-surface-strong);
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
/* ── Zone overrides ──────────────────────────────────────────────────────
|
|
.fs-zone-* wrappers override Tailwind text-* classes inside them.
|
|
Specificity: .fs-zone-X .text-Y (0,2,0) > .text-Y (0,1,0).
|
|
This lets us scale fonts without patching every component.
|
|
────────────────────────────────────────────────────────────────────────── */
|
|
|
|
/* Table zone */
|
|
.fs-zone-table { font-size: calc(0.875rem * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-xs { font-size: calc(0.75rem * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-sm { font-size: calc(0.875rem * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-base { font-size: calc(1rem * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-lg { font-size: calc(1.125rem * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-xl { font-size: calc(1.25rem * var(--fs-scale-table, 1)); }
|
|
/* Arbitrary pixel sizes used in tables */
|
|
.fs-zone-table .text-\[10px\] { font-size: calc(10px * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-\[11px\] { font-size: calc(11px * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-\[12px\] { font-size: calc(12px * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-\[13px\] { font-size: calc(13px * var(--fs-scale-table, 1)); }
|
|
.fs-zone-table .text-\[14px\] { font-size: calc(14px * var(--fs-scale-table, 1)); }
|
|
|
|
/* Card zone */
|
|
.fs-zone-card { font-size: calc(0.875rem * var(--fs-scale-card, 1)); }
|
|
.fs-zone-card .text-xs { font-size: calc(0.75rem * var(--fs-scale-card, 1)); }
|
|
.fs-zone-card .text-sm { font-size: calc(0.875rem * var(--fs-scale-card, 1)); }
|
|
.fs-zone-card .text-base { font-size: calc(1rem * var(--fs-scale-card, 1)); }
|
|
.fs-zone-card .text-lg { font-size: calc(1.125rem * var(--fs-scale-card, 1)); }
|
|
.fs-zone-card .text-\[10px\] { font-size: calc(10px * var(--fs-scale-card, 1)); }
|
|
.fs-zone-card .text-\[11px\] { font-size: calc(11px * var(--fs-scale-card, 1)); }
|
|
|
|
/* Nav zone */
|
|
.fs-zone-nav { font-size: calc(0.875rem * var(--fs-scale-nav, 1)); }
|
|
.fs-zone-nav .text-xs { font-size: calc(0.75rem * var(--fs-scale-nav, 1)); }
|
|
.fs-zone-nav .text-sm { font-size: calc(0.875rem * var(--fs-scale-nav, 1)); }
|
|
.fs-zone-nav .text-base { font-size: calc(1rem * var(--fs-scale-nav, 1)); }
|
|
|
|
/* Heading zone */
|
|
.fs-zone-heading { font-size: calc(1rem * var(--fs-scale-heading, 1)); }
|
|
.fs-zone-heading .text-sm { font-size: calc(0.875rem * var(--fs-scale-heading, 1)); }
|
|
.fs-zone-heading .text-base { font-size: calc(1rem * var(--fs-scale-heading, 1)); }
|
|
.fs-zone-heading .text-lg { font-size: calc(1.125rem * var(--fs-scale-heading, 1)); }
|
|
.fs-zone-heading .text-xl { font-size: calc(1.25rem * var(--fs-scale-heading, 1)); }
|
|
.fs-zone-heading .text-2xl { font-size: calc(1.5rem * var(--fs-scale-heading, 1)); }
|
|
.fs-zone-heading .text-3xl { font-size: calc(1.875rem * var(--fs-scale-heading, 1)); }
|
|
|
|
/* Small text zone */
|
|
.fs-zone-small { font-size: calc(0.75rem * var(--fs-scale-small, 1)); }
|
|
.fs-zone-small .text-xs { font-size: calc(0.75rem * var(--fs-scale-small, 1)); }
|
|
.fs-zone-small .text-sm { font-size: calc(0.875rem * var(--fs-scale-small, 1)); }
|
|
|
|
/* Body zone — LAST so table/card/nav/heading zones inside body win at equal specificity */
|
|
.fs-zone-body { font-size: calc(1rem * var(--fs-scale-body, 1)); }
|
|
.fs-zone-body .text-xs { font-size: calc(0.75rem * var(--fs-scale-body, 1)); }
|
|
.fs-zone-body .text-sm { font-size: calc(0.875rem * var(--fs-scale-body, 1)); }
|
|
.fs-zone-body .text-base { font-size: calc(1rem * var(--fs-scale-body, 1)); }
|
|
.fs-zone-body .text-lg { font-size: calc(1.125rem * var(--fs-scale-body, 1)); } |