/* * zic-theme.css * ZIC premium theme polish on top of the Materio Bootstrap shell. * * This file is the LAST theme layer to load and it owns no design tokens. * Colour, elevation and motion all come from src/static/zic/theme/: * * variables.css structural tokens, motion, compatibility aliases * variables-light.css light palette * variables-dark.css dark palette * materio-overrides.css Materio --bs-* -> ZIC token mapping * * Rules here must resolve through `var(--zic-*)`. A raw hex in this file is a * bug: it would survive the theme switch and break one of the two themes. * * Conventions: * - Prefer Materio's own classes; add bespoke rules only where it has no * answer, and express them in ZIC tokens. * - Theme state is `data-bs-theme` on (Materio's mechanism) plus the * `.dark-style` / `.light-style` class contract written by the switcher. */ /* --------------------------------------------------------------------------- * 1. Semantic status badges * Standardised pill badges for business states. Use these instead of raw * `text-success` / `bg-warning` utilities for STATE indicators so a single * token change re-themes every occurrence. * * `--zic-status-*-text` is the AA-safe foreground and `-bg-subtle` / * `-border-subtle` the matching tint, so the label stays readable on both * themes without the badge needing to know which one is active. * ------------------------------------------------------------------------- */ .badge-status { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; } .badge-status-active { color: var(--zic-status-success-text); background-color: var(--zic-status-success-bg-subtle); border-color: var(--zic-status-success-border-subtle); } .badge-status-pending { color: var(--zic-status-warning-text); background-color: var(--zic-status-warning-bg-subtle); border-color: var(--zic-status-warning-border-subtle); } .badge-status-overdue { color: var(--zic-status-danger-text); background-color: var(--zic-status-danger-bg-subtle); border-color: var(--zic-status-danger-border-subtle); } .badge-status-completed { color: var(--zic-status-info-text); background-color: var(--zic-status-info-bg-subtle); border-color: var(--zic-status-info-border-subtle); } .badge-status .badge-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: currentColor; flex-shrink: 0; } /* --------------------------------------------------------------------------- * 2. Navbar header widgets * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * 2. Header (navbar) — exact reference styling * * The spec names `--zic-interactive-focus` for the calendar accent; that token * is not part of the theme contract, so the alias below points it at the themed * violet (`--zic-code-text`: #6D28D9 light / #C4B5FD dark), which is already * AA-safe in both palettes. Theme-engine files stay untouched. * ------------------------------------------------------------------------- */ :root, [data-bs-theme="light"], html.light-style { --zic-interactive-focus: var(--zic-code-text); } [data-bs-theme="dark"], html.dark-style { --zic-interactive-focus: var(--zic-code-text); } /* Bar: 64px, raised surface, hairline bottom border. Height matches Materio's own `block-size: 4rem` so nothing shifts; the border is the only addition. The id selector is deliberate — the layout tests reserve the shell's navbar class for its own token mapping. */ #layout-navbar { border-bottom: 1px solid var(--zic-border-default); } /* Cluster spacing: 24px between the left and right clusters, 8px between the icons within a cluster. */ #navbar-collapse { gap: 1.5rem; /* Materio's `.navbar-nav-right { flex-basis: 100% }` makes the right cluster claim the whole line and shrink the left one, which squeezed the clock widget until its text wrapped. Size the cluster to its content instead; the inner list's `ms-auto` still pushes it to the trailing edge. */ flex-basis: auto; } [data-navbar-left], [data-navbar-right] { gap: 0.5rem; } /* The shell's `.navbar-expand-xl` switches `.navbar-nav` to a column below 1200px. This header is a single row at every width, so pin the clusters to row — otherwise the left cluster stacks vertically and the mobile toggle lands above the visible bar. */ #layout-navbar .navbar-nav { flex-direction: row; } /* Account period block (reference: label + bold accent period on line 1; muted small live clock on line 2). It must never wrap: a wrapped label was turning the two reference rows into three and spilling past the 64px bar. */ .zic-clock-widget { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; line-height: 1.25; white-space: nowrap; user-select: none; } .zic-clock-widget__line { display: flex; align-items: baseline; gap: 0.375rem; white-space: nowrap; } .zic-clock-widget .zic-clock-label { font-size: 0.875rem; font-weight: 600; color: var(--zic-text-primary); } .zic-clock-widget .zic-clock-period { font-size: 0.875rem; font-weight: 700; color: var(--zic-interactive-focus); } .zic-clock-widget .zic-clock-date, .zic-clock-widget .zic-clock-time { font-size: 0.75rem; color: var(--zic-text-secondary); } /* Tabular figures keep the ticking seconds from shifting the layout. */ .zic-clock-widget .zic-clock-time { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.015em; } /* Navbar icon buttons (collapse, calendar, search, globe, bell, theme): 40x40 rounded-lg, 20px icon, muted, hover tint + accent. */ .zic-nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--zic-radius-lg); color: var(--zic-text-secondary); background-color: transparent; border: none; cursor: pointer; text-decoration: none; } .zic-nav-icon-btn .icon-base { font-size: 1.25rem; } .zic-nav-icon-btn:hover, .zic-nav-icon-btn:focus-visible { transition: background-color var(--zic-transition-fast), color var(--zic-transition-fast); } .zic-nav-icon-btn:hover { background-color: var(--zic-interactive-hover); color: var(--zic-primary-text); } .zic-nav-icon-btn:focus-visible { outline: var(--zic-focus-ring-width) solid var(--zic-border-focus); outline-offset: var(--zic-focus-ring-offset); } /* Accent variant — the reference calendar icon reads in the accent colour. */ .zic-nav-icon-btn--accent { color: var(--zic-interactive-focus); } /* The navbar's own rail control is desktop-only; below 1200px the shell's drawer takes over and the sidebar's rail control handles the collapse. */ .zic-nav-collapse-bar { display: none; } @media (min-width: 1200px) { .zic-nav-collapse-bar { display: inline-flex; } } /* Bell badge: 18px red circle, white 11px bold count, offset top-right. */ .zic-nav-badge { position: absolute; top: 0.25rem; inset-inline-end: 0.25rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 999px; background-color: var(--zic-status-danger-fill); color: var(--zic-status-danger-contrast); font-size: 0.6875rem; font-weight: 700; line-height: 1; } /* Thin vertical divider between clusters: 1px x 24px, 12px margins. */ .zic-nav-divider { width: 1px; height: 1.5rem; background-color: var(--zic-border-default); margin: 0 0.75rem; } /* Right-aligned user block: name 14px semibold over 12px muted group. */ .zic-user-block { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: end; } .zic-user-block__name { font-size: 0.875rem; font-weight: 600; color: var(--zic-text-primary); } .zic-user-block__group { font-size: 0.75rem; color: var(--zic-text-secondary); } /* Avatar: 40px circle with a 2px surface ring; the online dot (10px, 2px surface border) comes from Materio's `.avatar-online::after` — only its ring colour is re-pointed at the themed surface. */ #layout-navbar .avatar { --bs-avatar-size: 2.5rem; } #layout-navbar .avatar.avatar-online::after { box-shadow: 0 0 0 2px var(--zic-surface-primary); } .zic-clock-divider { width: 1px; height: 2rem; background-color: var(--zic-border-default); margin: 0 1rem; } /* Theme toggle button */ .zic-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; color: var(--zic-text-secondary); background-color: transparent; border: none; cursor: pointer; } .zic-theme-toggle:hover, .zic-theme-toggle:focus-visible { transition: background-color var(--zic-transition-fast), color var(--zic-transition-fast); } .zic-theme-toggle:hover { background-color: var(--zic-interactive-hover); color: var(--zic-primary-text); } /* The ONLY animation the theme switch has on a per-element basis: a 150ms rotate/scale on the icon itself, never on the page. `switching` is added by theme-switcher.js for exactly this long. */ .zic-theme-toggle [data-zic-theme-icon] { display: inline-block; transition: transform var(--zic-transition-fast); } .zic-theme-toggle.switching [data-zic-theme-icon] { transform: rotate(-90deg) scale(0.8); } @media (prefers-reduced-motion: reduce) { .zic-theme-toggle [data-zic-theme-icon], .zic-theme-toggle.switching [data-zic-theme-icon] { transition: none; transform: none; } } .zic-theme-toggle:focus-visible { outline: var(--zic-focus-ring-width) solid var(--zic-border-focus); outline-offset: var(--zic-focus-ring-offset); } .zic-theme-toggle.switching i { display: inline-block; animation: zic-icon-spin 400ms ease; } @keyframes zic-icon-spin { 0% { transform: rotate(0deg) scale(1); } 60% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } } /* Quick access shortcuts dropdown */ .zic-shortcuts-menu { min-width: 26.5rem; padding: 0.75rem; } .zic-shortcuts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; } .zic-shortcuts-grid .dropdown-item { border-radius: 0.75rem; padding: 0.625rem 0.75rem; white-space: normal; } .zic-shortcuts-grid .dropdown-item .zic-shortcut-title { font-weight: 600; font-size: 0.8125rem; line-height: 1.2; } .zic-shortcuts-grid .dropdown-item .zic-shortcut-desc { display: block; font-size: 0.6875rem; color: var(--zic-text-secondary); line-height: 1.3; } .zic-shortcut-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--zic-primary-text); background-color: color-mix(in srgb, var(--zic-primary) 10%, transparent); } /* AI assistant trigger */ .zic-ai-trigger { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 999px; color: var(--zic-text-secondary); border: 1px solid var(--zic-border-default); background-color: transparent; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .zic-ai-trigger:hover { color: var(--zic-primary-text); border-color: color-mix(in srgb, var(--zic-primary) 40%, transparent); } .zic-ai-pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--zic-status-success); box-shadow: 0 0 0 0 rgba(var(--zic-status-success-rgb), 0.6); animation: zic-pulse 2s infinite; } @keyframes zic-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--zic-status-success-rgb), 0.55); } 70% { box-shadow: 0 0 0 7px rgba(var(--zic-status-success-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--zic-status-success-rgb), 0); } } /* AI assistant modal */ .zic-ai-sample-chips .btn { white-space: normal; text-align: left; } .zic-ai-results-empty { border: 1px dashed var(--zic-border-default); border-radius: 0.75rem; } /* --------------------------------------------------------------------------- * 3. Responsive tuning * ------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .zic-clock-widget .zic-clock-time { display: inline-block; min-width: 6.5rem; } } /* Below 992px: drop the ticking seconds so the block cannot overflow. */ @media (max-width: 991.98px) { .zic-clock-time .zic-clock-seconds { display: none; } } /* Below 768px: avatar-only user block, no globe, and the account period collapses to the calendar icon (already in the left cluster) plus the period value — the label and the clock line are hidden. */ @media (max-width: 767.98px) { .zic-user-block { display: none !important; } [data-navbar-locale] { display: none !important; } .zic-clock-widget .zic-clock-label, .zic-clock-widget .zic-clock-date-container { display: none; } .zic-clock-divider { margin: 0 0.5rem; } .zic-shortcuts-menu { min-width: 16rem; } .zic-shortcuts-grid { grid-template-columns: 1fr; } .zic-clock-widget { align-items: flex-start; } } /* Extra-small screens: shortcuts become a bottom sheet, clock keeps only the period so the compact navbar does not overflow. */ @media (max-width: 575.98px) { .zic-shortcuts-menu { position: fixed; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 75vh; overflow-y: auto; border-radius: 1rem 1rem 0 0; transform: none !important; } .zic-shortcuts-menu::before { content: ""; display: block; width: 2.5rem; height: 0.25rem; border-radius: 999px; background-color: var(--zic-border-default); margin: 0 auto 0.5rem; } .zic-clock-widget .zic-clock-label, .zic-clock-widget .zic-clock-date-container { display: none; } .zic-clock-widget { align-items: flex-start; } .zic-ai-trigger { width: 2.375rem; padding: 0.375rem; justify-content: center; } } /* --------------------------------------------------------------------------- * 4. Brand assets * * The app-brand lockup is a raster pair (`zic-logo.png` plus the collapsed * icon) where Materio ships an inline SVG, so the intrinsic ratio has to be * pinned. The band's padding, spacing and collapsed swap are the shell's. * ------------------------------------------------------------------------- */ .layout-menu .app-brand-img { height: var(--zic-nav-logo); width: auto; } .layout-menu .app-brand-img-collapsed { width: var(--zic-nav-logo); height: var(--zic-nav-logo); }