/* ========================================================================== MZ-WMS — Clean Modern Light theme A design-system layer that sits on top of Bootstrap 3 and restyles the whole app (typography, colour, spacing, buttons, forms, tables, nav, cards, alerts, datatables, login). Loaded LAST in so it wins the cascade. Purely presentational: no layout/grid display changes, so existing pages keep working. ========================================================================== */ /* ---- Design tokens ------------------------------------------------------- */ :root { --brand: #2563eb; /* primary blue */ --brand-600: #1d4ed8; --brand-700: #1e40af; --brand-50: #eff6ff; --brand-100: #dbeafe; --success: #16a34a; --success-600: #15803d; --danger: #dc2626; --danger-600: #b91c1c; --warning: #d97706; --info: #0891b2; --ink: #0f172a; /* near-black text */ --ink-soft: #475569; /* muted text */ --ink-faint: #94a3b8; /* placeholder/hint */ --line: #e2e8f0; /* borders */ --line-soft: #eef2f6; --bg: #f1f5f9; /* page background */ --surface: #ffffff; /* cards / panels */ --surface-2: #f8fafc; /* subtle fills */ --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); --shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05); --shadow-lg: 0 12px 32px rgba(15,23,42,.12); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---- Base ---------------------------------------------------------------- */ body, body.main { font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); transition: color .12s ease; } a:hover, a:focus { color: var(--brand-700); } h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 1.7rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.18rem; } hr { border-top: 1px solid var(--line); } .text-muted { color: var(--ink-soft) !important; } .text-danger { color: var(--danger) !important; } .text-success { color: var(--success) !important; } .text-info { color: var(--info) !important; } ::selection { background: var(--brand-100); } /* Keep the decorative login/brand font but tidy spacing */ .cifra { font-family: Lobster, cursive; letter-spacing: 1px; } /* ---- Page shell ---------------------------------------------------------- */ #content-wrap { padding-top: 18px; padding-bottom: 4.5rem; } .headerline, h3.headerline { margin: 4px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 1.35rem; } /* ---- Navbar -------------------------------------------------------------- */ .navbar, .navbar-default { background: var(--surface) !important; border: none; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 0; min-height: 56px; margin-bottom: 22px; } .navbar-default .navbar-brand, .navbar-brand { color: var(--brand) !important; font-weight: 700; font-size: 1.25rem; letter-spacing: .3px; line-height: 56px; height: 56px; padding: 0 16px; } .navbar-default .navbar-nav > li > a, .navbar-nav > li > a { color: var(--ink-soft) !important; font-weight: 550; line-height: 32px; padding: 12px 14px; border-radius: var(--radius-sm); transition: background .12s ease, color .12s ease; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--brand) !important; background: var(--brand-50) !important; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: var(--brand) !important; background: var(--brand-50) !important; } .navbar-nav > li > a .caret { color: var(--ink-faint); } .navbar-toggle { border: 1px solid var(--line); border-radius: var(--radius-sm); } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: var(--surface-2); } .navbar-default .navbar-toggle .icon-bar { background: var(--ink-soft); } /* ---- Dropdown menus ------------------------------------------------------ */ .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; margin-top: 6px; } .dropdown-menu > li > a { color: var(--ink-soft); padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 500; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--brand-50); color: var(--brand); } .dropdown-menu .divider { background: var(--line); margin: 6px 4px; } /* ---- Buttons ------------------------------------------------------------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; border: 1px solid transparent; padding: 8px 16px; transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, transform .04s ease; } .btn:active { transform: translateY(1px); } .btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-100); } .btn-lg { padding: 12px 22px; font-size: 1.05rem; border-radius: var(--radius); } .btn-sm, .btn-xs { padding: 5px 11px; } .btn-xs { padding: 3px 8px; font-size: 12px; } .btn-default { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); } .btn-default:hover, .btn-default:focus { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); } .btn-primary { background: var(--brand); color:#fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--brand-600); color:#fff; } .btn-success { background: var(--success); color:#fff; } .btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--success-600); color:#fff; } .btn-danger { background: var(--danger); color:#fff; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: var(--danger-600); color:#fff; } .btn-info { background: var(--info); color:#fff; } .btn-warning { background: var(--warning); color:#fff; } .btn-link { color: var(--brand); box-shadow:none; } /* ---- Forms --------------------------------------------------------------- */ label, .control-label { font-weight: 600; color: var(--ink); margin-bottom: 5px; } .form-control { height: auto; min-height: 40px; padding: 9px 12px; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; transition: border-color .12s ease, box-shadow .12s ease; } .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); } .form-control::placeholder { color: var(--ink-faint); } .input-lg { min-height: 50px; font-size: 1.1rem; border-radius: var(--radius); } .form-group { margin-bottom: 16px; } /* the original style.css tints empty inputs yellow — soften that */ input:placeholder-shown { background-color: var(--surface) !important; } select.form-control { cursor: pointer; } .input-group-addon { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); } /* ---- Cards / panels / generic containers --------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .panel-heading { background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; font-weight: 650; color: var(--ink); } .panel-default > .panel-heading { color: var(--ink); } .well { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* A reusable card class for redesigned pages */ .card-surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; } /* Constrain the small single-action screens (goods-in PO select, login, …) */ .contmin { max-width: 560px; margin: 24px auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px 30px; } /* ---- Tables -------------------------------------------------------------- */ .table { background: var(--surface); border-radius: var(--radius); overflow: hidden; } .table > thead > tr > th { background: var(--surface-2); color: var(--ink-soft); font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line) !important; border-top: none; padding: 11px 12px; vertical-align: middle; } .table > tbody > tr > td { border-top: 1px solid var(--line-soft); padding: 10px 12px; vertical-align: middle; color: var(--ink); } .table-hover > tbody > tr:hover { background: var(--brand-50); } .table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2); } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--line) !important; } /* keep the original white header override consistent with the new look */ .table > thead > th, .table > thead > tr { background-color: var(--surface-2); } /* wrap bare tables on redesigned pages */ .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; /* wide tables scroll instead of being clipped */ background: var(--surface); } /* don't trap sticky-header or DataTables tables in a scroll/overflow box (it clips them and breaks the stickyTableHeaders plugin) */ .table-wrap:has(table.stickyheader), .table-wrap:has(table.dataTable) { overflow: visible; } /* ---- Alerts -------------------------------------------------------------- */ .alert { border: 1px solid transparent; border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-sm); } .alert-success { background: #ecfdf5; border-color:#bbf7d0; color:#166534; } .alert-info { background: var(--brand-50); border-color:#bfdbfe; color: var(--brand-700); } .alert-warning { background: #fffbeb; border-color:#fde68a; color:#92400e; } .alert-danger { background: #fef2f2; border-color:#fecaca; color: var(--danger-600); font-size: 14px; } .alert-danger i { font-size: 18px; } /* ---- Badges / labels ----------------------------------------------------- */ .label, .badge { border-radius: 999px; font-weight: 600; padding: .3em .65em; } .badge { background: var(--ink-soft); } .label-default { background: var(--ink-faint); } .label-primary { background: var(--brand); } .label-success { background: var(--success); } .label-danger { background: var(--danger); } .label-warning { background: var(--warning); } .label-info { background: var(--info); } /* ---- DataTables ---------------------------------------------------------- */ .dataTables_wrapper { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; min-height: 36px; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); outline: none; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--radius-sm) !important; border: 1px solid var(--line) !important; padding: 5px 11px !important; margin: 0 2px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--brand-50) !important; border-color: var(--brand) !important; color: var(--brand) !important; } /* ---- Pagination (Bootstrap) --------------------------------------------- */ .pagination > li > a, .pagination > li > span { color: var(--brand); border-color: var(--line); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--brand); border-color: var(--brand); } /* ---- chosen.js select widgets ------------------------------------------- */ .chosen-container-single .chosen-single, .chosen-container .chosen-choices { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: none; height: auto; min-height: 40px; line-height: 26px; padding: 6px 12px; } .chosen-container-active .chosen-single, .chosen-container-active .chosen-choices { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); } .chosen-container .chosen-drop { border-color: var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); } .chosen-container .chosen-results li.highlighted { background: var(--brand); } /* ---- Scanner UI (handheld terminals) ------------------------------------ */ .scannerbutton { width: 100%; margin-bottom: 12px; padding: 16px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 110px; justify-content: center; } .scannerbutton:hover, .scannerbutton:focus { border-color: var(--brand); background: var(--brand-50); } .scannerbutton img { max-height: 48px; width: auto; margin: 0 auto; } .scannerbutton small { font-weight: 600; color: var(--ink); } /* scan key/value rows from sc.css, refreshed */ .sc-label { font-weight: 600; background: var(--surface-2); color: var(--ink-soft); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .sc-data { padding: 4px 2px 10px; font-size: 1.05rem; color: var(--ink); } .wavepos { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); box-shadow: var(--shadow-sm); } /* ---- Login --------------------------------------------------------------- */ .mz-login { max-width: 420px; margin-top: 7vh; text-align: left; } .mz-login-head { text-align: center; margin-bottom: 22px; } .mz-login-logo { font-size: 2.2rem; color: var(--brand); line-height: 1.1; } .mz-login-sub { margin-top: 4px; color: var(--ink-faint); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; } .btn-block { display:block; width:100%; } .mz-login-links { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ink-soft); } .mz-login-links a { font-weight: 600; } .mz-login-links .mz-dot { margin: 0 8px; color: var(--ink-faint); } /* Home button refinement */ a.btn .glyphicon-home { line-height: inherit; } /* ---- Footer -------------------------------------------------------------- */ #footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-faint); height: 3.5rem; padding-top: 14px; font-size: 13px; } #footer a { color: var(--ink-soft); } #footer a:hover { color: var(--brand); } /* ---- Misc keepers from the legacy stylesheet ---------------------------- */ .pointeres { cursor: pointer; } .error { color: var(--danger); } .kiemelt { font-weight: 700; } .inaktiv { opacity: .45; } .inverz { font-weight: 700; color:#fff; background: var(--ink); padding: 4px 8px; border-radius: var(--radius-sm); } /* gentle entrance for cards/alerts */ @keyframes mzfade { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} } .card-surface, .contmin, .alert, .dataTables_wrapper { animation: mzfade .18s ease both; } /* Scanner/handheld styling lives in a SEPARATE stylesheet (css/theme-scanner.css) loaded only for scanner users (userright 4). Keep this file desktop-only so the two never fight. */ /* belt-and-braces: never let the page scroll horizontally as a whole */ html, body { max-width: 100%; overflow-x: hidden; } /* wider centered wrapper for desktop pages that mix a form + a data table (e.g. taskline). Scanner overrides this to full width in theme-scanner.css. */ .contwide { max-width: 1000px; margin: 18px auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px 26px; } /* "assigned to" badge on a task (tasklist / packlist) */ .task-owner { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: 12px; font-weight: 600; white-space: nowrap; } .task-owner .glyphicon { font-size: 11px; } .task-owner-me { background: #ecfdf5; color: #166534; border-color: #bbf7d0; } /* ========================================================================== BOARD DESIGN SYSTEM — app-wide visual language (pills, chips, mono, cards) ========================================================================== */ .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;} .mono,.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;} /* status pills */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;line-height:1.25;} .pill .pd{width:7px;height:7px;border-radius:50%;background:currentColor;} .pill-pend{background:#fff7ed;color:#b45309;} .pill-pick{background:#eef4ff;color:#1d4ed8;} .pill-pack{background:#f5f1ff;color:#6d28d9;} .pill-done{background:#ecfdf3;color:#15803d;} .pill-info{background:var(--brand-50);color:var(--brand-700);} .pill-muted{background:#f1f4f8;color:var(--ink-soft);} .pill-danger{background:#fef2f2;color:var(--danger-600);} /* toggle chips (filters) */ .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;} .chip input{accent-color:var(--brand);} .chip.on,.chip.active{border-color:var(--brand);background:var(--brand-50);color:var(--brand);} .chip:has(input:checked){border-color:var(--brand);background:var(--brand-50);color:var(--brand);} /* task-reference chips (e.g. #88914) */ .tasklink{display:inline-block;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12.5px;padding:4px 9px;border-radius:7px;text-decoration:none;} .tasklink.t-done{background:#ecfdf3;color:#15803d;} .tasklink.t-prog{background:#fff7ed;color:#b45309;} .tasklink.t-todo{background:#f1f4f8;color:var(--ink-faint);} /* card-per-row boards (list pages) */ .board{display:flex;flex-direction:column;gap:8px;} .board-row{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--rail,var(--line));border-radius:12px;padding:14px 16px;transition:box-shadow .12s ease,transform .12s ease;} .board-row:hover{box-shadow:var(--shadow);transform:translateY(-1px);} .rail-pend{--rail:#d97706;}.rail-pick{--rail:#2563eb;}.rail-pack{--rail:#7c3aed;}.rail-done{--rail:#16a34a;}.rail-muted{--rail:var(--line);} /* ---- Dashboard ---- */ .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px;} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 18px;position:relative;overflow:hidden;} .stat .stat-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;} .stat .stat-val{font-size:30px;font-weight:700;line-height:1.1;margin-top:8px;letter-spacing:-.02em;font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;} .stat .stat-sub{font-size:12px;color:var(--ink-soft);margin-top:6px;} .stat .stat-ic{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand);} .stat.s-amber .stat-ic{background:#fff7ed;color:#b45309;} .stat.s-amber .stat-val{color:#b45309;} .stat.s-green .stat-ic{background:#ecfdf3;color:#15803d;} .stat.s-violet .stat-ic{background:#f5f1ff;color:#6d28d9;} .stat.s-blue .stat-ic{background:var(--brand-50);color:var(--brand);} .dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media (max-width:820px){.dash-cols{grid-template-columns:1fr;}} .dash-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;} .dash-panel h4{margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:650;display:flex;align-items:center;gap:8px;} .dash-list{list-style:none;margin:0;padding:6px 0;} .dash-list li{display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line-soft);font-size:13px;} .dash-list li:last-child{border-bottom:0;} .dash-list .di-main{flex:1;min-width:0;} .dash-list .di-main b{font-weight:600;} .dash-list .di-sub{color:var(--ink-faint);font-size:12px;} /* ---- Navbar polish (board look) ---- */ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{background:var(--brand);color:#fff !important;} .navbar-default .navbar-nav > .active > a .caret{color:#fff;} .navbar-brand{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;letter-spacing:-.5px;} /* print: drop shadows/backgrounds */ @media print { body, body.main { background:#fff; } .card-surface, .contmin, .panel, .table-wrap, .dataTables_wrapper { box-shadow:none; border-color:#ccc; } }