User:Cryebunnie/vector.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* New font for headers & navigation to replace EasonPro */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap');

/* #region TEMPORARY HACKS THAT MUST NOT BE ALLOWED TO SURVIVE THE WINTER */

/* vertically center watchlist icon button */
.vector-menu-tabs .mw-watchlink.icon a::before {top: 0.85em}

/* various hacks to make the tools shoved into the userbar look better */
* + #pt-userpage::before,
* + #pt-anonuserpage::before,
* + #pt-createaccount::before {
  content: "•";
  margin-right: 0.75em;
}
#pt-fw-disable a, #pt-fw-enable a {
  filter: brightness(100);
  position: relative;
  top: 0.2em;
}
.skin-vector-legacy #pt-uls .uls-trigger::before {
  filter: invert(1);
  opacity: 1;
  padding-top: 0.1em;
}
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a {
  background-image: none;
  padding: 0;
}

/* #endregion TEMPORARY HACKS THAT MUST NOT BE ALLOWED TO SURVIVE THE WINTER */

:root {
  --text-color: #36414f;

  --font-family-body: "IBM Plex Sans JP", sans-serif;
  --font-family-heading: "IBM Plex Sans JP", sans-serif;

  --border-radius: 0.5rem;
  --border-radius-minor: 0.25rem;
}

/* Adjust sidebar width */
:root {
  --mw-panel-width: 10rem;
}
div#mw-panel {
  width: var(--mw-panel-width);
}
div#footer, #mw-head-base, div#content, #left-navigation {
  margin-left: var(--mw-panel-width);
}
/* Make larger when there's screen space */
@media (min-width: 982px) {
  :root {--mw-panel-width: 12rem}
  /* overriding the old way of doing it that doesn't make sense now */
  #mw-panel {padding-left: 0}
}

/* Center logo regardless of sidebar width */
#p-logo {
  margin-inline: auto;
}

/* Boxes for sidebar content */
.vector-legacy-sidebar .vector-menu-portal {
  font-family: var(--font-family-body);
  margin: 0.5rem;
  padding: 0.5rem;
  background: white;
  border-radius: var(--border-radius);
  font-weight: normal;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content ul {
  padding-top: 0;
}

/* Remove bold from sidebar links */
div#mw-panel ul.vector-menu-content-list > li > a {
  font-weight: normal;
}
/* Sidebar box headings */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
  font-weight: bold;
  margin-top: 0;
}

/* Change personal navigation menu text and icons to white */
#p-personal {
  color: #FFFFFF;
}
#p-personal a {
  color: inherit;
}

/* Change color and borders of head */
:root {
  --mw-head-height: 40px;
}
#mw-head-base {
  background: #535353;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  bottom: 0;
  height: var(--mw-head-height);
  margin-top: calc(-1 * var(--mw-head-height));
}

/* Change font color and weight in head */
div#mw-head .vector-menu-tabs li a,
.vector-menu-dropdown .vector-menu-heading {
  color: #ffffff;
  font-weight: 400;

  /* Center tab text vertically */
  height: var(--mw-head-height);
  padding-block: 0;
  display: flex;
  align-items: center;
}

/* Change font color and weight of selected tab */
div#mw-head .vector-menu-tabs-legacy .selected a,
div#mw-head .vector-menu-tabs-legacy .selected a:visited {
  color: #000;
  font-weight: 600;
}

/* Change selected tab color and font color in head */
div#mw-head ul.vector-menu-content-list > li.selected {
  background-color: #FFFFFF;
  color: #000000;
  font-weight: 600;
}

/* fix watchlink icon overlapping with hidden label text */
div#mw-head .vector-menu-tabs .mw-watchlink.icon a {
  text-indent: 9999px;
}

/* Remove left padding of tab menu */
nav#p-namespaces {
  margin-left: 0 !important; /* overriding !important in MW default CSS */
}
.vector-menu-tabs-legacy {
  padding-left: 0;
}

/* Search bar styling */
.vector-search-box {
  margin: 0 0.5rem;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.vector-search-box form {
  margin: 0;
}
div#simpleSearch {
  background: none;
}
.vector-search-box-input {
  background-color: #FFF;
  border: 0;
  border-radius: var(--border-radius-minor);
}

/* Remove border from body and add dropshadow*/
@media screen {
  .mw-body {
    color:var(--text-color);
    margin-top: 0px;
    border: 0px;
    border-right-width: 0px;
    box-shadow: 0 4px 16px #0003;
  }
}

body {
  background-color: rgb(218,232,247);
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-attachment: scroll, scroll;
  background-image: linear-gradient(
    to bottom,
    rgb(55, 91, 153) 0px,
    rgb(54, 103, 175) 100px,
    rgb(59, 124, 190) 400px,
    rgb(218,232,247) 900px
  );
  background-size: auto, auto;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  font-family: var(--font-family-body);
}
.mw-body h1,
.mw-body h2 {
  font-family: var(--font-family-heading);
  font-weight: 500;
}