Difference between revisions of "MediaWiki:Timeless.css"

Revision as of 07:12, 29 May 2021

/* All CSS here will be loaded for users of the Timeless skin */
/* https://www.mediawiki.org/wiki/Skin:Timeless */

 /********/
/* Body */

#mw-content-container {
    background: #71bdf7;
    background-image: url("https://drawntolife.wiki/w/images/0/0b/WikiBackground.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
}
/* Footer color */
body {
    background: #353c49;
}

/* Content width
.ts-inner {
    max-width: 145em;
}
*/
/* 1em from top and side on large screens */
@media (min-width: 1100px) {
 #mw-content, #content-bottom-stuff {
     margin-top: 1em;
     margin-right: 1em;
     border: 3px solid #5aa7e2;
     border-radius: 10px;
     box-shadow: #0000007d 0 0 4px;
 }
}
 /********/
/* Logo */

.mw-wiki-logo {
    background-image: url(https://drawntolife.wiki/w/images/0/0b/DTLWIKIBig.png);
    background-size: 100%;
}
.mw-wiki-logo:hover {
    background-image: url(https://drawntolife.wiki/w/images/1/1d/DTLWikiAnimated.png);
    background-size: 100%;
}

 /***********/
/* Modules */

/* Toc */
/* Left borders */
.mw-content-ltr .toc ul ul, .mw-content-rtl .mw-content-ltr .toc ul ul {
    border-left: 2px solid #c8ccd1;
    padding-left: 0.5em;
}
.tocnumber {
    display: none;
}
/* Highlight */
.mw-headline:target {
    background-color: #ffef008a;
    transition: 0.8s;
    border-radius: 10px;
    padding: 0 3px 0 3px;
}

/* Experimental and inefficient edit button text remover */
span.mw-editsection a {
 color: transparent;
 width: 1px;
 display: inline-flex;
}

/* Header Page Title */
.mw-body h1.firstHeading {
    font-family: Arco;
    border-radius: 4px;
}

/* Header H3 */
.mw-body h3 {
border-bottom: solid 2px #c8ccd1;
overflow: hidden;
font-size: 1.4em;
}


/* One-sided navigation menu */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  /* BAKI CODE - Fixes un-interactive logo */
  #mw-site-navigation {
    display: grid;
  }
  /* With above - fixes vertical margin for elements in sidebar */
  #mw-site-navigation .sidebar-chunk {
   margin: 1em 0 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
}

/* Align top colour bar with page columns */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Re-aligning bottom logos */
#footer { padding-right: 1em; }

/* Top bar font modernization */
#personal h2 span {
  font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}
@media screen and (min-width:851px) and (max-width:1099px) {
 #mw-site-navigation h2, #mw-related-navigation h2 {
  font-size: 1.2em;
  font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
 }
}

#p-logo-text {
  visibility: hidden;
}

 /***********/
/* Buttons */

/* Selected */
#ca-nstab-mediawiki.selected,#ca-nstab-main.selected,#ca-edit.selected,#ca-history.selected {
 padding: 5px;
 background: #72b531;
 margin: 5px 2px 0;
 border-radius: 5px;
 border-bottom: 0.3rem solid #3b7e0e;
 transition: 0.3s;
}
.tools-inline li[id^="ca-nstab-"] a,#ca-edit a, #ca-history a,#ca-talk a {
    color: white;
    font-weight: bold;
    padding-left: 1.5em;
}


/* Unselected */
#p-views li, #p-more li {
    margin-left: 1em;
    background: #5aa7e2;
    border-bottom: 0.3rem solid #254a8f;
    margin: 5px 2px 0;
    border-radius: 5px;
    transition: 0.3s;
    padding: 5px;
}

/* Talk */
#ca-talk {
    background: #e49202;
    margin: 5px 2px 0;
    border-radius: 5px;
    padding: 5px;
    border-bottom: 0.3rem solid #b24408;
    transition: 0.3s;
}

@media (min-width: 1340px) {
  #mw-page-header-links {
    position: absolute;
    right: 0;
    top: -4.4em;
  }
}


/*Header blurs when scroll is > 200*/
.headerblur {
  backdrop-filter: blur(5px);
  background: #fffc !important;
  transition: background 0.5s;
}

@media (min-width: 1100px) { {
 #mw-header-nav-hack, #mw-header-hack {
    box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.18),0 0 2px rgba(0, 0, 0, 0.76);
   }
}