/* * Console-spezifische Ergänzungen zu Dashkit (d3). * * Klickbare Karten: komplette Fläche ist Link, Erkennbarkeit über Cursor und * Hover-Border statt Lift-Effekt (siehe docs/design-conventions.md). */ .card-clickable { transition: border-color 0.15s ease-in-out; } .card-clickable:hover { border-color: #2c7be5; } .card-clickable > a { color: inherit; } /* * FontAwesome-Icons (fad/fas/far wie in der Admin-Area) in der Sidebar: * Dashkit definiert Größe und Abstand nur für seine Feather-Icons (.fe) - * dieselben Regeln hier gespiegelt, sonst kleben die Icons am Label. */ .navbar-nav .nav-link > .fad, .navbar-nav .nav-link > .fas, .navbar-nav .nav-link > .far { display: inline-block; min-width: 1.75rem; font-size: 1.0625rem; line-height: 1.40625rem; padding-bottom: 0.125em; /* Wie .admin-area .navbar-nav .nav-link > .fad in admin-area.css - ohne diesen Abstand steht das Label enger am Icon als in der Admin-Area. */ margin-right: 0.5rem; } /* * Aktiver Menüpunkt: dasselbe Blau und Gewicht wie in der Admin-Area * (.admin-area .navbar-nav .nav-link.active). Dashkit allein hebt den * aktiven Eintrag nur dezent hervor. */ .navbar-nav .nav-link.active, .navbar-nav .dropdown-item.active { color: #2c7be5; font-weight: 500; } /* * Menüpunkt-Padding ab 768px: exakt die Regel der Admin-Area * (.admin-area .navbar-vertical.navbar-expand-md .navbar-nav .nav-link in * admin-area.css) - Dashkit allein lässt nur 0.5rem Höhe. Unterhalb von * 768px gilt wie dort der Dashkit-Default, der in beiden Versionen gleich * ist. Die Literalwerte überschreiben bewusst auch die schmalere * --bs-navbar-vertical-padding-x der Icon-Leiste (navbar-vertical-sm), * genau wie die Admin-Area-Regel das im Alt-Dashkit tut. */ @media (min-width: 768px) { .navbar-vertical.navbar-expand-md .navbar-nav .nav-link { padding: 1rem 1.5rem; } } /* * Breadcrumbs: identisch zur Admin-Area (.admin-area .breadcrumb* in * schulungstool/css/admin-area.css) - Größe, Farben und Abstände gespiegelt. * * Der obere Abstand liegt bewusst als padding auf .main-content, nicht als * margin am ersten Kind: eine Margin dort kollabiert bis zum hinaus, * schiebt die ganze Seite nach unten und macht sie damit höher als den * Viewport - Seiten ohne Inhalt ließen sich dann um genau diesen Betrag * scrollen, wobei die Breadcrumbs am oberen Rand klebten. Die Admin-Area * hat das Problem nicht, weil dort eine Topbar den Abstand herstellt. */ .main-content { padding-top: 1.5rem; } .breadcrumb { font-size: 0.8rem; } .breadcrumb-item.active { color: #6e84a3; font-weight: 500; } /* Trenner-Farbe: die Admin-Area setzt dafür "background", weil der Trenner im Alt-Dashkit eine SVG-Maske ist. In Dashkit v2.3 ist er ein Feather-Glyph, der über "color" gefärbt wird - background ergäbe einen Kasten. */ .breadcrumb-item + .breadcrumb-item::before { color: #99b2d2; } nav.breadcrumbs { margin-bottom: 0.5rem; } @media (min-width: 768px) { nav.breadcrumbs { margin-bottom: -0.5rem; } } /* * Kein iOS-Zoom - die Console soll sich wie eine App anfühlen: Felder unter * 16px lösen auf Touch-Geräten beim Fokus einen Zoom aus, deshalb dort 1rem - * Desktop behält die Theme-Größe. touch-action manipulation entfernt zudem * den Doppeltipp-Zoom; Wischen und Pinch (Barrierefreiheit) bleiben möglich. */ @media (hover: none) and (pointer: coarse) { .form-control, .form-select { font-size: 1rem; } } html, a, button, label, input, select, textarea { touch-action: manipulation; } /* * Unterer Seitenabschluss wie in der Admin-Area: Dort zählt die margin-bottom * (1.5rem) der letzten Card zur Scrollhöhe - Inhalt endet nie bündig am * unteren Viewport-Rand. In Dashkit v2.3 kollabiert diese End-Margin durch * Container und main bis zum Dokumentende und verfällt (gemessen: Lücke 0 auf * Dashboard und Abrechnung). flow-root etabliert einen Block-Formatting- * Context, der die Margin im Container hält - exakt der Admin-Area-Abstand, * ohne zusätzliches Padding, das kurze Seiten scrollbar machen würde. */ main > .container-fluid { display: flow-root; } /* * 1-Klick-Login-Zwischenseite: sanfter Auftritt der Karte, ohne Bewegung bei * reduzierter Motion. */ @keyframes interstitial-auftritt { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } } .interstitial-auftritt { animation: interstitial-auftritt 0.35s ease-out both; } .interstitial-rahmen { max-width: 26rem; } @media (prefers-reduced-motion: reduce) { .interstitial-auftritt { animation: none; } } /* * Fieldset-Legenden als normale Formular-Labels: Bootstraps Reboot macht * 1.5rem groß und ließe sie größer wirken als den Modal-Titel. */ legend.form-label { float: none; width: auto; font-size: inherit; } /* * Dreipunktmenü-Trigger in Tabellen: Dashkits Inline-Link ist nur ~17x15px * groß - als Touch-Ziel deutlich zu klein. Padding vergrößert die Trefferfläche * Richtung 44px, die negative Margin hält das Layout der Tabellenzelle optisch * unverändert. */ .dropdown-ellipses { display: inline-block; padding: 0.75rem; margin: -0.75rem; } /* * Modal-Schließen-Kreuz: Dashkit v2.3 überschreibt das Bootstrap-5-Margin der * .btn-close mit dem alten Bootstrap-4-Wert (-1.5rem), lässt das halbierte * BS5-Padding aber stehen - das X klebt dadurch am rechten Rand und über der * Mitte des Headers. Hier gilt wieder der selbstkompensierende BS5-Default. */ .modal-header .btn-close { margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto; } /* * Tablet-Sidebar als Icon-Leiste - exakt das Muster der Admin-Area: * console.js setzt unter 1200px die Dashkit-Klasse navbar-vertical-sm (66px); * diese Regeln blenden dann Labels, Organisations-Block und User-Text aus. */ .console-brand-icon { display: none; } @media (min-width: 768px) { .navbar-vertical-sm .console-brand-full { display: none; } .navbar-vertical-sm .console-brand-icon { display: inline-block; } .navbar-vertical-sm .nav-item .nav-link > span { display: none; } .navbar-vertical-sm .nav-item .nav-link > .fad { margin-right: 0; min-width: auto; } .navbar-vertical-sm .console-org { display: none; } .navbar-vertical-sm .console-user-details { display: none; } .navbar-vertical-sm .navbar-user .dropdown-toggle { justify-content: center; } .navbar-vertical-sm .navbar-user .dropdown-toggle::after { display: none; } }