MediaWiki:Citizen.css

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)
• Edge: Hold Ctrl while clicking Refresh, or 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-theme-clientpref-night {
    /* 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;*/

}

.skin-citizen {  
    --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-theme-clientpref-night .ext-translate-language-icon {
   filter: var(--filter-invert);
}
.skin-theme-clientpref-night .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;
   left: 10px;
}

/* 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))
}

/* https://github.com/Yellow-Dog-Man/resonite-wiki/issues/12 */
:root.skin-theme-clientpref-night {
    --color-disabled-oklch__l: 70%;
    --color-inverted: #000;
}

.skin-citizen .skin-theme-clientpref-night select {
	color: var(--color-emphasized);
	background-color: transparent;
	border: 0px !important;
}

.skin-citizen .skin-theme-clientpref-night select[disabled] {
	background-color: var(--color-surface-1) !important;
	color: var(--color-disabled);
	border-color: var(--border-color-disabled);
}

.skin-citizen .skin-theme-clientpref-night select[disabled] ~ label {
	background-color: var(--color-surface-1) !important;
	color: var(--color-disabled);
}

.skin-citizen .skin-theme-clientpref-night select option {
	background-color: var(--color-surface-1);
}

/* header stuff from StarCitizen */
:root {
--space-unit:1rem;
  --space-xxs:calc(0.25 * var(--space-unit));
  --space-xs:calc(0.5 * var(--space-unit));
  --space-sm:calc(0.75 * var(--space-unit));
  --space-md:var(--space-unit);
  --space-lg:calc(1.25 * var(--space-unit));
  --space-xl:calc(1.5 * var(--space-unit));
  --space-xxl:calc(2 * var(--space-unit));
  --transition-delay-menu:100ms;
  --transition-timing-function-ease:cubic-bezier(0.44,0.21,0,1);
  --transition-timing-function-ease-in:cubic-bezier(0.75,0,1,1);
  --transition-timing-function-ease-out:cubic-bezier(0.215,0.61,0.355,1);
  --transform-image-hover:scale(1.1);
  --border-base:var(--border-width-base) solid var(--border-color-base);
  --border-subtle:var(--border-width-base) solid var(--border-color-subtle);
  --border-width-base:1px;
  --border-width-thick:2px;
  --border-radius-base:4px;
  --border-radius-sharp:0;
  --border-radius-pill:9999px;
  --border-radius-circle:50%;
  --box-shadow-small:0 0 0 1px var(--border-color-base);
  --box-shadow-medium:0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 1.6px 1.8px -0.8px var(--box-shadow-color-alpha-base),0 4px 4.5px -1.7px var(--box-shadow-color-alpha-base),0 9.8px 11px -2.5px var(--box-shadow-color-alpha-base);
  --box-shadow-large:0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 2.8px 3.1px -0.4px var(--box-shadow-color-alpha-base),0 5.3px 6px -0.7px var(--box-shadow-color-alpha-base),0 8.7px 9.8px -1.1px var(--box-shadow-color-alpha-base),0 13.9px 15.6px -1.4px var(--box-shadow-color-alpha-base),0 21.8px 24.5px -1.8px var(--box-shadow-color-alpha-base);
  --font-family-base:var(--font-family-citizen-base),var(--font-family-language-base),system-ui,-apple-system,sans-serif;
  --font-family-serif:var(--font-family-citizen-serif),var(--font-family-language-serif),'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
  --font-family-monospace:var(--font-family-citizen-monospace),var(--font-family-language-monospace),'Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
  --font-weight-normal:400;
  --font-weight-medium:calc(var(--font-weight-normal) + 100);
  --font-weight-semi-bold:calc(var(--font-weight-normal) + 200);
  --font-weight-bold:calc(var(--font-weight-normal) + 300);
  --font-family-overline:var(--font-family-base);
  --font-weight-overline:var(--font-weight-medium);
  --font-size-overline:var(--font-size-small);
  --line-height-overline:var(--line-height-small);
  --text-transform-overline:none;
  --letter-spacing-overline:normal;
  --header-direction:row;
  --header-size-inline-start:0px;
  --header-size-inline-end:0px;
  --header-size-block-start:0px;
  --header-size-block-end:0px;
  --header-inset-block-start:0px;
  --header-inset-block-end:0px;
  --header-inset-inline-start:0px;
  --header-inset-inline-end:0px;
  --header-border-block-start-width:0px;
  --header-border-block-end-width:0px;
  --header-border-inline-start-width:0px;
  --header-border-inline-end-width:0px;
  --color-primary__h:var(--color-progressive-hsl__h);
  --color-primary__s:var(--color-progressive-hsl__s);
  --color-primary__l:var(--color-progressive-hsl__l);
  --font-size-base:var(--font-size-medium);
  --line-height:1.6;
  --line-height-xxx-small:1.25;
  --line-height-xx-small:1.375;
  --box-shadow-drop-small:var(--box-shadow-small);
  --box-shadow-drop-medium:var(--box-shadow-medium);
  --box-shadow-drop-xx-large:var(--box-shadow-large);
}