mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2026-09-03 05:10:16 +03:00
EthanHealy01
9d473fb435
Fixes #7189 Consolidates all 29 `no-duplicate-selectors` violations across 18 stylesheets by merging later duplicate rule blocks into the first occurrence. Where duplicates had conflicting values, the cascade-winning (later) value was kept, so computed styles are unchanged. Also: - Adds `frontend/stylelint.config.mjs` with only `no-duplicate-selectors` enabled (Prettier and the theme linter own everything else). - Adds a `frontend:lint:css` task, wired into `task frontend:lint` as a blocking check so regressions can't creep back in. - Lints all first-party CSS (`editor/**/*.css`, so `public/css` and any future non-`src` stylesheets are covered too), excluding only the vendored `cookieconsent.css` and build output via `ignoreFiles`. This surfaced and fixed 5 additional duplicate selectors in `cookieconsentCustomisation.css` that weren't in the original issue report. Note: `portal/views/Sources.css` goes beyond dedup — the whole `.portal-sources__connections*` block is deleted as dead code (unreferenced since the S3 connections redesign in #6965; only `-actions` in it was an actual duplicate). 🤖 Generated with [Claude Code](https://claude.ai/code)
255 lines
7.5 KiB
CSS
255 lines
7.5 KiB
CSS
/* Light theme variables */
|
||
:root {
|
||
--cc-bg: #ffffff;
|
||
--cc-primary-color: #1c1c1c;
|
||
--cc-secondary-color: #666666;
|
||
|
||
--cc-btn-primary-bg: #007bff;
|
||
--cc-btn-primary-color: #ffffff;
|
||
--cc-btn-primary-border-color: #007bff;
|
||
--cc-btn-primary-hover-bg: #0056b3;
|
||
--cc-btn-primary-hover-color: #ffffff;
|
||
--cc-btn-primary-hover-border-color: #0056b3;
|
||
|
||
--cc-btn-secondary-bg: #f1f3f4;
|
||
--cc-btn-secondary-color: #1c1c1c;
|
||
--cc-btn-secondary-border-color: #f1f3f4;
|
||
--cc-btn-secondary-hover-bg: #007bff;
|
||
--cc-btn-secondary-hover-color: #ffffff;
|
||
--cc-btn-secondary-hover-border-color: #007bff;
|
||
|
||
--cc-separator-border-color: #e0e0e0;
|
||
|
||
/* Toggle colors mirror Mantine Switch (light scheme) */
|
||
--cc-toggle-on-bg: var(--mantine-primary-color-filled, #007bff);
|
||
--cc-toggle-off-bg: var(--mantine-color-gray-3, #dee2e6);
|
||
--cc-toggle-on-knob-bg: var(--mantine-color-white, #ffffff);
|
||
--cc-toggle-off-knob-bg: var(--mantine-color-white, #ffffff);
|
||
|
||
--cc-toggle-enabled-icon-color: #ffffff;
|
||
--cc-toggle-disabled-icon-color: #ffffff;
|
||
|
||
--cc-toggle-readonly-bg: var(--mantine-color-disabled, #f1f3f4);
|
||
--cc-toggle-readonly-knob-bg: var(--mantine-color-gray-0, #f8f9fa);
|
||
--cc-toggle-readonly-knob-icon-color: transparent;
|
||
|
||
--cc-section-category-border: #e0e0e0;
|
||
|
||
--cc-cookie-category-block-bg: #f1f3f4;
|
||
--cc-cookie-category-block-border: #f1f3f4;
|
||
--cc-cookie-category-block-hover-bg: #e9eff4;
|
||
--cc-cookie-category-block-hover-border: #e9eff4;
|
||
|
||
--cc-cookie-category-expanded-block-bg: #f1f3f4;
|
||
--cc-cookie-category-expanded-block-hover-bg: #e9eff4;
|
||
|
||
--cc-footer-bg: #ffffff;
|
||
--cc-footer-color: #1c1c1c;
|
||
--cc-footer-border-color: #ffffff;
|
||
}
|
||
|
||
/* Dark theme variables */
|
||
.cc--darkmode {
|
||
--cc-bg: #2d2d2d;
|
||
--cc-primary-color: #e5e5e5;
|
||
--cc-secondary-color: #b0b0b0;
|
||
|
||
--cc-btn-primary-bg: #4dabf7;
|
||
--cc-btn-primary-color: #ffffff;
|
||
--cc-btn-primary-border-color: #4dabf7;
|
||
--cc-btn-primary-hover-bg: #3d3d3d;
|
||
--cc-btn-primary-hover-color: #ffffff;
|
||
--cc-btn-primary-hover-border-color: #3d3d3d;
|
||
|
||
--cc-btn-secondary-bg: #3d3d3d;
|
||
--cc-btn-secondary-color: #ffffff;
|
||
--cc-btn-secondary-border-color: #3d3d3d;
|
||
--cc-btn-secondary-hover-bg: #4dabf7;
|
||
--cc-btn-secondary-hover-color: #ffffff;
|
||
--cc-btn-secondary-hover-border-color: #4dabf7;
|
||
|
||
--cc-separator-border-color: #555555;
|
||
|
||
/* Toggle colors mirror Mantine Switch (dark scheme) */
|
||
--cc-toggle-on-bg: var(--mantine-primary-color-filled, #4dabf7);
|
||
--cc-toggle-off-bg: var(--mantine-color-dark-5, #555555);
|
||
--cc-toggle-on-knob-bg: var(--mantine-color-white, #ffffff);
|
||
--cc-toggle-off-knob-bg: var(--mantine-color-white, #ffffff);
|
||
|
||
--cc-toggle-enabled-icon-color: #2d2d2d;
|
||
--cc-toggle-disabled-icon-color: #2d2d2d;
|
||
|
||
--cc-toggle-readonly-bg: var(--mantine-color-disabled, #555555);
|
||
--cc-toggle-readonly-knob-bg: var(--mantine-color-dark-3, #8e8e8e);
|
||
--cc-toggle-readonly-knob-icon-color: transparent;
|
||
|
||
--cc-section-category-border: #555555;
|
||
|
||
--cc-cookie-category-block-bg: #3d3d3d;
|
||
--cc-cookie-category-block-border: #3d3d3d;
|
||
--cc-cookie-category-block-hover-bg: #4d4d4d;
|
||
--cc-cookie-category-block-hover-border: #4d4d4d;
|
||
|
||
--cc-cookie-category-expanded-block-bg: #3d3d3d;
|
||
--cc-cookie-category-expanded-block-hover-bg: #4d4d4d;
|
||
|
||
--cc-footer-bg: #2d2d2d;
|
||
--cc-footer-color: #e5e5e5;
|
||
--cc-footer-border-color: #2d2d2d;
|
||
}
|
||
.cm__body {
|
||
max-width: 90% !important;
|
||
flex-direction: row !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.cm__desc {
|
||
max-width: 70rem !important;
|
||
}
|
||
|
||
.cm__btns {
|
||
flex-direction: row-reverse !important;
|
||
gap: 10px !important;
|
||
padding-top: 3.4rem !important;
|
||
}
|
||
|
||
@media only screen and (max-width: 1400px) {
|
||
.cm__body {
|
||
max-width: 90% !important;
|
||
flex-direction: column !important;
|
||
align-items: normal !important;
|
||
}
|
||
|
||
.cm__btns {
|
||
padding-top: 1rem !important;
|
||
}
|
||
}
|
||
|
||
/* Toggle visibility fixes */
|
||
#cc-main .section__toggle {
|
||
opacity: 0 !important; /* Keep invisible but functional */
|
||
}
|
||
|
||
/* Track: flat fill in both themes, no outline ring or border */
|
||
#cc-main .toggle__icon {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: flex-start !important;
|
||
background: var(--cc-toggle-off-bg) !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
transition: background-color 150ms ease !important;
|
||
}
|
||
|
||
/* Thumb: small plain circle, vertically centred, no drop shadow */
|
||
#cc-main .toggle__icon-circle {
|
||
display: block !important;
|
||
position: absolute !important;
|
||
width: 14px !important;
|
||
height: 14px !important;
|
||
top: 3px !important;
|
||
left: 2.5px !important;
|
||
box-shadow: none !important;
|
||
transition:
|
||
transform 150ms ease,
|
||
background-color 150ms ease !important;
|
||
}
|
||
|
||
/* Mantine switches have no check/cross glyph inside the thumb */
|
||
#cc-main .toggle__icon-on,
|
||
#cc-main .toggle__icon-off {
|
||
display: none !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
position: absolute !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
/* Checked track visible in both themes, same flat Mantine look */
|
||
#cc-main .section__toggle:checked ~ .toggle__icon {
|
||
background: var(--cc-toggle-on-bg) !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Ensure toggle text is visible */
|
||
#cc-main .pm__section-title {
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
#cc-main .pm__section-desc {
|
||
color: var(--cc-secondary-color) !important;
|
||
}
|
||
|
||
/* Make sure the modal has proper contrast */
|
||
#cc-main .pm {
|
||
background: var(--cc-bg) !important;
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
/* Banner sits above the chat FAB but behind all modals and onboarding; value
|
||
is Z_INDEX_COOKIE_CONSENT_BANNER, set as this variable by useCookieConsent */
|
||
#cc-main {
|
||
z-index: var(--z-index-cookie-consent) !important;
|
||
}
|
||
|
||
/* Preferences dialog sits above the settings modal it opens from; value is
|
||
Z_INDEX_COOKIE_PREFERENCES_MODAL, set as this variable by useCookieConsent */
|
||
.show--preferences #cc-main {
|
||
z-index: var(--z-index-cookie-preferences) !important;
|
||
}
|
||
|
||
/* Ensure consent modal text is visible in both themes */
|
||
#cc-main .cm {
|
||
background: var(--cc-bg) !important;
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
#cc-main .cm__title {
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
#cc-main .cm__desc {
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
#cc-main .cm__footer {
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
#cc-main .cm__footer-links a,
|
||
#cc-main .cm__link {
|
||
color: var(--cc-primary-color) !important;
|
||
}
|
||
|
||
/* ── Category toggles restyled to match Mantine Switch (size sm) ──────────
|
||
Mantine sm metrics: 38×20 track, 14px plain thumb, 2.5px inline padding,
|
||
150ms ease transitions, no icon inside the thumb. Colors come from the
|
||
--cc-toggle-* variables above, which point at the Mantine palette. */
|
||
#cc-main .section__toggle,
|
||
#cc-main .section__toggle-wrapper,
|
||
#cc-main .toggle__icon,
|
||
#cc-main .toggle__label {
|
||
width: 38px !important;
|
||
height: 20px !important;
|
||
border-radius: 1000px !important;
|
||
}
|
||
|
||
/* Always-enabled categories = Mantine disabled switch (must out-prioritise
|
||
the !important checked-track rule above) */
|
||
#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
|
||
background: var(--cc-toggle-readonly-bg) !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
#cc-main .section__toggle:disabled {
|
||
cursor: not-allowed !important;
|
||
}
|
||
|
||
/* Checked thumb travel: 38 − 14 − 2.5 = 21.5px end position */
|
||
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
|
||
transform: translateX(19px) !important;
|
||
}
|