/** * main.css - Global Overrides für Tabler.io * Diese Datei überschreibt ausschließlich die Standard-CSS-Variablen von Tabler/Bootstrap. * Muss nach der tabler.min.css eingebunden werden. */ /* ========================================================================== 1. Globale Variablen & Theme-Anpassungen (Light Mode) ========================================================================== */ :root { /* Typografie */ --tblr-font-sans-serif: 'Verdana', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; --tblr-font-size-base: 0.875rem; --tblr-line-height-base: 1.4285714; /* Primärfarbe (Standard: Tabler-Blau) */ --tblr-primary: #990000; --tblr-primary-rgb: 153, 0, 0; /* RGB-Pendant für Alpha-Transparenzen */ --tblr-primary-fg: #ffffff; /* Textfarbe auf Primärhintergrund */ /* Sekundärfarbe */ --tblr-secondary: #4b5565; --tblr-secondary-rgb: 75, 85, 101; /* Status-Farben */ --tblr-success: #2fb344; --tblr-info: #4299e1; --tblr-warning: #f59f00; --tblr-danger: #d63939; /* Globale Eckenabrundung */ --tblr-border-radius: 4px; --tblr-border-radius-sm: 2px; --tblr-border-radius-lg: 8px; /* Globale Rahmen- und Linienfarbe */ --tblr-border-color: #e6e7e9; } /* ========================================================================== 2. Dark Mode Overrides (Aktiviert über data-bs-theme="dark" im ) ========================================================================== */ [data-bs-theme="dark"] { /* Primärfarbe im Dark Mode */ --tblr-primary: #990000; --tblr-primary-rgb: 153, 0, 0; /* Hintergrundfarben */ --tblr-body-bg: #1a2234; --tblr-card-bg: #1d273b; /* Link-Farben */ --tblr-link-color: color-mix(in srgb, var(--tblr-primary), #ffffff 80%); --tblr-link-hover-color: color-mix(in srgb, var(--tblr-primary), #ffffff 65%); /* --tblr-link-color: #F2CECE; */ /* --tblr-link-hover-color: #F2CECE; */ /* Text- und Rahmenfarben im Dark Mode */ --tblr-body-color: #f4f6fa; --tblr-border-color: #2a364f; --tblr-secondary: #d0def5; /* Navbar-Background */ --tblr-bg-surface: #990000; } /* .card redeclares --tblr-card-bg from --tblr-bg-surface itself (see tabler.min.css), so setting --tblr-card-bg above is shadowed on .card elements and they pick up the navbar's --tblr-bg-surface color instead. Re-set it directly on .card to win. */ [data-bs-theme="dark"] .card { --tblr-card-bg: #1d273b; } /* .progress redeclares --tblr-progress-height on itself (see tabler.min.css: .progress,.progress-stacked{--tblr-progress-height:0.5rem;...}), which shadows the :root override above the same way as the .card/.navbar fixes here - a value set directly on an element always wins over one merely inherited from :root, regardless of specificity. Re-set it directly. */ .progress, .progress-stacked { --tblr-progress-height: 1rem; } /* ========================================================================== 3. GENERAL SETTINGS ========================================================================== */ h1 { margin-top: 1.3rem; margin-bottom: 1.3rem; } h2 { margin-top: 1.2rem; margin-bottom: 1.2rem; } .card-footer { padding: 0.5rem; } .table-relaxed th, .table-relaxed td { padding-right: 2rem !important; } /* Tabler applies margin-left: calc(100vw - 100%) to :root at >=992px to compensate for the scrollbar width (a Bootstrap layout-shift trick meant for scenarios that toggle the scrollbar, e.g. open modals). We don't use that, and it just leaves a permanent blank gutter on the left edge. */ @media (min-width: 992px) { :root { margin-left: 0; } } /* ========================================================================== 4. NAVBAR / HEADER OVERRIDES ========================================================================== */ /* Tabler's .navbar rule redeclares --tblr-navbar-border-color on itself (as var(--tblr-border-color)), which shadows the :root override above on every .navbar element (incl. the admin panel's vertical sidebar, which also carries the .navbar class) - same shadowing issue as the .card / --tblr-card-bg fix in section 2. Re-set it directly here. */ .navbar { --tblr-navbar-border-color: var(--tblr-secondary); } .navbar-brand { display: inline-block; } /* On mobile, the burger menu's nav-links get an extra left padding (on top of the container's own page-padding) that the page title doesn't have, so it sits further right. Match it here. */ @media (max-width: 767.98px) { .page-header .page-title { padding-left: var(--tblr-page-padding); } } .navbar-brand-image { height: 3rem; } .nav-link { font-size: 1.1rem; color: var(--tblr-white); text-transform: uppercase; font-weight: 500; } /* Wraps the toggler + brand so the brand can be centered above them without using the (height-growing-on-open) collapse as its positioning context - see navigation.blade.php. On desktop "display: contents" keeps it invisible to the flex layout, so the toggler/brand behave exactly as if placed directly in .container-xl. */ .navbar-brand-bar { display: contents; } /* Below the navbar-expand-md breakpoint: center the brand above the toggler/collapse instead of left-aligning it. The brand stays in normal flow (centered via justify-content) so it always defines navbar-brand-bar's height; the toggler is the one taken out of flow instead, pinned to the left edge. This way the brand can never drift when the burger menu opens and the collapse grows taller. */ @media (max-width: 767.98px) { .navbar-brand-bar { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .navbar-brand-bar .navbar-toggler { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } } /* Same trick for the admin panel's vertical navbar, which collapses at the navbar-expand-lg breakpoint (991.98px) instead of navbar-expand-md's - a dedicated class keeps the two breakpoints from fighting over the same selector (see adminpanel.blade.php). Without this, the toggler had no positioned ancestor of its own on mobile, so it drifted down as #adminpanel-menu expanded below it instead of staying put. */ .adminpanel-brand-bar { display: contents; } @media (max-width: 991.98px) { .adminpanel-brand-bar { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .adminpanel-brand-bar .navbar-toggler { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } } /* Base link color for tabs */ .nav-tabs .nav-link { color: var(--tblr-link-color); /* Replace with your desired color */ font-size: 1rem; } /* Hover state */ .nav-tabs .nav-link:hover { color: var(--tblr-link-hover-color) } /* Active tab color */ .nav-tabs .nav-link.active { color: var(--tblr-body-color); /* Color for the currently selected tab */ } /* ====================================================== FORM CONTROLS: keep font size independent of breakpoint Tabler enlarges .form-control/.form-select below 576px to 1rem (iOS zoom guard) - we don't want that here. ====================================================== */ @media (max-width: 575.98px) { .form-control, .form-select { font-size: var(--tblr-font-size-base); } } /* ====================================================== TIPP INPUT FIELDS (match result entry) Fixed min-width and reduced padding so the digits don't disappear on narrow screens due to table compression or too much inner padding. ====================================================== */ .tipp-input { width: 3rem; min-width: 3rem; flex: 0 0 3rem; padding-left: .25rem; padding-right: .25rem; text-align: center; -moz-appearance: textfield; appearance: textfield; } .tipp-input::-webkit-outer-spin-button, .tipp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tipp-select { min-width: 10rem; } /* Game score between the two jerseys on game/show.blade.php. Fixed width so the jerseys don't shift depending on whether the score has digits yet (future games only show a bare ":"). */ .result { display: inline-block; min-width: 4rem; font-size: 2.5rem; font-weight: 700; } /* Below md, the score wraps onto its own line under the team names (see game/show.blade.php) - the h2's own margin-bottom (1.2rem, set globally above) is the main contributor to the gap there, so shrink it in that spot specifically instead of just the row gutter. */ @media (max-width: 767.98px) { .game-teams-row h2 { margin-bottom: 0.25rem; } } /* ====================================================== SIMPLE JERSEY (SENSIBLE SOCCER STYLE) ====================================================== */ .jersey { position: relative; width: 150px; height: 75px; display: inline-block; /* Default Colors */ --c1: #ffffff; --c2: #e5e5e5; /* The drop-shadow lives on the parent so clip-path doesn't cut it off */ filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); } /* The actual jersey shape lives inside ::before */ .jersey::before { content: ''; position: absolute; inset: 0; background-color: var(--c1); /* Flat silhouette with round-neck cutout */ clip-path: polygon( 25% 0%, 42% 0%, 45% 6%, 50% 8%, 55% 6%, 58% 0%, 75% 0%, 100% 28%, 80% 55%, 68% 42%, 68% 100%, 32% 100%, 32% 42%, 20% 55%, 0% 28% ); } /* On very small screens, two full-size jerseys side by side don't fit the viewport - shrink them (keeping the 2:1 ratio). */ @media (max-width: 575.98px) { .jersey { width: 100px; height: 50px; } } /* CONTRASTING SLEEVES MODIFIER */ .jersey.sleeves::before { background: linear-gradient( to right, var(--c2) 0%, var(--c2) 32%, var(--c1) 32%, var(--c1) 68%, var(--c2) 68%, var(--c2) 100% ); } /* ====================================================== POKAL SCORE DISPLAY ====================================================== */ .cup-sep { color: var(--tblr-secondary-color, #6c757d); padding: 0 0.25em; } /* ====================================================== ADMIN PANEL (vertical sidebar) BACKGROUND The aside forces data-bs-theme="dark" on itself, which would otherwise resolve --tblr-secondary to its dark-mode redefinition (see section 2 above) instead of the #4b5565 base value - so the color is hardcoded here rather than referencing the variable. ====================================================== */ aside.navbar-vertical { background-color: #4b5565; } /* ====================================================== DROPDOWN-MENU HOVER STATE (navigation.blade.php) .dropdown-menu bundles its own --tblr-dropdown-link-hover-color/-bg directly on itself in tabler.min.css (the same "component owns its tokens" pattern as .navbar/.card/.progress elsewhere in this file), so a [data-bs-theme="dark"]-level override would only be inherited and never reach it - a closer element's own declaration always wins over an inherited one. This .dropdown-menu also has no .dropdown-menu-dark class, so its background is the plain --tblr-bg-surface (dark red here), not Tabler's #1f2937 dark-class default - hover needs a background clearly different from that dark red, so use the same light primary tint as --tblr-link-hover-color, with dark (--tblr-primary) text for contrast against it. :not([data-bs-theme="light"]) excludes the user-profile menu (the only dropdown-menu that opts back into the light theme on itself) - it already looks fine under Tabler's own light dropdown defaults. ====================================================== */ .dropdown-menu:not([data-bs-theme="light"]) { --tblr-dropdown-link-hover-color: var(--tblr-primary); --tblr-dropdown-link-hover-bg: var(--tblr-link-hover-color); } /* ====================================================== DROPDOWN-ITEM CURRENT-PAGE / PRESSED STATE (navigation.blade.php) Both the persistent current-page .active class and the momentary :active (mouse-press) pseudo-class are actually painted by a much higher-specificity Tabler selector chained through .navbar-expand-* .navbar-collapse .dropdown-menu ... (and the .navbar-vertical equivalent for the admin sidebar), which reads --tblr-navbar-active-bg (owned by the .navbar ancestor) for the background and var(--tblr-primary) for .active's text - the combo renders as dark-red-on-dark-red against this dark-red dropdown-menu, unreadable. Overriding the variables didn't reach it (same shadowing as above), so match its selector directly instead - both states get the exact same colors as :hover above, so a real click (which always overlaps with :hover) looks identical to hovering, no separate flash. */ .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item.active, .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item:active, .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active, .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:active { background-color: var(--tblr-link-hover-color); color: var(--tblr-primary); } /* ====================================================== ADMIN PANEL (vertical sidebar) DROPDOWN-ITEM INDENT Tabler adds 1.75rem on top of the category's own padding-left to line dropdown-items up under a category icon - we don't use icons here, so that extra indent just needs removing to make the item text start at the same x as its category label. Selector matches Tabler's own so the specificity ties and this file's later load order wins (see tabler.min.css). ====================================================== */ .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item { padding-left: var(--tblr-page-padding); } /* ====================================================== ADMIN PANEL (vertical sidebar) VISIBILITY TOGGLE Tabler applies `margin-left: 15rem` to the elements that follow a .navbar-vertical via a sibling selector (see tabler.min.css), so hiding the aside alone would leave that gap behind - both need to be reset together when the user hides the panel (see navigation.blade.php / layouts/site.blade.php). ====================================================== */ html[data-adminpanel="hidden"] aside.navbar-vertical { display: none; } html[data-adminpanel="hidden"] .navbar-expand-lg.navbar-vertical ~ .navbar, html[data-adminpanel="hidden"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: 0; }