:root { --form-default-size: 20px; --filter-box-height: 300px; --font-xs: 80%; --font-sm: 90%; --font-normal: inter-regular, 'Segoe UI', ubuntu-regular, sans-serif; --sidebar-width: 24rem; --sidebar-mini-width: 6.4rem; --sidebar-flyout-width: 22rem; --sidebar-bg-soft: rgba(255, 255, 255, 0.05); --sidebar-bg-soft-strong: rgba(255, 255, 255, 0.09); --sidebar-font-size: 1em; --sidebar-suboption-font-size: 0.95em; --sidebar-icon-size: 1.15em; --sidebar-icon-width: 1.5em; --sidebar-row-radius: 0.5em; --sidebar-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); --topbar-height: 50px; --scrollbar-width: 8px; /* ===== KOLORY — tokeny semantyczne (Faza 0 dark-mode refactor) ===== Wartości = obecny light. Każda reguła ma docelowo czytać TYLKO var(--color-*). Dark mode = przepisanie tych tokenów w html[data-theme="dark"] (patrz niżej). Mapa/uzasadnienie: claude-docs/css-refactor-plan.md */ /* Powierzchnie / tło */ --color-bg-app: #e0e0e0; --color-bg-app-darker: #bfbfbf; --color-surface: #ffffff; --color-surface-muted: #f6f7f8; --color-surface-alt: #f1f1f1; --color-surface-highlight: #e6e6ff; /* Tekst */ --color-text-primary: #000000; --color-text-secondary: #4b4c51; --color-text-muted: #888888; --color-text-inverse: #ffffff; /* Obramowania */ --color-border: #dddddd; --color-border-strong: #aaaaaa; --color-border-input: #e1e2e5; /* Akcent (marka) */ --color-accent: #6162F1; --color-accent-hover: #3B3DAB; --color-accent-strong: #8889FD; --color-accent-deep: #494BCF; --color-accent-soft-bg: #eff0ff; --color-accent-soft: rgba(97, 98, 241, 0.18); /* Nakładki / cienie */ --color-overlay-dark: rgba(0, 0, 0, 0.05); --color-row-hover: rgba(0, 0, 0, 0.04); --color-shadow: rgba(0, 0, 0, 0.3); /* Sidebar / topbar chrome */ --color-sidebar-bg: #0C0A1B; --color-sidebar-bg-elevated: #14122a; --color-sidebar-text: #d9dbe5; --color-sidebar-text-muted: #8a8f9e; /* Status: sukces */ --color-success: #258F00; --color-success-bg: #258F00; --color-success-hover: #1B6700; --color-success-soft-bg: #e4fcdf; --color-success-text: #047B52; /* Status: błąd */ --color-danger: #ED0B0B; --color-danger-hover: #7D0404; --color-danger-alt: #dc3545; --color-danger-soft-bg: #feeeee; --color-danger-text: #B91E15; /* Status: ostrzeżenie */ --color-warning: #FAA619; --color-warning-hover: #C88514; --color-warning-soft-bg: #faf1e0; --color-warning-text: #B54708; /* Status: info */ --color-info: #2870EC; --color-info-bg: #2870EC; --color-info-hover: #0045BC; --color-info-soft-bg: #e8f5ff; --color-info-text: #175CD3; /* Status: fiolet / teal */ --color-purple: #4A148C; --color-purple-soft-bg: #f9edfb; --color-teal: #046B6B; --color-teal-soft-bg: #dcf2f2; /* Soft-bg hover (przyciemnienie tła statusu na hover) */ --color-success-soft-bg-hover: #a5e2a9; --color-danger-soft-bg-hover: #f5b8b8; --color-warning-soft-bg-hover: #f9d9bf; --color-info-soft-bg-hover: #b0c2ef; --color-purple-soft-bg-hover: #e0ccf9; --color-teal-soft-bg-hover: #addfdf; /* Ciemne powierzchnie chrome (btn-menu, panel-heading, dark bary) */ --color-chrome: #222834; --color-chrome-deep: #1a2233; --color-scrollbar-thumb: #aaaaaa; --color-on-accent: #ffffff; --color-chrome-edge: rgba(255, 255, 255, 0.12); --color-accent-bg: #6162F1; --color-saved-filters-bg: rgba(255, 255, 255, 0.5); /* Cienie (wiązki box-shadow) */ --shadow-1: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; --shadow-2: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; --shadow-card: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; --shadow-thead: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; } /* ===== DARK MODE (html[data-theme="dark"]) ===== Aktywne przez atrybut data-theme="dark" na (przelacznik w topbarze, persist localStorage 'uniterTheme'). Brak atrybutu = light (:root powyzej). Paleta: Breeze (KDE Plasma) Dark; statusy wyostrzone. */ html[data-theme="dark"] { /* Powierzchnie (Breeze: view #1b1e20, window #2a2e32, button #31363b) */ color-scheme: dark; --color-bg-app: #1b1e20; --color-bg-app-darker: #16181a; --color-surface: #2a2e32; --color-surface-muted: #31363b; --color-surface-alt: #232629; --color-surface-highlight: #2d4257; /* Tekst (Breeze: #fcfcfc / inactive #bdc3c7) */ --color-text-primary: #fcfcfc; --color-text-secondary: #bdc3c7; --color-text-muted: #a0a6af; --color-text-inverse: #fcfcfc; /* Bordery / separatory */ --color-border: #121417; --color-border-strong: #1c1f23; --color-border-input: #16181c; /* Akcent (Breeze highlight #3daee9 / link #1d99f3) */ --color-accent: #3daee9; --color-accent-hover: #5cbef0; --color-accent-strong: #3daee9; --color-accent-deep: #93cef0; --color-accent-soft-bg: #1f3a4d; --color-accent-soft: rgba(61, 174, 233, 0.20); --color-overlay-dark: rgba(255, 255, 255, 0.07); --color-row-hover: rgba(255, 255, 255, 0.10); --color-shadow: rgba(0, 0, 0, 0.6); /* Sidebar (Breeze darks) */ --color-sidebar-bg: #121417; --color-sidebar-bg-elevated: #1c1f23; --color-sidebar-text: #eff0f1; --color-sidebar-text-muted: #8a9099; /* Statusy WYOSTRZONE (Breeze: green #27ae60, red #da4453, yellow #fdbc4b, blue #3daee9, purple #9b59b6, teal #1abc9c) */ --color-success: #2ecc71; --color-success-hover: #27ae60; --color-success-soft-bg: #16361f; --color-success-text: #5fdc8a; --color-success-bg: #1a5c34; --color-danger: #ed4a57; --color-danger-hover: #c0392b; --color-danger-alt: #ff5c69; --color-danger-soft-bg: #3a1a1e; --color-danger-text: #ff8a93; --color-warning: #fdbc4b; --color-warning-hover: #f67400; --color-warning-soft-bg: #3a2e10; --color-warning-text: #fdbc4b; --color-info: #3daee9; --color-info-hover: #1d99f3; --color-info-soft-bg: #15293a; --color-info-text: #5fbdf0; --color-info-bg: #155a8a; --color-purple: #b86fd6; --color-purple-soft-bg: #2a1638; --color-teal: #1abc9c; --color-teal-soft-bg: #0e2e2e; --color-success-soft-bg-hover: #1d4a28; --color-danger-soft-bg-hover: #4d2226; --color-warning-soft-bg-hover: #4d3d14; --color-info-soft-bg-hover: #1d3a52; --color-purple-soft-bg-hover: #3a2050; --color-teal-soft-bg-hover: #154040; --color-chrome: #2a2e32; --color-chrome-deep: #1b1e20; --color-scrollbar-thumb: #4a4f55; --color-on-accent: #ffffff; --color-accent-bg: #0f4866; --color-saved-filters-bg: #121417; --shadow-1: rgba(0, 0, 0, 0.5) 0px 1px 2px 0px, rgba(0, 0, 0, 0.4) 0px 1px 3px 1px; --shadow-2: rgba(0, 0, 0, 0.5) 0px 3px 6px, rgba(0, 0, 0, 0.6) 0px 3px 6px; --shadow-card: rgba(0, 0, 0, 0.6) 0px 2px 5px -1px, rgba(0, 0, 0, 0.5) 0px 1px 3px -1px; --shadow-thead: rgba(0, 0, 0, 0.4) 0px 1px 3px, rgba(0, 0, 0, 0.55) 0px 1px 2px; } /***************************************************/ /* SCROLLBAR****************************************/ /***************************************************/ ::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: content-box; border: 2px solid transparent; } ::-webkit-scrollbar-corner { background: transparent; } html { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; } /***************************************************/ /* FONTS *******************************************/ /***************************************************/ @font-face { font-family: ubuntu-regular; src: url(../fonts/ubuntu/ubuntu-regular.ttf); } @font-face { font-family: ubuntu-condensed; src: url(../fonts/ubuntu/ubuntu-condensed.ttf); } @font-face { font-family: open-sans-regular; src: url(../fonts/open-sans/open-sans-regular.ttf); } @font-face { font-family: inter-regular; src: url(../fonts/inter/inter-regular.ttf); } @font-face { font-family: quicksand-regular; src: url(../fonts/quicksand/quicksand-regular.ttf); } @font-face { font-family: quicksand-medium; src: url(../fonts/quicksand/quicksand-medium.ttf); } @font-face { font-family: quicksand-semibold; src: url(../fonts/quicksand/quicksand-semibold.ttf); } /***************************************************/ /* HTML ********************************************/ /***************************************************/ body { font-family: var(--font-normal); background-color: var(--color-bg-app); color: var(--color-text-primary); display: flex; flex-direction: column; height: 100vh; } h1, h2, h3, h4, h5 { font-weight: 600; display: block; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } h1 { font-size: 130%; } h2 { font-size: 120%; } h3 { font-size: 110%; } hr { margin: 4px 0px; border-color: var(--color-border); } select[multiple] { font-family: var(--font-normal) !important; min-height: 130px; min-width: 100px; display: block; } select { font-size: inherit; font-family: var(--font-normal) !important; vertical-align: top; } option { font-size: inherit; font-family: var(--font-normal) !important; } .bg-success { background-color: var(--color-success-soft-bg) !important; } .textarea { white-space: pre-line; max-height: 150px; overflow: auto; word-break: break-word; overflow-wrap: break-word; min-width: 120px; } textarea.form-control { min-height: 100px; } /***************************************************/ /* TABLES ******************************************/ /***************************************************/ table { width: 100%; cursor: default; background: var(--color-surface); margin-bottom: 0px; } thead { position: sticky; top: 0; z-index: 3; background: var(--color-surface); box-shadow: var(--shadow-thead); } th { padding: 2px; vertical-align: middle; /* outline (not border) so the rule renders correctly under position: sticky thead and ignores border-collapse semantics */ outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; } .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { vertical-align: top; padding: 1px; text-align: center; } tr.dragover { background-color: var(--color-surface-highlight); } .table-responsive { border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } table-content { display: block; } .table-centered-form-values td { text-align: center; } .table-centered-form-values td .form-box { text-align: center; } .table-centered-form-values td .form-value { justify-content: center; text-align: center; } th > .flex-item { display: block; } th > sort, th > triple-price-sort { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; } th > label, th > triple-price-sort label { display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; padding: 2px 4px; background-color: transparent; color: inherit; border-radius: 4px; cursor: pointer; min-height: 28px; transition: background-color 0.2s ease; } th > label:hover, th > triple-price-sort label:hover { background-color: rgba(0, 0, 0, 0.05); } /* When a holds more than one , separate the rows with a thin divider so adjacent triggers don't visually merge in the now-transparent default state. */ th > .sort-dropdown + .sort-dropdown { border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 2px; padding-top: 2px; } .sort-dropdown { width: 100%; } /* Full disambiguated column label ("pole [ścieżka]") shown as the sort dropdown's title — the column header itself shows only the last segment, so the dropdown carries the whole label. Small and distinct (semibold), wraps instead of forcing the menu wide. */ .sort-dropdown .dropdown-menu .dropdown-header { white-space: normal; word-break: break-word; max-width: 260px; font-size: var(--font-xs); font-weight: 600; letter-spacing: 0.02em; } .sort-trigger { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 2px 4px; margin: 2px 0px; background-color: transparent; border-radius: 4px; color: inherit; text-decoration: none; text-align: left; cursor: pointer; user-select: none; transition: background-color 0.2s ease; } /* Sort triggers inside a stay centered (the canonical table-header look). */ th .sort-trigger { text-align: center; } /* A virtual component-column header renders as a bare .sort-text (no .sort-trigger wrapper), so it misses the `th .sort-trigger` centering above — centre it here so it aligns like the field headers. */ .custom-list th .sort-text { text-align: center; } .sort-trigger:hover, .sort-trigger:focus { background-color: rgba(0, 0, 0, 0.05); color: inherit; text-decoration: none; outline: none; } .sort-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; max-height: calc(1.2em * 3); font-size: var(--font-sm); font-weight: 600; letter-spacing: 0.02em; } .sort-trigger.is-required .sort-text::after { content: " *"; color: var(--color-danger-alt); } .sort-indicators { display: flex; justify-content: flex-start; gap: 4px; margin-top: 1px; font-size: var(--font-xs); opacity: 0.7; } th .sort-indicators { justify-content: center; } tbody > tr:hover > td { box-shadow: inset 0 0 0 9999px var(--color-row-hover); transition: box-shadow 0.15s ease; } .no-row-hover tbody > tr:hover > td { box-shadow: none; transition: none; } /* Pin last column to right edge so action buttons stay visible on horizontal scroll. Applied by default to all main list tables ([colspan-table]) and Bootstrap tables (.table). Opt-out per table by adding class .no-sticky-last-col. Skip full-width cells (continuation/expanded rows) — matched by their own [colspan] attribute, NOT by tr:not(:has(td[colspan])): a :has() that any row mutation re-evaluates made every click/hover recompute styles for the whole table (~11 s at 100 rows). */ [colspan-table]:not(.no-sticky-last-col) > thead > tr > th:last-child, [colspan-table]:not(.no-sticky-last-col) > tbody > tr > td:last-child:not([colspan]), .table:not(.no-sticky-last-col) > thead > tr > th:last-child, .table:not(.no-sticky-last-col) > tbody > tr > td:last-child:not([colspan]), .sticky-last-col > thead > tr > th:last-child, .sticky-last-col > tbody > tr > td:last-child:not([colspan]) { position: sticky; right: 0; background-color: var(--color-surface); box-shadow: -4px 0 8px -2px var(--color-shadow); z-index: 2; } [colspan-table]:not(.no-sticky-last-col) > thead > tr > th:last-child, .table:not(.no-sticky-last-col) > thead > tr > th:last-child, .sticky-last-col > thead > tr > th:last-child { z-index: 4; } /* Przyklejona komorka ma wlasne tlo (inaczej przewijana tresc bylaby pod nia widoczna), wiec w wyroznionym wierszu — z otwartym podgladem albo rozwinieta sekcja — musi wziac to samo tlo co reszta wiersza, zeby nie zostawiac jasnej wyrwy na jego koncu. */ [colspan-table]:not(.no-sticky-last-col) > tbody > tr.active-preview > td:last-child:not([colspan]), [colspan-table]:not(.no-sticky-last-col) > tbody > tr.section-expanded > td:last-child:not([colspan]), .table:not(.no-sticky-last-col) > tbody > tr.active-preview > td:last-child:not([colspan]), .table:not(.no-sticky-last-col) > tbody > tr.section-expanded > td:last-child:not([colspan]), .sticky-last-col > tbody > tr.active-preview > td:last-child:not([colspan]), .sticky-last-col > tbody > tr.section-expanded > td:last-child:not([colspan]) { background-color: var(--color-surface-highlight); } /* When a dropdown is open inside the sticky last column, raise the cell's z-index above other sticky cells (same z-index in later rows would otherwise overlay it) and above the sticky thead. The dropdown-menu inside (z-index: 1100) then floats freely. The .td-dropdown-open class is toggled from JS exactly where the open state changes (unt-dropdown component, field directive) — a td:last-child:has(.open) selector did this declaratively, but :has() re-matched styles across the whole table on every open/close class flip, freezing large lists for seconds. */ [colspan-table]:not(.no-sticky-last-col) > tbody > tr > td:last-child.td-dropdown-open, .table:not(.no-sticky-last-col) > tbody > tr > td:last-child.td-dropdown-open, .sticky-last-col > tbody > tr > td:last-child.td-dropdown-open { z-index: 1101; } /* Rows whose select-one-checkbox is checked get the same subtle tint as the hover state, so users can see what is currently selected. Scoped to so the rule doesn't bleed into block-content layouts. .row-checked is toggled by the select-one-checkbox directive — see the :has() performance note above. */ table-content tbody > tr.row-checked > td { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.04); transition: box-shadow 0.15s ease; } td { border-top: 3px solid var(--color-border); padding: 2px 1px; } [colspan-table] tbody tr.freight-continuation > td { border-top: none; } /* Stacked field-like elements in a need a small gap or they visually merge. */ td > field, td > collection-field, td > status-updater, td > triple-price-field, td > double-price-field, td > save-address-button { display: block; margin: 2px 0; } .details-body table thead, .item-block table thead { position: unset; top: unset; z-index: unset; box-shadow: unset; } .light-green-background-color { background-color: var(--color-success-soft-bg); } .colspan-table-repeat-end-td { padding: 2px 8px 12px 8px; } .table-tr-collapse { padding: 8px 16px; background-color: var(--color-surface-alt); margin-bottom: 8px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; } /***************************************************/ /* CUSTOM ** ***************************************/ /***************************************************/ .font-smaller { font-size: 90%; } /* "Dokąd jedzie" column — compact, centered, even spacing. The default .form-value is flex/space-between/text-left/min-width:40px, which broke the centering, so it is overridden here. */ .last-route-point { font-size: var(--font-xs); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; } .last-route-point .form-box { min-height: 0; } .last-route-point .form-value { justify-content: center !important; text-align: center !important; min-width: 0 !important; padding: 0 !important; } .last-route-point .route-point-line { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; } .last-route-point .route-point-line > div, .last-route-point .route-point-line .form-value { width: auto !important; } .last-route-point .enum-image { width: 16px; height: 11px; margin-right: 4px; } .font-bigger { font-size: 110%; } /* route-points table header: xs size, primary text colour (same as sort), centred values */ .route-points-header th { font-size: var(--font-xs); color: var(--color-text-primary); text-align: center; } /***************************************************/ /* BOOTSTRAP ***************************************/ /***************************************************/ .badge { font-size: var(--font-xs); font-weight: unset; padding: 0px 4px; margin: 0px 2px 0px 4px; line-height: unset; background-color: var(--color-danger-alt); color: var(--color-text-inverse); } .close { opacity: 0.5; } .row { margin: 0px 0px; padding: 0px 0px; } .nav-tabs { padding:1px 0px 0px 1px; cursor: pointer; width: 100%; border-bottom: 1px solid var(--color-border); } /* Bootstrap pulls each tab down 1px (margin-bottom: -1px) so it overlaps the bottom border line — drop it so tabs sit on the line instead of over it. */ .nav-tabs>li { margin-bottom: 0; } .nav-tabs>li>a { background-color: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-surface-highlight); border-bottom: 3px solid var(--color-surface); margin-bottom: 1px; min-width: 120px; text-align: center; padding: 4px 8px; margin: 4px 1px 0px 1px; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { cursor: default; border: 1px solid var(--color-accent); border-bottom: 3px solid var(--color-accent); background-color: var(--color-surface-highlight); color: var(--color-text-primary); font-weight: 600; } .nav-tabs>li:not(.active)>a:hover { border: 1px solid #6263D5; border-bottom: 3px solid #6263D5; background-color: var(--highlight-background-color); } [class^="col-lg-"], [class^="col-md-"], [class^="col-sm-"], [class^="col-xs-"], [class*=" col-lg-"], [class*=" col-md-"], [class*=" col-sm-"], [class*=" col-xs-"] { padding: 0 2px; } .btn { margin: 1px 1px; padding: 4px 8px; font-size: inherit; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .btn-text-left { text-align: left; } input[type="checkbox"], input[type="radio"] { margin: 4px 4px; } .badge-primary { background-color: var(--color-accent-bg); color: var(--color-text-inverse); } .list-group { margin-bottom: 0px; } .list-group.rolled-up { max-height: 250px; overflow-y: auto; } .list-group-item { margin: 2px 0px 2px 0px; padding: 0px 2px; } .d-none { display: none !important; } .d-block { display: block !important; } @media ( min-width : 992px) { .d-lg-block { display: block !important; } } /***************************************************/ /* GRID*********************************************/ /***************************************************/ .wrapper { display: grid; /* Single column capped at the viewport (min 0) so wide content — e.g. the favourites bar scrolling on its own row — can't blow the grid column out past the screen and push the topbar's right-hand icons off. */ grid-template-columns: minmax(0, 1fr); } .topbar { height: 50px; background-color: var(--color-sidebar-bg); border-bottom: 1px solid var(--color-chrome-edge); } /* public pages: pin the paginator to the bottom of the screen while the list scrolls */ .public-paginator { position: sticky; bottom: 0; z-index: 100; background: var(--color-surface); } /* public pages: pin the topbar to the top of the screen, vertically center its elements */ .public-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; flex: 0 0 auto; } /* Public contract-vehicle list: full-height frame — topbar pinned top, only the list scrolls, paginator pinned to the bottom of the screen. Scoped via :has() so other public pages keep their normal flow. */ .public-frame:has(public-transport-contract-vehicle-by-transport-contract-list), .public-wrapper:has(public-transport-contract-vehicle-by-transport-contract-list), [ng-view]:has(public-transport-contract-vehicle-by-transport-contract-list), public-transport-contract-details, .public-contract-page, public-transport-contract-vehicle-by-transport-contract-list, public-transport-contract-vehicle-by-transport-contract-list paginated-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } public-transport-contract-vehicle-by-transport-contract-list ng-transclude { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .public-list-title { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; } /* paginator: vertically center all its elements */ .app-content-footer > .row { display: flex; align-items: center; } .app-topbar { height: 100%; width: 100%; align-items: center; display: flex; flex-wrap: nowrap; padding: 0px 8px 0px 8px; } .app-topbar > .inline { flex-wrap: nowrap; flex-shrink: 0; } .app-topbar > .inline:last-child { margin-left: auto; } .app-topbar .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; height: 36px; min-width: 36px; padding: 0 8px; font-size: 1em; line-height: 1; } .app-topbar .btn.btn-sidebar-toggle { height: var(--topbar-height); } .app-topbar .btn > i { font-size: 1.15em; line-height: 1; } .app-topbar .btn > .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin: 0 0 0 6px; border-radius: 9px; font-size: 11px; line-height: 1; } #sidebar { overflow: hidden; width: var(--sidebar-width); transition: width var(--sidebar-transition); } #content { display: flex; height: calc(100vh - var(--topbar-height)); } .app-content { padding: 0px; width: calc(100vw - var(--sidebar-width)); overflow: auto; display: flex; flex-direction: column; height: 100%; transition: width var(--sidebar-transition); } .app-content-header { min-height: 40px; display: flex; flex-wrap: nowrap; align-items: center; padding: 0px 8px 0px 8px; gap: 6px; } .app-content-header > .inline:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; } .app-content-header > .inline:first-child h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-content-header-buttons { flex: 1 1 auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; } .app-content-header-buttons > *, .app-content-header-buttons .btn { flex-shrink: 0; white-space: nowrap; } .app-content-data { height: calc(100vh - 50px - 20px - 60px); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; } .app-content-footer { display: grid; align-items: center; overflow: hidden; border-top: 1px solid var(--color-border); padding-top: 4px; } #topbarContent { padding: 0px 0px 12px 0px; } .details-body { display: grid; grid-template-rows: auto 1fr; height: calc(100vh - 50px); } .details-topbar { width: 100%; overflow: hidden; background-color: var(--color-bg-app); box-shadow: var(--shadow-card); position: relative; z-index: 154; } /* Topbar detali: 12-torowa siatka CSS zamiast floatow bootstrapa — pola trzymaja rowne wiersze niezaleznie od wysokosci wartosci (floaty zaczepialy kolejne kolumny o wyzsze pola). Spany wg klas col-lg-N. */ .content-box-details-topbar .row:not(.content-box-header) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 8px; /* Ujemne marginesy bootstrapowego .row kompensowaly paddingi kolumn, ktore siatka zeruje — bez tego wiersze wystawalyby 15px poza kontener. */ margin-left: 0; margin-right: 0; } /* Clearfix bootstrapa (::before/::after z display:table) w kontenerze grid stalby sie elementem siatki i zajmowal pierwszy tor, przesuwajac pola. */ .content-box-details-topbar .row:not(.content-box-header)::before, .content-box-details-topbar .row:not(.content-box-header)::after { content: none; } .content-box-details-topbar .row:not(.content-box-header) > * { grid-column-end: span 12; min-width: 0; width: auto; float: none; padding-left: 0; padding-right: 0; } @media (min-width: 1200px) { .content-box-details-topbar .row:not(.content-box-header) > .col-lg-1 { grid-column-end: span 1; } .content-box-details-topbar .row:not(.content-box-header) > .col-lg-2 { grid-column-end: span 2; } .content-box-details-topbar .row:not(.content-box-header) > .col-lg-3 { grid-column-end: span 3; } .content-box-details-topbar .row:not(.content-box-header) > .col-lg-4 { grid-column-end: span 4; } .content-box-details-topbar .row:not(.content-box-header) > .col-lg-6 { grid-column-end: span 6; } .content-box-details-topbar .row:not(.content-box-header) > .col-lg-offset-1 { grid-column-start: 2; } } /* Pasek tytulu detali: strona tytulowa moze sie kurczyc (h1 ma globalny ellipsis, ale flex item z min-width:auto nigdy nie schodzil ponizej tresci), a blok przyciskow trzyma jeden wiersz i nie jest sciskany. */ .details-topbar .content-box-header .field-horizontal { flex: 1 1 auto; min-width: 0; /* Bazowy .field-horizontal ma space-between — po rozciagnieciu flexem odsuwaloby to tytul od lewej krawedzi w strone przyciskow. */ justify-content: flex-start; } .details-topbar .content-box-header .field-horizontal > span { min-width: 0; } .details-topbar .content-box-header .inline.text-right { flex-shrink: 0; } .details-topbar .content-box-header ng-transclude[ng-transclude-slot="headerButtons"].in { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; } .details-content { overflow-y: auto; overflow-x: hidden; width: 100%; padding-bottom: 50px; background-color: var(--color-bg-app); } .vehicle-actions-icons { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; } .lazy-map-prompt { padding: 24px; text-align: center; } /* Leaflet popup used as "insert waypoint" context menu on OSM map — leave room for the close button (X) and keep the action button on a single line. */ .waypoint-insert-popup .leaflet-popup-content { margin: 8px 24px 8px 8px; } .waypoint-insert-popup .leaflet-popup-content > a.btn { white-space: nowrap; } .waypoint-insert-position-modal .content-box { margin: 0; } .waypoint-insert-position-modal .waypoint-insert-list { list-style: none; padding: 0; margin: 0; } .waypoint-insert-position-modal .waypoint-insert-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px; } .waypoint-insert-position-modal .waypoint-insert-icon { width: 16px; text-align: center; } .waypoint-insert-position-modal .waypoint-insert-row.stop .waypoint-insert-icon { color: var(--color-danger-alt); } .waypoint-insert-position-modal .waypoint-insert-row.waypoint .waypoint-insert-icon { color: var(--color-success); } .waypoint-insert-position-modal .waypoint-insert-details { flex: 1; min-width: 0; } .waypoint-insert-position-modal .waypoint-insert-meta { font-size: 12px; color: var(--color-text-muted); } .waypoint-insert-position-modal .waypoint-insert-meta > span:not(:last-child)::after { content: " · "; } .waypoint-insert-position-modal .waypoint-insert-gap { text-align: center; padding: 4px 0; } .vehicle-marker-popup, .stop-marker-popup, .waypoint-marker-popup { font-size: 11px; line-height: 1.4; white-space: nowrap; } .vehicle-marker-popup > div, .stop-marker-popup > div, .waypoint-marker-popup > div { margin-bottom: 2px; } .popup-actions { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px; } /* coords-actions is a wrapper component; let its buttons flow as flex items of .popup-actions */ .popup-actions coords-actions { display: contents; } .popup-actions .btn { flex: none; } .map-context-menu { display: flex; flex-direction: column; gap: 4px; } .waypoint-latlng-row { display: flex; gap: 4px; } .waypoint-mini-map-box { margin-bottom: 8px; } .waypoint-mini-map { display: block; z-index: 1; } /* Leaflet popup: 4px corners, allow auto-width for our popups, leave room for X. Tło/tekst/ogonek czytają tokeny — biały w light, ciemna powierzchnia w dark mode. */ .leaflet-popup-content-wrapper { border-radius: 4px; background-color: var(--color-surface); color: var(--color-text-primary); } .leaflet-popup-tip { background-color: var(--color-surface); } .leaflet-popup-close-button { color: var(--color-text-secondary); } .leaflet-popup-content:has(.vehicle-marker-popup), .leaflet-popup-content:has(.stop-marker-popup), .leaflet-popup-content:has(.waypoint-marker-popup) { max-width: none !important; width: auto !important; margin: 6px 22px 6px 8px; } /* Google Maps InfoWindow: 4px corners + compact close button (insert-waypoint context menu). Tło/tekst/ogonek/krzyżyk czytają tokeny — w light mode = obecny biały dymek, w dark mode (html[data-theme="dark"]) automatycznie ciemna powierzchnia. */ .gm-style .gm-style-iw-c { border-radius: 4px !important; padding: 4px 8px !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; } .gm-style .gm-style-iw-c .gm-ui-hover-effect { width: 18px !important; height: 18px !important; top: 2px !important; right: 2px !important; } .gm-style .gm-style-iw-c .gm-ui-hover-effect > span { width: 14px !important; height: 14px !important; margin: 2px !important; background-color: var(--color-text-secondary) !important; } .gm-style .gm-style-iw-d { overflow: hidden !important; padding-right: 18px; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; } /* Ogonek dymka (trójkąt pod bąblem) — musi mieć ten sam kolor co powierzchnia. */ .gm-style .gm-style-iw-tc::after { background: var(--color-surface) !important; } /* Sticky stack inside freight-order-details: 1. .sticky-freight-tabs — freight nav-tabs at the top of the scroll area 2. .sticky-freight-overview — transport "Ogólne" collapsible 3. .freight-stops-host header — only the stops collapsible HEADER (title + buttons) All have an opaque background and the overview has an upward box-shadow that covers any sub-pixel gap above so scrolling content doesn't peek. */ .details-content .sticky-freight-tabs { margin: 0; } .details-content .sticky-freight-overview { background-color: var(--color-bg-app); margin: 0; } .details-content .freight-tabs-bar { position: sticky; top: 0; z-index: 153; display: flex; align-items: flex-end; gap: 12px; padding: 6px 12px 0 12px; background-color: var(--color-bg-app); box-shadow: var(--shadow-thead); } .details-content .freight-tabs-bar .nav-tabs { flex: 1 1 auto; margin-bottom: 0; } /* Trigger statusu w polu (field w trybie status="true") — kolor tla/tekstu niesie klasa z enumClassesMap, tu tylko uklad jak w dawnym btn-status. */ .form-value.status-trigger { justify-content: center; font-weight: 600; border-radius: 4px; } /* Zageszczony stos wartosci: font-smaller na field-no-vertical-space zbija tez pionowe odstepy miedzy kwotami (min-height form-boxa je rozpychal). */ .field-no-vertical-space.font-smaller .form-box { min-height: 0; } .field-no-vertical-space.font-smaller .form-value { padding-top: 0; padding-bottom: 0; } /* Kolumna mapy przytwierdzona podczas scrollowania sasiedniej kolumny (np. przystanki + szacowane koszty) — jak w modalu "Pokaz trasy". align-self: flex-start, bo we flexowych wierszach panelu bocznego domyslny stretch rozciagnalby kolumne i sticky nie mialby ruchu. */ .sticky-map-col { position: sticky; top: 0; align-self: flex-start; } /* Wrapper przewijanych zakladek (unt-tabs-bar) przejmuje w sticky pasku flex-sizing, ktore mial goly ul. */ .details-content .freight-tabs-bar .unt-tabs-bar { flex: 1 1 auto; min-width: 0; } .details-content .freight-tabs-bar .freight-active-summary { flex: 0 1 auto; align-self: center; font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 6px; } .details-content .freight-section-title { margin: 0; padding: 6px 8px; font-weight: 600; font-size: 14px; line-height: 1.4; overflow: visible; white-space: nowrap; flex: 0 0 auto; } /* Nagłówek "Podsumowanie" w sekcji rozliczenia transportu: mniejszy niż domyślny h4 i odsunięty od listy dodatkowych pozycji nad nim. */ freight-details-settlement h4 { font-size: 14px; margin-top: 16px; margin-bottom: 4px; } currency-sums { display: block; margin-top: 8px; } /* Sekcja rozliczenia: stały układ 2 kolumn (na lg+; poniżej jedna kolumna jak dla col-lg). Kolumna z polami staje się siatką flex-wrap, a każdy wiersz (field-horizontal) zajmuje 50% — pola są uporządkowane tak, że stawka trafia do lewej kolumny, a jej wyliczona kwota do prawej (obok siebie), bez trzeciej kolumny. */ @media (min-width: 992px) { freight-details-settlement [class*="col-lg"]:has(> .field-horizontal) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; } freight-details-settlement [class*="col-lg"] > .field-horizontal { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); } } .details-content .sticky-freight-tabs > li > a { white-space: nowrap; } /* `top` values for the sticky stack are calibrated against the default user font-size (~14px). With body { font-size } set from the user's profile (see run.js — `angular.element("body").css('font-size', data.fontSize)`), the actual heights of nav-tabs and the "Ogólne" collapsible scale with font-size, so larger user fonts can shift the boundary by a few pixels. The short upward box-shadow (8px) fills any sub-pixel gap between the sticky tabs (ends near y=38) and this sticky element (starts at y=38) without reaching the "Transporty" h3 above the tabs (tabs are ~35-44px tall depending on font, plus the h3 has its own margin and z-index). */ .details-content .sticky-freight-overview { position: sticky; top: 44px; z-index: 152; box-shadow: 0 -10px 0 0 var(--color-bg-app); } /* When the transport-options dropdown is open, lift the overview's stacking context above the sticky freight-tabs bar (z-index 153) — otherwise the dropdown menu (trapped in this sticky element's stacking context) is painted underneath the tabs bar. */ .details-content .sticky-freight-overview:has(.open) { z-index: 154; } .details-content .sticky-freight-overview .content-box-section { margin: 0; } /* Chip shown next to the Ogólne title — freight number */ #bottombar { position: fixed; max-width: calc(100vw - 250px); bottom: 0px; right: 10px; z-index: 1003; padding: 10px; } #list-tab-section { position: relative; height: calc(100vh - 50px); overflow-y: auto; overflow-x: hidden; z-index: 10; box-shadow: -10px 0 24px -6px var(--color-shadow); border-left: 1px solid var(--color-border-strong); background-color: var(--color-bg-app); } .list-tab-section-body { padding: 0; } /* In the side panel, let details-body flow naturally and let #list-tab-section handle the scroll. The full-page details view keeps its fixed grid layout. */ #list-tab-section .details-body { display: block; height: auto; } #list-tab-section .details-content { overflow: visible; height: auto; padding-bottom: 0; } /* The topbar sticks to the top of the side panel while the body scrolls. */ #list-tab-section .details-topbar { overflow: visible; height: auto; position: sticky; top: 0; z-index: 5; background-color: var(--color-bg-app); } .mobile-show { display: none; } #list-tab-section [class^="col-lg-offset-"], #list-tab-section [class*=" col-lg-offset-"] { margin: unset; } #list-tab-section .mobile-hide { display: none; } /* Side panel (preview) header: show the list title inline next to the select-all checkbox so the header reads "checkbox – title – buttons" on one line, for every side list (generalized from the former entity-category-list-only rule). */ #list-tab-section .app-content-header h1.mobile-hide { display: inline-block; font-size: 16px; font-weight: 600; margin: 0 0 0 6px; } /* Side panel (preview): tighter horizontal spacing between icons/buttons. */ #list-tab-section .app-content-header, #list-tab-section .app-content-header-buttons, #list-tab-section .filter-header { gap: 3px; } #list-tab-section .app-content-header { padding-left: 4px; padding-right: 36px; } #list-tab-section .app-content-header-buttons .btn, #list-tab-section .filter-header .btn { padding-left: 6px; padding-right: 6px; } /* Side panel (preview): header / filter / sort buttons collapse to icon-only; labels remain available as hover tooltips (title). Dropdown menu item labels are preserved. */ #list-tab-section .app-content-header-buttons .btn span, #list-tab-section .filter-header .btn span { display: none; } #list-tab-section .dropdown-menu .btn span { display: inline; } /* When the side panel is open, the narrowed main-list column collapses its header button labels to icons too. Matched via the col-sm-6 main column that has a following list-tab-section sibling holding #list-tab-section (present only while a tab is active); dropdown menu item labels are preserved. */ [class*="col-sm-6"]:has(~ list-tab-section #list-tab-section) .app-content-header-buttons .btn span { display: none; } [class*="col-sm-6"]:has(~ list-tab-section #list-tab-section) .dropdown-menu .btn span { display: inline; } /* Uwaga: wysokosc .details-content w panelu ustawia regula "flow naturally" (height: auto) wyzej w pliku — sztywna wysokosc tutaj ograniczala containing block sticky metryki i odklejala ja w trakcie scrollowania podgladu. */ #list-tab-section .content-box-header { display: flex; } #list-tab-section .content-box { margin-top: 10px; /* Bez bocznych marginesow/paddingu: wcinaly pola sekcji o ~16px wzgledem topbara (wrap-content=false renderuje sie bez content-boxa). */ margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Side-panel layout. Every field is

…

. Each .row and each multi-field container is a flex-wrap row. Single-field wrappers take 50% (two per visual row); everything else takes 100%. */ #list-tab-section [class^="col-"], #list-tab-section [class*=" col-"] { width: 100%; margin: 0; padding: 0; float: none; } /* Exclude .content-box-header and .sticky-box rows — those use bootstrap col widths for header layouts (list-statistics, collapsible header, etc.). */ /* CSS grid zamiast flex-wrap + calc(50% - 2px): komorki 2-kolumnowej siatki sa z konstrukcji rowne (bez subpikselowych przesuniec przy lamaniu wierszy). */ /* Clearfix bootstrapa jako element siatki/flexa przesuwal pola o ~4px (to bylo zrodlo nierownych wierszy w podgladzie). */ #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row)::before, #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row)::after { content: none; } #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row), #list-tab-section :is(.content-box, [class^="col-"], [class*=" col-"]):has(> .field-horizontal + .field-horizontal) { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; row-gap: 0; align-items: stretch; } /* Domyslnie kazde dziecko zajmuje caly wiersz siatki... */ #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row) > *, #list-tab-section :is(.content-box, [class^="col-"], [class*=" col-"]):has(> .field-horizontal + .field-horizontal) > * { grid-column: 1 / -1; max-width: 100%; width: 100%; min-width: 0; } /* ...a pojedyncze pola po dwa na wiersz — jedna komorka siatki. */ #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row) > :is([class^="col-"], [class*=" col-"]):has(> .field-horizontal:only-child), #list-tab-section :is(.content-box, [class^="col-"], [class*=" col-"]):has(> .field-horizontal + .field-horizontal) > .field-horizontal { grid-column: auto; } /* Sekcje (collapsible) w panelu bocznym zawsze jedna pod druga, niezaleznie od ukladu kolumn, w ktorym osadzil je widok. */ #list-tab-section collapsible { display: block; width: 100%; } /***************************************************/ /* MATERIAL ****************************************/ /***************************************************/ button, select, html, textarea, input { font-family: var(--font-normal); } body.md-default-theme, body, html.md-default-theme, html { color: var(--color-text-primary); } md-backdrop.md-dialog-backdrop { z-index: 992; } md-switch { margin: 0px; } /***************************************************/ /* FIELD**** ***************************************/ /***************************************************/ .field-horizontal { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; border-radius: 4px; transition: background-color 0.3s ease; } .field-horizontal:hover { background-color: rgba(0, 0, 0, 0.05); } /* Pola label:wartosc — wszedzie ten sam uklad: wszystkie labele maja rowna szerokosc, a blok wartosci (field + ikony field-extension) rowna szerokosc dopelnienia. Wartosc rozpycha sie w swoim obszarze, ikony laduja na jego prawej krawedzi. Konteksty kompaktowe (np. waypoints-route-summary) nadpisuja te reguly selektorami o wyzszej specyficznosci. */ .field-horizontal > label, .field-horizontal > .label, .field-horizontal > sort, .field-horizontal > triple-price-sort { flex: 0 0 40%; } .field-horizontal > field, .field-horizontal > triple-price-field, .field-horizontal > double-price-field, .field-horizontal > [triple-price-field], .field-horizontal > [double-price-field], .field-horizontal > .field-no-vertical-space { flex: 1 1 0; min-width: 0; } .field-horizontal .field-extension { margin-left: auto; } label, .label { display: flex; flex: 1; font-size: var(--font-sm); font-weight: 600; cursor: default; color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .field-extension { word-break: break-all; color: var(--color-text-muted); font-size: var(--font-sm); padding: 1px; border-radius: 4px; } /* Obwoluta z nazwa edytowanego pola nad obszarem edycji — widoczna na mobile (mobile-show), gdzie dropdown-arkusz jest oderwany od pola. Neutralna powierzchnia (--color-surface-alt: jasna w light, ciemniejsza od arkusza w dark) i drobniejsza czcionka odrozniaja naglowek od obszaru edycji. */ .dropdown-menu .field-edit-header { padding: 6px 12px; margin-bottom: 4px; font-size: 0.85em; font-weight: 600; background-color: var(--color-surface-alt); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-strong); } .dropdown-menu .field-edit-header .fa-pencil { margin-right: 6px; opacity: 0.7; } /* Akcje dropdownu pola (zapisz/anuluj/kopiuj...) — przygaszone tlo odroznia je od listy wartosci do wyboru. Tlo na linkach, nie na

: czesc