|
|
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Citizen skin */
| |
|
| |
|
| body {
| |
| font-family: 'Roboto', sans-serif;
| |
| }
| |
|
| |
| blockquote {
| |
| padding: 8px 16px;
| |
| font-size: 100%;
| |
| font-style: inherit;
| |
| color: var(--color-base)
| |
| }
| |
|
| |
| .skin-citizen-dark .mwe-popups-container {
| |
| background-color: var(--background-color-dp-03);
| |
| }
| |
|
| |
| .skin-citizen-light {
| |
| --color-base: #1c2431;
| |
| }
| |
| /* EDITOR CONFIGURATION */
| |
| .skin-citizen-light .wikiEditor-ui {
| |
| box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0, 0.5);
| |
| }
| |
| .skin-citizen-dark .wikiEditor-ui {
| |
| box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0);
| |
| }
| |
| .skin-citizen-dark .ui-state-default {
| |
| background: var(--background-color-framed);
| |
| }
| |
|
| |
| .skin-citizen-dark .ace-tm {
| |
| background-color: var(--background-color-dp-01);
| |
| color: var(--color-base)
| |
| }
| |
| .skin-citizen-dark .ace-tm .ace_print-margin {
| |
| background: var(--background-color-dp-00);
| |
| }
| |
| .skin-citizen-dark .ace-tm .ace_gutter {
| |
| background: var(--color-surface-1);
| |
| }
| |
| .skin-citizen-dark .ace-tm .ace_gutter-active-line {
| |
| background-color: var(--color-surface-2--active);
| |
| }
| |
| .skin-citizen-dark .codeEditor-status {
| |
| background-color: var(--color-surface-2);
| |
| border-top:0;
| |
| }
| |
|
| |
| .skin-citizen-dark .editOptions {
| |
| background-color: var(--color-surface-1);
| |
| color: var(--color-base);
| |
| box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0);
| |
| border:0;
| |
| }
| |
| .skin-citizen-light .editOptions {
| |
| border:0;
| |
| box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0, 0.5);
| |
|
| |
| }
| |
|
| |
| /* TOC CONFIGURATION */
| |
| @media screen {
| |
| .skin-citizen-dark #toc {
| |
| box-shadow: 0px 2.25em 1em -0.15em rgb(0, 0, 0);
| |
| }
| |
| .skin-citizen-light #toc {
| |
| box-shadow: 0px 2.25em 1em -0.15em rgb(0, 0, 0,0.5);
| |
| }
| |
| }
| |
| @media screen and (max-width: 1300px) {
| |
| .skin-citizen-dark #toc {
| |
| box-shadow: none;
| |
| }
| |
| .skin-citizen-light #toc {
| |
| box-shadow: none;
| |
| }
| |
| }
| |
|
| |
| /* INFOBOX CONFIGURATION */
| |
| .skin-citizen-dark .infobox {
| |
| color: var(--color-base);
| |
| background-color: var(--color-surface-2);
| |
| box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0);
| |
| border: 0;
| |
| }
| |
| .skin-citizen-light .infobox {
| |
| box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0,0.5);
| |
| border: 0;
| |
| }
| |
| .skin-citizen-dark .sidebar {
| |
| background-color: var(--color-surface-2) !important;
| |
| border: 0 !important;
| |
| box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0) !important;
| |
| }
| |
| .skin-citizen-light .sidebar {
| |
| border: 0 !important;
| |
| box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0,0.5) !important;
| |
| }
| |
| .skin-citizen-dark .sidebar-list-title {
| |
| border-bottom: 1px solid var(--background-color-dp-24) !important;
| |
| }
| |
|
| |
| /* NAVBOX CONFIGURATION */
| |
| .skin-citizen-dark .navbox {
| |
| background-color: var(--color-surface-2);
| |
| border:0;
| |
| box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0)
| |
| }
| |
| .skin-citizen-light .navbox {
| |
| border:0;
| |
| box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0,0.5)
| |
| }
| |
| .skin-citizen-dark .navbox-title {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .skin-citizen-dark th.navbox-group {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .skin-citizen-dark .navbox-even {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| .skin-citizen-dark .navbox-odd {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| .skin-citizen-dark tr + tr > .navbox-group {
| |
| border-top: 2px solid var(--border-color-base);
| |
| }
| |
| .skin-citizen-dark tr + tr > .navbox-list {
| |
| border-top: 2px solid var(--border-color-base);
| |
| }
| |
| .skin-citizen-dark .navbox-list {
| |
| border-color: var(--border-color-base);
| |
| }
| |
|
| |
| /* LOGO */
| |
| .mw-logo-icon {
| |
| width:32px;
| |
| object-fit:contain;
| |
| }
| |
