/* ========================================================================== FactoryHajri UI - 02. BASE Reset and typography. Element selectors only, no classes. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fh-paper); color: var(--fh-text); font-family: var(--fh-font); font-size: var(--fh-text-base); line-height: var(--fh-lh-base); font-feature-settings: var(--fh-num); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { margin: 0 0 var(--fh-s3); font-weight: var(--fh-fw-semi); line-height: var(--fh-lh-tight); letter-spacing: var(--fh-track-tight); color: var(--fh-text); } h1 { font-size: var(--fh-text-xl); } h2 { font-size: var(--fh-text-lg); } h3 { font-size: var(--fh-text-md); } h4 { font-size: var(--fh-text-base); } p { margin: 0 0 var(--fh-s3); } p:last-child { margin-bottom: 0; } a { color: var(--fh-navy-600); text-decoration: none; } a:hover { text-decoration: underline; } small { font-size: var(--fh-text-sm); } /* The voice of DATA: every count, time, amount and code in this face. This is what gives the register feel and keeps columns aligned. */ code, kbd, samp, .fh-data, [data-fh-num] { font-family: var(--fh-font-data); font-feature-settings: var(--fh-num); font-variant-numeric: tabular-nums lining-nums; } hr { border: 0; border-top: 1px solid var(--fh-line); margin: var(--fh-s5) 0; } img, svg { max-width: 100%; } svg { vertical-align: middle; } /* Keyboard users must always see where focus is */ :focus-visible { outline: none; box-shadow: var(--fh-focus); border-radius: var(--fh-r-sm); } ::selection { background: var(--fh-marigold-100); color: var(--fh-navy-800); } /* Thin scrollbar so a dense table does not lose width */ .fh-scroll { scrollbar-width: thin; scrollbar-color: var(--fh-line-strong) transparent; } .fh-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .fh-scroll::-webkit-scrollbar-thumb { background: var(--fh-line-strong); border-radius: var(--fh-r-pill); } .fh-scroll::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------------ PRINT The salary sheet does get printed. Rail, tab bar and buttons go away. */ @media print { /* ========================================================================== PRINT -------------------------------------------------------------------------- The salary sheet gets printed every month, signed, and filed. So the page that comes out of the printer has to be the SHEET - not a screenshot of an app. Everything that is only a way to reach the numbers is dropped: topbar, rail, tab bar, filters, buttons, notes, the subscription line. ========================================================================== */ /* A wide register wants landscape; a wage slip is a portrait document. The page sets .fh-print-portrait on when it needs the other one. */ @page { size: A4 landscape; margin: 10mm 8mm 12mm; } body.fh-print-portrait { --_x: 0; } @page portraitpage { size: A4 portrait; margin: 12mm 10mm; } body.fh-print-portrait { page: portraitpage; } html, body { background: #fff !important; } body { font-size: 10.5pt; color: #000; } /* --- chrome goes --- */ .fh-topbar, .fh-rail, .fh-tabbar, .fh-fab, .fh-modal, .fh-toolbar, .fh-pagehead__actions, .fh-btn, .fh-btnrow, .fh-note, .fh-chipbar, .fh-stats, .fh-formfoot, form.fh-toolbar, .fh-screen-only { display: none !important; } /* --- the shell collapses to plain flow --- */ .fh-shell { display: block !important; } .fh-main { padding: 0 !important; } .fh-container { max-width: none !important; padding: 0 !important; } /* --- page head becomes the sheet's title line --- */ .fh-pagehead { display: block; margin: 0 0 6pt; padding: 0; border: 0; } .fh-pagehead__eyebrow { display: none; } .fh-pagehead h1 { font-size: 15pt; margin: 0; } .fh-pagehead__sub { font-size: 9.5pt; color: #000; margin: 2pt 0 0; } /* --- the wage slip: portrait, one worker per sheet --- */ .fh-slip { border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; break-inside: avoid; page-break-inside: avoid; } .fh-slip__net { background: #E9EDF4 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .fh-slip__head h2 { font-size: 13pt; } .fh-slip__net b { font-size: 14pt; } .fh-slip__foot { margin-top: 22pt; } .fh-slip__money { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8pt !important; } .fh-slip__att th, .fh-slip__att td, .fh-slip__money th, .fh-slip__money td { border: 0.6pt solid #999 !important; } .fh-slip__att th, .fh-slip__money th, .fh-slip__money tfoot td { background: #F1F3F7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* --- print-only material --- */ .fh-print-only { display: revert !important; } th.fh-print-only, td.fh-print-only { display: table-cell !important; } .fh-printhead { display: block !important; border-bottom: 1.5pt solid #000; padding-bottom: 4pt; margin-bottom: 6pt; } .fh-printhead__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; } .fh-printhead h2 { font-size: 14pt; margin: 0; } .fh-printhead__meta { font-size: 9pt; } /* A register is signed, so the sign-off block must SHOW when printing - the page hides it inline for the screen, and this has to beat that. */ .fh-printsign { margin-top: 14pt; font-size: 9.5pt; display: flex !important; gap: 40pt; } .fh-printhead { display: block !important; } .fh-printsign span { border-top: 1pt solid #000; padding-top: 3pt; min-width: 150pt; } /* --- tables: the whole point of the page --- */ .fh-tablewrap, .fh-tablewrap--matrix { overflow: visible !important; max-height: none !important; border: 0 !important; box-shadow: none !important; background: none !important; } .fh-table { width: 100% !important; font-size: 9pt; border-collapse: collapse; } .fh-table--matrix { width: 100% !important; min-width: 0 !important; } /* A header that repeats on every sheet, and rows that never split in half. */ .fh-table thead { display: table-header-group; } .fh-table tfoot { display: table-footer-group; } .fh-table tr { break-inside: avoid; page-break-inside: avoid; } .fh-table thead th { position: static !important; background: #E9EDF4 !important; color: #000 !important; border: 0.6pt solid #666 !important; padding: 3pt 4pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .fh-table td { position: static !important; background: none !important; border: 0.6pt solid #999 !important; padding: 2.5pt 4pt; } .fh-table tfoot td { position: static !important; font-weight: 700; background: #E9EDF4 !important; border-top: 1.2pt solid #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .fh-table__sub { font-size: 7.5pt; color: #333; } .fh-table tr.is-muted { opacity: 1; } /* Chips and code pills print as plain text - ink is expensive and a grey lozenge round a word helps nobody on paper. */ .fh-chip, .fh-code { background: none !important; color: #000 !important; border: 0 !important; padding: 0 !important; font-weight: 600; } /* The hajri grid keeps its colours - that IS the information - but lighter. */ .fh-hgrid__cell input { border: 0 !important; background: none !important; } .fh-hgrid__cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; } a { text-decoration: none; color: #000; } a[href]::after { content: none !important; } }