/* ============================================================================= SORMAS Nepal — Flow 25 application theme ("SORMAS blue") ----------------------------------------------------------------------------- STEP 1 of the redesign (docs/migration + memory: project_flow_attractive_ui_redesign): the TOKEN layer. Overriding Lumo's CSS custom properties here re-skins every one of the ~53 @Route views at once — colour, typography, spacing, radius, shadows. Component-level structure (carded forms, navy sidebar, compact grids) is layered on top by the shared Java scaffolding in later steps; this file owns the palette. No external @import / webfont CDN: the deploy is offline + CSP-constrained, so the typeface is the native system-UI stack and identifiers use the system mono stack. Every value mirrors the approved HTML prototype 1:1 (that prototype is the spec). ============================================================================= */ html { /* ---- brand / primary (SORMAS blue #005A9C — the legacy brand colour) ---- */ --lumo-primary-color: #005A9C; --lumo-primary-color-50pct: rgba(0, 90, 156, 0.5); --lumo-primary-color-10pct: rgba(0, 90, 156, 0.10); --lumo-primary-text-color: #005A9C; --lumo-primary-contrast-color: #ffffff; /* ---- semantic (kept separate from the accent) ---- */ --lumo-success-color: #2E7D4F; --lumo-success-color-50pct: rgba(46, 125, 79, 0.5); --lumo-success-color-10pct: rgba(46, 125, 79, 0.10); --lumo-success-text-color: #256B43; --lumo-error-color: #B4332B; --lumo-error-color-50pct: rgba(180, 51, 43, 0.5); --lumo-error-color-10pct: rgba(180, 51, 43, 0.10); --lumo-error-text-color: #9E2A23; /* SORMAS-specific accents used by the scaffolding (pills, sidebar, chips) */ --sormas-warn: #9A6300; --sormas-warn-bg: #FBF1DE; --sormas-crit: #B4332B; --sormas-crit-bg: #FBEAE8; --sormas-info: #2E6BB0; --sormas-info-bg: #E9F0F9; --sormas-ok: #2E7D4F; --sormas-ok-bg: #E7F2EC; --sormas-muted: #5E6E7A; --sormas-muted-bg: #ECEFF3; --sormas-brand-tint: #E8F1F8; --sormas-brand-strong: #004A82; --sormas-navy: #0A2942; --sormas-navy-hi: #14385A; --sormas-navy-line: #1E466B; --sormas-canvas: #F3F6F9; --sormas-card-max-width: 940px; /* ---- text (cool slate, biased toward the blue accent) ---- */ --lumo-header-text-color: #1A2832; --lumo-body-text-color: #233240; --lumo-secondary-text-color: #5A6B78; --lumo-tertiary-text-color: #8595A1; --lumo-disabled-text-color: #AAB6BF; /* ---- surfaces ---- */ --lumo-base-color: #FFFFFF; /* ---- neutrals: re-bias every derived grey (borders, dividers, hovers) cool ---- */ --lumo-contrast: #233240; --lumo-contrast-5pct: rgba(35, 50, 64, 0.04); --lumo-contrast-10pct: rgba(35, 50, 64, 0.08); --lumo-contrast-20pct: rgba(35, 50, 64, 0.14); --lumo-contrast-30pct: rgba(35, 50, 64, 0.24); --lumo-contrast-40pct: rgba(35, 50, 64, 0.34); --lumo-contrast-50pct: rgba(35, 50, 64, 0.46); --lumo-contrast-60pct: rgba(35, 50, 64, 0.56); --lumo-contrast-70pct: rgba(35, 50, 64, 0.66); --lumo-contrast-80pct: rgba(35, 50, 64, 0.78); --lumo-contrast-90pct: rgba(35, 50, 64, 0.90); /* ---- typography: native system stack (offline / CSP safe), mono for codes ---- */ --lumo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sormas-font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --lumo-font-size-xxs: 0.6875rem; --lumo-font-size-xs: 0.75rem; --lumo-font-size-s: 0.8125rem; --lumo-font-size-m: 0.875rem; /* 14px base — matches the prototype */ --lumo-font-size-l: 1rem; --lumo-font-size-xl: 1.375rem; --lumo-font-size-xxl: 1.75rem; --lumo-font-size-xxxl: 2.25rem; --lumo-line-height-xs: 1.25; --lumo-line-height-s: 1.375; --lumo-line-height-m: 1.55; /* ---- radius: softer, modern (matches prototype 5 / 8 / 12) ---- */ --lumo-border-radius-s: 5px; --lumo-border-radius-m: 8px; --lumo-border-radius-l: 12px; /* ---- shadows: cool-tinted, subtle ---- */ --lumo-box-shadow-xs: 0 1px 2px rgba(16, 40, 64, 0.10); --lumo-box-shadow-s: 0 1px 2px rgba(16, 40, 64, 0.05), 0 2px 8px rgba(16, 40, 64, 0.07); --lumo-box-shadow-m: 0 3px 8px rgba(16, 40, 64, 0.10), 0 1px 3px rgba(16, 40, 64, 0.06); --lumo-box-shadow-l: 0 8px 28px rgba(16, 40, 64, 0.16); --lumo-box-shadow-xl: 0 16px 48px rgba(16, 40, 64, 0.22); } /* =========================================================================== Document-level polish (not component structure — that's the scaffolding's job) =========================================================================== */ html, body { background-color: var(--sormas-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The app-layout host paints over the body; keep the content canvas cool so the white cards/grids the scaffolding builds visibly lift off the background. */ vaadin-app-layout { --vaadin-app-layout-drawer-overlay-background-color: rgba(10, 41, 66, 0.35); background-color: var(--sormas-canvas); } ::selection { background: var(--sormas-brand-tint); } /* Quiet, cool scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--lumo-contrast-30pct) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--lumo-contrast-20pct); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--lumo-contrast-30pct); background-clip: content-box; } /* Visible keyboard focus everywhere (a11y) */ :focus-visible { outline: 2px solid var(--lumo-primary-color); outline-offset: 1px; } /* =========================================================================== STEP 2 — application shell (MainLayout): navy grouped drawer + branded topbar The Java (MainLayout) owns the structure + these class hooks; this owns the look. =========================================================================== */ vaadin-app-layout { --vaadin-app-layout-drawer-width: 252px; } vaadin-app-layout::part(drawer) { background-color: var(--sormas-navy); border-inline-end: none; padding: 0; } vaadin-app-layout::part(navbar) { background-color: var(--lumo-base-color); border-bottom: 1px solid var(--lumo-contrast-10pct); box-shadow: none; min-height: 56px; padding: 0; } /* ---- drawer ---- */ .sormas-drawer { display: flex; flex-direction: column; height: 100%; /* Re-theme the SideNav for a dark ground by re-biasing the tokens it reads, rather than fighting its shadow DOM. */ --lumo-body-text-color: #C7D6E4; --lumo-secondary-text-color: #6E94B6; --lumo-tertiary-text-color: #6E94B6; --lumo-primary-color: #4DA3E8; --lumo-primary-text-color: #ffffff; --lumo-primary-color-10pct: rgba(77, 163, 232, 0.18); --lumo-contrast-5pct: rgba(255, 255, 255, 0.06); --lumo-contrast-10pct: rgba(255, 255, 255, 0.10); /* SideNav icons read the contrast-60/70/90 tokens directly; the global tokens are dark-on-light and are invisible on this dark drawer. */ --lumo-contrast-60pct: rgba(199, 214, 228, 0.65); --lumo-contrast-70pct: rgba(199, 214, 228, 0.75); --lumo-contrast-90pct: rgba(199, 214, 228, 0.92); /* STEP 6 re-skinned editable inputs white with a dark border on `html`. Those tokens are dark-on-white and would make any field dropped in the navy drawer (e.g. a nav search box) render as a bright white slab. Re-bias them back to a translucent dark ground so the drawer search keeps its dark styling. */ --vaadin-input-field-background: rgba(255, 255, 255, 0.06); --vaadin-input-field-border-color: rgba(255, 255, 255, 0.16); } /* The STEP 6 element-level ::part(input-field) fallback (white fill) outranks the token above, so re-paint the part within the drawer scope to match. */ .sormas-drawer vaadin-text-field::part(input-field), .sormas-drawer vaadin-combo-box::part(input-field), .sormas-drawer vaadin-select::part(input-field) { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } .sormas-brand { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--sormas-navy-line); flex: 0 0 auto; } .sormas-brand-mark { height: 38px; width: 46px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; padding: 5px 7px; background: linear-gradient(180deg, #ffffff 0%, #eef4fa 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.6); } .sormas-brand-mark img { height: 100%; width: 100%; object-fit: contain; display: block; } .sormas-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .sormas-brand-name { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.2px; } .sormas-brand-sub { color: #7FA6C8; font-size: 11px; font-weight: 500; } .sormas-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 20px; } .sormas-navgroup { margin-top: 12px; } .sormas-navgroup:first-of-type { margin-top: 4px; } .sormas-navgroup::part(label) { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: #6E94B6; padding: 6px 10px 4px; } .sormas-drawer vaadin-side-nav-item::part(link) { border-radius: 6px; padding-block: 7px; font-weight: 500; } /* ---- topbar ---- */ .sormas-topbar { display: flex; align-items: center; gap: 14px; width: 100%; height: 56px; padding: 0 20px 0 4px; box-sizing: border-box; } .sormas-topbar-title { font-size: var(--lumo-font-size-xl); font-weight: 700; color: var(--lumo-header-text-color); letter-spacing: -0.2px; } .sormas-topbar-spacer { flex: 1 1 auto; } .sormas-env { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lumo-font-size-xs); font-weight: 600; color: var(--sormas-ok); background: var(--sormas-ok-bg); padding: 4px 10px; border-radius: 20px; white-space: nowrap; } .sormas-env > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--sormas-ok); } .sormas-user { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 8px 4px 6px; border-radius: 8px; } .sormas-user:hover { background: var(--lumo-contrast-5pct); } .sormas-avatar { --vaadin-avatar-size: 32px; } .sormas-user-who { display: flex; flex-direction: column; line-height: 1.15; } .sormas-user-name { font-size: var(--lumo-font-size-s); font-weight: 600; color: var(--lumo-body-text-color); } .sormas-user-role { font-size: var(--lumo-font-size-xs); color: var(--lumo-secondary-text-color); } .sormas-user-chevron { color: var(--lumo-tertiary-text-color); font-size: 11px; } @media (max-width: 800px) { .sormas-user-who { display: none; } } /* =========================================================================== STEP 3 — edit forms (AbstractEditForm): airy 2-column layout + section headers. The card chrome itself is supplied by the host (detail tab / dialog), so this only owns spacing + the section "eyebrow" rule. Applies to all 44 forms. =========================================================================== */ .sormas-form { width: 100%; /* Legacy width parity: cap at the legacy 900px (Vaadin 8 AbstractEditForm fixed 900px) and centre. The cap is set per-form as the --sormas-form-max-width custom property by AbstractEditForm.setFormMaxWidth(...); the fallback keeps a naked .sormas-form capped even if a host never sets it. Because it is a max-width the 2-column grid still reflows to 1 column and fills the width below the 520px responsive step. */ max-width: var(--sormas-form-max-width, 900px); margin-inline: auto; --vaadin-form-layout-column-spacing: 24px; --vaadin-form-layout-row-spacing: 14px; } /* Below the single-column breakpoint the width cap would leave dead space in a narrow dialog/pane — let the form fill its host so fields aren't pinched. Mirrors the responsive step that drops the form to 1 column. */ @media (max-width: 520px) { .sormas-form { max-width: none; } } /* Section heading rendered as a full-width eyebrow with a trailing hairline rule. */ h4.sormas-form-section { margin: 6px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--lumo-primary-color); display: flex; align-items: center; gap: 10px; line-height: 1.2; } h4.sormas-form-section::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--lumo-contrast-10pct); } h4.sormas-form-section--subsequent { margin-top: 22px; } /* Reusable form CARD (domain agents: wrap a standalone AbstractEditForm host — a create dialog, a plain routed edit page not inside AbstractDetailLayout — in .sormas-form-card to get the same white/shadow/rounded chrome the detail-main pane gives an embedded form). The form inside keeps its own 900px cap + centring, so the card fills its host and the fields stay a comfortable measure. Inside AbstractDetailLayout you do NOT need this — .sormas-detail-main already supplies the card. */ .sormas-form-card { background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-s); padding: var(--lumo-space-l); } /* =========================================================================== STEP 4 — list/grid screens (AbstractGridView): page header + carded compact grid. =========================================================================== */ .sormas-grid-view { padding: var(--lumo-space-m) var(--lumo-space-l); gap: var(--lumo-space-m); background: var(--sormas-canvas); /* flex children default to min-width auto — without this a wide grid pushes the page into horizontal scroll instead of scrolling inside its own card. */ min-width: 0; } /* Slim action toolbar at the top of every list view (no in-view page title — the topbar shows it). .sormas-page-header = AbstractGridView/AbstractAutoGridView; .sormas-view-toolbar = the hand-composed directories (Cases, Events, Samples, …). One shared look. */ .sormas-page-header, .sormas-view-toolbar { width: 100%; padding: 0; margin: 0; align-items: center; gap: var(--lumo-space-s); flex-wrap: wrap; min-height: 0; } .sormas-page-header:empty, .sormas-view-toolbar:empty { display: none; } .sormas-page-header vaadin-button, .sormas-view-toolbar vaadin-button { margin: 0; } /* Float the grid on a white card so it lifts off the cool canvas. */ .sormas-grid-view vaadin-grid.sormas-grid { border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-s); background: var(--lumo-base-color); overflow: hidden; --lumo-font-size-m: var(--lumo-font-size-s); } /* Quiet, uppercase column headers; hairline rows; brand-tinted hover/selection. */ .sormas-grid-view vaadin-grid.sormas-grid::part(header-cell) { background: #F7F9FB; text-transform: uppercase; font-size: var(--lumo-font-size-xxs); font-weight: 700; letter-spacing: 0.4px; color: var(--lumo-secondary-text-color); } .sormas-grid-view vaadin-grid.sormas-grid::part(row):hover > [part~="cell"] { background: var(--sormas-brand-tint); } /* Wide directories scroll horizontally INSIDE the card, never widening the page. */ vaadin-grid.sormas-grid { min-width: 0; } /* ---- status chip row (Events/Samples/Contacts/… createStatusFilterBar) + inline bulk-edit bar ---- */ .sormas-statusbar { width: 100%; align-items: center; gap: var(--lumo-space-xs); flex-wrap: wrap; min-height: 0; } .sormas-statusbar > vaadin-button { height: var(--lumo-size-s); padding: 0 var(--lumo-space-m); margin: 0; border-radius: 999px; font-size: var(--lumo-font-size-s); flex: 0 0 auto; } .sormas-statusbar vaadin-combo-box { width: 13em; --lumo-size-m: var(--lumo-size-s); } .sormas-bulkbar { min-height: 0; } /* Embedded in a status row, the bulk toggle sits at the far right. */ .sormas-statusbar > .sormas-bulkbar, .sormas-page-header > .sormas-bulkbar, .sormas-view-toolbar > .sormas-bulkbar { margin-left: auto; } /* =========================================================================== Laptop density: 1024–1440px viewports tighten the directory chrome only — forms/dialogs keep the approved sizing (rules stay scoped to list-surface classes). =========================================================================== */ @media (max-width: 1440px) { .sormas-grid-view { padding: var(--lumo-space-s) var(--lumo-space-m); gap: var(--lumo-space-s); } .sormas-filterbar { padding: var(--lumo-space-xs) var(--lumo-space-s); } .sormas-filterbar-fields, .sormas-filterbar-more-fields { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .sormas-grid-view vaadin-grid.sormas-grid { --lumo-font-size-m: var(--lumo-font-size-xs); } .sormas-page-header vaadin-button, .sormas-view-toolbar vaadin-button { height: var(--lumo-size-s); font-size: var(--lumo-font-size-s); } } @media (max-width: 1280px) { .sormas-statusbar vaadin-combo-box { width: 11em; } .sormas-page-header, .sormas-view-toolbar { row-gap: var(--lumo-space-xs); } } /* =========================================================================== STEP 5 — detail shell (AbstractDetailLayout) + filter bar (AbstractFilterBar). This is where the form CARD lands: the detail "main" pane is the white card the embedded edit form sits in (deferred from the form step so nested forms stay unboxed). =========================================================================== */ .sormas-detail-view { padding: 0; background: var(--sormas-canvas); gap: 0; /* Detail pages are FULL-SCREEN (legacy parity): uncap the embedded edit form and the action bars, which read this token (forms via the .sormas-form rule). Forms in dialogs/standalone hosts keep the 900px fallback. */ --sormas-form-max-width: none; /* Approximate height of the fixed top zone (top bar + tab strip); used as the side column's max-height offset. */ --sormas-detail-sticky-h: 96px; /* App-shell layout: the view fills the app-layout content area and does NOT scroll itself. The top zone is a fixed (non-scrolling) region and only the body scrolls beneath it, so the header + tabs stay pinned for the whole page no matter how long the form is. (setSizeFull gives the view a definite height for the flex:1 body to resolve.) */ display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* Fixed top zone: the one-row action bar + the tab strip. Sits ABOVE the scrolling body (not inside it), so it never scrolls away. flex:0 0 auto keeps it at its natural height; the body below takes the rest. */ .sormas-detail-sticky { flex: 0 0 auto; /* z-index: 3; */ /* Span the full row: VerticalLayout does not stretch its children, so without this the zone shrinks to its content width and the action cluster stops mid-row instead of reaching the right edge. */ width: 100%; box-sizing: border-box; background: var(--sormas-canvas); padding: var(--lumo-space-xs) var(--lumo-space-l) 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } /* The single action row: [back link + entity title] ......... [Send email / Delete / Archive / Discard / Save]. */ .sormas-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--lumo-space-m); min-height: 32px; } /* Left group: back nav inline with the title block. */ .sormas-detail-title { display: flex; align-items: center; gap: var(--lumo-space-s); min-width: 0; } .sormas-detail-backnav { flex: 0 0 auto; } /* Title = name + status on ONE line (baseline-aligned), so the header stays a single compact row. */ .sormas-detail-title-block { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: var(--lumo-space-s); line-height: 1.15; min-width: 0; } .sormas-detail-title-name { font-weight: 700; font-size: var(--lumo-font-size-s); color: var(--lumo-header-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sormas-detail-title-sub { font-size: var(--lumo-font-size-xs); color: var(--lumo-secondary-text-color); } /* Right group: compact action-button cluster, kept on one line. */ .sormas-detail-actions { display: flex; align-items: center; flex: 0 0 auto; } .sormas-detail-actionbar { gap: var(--lumo-space-xs); flex-wrap: nowrap; } .sormas-detail-actionbar vaadin-button { margin: 0; } .sormas-detail-tabs { border-bottom: 1px solid var(--lumo-contrast-10pct); margin: 0; } /* Detail body row: main pane + side column, wrapping on narrow screens. AbstractDetailLayout sets the flex bases inline (main flex:1 1 0; side flex:1 1 clamp(300px,33%,460px)) reproducing the legacy ~8/12 : ~4/12 split; the wrap + the media rule below own the stacking so a host never re-styles. */ .sormas-detail-body { display: flex; flex-wrap: wrap; gap: var(--lumo-space-m); width: 100%; box-sizing: border-box; padding: var(--lumo-space-m) var(--lumo-space-l); /* The single scrolling region of the detail view: takes all height below the fixed top zone and scrolls. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Carded main content — the embedded edit form / child grid floats on white. The form inside is uncapped (--sormas-form-max-width: none on the detail view), so it fills the whole pane like the legacy detail pages. */ .sormas-detail-main { background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-s); padding: var(--lumo-space-l); } /* Right column: stack the related-entity side cards with breathing room, and STICK it so the cards stay in view while the main form scrolls inside the body. The body is the scroll container now, so the column sticks to top:0 of the body; align-self:flex-start caps it to its own content height (not the taller main pane) so position:sticky has room to work, and max-height + overflow let a tall card stack scroll internally rather than run off-screen. */ .sormas-detail-side { display: flex; flex-direction: column; gap: var(--lumo-space-m); position: sticky; top: 0; align-self: flex-start; max-height: calc(100vh - var(--sormas-detail-sticky-h) - var(--lumo-space-xl)); overflow-y: auto; } /* Narrow screens: force the main + side to full width so the side wraps BELOW the main (the row can no longer fit both flex bases side-by-side), and drop the sticky behaviour (a full-width stacked side should scroll with the page). ~900px mirrors the legacy point where the 4/12 side dropped under. */ @media (max-width: 900px) { .sormas-detail-main, .sormas-detail-side { flex: 1 1 100% !important; } .sormas-detail-side { position: static; max-height: none; overflow: visible; } } /* ---- reusable side-panel card chrome (domain agents: wrap each related-entity panel in .sormas-side-card) ---- A white card matching the main pane, with an optional .sormas-side-card-title header row, so a domain never has to re-derive the detail-side look. Drop AbstractListSideComponents (samples/tasks/documents/…) inside it. */ .sormas-side-card { background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-s); overflow: hidden; } .sormas-side-card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--lumo-space-s); padding: var(--lumo-space-s) var(--lumo-space-m); border-bottom: 1px solid var(--lumo-contrast-10pct); font-size: var(--lumo-font-size-xs); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--lumo-secondary-text-color); } .sormas-side-card-body { padding: var(--lumo-space-m); } /* The detail header (entity title block above the tabs). */ .sormas-detail-view > span:first-child { font-weight: 700; color: var(--lumo-header-text-color); } /* ---- filter bar: a carded, laptop-dense band over the grid ---- Structure (AbstractFilterBar): fields row + collapsible more-fields row + one footer line (show-more toggle left, Apply/Reset right). Fields lay out on a responsive CSS grid — equal-width tracks that reflow with the viewport, so no filter field carries a fixed pixel width anymore. */ .sormas-filterbar { /* Full width of the list-view column: the host VerticalLayout does NOT stretch its children, so without this the card shrinks to a single grid track and the fields stack in one column. */ width: 100%; box-sizing: border-box; background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-s); padding: var(--lumo-space-s) var(--lumo-space-m); display: flex; flex-direction: column; gap: var(--lumo-space-xs); } .sormas-filterbar-fields, .sormas-filterbar-more-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--lumo-space-xs) var(--lumo-space-s); align-items: end; width: 100%; } /* Multi-field composites (epi-week/date ranges, birthdate range) span the whole row and wrap inside it. */ .sormas-filterbar-fields > .sormas-filter-span-full, .sormas-filterbar-more-fields > .sormas-filter-span-full { grid-column: 1 / -1; flex-wrap: wrap; } /* Tight field labels: the ~30 combo labels are the main vertical cost of the bar. */ .sormas-filterbar vaadin-combo-box::part(label), .sormas-filterbar vaadin-text-field::part(label), .sormas-filterbar vaadin-date-picker::part(label), .sormas-filterbar vaadin-select::part(label), .sormas-filterbar vaadin-time-picker::part(label) { font-size: var(--lumo-font-size-xxs); line-height: 1.2; padding-bottom: 0; } .sormas-filterbar-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--lumo-space-s); flex-wrap: wrap; } /* Bars with no "more filters" toggle: keep Apply/Reset pinned right. */ .sormas-filterbar-actions { margin-left: auto; } /* ---- NullableOptionGroup: legacy SORMAS segmented YES / NO / UNKNOWN button group ---- The legacy option group is not shown as radio dots but as a row of connected, bordered buttons with the selected one highlighted. Lay the options out in a row (their "group-field" shadow part defaults to a vertical column), hide each button's radio circle, and style the buttons as a connected segmented control. Groups with many options (e.g. case outcome, register-as) must WRAP into multiple lines instead of overflowing the form column: the group is capped at 100% width and the buttons flex-wrap. To stay wrap-safe, every button carries its own full 1px border and adjacent borders are collapsed with -1px left/top margins (a checked button is raised via z-index so its colored border wins over its neighbours' grey ones). */ vaadin-radio-group.sormas-option-group { max-width: 100%; min-width: 0; } vaadin-radio-group.sormas-option-group::part(group-field) { flex-direction: row; flex-wrap: wrap; gap: 0; /* absorb the buttons' -1px collapse margins so the group aligns flush */ padding-left: 1px; padding-top: 1px; } vaadin-radio-group.sormas-option-group vaadin-radio-button::part(radio) { display: none; } vaadin-radio-group.sormas-option-group vaadin-radio-button::part(label) { margin: 0; padding: 0; } vaadin-radio-group.sormas-option-group vaadin-radio-button { margin: -1px 0 0 -1px; padding: 2px 12px; border: 1px solid var(--lumo-contrast-30pct); cursor: pointer; color: var(--lumo-primary-text-color); font-size: var(--lumo-font-size-s); line-height: var(--lumo-line-height-m); white-space: nowrap; user-select: none; -webkit-user-select: none; } vaadin-radio-group.sormas-option-group vaadin-radio-button:first-of-type { border-top-left-radius: var(--lumo-border-radius-s); border-bottom-left-radius: var(--lumo-border-radius-s); } vaadin-radio-group.sormas-option-group vaadin-radio-button:last-of-type { border-top-right-radius: var(--lumo-border-radius-s); border-bottom-right-radius: var(--lumo-border-radius-s); } vaadin-radio-group.sormas-option-group vaadin-radio-button[checked] { background-color: var(--lumo-primary-color); color: var(--lumo-primary-contrast-color); border-color: var(--lumo-primary-color); position: relative; z-index: 1; } /* ---- Symptom matrix row: caption on the left, the segmented button group on the right ---- */ .symptom-row { display: flex; align-items: center; justify-content: space-between; gap: var(--lumo-space-m); padding: 2px 0; } .symptom-row-caption { flex: 1 1 auto; color: var(--lumo-body-text-color); } /* =========================================================================== STEP 6 — legacy field parity (FLOW_LAYOUT_PARITY_PLAN Shot 1B). Legacy Vaadin 8 inputs are white with a visible 1px border, carry a red "*" required marker, and uppercase their captions. Lumo's defaults (grey fill, dot indicator, sentence-case labels) read as "disabled" next to them. =========================================================================== */ /* Inputs: white fill + visible hairline border. Set via the input-field feature props on html so every field component inherits; do NOT touch --lumo-contrast-10pct itself (grids/hairlines depend on it). */ html { --vaadin-input-field-background: var(--lumo-base-color); --vaadin-input-field-border-width: 1px; --vaadin-input-field-border-color: var(--lumo-contrast-30pct); /* Required marker: legacy red asterisk instead of Lumo's faint dot. */ --lumo-required-field-indicator: "*"; --lumo-required-field-indicator-color: var(--lumo-error-color); } /* Fallback for components/versions that ignore the feature props: paint the input-field shadow part directly. Same white/1px-border look. */ vaadin-text-field::part(input-field), vaadin-text-area::part(input-field), vaadin-number-field::part(input-field), vaadin-integer-field::part(input-field), vaadin-big-decimal-field::part(input-field), vaadin-email-field::part(input-field), vaadin-password-field::part(input-field), vaadin-date-picker::part(input-field), vaadin-time-picker::part(input-field), vaadin-date-time-picker > [slot] ::part(input-field), vaadin-combo-box::part(input-field), vaadin-multi-select-combo-box::part(input-field), vaadin-select::part(input-field) { background: var(--lumo-base-color); box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct); } /* Readonly / disabled must stay visibly distinct from the white editable field (otherwise a locked form reads as "everything is editable"). Legacy SORMAS greyed these out: keep a light grey fill (--lumo-contrast-5pct) and a lighter, dashed border. Re-bias the feature tokens (primary mechanism) AND paint the shadow part (fallback) so both rendering paths agree. */ vaadin-text-field[readonly], vaadin-text-field[disabled], vaadin-text-area[readonly], vaadin-text-area[disabled], vaadin-number-field[readonly], vaadin-number-field[disabled], vaadin-integer-field[readonly], vaadin-integer-field[disabled], vaadin-big-decimal-field[readonly], vaadin-big-decimal-field[disabled], vaadin-email-field[readonly], vaadin-email-field[disabled], vaadin-password-field[readonly], vaadin-password-field[disabled], vaadin-date-picker[readonly], vaadin-date-picker[disabled], vaadin-time-picker[readonly], vaadin-time-picker[disabled], vaadin-combo-box[readonly], vaadin-combo-box[disabled], vaadin-multi-select-combo-box[readonly], vaadin-multi-select-combo-box[disabled], vaadin-select[readonly], vaadin-select[disabled] { --vaadin-input-field-background: var(--lumo-contrast-5pct); --vaadin-input-field-border-color: var(--lumo-contrast-20pct); } vaadin-text-field[readonly]::part(input-field), vaadin-text-field[disabled]::part(input-field), vaadin-text-area[readonly]::part(input-field), vaadin-text-area[disabled]::part(input-field), vaadin-number-field[readonly]::part(input-field), vaadin-number-field[disabled]::part(input-field), vaadin-integer-field[readonly]::part(input-field), vaadin-integer-field[disabled]::part(input-field), vaadin-big-decimal-field[readonly]::part(input-field), vaadin-big-decimal-field[disabled]::part(input-field), vaadin-email-field[readonly]::part(input-field), vaadin-email-field[disabled]::part(input-field), vaadin-password-field[readonly]::part(input-field), vaadin-password-field[disabled]::part(input-field), vaadin-date-picker[readonly]::part(input-field), vaadin-date-picker[disabled]::part(input-field), vaadin-time-picker[readonly]::part(input-field), vaadin-time-picker[disabled]::part(input-field), vaadin-combo-box[readonly]::part(input-field), vaadin-combo-box[disabled]::part(input-field), vaadin-multi-select-combo-box[readonly]::part(input-field), vaadin-multi-select-combo-box[disabled]::part(input-field), vaadin-select[readonly]::part(input-field), vaadin-select[disabled]::part(input-field) { background: var(--lumo-contrast-5pct); box-shadow: inset 0 0 0 1px var(--lumo-contrast-20pct); /* Solid hairline (not dashed): the dashed border read as a broken "___" underline. Distinctness now comes from the grey fill + muted text, not a dashy border. */ border-style: solid; } /* Field focus: a ROUNDED ring that follows the input's border-radius. The global :focus-visible rule draws a square-cornered outline around the (non-rounded) host element, which reads as a rectangle over the rounded field. Draw the ring as a box-shadow on the input-field shadow part instead (it inherits the field's radius), and suppress the square host outline for these components. */ vaadin-text-field[focus-ring]::part(input-field), vaadin-text-field:focus-within::part(input-field), vaadin-text-area[focus-ring]::part(input-field), vaadin-text-area:focus-within::part(input-field), vaadin-number-field[focus-ring]::part(input-field), vaadin-number-field:focus-within::part(input-field), vaadin-integer-field[focus-ring]::part(input-field), vaadin-integer-field:focus-within::part(input-field), vaadin-big-decimal-field[focus-ring]::part(input-field), vaadin-big-decimal-field:focus-within::part(input-field), vaadin-email-field[focus-ring]::part(input-field), vaadin-email-field:focus-within::part(input-field), vaadin-password-field[focus-ring]::part(input-field), vaadin-password-field:focus-within::part(input-field), vaadin-date-picker[focus-ring]::part(input-field), vaadin-date-picker:focus-within::part(input-field), vaadin-time-picker[focus-ring]::part(input-field), vaadin-time-picker:focus-within::part(input-field), vaadin-combo-box[focus-ring]::part(input-field), vaadin-combo-box:focus-within::part(input-field), vaadin-multi-select-combo-box[focus-ring]::part(input-field), vaadin-multi-select-combo-box:focus-within::part(input-field), vaadin-select[focus-ring]::part(input-field), vaadin-select:focus-within::part(input-field) { box-shadow: inset 0 0 0 1px var(--lumo-primary-color), 0 0 0 2px var(--lumo-primary-color-50pct); } /* Replace the global rectangular outline on the field hosts with the rounded ring above. */ vaadin-text-field:focus-visible, vaadin-text-field:focus-within, vaadin-text-area:focus-visible, vaadin-text-area:focus-within, vaadin-number-field:focus-visible, vaadin-number-field:focus-within, vaadin-integer-field:focus-visible, vaadin-integer-field:focus-within, vaadin-big-decimal-field:focus-visible, vaadin-big-decimal-field:focus-within, vaadin-email-field:focus-visible, vaadin-email-field:focus-within, vaadin-password-field:focus-visible, vaadin-password-field:focus-within, vaadin-date-picker:focus-visible, vaadin-date-picker:focus-within, vaadin-time-picker:focus-visible, vaadin-time-picker:focus-within, vaadin-combo-box:focus-visible, vaadin-combo-box:focus-within, vaadin-multi-select-combo-box:focus-visible, vaadin-multi-select-combo-box:focus-within, vaadin-select:focus-visible, vaadin-select:focus-within { outline: none; } /* Required-indicator fallback: red "*" on the same field set + group fields. MUST be gated on [required] — matching Lumo's own gating of --lumo-required-field-indicator. Without the attribute qualifier this paints the asterisk on EVERY field, making all fields look required (legacy showed the marker only on fields a form actually flagged via setRequired). */ vaadin-text-field[required]::part(required-indicator)::after, vaadin-text-area[required]::part(required-indicator)::after, vaadin-number-field[required]::part(required-indicator)::after, vaadin-integer-field[required]::part(required-indicator)::after, vaadin-email-field[required]::part(required-indicator)::after, vaadin-password-field[required]::part(required-indicator)::after, vaadin-date-picker[required]::part(required-indicator)::after, vaadin-time-picker[required]::part(required-indicator)::after, vaadin-combo-box[required]::part(required-indicator)::after, vaadin-multi-select-combo-box[required]::part(required-indicator)::after, vaadin-select[required]::part(required-indicator)::after, vaadin-radio-group[required]::part(required-indicator)::after, vaadin-checkbox-group[required]::part(required-indicator)::after, vaadin-custom-field[required]::part(required-indicator)::after { content: "*"; color: var(--lumo-error-color); } /* Captions: legacy uppercase eyebrow labels. Grouped selector over the field components incl. radio/checkbox GROUPS; single vaadin-checkbox is excluded on purpose (its label is the value text, e.g. "Yes", not a caption). */ vaadin-text-field::part(label), vaadin-text-area::part(label), vaadin-number-field::part(label), vaadin-integer-field::part(label), vaadin-big-decimal-field::part(label), vaadin-email-field::part(label), vaadin-password-field::part(label), vaadin-date-picker::part(label), vaadin-time-picker::part(label), vaadin-date-time-picker::part(label), vaadin-combo-box::part(label), vaadin-multi-select-combo-box::part(label), vaadin-select::part(label), vaadin-radio-group::part(label), vaadin-checkbox-group::part(label), vaadin-custom-field::part(label) { text-transform: uppercase; font-size: var(--lumo-font-size-xs); font-weight: 600; letter-spacing: 0.3px; color: var(--lumo-secondary-text-color); } /* =========================================================================== Grouped checkbox field (GroupedCheckBoxGroupField) — the user-role rights editor. Rights grouped by UserRightGroup as titled cards, each a responsive multi-column grid of checkboxes. Restores the legacy CheckboxSet grouping. =========================================================================== */ .sormas-grouped-checkboxes { display: flex; flex-direction: column; gap: var(--lumo-space-m); width: 100%; } .sormas-rights-group { border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-m); background: var(--lumo-contrast-5pct); padding: var(--lumo-space-s) var(--lumo-space-m) var(--lumo-space-m); } .sormas-rights-group-header { border-bottom: 1px solid var(--lumo-contrast-10pct); margin-bottom: var(--lumo-space-s); padding-bottom: var(--lumo-space-xs); min-height: unset; } .sormas-rights-group-title { text-transform: uppercase; font-size: var(--lumo-font-size-xs); font-weight: 700; letter-spacing: 0.4px; color: var(--lumo-primary-text-color); } .sormas-rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--lumo-space-xs) var(--lumo-space-l); } /* Compact the checkboxes a touch so a dense rights matrix stays scannable. */ .sormas-rights-grid vaadin-checkbox { --lumo-font-size-m: var(--lumo-font-size-s); } /* ============================================================================= DASHBOARD THEME — ported 1:1 from the legacy Vaadin-8 SORMAS theme (sormas-ui/.../VAADIN/themes/sormas: global.scss, components/{label,countelement, svg}.scss, views/{dashboard,disease}.scss). The Flow dashboard Java applies these legacy class names verbatim (addClassName), but the classes had never been ported into this Lumo theme — so the surveillance dashboard rendered as unstyled, run-together text. Colours use the legacy $s-* palette values. ============================================================================= */ /* ---- semantic text colours (legacy components/label.scss .primary/.critical/…) ---- */ .primary { color: #005A9C; font-weight: 600; } .secondary { color: #6591C4; } .critical { color: rgb(200, 0, 0); font-weight: 600; } .important { color: rgb(190, 105, 0); font-weight: 600; } .warning { color: rgb(190, 105, 0); font-weight: 600; } .relevant { color: rgb(200, 170, 0); } .neutral { color: #00BFFF; } .positive { color: #32CD32; } .minor { color: #808080; } /* ---- count element: a coloured underline under the count (legacy countelement.scss) ---- */ .count-element { color: var(--lumo-body-text-color); text-align: center; } .count-element > :first-child { border-bottom: 4px solid transparent; } .count-element.important > :first-child { border-color: rgb(190, 105, 0); } .count-element.critical > :first-child { border-color: rgb(200, 0, 0); } .count-element.critical-transparent > :first-child { border-color: rgba(200, 0, 0, 0.7); } .count-element.critical-more-transparent > :first-child { border-color: rgba(200, 0, 0, 0.5); } .count-element.relevant > :first-child { border-color: rgb(200, 170, 0); } .count-element.neutral > :first-child { border-color: #00BFFF; } .count-element.positive > :first-child { border-color: #32CD32; } .count-element.minor > :first-child { border-color: #808080; } .count-element.primary > :first-child { border-color: #005A9C; } /* ---- label typography (legacy components/label.scss, Flow-renamed with a label- prefix) ---- */ .label-white { color: #FFF; } .label-bold, .bold { font-weight: bold; } .label-primary { color: #005A9C; font-weight: 600; } .label-uppercase, .uppercase { text-transform: uppercase; } .label-large, .large { font-size: 1.25em; } .label-xlarge, .xlarge { font-size: 1.5em; } .label-xxlarge, .xxlarge { font-size: 2em; } .label-xxxlarge, .xxxlarge { font-size: 2.5em; } .label-caption-truncated, .caption-truncated { max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .bottom-line { border-bottom: 1px solid #CDD8EC; } .rounded-corners-slim { border-radius: 4px; padding: 4px; } .background-focus-light { background: #EDF2FD; } /* ---- heading colour classes (legacy global.scss h1-h4/.h1-.h4) ---- */ .h1 { color: #005A9C; font-weight: 600; } .h2, .h3, .h4 { color: #6591C4; font-weight: 600; } /* ---- alignment ---- */ .align-center { text-align: center; } .align-right { text-align: right; } /* ---- vertical / horizontal spacing utilities (legacy global.scss) ---- */ .vspace-0 { margin-bottom: 64px; } .vspace-1 { margin-bottom: 36px; } .vspace-2 { margin-bottom: 24px; } .vspace-3 { margin-bottom: 16px; } .vspace-4 { margin-bottom: 6px; } .vspace-5 { margin-bottom: 2px; } .vspace-none { margin-bottom: 0 !important; } .vspace-top-0 { margin-top: 64px; } .vspace-top-1 { margin-top: 36px; } .vspace-top-2 { margin-top: 24px; } .vspace-top-3 { margin-top: 16px; } .vspace-top-4 { margin-top: 6px; } .vspace-top-5 { margin-top: 2px; } .vspace-top-6 { margin-top: -8px; } .vspace-top-none { margin-top: 0 !important; } .hspace-left-0 { margin-left: 64px; } .hspace-left-1 { margin-left: 36px; } .hspace-left-2 { margin-left: 20px; } .hspace-left-3 { margin-left: 10px; } .hspace-left-4 { margin-left: 6px; } .hspace-left-5 { margin-left: 2px; } .hspace-left-none { margin-left: 0 !important; } .hspace-right-0 { margin-right: 64px; } .hspace-right-1 { margin-right: 36px; } .hspace-right-2 { margin-right: 20px; } .hspace-right-3 { margin-right: 10px; } .hspace-right-4 { margin-right: 6px; } .hspace-right-5 { margin-right: 2px; } .hspace-right-none { margin-right: 0 !important; } /* ---- dashboard structural (legacy views/dashboard.scss) ---- */ .dashboard-screen { overflow-x: hidden; } .heading-title-label { margin-top: 12px; } .statistics-info-label { margin-top: 10px; color: #6591C4; } .follow-up-status-info-button { margin-top: 10px; } .background-highlight { background-color: #EDF2FD; } .background-critical { background-color: #DE5555; } .highlighted-statistics-component { background-color: #EDF2FD; padding-top: 16px; } /* ---- svg colourisation (legacy components/svg.scss) ---- */ .svg-circle { fill: none; stroke-width: 3; } .svg-fill-primary { fill: #005A9C; } .svg-fill-critical { fill: rgb(200, 0, 0); } .svg-fill-important { fill: rgb(190, 105, 0); } .svg-fill-positive { fill: #32CD32; } .svg-fill-minor { fill: #808080; } .svg-fill-neutral { fill: #00BFFF; } .svg-fill-background { fill: #E6E6E6; } .svg-stroke-primary { stroke: #005A9C; } .svg-stroke-critical { stroke: rgb(200, 0, 0); } .svg-stroke-important { stroke: rgb(190, 105, 0); } .svg-stroke-positive { stroke: #32CD32; } .svg-stroke-minor { stroke: #808080; } .svg-stroke-background { stroke: #E6E6E6; } /* ---- make the disease selector wrap into rows instead of horizontal-scrolling (legacy rendered the disease keys as a wrapping flow of buttons) ---- */ vaadin-tabs.disease-carousel-tabs { max-width: 100%; } vaadin-tabs.disease-carousel-tabs::part(tabs) { flex-wrap: wrap; } vaadin-tabs.disease-carousel-tabs [part="back-button"], vaadin-tabs.disease-carousel-tabs [part="forward-button"] { display: none; } /* ---- per-disease tile colours (legacy views/disease.scss) ---- */ .background-disease-afp { background-color: #00E0A1; fill: #00E0A1; } .background-disease-afp.background-darker { background-color: #00B582; fill: #00B582; } .background-disease-cholera { background-color: #FEBA01; fill: #FEBA01; } .background-disease-cholera.background-darker { background-color: #E5A701; fill: #E5A701; } .background-disease-csm { background-color: #59BDEF; fill: #59BDEF; } .background-disease-csm.background-darker { background-color: #50AAD7; fill: #50AAD7; } .background-disease-dengue { background-color: #44BEC7; fill: #44BEC7; } .background-disease-dengue.background-darker { background-color: #3DABB3; fill: #3DABB3; } .background-disease-evd { background-color: #8C45AD; fill: #8C45AD; } .background-disease-evd.background-darker { background-color: #7E3E9C; fill: #7E3E9C; } .background-disease-guinea-worm { background-color: #3FD100; fill: #3FD100; } .background-disease-guinea-worm.background-darker { background-color: #38BA00; fill: #38BA00; } .background-disease-lassa { background-color: #EA579B; fill: #EA579B; } .background-disease-lassa.background-darker { background-color: #D34E8B; fill: #D34E8B; } .background-disease-measles { background-color: #66AD45; fill: #66AD45; } .background-disease-measles.background-darker { background-color: #5C9C3E; fill: #5C9C3E; } .background-disease-monkeypox { background-color: #FF9299; fill: #FF9299; } .background-disease-monkeypox.background-darker { background-color: #E5838A; fill: #E5838A; } .background-disease-new-flu { background-color: #4550AC; fill: #4550AC; } .background-disease-new-flu.background-darker { background-color: #3E489B; fill: #3E489B; } .background-disease-plague { background-color: #8270CC; fill: #8270CC; } .background-disease-plague.background-darker { background-color: #7565B8; fill: #7565B8; } .background-disease-polio { background-color: #A6E300; fill: #A6E300; } .background-disease-polio.background-darker { background-color: #96CC00; fill: #96CC00; } .background-disease-unspecified-vhf { background-color: #448282; fill: #448282; } .background-disease-unspecified-vhf.background-darker { background-color: #2F4F4F; fill: #2F4F4F; } .background-disease-west-nile-fever { background-color: #87CEFA; fill: #87CEFA; } .background-disease-west-nile-fever.background-darker { background-color: #5b94b7; fill: #5b94b7; } .background-disease-yellow-fever { background-color: #E2D320; fill: #E2D320; } .background-disease-yellow-fever.background-darker { background-color: #CBBE1D; fill: #CBBE1D; } .background-disease-congenital-rubella { background-color: #d4d4f7; fill: #d4d4f7; } .background-disease-congenital-rubella.background-darker { background-color: #aaaaee; fill: #aaaaee; } .background-disease-other { background-color: #888; fill: #888; } .background-disease-other.background-darker { background-color: #6D6D6D; fill: #6D6D6D; } .background-disease-undefined { background-color: #cccccc; fill: #cccccc; } .background-disease-undefined.background-darker { background-color: #d9d9d9; fill: #d9d9d9; } .background-disease-rabies { background-color: #ef5a6c; fill: #ef5a6c; } .background-disease-rabies.background-darker { background-color: #e04a5b; fill: #e04a5b; } .background-disease-anthrax { background-color: #5a95f4; fill: #5a95f4; } .background-disease-anthrax.background-darker { background-color: #3b7fed; fill: #3b7fed; } .background-disease-coronavirus { background-color: #bf8678; fill: #bf8678; } .background-disease-coronavirus.background-darker { background-color: #b0796b; fill: #b0796b; } .background-disease-pneumonia { background-color: #b0c4de; fill: #b0c4de; } .background-disease-pneumonia.background-darker { background-color: #7b8fa3; fill: #7b8fa3; } .background-disease-malaria { background-color: #7ed957; fill: #7ed957; } .background-disease-malaria.background-darker { background-color: #5fa23f; fill: #5fa23f; } .background-disease-typhoid-fever { background-color: #f7b267; fill: #f7b267; } .background-disease-typhoid-fever.background-darker { background-color: #d9983a; fill: #d9983a; } .background-disease-acute-viral-hepatitis { background-color: #f9e79f; fill: #f9e79f; } .background-disease-acute-viral-hepatitis.background-darker { background-color: #f7ca18; fill: #f7ca18; } .background-disease-non-neonatal-tetanus { background-color: #b2bec3; fill: #b2bec3; } .background-disease-non-neonatal-tetanus.background-darker { background-color: #636e72; fill: #636e72; } .background-disease-hiv { background-color: #e17055; fill: #e17055; } .background-disease-hiv.background-darker { background-color: #b03a2e; fill: #b03a2e; } .background-disease-schistosomiasis { background-color: #00b894; fill: #00b894; } .background-disease-schistosomiasis.background-darker { background-color: #00897b; fill: #00897b; } .background-disease-soil-transmitted-helminths { background-color: #a0522d; fill: #a0522d; } .background-disease-soil-transmitted-helminths.background-darker { background-color: #6e2c00; fill: #6e2c00; } .background-disease-trypanosomiasis { background-color: #6c3483; fill: #6c3483; } .background-disease-trypanosomiasis.background-darker { background-color: #512e5f; fill: #512e5f; } .background-disease-diarrhea-dehydration { background-color: #85c1e9; fill: #85c1e9; } .background-disease-diarrhea-dehydration.background-darker { background-color: #2874a6; fill: #2874a6; } .background-disease-diarrhea-blood { background-color: #c0392b; fill: #c0392b; } .background-disease-diarrhea-blood.background-darker { background-color: #922b21; fill: #922b21; } .background-disease-snake-bite { background-color: #a3a847; fill: #a3a847; } .background-disease-snake-bite.background-darker { background-color: #7d8334; fill: #7d8334; } .background-disease-rubella { background-color: #f1948a; fill: #f1948a; } .background-disease-rubella.background-darker { background-color: #c0392b; fill: #c0392b; } .background-disease-tuberculosis { background-color: #b9770e; fill: #b9770e; } .background-disease-tuberculosis.background-darker { background-color: #7e5109; fill: #7e5109; } .background-disease-leprosy { background-color: #f5cba7; fill: #f5cba7; } .background-disease-leprosy.background-darker { background-color: #ca6f1e; fill: #ca6f1e; } .background-disease-lymphatic-filariasis { background-color: #48c9b0; fill: #48c9b0; } .background-disease-lymphatic-filariasis.background-darker { background-color: #148f77; fill: #148f77; } .background-disease-buruli-ulcer { background-color: #f7cac9; fill: #f7cac9; } .background-disease-buruli-ulcer.background-darker { background-color: #e9967a; fill: #e9967a; } .background-disease-pertussis { background-color: #f8c471; fill: #f8c471; } .background-disease-pertussis.background-darker { background-color: #b9770e; fill: #b9770e; } .background-disease-neonatal-tetanus { background-color: #f9e79f; fill: #f9e79f; } .background-disease-neonatal-tetanus.background-darker { background-color: #f7ca18; fill: #f7ca18; } .background-disease-onchocerciasis { background-color: #34495e; fill: #34495e; } .background-disease-onchocerciasis.background-darker { background-color: #212f3c; fill: #212f3c; } .background-disease-diphteria { background-color: #e67e22; fill: #e67e22; } .background-disease-diphteria.background-darker { background-color: #ca6f1e; fill: #ca6f1e; } .background-disease-trachoma { background-color: #aed6f1; fill: #aed6f1; } .background-disease-trachoma.background-darker { background-color: #5499c7; fill: #5499c7; } .background-disease-yaws-endemic-syphilis { background-color: #f5b7b1; fill: #f5b7b1; } .background-disease-yaws-endemic-syphilis.background-darker { background-color: #c0392b; fill: #c0392b; } .background-disease-maternal-deaths { background-color: #f1948a; fill: #f1948a; } .background-disease-maternal-deaths.background-darker { background-color: #922b21; fill: #922b21; } .background-disease-perinatal-deaths { background-color: #f7dc6f; fill: #f7dc6f; } .background-disease-perinatal-deaths.background-darker { background-color: #b7950b; fill: #b7950b; } .background-disease-influenza { background-color: #5dade2; fill: #5dade2; } .background-disease-influenza.background-darker { background-color: #21618c; fill: #21618c; } .background-disease-influenza-a { background-color: #2874a6; fill: #2874a6; } .background-disease-influenza-a.background-darker { background-color: #154360; fill: #154360; } .background-disease-influenza-b { background-color: #85c1e9; fill: #85c1e9; } .background-disease-influenza-b.background-darker { background-color: #2874a6; fill: #2874a6; } .background-disease-h-metapneumovirus { background-color: #a569bd; fill: #a569bd; } .background-disease-h-metapneumovirus.background-darker { background-color: #76448a; fill: #76448a; } .background-disease-respiratory-syncytial-virus { background-color: #48c9b0; fill: #48c9b0; } .background-disease-respiratory-syncytial-virus.background-darker { background-color: #148f77; fill: #148f77; } .background-disease-parainfluenza-1-4 { background-color: #f7ca18; fill: #f7ca18; } .background-disease-parainfluenza-1-4.background-darker { background-color: #b7950b; fill: #b7950b; } .background-disease-adenovirus { background-color: #f5b041; fill: #f5b041; } .background-disease-adenovirus.background-darker { background-color: #b9770e; fill: #b9770e; } .background-disease-rhinovirus { background-color: #76d7c4; fill: #76d7c4; } .background-disease-rhinovirus.background-darker { background-color: #117864; fill: #117864; } .background-disease-enterovirus { background-color: #f1948a; fill: #f1948a; } .background-disease-enterovirus.background-darker { background-color: #922b21; fill: #922b21; } .background-disease-m-pneumoniae { background-color: #f7cac9; fill: #f7cac9; } .background-disease-m-pneumoniae.background-darker { background-color: #e9967a; fill: #e9967a; } .background-disease-c-pneumoniae { background-color: #f9e79f; fill: #f9e79f; } .background-disease-c-pneumoniae.background-darker { background-color: #f7ca18; fill: #f7ca18; } .background-disease-ari { background-color: #aed6f1; fill: #aed6f1; } .background-disease-ari.background-darker { background-color: #5499c7; fill: #5499c7; } .background-disease-chikungunya { background-color: #e67e22; fill: #e67e22; } .background-disease-chikungunya.background-darker { background-color: #ca6f1e; fill: #ca6f1e; } .background-disease-post-immunization-adverse-events-mild { background-color: #f7cac9; fill: #f7cac9; } .background-disease-post-immunization-adverse-events-mild.background-darker { background-color: #e9967a; fill: #e9967a; } .background-disease-post-immunization-adverse-events-severe { background-color: #c0392b; fill: #c0392b; } .background-disease-post-immunization-adverse-events-severe.background-darker { background-color: #922b21; fill: #922b21; } .background-disease-fha { background-color: #f5b7b1; fill: #f5b7b1; } .background-disease-fha.background-darker { background-color: #c0392b; fill: #c0392b; } .background-disease-invasive-meningococcal-infection { background-color: #00E0A1; fill: #00E0A1; } .background-disease-invasive-meningococcal-infection.background-darker { background-color: #00B582; fill: #00B582; } .background-disease-invasive-pneumococcal-infection { background-color: #e67e22; fill: #e67e22; } .background-disease-invasive-pneumococcal-infection.background-darker { background-color: #ca6f1e; fill: #ca6f1e; } /* ============================================================================= MODERN DASHBOARD — redesign layer (approved: modern redesign, keep legacy data + semantic colours). Sits ON TOP of the 1:1-ported legacy dashboard classes above: it re-homes the flat statistics strip into floating white cards, gives the counts a clear hierarchy, cards the overview / epi-curve / map panels, turns the disease selector into pill tabs and gives the page consistent padding + gaps. Only class hooks were added in Java (addClassName) — no structure changed, so the legacy behaviour + colours are untouched; this file owns the new look. ============================================================================= */ /* ---- shell: page padding + vertical gaps between sections on the cool canvas ---- */ .dashboard-screen { background: var(--sormas-canvas); } .sormas-dashboard-header { box-sizing: border-box; padding: var(--lumo-space-m) var(--lumo-space-l) 0; flex: 0 0 auto; } .sormas-dashboard-content { box-sizing: border-box; padding: var(--lumo-space-m) var(--lumo-space-l) var(--lumo-space-l); gap: var(--lumo-space-m); } /* ---- generic carded panel: overview blocks, epi-curve, map ---- */ .sormas-panel-card { box-sizing: border-box; background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-xs); overflow: hidden; } /* ---- statistics strip: drop the flat blue slab, float the columns as white cards ---- */ .sormas-dashboard-stats { background: transparent; /* overrides .highlighted-statistics-component's #EDF2FD slab */ padding-top: 0; align-items: flex-start; /* content-height cards (the 3rd column stacks two) */ } .sormas-stat-card { box-sizing: border-box; background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-xs); /* !important overrides the inline padding-top/bottom:0 the ported sub-component sets. */ padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s) !important; } .sormas-stat-card:hover { box-shadow: var(--lumo-box-shadow-s); } /* ---- count element hierarchy: prominent number, quiet uppercase caption ---- (colour stays legacy: the coloured 4px underline under the count is set by the ported .count-element.