MediaWiki:Timeless.css: Difference between revisions

From Inkipedia, the Splatoon wiki
(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.)
(Allow sticky sidebar to work in dual-sidebar mode.)
Line 116: Line 116:
     position: sticky;
     position: sticky;
     top: 4.5em;
     top: 4.5em;
    padding-bottom: .1em;
  }
}
@media (min-height: 600px) and (min-width: 1400px) {
  #mw-related-navigation {
    position: sticky;
top: 53px;
    padding-bottom: .1em;
    height: fit-content;
  }
  #site-tools {
position: sticky;
    top: 67px;
     padding-bottom: .1em;
     padding-bottom: .1em;
   }
   }

Revision as of 23:49, 26 May 2022

#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;
  }
}
@media (min-height: 600px) and (min-width: 1400px) {
  #mw-related-navigation {
    position: sticky;
	top: 53px;
    padding-bottom: .1em;
    height: fit-content;
  }
  #site-tools {
	position: sticky;
    top: 67px;
    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;
}