MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
ReisuDesign (talk | contribs) No edit summary |
ReisuDesign (talk | contribs) tracking table checkbox style |
||
| Line 1,192: | Line 1,192: | ||
flex-direction: wrap; | flex-direction: wrap; | ||
gap: 2px; | gap: 2px; | ||
} | |||
/* ========================================================= | |||
Progress Tracking — Checkbox Styling | |||
========================================================= */ | |||
/* ---------- Theme colors ---------- */ | |||
.skin-theme-clientpref-day { | |||
--checked: #aab667; | |||
--checkbox-mark: #f6f9dd; | |||
} | |||
.skin-theme-clientpref-night { | |||
--checked: #6c8049; | |||
--checkbox-mark: #f6f9dd; | |||
} | |||
/* ---------- Checkbox base ---------- */ | |||
table.progress-tracking-table .cdx-checkbox__icon { | |||
border: 2px solid transparent !important; | |||
border-radius: 5px; | |||
outline: none; | |||
text-align: center !important; | |||
background-color: var(--background-color-5) !important; | |||
} | |||
/* ---------- Checked checkbox ---------- */ | |||
table.progress-tracking-table .cdx-checkbox__input:checked + .cdx-checkbox__icon { | |||
background-color: var(--checked) !important; | |||
outline: 2px solid var(--checkbox-mark) !important; | |||
border: none !important; | |||
} | |||
/* Checkmark */ | |||
table.progress-tracking-table .cdx-checkbox__input:checked:not(:indeterminate) | |||
+ .cdx-checkbox__icon::before { | |||
content: "✓" !important; | |||
position: relative; | |||
left: 2px; | |||
top: -2px; | |||
margin: 0 !important; | |||
border: none !important; | |||
transform: rotate(0deg); | |||
font-weight: 900; | |||
color: var(--checkbox-mark); | |||
} | |||
/* ---------- Remove focus styling ---------- */ | |||
table.progress-tracking-table .cdx-checkbox__input:focus, | |||
table.progress-tracking-table .cdx-checkbox__input:focus-visible, | |||
table.progress-tracking-table .cdx-checkbox__input:focus + .cdx-checkbox__icon, | |||
table.progress-tracking-table .cdx-checkbox__input:focus-visible + .cdx-checkbox__icon, | |||
table.progress-tracking-table .cdx-checkbox__wrapper:has(.cdx-checkbox__input:focus), | |||
table.progress-tracking-table .cdx-checkbox__wrapper:has(.cdx-checkbox__input:focus-visible) { | |||
box-shadow: none !important; | |||
} | |||
/* ---------- Checked cell ---------- */ | |||
table.progress-tracking-table td.progress-tracker-checkbox-cell:has(input[type="checkbox"]:checked) { | |||
background-color: var(--checked); | |||
} | } | ||