/* * Własne nadpisania motywu Inspinia (ten plik NIE pochodzi z pipeline'u SCSS — edytuj go ręcznie). * Ładowany po app.min.css w partials/head-css. */ /* * Kalendarz Flatpickr w oknie modalnym. * Motyw (app.min.css) ustawia .flatpickr-calendar.open{z-index:999}, czyli PONIŻEJ modala * Bootstrapa (z-index 1055) i jego tła (1050) — przez co kalendarz chowa się pod dialogiem. * Podnosimy go nad modal (tooltipy Bootstrapa są na 1080, więc 1060 jest bezpieczne). */ .flatpickr-calendar.open { z-index: 1060; } /* * Logo RaChuj — motyw trzyma logo na sztywno (--ins-logo-*-height: 26px), a reguła * .logo-lg img{height:var(...)} nadpisuje atrybut height z . Pasek (--ins-topbar-height) * ma 65px, więc spokojnie mieści większe logo. Podnosimy zmienne (motyw używa ich też do * wyśrodkowania w trybie zwiniętym) ORAZ dublujemy regułą bezpośrednią (ta sama specyficzność, * późniejsza kolejność — wygrywa pewnie). */ :root { --ins-logo-lg-height: 46px; --ins-logo-sm-height: 40px; } .logo-lg img { height: 46px; } .logo-sm img { height: 40px; } /* * Tryb „Symulacja na żywo" w Zestawieniach (logika w /js/zestawienia-symulacja.js). * Przełącznik wierszy i edycja kwot widoczne tylko gdy ma klasę .sym-on. */ /* Ukrycie elementów, które mają klasę .d-flex (display:flex !important z motywu) — własna * reguła w custom.css jest ładowana PÓŹNIEJ, więc przy równej specyficzności wygrywa. */ .sym-hidden { display: none !important; } .sym-toggle { display: none; line-height: 1; } body.sym-on .sym-toggle { display: inline-block; } /* Wyłączony wiersz — wyszarzony i przekreślony, nie liczy się do sum. */ .sym-wiersz.sym-off { opacity: .45; } .sym-wiersz.sym-off td { text-decoration: line-through; } .sym-wiersz.sym-off .sym-toggle { text-decoration: none; } /* W trybie aktywnym kwota netto jest klikalna (edycja w miejscu). */ body.sym-on .sym-netto { cursor: pointer; border-bottom: 1px dashed var(--ins-primary, #6c757d); } body.sym-on .sym-wiersz.sym-off .sym-netto { cursor: default; border-bottom: 0; } /* Nadpisana kwota — wyróżniona. */ .sym-netto.sym-zmieniony { color: var(--ins-primary, #0d6efd); font-weight: 700; } /* * Zwijanie bloków (kart) kosztów/przychodów w Zestawieniach. Nagłówek klikalny (chevron wstrzykiwany * przez JS); zwinięta karta chowa treść i stopkę, zostaje sam nagłówek z sumą. */ .zest-blok > .card-header { cursor: pointer; } .zest-blok.zest-zwiniety > .card-body, .zest-blok.zest-zwiniety > .card-footer { display: none; } .zest-chevron { transition: transform .15s ease; } /* „Wyłącz prognozy" — ukrycie wszystkich elementów prognozy (wiersze + badge + linie KPI + zakładka). */ body.bez-prognoz .sym-wiersz[data-prognoza="1"], body.bez-prognoz .el-prognoza { display: none !important; } /* * Choices.js (przeszukiwalne selecty, select[data-provider="szukaj"]) — dopasowanie do * Bootstrapowego .form-select. Plugin owija miał form-select-sm) — znacznik dokładany w custom.js. */ .choices--sm .choices__inner { min-height: calc(1.5em + .5rem + 2px); padding: .25rem 1.75rem .25rem .5rem; font-size: .875rem; } /* * Podświetlenie wierszy pasujących do szybkiego szukania w tabelach, których szukajka NIE filtruje, * a jedynie ma wskazać trafienia (np. roczna macierz kosztów w widoku Zespół). Klasę dokłada * custom.js (wlaczSzybkieSzukanie → elementy z data-podswietl). Akcent w motywie „warning". * Tło na z !important, bo komórki table-bordered/hover nadpisałyby tło ustawione na . */ tr.szukajka-trafienie > td { background-color: rgba(var(--ins-warning-rgb, 249, 200, 81), .22) !important; } tr.szukajka-trafienie > td:first-child { box-shadow: inset 3px 0 0 0 var(--ins-warning, #f9c851); } /* * Pierścień KPI (donut) — status opłacenia / marża w kafelkach Zestawień. Czysty CSS (conic-gradient * + maska wycinająca środek), bez wykresów. Procent: zmienna --p (0–100); kolor łuku: --c; tor (reszta): * --track. Środek przezroczysty, więc prześwituje tło (tonowane) kafelka. */ .kpi-ring { --p: 0; --c: var(--ins-success, #22c55e); --track: rgba(0, 0, 0, .08); --b: 9px; width: 60px; height: 60px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--track) 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--b)), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--b)), #000 0); } /* * Opisy działów w dymku (Tippy.js, init w custom.js: wlaczOpisyDzialow). Ikonka „i" * przed nazwą działu w nagłówku karty; treść z ukrytego rodzeństwa .opis-tresc. */ .opis-ikona { cursor: help; vertical-align: baseline; } .opis-dzialu { margin-right: .15rem; } .tippy-box[data-theme~='light-border'] { font-size: .8125rem; line-height: 1.45; } .tippy-box[data-theme~='light-border'] .tippy-content { padding: .5rem .7rem; } /* * Widok mobilny (karty) vs desktopowy (tabela) na listach transakcji/faktur. * Domyślnie steruje breakpoint Bootstrapa: tabela ma .d-none.d-lg-block, karty .d-lg-none. * Globalny przełącznik w górnym pasku zapisuje ciasteczko rachuj-layout i ustawia klasę * .force-mobile / .force-desktop na (inline w , bez migania, oraz w custom.js * przy kliknięciu). Te reguły wymuszają jeden wariant niezależnie od szerokości ekranu. * Oznaczamy oba warianty klasami js-widok-tabela / js-widok-karty, żeby nie ruszać innych d-*. */ html.force-mobile .js-widok-tabela { display: none !important; } html.force-mobile .js-widok-karty { display: block !important; } html.force-desktop .js-widok-karty { display: none !important; } html.force-desktop .js-widok-tabela { display: block !important; } /* Nagłówek grupy dat w widoku kartowym transakcji (styl „aplikacji bankowej"). */ .karta-data { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ins-secondary-color, #8a909d); margin: .75rem .15rem .35rem; } .karta-data:first-child { margin-top: 0; } /* Karta pozycji (transakcja/faktura) — zwarte odstępy, separator, klikalna. */ .karta-pozycja { margin-bottom: .5rem; } .karta-pozycja .card-body { padding: .65rem .85rem; } a.karta-pozycja { display: block; } a.karta-pozycja:hover { background-color: var(--ins-tertiary-bg, rgba(0, 0, 0, .02)); }