|
|
| Line 1: |
Line 1: |
| /* 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;
| |
| /*--color-surface-0: */
| |
| /*--color-surface-1: */
| |
| /*--color-surface-2: */
| |
| /*--color-surface-3: */
| |
| /*--color-surface-4: */
| |
| }
| |
|
| |
|
| :root.skin-theme-clientpref-day {
| |
| --color-surface-0: white;
| |
| --color-surface-1: #fffaf9;
| |
| --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;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-night {
| |
| --color-surface-0: #212529;
| |
| --color-surface-1: #262629;
| |
| --color-surface-2: #333;
| |
| --color-surface-3: #333;
| |
| --color-surface-4: #333;
| |
| --color-base: #fff;
| |
| --color-base--emphasized: #cf142b;
| |
| --color-base--subtle: #cf142b;
| |
| --color-subtle: #999;
| |
| --color-emphasized: #fff;
| |
| --background-color-progressive--hover: #b01125;
| |
| --color-placeholder: #666;
| |
| }
| |
|
| |
| @media screen and (prefers-color-scheme: dark) {
| |
| :root.skin-theme-clientpref-os {
| |
| --color-surface-0: #212529;
| |
| --color-surface-1: #262629;
| |
| --color-surface-2: #333;
| |
| --color-surface-3: #333;
| |
| --color-surface-4: #333;
| |
| --color-base: #fff;
| |
| --color-base--emphasized: #cf142b;
| |
| --color-base--subtle: #cf142b;
| |
| --color-subtle: #999;
| |
| --color-emphasized: #fff;
| |
| --background-color-progressive--hover: #b01125;
| |
| --color-placeholder: #666;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 768px) { /* Adjust breakpoint if needed */
| |
| .xcitizen-header {
| |
| position: fixed !important; /* Keep it visible */
| |
| top: 0 !important; /* Move to top */
| |
| bottom: auto !important; /* Remove default bottom positioning */
| |
| width: 100%; /* Full width */
| |
| z-index: 9999; /* Stay above content */
| |
| }
| |
|
| |
| /* Push page content down so it’s not hidden behind the header */
| |
| .xmw-body {
| |
| padding-top: 20px; /* Adjust based on header height */
| |
| }
| |
| }
| |
|
| |
| #citizen-site-title {
| |
| padding-bottom: 5px;
| |
| font-weight: bold;
| |
| }
| |
| /* Mobile (small screens) */
| |
| @media (max-width: 768px) {
| |
| #citizen-site-title {
| |
| font-size: 1.1em;
| |
| flex: 0 1;
| |
| }
| |
| }
| |
|
| |
| /* Desktop / large screens */
| |
| @media (min-width: 769px) {
| |
| #citizen-site-title {
| |
| margin-right: 20px;
| |
| font-size: 1.4em; /* increase this size as you like */
| |
| }
| |
| }
| |
