/* ============================================================================= * app.css — Fibkit design tokens (UI refresh, Faza 0) * * Single source of truth for spacing, radius, elevation and brand colour. * Loaded after bootstrap5.min.css and BEFORE dashboard.css / panel-forms.css, * so those files still win wherever they currently set something — this file * only adds a vocabulary, it does not restyle existing components yet. * * Phase 1 (shared components: page_header / filter_card / data_table / * form_card) and Phase 3 (dark mode) build on the tokens defined here. * ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------- * Mirrors the values currently hard-coded in panel-forms.css. Kept in * sync here so later phases have one place to change them. */ --fk-brand: #3355d8; --fk-brand-strong: #2743ad; --fk-brand-rgb: 51, 85, 216; /* --- Surfaces & borders --------------------------------------------------- * Aliased onto Bootstrap's own theme variables, so anything built on * these tokens is already light/dark aware once Faza 3 lands. The mock * keeps the app background white — depth comes from 1px card borders, * radius and spacing, not a grey ground. */ --fk-surface: var(--bs-body-bg); /* card / panel surface (white in light) */ --fk-surface-sunken: #f6f8fa; /* filter bar, row hover */ --fk-border: #dee2e6; --fk-text: var(--bs-body-color); --fk-text-muted: #667085; /* --- Spacing scale (4px base) ------------------------------------------ */ --fk-space-1: .25rem; --fk-space-2: .5rem; --fk-space-3: .75rem; --fk-space-4: 1rem; --fk-space-5: 1.5rem; --fk-space-6: 2rem; --fk-space-8: 3rem; /* --- Radius ---------------------------------------------------------------- */ --fk-radius-sm: .375rem; --fk-radius: .5rem; --fk-radius-lg: .75rem; /* --- Elevation ------------------------------------------------------------- */ --fk-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --fk-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px -10px rgba(16, 24, 40, .12); /* --- Focus ring --------------------------------------------------------- */ --fk-focus-ring: 0 0 0 .2rem rgba(var(--fk-brand-rgb), .3); } /* ============================================================================= * Faza 3 — dark mode. * * js/theme.js + partials/_theme_head.html.twig stamp `data-bs-theme` on * from the `fibkit_theme` cookie (auto | light | dark). Bootstrap 5.3 flips * all its own --bs-* vars; below we override the --fk-* tokens that hold a * literal colour, plus the link colour that panel-forms.css pins to the brand * blue on :root (too dark on a dark ground). * * The @media block is the fallback for `auto` when the inline script * cannot run (JS disabled); the [data-bs-theme] block is the normal path and * also lets the toggle force a theme against the OS setting. * -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --fk-surface-sunken: #2b3035; --fk-border: #3a424b; --fk-text-muted: #9aa4b0; --fk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --fk-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 0, 0, .6); --bs-link-color: #6ea8fe; --bs-link-hover-color: #8bb9fe; --fibkit-blue: #6ea8fe; } :root:not([data-bs-theme="light"]) .navbar-brand img { filter: brightness(0) invert(1); } } :root[data-bs-theme="dark"] { --fk-surface-sunken: #2b3035; --fk-border: #3a424b; --fk-text-muted: #9aa4b0; --fk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --fk-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 0, 0, .6); --bs-link-color: #6ea8fe; --bs-link-hover-color: #8bb9fe; --fibkit-blue: #6ea8fe; } /* Brand wordmark PNG is dark-on-transparent — knock it back to white on the dark navbar. Safe for a monochrome mark; swap for a real asset later. */ :root[data-bs-theme="dark"] .navbar-brand img { filter: brightness(0) invert(1); } /* --- Base -------------------------------------------------------------------- */ /* Consistent keyboard-focus outline across custom (non-Bootstrap) controls * such as the clickable table rows in the list views. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, tr[onclick]:focus-visible { outline: 2px solid var(--fk-brand); outline-offset: 2px; } /* Columns of figures in the grids (fibre counts, lengths, prices). */ .fk-num { font-variant-numeric: tabular-nums; } /* --- page_header (components/page_header.html.twig) ------------------------- */ .fk-page-header { margin-bottom: var(--fk-space-4); padding-bottom: var(--fk-space-3); border-bottom: 1px solid var(--fk-border); } .fk-page-title { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; color: var(--fk-text); } /* --- filter_bar (components/filter_bar.html.twig) -------------------------- */ .fk-filterbar-card { background: var(--fk-surface-sunken); border: 1px solid var(--fk-border); border-radius: var(--fk-radius); padding: var(--fk-space-3) var(--fk-space-4); margin-bottom: var(--fk-space-4); } /* let a mix of inputs, selects and buttons sit on one auto-sized row instead * of each stretching to 100% */ .fk-filterbar > .form-control, .fk-filterbar > .form-select { width: auto; min-width: 12rem; display: inline-block; } .fk-filterbar .col-form-label { padding-top: 0; padding-bottom: 0; color: var(--fk-text-muted); } /* --- data_table (components/data_table.html.twig) ------------------------- */ .fk-datatable { background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-lg); } /* clip the table's square corners to the card radius */ @media (min-width: 768px) { .fk-datatable > .table-responsive { border-radius: inherit; overflow: hidden; } } /* on the mobile card layout .table-cards turns rows into free-standing cards, * so the wrapper drops its own card chrome to avoid a card-in-card */ @media (max-width: 767.98px) { .fk-datatable { background: transparent; border: 0; border-radius: 0; } } .fk-datatable .table { margin-bottom: 0; --bs-table-hover-bg: var(--fk-surface-sunken); } .fk-datatable .table > thead > tr > th { padding: .6rem 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fk-text-muted); background: var(--fk-surface); border-bottom: 2px solid var(--fk-border); white-space: nowrap; } .fk-datatable .table > tbody > tr > td { padding: .55rem 1rem; border-bottom: 1px solid var(--fk-border); border-top: 0; vertical-align: middle; } .fk-datatable .table > tbody > tr:last-child > td { border-bottom: 0; } .fk-datatable .table > tbody > tr.table-no-results > td { padding: 2.5rem 1rem; color: var(--fk-text-muted); } /* Utility columns (row index, edit-icon action): a 15px glyph was clipped by the * inherited 1rem side padding on a 3rem-wide column. Centre it, trim the sides. */ .fk-datatable .table > thead > tr > th.card-actions, .fk-datatable .table > tbody > tr > td.card-actions { width: 3.25rem; text-align: center; padding-left: .4rem; padding-right: .6rem; } /* Cable placement (routeLineWireType) — compact pictogram + short label, full * UKE description on hover. Keeps the "Umieszczenie" column from wrapping to * 2–3 lines and inflating every row. */ .fk-place-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2em .55em; border-radius: .35rem; font-size: .78rem; font-weight: 500; line-height: 1.4; background: var(--fk-surface-sunken); border: 1px solid var(--fk-border); color: var(--fk-text); white-space: nowrap; cursor: help; } .fk-place-ic { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .8; } /* Fibre counts as one inline cluster (total / used / free) replacing three * separate numeric columns. Same three glyphs as the mobile card layout. */ .fk-fibres { display: inline-flex; gap: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .fk-fibres > span { display: inline-flex; align-items: center; gap: .28rem; cursor: help; } .fk-fibres svg { flex: 0 0 auto; } .fk-fibres .fk-fib-total { color: var(--fk-text-muted); } .fk-fibres .fk-fib-used { color: #c9660a; } .fk-fibres .fk-fib-free { color: #198754; } /* soft pill badges — align with construction_status_badge / network_layer_badge */ .badge.rounded-pill { font-weight: 600; padding: .35em .7em; } /* --- Leaflet in dark mode ------------------------------------------------------- * Leaflet's chrome is not Bootstrap, so [data-bs-theme] does not reach it. * These rules only apply when a dark theme is explicitly stamped on * (the map needs JS to exist at all, so the no-FOUC script has always run). * * Basemap: scripts.js adds the CARTO dark_all layer in dark mode and marks the * container `.fk-map-no-invert` (also for Google imagery). For anything else — * light OSM forced in dark mode, or the WMTS geoportal layer — the raster is * colour-inverted in place. The filter is on the whole .leaflet-tile-pane, so * vector overlays (cable polylines) and marker icons, in other panes, are * untouched; hue-rotate(180) puts blues/greens roughly back after the invert. */ :root[data-bs-theme="dark"] .leaflet-container:not(.fk-map-no-invert) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.85); } :root[data-bs-theme="dark"] .leaflet-container { background: #1a1d20; } /* Cable / connection polylines keep their status colours (set in JS), and * several of those are dark navy / maroon / near-black — barely visible on * the darkened basemap. A light halo on the whole overlay pane lifts every * vector off the ground without touching its colour. (A proper dark-mode * colour palette in the map JS would be the cleaner fix; this covers it for * now. Cost is one filtered layer during pan — fine for the segment-sized * views Fibkit shows.) */ :root[data-bs-theme="dark"] .leaflet-overlay-pane { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 2px rgba(255, 255, 255, .4)); } /* The map legend is a JS control with inline styles — override with !important. */ :root[data-bs-theme="dark"] .gis-legend { background: #2b3035 !important; border-color: #3a424b !important; color: #dee2e6; } :root[data-bs-theme="dark"] .gis-legend > div:first-child { color: #9aa4b0 !important; } /* zoom / draw / measure toolbars */ :root[data-bs-theme="dark"] .leaflet-bar a, :root[data-bs-theme="dark"] .leaflet-bar a:hover { background-color: #2b3035; color: #dee2e6; border-bottom-color: #3a424b; } :root[data-bs-theme="dark"] .leaflet-bar a.leaflet-disabled { background-color: #23272b; color: #6c757d; } /* attribution */ :root[data-bs-theme="dark"] .leaflet-control-attribution { background: rgba(26, 29, 32, .8) !important; color: #9aa4b0; } :root[data-bs-theme="dark"] .leaflet-control-attribution a { color: #6ea8fe; } /* layers control (incl. grouped-layer-control) + search */ :root[data-bs-theme="dark"] .leaflet-control-layers, :root[data-bs-theme="dark"] .leaflet-control-layers-toggle, :root[data-bs-theme="dark"] .leaflet-control-search, :root[data-bs-theme="dark"] .leaflet-control-search .search-input { background-color: #2b3035; color: #dee2e6; border-color: #3a424b; } /* The search button is a dark PNG sprite baked onto #fff — that white square * jars next to the dark zoom / layers buttons. Drop the white fill (the * control container behind it is already #2b3035) and invert the sprite so * the magnifier reads light, like the zoom +/- glyphs. */ :root[data-bs-theme="dark"] .leaflet-control-search .search-button, :root[data-bs-theme="dark"] .leaflet-control-search .search-button:hover { background-color: transparent; filter: invert(1) brightness(1.9); } :root[data-bs-theme="dark"] .leaflet-control-layers-expanded { color: #dee2e6; } :root[data-bs-theme="dark"] .leaflet-control-layers-separator, :root[data-bs-theme="dark"] .leaflet-control-layers-group-name { border-top-color: #3a424b; } /* popups & tooltips */ :root[data-bs-theme="dark"] .leaflet-popup-content-wrapper, :root[data-bs-theme="dark"] .leaflet-popup-tip, :root[data-bs-theme="dark"] .leaflet-tooltip { background: #2b3035; color: #dee2e6; border-color: #3a424b; } :root[data-bs-theme="dark"] .leaflet-popup-content a { color: #6ea8fe; } :root[data-bs-theme="dark"] .leaflet-popup-close-button { color: #adb5bd; }