/* "Modern" theme (2026-08-06, new feature, not part of the port) - a new,
* more contemporary/mobile-friendly visual identity, coexisting with the
* classic one (kept as the default - see User.theme / SessionController.
* getTheme() / preferences.xhtml). Toggled by "theme-modern" on
* (UIPage.encodeChildren()), same mechanism as dark-mode.css.
*
* Rolled out progressively, screen by screen (see the plan doc) - starting
* here with the page shell (header/navigation, responsive down to mobile)
* and the ticket dashboard (the hardest screen: dynamic, user-configurable
* columns - see controlPanelController.getColumnLabel()/.mobile-field-label
* below for how the mobile card view shows field names without hardcoding
* which column is which).
*
* Direction agreed with the user: flat/material-ish (flat colors, rounded
* corners, light shadows for depth), system font stack, blue accent kept
* from the classic theme's own brand color (#1093d3) for continuity.
*
* Responsive tables (@media max-width:900px throughout this file) -
* pick ONE of these per table, don't invent a fourth:
* 1. Card with field labels - a data table where each row is one record
* and every column matters on mobile (ticket dashboard, search
* results, bookmarks/history). table/thead/tbody -> display:block,
* tbody tr -> a bordered/shadowed flex-wrap card, each td either
* carries a ".mobile-field-label" (reuse that exact class - it's
* already hidden-by-default outside this media query) or, if the
* columns are dynamic/user-configurable (dashboard), a single
* pre-formatted ".mobile-summary-column" cell replaces all the
* individual columns instead (see controlPanelController.
* getColumnLabel()).
* 2. Plain stack, no labels - a layout table with no "records" of its
* own (an e:panelGrid used to lay out unrelated form elements/
* buttons side by side, not to display data - FAQ's action-button
* grids, the tree+content 3-column grid). table/tbody/tr/td ->
* display:block; width:100% - nothing needs a label because each
* cell's own content is already self-explanatory outside of a
* column header's context.
* 3. Internal scroll (exception, last resort) - only when the content
* itself can't reasonably be restructured into 1 or 2 without
* rewriting the underlying component (categories.xhtml's e:tree2:
* each row mixes an indent level, an icon and several inline action
* icons that only make sense read left-to-right). max-width:100%;
* overflow-x:auto on a wrapper, page itself never overflows.
*/
:root {
/* Reference design's button/accent blue - a calmer slate blue rather than
the classic theme's brighter cyan (#1093d3, kept nowhere now - the
status/priority palette already reused this exact tone for
ticket-status-CLOSED, so this also brings the buttons in line with
that). */
--modern-accent: #3b6ea5;
--modern-accent-dark: #2f5a87;
/* button--primary's green, desaturated the same way --modern-accent above
desaturates the classic theme's brighter blue (#1093d3) - kept apart
from the blue accent since primary/default/secondary now have distinct
meanings (see the button system comment further down). */
--modern-accent-green: #4a8f5c;
--modern-accent-green-dark: #3d7549;
--modern-bg: #f7f8fa;
--modern-surface: #ffffff;
--modern-stripe: #f3f4f6;
--modern-text: #1a1f28;
--modern-text-muted: #6b7280;
--modern-icon-neutral: #b0b7c0;
--modern-border: #e5e7eb;
--modern-radius: 10px;
--modern-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
/* Single source of truth for the theme's font - every font-family
declaration below reads this instead of hardcoding the name, so trying
a different font (or reverting) is a one-line change here.
TRIAL (2026-08-10): 'Barlow Semi Condensed' first - not self-hosted
(no @font-face here, unlike Barlow Condensed below), so it only
renders for visitors who already have it installed locally; falls
back to Barlow Condensed (self-hosted/always available) otherwise.
Revert by dropping the 'Barlow Semi Condensed', prefix. */
--modern-font: 'Barlow Semi Condensed', 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Dark mode (dark-mode.css) is an independent preference, orthogonal to the
theme choice - it can be combined with either theme. Every rule below
reads these custom properties rather than literal colors specifically so
that redefining them here is enough to re-theme the whole modern theme
for dark mode, without repeating body.dark-mode in every single selector.
Colors reused from dark-mode.css's own palette (#121212 page bg, #1e1e1e/
#262626 card surfaces, #cccccc text, #2e2e2e borders) for visual
consistency with the rest of the app in dark mode. */
body.dark-mode.theme-modern {
--modern-bg: #121212;
--modern-surface: #1e1e1e;
--modern-stripe: #262626;
--modern-text: #cccccc;
--modern-text-muted: #8a8a8a;
--modern-icon-neutral: #565d68;
--modern-border: #2e2e2e;
--modern-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.theme-modern {
background-color: var(--modern-bg);
color: var(--modern-text);
font-family: var(--modern-font);
}
/* Plain inheritance from the rule above isn't enough: a lot of legacy CSS
(portlet.css, base.style.css, form.style.css...) sets its own explicit
font-family (Verdana, Roboto...) directly on specific elements, and an
explicit declaration on an element always wins over an inherited value
regardless of specificity (see the statistics-page dropdown/portlet-
section-text case earlier). Forcing it here with !important on every
descendant is the only way to guarantee --modern-font everywhere in this
theme - FontAwesome icons are excluded since they rely on their own icon
font to render glyphs via ::before, not text content. */
body.theme-modern *:not(.fas):not(.far):not(.fab):not(.fal) {
font-family: var(--modern-font) !important;
}
body.theme-modern h1,
body.theme-modern h2,
body.theme-modern h3 {
color: var(--modern-text);
}
/* ---------------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------------- */
body.theme-modern .header .region {
background-color: var(--modern-surface);
border-bottom: 1px solid var(--modern-border);
box-shadow: var(--modern-shadow);
}
/* Logos (header + footer) are white-on-transparent PNGs designed for the
classic theme's blue header bar - invisible against this theme's white
surface in light mode (dark mode's dark surface is fine as-is). Recolored
without a new asset: hide the actual ![]()
(opacity, keeps its layout box)
and paint a solid #131328 shape clipped to the PNG's own alpha channel via
mask-image - an exact silhouette match, not a filter-based approximation. */
body.theme-modern:not(.dark-mode) .header .logo img,
body.theme-modern:not(.dark-mode) .footer .region-inner > div:first-child img {
opacity: 0;
}
body.theme-modern:not(.dark-mode) .header .logo,
body.theme-modern:not(.dark-mode) .footer .region-inner > div:first-child {
position: relative;
}
body.theme-modern:not(.dark-mode) .header .logo::after,
body.theme-modern:not(.dark-mode) .footer .region-inner > div:first-child::after {
content: "";
position: absolute;
inset: 0;
background-color: #131328;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: contain;
mask-size: contain;
}
body.theme-modern:not(.dark-mode) .header .logo::after {
-webkit-mask-image: url(images/logo-header-large.png);
mask-image: url(images/logo-header-large.png);
}
body.theme-modern:not(.dark-mode) .footer .region-inner > div:first-child::after {
-webkit-mask-image: url(images/logo-footer-small.png);
mask-image: url(images/logo-footer-small.png);
}
body.theme-modern .header .region .current-user,
body.theme-modern .header .region .portlet-section-text {
color: var(--modern-text);
font-family: var(--modern-font);
font-size: 19px;
}
body.theme-modern .header .region .dark-mode-toggle,
body.theme-modern .header .region .logout-link,
body.theme-modern .header .region .current-user {
border-left-color: var(--modern-border);
}
body.theme-modern .header .region .dark-mode-toggle .fas,
body.theme-modern .header .region .logout-link .fas {
color: var(--modern-text-muted);
}
body.theme-modern .header .region .dark-mode-toggle:hover,
body.theme-modern .header .region .logout-link:hover {
background-color: var(--modern-bg);
}
/* Hamburger toggle (_header.xhtml) - only meaningful on narrow screens;
hidden by default (including in the classic theme, where it stays
inert), shown here below a breakpoint. */
.nav-toggle {
display: none;
order: -1;
}
body.theme-modern .nav-toggle {
display: none;
order: -1;
align-items: center;
padding: 0 1em;
font-size: calc(1.4em + 1px);
color: var(--modern-text);
}
/* ---------------------------------------------------------------------- */
/* Navigation */
/* ---------------------------------------------------------------------- */
body.theme-modern .navigation {
background-color: var(--modern-surface);
border-right: 1px solid var(--modern-border);
padding: 16px 12px;
/* layout.style.css's ".navigation { flex-basis: 280px }" is a fixed
classic-theme width; let this theme's sidebar size to its content
instead. */
flex-basis: auto;
}
/* dark-mode.css gives the