/* ============================================================================ iService — modern look (opt-in, per user). Activated by data-iservice-theme="iservice" on (set by theme-init.js from the account setting); light/dark via data-iservice-mode. The design tokens live on that root scope and are APPLIED under .iservice-roadmap-page (and .calendar-aside, the roadmap's right column) — a scoped rollout. The rest of the MantisBT chrome keeps skin-3 until we pull the look out further, plugin by plugin. Every rule is prefixed with [data-iservice-theme="iservice"], so the default look is untouched. Where the classic custom.css sets a colour with !important (widget headers, the .white title text), we override with !important too — specificity alone can't beat it. ============================================================================ */ /* --- Design tokens --------------------------------------------------------- Only FOUR colours are ever chosen — the SEEDS: page, surface, ink, accent. Everything else (sunken tones, borders, muted text, the accent tint) is DERIVED from those four with color-mix(), so the look stays consistent and a future per-user override only has to set these four (see the note at the bottom of this file). The derivations are written ONCE and are mode-independent: because "ink" flips from dark (light mode) to light (dark mode), mixing a surface toward ink automatically darkens in light mode and lightens in dark mode — the same formula points the right way in both. Only the four seeds change per mode. (color-mix is supported by all evergreen browsers since 2023.) -------------------------------------------------------------------------- */ [data-iservice-theme="iservice"] { /* Derived roles — follow the seeds, not edited per user. */ --is-bg: var(--is-page); --is-surface-2: color-mix(in srgb, var(--is-page) 98%, var(--is-ink)); --is-surface-3: color-mix(in srgb, var(--is-page) 90%, var(--is-ink)); /* --is-sunken = the inset "well" behind progress tracks: white in light (an empty groove reads as clean paper), the deep recessed tone in dark (see the dark block). --is-header = the widget header/footer bar: grey in light, and in dark it drops onto --is-sunken too ("dark = alles sunken"). */ --is-sunken: #fff; --is-header: color-mix(in srgb, var(--is-page) 90%, var(--is-ink)); --is-border: color-mix(in srgb, var(--is-page) 89%, var(--is-ink)); --is-fg: var(--is-ink); --is-fg-muted: color-mix(in srgb, var(--is-ink) 60%, var(--is-page)); --is-accent-weak: color-mix(in srgb, var(--is-accent) 18%, var(--is-page)); --is-shadow: 0 1px 3px rgba(16, 24, 40, .08); --is-shadow-h: 0 2px 8px rgba(16, 24, 40, .12); --is-radius: 5px; --is-input-bg: var(--is-sunken); /* --is-overlay = floating surfaces (context menus, popovers, flyouts). In light it is just the panel tone; in dark it is ELEVATED — lighter than the page/surface — so a flyout reads as floating instead of vanishing into the dark (a dark drop-shadow can't separate it on a dark ground). The opposite direction from --is-sunken. See the dark block. */ --is-overlay: var(--is-surface); /* Seeds — LIGHT (the four colours everything else is built from). */ --is-page: #e8ecf3; /* backdrop: a soft grey-blue, a step below the panels */ --is-surface: #f7f7f7; /* panels: a subtle off-white (not stark white), still lighter than page so they read as elevated */ --is-ink: #1b1e24; --is-accent: #2d7ff9; /* Semantic colour (its own small palette, separate from the neutral seeds) — shared by the progress fill and the "done" status. */ --is-done: #1a9c4f; } /* Dark mode: only the four seeds change; the derivations above still apply. */ [data-iservice-theme="iservice"][data-iservice-mode="dark"] { --is-page: #1c1f26; --is-surface: #24272f; --is-ink: #e8f0fd; --is-accent: #5aa3ff; --is-done: #3fb950; /* Status square hues (dark) — consumed by the .status-*-fg overrides below. Tuned as one harmonious set (GitHub-dark-ish): vivid, even luminance. */ --is-status-10: #ff7b72; --is-status-20: #d2a8ff; --is-status-40: #e3b341; --is-status-50: #79c0ff; --is-status-60: #7ee787; --is-status-70: #56d4dd; /* Dark: the well is the deep recessed tone; header/footer drop onto it too. */ --is-sunken: color-mix(in srgb, var(--is-page) 82%, #000); --is-header: var(--is-sunken); --is-shadow: 0 1px 3px rgba(0, 0, 0, .40); --is-shadow-h: 0 3px 10px rgba(0, 0, 0, .45); /* Dark: lift menus/popovers ABOVE the page — lighter than surface (elevation), the opposite direction from --is-sunken, so a flyout stands out. */ --is-overlay: color-mix(in srgb, var(--is-page) 80%, var(--is-ink)); } [data-iservice-theme="iservice"] body { background-color: var(--is-page); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .page-content { background-color: #000; } [data-iservice-theme="iservice"] .footer { color: var(--is-fg); } [data-iservice-theme="iservice"] .widget-box { border: 0.5px solid var(--is-border); border-radius: var(--is-radius); box-shadow: var(--is-shadow); margin-bottom: 10px; } [data-iservice-theme="iservice"] #breadcrumbs { background-color: var(--is-accent-weak) !important; color: var(--is-fg); } [data-iservice-theme="iservice"] #breadcrumbs a { color: var(--is-fg); } [data-iservice-theme="iservice"] #breadcrumbs .label.arrowed { background-color: var(--is-accent); } [data-iservice-theme="iservice"] #breadcrumbs .label.arrowed::before { border-right-color: var(--is-accent); } [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li>a>.menu-text, [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li.active>a>.menu-text { background-color: var(--is-accent); color: var(--is-fg); } [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li>.arrow::before, [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li>.arrow::after, [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li.active>.arrow::before, [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li.active>.arrow::after { border-right-color: var(--is-accent); } [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li>a>.menu-text, [data-iservice-theme="iservice"] .skin-3 .sidebar.menu-min .nav-list>li.active>a>.menu-text { border-color: var(--is-accent); } /* ============================================================================ Äll pages ============================================================================ */ [data-iservice-theme="iservice"] .iservice-page { background: var(--is-bg); border-radius: var(--is-radius); color: var(--is-fg); padding: 4px 16px 24px; } [data-iservice-theme="iservice"] h1, [data-iservice-theme="iservice"] h4, [data-iservice-theme="iservice"] .widget-title, [data-iservice-theme="iservice"] .widget-header .white { color: var(--is-fg) !important; } [data-iservice-theme="iservice"] .page-header { border-bottom-color: var(--is-border); } [data-iservice-theme="iservice"] label { color: var(--is-fg-muted); } [data-iservice-theme="iservice"] a { color: var(--is-accent); } [data-iservice-theme="iservice"] .widget-box { background: var(--is-surface); border: 0.5px solid var(--is-border); border-radius: var(--is-radius); box-shadow: var(--is-shadow); overflow: hidden; } [data-iservice-theme="iservice"] .widget-box>.widget-header { background: var(--is-header) !important; border-bottom: 0.5px solid var(--is-border); color: var(--is-fg) !important; } [data-iservice-theme="iservice"] .widget-box .widget-body, [data-iservice-theme="iservice"] .widget-box .widget-main { background: var(--is-surface); color: var(--is-fg); } /* Widget footer (the bulk-action bar) — recessed like the header. */ [data-iservice-theme="iservice"] .iservice-actionbar { background: var(--is-header); border-top: 0.5px solid var(--is-border); color: var(--is-fg); } /* Count badge in a widget title — a subtle accent pill, not a flat grey chip. */ [data-iservice-theme="iservice"] .widget-title .badge { background: var(--is-accent-weak); color: var(--is-accent); padding: 5px 7px; } /* Progress bars — the track is the --is-sunken "well" (white in light, recessed in dark) with a flat green fill; replaces the bright grey ace groove. */ [data-iservice-theme="iservice"] .progress { background: var(--is-sunken); border-radius: var(--is-radius); overflow: hidden; } [data-iservice-theme="iservice"] .progress .progress-bar { background-color: var(--is-done); background-image: none; } /* Status square colours in dark mode — the light values (custom.css) stay; on dark the darker ones (especially the dark-green 80/90) aren't readable. Scoped to the roadmap, where the background is actually dark. "Done" (80/90) reuses the progress green, so status and progress share one colour. */ [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-10-fg { color: var(--is-status-10); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-20-fg { color: var(--is-status-20); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-40-fg { color: var(--is-status-40); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-50-fg { color: var(--is-status-50); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-60-fg { color: var(--is-status-60); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-70-fg { color: var(--is-status-70); } [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-80-fg, [data-iservice-theme="iservice"][data-iservice-mode="dark"] .status-90-fg { color: var(--is-done); } /* ============================================================================ Roadmap page ============================================================================ */ [data-iservice-theme="iservice"] .iservice-roadmap-page { background: var(--is-bg); border-radius: var(--is-radius); color: var(--is-fg); padding: 4px 16px 24px; } /* ============================================================================ Board + columns ============================================================================ */ [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-col { background: var(--is-surface-2); border: 0.5px solid var(--is-border); border-radius: var(--is-radius); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-col-head { background: var(--is-surface-3); border-bottom: 0.5px solid var(--is-border); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-col-self { background: var(--is-accent-weak); border-color: var(--is-accent); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-col-self .iservice-col-head { background: var(--is-accent-weak); border-bottom-color: var(--is-accent); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-col-count { color: var(--is-fg-muted); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-col-name a { color: var(--is-fg); } /* ============================================================================ Cards — theme the three non-left borders; the left accent bar stays semantic (grey / purple check-in / greyed-out when done). ============================================================================ */ [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card { background: var(--is-surface); border-bottom-color: var(--is-border); border-radius: var(--is-radius); border-right-color: var(--is-border); border-top-color: var(--is-border); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card:hover { box-shadow: var(--is-shadow-h); } [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card-meta, [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card-footer, [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card-status { color: var(--is-fg-muted); } /* Grey chips inside the meta line (project / category / generic label). */ [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card-meta .iservice-meta, [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card-meta .iservice-project, [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-card-meta .iservice-category, [data-iservice-theme="iservice"] .iservice-roadmap-page .label-light { background: var(--is-sunken); color: var(--is-fg-muted); font-size: 15px; } /* ============================================================================ Triage lists (Backlog + "Alle Tickets") — slim rows ============================================================================ */ [data-iservice-theme="iservice"] .iservice-triage { border-bottom-color: var(--is-border); color: var(--is-fg); } /* Zebra + hover — override custom.css' hardcoded light greys. */ [data-iservice-theme="iservice"] .iservice-triage:nth-of-type(2n+1) { background: var(--is-surface-2); } [data-iservice-theme="iservice"] .iservice-triage:hover { background: var(--is-surface-3); } [data-iservice-theme="iservice"] .iservice-triage .iservice-handler { color: var(--is-fg-muted); } /* ============================================================================ Time-estimation chip ============================================================================ */ [data-iservice-theme="iservice"] .iservice-roadmap-page .iservice-est-part { background: var(--is-sunken); color: var(--is-fg-muted); } /* ============================================================================ Header switch — lives in the navbar (outside the roadmap scope), so it is styled whenever present. theme-toggle.js only injects it when the look is active, so there is nothing to style otherwise. ============================================================================ */ .iservice-theme-switch-host { align-items: center; display: flex; list-style: none; min-height: 45px; padding: 0 12px; } .iservice-theme-switch { background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; display: inline-flex; overflow: hidden; } .iservice-theme-switch .its-seg { align-items: center; background: transparent; border: 0; color: #cfd3da; cursor: pointer; display: inline-flex; font-size: 13px; justify-content: center; line-height: 1; min-width: 34px; padding: 4px 0; transition: background-color .12s ease, color .12s ease; } .iservice-theme-switch .its-seg:hover { color: #ffffff; } .iservice-theme-switch .its-seg.is-active { background: #2d7ff9; color: #ffffff; } /* ============================================================================ Form controls & buttons — GLOBAL. Applied everywhere the iService look is active (not only the themed plugin pages), so text fields and buttons are consistent across the whole app. They only consume the tokens: in light they match the classic white fields, in dark they stop glaring as white islands. Concrete input types are targeted — plus the .input-sm class, so the compact fields (incl. , not in the type list) are themed whatever their type. Checkboxes / radios / range and the navbar's theme-switch buttons stay untouched. Coloured semantic buttons (primary / danger / success / …) keep ace's own hues; only the neutral (white / default) buttons ride the surface. ============================================================================ */ [data-iservice-theme="iservice"] input[type="text"], [data-iservice-theme="iservice"] input[type="date"], [data-iservice-theme="iservice"] input[type="datetime-local"], [data-iservice-theme="iservice"] input[type="number"], [data-iservice-theme="iservice"] input[type="email"], [data-iservice-theme="iservice"] input[type="search"], [data-iservice-theme="iservice"] input[type="password"], [data-iservice-theme="iservice"] input[type="url"], [data-iservice-theme="iservice"] input[type="tel"], [data-iservice-theme="iservice"] .projects-searchbox input, [data-iservice-theme="iservice"] .input-sm, [data-iservice-theme="iservice"] textarea, [data-iservice-theme="iservice"] select { background-color: var(--is-input-bg); border: 1px solid var(--is-border); border-radius: var(--is-radius); color: var(--is-fg); } [data-iservice-theme="iservice"] input[type="text"]:focus, [data-iservice-theme="iservice"] input[type="date"]:focus, [data-iservice-theme="iservice"] input[type="datetime-local"]:focus, [data-iservice-theme="iservice"] input[type="number"]:focus, [data-iservice-theme="iservice"] input[type="email"]:focus, [data-iservice-theme="iservice"] input[type="search"]:focus, [data-iservice-theme="iservice"] input[type="password"]:focus, [data-iservice-theme="iservice"] input[type="url"]:focus, [data-iservice-theme="iservice"] input[type="tel"]:focus, [data-iservice-theme="iservice"] .projects-searchbox input:focus, [data-iservice-theme="iservice"] .input-sm:focus, [data-iservice-theme="iservice"] textarea:focus, [data-iservice-theme="iservice"] select:focus { /* ace pins focused inputs to white (#FFF) + dark text (ace.css) — re-assert the token bg/fg so a focused field stays themed instead of flashing a white island. */ background-color: var(--is-input-bg); border-color: var(--is-accent); color: var(--is-fg); } /* Native widgets (date picker, select popup, form scrollbars) follow dark. */ [data-iservice-theme="iservice"][data-iservice-mode="dark"] input, [data-iservice-theme="iservice"][data-iservice-mode="dark"] textarea, [data-iservice-theme="iservice"][data-iservice-mode="dark"] select { color-scheme: dark; } /* Every button shares the theme's corner radius. ace pins its button colours AND some radii with !important, so every override below carries !important too — specificity alone can't beat it. */ [data-iservice-theme="iservice"] .btn, [data-iservice-theme="iservice"] .buttons button { border-radius: var(--is-radius) !important; margin-right: 5px !important; } /* Neutral (white / default) buttons ride the surface tone — a no-op in light (surface = white), no bright island in dark. */ [data-iservice-theme="iservice"] .btn.btn-white, [data-iservice-theme="iservice"] .btn.btn-default { background-color: var(--is-surface) !important; background-image: none !important; border-color: var(--is-border) !important; color: var(--is-fg) !important; text-shadow: none !important; } [data-iservice-theme="iservice"] .btn.btn-white:hover, [data-iservice-theme="iservice"] .btn.btn-white:focus, [data-iservice-theme="iservice"] .btn.btn-white:active, [data-iservice-theme="iservice"] .btn.btn-white.active, [data-iservice-theme="iservice"] .btn.btn-default:hover, [data-iservice-theme="iservice"] .btn.btn-default:focus, [data-iservice-theme="iservice"] .btn.btn-default:active, [data-iservice-theme="iservice"] .btn.btn-default.active { background-color: var(--is-surface-3) !important; border-color: var(--is-border) !important; color: var(--is-fg) !important; } /* Primary buttons ride the theme accent. */ [data-iservice-theme="iservice"] .btn.btn-primary { background-color: var(--is-accent) !important; background-image: none !important; border-color: var(--is-accent) !important; color: #fff !important; text-shadow: none !important; } [data-iservice-theme="iservice"] .btn.btn-primary:hover, [data-iservice-theme="iservice"] .btn.btn-primary:focus, [data-iservice-theme="iservice"] .btn.btn-primary:active, [data-iservice-theme="iservice"] .btn.btn-primary.active { background-color: color-mix(in srgb, var(--is-accent) 82%, #000) !important; border-color: color-mix(in srgb, var(--is-accent) 82%, #000) !important; color: #fff !important; } /* In dark the accent is a light blue — flip primary text to the dark page tone so it stays readable on it. */ [data-iservice-theme="iservice"][data-iservice-mode="dark"] .btn.btn-primary, [data-iservice-theme="iservice"][data-iservice-mode="dark"] .btn.btn-primary:hover, [data-iservice-theme="iservice"][data-iservice-mode="dark"] .btn.btn-primary:focus, [data-iservice-theme="iservice"][data-iservice-mode="dark"] .btn.btn-primary:active, [data-iservice-theme="iservice"][data-iservice-mode="dark"] .btn.btn-primary.active { color: var(--is-page) !important; } /* ============================================================================ GLOBAL chrome — tables (Bootstrap/ace .table + MantisBT .category). First step from the scoped rollout toward a system-wide dark mode: retint the shared table skin so EVERY table (issue lists, config pages, the Harvest tracking form, …) follows the tokens in both modes, instead of the classic light .table skin bleeding through. Bootstrap/ace pin several of these with !important — .table td/th {background:#fff!important}, .table-bordered {border:1px #ddd!important}, .category {background:#edf3f4!important} — so we match !important where needed (specificity alone can't win). Cells go transparent so the row-level zebra / hover / active tints (themed below) show through onto the container's themed surface; borders + text ride the tokens; the .category label cells and the become recessed bands. NOTE: transparent cells assume the table's container is themed (widget boxes are); pages whose is not themed yet are the next step of this rollout. ============================================================================ */ /* ace-mantis.css forces `table { background-color:#fff !important }` on the BARE table element — the wide white area that showed behind the transparent cells. Clear it so the themed container (widget body / .harvest card / popup overlay) shows through. */ [data-iservice-theme="iservice"] table { background-color: transparent !important; } [data-iservice-theme="iservice"] .table td, [data-iservice-theme="iservice"] .table th { background-color: transparent !important; border-color: var(--is-border); color: var(--is-fg); } [data-iservice-theme="iservice"] .table-bordered { border: none; } /* Bordered variant pins its 1px #ddd with !important. */ [data-iservice-theme="iservice"] .table-bordered td, [data-iservice-theme="iservice"] .table-bordered th { border-color: var(--is-border) !important; } /* Header row → a recessed band (more specific than the generic cell rule). */ [data-iservice-theme="iservice"] .table>thead>tr>th { background-color: var(--is-surface-3) !important; } /* Zebra + hover — tr-level, now visible through the transparent cells. */ [data-iservice-theme="iservice"] .table-striped>tbody>tr:nth-of-type(odd) { background-color: var(--is-surface-2); } [data-iservice-theme="iservice"] .table-hover>tbody>tr:hover { background-color: var(--is-surface-3); } /* Selected/active rows (cell-level in Bootstrap → need !important to beat the transparent-cell rule above). */ [data-iservice-theme="iservice"] .table>tbody>tr.active>td, [data-iservice-theme="iservice"] .table>tbody>tr.active>th { background-color: var(--is-accent-weak) !important; } /* MantisBT label cells (.category) — a recessed band, strong text. Placed AFTER the generic cell rule so it wins by source order (equal specificity). */ [data-iservice-theme="iservice"] td.category, [data-iservice-theme="iservice"] th.category, [data-iservice-theme="iservice"] td.category label, [data-iservice-theme="iservice"] th.category label { background-color: var(--is-surface-3) !important; color: var(--is-fg) !important; } /* ============================================================================ Floating menus / popups (roadmap): the backlog right-click menu (.iservice-contextmenu) and the box-settings "Bereiche" menu (.iservice-cols-popup). Both were hardcoded white with a light-grey border and a --secondary-color hover; put them on the elevated --is-overlay like every other flyout so they stand out in dark instead of vanishing. ============================================================================ */ [data-iservice-theme="iservice"] .dropdown-menu, [data-iservice-theme="iservice"] .scrollable-menu ul, [data-iservice-theme="iservice"] .iservice-contextmenu, [data-iservice-theme="iservice"] .iservice-cols-popup { background: var(--is-overlay); border-color: var(--is-border); box-shadow: var(--is-shadow-h); color: var(--is-fg); } [data-iservice-theme="iservice"] .scrollable-menu ul>li>a, [data-iservice-theme="iservice"] .dropdown-menu>li>a { color: var(--is-fg); } [data-iservice-theme="iservice"] .scrollable-menu ul>li.active>a { background-color: var(--is-accent-weak); color: var(--is-fg); } [data-iservice-theme="iservice"] .scrollable-menu ul>li:hover>a, [data-iservice-theme="iservice"] .dropdown-menu>li:hover>a { background-color: var(--is-surface-3); color: var(--is-fg); } [data-iservice-theme="iservice"] .iservice-cols-popup label { color: var(--is-fg); } [data-iservice-theme="iservice"] .iservice-contextmenu .iservice-cm-item { color: var(--is-fg); } [data-iservice-theme="iservice"] .iservice-contextmenu .iservice-cm-item:hover, [data-iservice-theme="iservice"] .iservice-cols-popup .iservice-cols-row:hover { background-color: var(--is-accent-weak); } [data-iservice-theme="iservice"] .iservice-contextmenu .iservice-cm-sep, [data-iservice-theme="iservice"] .iservice-cols-popup .iservice-cols-title { border-color: var(--is-border); } /* The gear that opens the box-settings menu. */ [data-iservice-theme="iservice"] .iservice-cols-settings { color: var(--is-fg-muted); } [data-iservice-theme="iservice"] .iservice-cols-settings:hover { color: var(--is-accent); } /* ============================================================================ GLOBAL chrome — checkboxes / radios. MantisBT/ace hides the real input and draws the box with .lbl::before (bg #FAFAFA / border #C8C8C8 / blue check) — a white tile on the dark theme. Put that box on the tokens: sunken well + themed border unchecked, accent fill + light check when checked. Plain (non- ace) checkboxes (e.g. the box-settings menu) just take accent-color. ============================================================================ */ [data-iservice-theme="iservice"] input[type=checkbox].ace+.lbl::before, [data-iservice-theme="iservice"] input[type=radio].ace+.lbl::before { background-color: var(--is-input-bg); border-color: var(--is-border); } [data-iservice-theme="iservice"] input[type=checkbox].ace:checked+.lbl::before, [data-iservice-theme="iservice"] input[type=radio].ace:checked+.lbl::before { background-color: var(--is-accent); border-color: var(--is-accent); color: #fff; } /* Dark: the accent is a light blue — flip the check glyph to the dark page tone. */ [data-iservice-theme="iservice"][data-iservice-mode="dark"] input[type=checkbox].ace:checked+.lbl::before, [data-iservice-theme="iservice"][data-iservice-mode="dark"] input[type=radio].ace:checked+.lbl::before { color: var(--is-page); } [data-iservice-theme="iservice"] input[type=checkbox].ace:hover+.lbl::before, [data-iservice-theme="iservice"] input[type=radio].ace:hover+.lbl::before, [data-iservice-theme="iservice"] input[type=checkbox].ace+.lbl:hover::before, [data-iservice-theme="iservice"] input[type=radio].ace+.lbl:hover::before, [data-iservice-theme="iservice"] input[type=checkbox].ace:focus+.lbl::before, [data-iservice-theme="iservice"] input[type=radio].ace:focus+.lbl::before { border-color: var(--is-accent); } /* Plain native checkboxes / radios (no ace skin). */ [data-iservice-theme="iservice"] input[type=checkbox]:not(.ace), [data-iservice-theme="iservice"] input[type=radio]:not(.ace) { accent-color: var(--is-accent); } /* ============================================================================ GLOBAL chrome — sidebar + view-page bands (continuing the system-wide dark mode). The left nav (.no-skin .sidebar / .nav-list) is the classic light grey; the white separator rows (default.css `tr.spacer {#fff!important}`) and the button toolbars (.widget-toolbox) are the remaining light islands on the view. ============================================================================ */ #sidebar ul li.active { background-color: var(--is-accent-weak) !important; } #sidebar ul li.active a { color: var(--is-fg) !important; } /* White spacer rows between view sections. */ [data-iservice-theme="iservice"] tr.spacer { background-color: transparent !important; } /* Button toolbars (view actions, note toolbar, …) — recessed strip like a footer. */ [data-iservice-theme="iservice"] .widget-toolbox { background-color: var(--is-header); border-color: var(--is-border); } /* .main-content is pinned #FFF next to the sidebar — let the themed page show. */ [data-iservice-theme="iservice"] .sidebar+.main-content, [data-iservice-theme="iservice"] .skin-3 .main-container::before { background-color: var(--is-page) !important; } /* Sidebar shell + nav. The install runs ace skin-3, and the plugin's own custom.css already paints the nav grey via .skin-3 rules (active/hover with !important) — so we target .skin-3 too and match !important where needed. */ [data-iservice-theme="iservice"] .skin-3 .sidebar { background-color: var(--is-surface); } [data-iservice-theme="iservice"] .skin-3 .nav-list>li>a { background-color: var(--is-surface); color: var(--is-fg); } [data-iservice-theme="iservice"] .skin-3 .nav-list>li>a:focus, [data-iservice-theme="iservice"] .skin-3 .nav-list>li:hover>a, [data-iservice-theme="iservice"] .skin-3 .nav-list>li.open>a { background-color: var(--is-surface-3) !important; color: var(--is-fg) !important; } [data-iservice-theme="iservice"] .skin-3 .nav-list>li.active>a, [data-iservice-theme="iservice"] .skin-3 .nav-list>li.active.highlight>a, [data-iservice-theme="iservice"] .skin-3 .nav-list>li.active>a:hover, [data-iservice-theme="iservice"] .skin-3 .nav-list>li.active>a:focus { background-color: var(--is-accent-weak) !important; color: var(--is-accent) !important; } [data-iservice-theme="iservice"] .skin-3 .nav-list>li .submenu { background-color: var(--is-surface); border-color: var(--is-border); } /* Sidebar minimize toggle (the « pill at the bottom). */ [data-iservice-theme="iservice"] .skin-3 .sidebar .sidebar-toggle { background-color: var(--is-surface-3); border-color: var(--is-border); } [data-iservice-theme="iservice"] .skin-3 .sidebar .sidebar-toggle .ace-icon { background-color: var(--is-surface); border-color: var(--is-border); color: var(--is-fg); } [data-iservice-theme="iservice"] #view-issue-page .bug-summary { background-color: var(--is-sunken) !important; } [data-iservice-theme="iservice"] .iservice-est-part { background-color: var(--is-sunken); color: var(--is-fg-muted); } [data-iservice-theme="iservice"] .iservice-triage .iservice-card-meta { background-color: var(--is-sunken); color: var(--is-fg-muted); margin: 0 0 10px 0; } [data-iservice-theme="iservice"] .iservice-triage .iservice-card-meta .label { background-color: var(--is-sunken); color: var(--is-fg-muted); font-size: 15px; } /* ============================================================================ GLOBAL chrome — Bootstrap pagination (view_all etc.). Default is white #fff boxes with a #ddd border + blue text; put them on the tokens. ============================================================================ */ [data-iservice-theme="iservice"] .pagination>li>a, [data-iservice-theme="iservice"] .pagination>li>span { background-color: var(--is-surface); border-color: var(--is-border); color: var(--is-accent); } [data-iservice-theme="iservice"] .pagination>li>a:hover, [data-iservice-theme="iservice"] .pagination>li>a:focus, [data-iservice-theme="iservice"] .pagination>li>span:hover, [data-iservice-theme="iservice"] .pagination>li>span:focus { background-color: var(--is-surface-3); border-color: var(--is-border); color: var(--is-accent); } [data-iservice-theme="iservice"] .pagination>.active>a, [data-iservice-theme="iservice"] .pagination>.active>a:hover, [data-iservice-theme="iservice"] .pagination>.active>a:focus, [data-iservice-theme="iservice"] .pagination>.active>span, [data-iservice-theme="iservice"] .pagination>.active>span:hover, [data-iservice-theme="iservice"] .pagination>.active>span:focus { background-color: var(--is-accent); border-color: var(--is-accent); color: #fff; } /* Dark: accent is a light blue — flip the active label to the dark page tone. */ [data-iservice-theme="iservice"][data-iservice-mode="dark"] .pagination>.active>a, [data-iservice-theme="iservice"][data-iservice-mode="dark"] .pagination>.active>span { color: var(--is-page); } [data-iservice-theme="iservice"] .pagination>.disabled>a, [data-iservice-theme="iservice"] .pagination>.disabled>a:hover, [data-iservice-theme="iservice"] .pagination>.disabled>a:focus, [data-iservice-theme="iservice"] .pagination>.disabled>span, [data-iservice-theme="iservice"] .pagination>.disabled>span:hover, [data-iservice-theme="iservice"] .pagination>.disabled>span:focus { background-color: var(--is-surface); border-color: var(--is-border); color: var(--is-fg-muted); } /* ============================================================================ GLOBAL chrome — manage/admin tabs (print_menu →