MediaWiki:Timeless.css: verschil tussen versies

Huidige versie van 19 feb 2026 12:32

/* CSS placed here will affect users of the Timeless skin */

/* Font Face */
@font-face {
  font-family: "Grobold";
  src: url("https://wiki.dreambearsaga.nl/images/grobold.woff2") format("woff2"),
       url("https://gwiki.dreambearsaga.nl/images/grobold.woff") format("woff");
}

#ca-nstab-category, #mw-indicator-mw-helplink { display: none !important; }

#p-logo-text #p-banner {
    font-family: 'Helvetica Neue','Nimbus Sans','Helvetica','Arial',sans-serif !important; 
    color: white !important;
    font-size: 1.1em !important;
    font-variant: none !important;
}

.wikitable tr:first-child th {
    background-color: #82EE7E !important;
}

.wikitable tr td {
    background-color: rgba(130, 238, 126, 0.7) !important;
    color: black !important;
}

.wikitable tr td a { text-decoration: underline; }

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
    border: 1px solid #82EE7E;
    padding: 0.65em;
}

/* Body & Background */
body { 
  background: url("https://wiki.dreambearsaga.nl/images/background.webp") center top no-repeat !important; 
  background-size: 1920px 5627px !important; 
}

/* Links */
.mw-parser-output p a {
    font-weight: 600;
}

a { 
  color: black !important; 
}

a:visited { 
  color: black !important; 
  font-weight: 600 !important; 
}

.mw-parser-output a.external { 
  color: black !important; 
  font-weight: 600 !important; 
}

/* Logo */
.mw-wiki-logo { 
  height: 6em !important; 
  background-size: contain !important; 
  margin-top: 0px !important; 
}

/* Header */
#mw-header-container { 
  background-image: url("https://wiki.dreambearsaga.nl/images/topbar-background.png"); 
  background-size: contain; 
}

/* Footer */
#mw-footer-container { 
  border-top: none !important; 
  box-shadow: none !important; 
}

#mw-footer-container a { 
  color: white !important; 
}

/* Content Container */
#mw-content-container { 
  margin-top: 65px; 
  background: none !important; 
  border-bottom: none !important; 
}

/* Content */
#mw-content { 
  background: #B4F6B3 !important; 
  border: solid white !important; 
  border-width: 7px !important; 
  box-shadow: none !important;
  padding: 1em 2em 0.5em !important;
}

/* Navigation */
#site-navigation { 
  background: #B4F6B3 !important; 
  border: solid white !important; 
  border-width: 7px !important; 
  box-shadow: none !important; 
}

/* Page Header Links */
#mw-page-header-links li { 
  border-bottom: solid 2px transparent !important; 
}

#mw-page-header-links li.selected { 
  border-bottom-color: black !important; 
}

/* Headings */
h1, h2, h3 { 
  font-family: 'Grobold' !important; 
  color: white !important; 
  padding-left: 4px !important; 
  padding-bottom: 5px !important; 
}

#mw-content h1 { 
  font-size: 1.8em !important; 
}

#mw-content h1.firstHeading { 
  border-bottom: none !important; 
}

#mw-content h1, #mw-content h2 { 
  border-bottom: none !important; 
}

#mw-content h2 { 
  font-size: 1.5em !important; 
}

#mw-content h3 { 
  font-size: 1.2em !important; 
}

/* Portlet Headings */
.mw-portlet h3, .toctitle h2 { 
  font-family: 'Helvetica Neue','Nimbus Sans','Helvetica','Arial',sans-serif !important; 
  color: black !important; 
  padding-left: 0 !important; 
  font-weight: 600 !important; 
}

#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 { 
  border-bottom: solid 1px black !important; 
}

/* Search */
.mw-search-input input,
#searchInput { 
  height: 2em !important; 
  margin-bottom: 1px !important; 
}

/* Hidden Elements */
.color-bar { 
  display: none !important; 
}

.footer-icons { 
  display: none !important; 
}

#about, #disclaimer { 
  display: none !important; 
}

#catlinks-sidebar { 
  display: none !important; 
}

#page-tools { 
  display: none !important; 
}

#site-tools { 
  display: none !important; 
}

#user-tools { 
  display: none !important; 
}

.mw-changeslist-legend, #mw-content .mw-search-profile-tabs, #mw-content fieldset#mw-searchoptions, table.wikitable {
    border: solid white;
    border-width: 3px 3px 0.2em
}

.wikitable tbody tr th { text-align: left !important; }

@media screen and (min-width: 1100px) {
    #p-logo { position: relative; top: -70px; z-index: 1000; }
    #site-navigation { position: relative; top: -65px; }
    #mw-header-container { position: absolute !important; }
    #p-logo-text { display: none !important; }
}

@media screen and (max-width: 1099px) {
    #content-bottom-stuff { display: none !important; }
    #mw-content-block {
      margin-left: 15px !important;
      margin-right: 15px !important;
    }
   #mw-page-header-links { display: none !important; }
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-header-nav-hack {
      border-top: none !important;
    }

    #p-logo-text #p-banner {
      margin-top: 0px !important;
      font-size: 1.1em !important;
      margin-left: 25px !important;
    }
}

@media screen and (min-width: 851px) {
    .mw-wiki-logo.timeless-logo img { width: 170px !important; }
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation h2 {
      font-family: 'Helvetica Neue','Nimbus Sans','Helvetica','Arial',sans-serif !important;
      font-size: 1em !important;
    }
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation .sidebar-chunk {
      background-color: transparent !important;
      border: none !important;
      margin-left: 5px !important;
      margin-bottom: 10px !important;
    }
}

@media screen and (max-width: 850px) {
    #user-tools h2:after, .sidebar-chunk h2:after {
      top: 0.75em !important;
      left: 32px !important;
    }

    #p-logo-text #p-banner {
       margin-top: 10px !important;
    }

    #site-navigation .sidebar-inner {
      background-color: #B4F6B3 !important;
      border: 7px solid white !important;
      left: 12px !important;
      box-shadow: none !important;
      margin-top: 10px !important;
    }

    #menus-cover {
      background: black !important;
      opacity: 0.75 !important;
    }

    #site-navigation {
      border-width: 0px !important;
    }

    #mw-content {
      padding: 1em 1em 1em !important;
    }

    #mw-content-block {
      margin-left: 15px !important;
      margin-right: 15px !important;
    }

    #ca-nstab-main, #ca-more {
      display: none !important;
      height: 0px !important;
    }

    #mw-content-container { margin-top: 10px !important; }

    #mw-page-header-links div { height: 0px !important; }
}

@media screen and (min-width: 1340px) {
    #mw-content {
        margin: 0 auto;
        max-width: 900px;
    }
}

@media screen and (min-width: 851px) {
    #p-search {
        margin-left: 20em;
        margin-right: 20em;
    }
}

@media screen and (min-width: 1340px) {
    #mw-site-navigation {
        padding-right: 1em;
        margin-left: 5.5em;
    }

    #mw-footer {
        text-align: center;
        margin-left: 20em;
        margin-right: 20em;
        padding-bottom: 0.5em;
    }
}

#mw-footer-container {
    display: none;
}

::selection {
    background: #4A7C59;
    color: #ffffff;
}

.mw-category.mw-category-columns { margin-bottom: 0.5em; }

@media screen and (min-width: 1100px) and (max-width: 1339px) {
    #mw-site-navigation {
        overflow: visible !important;
    }
}

@media screen and (min-width: 851px) {
    #p-search {
        margin-left: 14em !important;
        margin-right: 0em !important;
    }
}

@media screen and (min-width: 1340px) {
    #p-search {
        margin-left: 26.5em !important;
        margin-right: 23em !important;
    }
}

#searchButton, #mw-searchButton { right: 0em !important; }

@media screen and (max-width: 850px) {
    #site-navigation h2 {
        left: 0.45em !important;
        background-image: url(https://wiki.dreambearsaga.nl/images/menu-icon.svg) !important;
    }
}

@media screen and (max-width: 850px) {
    #user-tools h2, .sidebar-chunk h2 {
        height: 20px !important;
        top: 1.25em !important;
    }
}

@media screen and (max-width: 850px) {
    #user-tools h2:after, .sidebar-chunk h2:after {
        display: none !important;
    }
}

@media screen and (max-width: 850px) {
    #p-logo-text { left: 3.5em !important; }
}

@media screen and (max-width: 850px) {
    #mw-content-block { margin-bottom: 1em !important; }
}

@media screen and (max-width: 850px) {
    #mw-content {
        padding: 1em 1em 0em !important;
    }
}