|
|
| (211 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| /***
| | #homepage-search:hover{ |
| ****
| | background-color: var(--color-surface-2); /*homepage search bar color, needs to be here because we use variables*/ |
| **** CSS Variables
| |
| ****
| |
| ***/
| |
| @media screen {
| |
| :root {
| |
| --border-color-1:hsl(0, 0%, 82%);
| |
| --border-color-2:hsl(0, 0%, 88%);
| |
| --color-surface-2:hsl(0,0%,97%);
| |
| --color-surface-4:hsl(213,30%,85%);
| |
| --color-surface-5:hsl(220,17%,93%);
| |
| --color-surface-6:hsl(200,2%,60%);
| |
| --color-surface-7:hsl(180,2%,40%);
| |
| --color-surface-subtle-red:hsl(0, 100%, 97%);
| |
| --color-success2:hsl(167,70%,31%);
| |
| --color-base:#343f48;
| |
| --color-base-subtle:#5a6e7d;
| |
| --color-primary:#143fbf;
| |
| }
| |
| :root.skin-citizen-dark {
| |
| --border-color-1:hsl(220, 28%, 23%);
| |
| --border-color-2:hsl(220,25%,20%);
| |
| --color-surface-5:hsl(220,25%,15%);
| |
| --color-surface-6:hsl(220,12%,35%);
| |
| --color-surface-7:hsl(220,12%,40%);
| |
| --color-surface-subtle-red:hsl(0, 45%, 28%);
| |
| --color-primary:#143fff;
| |
| } | |
| }
| |
| /***
| |
| ****
| |
| **** Mobile Citzen CSS
| |
| ****
| |
| ***/
| |
| @media (max-width: 720px) {
| |
| table {
| |
| width:100% !important;
| |
| display: table;
| |
| }
| |
| }
| |
| | |
| | |
| | |
| | |
| /**
| |
| * General theming
| |
| *
| |
| **/
| |
| .toccolours {
| |
| background-color: var(--color-surface-2);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| blockquote {
| |
| font-family: inherit;
| |
| color: inherit;
| |
| font-style: inherit;
| |
| font-size: 95%;
| |
| }
| |
| | |
| /* CSS for input textboxes */
| |
| .mw-ui-input {
| |
| border-color: var(--border-color-1);
| |
| }
| |
| | |
| /* CSS for Infoboxes */
| |
| .infobox {
| |
| border: 1px solid var(--border-color-1) !important;
| |
| background-color: var(--color-surface-2) !important;
| |
| color: var(--color-base) !important;
| |
| }
| |
| .infobox.geography td, .infobox.geography th, .infobox.geography .mergedtoprow td, .infobox.geography .mergedtoprow th{
| |
| border-top: 1px solid var(--border-color-1) !important;
| |
| }
| |
| .infobox.geography .mergedbottomrow td, .infobox.geography .mergedbottomrow th {
| |
| border-bottom: 1px solid var(--border-color-1) !important;
| |
| }
| |
| .infobox.geography .mergedrow td, .infobox.geography .mergedrow th {
| |
| border:0 !important;
| |
| }
| |
| | |
| /* CSS for Navboxes */
| |
| .navbox th, .navbox-title {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
| |
| background-color: var(--color-surface-5);
| |
| }
| |
| .navbox {
| |
| background-color: var(--color-surface-1);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .navbox-list {
| |
| border-color: var(--border-color-2);
| |
| }
| |
| .navbox-even {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {
| |
| border-top: 2px solid var(--border-color-2);
| |
| }
| |
| | |
| /* CSS for Discussion pages */
| |
| .flow-post {
| |
| color: var(--color-base);
| |
| }
| |
| | |
| | |
| /**
| |
| * StructuredDiscussions theming
| |
| *
| |
| **/
| |
| .flow-topic-titlebar {
| |
| background-color: var(--color-surface-3);
| |
| }
| |
| | |
| | |
| | |
| | |
| /**
| |
| * ConfirmAcccount theming
| |
| *
| |
| **/
| |
| .mw-confirmaccount-type-0 {
| |
| background-color: var(--color-surface-4);
| |
| }
| |
| .mw-confirmaccount-body-0 {
| |
| background-color: var(--color-surface-5);
| |
| }
| |
| .wpNewBio {
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| .mw-special-ConfirmAccounts fieldset {
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .mw-confirmaccount-bar {
| |
| border: 1px solid var(--border-color-1);
| |
| background-color: var(--color-surface-2);
| |
| }
| |
| | |
| | |
| | |
| /***
| |
| **** Code editor interface
| |
| ***/
| |
| .ace-tm .ace_gutter {
| |
| background-color:var(--color-surface-2);
| |
| border-right:1px solid var(--border-color-2);
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| | |
| /***
| |
| ****
| |
| **** Source editor interface
| |
| ****
| |
| ***/
| |
| .wikiEditor-ui-toolbar {
| |
| padding: 0.25em;
| |
| box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
| |
| background-color:var(--color-surface-2);
| |
| }
| |
| .wikiEditor-ui .wikiEditor-ui-view {
| |
| border:1px solid var(--border-color-1);
| |
| }
| |
| .wikiEditor-ui .wikiEditor-ui-top::before {
| |
| backdrop-filter: none;
| |
| background-color: transparent;
| |
| }
| |
| .CodeMirror-gutters {
| |
| background-color:var(--color-surface-2);
| |
| border-right:1px solid var(--border-color-2);
| |
| }
| |
| .skin-citizen .mw-editform .editOptions {
| |
| background-color: var(--color-surface-5);
| |
| border: 1px solid var(--border-color-1);
| |
| border-top: 0px;
| |
| }
| |
| .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary) {
| |
| border:1px solid var(--border-color-1);
| |
| border-radius: 5px
| |
| }
| |
| .oo-ui-textInputWidget .oo-ui-inputWidget-input {
| |
| background-color: var(--color-surface-0);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| .oo-ui-checkboxInputWidget [type="checkbox"] + span {
| |
| background-color: var(--color-surface-0);
| |
| border: 1px solid var(--border-color-1);
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| /***
| |
| **** Recent changes theming
| |
| ***/
| |
| .rc-sidebar-user {
| |
| color: var(--color-base--subtle);
| |
| }
| |
| | |
| /***
| |
| ****
| |
| **** Success message after publishing an edit
| |
| ****
| |
| ***/
| |
| .oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
| |
| color:var(--color-success2);
| |
| } | | } |
