MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
Created page with "→‎All CSS here will be loaded for users of the Citizen skin: :root.skin-citizen-dark { --color-surface-0: #11151d; --color-surface-1: #2b2f35; --color-surface-2: #e1e1e0; }"
 
No edit summary
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Citizen skin */
/* 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 {
:root.skin-citizen-dark {
  --color-surface-0: #11151d;
    /* Edited Colors to match Resonite Branding */
  --color-surface-1: #2b2f35;
    /* Based on Resonite Neutrals*/
  --color-surface-2: #e1e1e0;
    /* 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-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;
  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))
}
}

Latest revision as of 00:42, 4 June 2024

/* 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;*/

}

.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-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;
   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))
}