/* Miftahun Theme — design tokens applied via attributes on . * * The JS applier sets: data-mt-color (t1..t5|custom), data-mt-font * (system|plex|public|nunito), data-mt-density (balanced|compact|relaxed). * "custom" colors arrive as inline CSS variables set by the applier. * * Deliberately narrow: we override Frappe's own CSS variables where they * exist and touch a minimal set of component selectors. Status colors * (success/warning/danger) are NOT remapped — red stays clinical. */ /* ---------- fonts (latin subset; extend with more subsets if needed) ------ */ @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('/assets/miftahun_theme/fonts/IBMPlexSans-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/IBMPlexSans-600.woff2') format('woff2'); } /* The two faces the Estate skin asks for. Added 15 Aug 2026 after measuring that * it requested them and the theme shipped neither: `--mt-disp` fell through to * Arial Narrow and then to system-ui, so the KPI figures were never condensed, * and `--mt-mono` fell through to the platform monospace. A font stack that * silently degrades looks like a design choice, which is why it went unnoticed. * IBM Plex is OFL-1.1, latin subset only, ~50 KB for all three. */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/IBMPlexSansCondensed-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/assets/miftahun_theme/fonts/IBMPlexMono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/IBMPlexMono-600.woff2') format('woff2'); } /* Source Serif 4, added for the Mall style conversion (branch mall-style-conversion). * Self-hosted like every other face here: the theme's rule is no third-party * request on page load, and a converted palette is no reason to break it. * OFL-1.1, latin subset, ~14 KB for both weights. */ @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-display: swap; src: url('/assets/miftahun_theme/fonts/SourceSerif4-400.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/SourceSerif4-600.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-weight: 400; font-display: swap; src: url('/assets/miftahun_theme/fonts/PublicSans-400.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/PublicSans-600.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-weight: 400; font-display: swap; src: url('/assets/miftahun_theme/fonts/NunitoSans-400.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/NunitoSans-600.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url('/assets/miftahun_theme/fonts/Roboto-400.woff2') format('woff2'); } /* Roboto ships 500, not 600 — declaring it as 600 keeps our weight scale consistent. */ @font-face { font-family: 'Roboto'; font-weight: 600; font-display: swap; src: url('/assets/miftahun_theme/fonts/Roboto-500.woff2') format('woff2'); } /* Manrope, for the Expressive surface's figures. One variable file covers the * whole weight axis, which is why a single @font-face declares 200-800. */ @font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('/assets/miftahun_theme/fonts/Manrope-800.woff2') format('woff2'); } /* Inter, the face of the Option 1 drawing. Variable; one file, 400-700. */ @font-face { font-family: 'Inter'; font-weight: 400 700; font-display: swap; src: url('/assets/miftahun_theme/fonts/Inter-var.woff2') format('woff2'); } /* ---------- layout -------------------------------------------------------- */ /* Frappe caps page content at --page-max-width (900px, set in its own * common/css_variables.scss). On a 1920px monitor that leaves roughly half the * screen unused — but the cap is not arbitrary: it keeps form labels and inputs * near a readable line length. * * This adapts instead of picking one number. Note that max-width is already * responsive downward — it never forces an element wider than its container, so * on a laptop or tablet the ceiling simply does not bind and content shrinks on * its own. What a fixed value cannot do is hold back on a very large monitor, * which is what the upper bound below is for. * * floor 900px — never constrain tighter than Frappe's own default * 92vw — track the viewport through the middle range * ceiling 1800px — past this, form rows get too long to scan comfortably * * Pure CSS: no viewport detection, no JS, no resize listener. It re-evaluates * as the window changes, including on an external monitor being plugged in. * * Same specificity as Frappe's :root, so this wins on source order alone — * frappe's desk.bundle.css is itself an app_include_css entry and frappe is * always the first app, so our stylesheet is appended after it. No !important. */ :root { --page-max-width: clamp(900px, 92vw, 1800px); } /* ---------- responsive type and chrome scale ------------------------------ */ /* Frappe defines its whole type scale in px (--text-base: 14px, and so on). * px does not respond to the reader's own browser font-size setting — the * standard accommodation for low vision. Verified in the browser on * education.miftahun.com: with the root raised 16px -> 20px, a px token stayed * at 14px while the rem equivalent moved to 17.5px. * * These are the identical sizes at the default 16px root, so nothing shifts for * anyone who has not changed their setting — but they now follow the reader. * * Deliberately NOT converted: border widths stay 1px, because hairlines should * not thicken with text and sub-pixel borders render badly; and font size does * not scale with viewport, because in a data-dense desk a larger screen should * show more rows, not bigger text. Density is the lever for that. */ :root { --text-tiny: 0.6875rem; /* 11px */ --text-2xs: 0.75rem; /* 12px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-md: 0.875rem; /* 14px */ --text-base: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 1.625rem; /* 26px */ /* Chrome sized in rem too, or enlarged text clips inside fixed-height bars. */ --navbar-height: 3rem; /* 48px */ --page-head-height: 3rem; /* 48px */ --sidebar-width: 13.75rem; /* 220px */ } /* WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum, AA): when a keyboard user * tabs to a control that sits just above the fold, the browser scrolls it into * view — directly underneath the navbar and page head, both of which are * position: sticky. The focused control ends up hidden behind them. * * Frappe sets scroll-margin-top on two individual elements but has no global * guard, and there are six-plus sticky elements in the desk. scroll-padding on * the scroll container is the blanket fix: it reserves space at the top of * every programmatic scroll, so focus always lands below the sticky chrome. * Costs nothing when nothing is sticky. */ html { scroll-padding-top: calc(var(--navbar-height, 48px) + var(--page-head-height, 48px) + 0.5rem); } /* ---------- color presets ------------------------------------------------- */ html[data-mt-color="t1"] { --mt-primary:#0F766E; --mt-accent:#2DD4BF; --mt-ink:#ffffff; --mt-accent-ink:#04211D; } html[data-mt-color="t2"] { --mt-primary:#1D4ED8; --mt-accent:#60A5FA; --mt-ink:#ffffff; --mt-accent-ink:#0A1B33; } html[data-mt-color="t3"] { --mt-primary:#047857; --mt-accent:#34D399; --mt-ink:#ffffff; --mt-accent-ink:#03291C; } html[data-mt-color="t4"] { --mt-primary:#4F46E5; --mt-accent:#818CF8; --mt-ink:#ffffff; --mt-accent-ink:#111436; } html[data-mt-color="t5"] { --mt-primary:#1E3A5F; --mt-accent:#93B8E0; --mt-ink:#ffffff; --mt-accent-ink:#0B1B2E; } html[data-mt-color="t6"] { --mt-primary:#714B67; --mt-accent:#D4A9C7; --mt-ink:#ffffff; --mt-accent-ink:#331A2E; } /* data-mt-color="custom": --mt-primary/--mt-accent set inline by the applier */ /* Map onto Frappe's variable names, light mode. */ html[data-mt-color] { --primary: var(--mt-primary); --primary-color: var(--mt-primary); --btn-primary: var(--mt-primary); --sidebar-select-color: color-mix(in srgb, var(--mt-primary) 12%, transparent); --checkbox-color: var(--mt-primary); } html[data-mt-color] .btn-primary { background-color: var(--mt-primary); border-color: var(--mt-primary); color: var(--mt-ink); } html[data-mt-color] .btn-primary:hover, html[data-mt-color] .btn-primary:active { background-color: color-mix(in srgb, var(--mt-primary) 88%, black); border-color: color-mix(in srgb, var(--mt-primary) 88%, black); } html[data-mt-color] a:not(.btn):not(.no-underline) { color: var(--mt-primary); } html[data-mt-color] .desk-sidebar-item.selected, html[data-mt-color] .sidebar-item-container .selected { background-color: color-mix(in srgb, var(--mt-primary) 10%, transparent); color: var(--mt-primary); } html[data-mt-color] input:focus, html[data-mt-color] select:focus, html[data-mt-color] textarea:focus, html[data-mt-color] .form-control:focus { border-color: var(--mt-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mt-primary) 25%, transparent); } /* Dark mode: flip to the light accent so contrast holds on dark surfaces. */ html[data-theme="dark"][data-mt-color] { --primary: var(--mt-accent); --primary-color: var(--mt-accent); --btn-primary: var(--mt-accent); --checkbox-color: var(--mt-accent); } html[data-theme="dark"][data-mt-color] .btn-primary { background-color: var(--mt-accent); border-color: var(--mt-accent); color: var(--mt-accent-ink); } html[data-theme="dark"][data-mt-color] a:not(.btn):not(.no-underline) { color: var(--mt-accent); } html[data-theme="dark"][data-mt-color] .desk-sidebar-item.selected, html[data-theme="dark"][data-mt-color] .sidebar-item-container .selected { background-color: color-mix(in srgb, var(--mt-accent) 14%, transparent); color: var(--mt-accent); } /* ---------- typefaces ----------------------------------------------------- */ html[data-mt-font="plex"] { --mt-font: 'IBM Plex Sans'; } html[data-mt-font="public"] { --mt-font: 'Public Sans'; } html[data-mt-font="nunito"] { --mt-font: 'Nunito Sans'; } html[data-mt-font="roboto"] { --mt-font: 'Roboto'; } html[data-mt-font="inter"] { --mt-font: 'Inter'; } html[data-mt-font="plex"] body, html[data-mt-font="public"] body, html[data-mt-font="nunito"] body, html[data-mt-font="roboto"] body, html[data-mt-font="inter"] body { --font-stack: var(--mt-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: var(--font-stack); } /* data-mt-font="system" (or absent): stock stack, nothing to do. */ /* ---------- density ------------------------------------------------------- */ html[data-mt-density="compact"] { --border-radius: 2px; --border-radius-sm: 2px; --border-radius-md: 3px; --border-radius-lg: 4px; --padding-xs: 2px; --padding-sm: 4px; } /* rem, not px, and min-height, not height: Frappe lets list rows size to their * content. Pinning them to a pixel value clips the text when a user enlarges * their browser font or zooms to 200% — which WCAG 1.4.4 requires us to * survive. 2rem is 32px at the default root size, and grows with the user. */ html[data-mt-density="compact"] .list-row, html[data-mt-density="compact"] .list-row-head { min-height: 2rem; padding-top: 0; padding-bottom: 0; } /* WCAG 2.2 SC 2.5.8 Target Size (Minimum, AA) requires 24x24 CSS px. With * Frappe's .btn at font-size 14px / line-height 1.15, our 3px padding gives * 22.1px of content box — it only clears 24px because .btn happens to carry a * 1px border. That is accidental compliance: any borderless variant fails. * State the floor instead of inheriting it by luck. */ html[data-mt-density="compact"] .btn { padding-top: 3px; padding-bottom: 3px; min-height: 1.5rem; } html[data-mt-density="relaxed"] { --border-radius: 10px; --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 14px; } html[data-mt-density="relaxed"] .list-row, html[data-mt-density="relaxed"] .list-row-head { min-height: 3rem; } html[data-mt-density="relaxed"] .btn { padding-top: 7px; padding-bottom: 7px; } /* "balanced": stock metrics, nothing to override. */ /* ---------- header theme-picker button ------------------------------------ */ .mt-theme-btn { background: none; border: none; display: flex; align-items: center; padding: 6px 8px; cursor: pointer; color: var(--text-muted, #6B7280); border-radius: 6px; } .mt-theme-btn:hover { color: var(--mt-primary, var(--text-color, #1F2430)); } .mt-theme-btn:focus-visible { outline: 2px solid var(--mt-primary, #0F766E); outline-offset: 1px; } /* ---------- surface: Flat (Odoo style) ------------------------------------ */ /* Light-gray page ground, white flat cards, shadows almost gone. Works with * any color preset; pairs naturally with Plum + Roboto + Relaxed. */ html[data-mt-surface="flat"] { --bg-color: #F1F2F5; --card-bg: #FFFFFF; --fg-color: #FFFFFF; --subtle-fg: #F7F8F9; --shadow-sm: 0 1px 2px rgba(25, 28, 33, 0.05); --shadow-base: 0 1px 3px rgba(25, 28, 33, 0.07); } html[data-mt-surface="flat"] .widget, html[data-mt-surface="flat"] .frappe-card, html[data-mt-surface="flat"] .form-page { background: var(--card-bg); box-shadow: var(--shadow-sm); border: 1px solid #E7E9EC; } html[data-mt-surface="flat"] .btn { box-shadow: none; } html[data-mt-surface="flat"] .navbar { background: #FFFFFF; border-bottom: 1px solid #E7E9EC; } /* Dark mode: keep depth relationships, just flatter. */ html[data-theme="dark"][data-mt-surface="flat"] { --bg-color: #121417; --card-bg: #1B1E23; --fg-color: #1B1E23; --shadow-sm: none; --shadow-base: none; } html[data-theme="dark"][data-mt-surface="flat"] .widget, html[data-theme="dark"][data-mt-surface="flat"] .frappe-card, html[data-theme="dark"][data-mt-surface="flat"] .form-page { background: var(--card-bg); border: 1px solid #2A2E35; box-shadow: none; } html[data-theme="dark"][data-mt-surface="flat"] .navbar { background: #16181C; border-bottom: 1px solid #2A2E35; } /* ---------- forced colours (Windows High Contrast) ------------------------ */ /* In forced-colors mode the OS replaces the palette. Frappe does not handle * this, and our tinted selection backgrounds are the thing that breaks: a * colour-mix() fill at 10–16% opacity is dropped, leaving the selected item * visually identical to the rest of the sidebar. Hand those states back to the * system palette so "which item am I on" survives. Nobody on this theme should * lose their place because they use high contrast. */ @media (forced-colors: active) { html[data-mt-color] .desk-sidebar-item.selected, html[data-mt-color] .sidebar-item-container .selected, html[data-theme="dark"][data-mt-color] .desk-sidebar-item.selected, html[data-theme="dark"][data-mt-color] .sidebar-item-container .selected { background-color: Highlight; color: HighlightText; forced-color-adjust: none; } /* Our focus ring is a preset colour, which forced-colors discards. */ .mt-theme-btn:focus-visible, html[data-mt-color] input:focus, html[data-mt-color] select:focus, html[data-mt-color] textarea:focus, html[data-mt-color] .form-control:focus { outline: 2px solid Highlight; outline-offset: 1px; box-shadow: none; } } /* ---------- Espresso semantic tokens (v16) -------------------------------- */ /* The rules above target the v15 vocabulary (--bg-color, --card-bg, --fg-color). * v16's newer chrome — the persistent sidebar, modals, card surfaces, muted * text — reads Espresso's semantic names instead, which the block above never * touches. Measured in the compiled desk.bundle.css shipping on healthcare: * 240 references to the legacy names, 78 to these. Without this block the Flat * surface stops at roughly three quarters of the desk. * * Token declarations only — no selectors against Frappe's markup — so this * degrades to "no effect" rather than breaking if the names change upstream. */ html[data-mt-surface="flat"] { --surface-cards: #FFFFFF; --surface-modal: #FFFFFF; --surface-menu-bar: #F7F8F9; --surface-selected: color-mix(in srgb, var(--mt-primary) 12%, transparent); --outline-gray-1: #E7E9EC; --outline-gray-2: #DDE0E4; } html[data-theme="dark"][data-mt-surface="flat"] { --surface-cards: #1B1E23; --surface-modal: #23262B; --surface-menu-bar: #16181C; --surface-selected: color-mix(in srgb, var(--mt-accent) 16%, transparent); --outline-gray-1: #2A2E35; --outline-gray-2: #343941; } /* ---------- target size (WCAG 2.2 SC 2.5.8, AA) --------------------------- */ /* Measured in Chrome at 1440x675 on education.miftahun.com/app/student and * healthcare.miftahun.com/app/patient/new, by probing each interactive * element's *effective* hit area with document.elementFromPoint rather than * reading getBoundingClientRect(). * * That distinction is the whole of this section. A naive box audit counts 29 of * 77 targets under 24px on the Student list; probing the hit area gives 16. The * 13 that vanish are the row and header checkboxes, which look like the worst * offenders on paper — a 14x14 painted box — but which Frappe already backs * with input.list-row-checkbox::after { left/top/right/bottom: -8px }, i.e. a * 28x28 hit area. They pass already. An earlier draft of this block "fixed" * them by re-declaring left/top/width/height on that same pseudo-element and * measurably made things worse: the header checkbox ended up with a displaced * 24x24 overlay and stopped responding 11px from its own centre. They are left * alone deliberately — see the closing note. * * Not scoped to html[data-mt-*]. A hit area is not a taste setting, and this * follows the same reasoning as the SC 2.4.11 scroll-padding rule further up: * an accessibility floor applies to every preset or it is not a floor. * * These are selectors against Frappe's markup rather than token overrides, * which the rest of this file avoids. It is unavoidable here — CSS cannot * select "elements whose box is under 24px", so every offender has to be named, * and each rule is therefore checked against the upstream declarations it sits * next to rather than assumed safe. */ /* The row subject link — the primary action in every list, and the one target * here that a user hits hundreds of times a day. 14px text in a 21px line box, * 3px short. There is room: the row is 41px and .list-subject is a fixed 30px, * so 9px either side goes unused. * * Growing the line box grows the hit area symmetrically, which is why this is * line-height and not padding or min-height: measured top 142.5 -> 141.0 and * height 21 -> 24, so the glyphs stay exactly where they were rather than * shifting 1.5px up as a min-height would have moved them. * * max(), not a flat 24px, because this file converts Frappe's px type scale to * rem so it follows the reader's browser font size. A reader at a 20px root * gets 17.5px text, where a flat 24px line box would be a 1.37 ratio — tighter * than the 1.5 Frappe ships, crowding descenders on the one control we are * trying to make easier to hit. 1.5em reproduces Frappe's own ratio once it * exceeds the floor; at default settings max() resolves to exactly 24px, so * nothing moves for anyone who has not changed their setting. * * Verified: all 12 row heights stayed 41px, .list-subject stayed 30px, .result * stayed 526px, document height unchanged, no horizontal overflow. Row pitch is * 41px (32px at compact density), both comfortably over 24, so enlarging the * hit area cannot make neighbouring rows' targets touch. */ .list-row-col.list-subject a.ellipsis { line-height: max(24px, 1.5em); } /* Icon-only buttons that are genuinely their own target: the workspace/app * switcher chevron in the sidebar header (16x16) and the desktop notification * bell (20x21.7). Both are .btn-reset — deliberately stripped of padding — and * both sit alone, with nothing else interactive within 40px, so the shortfall * is a real one rather than an artefact of a clickable ancestor overlapping * them. * * A centred transparent pseudo-element takes the hit area to 24x24 without * moving the icon, the sidebar header, or the bar around it: it is out of flow, * so it cannot push anything. .drop-icon ships overflow:hidden, which would * clip the overlay, so it is reopened here. * * Checked before writing this: neither element has a ::before or ::after * upstream (computed content is 'none' on both), so unlike the list checkboxes * nothing is being overwritten. Verified by hit-testing afterwards — both * capture the pointer at +/-11px from centre and release it at +/-14px, which * is a 24x24 area and not a hair more. * * 24px literal, not rem: SC 2.5.8 states an absolute CSS px floor, and these * icons are fixed-size SVGs that do not scale with the reader's font. Same * reasoning as the border widths left in px at the top of this file. */ .sidebar-header .btn-reset.drop-icon, .btn-reset.desktop-notification-icon { position: relative; overflow: visible; } .sidebar-header .btn-reset.drop-icon::after, .btn-reset.desktop-notification-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } /* Form checkboxes. Unlike the list ones these get no overlay from Frappe, but * they are wrapped in a