MediaWiki:Citizen.css: Difference between revisions

/* All CSS here will be loaded for users of the Citizen skin */
 :root {
     --font-family-citizen-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --color-progressive-oklch__l: 0.5447;
     --color-progressive-oklch__c: 0.2121;
     --color-progressive-oklch__h: 23.85;
     --color-progressive-hsl__h: 352.62;
     --color-progressive-hsl__s: 82.38;
     --color-progressive-hsl__l: 44.51;
}
 :root.skin-theme-clientpref-day {
     --color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
     --color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
     --color-surface-2: #ddd;
     --color-surface-3: #ddd;
     --color-surface-4: #ddd;
     --color-base: #000;
     --color-base--emphasized: #cf142b;
     --color-base--subtle: #cf142b;
     --color-subtle: #666;
     --color-emphasized: #000;
     --background-color-progressive--hover: #b01125;
     --color-placeholder: #999;
     --color-visited--hover: #b01125;
}
 :root.skin-theme-clientpref-night {
     --color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
     --color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
     --color-surface-2: #333;
     --color-surface-3: #333;
     --color-surface-4: #333;
     --color-base: #fff;
     --color-base--emphasized: #ff5555;
     --color-base--subtle: #ff5555;
     --color-subtle: #bbb;
     --color-emphasized: #fff;
     --background-color-progressive--hover: #ff5555;
     --color-placeholder: #666;
     --color-link: #ff5555;
     --color-link--hover: #ff5555;
     --color-visited--hover: #ff5555;
}
 @media screen and (prefers-color-scheme:light) {
     :root.skin-theme-clientpref-os {
         --color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
         --color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
         --color-surface-2: #ddd;
         --color-surface-3: #ddd;
         --color-surface-4: #ddd;
         --color-base: #000;
         --color-base--emphasized: #cf142b;
         --color-base--subtle: #cf142b;
         --color-subtle: #666;
         --color-emphasized: #000;
         --background-color-progressive--hover: #b01125;
         --color-placeholder: #999;
         --color-visited--hover: #b01125;
    }
     #citizen-site-title a {
         color: #000;
    }
}
 @media screen and (prefers-color-scheme:dark) {
     :root.skin-theme-clientpref-os {
         --color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
         --color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
         --color-surface-2: #333;
         --color-surface-3: #333;
         --color-surface-4: #333;
         --color-base: #fff;
         --color-base--emphasized: #ff5555;
         --color-base--subtle: #ff5555;
         --color-subtle: #bbb;
         --color-emphasized: #fff;
         --background-color-progressive--hover: #ff5555;
         --color-placeholder: #666;
         --color-link: #ff5555;
         --color-link--hover: #ff5555;
         --color-visited--hover: #ff5555;
    }
     #citizen-site-title a {
         color: #fff;
    }
}
 #citizen-site-title a {
     padding-bottom: 5px;
     font-weight: bold;
     text-decoration-style: dotted;
}
 #citizen-site-title a:hover {
     text-decoration-style: dotted;
}
 .citizen-body a {
     text-decoration-line: underline;
     text-decoration-style: dotted;
}
 .citizen-body a:hover {
     text-decoration-style: solid;
}
 .skin-theme-clientpref-night #citizen-site-title a {
     color: #fff;
}
 .skin-theme-clientpref-day #citizen-site-title a {
     color: #000;
}
 @media (max-width:768px) {
     #citizen-site-title {
         font-size: 1.1em;
         flex: 0 1;
    }
}
 @media (min-width:769px) {
     #citizen-site-title {
         margin-right: 20px;
         font-size: 1.4em;
    }
}