/* * VisualHelp — stonowana paleta Metronica (przyciski, etykiety, przełączniki, checkboxy, zakładki, alerty, toastr, SweetAlert2…). * * Metronic 7 ma kolory motywu wpisane na sztywno (primary #3699FF, success #1BC5BD, info #8950FC, warning #FFA800, * danger #F64E60) — jaskrawe, a biały tekst na nich ma kontrast 1,9–3,4:1. Tu są ich spokojniejsze odpowiedniki (OKLCH: * ta sama barwa, mniejsze nasycenie, stała jasność) jako zmienne; poniżej znacznika GENERATED — reguły Metronica z tymi * kolorami przepisane na zmienne (ten sam selektor → ta sama specyficzność; generator: bin/palette-metronic.mjs). * * Kolejność: ładowany ZARAZ PO arkuszach Metronica (style.bundle.css + themes/layout/*), przed app.css i arkuszami modułów — * więc style modułów nadpisują paletę tak, jak wcześniej nadpisywały Metronica. Ciemny motyw: te same zmienne * w public/css/vh-dark.css (html[data-theme="dark"]). Kolory wartości pól z bazy — osobno, public/css/vh-colors.css. * * Zmienne (X = primary | success | info | warning | danger); w nowych stylach używajcie ich zamiast #3699FF itd.: * --vh-c-X pełne tło: btn-X, label-X, zaznaczony checkbox/przełącznik, aktywna pigułka, pasek postępu * --vh-c-X-hover pełne tło pod kursorem / wciśnięte * --vh-c-X-on tekst i ikony na pełnym tle (biały; dla warning — ciemny brąz na bursztynie) * --vh-c-X-text kolorowy tekst na karcie i na tint (text-X, label-light-X, btn-light-X, linki) — ≥ 4,5:1 * --vh-c-X-text-hover kolorowy tekst pod kursorem * --vh-c-X-tint jasne tło (bg-light-X, label-light-X, btn-light-X, alert-light-X, symbol-light-X) * --vh-c-X-tint-strong mocniejsze jasne tło / obramowanie alertu * --vh-c-X-soft obwódka pola z fokusem, delikatne obramowania * --vh-c-X-strong ciemny tekst na tint (alert-X) * --vh-aside-accent akcent na ciemnym menu bocznym (ciemne w obu motywach) * Kontrasty (WCAG) w komentarzach — liczone dla tła karty (#fff) i tint; pomiar w przeglądarce: var/tmp/qa/pal/measure.mjs. */ :root { /* primary: tekst na pełnym tle 5.2:1 (hover 6.4), kolorowy tekst 5.8:1 na karcie, 5.2:1 na tint */ --vh-c-primary: #2E6FB3; --vh-c-primary-hover: #2261A0; --vh-c-primary-on: #FFFFFF; --vh-c-primary-text: #2967A7; --vh-c-primary-text-hover: #18518A; --vh-c-primary-strong: #1F446B; --vh-c-primary-tint: #E8F2FF; --vh-c-primary-tint-strong: #CCE2FB; --vh-c-primary-soft: #81AFE2; /* success: tekst na pełnym tle 4.9:1 (hover 6.1), kolorowy tekst 5.7:1 na karcie, 5.1:1 na tint */ --vh-c-success: #217D73; --vh-c-success-hover: #156E64; --vh-c-success-on: #FFFFFF; --vh-c-success-text: #1E736A; --vh-c-success-text-hover: #125C54; --vh-c-success-strong: #114D46; --vh-c-success-tint: #E0F7F3; --vh-c-success-tint-strong: #C0EAE3; --vh-c-success-soft: #77BAB0; /* info: tekst na pełnym tle 5.4:1 (hover 6.7), kolorowy tekst 6.2:1 na karcie, 5.4:1 na tint */ --vh-c-info: #6D5DB2; --vh-c-info-hover: #5F50A0; --vh-c-info-on: #FFFFFF; --vh-c-info-text: #6554A9; --vh-c-info-text-hover: #504387; --vh-c-info-strong: #42386E; --vh-c-info-tint: #F0EFFE; --vh-c-info-tint-strong: #DFDBFC; --vh-c-info-soft: #AAA1E0; /* danger: tekst na pełnym tle 5.4:1 (hover 6.6), kolorowy tekst 6.2:1 na karcie, 5.4:1 na tint */ --vh-c-danger: #B5454C; --vh-c-danger-hover: #A03B41; --vh-c-danger-on: #FFFFFF; --vh-c-danger-text: #A73D43; --vh-c-danger-text-hover: #852E33; --vh-c-danger-strong: #6A2B2E; --vh-c-danger-tint: #FFECEC; --vh-c-danger-tint-strong: #FCD4D3; --vh-c-danger-soft: #E39191; /* warning: ciemny tekst na stonowanym bursztynie 8.0:1 (hover 6.8), kolorowy tekst 5.4:1 na karcie, 4.9:1 na tint */ --vh-c-warning: #F3BC6E; --vh-c-warning-hover: #E5AB60; --vh-c-warning-on: #402811; --vh-c-warning-text: #955D1D; --vh-c-warning-text-hover: #774914; --vh-c-warning-strong: #5D3916; --vh-c-warning-tint: #FFF1E1; --vh-c-warning-tint-strong: #FDDBB2; --vh-c-warning-soft: #EDBA7A; /* menu boczne i logo (ciemne w obu motywach): 7.9:1 na tle menu */ --vh-aside-accent: #82B5EF; /* przełącznik wyłączony (neutralny tor zamiast koloru — wcześniej „prywatny” był pomarańczowy także wyłączony) */ --vh-switch-off: #DADDE7; --vh-switch-knob: #ffffff; /* przełącznik „outline” wyłączony (Metronic: obwódka i gałka #EBEDF3 na białym — 1,2:1, niewidoczne) */ --vh-switch-outline: #C9CCD8; --vh-switch-outline-knob: #9A9DB0; } /* ---------- przełączniki Metronica: wyłączony = neutralny tor + wyraźna gałka; włączony = kolor palety ---------- */ .switch:not(.switch-outline) input:empty:not(:checked) ~ span:before { background-color: var(--vh-switch-off) !important; } .switch:not(.switch-outline) input:empty:not(:checked) ~ span:after { background-color: var(--vh-switch-knob) !important; opacity: 1 !important; box-shadow: 0 1px 2px rgba(24, 28, 50, .25); } .switch:not(.switch-outline) input:checked ~ span:after { box-shadow: 0 1px 2px rgba(24, 28, 50, .2); } .switch.switch-outline input:empty:not(:checked) ~ span:before { border-color: var(--vh-switch-outline) !important; } .switch.switch-outline input:empty:not(:checked) ~ span:after { background-color: var(--vh-switch-outline-knob) !important; opacity: 1 !important; } /* ---------- toastr: ostrzeżenie — ciemny tekst i ciemna ikona na bursztynie (oryginalna ikona jest biała) ---------- */ #toast-container > .toast-warning { color: var(--vh-c-warning-on); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23402811' d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/%3E%3C/svg%3E") !important; } #toast-container > .toast-warning .toast-close-button { color: var(--vh-c-warning-on); text-shadow: none; } /* toastr domyślnie ma przezroczystość .8 — tekst pod spodem prześwitywał przez komunikat */ #toast-container > div { opacity: .97; } /* ---------- .btn-light: tekst #7E8299 na #F3F6F9 miał 3,5:1 → ciemniejszy szary (5,8:1); ikony zostają jaśniejsze ---------- */ .btn.btn-light:not(.btn-text), .btn.btn-light:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light:focus:not(.btn-text), .btn.btn-light:not(:disabled):not(.disabled).active, .btn.btn-light:not(:disabled):not(.disabled):active:not(.btn-text), .show > .btn.btn-light.dropdown-toggle { color: #5E6278; } /* ---------- liczniki zapisanych wyszukiwań w ciemnym menu bocznym: przygaszona pigułka zamiast jasnej; mieści 3 cyfry ---------- */ .aside-menu .menu-nav > .menu-item > .menu-link .menu-label > .label.label-rounded { width: auto; min-width: 22px; height: 20px; padding: 0 .4rem; font-size: .75rem; font-variant-numeric: tabular-nums; } .aside-menu .menu-nav > .menu-item > .menu-link .menu-label > .label.label-light-primary { background-color: color-mix(in srgb, var(--vh-aside-accent) 16%, transparent); color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item > .menu-link .menu-label > .label.label-light { background-color: rgba(255, 255, 255, .06); color: #8a8aa5; } .aside-menu .menu-nav > .menu-item > .menu-link .menu-label > .label.label-light-danger { background-color: color-mix(in srgb, #EFA3A3 16%, transparent); color: #EFA3A3; } /* ==== GENERATED by bin/palette-metronic.mjs — nie edytować ręcznie poniżej tej linii ==== */ /* --- public/assets/css/style.bundle.css --- */ :root { --primary: var(--vh-c-primary); --success: var(--vh-c-success); --info: var(--vh-c-info); --warning: var(--vh-c-warning); --danger: var(--vh-c-danger); } a { color: var(--vh-c-primary-text); } .form-control:focus { border-color: var(--vh-c-primary-soft); } .invalid-feedback { color: var(--vh-c-danger-text); } .form-control.is-invalid { border-color: var(--vh-c-danger); } .form-control.is-invalid:focus { border-color: var(--vh-c-danger); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-danger) 25%, transparent); } .custom-select.is-invalid { border-color: var(--vh-c-danger); } .custom-select.is-invalid:focus { border-color: var(--vh-c-danger); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-danger) 25%, transparent); } .custom-file-input.is-invalid ~ .custom-file-label { border-color: var(--vh-c-danger); } .custom-file-input.is-invalid:focus ~ .custom-file-label { border-color: var(--vh-c-danger); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-danger) 25%, transparent); } .btn-primary { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); } .btn-primary:hover { background-color: var(--vh-c-primary-hover); border-color: var(--vh-c-primary-hover); } .btn-primary:focus, .btn-primary.focus { background-color: var(--vh-c-primary-hover); border-color: var(--vh-c-primary-hover); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-primary-soft) 50%, transparent); } .btn-primary.disabled, .btn-primary:disabled { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background-color: var(--vh-c-primary-hover); border-color: var(--vh-c-primary-hover); } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-primary-soft) 50%, transparent); } .btn-success { background-color: var(--vh-c-success); border-color: var(--vh-c-success); } .btn-success:hover { background-color: var(--vh-c-success-hover); border-color: var(--vh-c-success-hover); } .btn-success:focus, .btn-success.focus { background-color: var(--vh-c-success-hover); border-color: var(--vh-c-success-hover); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-success-soft) 50%, transparent); } .btn-success.disabled, .btn-success:disabled { background-color: var(--vh-c-success); border-color: var(--vh-c-success); } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { background-color: var(--vh-c-success-hover); border-color: var(--vh-c-success-hover); } .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-success-soft) 50%, transparent); } .btn-info { background-color: var(--vh-c-info); border-color: var(--vh-c-info); } .btn-info:hover { background-color: var(--vh-c-info-hover); border-color: var(--vh-c-info-hover); } .btn-info:focus, .btn-info.focus { background-color: var(--vh-c-info-hover); border-color: var(--vh-c-info-hover); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-info-soft) 50%, transparent); } .btn-info.disabled, .btn-info:disabled { background-color: var(--vh-c-info); border-color: var(--vh-c-info); } .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { background-color: var(--vh-c-info-hover); border-color: var(--vh-c-info-hover); } .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-info-soft) 50%, transparent); } .btn-warning { background-color: var(--vh-c-warning); border-color: var(--vh-c-warning); } .btn-warning:hover { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning-hover); border-color: var(--vh-c-warning-hover); } .btn-warning:focus, .btn-warning.focus { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning-hover); border-color: var(--vh-c-warning-hover); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-warning-hover) 50%, transparent); } .btn-warning.disabled, .btn-warning:disabled { background-color: var(--vh-c-warning); border-color: var(--vh-c-warning); } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning-hover); border-color: var(--vh-c-warning-hover); } .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-warning-hover) 50%, transparent); } .btn-danger { background-color: var(--vh-c-danger); border-color: var(--vh-c-danger); } .btn-danger:hover { background-color: var(--vh-c-danger-hover); border-color: var(--vh-c-danger-hover); } .btn-danger:focus, .btn-danger.focus { background-color: var(--vh-c-danger-hover); border-color: var(--vh-c-danger-hover); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-danger-soft) 50%, transparent); } .btn-danger.disabled, .btn-danger:disabled { background-color: var(--vh-c-danger); border-color: var(--vh-c-danger); } .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { background-color: var(--vh-c-danger-hover); border-color: var(--vh-c-danger-hover); } .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-danger-soft) 50%, transparent); } .dropdown-item.active, .dropdown-item:active { background-color: var(--vh-c-primary); } .custom-select:focus { border-color: var(--vh-c-primary-soft); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem color-mix(in srgb, var(--vh-c-primary) 25%, transparent); } .custom-file-input:focus ~ .custom-file-label { border-color: var(--vh-c-primary-soft); } .page-link { color: var(--vh-c-primary-text); } .page-item.active .page-link { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); } .progress-bar { background-color: var(--vh-c-primary); } .list-group-item.active { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); } .bg-success { background-color: var(--vh-c-success) !important; } a.bg-success:hover, a.bg-success:focus, button.bg-success:hover, button.bg-success:focus { background-color: var(--vh-c-success-hover) !important; } .text-primary { color: var(--vh-c-primary-text) !important; } a.text-primary:hover, a.text-primary:focus { color: var(--vh-c-primary-text-hover) !important; } .text-success { color: var(--vh-c-success-text) !important; } a.text-success:hover, a.text-success:focus { color: var(--vh-c-success-strong) !important; } .text-info { color: var(--vh-c-info-text) !important; } a.text-info:hover, a.text-info:focus { color: var(--vh-c-info-text-hover) !important; } .text-warning { color: var(--vh-c-warning-text) !important; } a.text-warning:hover, a.text-warning:focus { color: var(--vh-c-warning-strong) !important; } .text-danger { color: var(--vh-c-danger-text) !important; } a.text-danger:hover, a.text-danger:focus { color: var(--vh-c-danger-text-hover) !important; } .bg-light-primary { background-color: var(--vh-c-primary-tint) !important; } .bg-light-success { background-color: var(--vh-c-success-tint) !important; } .bg-light-info { background-color: var(--vh-c-info-tint) !important; } .bg-light-warning { background-color: var(--vh-c-warning-tint) !important; } .bg-light-danger { background-color: var(--vh-c-danger-tint) !important; } .text-primary { color: var(--vh-c-primary-text) !important; } a.text-hover-primary:hover, .text-hover-primary:hover { color: var(--vh-c-primary-text) !important; } a.text-hover-primary:hover i, .text-hover-primary:hover i { color: var(--vh-c-primary-text) !important; } a.text-hover-primary:hover .svg-icon svg g [fill], .text-hover-primary:hover .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .hoverable:hover a.text-hover-primary, .hoverable:hover .text-hover-primary { color: var(--vh-c-primary-text) !important; } .hoverable:hover a.text-hover-primary i, .hoverable:hover .text-hover-primary i { color: var(--vh-c-primary-text) !important; } .hoverable:hover a.text-hover-primary .svg-icon svg g [fill], .hoverable:hover .text-hover-primary .svg-icon svg g [fill] { fill: var(--vh-c-primary-text) !important; } .text-success { color: var(--vh-c-success-text) !important; } .text-info { color: var(--vh-c-info-text) !important; } .text-warning { color: var(--vh-c-warning-text) !important; } .text-danger { color: var(--vh-c-danger-text) !important; } .burger-icon:hover span { background-color: var(--vh-c-primary); } .burger-icon:hover span::before, .burger-icon:hover span::after { background-color: var(--vh-c-primary); } .breadcrumb .breadcrumb-item.active i, .breadcrumb .breadcrumb-item.active a, .breadcrumb .breadcrumb-item:hover i, .breadcrumb .breadcrumb-item:hover a { color: var(--vh-c-primary-text) !important; } .nav .show > .nav-link, .nav .nav-link:hover:not(.disabled), .nav .nav-link.active { color: var(--vh-c-primary-text); } .nav .show > .nav-link:after, .nav .nav-link:hover:not(.disabled):after, .nav .nav-link.active:after { color: var(--vh-c-primary-text); } .nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled), .nav.nav-tabs.nav-tabs-line .nav-link.active, .nav.nav-tabs.nav-tabs-line .show > .nav-link { border-bottom: 1px solid var(--vh-c-primary); } .nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link:hover:not(.disabled), .nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link.active, .nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .show > .nav-link { border-bottom: 2px solid var(--vh-c-primary); } .alert.alert-custom.alert-light-primary { background-color: var(--vh-c-primary-tint); } .alert.alert-custom.alert-light-primary .alert-icon i { color: var(--vh-c-primary-text); } .alert.alert-custom.alert-light-primary .alert-text { color: var(--vh-c-primary-text); } .alert.alert-custom.alert-light-success { background-color: var(--vh-c-success-tint); } .alert.alert-custom.alert-light-success .alert-icon i { color: var(--vh-c-success-text); } .alert.alert-custom.alert-light-success .alert-text { color: var(--vh-c-success-text); } .alert.alert-custom.alert-light-info { background-color: var(--vh-c-info-tint); } .alert.alert-custom.alert-light-info .alert-icon i { color: var(--vh-c-info-text); } .alert.alert-custom.alert-light-info .alert-text { color: var(--vh-c-info-text); } .alert.alert-custom.alert-light-warning { background-color: var(--vh-c-warning-tint); } .alert.alert-custom.alert-light-warning .alert-icon i { color: var(--vh-c-warning-text); } .alert.alert-custom.alert-light-warning .alert-text { color: var(--vh-c-warning-text); } .alert.alert-custom.alert-light-danger { background-color: var(--vh-c-danger-tint); } .alert.alert-custom.alert-light-danger .alert-icon i { color: var(--vh-c-danger-text); } .alert.alert-custom.alert-light-danger .alert-text { color: var(--vh-c-danger-text); } .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-clean:focus:not(.btn-text), .btn.btn-clean.focus:not(.btn-text) { color: var(--vh-c-primary-text); } .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-clean:focus:not(.btn-text) i, .btn.btn-clean.focus:not(.btn-text) i { color: var(--vh-c-primary-text); } .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-clean:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-clean.focus:not(.btn-text) .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-clean:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-clean.focus:not(.btn-text).dropdown-toggle:after { color: var(--vh-c-primary-text); } .btn.btn-clean:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-clean:not(:disabled):not(.disabled).active, .show > .btn.btn-clean.dropdown-toggle { color: var(--vh-c-primary-text); } .btn.btn-clean:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-clean:not(:disabled):not(.disabled).active i, .show > .btn.btn-clean.dropdown-toggle i { color: var(--vh-c-primary-text); } .btn.btn-clean:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-clean:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-clean.dropdown-toggle .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .btn.btn-clean:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-clean:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-clean.dropdown-toggle.dropdown-toggle:after { color: var(--vh-c-primary-text); } .btn.btn-primary { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); } .btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-primary:focus:not(.btn-text), .btn.btn-primary.focus:not(.btn-text) { background-color: var(--vh-c-primary-hover); border-color: var(--vh-c-primary-hover); } .btn.btn-primary.disabled, .btn.btn-primary:disabled { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); } .btn.btn-primary:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-primary:not(:disabled):not(.disabled).active, .show > .btn.btn-primary.dropdown-toggle { background-color: var(--vh-c-primary-hover); border-color: var(--vh-c-primary-hover); } .btn.btn-light-primary { color: var(--vh-c-primary-text); background-color: var(--vh-c-primary-tint); } .btn.btn-light-primary i { color: var(--vh-c-primary-text); } .btn.btn-light-primary .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .btn.btn-light-primary.dropdown-toggle:after { color: var(--vh-c-primary-text); } .btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-primary:focus:not(.btn-text), .btn.btn-light-primary.focus:not(.btn-text) { background-color: var(--vh-c-primary); } .btn.btn-light-primary.disabled, .btn.btn-light-primary:disabled { color: var(--vh-c-primary-text); background-color: var(--vh-c-primary-tint); } .btn.btn-light-primary.disabled i, .btn.btn-light-primary:disabled i { color: var(--vh-c-primary-text); } .btn.btn-light-primary.disabled .svg-icon svg g [fill], .btn.btn-light-primary:disabled .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .btn.btn-light-primary.disabled.dropdown-toggle:after, .btn.btn-light-primary:disabled.dropdown-toggle:after { color: var(--vh-c-primary-text); } .btn.btn-light-primary:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-primary:not(:disabled):not(.disabled).active, .show > .btn.btn-light-primary.dropdown-toggle { background-color: var(--vh-c-primary); } .btn.btn-hover-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-hover-light-primary:focus:not(.btn-text), .btn.btn-hover-light-primary.focus:not(.btn-text) { color: var(--vh-c-primary-text); background-color: var(--vh-c-primary-tint); } .btn.btn-hover-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-hover-light-primary:focus:not(.btn-text) i, .btn.btn-hover-light-primary.focus:not(.btn-text) i { color: var(--vh-c-primary-text); } .btn.btn-hover-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-hover-light-primary:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-hover-light-primary.focus:not(.btn-text) .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .btn.btn-hover-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-hover-light-primary:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-hover-light-primary.focus:not(.btn-text).dropdown-toggle:after { color: var(--vh-c-primary-text); } .btn.btn-hover-light-primary:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-hover-light-primary:not(:disabled):not(.disabled).active, .show > .btn.btn-hover-light-primary.dropdown-toggle { color: var(--vh-c-primary-text); background-color: var(--vh-c-primary-tint); } .btn.btn-hover-light-primary:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-hover-light-primary:not(:disabled):not(.disabled).active i, .show > .btn.btn-hover-light-primary.dropdown-toggle i { color: var(--vh-c-primary-text); } .btn.btn-hover-light-primary:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-hover-light-primary:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-hover-light-primary.dropdown-toggle .svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .btn.btn-hover-light-primary:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-hover-light-primary:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-hover-light-primary.dropdown-toggle.dropdown-toggle:after { color: var(--vh-c-primary-text); } .btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-hover-primary:focus:not(.btn-text), .btn.btn-hover-primary.focus:not(.btn-text) { background-color: var(--vh-c-primary) !important; border-color: var(--vh-c-primary) !important; } .btn.btn-hover-primary:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-hover-primary:not(:disabled):not(.disabled).active, .show > .btn.btn-hover-primary.dropdown-toggle { background-color: var(--vh-c-primary) !important; border-color: var(--vh-c-primary) !important; } .btn.btn-success { background-color: var(--vh-c-success); border-color: var(--vh-c-success); } .btn.btn-success:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-success:focus:not(.btn-text), .btn.btn-success.focus:not(.btn-text) { background-color: var(--vh-c-success-hover); border-color: var(--vh-c-success-hover); } .btn.btn-success.disabled, .btn.btn-success:disabled { background-color: var(--vh-c-success); border-color: var(--vh-c-success); } .btn.btn-success:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-success:not(:disabled):not(.disabled).active, .show > .btn.btn-success.dropdown-toggle { background-color: var(--vh-c-success-hover); border-color: var(--vh-c-success-hover); } .btn.btn-light-success { color: var(--vh-c-success-text); background-color: var(--vh-c-success-tint); } .btn.btn-light-success i { color: var(--vh-c-success-text); } .btn.btn-light-success .svg-icon svg g [fill] { fill: var(--vh-c-success-text); } .btn.btn-light-success.dropdown-toggle:after { color: var(--vh-c-success-text); } .btn.btn-light-success:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-success:focus:not(.btn-text), .btn.btn-light-success.focus:not(.btn-text) { background-color: var(--vh-c-success); } .btn.btn-light-success.disabled, .btn.btn-light-success:disabled { color: var(--vh-c-success-text); background-color: var(--vh-c-success-tint); } .btn.btn-light-success.disabled i, .btn.btn-light-success:disabled i { color: var(--vh-c-success-text); } .btn.btn-light-success.disabled .svg-icon svg g [fill], .btn.btn-light-success:disabled .svg-icon svg g [fill] { fill: var(--vh-c-success-text); } .btn.btn-light-success.disabled.dropdown-toggle:after, .btn.btn-light-success:disabled.dropdown-toggle:after { color: var(--vh-c-success-text); } .btn.btn-light-success:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-success:not(:disabled):not(.disabled).active, .show > .btn.btn-light-success.dropdown-toggle { background-color: var(--vh-c-success); } .btn.btn-info { background-color: var(--vh-c-info); border-color: var(--vh-c-info); } .btn.btn-info:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-info:focus:not(.btn-text), .btn.btn-info.focus:not(.btn-text) { background-color: var(--vh-c-info-hover); border-color: var(--vh-c-info-hover); } .btn.btn-info.disabled, .btn.btn-info:disabled { background-color: var(--vh-c-info); border-color: var(--vh-c-info); } .btn.btn-info:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-info:not(:disabled):not(.disabled).active, .show > .btn.btn-info.dropdown-toggle { background-color: var(--vh-c-info-hover); border-color: var(--vh-c-info-hover); } .btn.btn-light-info { color: var(--vh-c-info-text); background-color: var(--vh-c-info-tint); } .btn.btn-light-info i { color: var(--vh-c-info-text); } .btn.btn-light-info .svg-icon svg g [fill] { fill: var(--vh-c-info-text); } .btn.btn-light-info.dropdown-toggle:after { color: var(--vh-c-info-text); } .btn.btn-light-info:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-info:focus:not(.btn-text), .btn.btn-light-info.focus:not(.btn-text) { background-color: var(--vh-c-info); } .btn.btn-light-info.disabled, .btn.btn-light-info:disabled { color: var(--vh-c-info-text); background-color: var(--vh-c-info-tint); } .btn.btn-light-info.disabled i, .btn.btn-light-info:disabled i { color: var(--vh-c-info-text); } .btn.btn-light-info.disabled .svg-icon svg g [fill], .btn.btn-light-info:disabled .svg-icon svg g [fill] { fill: var(--vh-c-info-text); } .btn.btn-light-info.disabled.dropdown-toggle:after, .btn.btn-light-info:disabled.dropdown-toggle:after { color: var(--vh-c-info-text); } .btn.btn-light-info:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-info:not(:disabled):not(.disabled).active, .show > .btn.btn-light-info.dropdown-toggle { background-color: var(--vh-c-info); } .btn.btn-warning { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning); border-color: var(--vh-c-warning); } .btn.btn-warning i { color: var(--vh-c-warning-on); } .btn.btn-warning .svg-icon svg g [fill] { fill: var(--vh-c-warning-on); } .btn.btn-warning.dropdown-toggle:after { color: var(--vh-c-warning-on); } .btn.btn-warning:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-warning:focus:not(.btn-text), .btn.btn-warning.focus:not(.btn-text) { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning-hover); border-color: var(--vh-c-warning-hover); } .btn.btn-warning:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-warning:focus:not(.btn-text) i, .btn.btn-warning.focus:not(.btn-text) i { color: var(--vh-c-warning-on); } .btn.btn-warning:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-warning:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-warning.focus:not(.btn-text) .svg-icon svg g [fill] { fill: var(--vh-c-warning-on); } .btn.btn-warning:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-warning:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-warning.focus:not(.btn-text).dropdown-toggle:after { color: var(--vh-c-warning-on); } .btn.btn-warning.disabled, .btn.btn-warning:disabled { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning); border-color: var(--vh-c-warning); } .btn.btn-warning.disabled i, .btn.btn-warning:disabled i { color: var(--vh-c-warning-on); } .btn.btn-warning.disabled .svg-icon svg g [fill], .btn.btn-warning:disabled .svg-icon svg g [fill] { fill: var(--vh-c-warning-on); } .btn.btn-warning.disabled.dropdown-toggle:after, .btn.btn-warning:disabled.dropdown-toggle:after { color: var(--vh-c-warning-on); } .btn.btn-warning:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-warning:not(:disabled):not(.disabled).active, .show > .btn.btn-warning.dropdown-toggle { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning-hover); border-color: var(--vh-c-warning-hover); } .btn.btn-warning:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-warning:not(:disabled):not(.disabled).active i, .show > .btn.btn-warning.dropdown-toggle i { color: var(--vh-c-warning-on); } .btn.btn-warning:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-warning:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-warning.dropdown-toggle .svg-icon svg g [fill] { fill: var(--vh-c-warning-on); } .btn.btn-warning:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-warning:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-warning.dropdown-toggle.dropdown-toggle:after { color: var(--vh-c-warning-on); } .btn.btn-light-warning { color: var(--vh-c-warning-text); background-color: var(--vh-c-warning-tint); } .btn.btn-light-warning i { color: var(--vh-c-warning-text); } .btn.btn-light-warning .svg-icon svg g [fill] { fill: var(--vh-c-warning-text); } .btn.btn-light-warning.dropdown-toggle:after { color: var(--vh-c-warning-text); } .btn.btn-light-warning:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-warning:focus:not(.btn-text), .btn.btn-light-warning.focus:not(.btn-text) { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning); } .btn.btn-light-warning:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-light-warning:focus:not(.btn-text) i, .btn.btn-light-warning.focus:not(.btn-text) i { color: var(--vh-c-warning-on); } .btn.btn-light-warning:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-light-warning:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-light-warning.focus:not(.btn-text) .svg-icon svg g [fill] { fill: var(--vh-c-warning-on); } .btn.btn-light-warning:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-light-warning:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-light-warning.focus:not(.btn-text).dropdown-toggle:after { color: var(--vh-c-warning-on); } .btn.btn-light-warning.disabled, .btn.btn-light-warning:disabled { color: var(--vh-c-warning-text); background-color: var(--vh-c-warning-tint); } .btn.btn-light-warning.disabled i, .btn.btn-light-warning:disabled i { color: var(--vh-c-warning-text); } .btn.btn-light-warning.disabled .svg-icon svg g [fill], .btn.btn-light-warning:disabled .svg-icon svg g [fill] { fill: var(--vh-c-warning-text); } .btn.btn-light-warning.disabled.dropdown-toggle:after, .btn.btn-light-warning:disabled.dropdown-toggle:after { color: var(--vh-c-warning-text); } .btn.btn-light-warning:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-warning:not(:disabled):not(.disabled).active, .show > .btn.btn-light-warning.dropdown-toggle { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning); } .btn.btn-light-warning:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-light-warning:not(:disabled):not(.disabled).active i, .show > .btn.btn-light-warning.dropdown-toggle i { color: var(--vh-c-warning-on); } .btn.btn-light-warning:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-light-warning:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-light-warning.dropdown-toggle .svg-icon svg g [fill] { fill: var(--vh-c-warning-on); } .btn.btn-light-warning:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-light-warning:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-light-warning.dropdown-toggle.dropdown-toggle:after { color: var(--vh-c-warning-on); } .btn.btn-danger { background-color: var(--vh-c-danger); border-color: var(--vh-c-danger); } .btn.btn-danger:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-danger:focus:not(.btn-text), .btn.btn-danger.focus:not(.btn-text) { background-color: var(--vh-c-danger-hover); border-color: var(--vh-c-danger-hover); } .btn.btn-danger.disabled, .btn.btn-danger:disabled { background-color: var(--vh-c-danger); border-color: var(--vh-c-danger); } .btn.btn-danger:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-danger:not(:disabled):not(.disabled).active, .show > .btn.btn-danger.dropdown-toggle { background-color: var(--vh-c-danger-hover); border-color: var(--vh-c-danger-hover); } .btn.btn-light-danger { color: var(--vh-c-danger-text); background-color: var(--vh-c-danger-tint); } .btn.btn-light-danger i { color: var(--vh-c-danger-text); } .btn.btn-light-danger .svg-icon svg g [fill] { fill: var(--vh-c-danger-text); } .btn.btn-light-danger.dropdown-toggle:after { color: var(--vh-c-danger-text); } .btn.btn-light-danger:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-danger:focus:not(.btn-text), .btn.btn-light-danger.focus:not(.btn-text) { background-color: var(--vh-c-danger); } .btn.btn-light-danger.disabled, .btn.btn-light-danger:disabled { color: var(--vh-c-danger-text); background-color: var(--vh-c-danger-tint); } .btn.btn-light-danger.disabled i, .btn.btn-light-danger:disabled i { color: var(--vh-c-danger-text); } .btn.btn-light-danger.disabled .svg-icon svg g [fill], .btn.btn-light-danger:disabled .svg-icon svg g [fill] { fill: var(--vh-c-danger-text); } .btn.btn-light-danger.disabled.dropdown-toggle:after, .btn.btn-light-danger:disabled.dropdown-toggle:after { color: var(--vh-c-danger-text); } .btn.btn-light-danger:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-light-danger:not(:disabled):not(.disabled).active, .show > .btn.btn-light-danger.dropdown-toggle { background-color: var(--vh-c-danger); } .btn.btn-hover-light-danger:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-hover-light-danger:focus:not(.btn-text), .btn.btn-hover-light-danger.focus:not(.btn-text) { color: var(--vh-c-danger-text); background-color: var(--vh-c-danger-tint); } .btn.btn-hover-light-danger:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-hover-light-danger:focus:not(.btn-text) i, .btn.btn-hover-light-danger.focus:not(.btn-text) i { color: var(--vh-c-danger-text); } .btn.btn-hover-light-danger:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-hover-light-danger:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-hover-light-danger.focus:not(.btn-text) .svg-icon svg g [fill] { fill: var(--vh-c-danger-text); } .btn.btn-hover-light-danger:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-hover-light-danger:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-hover-light-danger.focus:not(.btn-text).dropdown-toggle:after { color: var(--vh-c-danger-text); } .btn.btn-hover-light-danger:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-hover-light-danger:not(:disabled):not(.disabled).active, .show > .btn.btn-hover-light-danger.dropdown-toggle { color: var(--vh-c-danger-text); background-color: var(--vh-c-danger-tint); } .btn.btn-hover-light-danger:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-hover-light-danger:not(:disabled):not(.disabled).active i, .show > .btn.btn-hover-light-danger.dropdown-toggle i { color: var(--vh-c-danger-text); } .btn.btn-hover-light-danger:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-hover-light-danger:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-hover-light-danger.dropdown-toggle .svg-icon svg g [fill] { fill: var(--vh-c-danger-text); } .btn.btn-hover-light-danger:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-hover-light-danger:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-hover-light-danger.dropdown-toggle.dropdown-toggle:after { color: var(--vh-c-danger-text); } .btn.btn-hover-text-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-hover-text-primary:focus:not(.btn-text), .btn.btn-hover-text-primary.focus:not(.btn-text) { color: var(--vh-c-primary-text) !important; } .btn.btn-hover-text-primary:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-hover-text-primary:not(:disabled):not(.disabled).active, .show > .btn.btn-hover-text-primary.dropdown-toggle { color: var(--vh-c-primary-text) !important; } .modal .modal-header .close:hover { color: var(--vh-c-primary-text); } .modal .modal-header .close:hover i, .modal .modal-header .close:hover .ki { color: var(--vh-c-primary-text); } .accordion .card .card-header .card-title { color: var(--vh-c-primary-text); } .accordion .card .card-header .card-title > i { color: var(--vh-c-primary-text); } .checkbox > input:checked ~ span { background-color: var(--vh-c-primary); } .checkbox.checkbox-primary > input:checked ~ span { background-color: var(--vh-c-primary); } .radio > input:checked ~ span { background-color: var(--vh-c-primary); } .switch input:checked ~ span:after { background-color: var(--vh-c-primary); } .switch.switch-primary:not(.switch-outline) input:empty ~ span:before { background-color: var(--vh-c-primary); } .switch.switch-primary:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-primary); } .switch.switch-primary:not(.switch-outline) input:checked ~ span:after { color: var(--vh-c-primary-text); } .switch.switch-outline.switch-primary input:checked ~ span:before { border: 2px solid var(--vh-c-primary); } .switch.switch-outline.switch-primary input:checked ~ span:after { background-color: var(--vh-c-primary); } .switch.switch-success:not(.switch-outline) input:empty ~ span:before { background-color: var(--vh-c-success); } .switch.switch-success:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-success); } .switch.switch-success:not(.switch-outline) input:checked ~ span:after { color: var(--vh-c-success-text); } .switch.switch-outline.switch-success input:checked ~ span:before { border: 2px solid var(--vh-c-success); } .switch.switch-outline.switch-success input:checked ~ span:after { background-color: var(--vh-c-success); } .switch.switch-info:not(.switch-outline) input:empty ~ span:before { background-color: var(--vh-c-info); } .switch.switch-info:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-info); } .switch.switch-info:not(.switch-outline) input:checked ~ span:after { color: var(--vh-c-info-text); } .switch.switch-outline.switch-info input:checked ~ span:before { border: 2px solid var(--vh-c-info); } .switch.switch-outline.switch-info input:checked ~ span:after { background-color: var(--vh-c-info); } .switch.switch-warning:not(.switch-outline) input:empty ~ span:before { background-color: var(--vh-c-warning); } .switch.switch-warning:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-warning); } .switch.switch-warning:not(.switch-outline) input:checked ~ span:after { color: var(--vh-c-warning-text); } .switch.switch-outline.switch-warning input:checked ~ span:before { border: 2px solid var(--vh-c-warning); } .switch.switch-outline.switch-warning input:checked ~ span:after { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning); } .label.label-primary { background-color: var(--vh-c-primary); } .label.label-light-primary { color: var(--vh-c-primary-text); background-color: var(--vh-c-primary-tint); } .label.label-success { background-color: var(--vh-c-success); } .label.label-light-success { color: var(--vh-c-success-text); background-color: var(--vh-c-success-tint); } .label.label-info { background-color: var(--vh-c-info); } .label.label-light-info { color: var(--vh-c-info-text); background-color: var(--vh-c-info-tint); } .label.label-warning { color: var(--vh-c-warning-on); background-color: var(--vh-c-warning); } .label.label-light-warning { color: var(--vh-c-warning-text); background-color: var(--vh-c-warning-tint); } .label.label-danger { background-color: var(--vh-c-danger); } .label.label-light-danger { color: var(--vh-c-danger-text); background-color: var(--vh-c-danger-tint); } .symbol.symbol-primary .symbol-label { background-color: var(--vh-c-primary); } .symbol.symbol-light-primary .symbol-label { background-color: var(--vh-c-primary-tint); color: var(--vh-c-primary-text); } .symbol.symbol-success .symbol-label { background-color: var(--vh-c-success); } .symbol.symbol-light-success .symbol-label { background-color: var(--vh-c-success-tint); color: var(--vh-c-success-text); } .symbol.symbol-info .symbol-label { background-color: var(--vh-c-info); } .symbol.symbol-light-info .symbol-label { background-color: var(--vh-c-info-tint); color: var(--vh-c-info-text); } .symbol.symbol-warning .symbol-label { background-color: var(--vh-c-warning); color: var(--vh-c-warning-on); } .symbol.symbol-light-warning .symbol-label { background-color: var(--vh-c-warning-tint); color: var(--vh-c-warning-text); } .symbol.symbol-danger .symbol-label { background-color: var(--vh-c-danger); } .symbol.symbol-light-danger .symbol-label { background-color: var(--vh-c-danger-tint); color: var(--vh-c-danger-text); } .scrolltop { background-color: var(--vh-c-primary); } .spinner.spinner-primary:before { border: 2px solid var(--vh-c-primary); } .svg-icon.svg-icon-primary svg g [fill] { fill: var(--vh-c-primary-text) !important; } .navi .navi-item .navi-link:hover { color: var(--vh-c-primary-text); } .navi .navi-item .navi-link:hover .navi-text { color: var(--vh-c-primary-text); } .navi .navi-item .navi-link:hover .navi-icon i { color: var(--vh-c-primary-text); } .navi .navi-item .navi-link:hover .navi-icon svg g [fill] { fill: var(--vh-c-primary-text); } .navi .navi-item .navi-link.active { color: var(--vh-c-primary-text); } .navi .navi-item .navi-link.active .navi-text { color: var(--vh-c-primary-text); } .navi .navi-item .navi-link.active .navi-icon i { color: var(--vh-c-primary-text); } .navi .navi-item .navi-link.active .navi-icon svg g [fill] { fill: var(--vh-c-primary-text); } .bootstrap-select > .dropdown-toggle:focus { border-color: var(--vh-c-primary-soft) !important; } .bootstrap-select .dropdown-menu.inner > li.active:not(.selected) > a { background: var(--vh-c-primary); } .bootstrap-select.show > .dropdown-toggle.btn-light, .bootstrap-select.show > .dropdown-toggle.btn-secondary { border-color: var(--vh-c-primary-soft) !important; } .bootstrap-select.is-invalid .btn.dropdown-toggle { border-color: var(--vh-c-danger); } .dataTables_wrapper .dataTable th.sorting_asc, .dataTables_wrapper .dataTable td.sorting_asc { color: var(--vh-c-primary-text) !important; } .dataTables_wrapper .dataTable th.sorting_asc:before, .dataTables_wrapper .dataTable td.sorting_asc:before { color: var(--vh-c-primary-text) !important; } .dataTables_wrapper .dataTable th.sorting_desc, .dataTables_wrapper .dataTable td.sorting_desc { color: var(--vh-c-primary-text) !important; } .dataTables_wrapper .dataTable th.sorting_desc:after, .dataTables_wrapper .dataTable td.sorting_desc:after { color: var(--vh-c-primary-text) !important; } .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link:hover { background-color: var(--vh-c-primary); } .dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link { background-color: var(--vh-c-primary); } .dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link { background-color: var(--vh-c-primary); } .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before { color: var(--vh-c-primary-text); } .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before { color: var(--vh-c-primary-text); } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--vh-c-primary-soft); } .swal2-icon.swal2-warning { border-color: var(--vh-c-warning); color: var(--vh-c-warning-text); } .swal2-icon.swal2-error { border-color: var(--vh-c-danger); color: var(--vh-c-danger-text); } .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: color-mix(in srgb, var(--vh-c-danger) 75%, transparent); } .swal2-icon.swal2-success { border-color: var(--vh-c-success); color: var(--vh-c-success-text); } .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--vh-c-success); } .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--vh-c-success) 30%, transparent); } .swal2-icon.swal2-info { border-color: var(--vh-c-info); color: var(--vh-c-info-text); } .swal2-icon.swal2-question { border-color: var(--vh-c-primary); color: var(--vh-c-primary-text); } .toast.toast-success { background-color: var(--vh-c-success); } .toast.toast-info { background-color: var(--vh-c-info); } .toast.toast-warning { background-color: var(--vh-c-warning); color: var(--vh-c-warning-on); } .toast.toast-error { background-color: var(--vh-c-danger); } .example .example-toggle:hover, .example .example-copy:hover { color: var(--vh-c-primary-text); } .example .example-toggle.example-toggled { color: var(--vh-c-primary-text); } .example .example-copy.example-copied { color: var(--vh-c-primary-text); } .example .example-code .example-copy:hover { color: var(--vh-c-primary-text); } /* --- public/assets/css/themes/layout/header/base/light.css --- */ @media (min-width: 992px) { .header .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text, .header .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon, .header .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--vh-c-primary-text); } .header .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link svg g [fill], .header .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link svg g [fill] { fill: var(--vh-c-primary-text); } .header .header-menu .menu-nav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text, .header .header-menu .menu-nav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header .header-menu .menu-nav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon, .header .header-menu .menu-nav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon { color: var(--vh-c-primary-text); } .header .header-menu .menu-nav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link svg g [fill], .header .header-menu .menu-nav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link svg g [fill] { fill: var(--vh-c-primary-text); } } /* --- public/assets/css/themes/layout/header/menu/light.css --- */ @media (min-width: 992px) { .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text, .header-menu .menu-nav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link .menu-icon { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-here > .menu-link .menu-text { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon, .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon { color: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon.svg-icon svg g [fill], .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-c-primary-text); } .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item:hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text, .header-menu .menu-nav > .menu-item .menu-submenu > .menu-subnav > .menu-item.menu-item-hover:not(.menu-item-here):not(.menu-item-active) > .menu-link .menu-text { color: var(--vh-c-primary-text); } } /* --- public/assets/css/themes/layout/brand/dark.css --- */ @media (min-width: 992px) { .brand .btn.active .svg-icon svg g [fill], .brand .btn:hover .svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .brand .btn.active i, .brand .btn:hover i { color: var(--vh-aside-accent); } } @media (max-width: 991.98px) { .header-mobile .burger-icon:hover span { background-color: var(--vh-aside-accent); } .header-mobile .burger-icon:hover span::before, .header-mobile .burger-icon:hover span::after { background-color: var(--vh-aside-accent); } .header-mobile .btn.active .svg-icon svg g [fill], .header-mobile .btn:hover .svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .header-mobile .btn.active i, .header-mobile .btn:hover i { color: var(--vh-aside-accent); } } /* --- public/assets/css/themes/layout/aside/dark.css --- */ .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-here > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } @media (min-width: 992px) { .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item.menu-item-hover > .menu-link > .menu-icon, .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link > .menu-icon { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link > .menu-icon, .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link > .menu-icon { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item:hover > .menu-link > .menu-icon { color: var(--vh-aside-accent) !important; } } @media (min-width: 992px) { .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item.menu-item-open > .menu-link .menu-text { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item.menu-item-open > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item.menu-item-open > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item.menu-item-active > .menu-link .menu-text { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item.menu-item-active > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-text { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon { color: var(--vh-aside-accent); } .aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav .menu-item:not([data-menu-submenu-mode=accordion]).menu-item-hover > .menu-submenu .menu-subnav .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon.svg-icon svg g [fill] { fill: var(--vh-aside-accent); } } /* Tekst pomocniczy (okruszki, daty, podpowiedzi): Metronic #B5B5C3 miał 2,0:1 na białym — przyciemniony do 3,9:1 (hierarchia zachowana: nadal jaśniejszy niż text-dark-50). Ciemny motyw: --vh-muted w vh-dark.css. */ .text-muted { color: #7E8299 !important; }