/* ============================================================================ Stinson CRM -- theme presets ---------------------------------------------------------------------------- Seven appearance presets, selected on the Settings page (stinson_admin:settings) and applied by crm/js/sas_theme.js. TWO ATTRIBUTES, ON PURPOSE -------------------------- `data-theme` stays exactly what Django expects: "light" or "dark". Django's own admin/js/theme.js and our admin_theme.css both key off it, so a preset that only set some third value would leave Django's core variables on their light defaults -- dark surfaces with light-theme chrome underneath. Every preset therefore declares a *base mode* and sets `data-theme` to it. `data-sas-theme` carries the preset id and re-points the tokens on top. THE CHROME NOW FLIPS -------------------- It used to be pinned dark in every theme, because the "STINSON" wordmark in stinson_logo_red_white.png is white and disappeared on a light bar. That is solved with a second asset -- stinson_logo_red_dark.png, the same lockup with the wordmark recoloured to near-black and the red mark untouched -- swapped in by `content: url(...)` on the light-bar themes. So `--sas-chrome-*` are now real per-theme values rather than fixed ones. `--sas-chrome-accent-ink` still does NOT track the mode blindly: it is ink sitting on an accent-tinted chrome surface, and it is set per theme. Every theme with a light bar MUST set it -- the :root default is a near-white pink for dark bars, and leaving it to fall through made the current nav item and the log-out icon invisible on Light and Sand. WHAT EACH BLOCK SETS -------------------- Three families, and the third is the one that makes a theme reach the whole CRM rather than only our own components: 1. `--sas-*` the Borealis design layer (borealis.css, admin_list.css) 2. `--sas-chrome-*` the toolbar 3. Django admin core (`--body-*`, `--breadcrumbs-*`, `--button-*`, `--selected-row`, `--hairline-color`, ...) plus the `--stinson-*` page variables used by admin_theme.css / admin_subpages.css LOAD ORDER IS LOAD-BEARING -------------------------- `html[data-sas-theme="x"]` and `html[data-theme="light"]` have identical specificity (0,1,1), so this file MUST load after admin_theme.css and borealis.css or the baseline wins. It is last in base_site.html's extrastyle. Accent is deliberately NOT part of a preset -- it is an independent user choice applied as inline custom properties on (inline beats every rule here). High Contrast is the one theme that ships its own accent; a user-chosen accent still overrides it, which is the correct precedence. Bump ASSET_VERSION in core/admin_site.py after editing this file. ========================================================================= */ :root { /* Ink for text on an accent-tinted surface. borealis.css hardcodes #ffdfe0 -- a red-tinted white -- in three places; it becomes a token here so a custom accent carries through, and those rules are restated at the bottom. Two tokens: chrome ink and page ink are set independently per theme, because a near-white pink is right on a dark toolbar and illegible on a light page surface (the selected density pill proved it). These defaults are the DARK-bar values. A light-bar theme has to override both -- see the Light and Sand blocks. */ --sas-chrome-accent-ink: #ffdfe0; --sas-accent-ink: #ffdfe0; } /* --- Light (light base) ----------------------------------------------- */ html[data-sas-theme="light"] { /* Borealis design layer */ --sas-bg-0: #eef1f6; --sas-bg-1: #ffffff; --sas-bg-2: #f4f7fb; --sas-bg-3: #e7ecf4; --sas-line: rgba(11, 35, 64, 0.13); --sas-line-strong: rgba(11, 35, 64, 0.24); --sas-fg: #16233a; --sas-fg-2: rgba(22, 35, 58, 0.82); --sas-fg-3: rgba(22, 35, 58, 0.64); /* Toolbar */ --sas-chrome-grad-a: #ffffff; --sas-chrome-grad-b: #f1f4f9; --sas-chrome-fg: #16233a; --sas-chrome-fg-2: rgba(22, 35, 58, 0.80); --sas-chrome-fg-3: rgba(22, 35, 58, 0.64); --sas-chrome-surface: #f4f7fb; --sas-chrome-surface-hover: #e7ecf4; --sas-chrome-line: rgba(11, 35, 64, 0.12); --sas-chrome-line-strong: rgba(11, 35, 64, 0.22); --sas-accent-ink: #8c1c21; /* This theme's bar is white, so chrome ink is the same deep shade as page ink -- the :root default is a near-white pink for dark bars and vanishes here. */ --sas-chrome-accent-ink: #8c1c21; /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #ffffff; --body-fg: #16233a; --body-quiet-color: rgba(22, 35, 58, 0.64); --body-medium-color: rgba(22, 35, 58, 0.82); --body-loud-color: #0b1624; --link-fg: #1a4367; --link-hover-color: #12314d; --link-selected-fg: #1a4367; --hairline-color: rgba(11, 35, 64, 0.13); --border-color: rgba(11, 35, 64, 0.24); --breadcrumbs-bg: #f4f7fb; --breadcrumbs-fg: rgba(22, 35, 58, 0.64); --breadcrumbs-link-fg: rgba(22, 35, 58, 0.82); --darkened-bg: #f4f7fb; --selected-bg: #e7ecf4; --selected-row: var(--sas-red-soft); --object-tools-bg: #e7ecf4; --object-tools-fg: #16233a; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #e7ecf4; --button-fg: #16233a; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #eef1f6; --stinson-surface-bg: #ffffff; --stinson-row-bg: #f4f7fb; --stinson-input-bg: #f4f7fb; --stinson-blue-900: #16233a; --stinson-blue-700: #1a4367; --stinson-subpage-border: rgba(11, 35, 64, 0.13); } /* The white wordmark would vanish on this theme's light bar. */ html[data-sas-theme="light"] body.sas-chrome #header .sas-brand-logo { content: url("../img/stinson_logo_red_dark.png"); } /* --- Dark (dark base) ------------------------------------------------ */ html[data-sas-theme="dark"] { /* Borealis design layer */ --sas-bg-0: #0a0a0b; --sas-bg-1: #101012; --sas-bg-2: #16161a; --sas-bg-3: #1e1e23; --sas-line: rgba(255, 255, 255, 0.08); --sas-line-strong: rgba(255, 255, 255, 0.16); --sas-fg: #f1f1f2; --sas-fg-2: rgba(241, 241, 242, 0.74); --sas-fg-3: rgba(241, 241, 242, 0.54); /* Toolbar */ --sas-chrome-grad-a: #131316; --sas-chrome-grad-b: #0d0d0f; --sas-chrome-fg: #f1f1f2; --sas-chrome-fg-2: rgba(241, 241, 242, 0.74); --sas-chrome-fg-3: rgba(241, 241, 242, 0.54); --sas-chrome-surface: #16161a; --sas-chrome-surface-hover: #1e1e23; --sas-chrome-line: rgba(255, 255, 255, 0.09); --sas-chrome-line-strong: rgba(255, 255, 255, 0.16); /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #101012; --body-fg: #f1f1f2; --body-quiet-color: rgba(241, 241, 242, 0.54); --body-medium-color: rgba(241, 241, 242, 0.74); --body-loud-color: #ffffff; --link-fg: #9ab8d8; --link-hover-color: #c6dcf0; --link-selected-fg: #9ab8d8; --hairline-color: rgba(255, 255, 255, 0.08); --border-color: rgba(255, 255, 255, 0.16); --breadcrumbs-bg: #16161a; --breadcrumbs-fg: rgba(241, 241, 242, 0.54); --breadcrumbs-link-fg: rgba(241, 241, 242, 0.74); --darkened-bg: #16161a; --selected-bg: #1e1e23; --selected-row: var(--sas-red-soft); --object-tools-bg: #1e1e23; --object-tools-fg: #f1f1f2; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #1e1e23; --button-fg: #f1f1f2; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #0a0a0b; --stinson-surface-bg: #101012; --stinson-row-bg: #16161a; --stinson-input-bg: #16161a; --stinson-blue-900: #f1f1f2; --stinson-blue-700: #9ab8d8; --stinson-subpage-border: rgba(255, 255, 255, 0.08); } /* --- Midnight (dark base) -------------------------------------------- */ html[data-sas-theme="midnight"] { /* Borealis design layer */ --sas-bg-0: #070b16; --sas-bg-1: #0c1222; --sas-bg-2: #121a2e; --sas-bg-3: #1a2440; --sas-line: rgba(148, 180, 255, 0.10); --sas-line-strong: rgba(148, 180, 255, 0.20); --sas-fg: #e8edf9; --sas-fg-2: rgba(232, 237, 249, 0.74); --sas-fg-3: rgba(232, 237, 249, 0.54); /* Toolbar */ --sas-chrome-grad-a: #101830; --sas-chrome-grad-b: #070b16; --sas-chrome-fg: #e8edf9; --sas-chrome-fg-2: rgba(232, 237, 249, 0.74); --sas-chrome-fg-3: rgba(232, 237, 249, 0.54); --sas-chrome-surface: #121a2e; --sas-chrome-surface-hover: #1a2440; --sas-chrome-line: rgba(148, 180, 255, 0.12); --sas-chrome-line-strong: rgba(148, 180, 255, 0.22); /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #0c1222; --body-fg: #e8edf9; --body-quiet-color: rgba(232, 237, 249, 0.54); --body-medium-color: rgba(232, 237, 249, 0.74); --body-loud-color: #f4f7ff; --link-fg: #8ab4ff; --link-hover-color: #b9d2ff; --link-selected-fg: #8ab4ff; --hairline-color: rgba(148, 180, 255, 0.10); --border-color: rgba(148, 180, 255, 0.20); --breadcrumbs-bg: #121a2e; --breadcrumbs-fg: rgba(232, 237, 249, 0.54); --breadcrumbs-link-fg: rgba(232, 237, 249, 0.74); --darkened-bg: #121a2e; --selected-bg: #1a2440; --selected-row: var(--sas-red-soft); --object-tools-bg: #1a2440; --object-tools-fg: #e8edf9; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #1a2440; --button-fg: #e8edf9; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #070b16; --stinson-surface-bg: #0c1222; --stinson-row-bg: #121a2e; --stinson-input-bg: #121a2e; --stinson-blue-900: #e8edf9; --stinson-blue-700: #8ab4ff; --stinson-subpage-border: rgba(148, 180, 255, 0.10); } /* --- Graphite (dark base) -------------------------------------------- */ html[data-sas-theme="graphite"] { /* Borealis design layer */ --sas-bg-0: #0d0d0d; --sas-bg-1: #141414; --sas-bg-2: #1b1b1b; --sas-bg-3: #242424; --sas-line: rgba(255, 255, 255, 0.09); --sas-line-strong: rgba(255, 255, 255, 0.18); --sas-fg: #ededed; --sas-fg-2: rgba(237, 237, 237, 0.74); --sas-fg-3: rgba(237, 237, 237, 0.54); /* Toolbar */ --sas-chrome-grad-a: #1a1a1a; --sas-chrome-grad-b: #0d0d0d; --sas-chrome-fg: #ededed; --sas-chrome-fg-2: rgba(237, 237, 237, 0.74); --sas-chrome-fg-3: rgba(237, 237, 237, 0.54); --sas-chrome-surface: #1b1b1b; --sas-chrome-surface-hover: #242424; --sas-chrome-line: rgba(255, 255, 255, 0.10); --sas-chrome-line-strong: rgba(255, 255, 255, 0.18); /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #141414; --body-fg: #ededed; --body-quiet-color: rgba(237, 237, 237, 0.54); --body-medium-color: rgba(237, 237, 237, 0.74); --body-loud-color: #fafafa; --link-fg: #a9c2dc; --link-hover-color: #cbdcee; --link-selected-fg: #a9c2dc; --hairline-color: rgba(255, 255, 255, 0.09); --border-color: rgba(255, 255, 255, 0.18); --breadcrumbs-bg: #1b1b1b; --breadcrumbs-fg: rgba(237, 237, 237, 0.54); --breadcrumbs-link-fg: rgba(237, 237, 237, 0.74); --darkened-bg: #1b1b1b; --selected-bg: #242424; --selected-row: var(--sas-red-soft); --object-tools-bg: #242424; --object-tools-fg: #ededed; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #242424; --button-fg: #ededed; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #0d0d0d; --stinson-surface-bg: #141414; --stinson-row-bg: #1b1b1b; --stinson-input-bg: #1b1b1b; --stinson-blue-900: #ededed; --stinson-blue-700: #a9c2dc; --stinson-subpage-border: rgba(255, 255, 255, 0.09); } /* --- Forest (dark base) ---------------------------------------------- */ html[data-sas-theme="forest"] { /* Borealis design layer */ --sas-bg-0: #070d0a; --sas-bg-1: #0c1611; --sas-bg-2: #111e17; --sas-bg-3: #182a20; --sas-line: rgba(150, 230, 190, 0.10); --sas-line-strong: rgba(150, 230, 190, 0.20); --sas-fg: #e6f2ea; --sas-fg-2: rgba(230, 242, 234, 0.74); --sas-fg-3: rgba(230, 242, 234, 0.54); /* Toolbar */ --sas-chrome-grad-a: #10201a; --sas-chrome-grad-b: #070d0a; --sas-chrome-fg: #e6f2ea; --sas-chrome-fg-2: rgba(230, 242, 234, 0.74); --sas-chrome-fg-3: rgba(230, 242, 234, 0.54); --sas-chrome-surface: #111e17; --sas-chrome-surface-hover: #182a20; --sas-chrome-line: rgba(150, 230, 190, 0.12); --sas-chrome-line-strong: rgba(150, 230, 190, 0.22); /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #0c1611; --body-fg: #e6f2ea; --body-quiet-color: rgba(230, 242, 234, 0.54); --body-medium-color: rgba(230, 242, 234, 0.74); --body-loud-color: #f2fbf6; --link-fg: #6fd39b; --link-hover-color: #a4e8c3; --link-selected-fg: #6fd39b; --hairline-color: rgba(150, 230, 190, 0.10); --border-color: rgba(150, 230, 190, 0.20); --breadcrumbs-bg: #111e17; --breadcrumbs-fg: rgba(230, 242, 234, 0.54); --breadcrumbs-link-fg: rgba(230, 242, 234, 0.74); --darkened-bg: #111e17; --selected-bg: #182a20; --selected-row: var(--sas-red-soft); --object-tools-bg: #182a20; --object-tools-fg: #e6f2ea; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #182a20; --button-fg: #e6f2ea; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #070d0a; --stinson-surface-bg: #0c1611; --stinson-row-bg: #111e17; --stinson-input-bg: #111e17; --stinson-blue-900: #e6f2ea; --stinson-blue-700: #6fd39b; --stinson-subpage-border: rgba(150, 230, 190, 0.10); } /* --- Sand (light base) ------------------------------------------------ */ html[data-sas-theme="sand"] { /* Borealis design layer */ --sas-bg-0: #ebe3d6; --sas-bg-1: #fdfaf4; --sas-bg-2: #f5eee2; --sas-bg-3: #e6dccb; --sas-line: rgba(74, 58, 36, 0.14); --sas-line-strong: rgba(74, 58, 36, 0.26); --sas-fg: #2e2519; --sas-fg-2: rgba(46, 37, 25, 0.82); --sas-fg-3: rgba(46, 37, 25, 0.66); /* Toolbar */ --sas-chrome-grad-a: #fdfaf4; --sas-chrome-grad-b: #f2eade; --sas-chrome-fg: #2e2519; --sas-chrome-fg-2: rgba(46, 37, 25, 0.80); --sas-chrome-fg-3: rgba(46, 37, 25, 0.66); --sas-chrome-surface: #f5eee2; --sas-chrome-surface-hover: #e6dccb; --sas-chrome-line: rgba(74, 58, 36, 0.13); --sas-chrome-line-strong: rgba(74, 58, 36, 0.24); --sas-accent-ink: #8c1c21; /* Light bar -- see the note on the Light preset. */ --sas-chrome-accent-ink: #8c1c21; /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #fdfaf4; --body-fg: #2e2519; --body-quiet-color: rgba(46, 37, 25, 0.66); --body-medium-color: rgba(46, 37, 25, 0.82); --body-loud-color: #1e1810; --link-fg: #8a5a1f; --link-hover-color: #6b430f; --link-selected-fg: #8a5a1f; --hairline-color: rgba(74, 58, 36, 0.14); --border-color: rgba(74, 58, 36, 0.26); --breadcrumbs-bg: #f5eee2; --breadcrumbs-fg: rgba(46, 37, 25, 0.66); --breadcrumbs-link-fg: rgba(46, 37, 25, 0.82); --darkened-bg: #f5eee2; --selected-bg: #e6dccb; --selected-row: var(--sas-red-soft); --object-tools-bg: #e6dccb; --object-tools-fg: #2e2519; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #e6dccb; --button-fg: #2e2519; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #ebe3d6; --stinson-surface-bg: #fdfaf4; --stinson-row-bg: #f5eee2; --stinson-input-bg: #f5eee2; --stinson-blue-900: #2e2519; --stinson-blue-700: #8a5a1f; --stinson-subpage-border: rgba(74, 58, 36, 0.14); } /* The white wordmark would vanish on this theme's light bar. */ html[data-sas-theme="sand"] body.sas-chrome #header .sas-brand-logo { content: url("../img/stinson_logo_red_dark.png"); } /* --- High Contrast (dark base) --------------------------------------- */ html[data-sas-theme="contrast"] { /* Borealis design layer */ --sas-bg-0: #000000; --sas-bg-1: #000000; --sas-bg-2: #0a0a0a; --sas-bg-3: #161616; --sas-line: rgba(255, 255, 255, 0.32); --sas-line-strong: rgba(255, 255, 255, 0.58); --sas-fg: #ffffff; --sas-fg-2: #e8e8e8; --sas-fg-3: #c8c8c8; /* Toolbar */ --sas-chrome-grad-a: #0a0a0a; --sas-chrome-grad-b: #000000; --sas-chrome-fg: #ffffff; --sas-chrome-fg-2: #e8e8e8; --sas-chrome-fg-3: #c8c8c8; --sas-chrome-surface: #0a0a0a; --sas-chrome-surface-hover: #1c1c1c; --sas-chrome-line: rgba(255, 255, 255, 0.34); --sas-chrome-line-strong: rgba(255, 255, 255, 0.60); --sas-accent-ink: #fff6bd; --sas-chrome-accent-ink: #fff6bd; /* This theme's accent is part of its identity. A user-chosen accent is applied inline on and still overrides it. */ --sas-red: #ffd400; --sas-red-bright: #ffe14d; --sas-red-soft: rgba(255, 212, 0, 0.20); --sas-red-line: rgba(255, 225, 77, 0.75); --stinson-accent: #ffd400; --stinson-accent-rgb: 255, 212, 0; --stinson-accent-2: #ffe14d; --stinson-accent-2-rgb: 255, 225, 77; /* Django admin core -- this is what carries the theme onto stock pages */ --body-bg: #000000; --body-fg: #ffffff; --body-quiet-color: #c8c8c8; --body-medium-color: #e8e8e8; --body-loud-color: #ffffff; --link-fg: #ffd400; --link-hover-color: #ffe866; --link-selected-fg: #ffd400; --hairline-color: rgba(255, 255, 255, 0.32); --border-color: rgba(255, 255, 255, 0.58); --breadcrumbs-bg: #0a0a0a; --breadcrumbs-fg: #c8c8c8; --breadcrumbs-link-fg: #e8e8e8; --darkened-bg: #0a0a0a; --selected-bg: #161616; --selected-row: var(--sas-red-soft); --object-tools-bg: #161616; --object-tools-fg: #ffffff; --object-tools-hover-bg: var(--sas-red); --primary: var(--sas-red); --secondary: var(--sas-red); --accent: var(--sas-red-bright); --button-bg: #161616; --button-fg: #ffffff; --button-hover-bg: var(--sas-red); --default-button-bg: var(--sas-red); --default-button-hover-bg: var(--sas-red-bright); /* Stinson page variables (admin_theme.css, admin_subpages.css) */ --stinson-page-bg: #000000; --stinson-surface-bg: #000000; --stinson-row-bg: #0a0a0a; --stinson-input-bg: #0a0a0a; --stinson-blue-900: #ffffff; --stinson-blue-700: #ffd400; --stinson-subpage-border: rgba(255, 255, 255, 0.32); } /* ============================================================================ Chrome, driven by the tokens above borealis.css hardcodes the header gradient and pins it dark. These restate its selectors exactly -- equal specificity, and this file loads later, so they win; the !important flags match the originals'. The staging variant in borealis.css carries an extra class, so its red underline still wins. ========================================================================= */ body.sas-chrome #header { background: linear-gradient(180deg, var(--sas-chrome-grad-a), var(--sas-chrome-grad-b)) !important; border-bottom: 1px solid var(--sas-chrome-line) !important; } /* ============================================================================ Accent ink -- restated from borealis.css so a custom accent carries through. ========================================================================= */ /* On the toolbar, which now flips, so it uses the chrome ink token. */ body.sas-chrome #header .sas-nav-item[aria-current="page"] { color: var(--sas-chrome-accent-ink) !important; } body.sas-chrome #user-tools .sas-icon-btn.sas-danger:hover { color: var(--sas-chrome-accent-ink) !important; } /* On a page surface, so it follows the page ink token. */ .sas-pill[aria-selected="true"], .sas-pill.is-active { color: var(--sas-accent-ink); } /* ============================================================================ Row density -- changelist tables only. "cozy" is the stock admin and deliberately has no rules, so clearing the attribute returns the table to exactly what Django ships. !important is load-bearing here, not laziness. admin_list.css has `.stinson-subpage #result_list tbody td` and admin_subpages.css has `.stinson-subpage #result_list td` -- both (1,1,2), the same specificity as the natural selector for these rules -- and those page stylesheets load AFTER this file on every subpage, so they win on order. Some are narrower still (`.stinson-subpage.model-worklog.change-list #result_list td`), so no reasonable specificity bump wins them all. Density is an explicit user preference and should outrank a page default, which is what !important says. ========================================================================= */ html[data-sas-density="compact"] #result_list th, html[data-sas-density="compact"] #result_list td { padding: 3px 8px !important; line-height: 1.45 !important; } html[data-sas-density="compact"] #result_list tbody th, html[data-sas-density="compact"] #result_list tbody td { font-size: var(--sas-t-xs) !important; } html[data-sas-density="compact"] #result_list td a, html[data-sas-density="compact"] #result_list th a { font-size: inherit !important; } html[data-sas-density="comfortable"] #result_list th, html[data-sas-density="comfortable"] #result_list td { padding: 11px 12px !important; line-height: 1.6 !important; }