MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* All CSS here will be loaded for users of the Citizen skin */

/* --- Main page --- */
/* Hide the edit button, title etc */
.page-Streamlined_Wiki .mw-body-header {
	display: none;
}

/* --- Menu --- */
.mw-portlet-External {
	margin-top: var( --space-md );
    padding-top: var( --space-sm );
	border-top: 1px solid var( --border-color-base );
	font-size: 0.8125rem;
	grid-column: 1 / -1;
	white-space: nowrap;
}

.mw-portlet-External .citizen-menu__heading {
	display: none;
}

.mw-portlet-External ul {
	display: flex;
	overflow: auto;
}

.mw-portlet-External .mw-list-item a {
	gap: 0;
}

/* Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
	pointer-events: none;
	padding-right: var( --space-xs );
    border-radius: 0;
    letter-spacing: 0.05em;
    font-weight: var( --font-weight-normal );
    color: var( --color-base--subtle ) !important;
}

.citizen-drawer__menu [id^="n-sidebar-label-"]:not(:first-child) a {
    margin-left: var( --space-xs );
    padding-left: var( --space-md );
	border-left: 1px solid var( --border-color-base );
}

/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
	font-size: 0;
}

.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
	display: block;
    content: "";
    width: var( --size-icon );
    height: var( --size-icon );
    background: transparent center/contain no-repeat;
    opacity: var( --opacity-icon-base );
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
	filter: invert( 1 );
}

#n-sidebar-icon-discord a:before {
	background-image: url( https://media.playstreamlined.com/9/9f/Discord_icon.svg )
}

#n-sidebar-icon-twitter a:before {
	background-image: url( https://media.playstreamlined.com/c/cc/X_icon.svg )
}

#n-sidebar-icon-instagram a:before {
	background-image: url( https://media.playstreamlined.com/0/0f/Instagram_icon.svg )
}

#n-sidebar-icon-roblox a:before {
	background-image: url( https://media.playstreamlined.com/d/d5/Roblox_icon.svg );
}

/* Preferences menu */
/* Sandbox icon */
#pt-sandbox a::before {
  display: block;
  content: "";
  width: var( --size-icon );
  height: var( --size-icon );
  background: transparent center/contain no-repeat;
  opacity: var( --opacity-icon-base );
  background-image: url( https://media.playstreamlined.com/5/59/WikimediaUI-Sandbox.svg );
  filter: var(--filter-invert);
}

/* Footer icons */
#footer-icons a {
	opacity: var( --opacity-icon-base );
	transition: opacity 250ms ease;
}

#footer-icons a:hover {
	opacity: var( --opacity-icon-base--hover );
}

#footer-icons a:active {
	opacity: var( --opacity-icon-base--active );
}

/* Darken the footer icon in light mode */
.skin-citizen-dark #footer-icons a {
	filter: invert( 1 ) hue-rotate( 180deg );
}

/* --- Navbox --- */
.navbox tr th,
.navbox tr td {
  border-right: 1px solid var(--border-color-base);
}
.navbox tr th:first-child, .navbox tr td:first-child {
  border-left: 1px solid var(--border-color-base);
}