/* ======================================================================= Darstellung – Farben und Schriftgrößen 1:1 aus Services/ThemeService.cs des Windows-Programms. Umschaltung über die Attribute am -Element: data-color-mode="hell|dunkel", data-font-size="klein|normal|gross". ======================================================================= */ :root, html[data-color-mode="hell"] { --lager-bg: #F3F5F7; --lager-sidebar: #1B2A41; --lager-sidebar-hover: #243B55; --lager-accent: #C1121F; --lager-accent-dark: #8B0E17; --lager-card: #FFFFFF; --lager-text: #1A1A1A; --lager-muted: #5C6B7A; --lager-border: #D7DEE5; --lager-warn: #E09F3E; --lager-danger: #C1121F; --lager-ok: #2A9D8F; --lager-search-panel: #EEF3F7; --lager-savebar: #1B2A41; --lager-savebar-text: #FFFFFF; --lager-grid-header: #E8EEF2; --lager-alt-row: #F8FAFB; --lager-secondary-hover: #EEF2F5; --lager-inventur-open-bg: #FFF5F5; --lager-inventur-open-border: #C1121F; --lager-inventur-counted-bg: #F1FAF4; --lager-inventur-counted-border: #40916C; --lager-inventur-locked-bg: #FFF8E7; --lager-inventur-locked-border: #E09F3E; --lager-inventur-input-bg: #FFFFFF; --lager-inventur-input-border: #8A9AAB; --lager-shadow: rgba(0, 0, 0, .12); --lager-overlay: rgba(0, 0, 0, .55); } html[data-color-mode="dunkel"] { --lager-bg: #12151A; --lager-sidebar: #0E1621; --lager-sidebar-hover: #1A2736; --lager-accent: #C1121F; --lager-accent-dark: #8B0E17; --lager-card: #1C222B; --lager-text: #E8EEF2; --lager-muted: #9AA8B5; --lager-border: #2E3A47; --lager-warn: #E09F3E; --lager-danger: #C1121F; --lager-ok: #2A9D8F; --lager-search-panel: #161B22; --lager-savebar: #E09F3E; --lager-savebar-text: #1A1A1A; --lager-grid-header: #243040; --lager-alt-row: #171C24; --lager-secondary-hover: #243040; --lager-inventur-open-bg: #2A1719; --lager-inventur-open-border: #E0454F; --lager-inventur-counted-bg: #15251C; --lager-inventur-counted-border: #52B788; --lager-inventur-locked-bg: #2A2315; --lager-inventur-locked-border: #F0B429; --lager-inventur-input-bg: #0B0F14; --lager-inventur-input-border: #7A8B9C; --lager-shadow: rgba(0, 0, 0, .55); --lager-overlay: rgba(0, 0, 0, .65); } /* Schriftgröße wie im Windows-Programm: Klein 12 px, Normal 14 px, Groß 16 px. Bootstrap rechnet in rem, dadurch skalieren Abstände und Bedienelemente mit. */ html { font-size: 14px; } html[data-font-size="klein"] { font-size: 12px; } html[data-font-size="normal"] { font-size: 14px; } html[data-font-size="gross"] { font-size: 16px; } html, body { font-family: 'Segoe UI Variable', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--lager-bg); color: var(--lager-text); } a, .btn-link { color: var(--lager-accent); } a:hover, .btn-link:hover { color: var(--lager-accent-dark); } h1, h2, h3, h4, h5, h6 { color: var(--lager-text); } .text-muted { color: var(--lager-muted) !important; } hr { border-color: var(--lager-border); opacity: 1; } ::placeholder { color: var(--lager-muted) !important; opacity: 1; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* ---- Bootstrap-Grundelemente an das Farbschema anpassen ---------------- */ .card { background-color: var(--lager-card); border: 1px solid var(--lager-border); border-radius: .625rem; color: var(--lager-text); } .card-header, .card-footer { background-color: var(--lager-grid-header); border-color: var(--lager-border); color: var(--lager-text); } .list-group-item { background-color: var(--lager-card); border-color: var(--lager-border); color: var(--lager-text); } .table { --bs-table-bg: transparent; color: var(--lager-text); border-color: var(--lager-border); } .table > :not(caption) > * > * { background-color: transparent; color: var(--lager-text); border-bottom-color: var(--lager-border); box-shadow: none; } .table > thead > tr > th { background-color: var(--lager-grid-header); color: var(--lager-text); border-bottom: 1px solid var(--lager-border); font-weight: 600; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--lager-alt-row); } .table-hover > tbody > tr:hover > * { background-color: var(--lager-secondary-hover); } .table-active > * { background-color: var(--lager-secondary-hover) !important; } .form-control, .form-select, .input-group-text, textarea.form-control { background-color: var(--lager-card); border-color: var(--lager-border); color: var(--lager-text); } .form-control:focus, .form-select:focus { background-color: var(--lager-card); color: var(--lager-text); border-color: var(--lager-accent); box-shadow: 0 0 0 .2rem rgba(193, 18, 31, .2); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--lager-alt-row); color: var(--lager-muted); } html[data-color-mode="dunkel"] .form-select { /* Pfeil des Auswahlfeldes hell zeichnen, sonst ist er auf dunklem Grund unsichtbar */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E8EEF2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-check-input { background-color: var(--lager-card); border-color: var(--lager-inventur-input-border); } .form-check-input:checked { background-color: var(--lager-accent); border-color: var(--lager-accent); } .form-label { color: var(--lager-text); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(193, 18, 31, .25); } /* Rot wie im Windows-Programm (AccentBrush) */ .btn-primary, .btn-danger { color: #fff; background-color: var(--lager-accent); border-color: var(--lager-accent); font-weight: 600; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-danger:hover, .btn-danger:focus, .btn-danger:active { color: #fff; background-color: var(--lager-accent-dark); border-color: var(--lager-accent-dark); } .btn-outline-secondary, .btn-secondary { background-color: var(--lager-card); border-color: var(--lager-border); color: var(--lager-text); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-secondary:hover, .btn-secondary:focus { background-color: var(--lager-secondary-hover); border-color: var(--lager-border); color: var(--lager-text); } .btn-outline-primary { border-color: var(--lager-accent); color: var(--lager-accent); background-color: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--lager-accent); border-color: var(--lager-accent); color: #fff; } .btn-outline-danger { border-color: var(--lager-danger); color: var(--lager-danger); background-color: transparent; } .btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--lager-danger); color: #fff; } .btn-outline-success { border-color: var(--lager-ok); color: var(--lager-ok); } .btn-outline-success:hover, .btn-outline-success:focus, .btn-success { background-color: var(--lager-ok); border-color: var(--lager-ok); color: #fff; } .btn-check:checked + .btn-outline-secondary { background-color: var(--lager-accent); border-color: var(--lager-accent); color: #fff; } .alert-danger { background-color: var(--lager-inventur-open-bg); border-color: var(--lager-inventur-open-border); color: var(--lager-text); } .alert-success { background-color: var(--lager-inventur-counted-bg); border-color: var(--lager-inventur-counted-border); color: var(--lager-text); } .alert-warning { background-color: var(--lager-inventur-locked-bg); border-color: var(--lager-inventur-locked-border); color: var(--lager-text); } .alert-info, .alert-secondary { background-color: var(--lager-search-panel); border-color: var(--lager-border); color: var(--lager-text); } .dropdown-menu { background-color: var(--lager-card); border-color: var(--lager-border); color: var(--lager-text); } .dropdown-item { color: var(--lager-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--lager-secondary-hover); color: var(--lager-text); } .badge.bg-secondary { background-color: var(--lager-muted) !important; } html[data-color-mode="dunkel"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--lager-ok); } .invalid { outline: 1px solid var(--lager-danger); } .validation-message { color: var(--lager-danger); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: var(--lager-inventur-input-border); } /* ---- Lagerverwaltung -------------------------------------------------- */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .page-head h1 { margin: 0; font-size: 1.75rem; } .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .search-card { margin-bottom: 1rem; } .search-card .card-body { background-color: var(--lager-search-panel); border-radius: .625rem; } /* Breite Tabellen scrollen waagerecht in ihrem Rahmen, damit die Seite auch auf kleinen Notebook-Bildschirmen schmal bleibt. */ .table-wrap { overflow-x: auto; max-width: 100%; background: var(--lager-card); border: 1px solid var(--lager-border); border-radius: .5rem; } /* Spalten richten sich nach dem Inhalt (auto), Zellen brechen nicht um. Die Mindestbreiten pro Spalte setzt lager.js an den Kopfzellen. */ .lager-table { margin-bottom: 0; table-layout: auto; white-space: nowrap; } .lager-table tbody tr { cursor: pointer; } .nav-separator { border-color: rgba(255,255,255,.25); margin: .75rem 1rem; } /* Dialoge */ .modal-backdrop-custom { position: fixed; inset: 0; background: var(--lager-overlay); z-index: 2000; } .modal-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--lager-card); color: var(--lager-text); border: 1px solid var(--lager-border); border-radius: .75rem; padding: 1.5rem; z-index: 2010; box-shadow: 0 1.5rem 3rem var(--lager-shadow); } .modal-layer { z-index: 3000; } .modal-backdrop-custom.modal-layer { z-index: 2990; } .modal-card h2 { font-size: 1.25rem; margin-bottom: 1rem; } /* Anmeldung */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--lager-bg); } .login-card { width: min(420px, 100%); background: var(--lager-card); border: 1px solid var(--lager-border); border-radius: .75rem; padding: 2rem; box-shadow: 0 1rem 2rem var(--lager-shadow); } .login-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; } .login-brand-mark { background: var(--lager-accent); color: #fff; font-weight: 700; padding: .4rem .6rem; border-radius: .4rem; } .login-title { font-size: 1.2rem; font-weight: 600; } .login-sub { font-size: .8rem; color: var(--lager-muted); } .login-hint { font-size: .8rem; color: var(--lager-muted); margin-top: 1.25rem; margin-bottom: 0; } .modal-card-wide { width: min(900px, calc(100vw - 2rem)); } .modal-card-xwide { width: min(1400px, calc(100vw - 2rem)); } .search-results { border: 1px solid var(--lager-border); border-top: none; border-radius: 0 0 .375rem .375rem; max-height: 16rem; overflow-y: auto; } .search-result { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: left; background: var(--lager-card); color: var(--lager-text); border: none; border-bottom: 1px solid var(--lager-border); padding: .5rem .75rem; } .search-result:hover { background: var(--lager-secondary-hover); } .status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; } .inventory-card { border: 1px solid var(--lager-border); border-radius: .5rem; padding: .6rem .8rem; margin-bottom: .5rem; cursor: pointer; background: var(--lager-card); } .inventory-card:hover { background: var(--lager-secondary-hover); } .inventory-card-active { border-color: var(--lager-accent); box-shadow: 0 0 0 .15rem rgba(193,18,31,.15); } .row-open td { background: var(--lager-inventur-open-bg) !important; } .row-counted td { background: var(--lager-inventur-counted-bg) !important; } .row-locked td { background: var(--lager-inventur-locked-bg) !important; } .qr-wrap { display: flex; justify-content: center; background: #fff; padding: .75rem; border-radius: .5rem; border: 1px solid var(--lager-border); } .qr-wrap img { display: block; } .qr-card { width: min(420px, calc(100vw - 2rem)); } .sign-pad { display: block; width: 100%; height: 180px; background: #fff; border: 1px solid var(--lager-border); border-radius: .5rem; touch-action: none; cursor: crosshair; }