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 */
/*
 * Menu
 * Rich format menu to have more hierarchy
*/
.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;
}

/* General style for all Sidebar icons */
.citizen-drawer__menu [id^="n-Sidebar-icon-"] a {
  display: flex;
  align-items: center;
  gap: var(--space-sm); /* Adjust the gap as needed */
}

.citizen-drawer__menu [id^="n-Sidebar-icon-"] a:before {
  content: "";
  display: block;
  width: var(--size-icon);
  height: var(--size-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--filter-invert);
  opacity: var(--opacity-icon-base); /* Normal state opacity */
  transition: var(--transition-hover); /* Smooth transition for hover effects */
}

/* General hover effect for all Sidebar icons */
.citizen-drawer__menu [id^="n-Sidebar-icon-"] a:hover:before {
  filter: none;
  opacity: 1; /* Full opacity */
}

html.skin-theme-clientpref-night .citizen-drawer__menu [id^="n-Sidebar-icon-"] a:before {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .citizen-drawer__menu [id^="n-Sidebar-icon-"] a:before {
    filter: invert(1);
  }
}
/*Icons*/
#n-Sidebar-icon-data a:before {
  background-image: url('https://static.miraheze.org/rothwellwiki/c/cd/Database-solid.svg');
}

#n-Sidebar-icon-places a:before {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/66/Signs-post-solid.svg');
}

#n-Sidebar-icon-people a:before {
  background-image: url('https://static.miraheze.org/rothwellwiki/8/82/Children-solid.svg');
}

#n-Sidebar-icon-contribute a:before {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/f7/Font_Awesome_5_solid_plus-circle.svg');
}

/*Changing icons*/
html.skin-theme-clientpref-night .mw-ui-icon-mf-expand {
  filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .mw-ui-icon-mf-expand {
    filter: invert(1) hue-rotate(180deg);
  }
}

html.skin-theme-clientpref-night .citizen-header__logo {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .citizen-header__logo {
    filter: invert(1);
  }
}

html.skin-theme-clientpref-night .citizen-drawer__logo img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .citizen-drawer__logo img {
    filter: invert(1);
  }
}

html.skin-theme-clientpref-night #footer-icons.noprint {
  filter: grayscale(1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os #footer-icons.noprint {
    filter: grayscale(1);
  }
}

html.skin-theme-clientpref-night #footer-poweredbyico {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os #footer-poweredbyico {
    filter: invert(1);
  }
}

/*Thumbnail images*/
@media all and ( min-width: 720px ) {
figure[typeof~='mw:File/Frame'].mw-halign-left {
    width: 62% !important;
    margin-right: 0;
}
}
@media all and ( max-width: 720px ) {
figure[typeof~='mw:File/Frame'].mw-halign-left {
    width: 100%;
    height:auto;
}
}

.mobileonly {
    display: none!important
}