Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
Experiment with color settings
 
Added status page icon
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Citizen skin */
/* All CSS here will be loaded for users of the Citizen skin */
:root {
:root {
     /* Pink is the new black */
     --color-primary__h: 285;
    --color-primary__h: 20;
}
 
/* Sidebar icons */
 
.citizen-drawer__menu a:before {
display: block;
content: "";
width: var(--size-icon);
height: var(--size-icon);
background: transparent center/contain no-repeat;
opacity: var(--opacity-icon-base);
filter: var(--filter-invert);
}
 
.citizen-drawer__menu .citizen-ui-icon {
display: none;
}
 
.citizen-drawer__menu #n-mainpage-description a:before { background-image: url(/resources/assets/nav-icons/home.svg); }
.citizen-drawer__menu #n-recentchanges a:before        { background-image: url(/resources/assets/nav-icons/clipboard.svg); }
.citizen-drawer__menu #n-randompage a:before          { background-image: url(/resources/assets/nav-icons/dice-five.svg); }
.citizen-drawer__menu #n-help-mediawiki a:before      { background-image: url(/resources/assets/nav-icons/question.svg); }
.citizen-drawer__menu #n-upload a:before              { background-image: url(/resources/assets/nav-icons/upload.svg); }
.citizen-drawer__menu #n-randompage a:before          { background-image: url(/resources/assets/nav-icons/dice-five.svg); }
.citizen-drawer__menu #t-specialpages a:before        { background-image: url(/resources/assets/nav-icons/alternate-file.svg); }
 
.citizen-drawer__menu #n-About a:before                { background-image: url(/resources/assets/nav-icons/info-circle.svg); }
.citizen-drawer__menu #n-Contribute a:before          { background-image: url(/resources/assets/nav-icons/pen.svg); }
.citizen-drawer__menu #n-Forum a:before                { background-image: url(/resources/assets/nav-icons/comments.svg); }
.citizen-drawer__menu #n-Status a:before              { background-image: url(/resources/assets/nav-icons/alternate-tachometer.svg); }
 
.citizen-drawer__menu #n-Characters a:before          { background-image: url(/resources/assets/nav-icons/dragon.svg); }
.citizen-drawer__menu #n-Books a:before                { background-image: url(/resources/assets/nav-icons/book.svg); }
.citizen-drawer__menu #n-Locations a:before            { background-image: url(/resources/assets/nav-icons/alternate-map-marker.svg); }
 
 
/* Icon invert helper class */
.skin-invert-image img,
.skin-invert {
filter: var(--filter-invert);
}
 
.skin-invert .skin-invert,
.skin-invert .skin-invert-image img {
filter: none;
}
 
/* Make infoboxes fix with theme */
.infobox {
border: 1px solid var(--border-color-base);
padding: 0.4em;
border-radius: var(--border-radius--large);
}
 
/* Bigger wordmark */
img.mw-logo-wordmark {
height: 2.5rem;
}
}

Latest revision as of 16:06, 11 February 2025

/* All CSS here will be loaded for users of the Citizen skin */
:root {
    --color-primary__h: 285;
}

/* Sidebar icons */

.citizen-drawer__menu a:before {
	display: block;
	content: "";
	width: var(--size-icon);
	height: var(--size-icon);
	background: transparent center/contain no-repeat;
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
}

.citizen-drawer__menu .citizen-ui-icon {
	display: none;
}

.citizen-drawer__menu #n-mainpage-description a:before { background-image: url(/resources/assets/nav-icons/home.svg); }
.citizen-drawer__menu #n-recentchanges a:before        { background-image: url(/resources/assets/nav-icons/clipboard.svg); }
.citizen-drawer__menu #n-randompage a:before           { background-image: url(/resources/assets/nav-icons/dice-five.svg); }
.citizen-drawer__menu #n-help-mediawiki a:before       { background-image: url(/resources/assets/nav-icons/question.svg); }
.citizen-drawer__menu #n-upload a:before               { background-image: url(/resources/assets/nav-icons/upload.svg); }
.citizen-drawer__menu #n-randompage a:before           { background-image: url(/resources/assets/nav-icons/dice-five.svg); }
.citizen-drawer__menu #t-specialpages a:before         { background-image: url(/resources/assets/nav-icons/alternate-file.svg); }

.citizen-drawer__menu #n-About a:before                { background-image: url(/resources/assets/nav-icons/info-circle.svg); }
.citizen-drawer__menu #n-Contribute a:before           { background-image: url(/resources/assets/nav-icons/pen.svg); }
.citizen-drawer__menu #n-Forum a:before                { background-image: url(/resources/assets/nav-icons/comments.svg); }
.citizen-drawer__menu #n-Status a:before               { background-image: url(/resources/assets/nav-icons/alternate-tachometer.svg); }

.citizen-drawer__menu #n-Characters a:before           { background-image: url(/resources/assets/nav-icons/dragon.svg); }
.citizen-drawer__menu #n-Books a:before                { background-image: url(/resources/assets/nav-icons/book.svg); }
.citizen-drawer__menu #n-Locations a:before            { background-image: url(/resources/assets/nav-icons/alternate-map-marker.svg); }


/* Icon invert helper class */
.skin-invert-image img,
.skin-invert {
	filter: var(--filter-invert);
}

.skin-invert .skin-invert,
.skin-invert .skin-invert-image img {
	filter: none;
}

/* Make infoboxes fix with theme */
.infobox {
	border: 1px solid var(--border-color-base);
	padding: 0.4em;
	border-radius: var(--border-radius--large);
}

/* Bigger wordmark */
img.mw-logo-wordmark {
	height: 2.5rem;
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.