/* ===================================================================== Swiss-Tools ERP – Themeable UI (Light default with soft cyan accent) --------------------------------------------------------------------- • Uses CSS variables for all colors/metrics • Supports themes via [data-theme="..."] on or • Light theme is default, Dark is optional • Cutlist table styles included ===================================================================== */ /* --------------------------- Tokens & Resets --------------------------- */ :root { /* Palette (Light default) */ --bg: #ffffff; /* page background */ --surface: #ffffff; /* cards/panels */ --panel: #ffffff; /* bars/toolbars */ --muted: #f5f7fa; /* subtle backgrounds */ --text: #111827; /* main text */ --text-dim: #6b7280; /* secondary text */ --accent: #7dd3fc; /* soft cyan */ --accent-2: #a5f3fc; /* lighter cyan */ --accent-ink: #064e56; /* ink on cyan */ --line: #e5e7eb; /* hairlines */ --shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.06); /* Metrics */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 16px; --gap-xl: 24px; --font: 12px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } /* Optional Dark Theme */ :root[data-theme="dark"] { --bg: #0b1220; --surface: #0e1423; --panel: #0e1423; --muted: #111827; --text: #e5e7eb; --text-dim: #9ca3af; --accent: #7dd3fc; --accent-2: #38bdf8; --accent-ink: #083944; --line: #1f2937; --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.35); } /* Respect system preference unless app overrides data-theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0b1220; --surface: #0e1423; --panel: #0e1423; --muted: #111827; --text: #e5e7eb; --text-dim: #9ca3af; --accent: #7dd3fc; --accent-2: #38bdf8; --accent-ink: #083944; --line: #1f2937; --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.35); } } /* Reset & Base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--font); } img { max-width: 100%; display: block; } button { font: inherit; } /* ---------------------------- Layout Chrome --------------------------- */ .brandbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; } .logo { width: 28px; height: 28px; } .brand-title { font-weight: 700; letter-spacing: .5px; } .modulebar { display: flex; gap: var(--gap-sm); padding: 8px 12px; background: var(--muted); border-bottom: 1px solid var(--line); } .modbtn { border: 1px solid var(--line); background: #ffffff; color: var(--text); padding: 5px 5px; border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .modbtn.active, .modbtn:hover { border-color: var(--accent); color: var(--accent); background: #fff; } .toolrow { padding: 8px 12px; background: #ffffff; border-bottom: 1px solid var(--line); min-height: 44px; } .appgrid { display: grid; grid-template-columns: 240px 1fr; gap: 0; height: calc(100vh - 140px); } .sidebar { border-right: 1px solid var(--line); padding: 12px; background: #ffffff; overflow: auto; } .workspace { padding: 16px; overflow: auto; } .sidetitle { font-size: 12px; text-transform: uppercase; color: var(--text-dim); margin: 8px 0; } .sidelist { list-style: none; margin: 0; padding: 0; } .sidelist li { padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; } .sidelist li:hover { background: #f3f4f6; } .sidelist li.active { background: #e6f9fe; color: #036672; } .statusline { color: var(--text-dim); margin: 8px 0 12px; } /* ------------------------------ Buttons ------------------------------- */ .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius-md); padding: 8px 12px; cursor: pointer; font-weight: 600; box-shadow: var(--shadow); } .btn:hover { filter: brightness(.98); } .btn:active { filter: brightness(.96); } .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; } .btn + .btn { margin-left: var(--gap-sm); } .view-actions { margin: 8px 0 12px; } /* -------------------------------- Typo -------------------------------- */ h2 { margin: 0 0 12px; font-size: 18px; } /* ---------------------------- Generic Tables -------------------------- */ .table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .table.scroll { max-height: 60vh; overflow: auto; } .table .row { display: grid; grid-template-columns: 160px 1fr 160px 160px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .table .row.header { position: sticky; top: 0; background: #f7f9fb; font-weight: 600; } /* --------------------------- Cutlist Data Table ----------------------- */ #cutlist-table { display: block; min-height: 120px; } .cutlist-grid { border-collapse: collapse; width: 100%; table-layout: fixed; background: var(--surface); } .cutlist-grid th { position: sticky; top: 0; z-index: 1; background: #f7f9fb; border-bottom: 1px solid var(--line); font-size: 12px; text-align: left; font-weight: 600; padding: 8px 10px; } .cutlist-grid td { border-bottom: 1px solid #f0f2f5; padding: 8px 5px; white-space: nowrap; overflow: hidden;font-size: 10px; text-overflow: ellipsis; } .cutlist-grid tbody tr:hover { background: #fafcff; } /* Column widths from settings are applied inline via JS (th.style.width = 'px') */ /* ------------------------------ Utilities ----------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--gap-lg); box-shadow: var(--shadow); } .muted { color: var(--text-dim); } .hr { height: 1px; background: var(--line); margin: var(--gap-lg) 0; } /* --------------------------- Print adjustments ------------------------ */ @media print { .modulebar, .toolrow, .sidebar { display: none !important; } .appgrid { grid-template-columns: 1fr; height: auto; } } .icon { width: 22px; height: 22px; stroke: currentColor; fill: none; transition: stroke 0.15s ease, transform 0.15s ease; } /* Standard: neutral */ .modbtn svg, .modbtn img { color: #555; } /* Hover: zartes Cyan */ .modbtn:hover svg, .modbtn:hover img { color: var(--accent-primary, #00bcd4); transform: translateY(-1px); } /* Aktiv: deutlich erkennbar */ .modbtn.active svg, .modbtn.active img { color: var(--accent-strong, #0097a7); transform: translateY(-2px); } /* Einheitliche Sidebar-Buttons */ .sidebtn { width: 100%; display: block; text-align: left; background: #f8f8f8; border: 1px solid #ddd; border-radius: 3px; padding: .3rem .5rem; margin-bottom: .35rem; font-size: 12px; color: #222; cursor: pointer; transition: background .15s, border-color .15s; } /* Hover: leichte Betonung */ .sidebtn:hover { background: #eef7f9; border-color: #9bd3db; } /* Active: klar erkennbarer Zustand */ .sidebtn.active { background: #d9f1f4; border-color: #66b7c3; font-weight: 600; } /* Gruppentitel schlichter */ .sidetitle { font-size: 13px; font-weight: 600; color: #555; margin: .6rem 0 .3rem; text-transform: uppercase; letter-spacing: .5px; } /* Clean spacing */ .sidegroup { margin-bottom: 1.2rem; } /* ---- Brandbar logo sizing (override) ---- */ .brandbar .brand { display:flex; align-items:center; gap:12px; } .brandbar .logo { height: 40px; /* hier die finale Größe steuern */ width: auto; display: block; } .brand-title { font-size: 22px; line-height: 1; } #col-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; font-size: 11px; line-height: 1.2; max-height: 55vh; overflow-y: auto; } /* ===================== Cutlist Configurator ===================== */ /* Preview bar */ .col-preview { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border, #e5e7eb); overflow-x: auto; white-space: nowrap; min-height: 40px; } .col-preview::-webkit-scrollbar { height: 6px; } .col-token { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 8px; font-size: 11px; line-height: 1.2; border-radius: 7px; border: 1px solid var(--border, #e5e7eb); background: var(--muted, #f6f7f9); cursor: grab; user-select: none; } .col-token:active { cursor: grabbing; } .col-token .drag { opacity: .6; font-size: 12px; } /* Search + sort */ .cfg-search-wrap { padding: 8px 10px 0 10px; } .cfg-search-wrap input[type="text"] { width: 100%; font-size: 12px; line-height: 1.6; padding: 6px 8px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; } .cfg-sort-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border, #e5e7eb); } .cfg-sort-wrap span { font-size: 12px; opacity: .7; } /* Mini buttons */ .btn-mini { font-size: 11px; line-height: 1.4; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border, #e5e7eb); background: #fff; cursor: pointer; } .btn-mini:hover { background: var(--muted, #f6f7f9); } .btn-mini.ghost { background: transparent; } .btn-mini.primary { background: var(--primary, #111827); color: #fff; border-color: var(--primary, #111827); } .btn-mini.active { background: var(--muted, #f6f7f9); } /* Column list (multi-column auto-wrap) */ .cfg-col-list { padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 12px; max-height: 55vh; overflow-y: auto; } .cfg-col-list button { font-size: 11px; line-height: 1.3; background: transparent; border: none; text-align: left; cursor: pointer; padding: 2px 2px; border-radius: 4px; } .cfg-col-list button:hover { background: var(--muted, #f6f7f9); } .cfg-col-list button.used { font-weight: 600; color: var(--accent-ink, #111827); } /* Footer */ .cfg-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-top: 1px solid var(--border, #e5e7eb); } /* Cutlist Configurator: compact inputs above tokens */ .col-token .edit-wrap { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .col-token .edit-wrap .lbl, .col-token .edit-wrap .w { width: 120px; /* ~half short size */ font-size: 11px; line-height: 1.3; padding: 3px 6px; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; background: #fff; } .col-token .edit-wrap .w { width: 80px; /* number input slightly narrower */ } .col-token .title { font-weight: 600; } .col-token .kill { background: transparent; border: 0; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 4px; color: #a00; } .col-token .kill:hover { color: #c00; } .col-token .drag { cursor: grab; } .page { width: 210mm; height: 297mm; margin: 10px auto; /* zentrieren + etwas Außenabstand */ padding: 20mm; /* typischer Druckrand */ border: 1px solid #ccc; /* leichter Rahmen */ background: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); page-break-after: always; /* Umbruch für Druck */ } .table { width: 100%; /* volle Seitenbreite */ border-collapse: collapse; margin-bottom: 10mm; } .table th, .table td { border: 1px solid #000; padding: 4px; text-align: left; vertical-align: top; white-space: nowrap; } .table th { background-color: #f2f2f2; } @media print { body { background: none; } .page { margin: 0; border: none; box-shadow: none; page-break-after: always; } } /* Align the form view nicely to the left with a small gutter in the main pane */ .workspace .view[data-view="cutlist-form"] { padding-left: 8px; padding-right: 8px; } /* Make the A4 page sit closer to the left edge and reduce inner padding for preview */ .workspace .view[data-view="cutlist-form"] .page { /* keep A4 size but change spacing to look less "centered card" */ margin: 6mm 0 8mm 0; /* stick fully to the left */ padding: 12mm; /* was 20mm; bring content nearer to paper edge */ box-shadow: 0 0 3px rgba(0,0,0,0.08); /* softer shadow so it feels tighter */ border-color: #ddd; } /* Printing: keep it even tighter on paper */ @media print { .workspace .view[data-view="cutlist-form"] .page { margin: 0; /* printer decides physical margins */ padding: 10mm; /* tighter than screen for maximum area usage */ box-shadow: none; border: none; } } /* ===== Cutlist Form: multi-column page layout (side-by-side when space allows) ===== */ .workspace .view[data-view="cutlist-form"] .pages { display: flex; flex-wrap: wrap; /* allow wrapping to next row */ gap: 6mm; /* space between pages */ align-items: flex-start; /* align pages to the top */ } /* use gap instead of margins on pages to keep a tight left alignment */ .workspace .view[data-view="cutlist-form"] .page { margin: 0; /* reset page margins; gap handles spacing */ } /* For printing, go back to single column, full-width pages */ @media print { .workspace .view[data-view="cutlist-form"] .pages { display: block; /* stack pages vertically for printing */ } .workspace .view[data-view="cutlist-form"] .page { margin: 0; width: 210mm; /* ensure exact A4 width */ height: 297mm; /* ensure exact A4 height */ page-break-after: always; } } /* ===== Page numbering (cutlist-form) ===== */ .workspace .view[data-view="cutlist-form"] .page { position: relative; /* allow absolute children like .pageno */ } .workspace .view[data-view="cutlist-form"] .pageno { position: absolute; top: 6mm; right: 6mm; font-size: 11px; color: var(--text-dim, #6b7280); letter-spacing: .3px; } @media print { .workspace .view[data-view="cutlist-form"] .pageno { position: fixed; /* prints at exact spot on page box */ } } /* kompakter Zellabstand nur für die Badge-Spalte */ .kantenbild-cell { padding: 1px 1px !important; line-height: 1; vertical-align: middle; } .kantenbild-cell .kantenbild-svg { display: block; /* verhindert baseline-gap */ } .part-preview { display: inline-block; margin: 6px 8px; line-height: 0; } /* --- Cutlist Toolbar --- */ .cl-toolbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 8px 12px; margin-bottom: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .cl-left, .cl-right { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; } .cl-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #374151; } .cl-input { min-width: 220px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; } .cl-search .cl-input { min-width: 280px; } .cl-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font: inherit; } .cl-btn:hover { background: #f9fafb; } .cl-btn[aria-pressed="true"] { background: #111827; color: #fff; border-color: #111827; } .cl-tabs { display: inline-flex; gap: 6px; padding: 4px; background: #f3f4f6; border-radius: 10px; } .cl-tab { padding: 6px 10px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; } .cl-tab.is-active { background: #111827; color: #fff; } .cl-sort .cl-label-text { font-size: 12px; color: #6b7280; margin-right: 4px; }