mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-11 22:16:22 +00:00
111 lines
2.6 KiB
Plaintext
111 lines
2.6 KiB
Plaintext
/*
|
|
* Citizen - CSS variables
|
|
* https://starcitizen.tools
|
|
*/
|
|
|
|
@import '../../variables.less';
|
|
|
|
/**
|
|
* Base theme
|
|
*/
|
|
:root {
|
|
--font-grade: 0;
|
|
|
|
/* Foreground Colors */
|
|
--color-syntax-red: @color-syntax-red;
|
|
--color-syntax-orange: @color-syntax-orange;
|
|
--color-syntax-yellow: @color-syntax-yellow;
|
|
--color-syntax-green: @color-syntax-green;
|
|
--color-syntax-cyan: @color-syntax-cyan;
|
|
--color-syntax-blue: @color-syntax-blue;
|
|
--color-syntax-paleblue: @color-syntax-paleblue;
|
|
--color-syntax-purple: @color-syntax-purple;
|
|
--color-syntax-brown: @color-syntax-brown;
|
|
--color-syntax-pink: @color-syntax-pink;
|
|
--color-syntax-violet: @color-syntax-violet;
|
|
--color-syntax-grey: @color-syntax-grey;
|
|
|
|
/* Size */
|
|
--size-icon: @size-icon;
|
|
|
|
/* Filter */
|
|
--filter-invert-primary: invert( 1 ) hue-rotate( 180deg );
|
|
--filter-invert-fixed: invert( 1 ) hue-rotate( 180deg );
|
|
|
|
--overflow-gradient-size: 2rem;
|
|
}
|
|
|
|
html {
|
|
/* Size */
|
|
--header-size: @header-size;
|
|
--header-card-maxheight: 80vh;
|
|
--width-layout: @width-layout;
|
|
--width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )';
|
|
--width-toc: @width-toc;
|
|
--toolbar-size: 2.5rem;
|
|
|
|
/* Margin */
|
|
--margin-layout: ~'calc( ( 100vw - var( --width-layout ) ) / 2 )';
|
|
|
|
/* Padding */
|
|
--padding-page: @padding-page;
|
|
}
|
|
|
|
:lang( ja ),
|
|
:lang( ko ),
|
|
:lang( zh ) {
|
|
/* CJK languages need increased line-height for readability */
|
|
--line-height: 1.75;
|
|
}
|
|
|
|
.theme-dark-old() {
|
|
--color-syntax-red: @color-syntax-red-dark;
|
|
--color-syntax-orange: @color-syntax-orange-dark;
|
|
--color-syntax-yellow: @color-syntax-yellow-dark;
|
|
--color-syntax-green: @color-syntax-green-dark;
|
|
--color-syntax-cyan: @color-syntax-cyan-dark;
|
|
--color-syntax-blue: @color-syntax-blue-dark;
|
|
--color-syntax-paleblue: @color-syntax-paleblue-dark;
|
|
--color-syntax-purple: @color-syntax-purple-dark;
|
|
--color-syntax-brown: @color-syntax-brown-dark;
|
|
--color-syntax-pink: @color-syntax-pink-dark;
|
|
--color-syntax-violet: @color-syntax-violet-dark;
|
|
}
|
|
/**
|
|
* Dark theme
|
|
*/
|
|
:root.skin-theme-clientpref-night {
|
|
.theme-dark-old();
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
:root.skin-theme-clientpref-os {
|
|
.theme-dark-old();
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
|
html {
|
|
--padding-page: ~'calc( @{padding-page} * 1.5 )';
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
html {
|
|
--padding-page: ~'calc( @{padding-page} * 2 )';
|
|
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
|
|
}
|
|
}
|
|
|
|
@media ( prefers-contrast: more ) {
|
|
:root {
|
|
--font-weight-normal: 500;
|
|
}
|
|
}
|
|
|
|
@media ( prefers-contrast: less ) {
|
|
:root {
|
|
--font-weight-normal: 300;
|
|
}
|
|
}
|