Views
Actions
Difference between revisions of "MediaWiki:Citizen.css"
From Forge Community Wiki
(modify style <tt> tags, and some cleanup) |
(more contrast in diffs) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 13: | Line 13: | ||
font-size: 100%; | font-size: 100%; | ||
padding: 0 0.1em; | padding: 0 0.1em; | ||
+ | } | ||
+ | |||
+ | /* ***************** Styling for Tabs : START ***************** */ | ||
+ | |||
+ | .tabs-dropdown .tabs-content, | ||
+ | .tabs-dropdown .tabs-container, | ||
+ | .tabs-dropdown li, | ||
+ | .tabs-dropdown ul, | ||
+ | .tabs-dropdown ol { | ||
+ | background-color: rgba(32,32,32,0.2) !important; /* has to be !important */ | ||
+ | } | ||
+ | |||
+ | .tabs-label { | ||
+ | background-color: #222; | ||
+ | border-color: #666; | ||
+ | } | ||
+ | |||
+ | .tabs-tabbox > .tabs-container { | ||
+ | border-color: #666; | ||
+ | } | ||
+ | .tabs-plain > .tabs-label { | ||
+ | border-color: #666; | ||
+ | } | ||
+ | .tabs-togglebox >*> .tabs-content { | ||
+ | border-color: #666; | ||
+ | } | ||
+ | |||
+ | .tabs-dropdown >*> .tabs-content, | ||
+ | .tabs-dropdown li ul, | ||
+ | .tabs-dropdown li ol { | ||
+ | box-shadow: 2px 3px 5px #111; | ||
+ | } | ||
+ | |||
+ | .tabs-dropdown li, | ||
+ | .tabs-dropdown >*> .tabs-content> a, | ||
+ | .tabs-dropdown >*> .tabs-content>p> a, | ||
+ | .tabs-dropdown ol>li> a { | ||
+ | border-top-color: #666; | ||
+ | } | ||
+ | |||
+ | .tabs-dropdown li ul, | ||
+ | .tabs-dropdown li ol { | ||
+ | border-color: #666; | ||
+ | } | ||
+ | .tabs-dropdown li ul:before, | ||
+ | .tabs-dropdown li ol:before { | ||
+ | color: #88F; | ||
+ | } | ||
+ | |||
+ | .tabs-label:hover { | ||
+ | background-color: #444; | ||
+ | } | ||
+ | .tabs-label:active, .tabs-label:focus { | ||
+ | background-color: #444; | ||
+ | } | ||
+ | .tabs-tabbox > .tabs-input:checked + .tabs-label, | ||
+ | .tabs-input-0:checked + .tabs-input-1 + .tabs-label { | ||
+ | z-index: 2; | ||
+ | background-color: #444; | ||
+ | } | ||
+ | |||
+ | .tabs-dropdown >*> .tabs-content li:hover { | ||
+ | background-color: #444; | ||
+ | } | ||
+ | .tabs-dropdown a, | ||
+ | .tabs-dropdown a:hover, | ||
+ | .tabs-dropdown a: visited { | ||
+ | color: #15B; | ||
+ | } | ||
+ | .tabs-dropdown a:active { | ||
+ | color: #108; | ||
+ | } | ||
+ | .tabs-dropdown >*> .tabs-content> a:hover, | ||
+ | .tabs-dropdown >*> .tabs-content>p> a:hover, | ||
+ | .tabs-dropdown ol>li> a:hover { | ||
+ | background-color: #444; | ||
+ | } | ||
+ | |||
+ | .tabs-tabbox > .tabs-input.checked + .tabs-label, | ||
+ | .tabs-input-0.checked + .tabs-input-1 + .tabs-label { | ||
+ | background-color: #444; | ||
+ | } | ||
+ | |||
+ | /* ***************** Styling for Tabs : END ***************** */ | ||
+ | |||
+ | /* ************* Styling for Datatables : START ************* */ | ||
+ | |||
+ | .mw-datatable td, .mw-datatable th { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | .mw-datatable table { | ||
+ | border: 1px solid #424951; | ||
+ | } | ||
+ | |||
+ | .mw-datatable td, .mw-datatable th { | ||
+ | border: 1px solid #424951; | ||
+ | padding: 0.2em 0.4em; | ||
+ | } | ||
+ | |||
+ | .mw-datatable tr:hover td { | ||
+ | background-color: #202736; | ||
+ | } | ||
+ | |||
+ | /* ************** Styling for Datatables : END ************** */ | ||
+ | |||
+ | /* Fixes the colors of diff changes for better contrast */ | ||
+ | .diffchange { | ||
+ | color: #222222; | ||
+ | } | ||
+ | .diff-deletedline { | ||
+ | border-color: #d9c284; /* ffe49c */ | ||
+ | } | ||
+ | .diff-deletedline .diffchange { | ||
+ | background: #d9c284; | ||
+ | } | ||
+ | .diff-addedline { | ||
+ | border-color: #8bb2d9; /* a3d3ff */ | ||
+ | } | ||
+ | .diff-addedline .diffchange { | ||
+ | background: #8bb2d9; | ||
} | } |
Latest revision as of 17:22, 7 September 2021
/* All CSS here will be loaded for users of the Citizen skin */ @media only screen and (prefers-color-scheme:dark) { code, .mw-code { color: #46C410; } } .external { color: #527ECA; } tt { font-size: 100%; padding: 0 0.1em; } /* ***************** Styling for Tabs : START ***************** */ .tabs-dropdown .tabs-content, .tabs-dropdown .tabs-container, .tabs-dropdown li, .tabs-dropdown ul, .tabs-dropdown ol { background-color: rgba(32,32,32,0.2) !important; /* has to be !important */ } .tabs-label { background-color: #222; border-color: #666; } .tabs-tabbox > .tabs-container { border-color: #666; } .tabs-plain > .tabs-label { border-color: #666; } .tabs-togglebox >*> .tabs-content { border-color: #666; } .tabs-dropdown >*> .tabs-content, .tabs-dropdown li ul, .tabs-dropdown li ol { box-shadow: 2px 3px 5px #111; } .tabs-dropdown li, .tabs-dropdown >*> .tabs-content> a, .tabs-dropdown >*> .tabs-content>p> a, .tabs-dropdown ol>li> a { border-top-color: #666; } .tabs-dropdown li ul, .tabs-dropdown li ol { border-color: #666; } .tabs-dropdown li ul:before, .tabs-dropdown li ol:before { color: #88F; } .tabs-label:hover { background-color: #444; } .tabs-label:active, .tabs-label:focus { background-color: #444; } .tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { z-index: 2; background-color: #444; } .tabs-dropdown >*> .tabs-content li:hover { background-color: #444; } .tabs-dropdown a, .tabs-dropdown a:hover, .tabs-dropdown a: visited { color: #15B; } .tabs-dropdown a:active { color: #108; } .tabs-dropdown >*> .tabs-content> a:hover, .tabs-dropdown >*> .tabs-content>p> a:hover, .tabs-dropdown ol>li> a:hover { background-color: #444; } .tabs-tabbox > .tabs-input.checked + .tabs-label, .tabs-input-0.checked + .tabs-input-1 + .tabs-label { background-color: #444; } /* ***************** Styling for Tabs : END ***************** */ /* ************* Styling for Datatables : START ************* */ .mw-datatable td, .mw-datatable th { background-color: transparent; } .mw-datatable table { border: 1px solid #424951; } .mw-datatable td, .mw-datatable th { border: 1px solid #424951; padding: 0.2em 0.4em; } .mw-datatable tr:hover td { background-color: #202736; } /* ************** Styling for Datatables : END ************** */ /* Fixes the colors of diff changes for better contrast */ .diffchange { color: #222222; } .diff-deletedline { border-color: #d9c284; /* ffe49c */ } .diff-deletedline .diffchange { background: #d9c284; } .diff-addedline { border-color: #8bb2d9; /* a3d3ff */ } .diff-addedline .diffchange { background: #8bb2d9; }