MediaWiki:Timeless.css

From Inkipedia, the Splatoon wiki
Revision as of 22:56, 26 May 2022 by Heddy (talk | contribs) (By default, Timeless uses single sidebar for certain screen sizes (1100px width to 1339px width). I am removing the customization that forced single sidebar for larger screen widths, because it is not needed for those screen sizes. Adjusted sticky sidebar to only work when single sidebar is active. Reverted to default behavior for content area size; articles will no longer stretch to fill large screens, making them more consistent and easier to read.)

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.
#p-banner.mw-wiki-title {
  font-variant: normal;
  font-weight: bold;
  color: #2f7020;
  margin-right: .25em;
}

/* top bar color */
.color-left,
.color-middle,
.color-right {
  background: #aadc00;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-body #firstHeading,
.mw-body #siteSub,
#p-banner.mw-wiki-title,
#personal h2,
#mw-content-text dt {
  font-family: 'Helvetica Neue', 'Nimbus Sans', 'Helvetica', 'Arial', sans-serif;
}

/* fix for header colliding with infobox */
.mw-body h2 {
  overflow: hidden;
}

#mw-content-text dt {
  font-weight: bold;
}

#site-navigation.sidebar-chunk,
#site-tools.sidebar-chunk,
#page-tools.sidebar-chunk,
#other-languages.sidebar-chunk,
#catlinks-sidebar.sidebar-chunk {
  border-color: #aadc00;
  border-width: 2px 2px 2px 10px;
  border-radius: 2px;
}

/* sidebar header colors */
.sidebar-chunk h3#p-navigation-label,
.sidebar-chunk h3#p-tb-label,
.sidebar-chunk h3#p-lang-label {
  border-bottom: solid 2px #007edc;
}
.sidebar-chunk h3#p-Splatoon-label,
.sidebar-chunk h3#p-cactions-label {
  border-bottom: solid 2px #d60e6e;
}
.sidebar-chunk h3#p-Explore-label,
.sidebar-chunk h3#p-userpagetools-label,
.sidebar-chunk h3#p-normal-catlinks-label {
  border-bottom: solid 2px #fb5c03;
}
.sidebar-chunk h3#p-Community-label,
.sidebar-chunk h3#p-pagemisc-label {
  border-bottom: solid 2px #830b9c;
}

/* ink splotches on headers */
.mw-body h1,
.mw-body h2 {
  position: relative;
}
/* ::before element is needed for opacity */
.mw-body h1::before,
.mw-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .6; 
  z-index: -1;
  background-image: url(//cdn.wikimg.net/splatoonwiki/images/5/5c/Drip-heading.png);
  background-repeat: no-repeat;
}
.mw-body h1::before { background-position: 97% -2.5%; } /* green */
.mw-body h2:nth-of-type(6n-5)::before { background-position: 97% 20%; } /* purple */
.mw-body h2:nth-of-type(6n-4)::before { background-position: 97% 40%; } /* blue */
.mw-body h2:nth-of-type(6n-3)::before { background-position: 97% 60%; } /* orange */
.mw-body h2:nth-of-type(6n-2)::before { background-position: 97% 80%; } /* pink */
.mw-body h2:nth-of-type(6n-1)::before { background-position: 97% 100%; } /* cyan */
.mw-body h2:nth-of-type(6n)::before { background-position: 97% 0%; } /* green */
#toc h2::before { background: none; } /* prevent splotches from showing on table of contents header */
/* prevent h1 help links from becoming unclickable due to the ::before elements */
div#mw-indicator-mw-helplink {
  position: relative;
  z-index: 1;
}

#mw-content-container {
  background-image: url(//cdn.wikimg.net/en/splatoonwiki/images/d/d4/S2_background_stripe_pattern.svg);
  background-repeat: repeat;
  border-bottom-color: #aadc00;
  padding-bottom: 0;
}

@media (min-width: 1100px) {
  #mw-site-navigation {
    padding-top: .25em;
  }
  #mw-content {
    border-color: #aadc00;
    border-width: 0 2px;
  }
}

/* sticky sidebar */
@media (min-height: 850px) and (min-width: 1100px) and (max-width: 1339px) {
  #mw-related-navigation {
    position: sticky;
    top: 4.5em;
    padding-bottom: .1em;
  }
}

/* on some screen sizes, categories appear at the bottom and need a background to be readable */
#content-bottom-stuff {
  background-color: white;
}

/* fixes issue where empty space appears below footer on some screen sizes */
@media (max-width: 1099px) {
  #mw-footer {
    padding-bottom: 0.5em;
  }
}

#mw-footer-container {
  background-image: url(//cdn.wikimg.net/splatoonwiki/images/b/b4/Featured-bg.png);
  background-repeat: repeat;
}

#mw-footer-container li,
#mw-footer-container a {
  color: #333;
}

/* on smaller screen sizes, prevents tables from stretching pages, and makes them scrollable */
@media (max-width: 850px) {
  :not(.tagInfobox) > table {
    display: block;
    overflow-x: auto;
    padding: 0 !important;
  }
}

.mw-changeslist {
  line-height: 1.5;
}

/* remove excess margin from recent change table */
#bodyContent #mw-content-text .mw-changeslist div table {
  margin-left: 0;
}

/* fix visual glitches on recent changes */
.mw-changeslist-legend .mw-collapsible-content dt {
  margin: 0 0.5em 0 0;
}
#mw-content-text .oo-ui-tagMultiselectWidget-handle {
  margin-bottom: 0;
}
.mw-rcfilters-ui-row .oo-ui-inputWidget-input {
  margin: 0;
}

/* Template:Infobox/Weapon */
@media (max-width: 600px)
{
  .tagInfobox{
    float:unset !important;
    width:unset !important;
  }
}

/* Footer links */
#mw-footer-container a:hover, #mw-footer-container a:visited {
  color: #555;
}