/* * HEF on the SCCC theme. * Loads after sccc_theme. The two value blocks below ARE the style: to change the look, edit them only. * Source: HEF Portal Typography Standard (fonts, sizes, weights) and the HEF portal palette. * Approved prototype: docs/prototypes/hef-typography (preset D, HEF colours), 2 Nov 2026. */ /* ---------- Fonts: self-hosted (the CSP and government networks rule out a font CDN) ---------- */ @font-face { font-family: 'Tajawal'; font-weight: 400; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/tajawal/Tajawal-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: 'Tajawal'; font-weight: 400; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/tajawal/Tajawal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Tajawal'; font-weight: 500; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/tajawal/Tajawal-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: 'Tajawal'; font-weight: 500; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/tajawal/Tajawal-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Tajawal'; font-weight: 700; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/tajawal/Tajawal-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: 'Tajawal'; font-weight: 700; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/tajawal/Tajawal-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/plex/IBMPlexSansArabic-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/plex/IBMPlexSansArabic-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/plex/IBMPlexSansArabic-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url('/assets/hef_sccc_theme_extend/fonts/plex/IBMPlexSansArabic-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } /* The riyal sign only: the face also maps A-D and private-use glyphs, so the range is load-bearing. */ @font-face { font-family: 'saudi-riyal'; font-weight: 400; size-adjust: 122%; src: url('/assets/hef_sccc_theme_extend/fonts/riyal/saudi_riyal-400.woff2') format('woff2'); unicode-range: U+20C1; } @font-face { font-family: 'saudi-riyal'; font-weight: 700; size-adjust: 122%; src: url('/assets/hef_sccc_theme_extend/fonts/riyal/saudi_riyal-700.woff2') format('woff2'); unicode-range: U+20C1; } /* ---------- 1. Type and shape values (:root:root outranks sccc_theme's :root whatever the load order) ---------- */ :root:root { --hef-font-text: 'saudi-riyal', 'Tajawal', Tahoma, sans-serif; --hef-font-title: 'saudi-riyal', 'IBM Plex Sans Arabic', Tahoma, sans-serif; --hef-size-caption: 12px; --hef-size-label: 13px; --hef-size-body: 14px; --hef-size-section: 15px; --hef-size-dialog: 17px; --hef-size-title: 24px; --hef-size-figure: 30px; --hef-title-line-height: 32px; --hef-radius: 8px; --hef-btn-height: 36px; --hef-btn-height-sm: 32px; } /* ---------- 2. Colour values (HEF portal palette) ---------- */ :root:root { --hef-navy: #004D40; --hef-navy-dark: #00382E; --hef-navy-tint: #E0F2F1; --hef-gold: #C8A951; --hef-teal: #00796B; /* provisional until the portal's @theme block */ --hef-ink: #1A2A3A; --hef-gray-500: #6B7280; --hef-gray-700: #374151; --hef-page-bg: #FBFAF7; --hef-band: #F6FBFA; /* section heads, list header, filter bar: where SCCC used its lavender band */ --hef-focus-ring: 0 0 0 3px rgba(0, 77, 64, 0.4); --hef-hero: #00352C; /* portal header: the navbar and the Home greeting band (dark end of the gradient) */ --hef-on-dark-muted: #CFE3DE; /* secondary text and icons on the dark green */ /* Frappe's and SCCC's own variables, pointed at the palette above */ --text-color: var(--hef-ink); --heading-color: var(--hef-navy); --bg-color: var(--hef-page-bg); --primary: var(--hef-navy); --btn-primary: var(--hef-navy); --sccc-primary: var(--hef-navy); --sccc-primary-light: rgba(0, 77, 64, 0.1); --sccc-primary-border: var(--hef-navy); --sccc-primary-hover: var(--hef-navy-dark); --sccc-secondary: var(--hef-navy); --sccc-secondary-hover: var(--hef-navy-dark); --btn-primary-bg: var(--hef-navy); --btn-primary-hover: var(--hef-navy-dark); --sccc-btn-primary-bg: var(--hef-navy); --sccc-btn-primary-hover: var(--hef-navy-dark); --input-focus-border: var(--hef-navy); --sccc-input-focus-border: var(--hef-navy); --comment-input-focus-border: var(--hef-navy); --sccc-comment-input-focus-border: var(--hef-navy); --input-focus-shadow: var(--hef-focus-ring); --sccc-input-focus-shadow: var(--hef-focus-ring); --sccc-focus-ring: var(--hef-focus-ring); --avatar-bg: var(--hef-navy); --sccc-avatar-bg: var(--hef-navy); --timeline-dot-color: var(--hef-navy); --sccc-timeline-dot: var(--hef-navy); --sidebar-bg: var(--hef-navy-tint); --sidebar-bg-solid: var(--hef-navy-tint); --sccc-sidebar-bg: var(--hef-navy-tint); --sccc-sidebar-bg-solid: var(--hef-navy-tint); --sidebar-hover: rgba(0, 77, 64, 0.1); --sccc-sidebar-hover: rgba(0, 77, 64, 0.1); --sidebar-active: var(--hef-navy); --sccc-sidebar-active: var(--hef-navy); --sidebar-active-hover: var(--hef-navy-dark); --sccc-sidebar-active-hover: var(--hef-navy-dark); --tab-bg: var(--hef-navy-tint); --sccc-tab-bg: var(--hef-navy-tint); /* side rail */ --sccc-bg: var(--hef-navy); --sccc-bg-2: var(--hef-navy-dark); --sccc-fg: #F1F8F6; --sccc-muted: #CFE3DE; /* menu labels and icons: 8:1 on navy (was 5.3:1) */ --sccc-accent: var(--hef-gold); } /* Header gradient (navbar + Home greeting band): dark on the far side, the rail's own green where it meets the rail, so there is no colour step at the join (user, 2026-11-04). The rail is on the right in Arabic, the left in English. */ /* The page's corner under the header, on the rail side, is rounded into the green frame (user): the arc's centre. */ :root:root { --hef-hero-gradient: linear-gradient(270deg, var(--hef-hero), var(--hef-navy)); --hef-frame-corner: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--hef-navy) 16px); } :root:root[dir="rtl"] { --hef-hero-gradient: linear-gradient(90deg, var(--hef-hero), var(--hef-navy)); --hef-frame-corner: radial-gradient(circle at 0 100%, transparent 15.5px, var(--hef-navy) 16px); } /* * SCCC forces its font, lowercase and letter-spacing with !important on `body, *` and about 160 * selectors. An !important rule inside a cascade layer beats every unlayered !important rule, * whatever its selector, so the rules below override all of them without a selector per rule. */ @layer hef { /* ---------- Resets ---------- */ /* :where() keeps this at the lowest specificity, so the title rules below win over it */ body, body :where(:not(.fa, .fa *, .fas, .far, .fab, code, code *, pre, pre *, kbd, samp, .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .ql-code-block)) { font-family: var(--hef-font-text) !important; } body, body * { text-transform: none !important; letter-spacing: normal !important; } html, body { background-color: var(--hef-page-bg) !important; } /* ---------- Titles and figures: IBM Plex Sans Arabic ---------- */ .page-title .title-area .title-text *, .section-head-title-row *, .modal-title *, .number-widget-box .widget-content .number *, .sccc-number-card__value * { font-family: inherit !important; } .page-title .title-area .title-text { font-family: var(--hef-font-title) !important; font-size: var(--hef-size-title) !important; font-weight: 700 !important; line-height: var(--hef-title-line-height) !important; color: var(--hef-navy) !important; } .section-head-title-row { font-family: var(--hef-font-title) !important; font-size: var(--hef-size-section) !important; font-weight: 600 !important; line-height: 24px !important; color: var(--hef-navy) !important; } .modal-title { font-family: var(--hef-font-title) !important; font-size: var(--hef-size-dialog) !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--hef-navy) !important; } .number-widget-box .widget-content .number, .sccc-number-card__value { font-family: var(--hef-font-title) !important; font-size: var(--hef-size-figure) !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--hef-navy) !important; } /* ---------- Forms ---------- */ .frappe-control .control-label { font-size: var(--hef-size-label) !important; font-weight: 700 !important; line-height: 20px !important; color: var(--hef-gray-700) !important; } .frappe-control .form-control { font-size: var(--hef-size-body) !important; font-weight: 400 !important; } .help-box, .section-head-description { font-size: var(--hef-size-caption) !important; line-height: 16px !important; color: var(--hef-gray-500) !important; } .page-actions .btn { font-size: var(--hef-size-body) !important; } .page-actions .btn-primary { font-weight: 700 !important; } /* ---------- SCCC's lavender bands and chips (hard-coded #ECD7FE), same selectors as sccc_theme ---------- */ .form-section .section-head, .form-dashboard-section .section-head, .custom-sidebar-layout .sidebar-icon-bar, .custom-sidebar-layout .sidebar-panel-header, body:not([data-route-type="query-report"]) .page-form, .list-row-head { background: var(--hef-band) !important; } .filter-selector .filter-button.btn-primary-light, .filter-selector .btn-group:has(.btn-primary-light) .filter-x-button { background: var(--hef-navy-tint) !important; } /* ---------- SCCC's coral #FF375E, hard-coded in its CSS (same selectors as sccc_theme) ---------- */ /* filled: primary actions */ .page-head .standard-actions .btn-primary.primary-action, .grid-footer .btn:not(:last-child):not(.grid-add-multiple-rows), .grid-footer .grid-add-row, .grid-footer .grid-pagination .btn, .grid-footer .grid-bulk-actions .btn, .custom-sidebar-layout .sidebar-comment-input-footer .btn-comment, .custom-sidebar-layout .sidebar-comment-input-footer .btn-xs, .custom-sidebar-layout .sidebar-comment-input-footer .btn-primary, .custom-sidebar-layout .sidebar-comment-input-footer button[type="submit"], .custom-sidebar-layout .sidebar-comment-input-footer button[type="button"], .custom-sidebar-layout .sidebar-activities-sections-container .add-attachment-btn:hover, .custom-sidebar-layout .sidebar-activities-sections-container .add-assignment-btn:hover, .custom-sidebar-layout .sidebar-activities-sections-container .btn-link.icon-btn:hover, .list-empty-card__badge, .sccc-list-layout input[type="checkbox"].disabled-selected { background: var(--hef-navy) !important; } /* Frappe's .btn:active forces the body text colour: on the navy fill the label vanished while pressed */ .page-head .standard-actions .btn-primary.primary-action:active, .grid-footer .btn:not(:last-child):not(.grid-add-multiple-rows):active, .grid-footer .grid-add-row:active, .grid-footer .grid-pagination .btn:active, .grid-footer .grid-bulk-actions .btn:active, .custom-sidebar-layout .sidebar-comment-input-footer .btn:active { color: #fff !important; } /* outlined: secondary actions */ .page-head .custom-actions .inner-group-button.btn-actions button, .grid-custom-buttons .btn, .custom-sidebar-layout .sidebar-activities-sections-container .add-attachment-btn, .custom-sidebar-layout .sidebar-activities-sections-container .add-assignment-btn, .custom-sidebar-layout .sidebar-activities-sections-container .btn-link.icon-btn, .list-empty-create-btn { color: var(--hef-navy) !important; border-color: var(--hef-navy) !important; } .grid-footer .btn.grid-add-multiple-rows { background: #fff !important; color: var(--hef-navy) !important; border: 1px solid var(--hef-navy) !important; } .page-head .custom-actions .inner-group-button.btn-actions button:hover { border-color: var(--hef-navy-dark) !important; } .list-empty-create-btn:hover, .list-empty-create-btn svg { color: var(--hef-navy) !important; } .page-head .custom-actions .inner-group-button.btn-actions button svg.sccc-chevron-down { stroke: var(--hef-navy) !important; } .list-reload-btn-wrapper .icon-btn .es-icon { --icon-stroke: var(--hef-navy) !important; } .list-reload-btn-wrapper .icon-btn .es-icon path { fill: var(--hef-navy) !important; } .custom-sidebar-layout .sidebar-activities-main-frame .sidebar-image-actions .dropdown-toggle::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23004D40' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* destructive stays red; SCCC painted these coral too */ .grid-footer .btn.grid-remove-rows, .grid-footer .btn.grid-remove-all-rows { background: #DC2626 !important; } .custom-sidebar-layout .sidebar-activities-sections-container .attachment-row .close:hover, .custom-sidebar-layout .sidebar-activities-sections-container .attachment-row .remove-btn:hover { color: #DC2626 !important; } /* status pills: SCCC drew red AND grey pills coral; give each its own meaning back */ .sccc-list-layout .list-row-col.hidden-xs.ellipsis .indicator-pill.red, .sccc-list-layout .list-row-col.hidden-xs.ellipsis .indicator-pill-right.red, .sccc-list-layout .list-row-col.hidden-xs.ellipsis .indicator-pill-round.red { background: #DC2626 !important; } .sccc-list-layout .list-row-col.hidden-xs.ellipsis .indicator-pill.grey, .sccc-list-layout .list-row-col.hidden-xs.ellipsis .indicator-pill-right.grey, .sccc-list-layout .list-row-col.hidden-xs.ellipsis .indicator-pill-round.grey { background: var(--hef-gray-500) !important; } /* ---------- SCCC's lavender tile #DBB6FC and card #FAF5FF ---------- */ .sccc-select-icon, .sccc-select-item-icn { background: var(--hef-navy-tint) !important; } .sccc-number-card { background: var(--hef-band) !important; } /* ---------- Workspace buttons sccc_theme colours from JS (inline coral). Its JS also renames them once, 500ms after the desk starts ("Edit Dashboard" without the pencil, "+" without "New"); when the workspace renders later the defaults stay and "+ New" was cut to "+ ج..." with a dark pencil on navy. Same look either way ---------- */ .sccc-moved-edit-btn.btn-edit-workspace { background: var(--hef-navy) !important; color: #fff !important; } .sccc-moved-edit-btn.btn-new-workspace { background: #fff !important; border: 1px solid var(--hef-navy) !important; color: var(--hef-navy) !important; } .sccc-moved-edit-btn.btn-new-workspace > span, .sccc-moved-edit-btn.btn-edit-workspace > svg { display: none !important; /* hides only: never a visible display value here (it would beat Frappe's .hide) */ } .sccc-moved-edit-btn.btn-new-workspace > svg { --icon-stroke: currentColor; stroke: currentColor !important; } /* ---------- Lists: header 12/700, figures in tabular digits, IDs as links ---------- */ .list-row-head, .list-row-head * { font-size: var(--hef-size-caption) !important; font-weight: 700 !important; color: var(--hef-gray-500) !important; } .list-row, .number-widget-box .number, .frappe-control[data-fieldtype="Currency"] :is(input, .control-value), .frappe-control[data-fieldtype="Float"] :is(input, .control-value), .frappe-control[data-fieldtype="Int"] :is(input, .control-value) { font-variant-numeric: tabular-nums !important; } .list-row .list-subject a { color: var(--hef-teal) !important; font-weight: 700 !important; } /* ---------- Side rail: navy surfaces, 13/700 items, nothing under 12px ---------- */ .sccc-rail-panel, .sccc-rail-fixed.collapsed .sccc-brand, .sccc-rail-fixed.collapsed.hover-expanded .sccc-brand { background: var(--hef-navy) !important; } .sccc-tools-div { background: linear-gradient(0deg, rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.2)), var(--hef-navy) !important; } .sccc-select-trigger { box-shadow: 0 0 0 2px var(--hef-gold) !important; } .sccc-dashboard-btn { font-size: var(--hef-size-label) !important; font-weight: 700 !important; } .sccc-brand-sub, .sccc-section-label, .sccc-user-mail { font-size: var(--hef-size-caption) !important; } /* ---------- Rail brand: HEF emblem on top, SCCC's own trademark kept at the bottom ---------- */ /* sccc_theme hard-codes its badge in JS; the two text lines come from translations/ar.csv and en.csv */ /* HEF's all-white logo (hef-logo-dark.svg, as HEF sent it for dark backgrounds), whole, on the navy rail; 431x271, so 60x38 open and 48x30 closed */ .sccc-logo img { content: url('/assets/hef_sccc_theme_extend/images/hef-logo-dark.svg'); height: 38px !important; width: 60px !important; margin-top: 0 !important; } /* closed rail: fits the 64px panel above the module tile (hover-expanded keeps the open size) */ .sccc-rail-fixed.collapsed:not(.hover-expanded) .sccc-logo img { height: 30px !important; width: 48px !important; } /* loading splash: Frappe caps the logo at 100px, too small for the full HEF logo */ .splash img { max-width: 180px !important; max-height: 120px !important; } /* .sccc-panel-top is a flex column, so margin-top:auto pins this right above the tools divider */ .sccc-panel-top::after { content: ''; margin-top: auto; flex: none; height: 56px; /* user: bigger and on the left; the mark is 5:3, about 93x56 */ margin-bottom: 16px; background: url('/assets/sccc_theme/images/SCCC Logo - white.png') no-repeat left 16px center / contain; opacity: 0.85; } /* closed rail: small and centred in the 64px panel (hover-expanded shows the open size) */ .sccc-rail-fixed.collapsed:not(.hover-expanded) .sccc-panel-top::after { height: 28px; background-position: center; } /* ---------- Full width everywhere: sccc_theme un-caps only its own list and form layouts and leaves Bootstrap's 1290px .container on workspaces, pages (Settings, Tools), reports and the other list views (Report, Dashboard, Image, Calendar); same 16px inset as its layouts ---------- */ .page-container:not(.sccc-list-layout):not(.custom-sidebar-layout) { padding-inline: 16px; } .page-container:not(.sccc-list-layout):not(.custom-sidebar-layout) .container { max-width: none !important; } /* the list Report/Dashboard/Image/Calendar views also lose Bootstrap's 15px gutter, so their -15px rows ran 15px past the page edge */ .page-container:not(.sccc-list-layout):not(.custom-sidebar-layout) > .page-head > .container, .page-container:not(.sccc-list-layout):not(.custom-sidebar-layout) > .page-body.container { padding-inline: 15px !important; } /* Frappe's page-head row is 100% wide plus -15px margins; on RTL pages that leaves its left edge (the "+" and edit buttons) 30px inside the content card. Auto width lines it up with the card. */ .page-container:not(.sccc-list-layout):not(.custom-sidebar-layout) .page-head .container > .row { width: auto !important; } /* sccc_theme's list and form layouts: the same row starts 15px (list) or 23px (form) inside the page edge where the bell and the form's side strip sit; no end-side padding or margin puts the buttons there too */ .sccc-list-layout > .page-head, .custom-sidebar-layout > .page-head { padding-inline-end: 0 !important; } .sccc-list-layout > .page-head .container > .row, .custom-sidebar-layout > .page-head .container > .row { width: auto !important; margin-inline-end: 0 !important; } /* ---------- Buttons and inputs: one height per size, small rounded corners (SCCC forces 0) ---------- */ .btn, .frappe-control .form-control, .page-form .form-control { border-radius: var(--hef-radius) !important; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; } /* never set display here: a layered !important display would beat Frappe's .hide and show hidden buttons */ .page-head .page-actions .btn, .sccc-moved-edit-btn, .list-empty-create-btn { height: var(--hef-btn-height) !important; min-height: 0 !important; padding-block: 7px !important; font-size: var(--hef-size-body) !important; line-height: 20px !important; } .sccc-moved-edit-btn.btn-new-workspace { width: var(--hef-btn-height) !important; padding-inline: 0 !important; } .page-form .btn-sm, .page-form .btn-default { height: var(--hef-btn-height-sm) !important; } /* list pager (20/100/500/2500, load more): Frappe draws them 29px with 14px text */ .list-paging-area .btn { height: var(--hef-btn-height-sm) !important; padding-block: 0 !important; font-size: var(--hef-size-label) !important; line-height: calc(var(--hef-btn-height-sm) - 2px) !important; } /* sort control: sccc_theme draws one square 1px box around the field and order buttons */ .sort-selector { border-radius: var(--hef-radius) !important; } /* Linked Documents first, where ERPNext puts it (user): sccc_theme's form.js re-appends the block below every section; .form-page is a flex column, so order puts it back on top without touching the DOM */ .form-page > .form-dashboard, .tab-content > .tab-pane.active > .form-dashboard { order: -1; } /* tabbed forms keep the block in the first tab: make that pane a column so order applies (the active pane only, so this display value can never show a hidden tab) */ .tab-content > .tab-pane.active:has(> .form-dashboard) { display: flex !important; flex-direction: column; } /* linked-document badges: square, link text in SCCC purple */ .document-link-badge { border-radius: var(--hef-radius) !important; } .document-link-badge .badge-link { color: var(--hef-navy) !important; } /* ---------- Side menu text: full strength on the navy rail (SCCC greys it and lowers opacity to .7-.85) ---------- */ .sccc-brand-title, .sccc-select-label, .sccc-dashboard-btn, .sccc-dashboard-label, .sccc-text-label, .sccc-tool-txt, .sccc-user-name { color: var(--sccc-fg) !important; opacity: 1 !important; } .sccc-brand-sub, .sccc-section-label, .sccc-user-mail { color: var(--sccc-muted) !important; opacity: 1 !important; } /* ---------- Side menu icons: sccc_theme draws them as fixed-colour files (grey strokes, a purple module icon), so text colour cannot reach them; a filter can. Rail icons near-white like the text; the module icon sits on the light tile, so it goes dark. The HEF logo is left alone. ---------- */ /* the module icons also carry opacity="0.35" inside the SVG; each zero-offset drop-shadow stacks the shape on itself (35% -> 58% -> 82% -> 97%), so the strokes end near-solid white */ .sccc-rail-panel img:not(.sccc-logo img):not(.sccc-select-item-icn img):not(.sccc-select-icon img) { filter: brightness(0) invert(1) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) !important; opacity: 0.9 !important; } .sccc-select-item-icn img, .sccc-select-icon img { filter: brightness(0) !important; opacity: 0.8 !important; } /* ---------- Active list filters: sccc_theme outlines a filter field that holds a value in purple ---------- */ .page-form .standard-filter-section .form-group.has-value input, .page-form .standard-filter-section .form-group.has-value select, .page-form .standard-filter-section .form-group:has(input:not(:placeholder-shown)) input, .filter-selector .btn-group:has(.btn-primary-light) { border-color: var(--hef-navy) !important; } .filter-selector .filter-button .filter-label { background: var(--hef-navy) !important; /* applied-filter count badge */ } /* ---------- sccc_theme's Settings and Tools pages (page/configuration, page/tools_page): an inline