Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
/* Global Variables */
/* TODO: We should define these in another file maybe
See: https://www.w3schools.com/css/css3_variables.asp
*/
/* Dark Mode Only*/
:root.skin-citizen-dark {
/* Edited Colors to match Resonite Branding */
/* Based on Resonite Neutrals*/
/* Dark */
--color-surface-0: #11151d;
/* Neutrals: Mid */
--color-surface-1: #2b2f35;
/* Neutrals: Light (disabled for now Prime needs to talk to Chroma) */
/*--color-surface-2: #e1e1e0;*/
/* Based on resonite Mid Colors */
/* Cyan Hero*/
--color-primary: #61d1fa;
/* Red Mid*/
--color-destructive: #ae5458;
/* Green Mid TODO: this clashes with the below block*/
/*--color-success: #3f9e44;*/
/* Orange Mid TODO: this clashes with the below block*/
/*--color-warning: #a0a14e;*/
}
:root {
--color-brand-hero-cyan: #61d1fa40;
--color-brand-hero-green: #59eb5c40;
--color-brand-hero-orange: #e69e5040;
--color-brand-hero-red: #ff767640;
--color-information: var(--color-brand-hero-cyan);
--color-suggestion: var(--color-brand-hero-green);
--color-success: var(--color-brand-hero-green);
--color-warning: var(--color-brand-hero-orange);
--color-danger: var(--color-brand-hero-red);
--color-translate-progress: #59eb5c;
--color-translate-progress-empty: var(--color-surface-0);
}
/* Invert the icons for the translate screen(they're black by default) */
.skin-citizen-dark .ext-translate-language-icon {
filter: var(--filter-invert);
}
.skin-citizen-dark .ext-translate-language-selector-expand {
filter: var(--filter-invert);
}
/* Make the translation progress stuff larger */
.skin-citizen .mw-pt-languages-list .mw-pt-progress {
display: flex;
}
.skin-citizen .mw-pt-progress::after {
width: 1.2em;
height: 1.2em;
position: relative;
top: 2px;
}
/* Progress icon colors */
.skin-citizen .mw-pt-progress--stub::after {
background: conic-gradient(var(--color-translate-progress) 0%, var(--color-translate-progress-empty) 0% 100%)
}
.skin-citizen .mw-pt-progress--low::after {
background: conic-gradient(var(--color-translate-progress) 0%, var(--color-translate-progress-empty) 0% 100%)
}
.skin-citizen .mw-pt-progress--med::after {
border: 1px solid var(--color-translate-progress);
background: conic-gradient(var(--color-translate-progress) 0% 50%, var(--color-translate-progress-empty) 50.1% 100%)
}
.skin-citizen .mw-pt-progress--high::after {
border: 1px solid var(--color-translate-progress);
background: conic-gradient(var(--color-translate-progress) 0% 70%, var(--color-translate-progress-empty) 70.09999999999999% 100%)
}
.skin-citizen .mw-pt-progress--complete::after {
border: 1px solid var(--color-translate-progress);
background: conic-gradient(var(--color-translate-progress-empty) 0, var(--color-translate-progress) 0)
}
/* Slightly tweak the coloring of the edit buttons */
#ca-ve-edit > a {
background-color: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2))
}
#ca-edit > a {
background-color: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2))
}