/* ============================================================ SonoNurse – PRODUCTION HARDENED THEME (Light/Dark) Goals: - WCAG-friendly defaults (better contrast for body text on surfaces) - No color-mix() (fixed colors for maximum compatibility) - Mobile-first, fluid spacing/typography, robust wrapping - Accessible focus, reduced-motion support, touch targets Toggle: ... ... (or omit for light) ============================================================ */ /* ----------------------------- 1) Design Tokens (Light) Notes on contrast: - Body text is slightly darker than your doc’s #435774 for AA safety on #F5F3F0 / #FFFFFF. - Brand colors kept for titles/actions. ----------------------------- */ :root { /* Brand base (from your doc) */ --brand-navy: #1F3658; --brand-blue: #37598F; --brand-action: #10AFE2; --brand-ice: #E5F7FB; --brand-bg: #F5F3F0; /* Backgrounds / Surfaces */ --bg-main: var(--brand-bg); --bg-surface: #FFFFFF; --bg-surface-2: var(--brand-ice); --bg-elevated: #FFFFFF; /* Interactive backgrounds (fixed, no color-mix) */ --hover-surface: rgba(31, 54, 88, 0.06); --active-surface: rgba(31, 54, 88, 0.10); --selected-surface: rgba(16, 175, 226, 0.12); /* Text (hardened for readability) */ --text-title: var(--brand-navy); --text-subtitle: var(--brand-blue); --text-body: #0d1b33; /* hardened (more contrast than #435774) */ --text-muted: #637892; /* muted but still readable */ --text-disabled: #8A9BB2; /* On-colored backgrounds */ --text-on-primary: #FFFFFF; --text-on-secondary: #FFFFFF; /* Actions */ --primary: var(--brand-navy); --primary-hover: #0E9ACC; --primary-active: #0C88B7; --secondary: var(--brand-blue); --secondary-hover: #2F4E7C; --secondary-active: #274164; /* Borders / Dividers */ --border: #D6E4EA; --divider: #E7EEF2; /* States */ --success: #09DF52; --warning: #F5C16C; --danger: #C23B22; --info: var(--brand-action); /* State surfaces (fixed colors, no color-mix) */ --info-surface: #E7F7FD; --success-surface: #E8FCEB; --warning-surface: #FFF4E5; --danger-surface: #FDECEB; --info-border: #BFEAF8; --success-border: #BFF2C8; --warning-border: #F6D7A6; --danger-border: #F3B7B2; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 30, 51, 0.10); --shadow-md: 0 10px 25px rgba(15, 30, 51, 0.14); /* Radius */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; /* Typography */ --font-title: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "Garet", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Fluid layout scale */ --container-max: 100vw; --gutter: clamp(12px, 3vw, 24px); --space-0: clamp(4px, 1vw, 8px); --space-1: clamp(8px, 1.6vw, 12px); --space-2: clamp(12px, 2vw, 16px); --space-3: clamp(16px, 2.6vw, 24px); --space-4: clamp(20px, 3.2vw, 32px); /* Fluid type */ --h1: clamp(1.6rem, 2.6vw, 2.2rem); --h2: clamp(1.25rem, 2.1vw, 1.7rem); --h3: clamp(1.1rem, 1.7vw, 1.35rem); --body: clamp(0.98rem, 1.15vw, 1.05rem); --small: clamp(0.86rem, 1.05vw, 0.93rem); /* Focus */ --focus-color: rgba(16, 175, 226, 0.35); --focus-ring: 0 0 0 3px var(--focus-color); /* Touch target */ --tap-min: 44px; } /* ----------------------------- 2) Dark Mode Tokens (Hardened) - Avoid pure black; keep brand feel ----------------------------- */ :root[data-theme="dark"] { --bg-main: #0F1E33; --bg-surface: #1A2B46; --bg-surface-2: #233A5C; --bg-elevated: #213553; --hover-surface: rgba(229, 247, 251, 0.06); --active-surface: rgba(229, 247, 251, 0.10); --selected-surface: rgba(16, 175, 226, 0.18); --text-title: #E5F7FB; --text-subtitle: #B8D0F0; --text-body: #D7E2EE; --text-muted: #9FB1C8; --text-disabled: #7F93AD; /* Keep primary the same, but readable label */ --primary: var(--brand-navy); --primary-hover: #3BC4F2; --primary-active: #1CB3E2; --secondary: #37598F; --secondary-hover: #476AB0; --secondary-active: #3A5A98; --border: #2E466A; --divider: #243A5A; /* Dark state surfaces */ --info-surface: #132D3B; --success-surface: #11331E; --warning-surface: #3B2C14; --danger-surface: #3B1A19; --info-border: #1E6075; --success-border: #1E6B3B; --warning-border: #7B5A2A; --danger-border: #7A3A3A; /* Choose label color for primary buttons */ --text-on-primary: #0B1A2C; /* dark navy on bright cyan = very readable */ --text-on-secondary: #E5F7FB; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.50); --focus-color: rgba(16, 175, 226, 0.45); --focus-ring: 0 0 0 3px var(--focus-color); } /* ----------------------------- 3) Base / Reset ----------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: var(--font-body); font-size: var(--body); line-height: 1.5; background: var(--bg-main); color: var(--text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h1, h2, h3, h4, h5, h6 { margin: 0 0 0 0; font-family: var(--font-title); color: var(--text-title); letter-spacing: 0.2px; } p { margin: 0 0 1rem 0; } small { font-size: var(--small); } .text-muted { color: var(--text-muted); } .text-disabled { color: var(--text-disabled); } /* Links: underline on hover/focus for accessibility */ a { color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--primary-hover); text-decoration: underline; } a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; } hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-3) 0; } /* Accessible focus for controls */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ----------------------------- 4) Responsive Layout Helpers ----------------------------- */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding-bottom: 60px; } .layout { display: flex; width: 100%; min-height: 100vh; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--space-1) var(--space-1); } .stack { display: grid; gap: var(--space-2); } .row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; min-width: 0; } .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; min-width: 0; } .grid { display: grid; gap: var(--space-2); } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ----------------------------- 5) Surfaces / Cards ----------------------------- */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-2); min-width: 0; } .card--soft { background: var(--bg-surface-2); } .panel { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--space-4); min-width: 0; } .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-subtitle); font-size: var(--small); } /* ----------------------------- 6) Buttons (touch-safe, accessible) ----------------------------- */ .btn { appearance: none; border: 1px solid transparent; border-radius: var(--radius-sm); min-height: var(--tap-min); padding: 0.7rem 1rem; font: 700 0.95rem/1 var(--font-body); cursor: pointer; user-select: none; white-space: nowrap; transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn--primary { background: var(--primary); color: var(--text-on-primary); } .btn--primary:hover { background: var(--primary-hover); } .btn--primary:active { background: var(--primary-active); } .btn--secondary { background: var(--secondary); color: var(--text-on-secondary); } .btn--secondary:hover { background: var(--secondary-hover); } .btn--secondary:active { background: var(--secondary-active); } .btn--ghost { background: transparent; color: var(--text-title); border-color: var(--border); } .btn--ghost:hover { background: var(--hover-surface); } .btn--ghost:active { background: var(--active-surface); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { filter: brightness(1.05); } .btn[disabled], .btn.is-disabled { cursor: not-allowed; opacity: 0.6; transform: none; } /* Mobile-friendly full-width button */ .btn--block { width: 100%; justify-content: center; } #id_remember { cursor: pointer; } /* ----------------------------- 7) Forms ----------------------------- */ label { display: inline-block; margin: 0 0 0.35rem 0; color: var(--text-subtitle); font-weight: 700; font-size: var(--body); } .input, .select, .textarea { width: 100%; min-height: var(--tap-min); background: var(--bg-surface); color: var(--text-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; outline: none; transition: box-shadow 120ms ease, border-color 120ms ease, background 120ms ease; min-width: 0; } .textarea { min-height: 120px; resize: vertical; padding-top: 0.85rem; } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: var(--focus-ring); } .field { display: grid; gap: 0.35rem; } .field-help { margin-top: 0.25rem; font-size: var(--small); color: var(--text-muted); } /* Responsive form row: wraps cleanly */ .form-row { display: flex; gap: var(--space-2); flex-wrap: wrap; } .form-row > * { flex: 1 1 240px; min-width: min(100%, 240px); } /* ----------------------------- 8) Tables (robust mobile behavior) ----------------------------- */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; } .table th, .table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: middle; } .table th { font-family: var(--font-title); color: var(--text-title); font-weight: 800; background: var(--bg-surface-2); } .table tr:last-child td { border-bottom: 0; } .table tr:hover td { background: var(--hover-surface); } /* Optional stacked “card table” on small screens Requires: Value */ @media (max-width: 640px) { .table--stacked thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .table--stacked, .table--stacked tbody, .table--stacked tr, .table--stacked td { display: block; width: 100%; } .table--stacked tr { padding: var(--space-2); border-bottom: 1px solid var(--divider); } .table--stacked td { border: 0; padding: 0.35rem 0; display: flex; justify-content: space-between; gap: var(--space-2); } .table--stacked td::before { content: attr(data-label); color: var(--text-muted); font-weight: 700; flex: 0 0 45%; } .table--stacked td > * { max-width: 55%; text-align: right; } } /* ----------------------------- 9) Alerts (fixed colors, compatible) ----------------------------- */ .alert { border-radius: var(--radius-md); border: 1px solid var(--danger-border); padding: var(--space-0); background: var(--danger-surface); box-shadow: var(--shadow-sm); color: var(--danger); font-size: var(--small); } .alert--info { border-color: var(--info-border); background: var(--info-surface); } .alert--success { border-color: var(--success-border); background: var(--success-surface); } .alert--warning { border-color: var(--warning-border); background: var(--warning-surface); } .alert--danger { border-color: var(--danger-border); background: var(--danger-surface); } /* ----------------------------- 10) Navbar (responsive) ----------------------------- */ .navbar { background: var(--bg-surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .navbar__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0.85rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .navbar__brand { font-family: var(--font-title); color: var(--text-title); font-size: clamp(1.05rem, 2vw, 1.15rem); font-weight: 900; white-space: nowrap; } .navbar__links { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .navbar__link { color: var(--text-body); padding: 0.5rem 0.65rem; border-radius: 10px; min-height: var(--tap-min); display: inline-flex; align-items: center; } .navbar__link:hover { background: var(--hover-surface); color: var(--text-title); text-decoration: none; } .navbar__link.is-active { color: var(--primary); background: var(--selected-surface); } @media (max-width: 640px) { .navbar__inner { flex-direction: column; align-items: stretch; } .navbar__links { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; } .navbar__link { flex: 0 0 auto; white-space: nowrap; } } /* ----------------------------- 11) Modal (responsive) ----------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; padding: var(--gutter); z-index: 50; } .modal { width: min(720px, 100%); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .modal__header, .modal__footer { padding: var(--space-2) var(--space-3); } .modal__header { border-bottom: 1px solid var(--divider); } .modal__body { padding: var(--space-3); } .modal__footer { border-top: 1px solid var(--divider); display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } @media (max-width: 640px) { .modal__footer { flex-direction: column; align-items: stretch; } .modal__footer .btn { width: 100%; } } /* ----------------------------- 12) Utilities ----------------------------- */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hide-desktop { display: initial; } .hide-mobile { display: none; } @media (min-width: 641px) { .hide-desktop { display: none; } .hide-mobile { display: initial; } } /* ----------------------------- 13) Print (optional, nice for ERP exports) ----------------------------- */ @media print { :root, :root[data-theme="dark"] { --bg-main: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-2: #FFFFFF; --text-title: #000000; --text-body: #111111; --border: #DDDDDD; --divider: #DDDDDD; --shadow-sm: none; --shadow-md: none; } .navbar, .btn, .modal-backdrop { display: none !important; } } /* ----------------------------- 14) 3rd parties ----------------------------- */ .gsi-material-button { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-appearance: none; background-color: #131314; background-image: none; border: 1px solid #747775; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #E3E3E3; cursor: pointer; font-family: 'Roboto', arial, sans-serif; font-size: 14px; height: 40px; letter-spacing: 0.25px; outline: none; overflow: hidden; padding: 0 12px; position: relative; text-align: center; -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s; transition: background-color .218s, border-color .218s, box-shadow .218s; vertical-align: middle; white-space: nowrap; width: auto; max-width: 400px; min-width: min-content; border-color: #8E918F; } .gsi-material-button .gsi-material-button-icon { height: 20px; margin-right: 10px; min-width: 20px; width: 20px; } .gsi-material-button .gsi-material-button-content-wrapper { -webkit-align-items: center; align-items: center; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; justify-content: space-between; position: relative; width: 100%; } .gsi-material-button .gsi-material-button-contents { -webkit-flex-grow: 1; flex-grow: 1; font-family: 'Roboto', arial, sans-serif; font-weight: 500; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .gsi-material-button .gsi-material-button-state { -webkit-transition: opacity .218s; transition: opacity .218s; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; } .gsi-material-button:disabled { cursor: default; background-color: #13131461; border-color: #8e918f1f; } .gsi-material-button:disabled .gsi-material-button-state { background-color: #e3e3e31f; } .gsi-material-button:disabled .gsi-material-button-contents { opacity: 38%; } .gsi-material-button:disabled .gsi-material-button-icon { opacity: 38%; } .gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state { background-color: white; opacity: 12%; } .gsi-material-button:not(:disabled):hover { -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); } .gsi-material-button:not(:disabled):hover .gsi-material-button-state { background-color: white; opacity: 8%; }