Difference between revisions of "MediaWiki:Common.css"

Revision as of 21:22, 18 February 2023

/* CSS placed here will be applied to all skins */
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");

/* Make the font Roboto. */
 body * {
  font-family:'Roboto', sans-serif
 }

/* A lot of icons and shit on the Cosmos skin are black by default, so lets make them white. */
 .cosmos-bannerOption:hover > .cosmos-bannerOption-button {
  display:inline-flex;
  align-items:center;
  margin-top:0;
  margin-bottom:0;
  justify-items:center;
  stroke:#fff;
  stroke-width:2px;
  transition:0.4s
 }
 .cosmos-bannerOption:hover .cosmos-bannerOption-icon {
  stroke:#fff
 }
 .cosmos-bannerOption:hover .cosmos-bannerOption-dropdownIcon {
  fill:#fff;
  stroke:#fff
 }
 .cosmos-bannerOption-button {
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
 }
 .cosmos-bannerOption-icon {
  display:flex;
  height:28px;
  align-items:center;
  fill:none;
  justify-items:center;
  stroke:#fff;
  stroke-width:2px
 }
 .cosmos-bannerOption-dropdownIcon {
  display:flex;
  height:auto;
  margin-left:7px;
  fill:#fff;
  stroke:#fff;
  stroke-width:2px
 }
 .cosmos-button.cosmos-button-secondary {
  color:#000;
  stroke:#000;
  stroke-width:2px
 }
 #cosmos-search-buttonContainer {
  position:relative;
  width:46px;
  height:36px;
  margin-left:-46px
 }
 #cosmos-search-buttonContainer:hover > #cosmos-search-buttonIcon {
  stroke:#fff
 }
 #searchInput {
  width:100%;
  height:36px;
  padding:5px 20px;
  border:0;
  margin:0;
  -webkit-appearance:none;
  background:rgba(0,0,0,0.4);
  border-radius:0;
  box-shadow:none;
  color:#fff;
  outline:0;
  transition:background 250ms ease
 }
 #searchInput:focus {
  background:rgba(0,0,0,0.6)
 }
 .cosmos-header__sitename a:any-link {
  color:#fff;
 }
 .cosmos-userButton-label {
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:20px;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap
 }
 .cosmos-userOptions-personalTools:hover .cosmos-userButton-label {
  color:#fff
 }
 .cosmos-search-button:hover {
  background:rgba(0,0,0,0.3)
 }
.cosmos-header .wds-tabs .wds-tabs__tab-label {
  color:#fff
 }
 .cosmos-header .wds-tabs .wds-tabs__tab-label a {
  color:#fff
 }
 .cosmos-header .wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label {
  opacity:0.8
 }
 .cosmos-header .wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label a {
  color:#e4e4e4
 }
 .cosmos-button-primary {
  background-color:#5977b3;
  color:#fff;
  stroke:#fff;
  stroke-width:2px;
  transition:filter 250ms ease
 }
 .cosmos-button-primary:hover {
  filter:brightness(110%)
 }
 #cosmos-actionsList-dropdownIcon {
  fill:#fff
 }
 .cosmos-header .cosmos-header__counter {
  color:#fff

/* Change the footer link to a more readable color. */
 }
 .cosmos-footerLinks-list {
  padding:0;
  margin:0;
  color:#cccccc;
  font-size:10pt;
  list-style:none
 }
 .cosmos-footerLinks-list li a {
  color:#ffffff
 }

/* Get rid of the blurry image rendering. */
img {
	image-rendering: pixelated;
}

/* Except on the wiki header, because it looks like ass without it. */
.cosmos-header__wordmark img {
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  image-rendering:smooth;
}