Difference between revisions of "MediaWiki:Citizen.css"

From Forge Community Wiki
(change color of code blocks)
 
(more contrast in diffs)
 
(6 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
@media only screen and (prefers-color-scheme:dark) {
 
@media only screen and (prefers-color-scheme:dark) {
 
code, .mw-code {
 
code, .mw-code {
    color: #46C410;
+
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;
 
}
 
}

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;
}