Difference between revisions of "MediaWiki:Timeless.css"

From Drawn to Life Wiki
(Blanked the page)
Tag: Blanking
(Undo revision 11537 by BakiDance (talk))
Tag: Undo
Line 1: Line 1:
 +
/* All CSS here will be loaded for users of the Timeless skin */
 +
/* https://www.mediawiki.org/wiki/Skin:Timeless */
  
 +
/********/
 +
/* Body */
 +
 +
@media screen and (max-width: 1439px) {
 +
#mw-content-container:not(.ns-2) {
 +
    background: #71bdf7;
 +
    background-image: url("https://drawntolife.wiki/w/images/1/1e/ForestWikiBackgroundsMedium.png");
 +
    background-attachment: fixed;
 +
    background-size: cover;
 +
    background-position: bottom;
 +
}
 +
}
 +
 +
@media screen and (min-width: 1440px) {
 +
#mw-content-container:not(.ns-2) {
 +
    background: #71bdf7;
 +
    background-image: url("https://drawntolife.wiki/w/images/2/2b/ForestWikiBackgroundsBig.png");
 +
    background-attachment: fixed;
 +
    background-size: cover;
 +
    background-position: bottom;
 +
}
 +
}
 +
 +
@media screen and (max-width: 1439px) {
 +
.ns-2 #mw-content-container,.ns-6 #mw-content-container,.ns-10 #mw-content-container {
 +
    background: #71bdf7;
 +
    background-image: url("https://drawntolife.wiki/w/images/archive/0/08/20210602053901%21ForestWikiBackgroundsMediumGrid.png");
 +
    background-attachment: fixed;
 +
    background-size: cover;
 +
    background-position: bottom;
 +
}
 +
}
 +
 +
@media screen and (min-width: 1440px) {
 +
.ns-2 #mw-content-container,.ns-6 #mw-content-container,.ns-10 #mw-content-container {
 +
    background: #71bdf7;
 +
    background-image: url("https://drawntolife.wiki/w/images/archive/1/15/20210602053855%21ForestWikiBackgroundsBigGrid.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 and sidebar borders */
 +
@media (min-width: 1100px) {
 +
 +
#mw-content {
 +
    border: 3px solid #5aa7e2;
 +
    border-radius: 10px;
 +
    box-shadow: #0000007d 0 0 4px;
 +
    margin-top: 1em;
 +
    margin-right: 1em;
 +
    background: rgba(255, 255, 255, 0.99);
 +
}
 +
 +
 +
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
 +
    border: 3px solid #5aa7e2;
 +
    border-radius: 10px;
 +
    box-shadow: #0000007d 0 0 4px;
 +
    background: rgba(255, 255, 255, 0.98);
 +
}
 +
 +
}
 +
/********/
 +
/* Logo */
 +
 +
.mw-wiki-logo {
 +
    background-image: url(https://drawntolife.wiki/w/images/0/0b/DTLWIKIBig.png);
 +
    background-size: 100%;
 +
    transition: 0.2s;
 +
}
 +
.mw-wiki-logo:hover {
 +
    background-image: url(https://drawntolife.wiki/w/images/1/1d/DTLWikiAnimated.png);
 +
    background-size: 100%;
 +
}
 +
@media (max-width: 1339px) {
 +
.mw-wiki-logo:active {
 +
    background-image: url(https://drawntolife.wiki/w/images/1/1d/DTLWikiAnimated.png);
 +
    background-size: 95%;
 +
}
 +
}
 +
/***********/
 +
/* Modules */
 +
 +
/* Notification */
 +
.mw-notification, .dropdown {
 +
  border-radius: 5px;
 +
  box-shadow: #0000001a 0px 3px 4px;
 +
}
 +
@media screen and (min-width: 851px) and (max-width: 1339px) {
 +
#mw-wrapper .dropdown-active .dropdown {
 +
    margin-right: 1.4em;
 +
}
 +
}
 +
 +
/* Navbar border-bottom color */
 +
#mw-content-container {
 +
    margin-top: 3.21em;
 +
}
 +
@media screen and (min-width: 851px) {
 +
.color-bar {
 +
    visibility: hidden;
 +
}
 +
}
 +
 +
@media screen and (max-width:850px) {
 +
#mw-content-container {
 +
    margin-top: 0;
 +
}
 +
.color-right, .color-middle, .color-left {
 +
    background: #0d3e91;
 +
    height: 0.35em;
 +
}
 +
}
 +
#mw-header-nav-hack, #mw-header-hack {
 +
    box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.17),0 0 2px rgba(0, 0, 0, 0.22);
 +
}
 +
@media screen and (min-width: 851px) {
 +
#mw-header-container {
 +
    border-bottom: 2px solid #ffffff;
 +
}
 +
}
 +
 +
/* 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;
 +
}
 +
/* Shadow */
 +
.toc {
 +
    box-shadow: #0000001a 0px 3px 4px;
 +
}
 +
 +
/* 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;
 +
}
 +
 +
/* Search */
 +
#simpleSearch {
 +
    border-radius: 0.5em;
 +
}
 +
 +
 +
/* 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,
 +
#ca-nstab-user.selected,
 +
#ca-nstab-template.selected,
 +
#ca-nstab-user.selected,
 +
#ca-nstab-user.selected,
 +
#ca-nstab-category.selected,
 +
#ca-nstab-image.selected,
 +
#ca-nstab-project.selected {
 +
padding: 5px;
 +
background: #72b531;
 +
margin: 5px 2px 0;
 +
border-radius: 5px;
 +
border-bottom: 0.3rem solid #3b7e0e;
 +
box-shadow: inset 3.65em 0px 0px -1.9em #3b7e0e61;
 +
transition: 0.3s;
 +
}
 +
/* Small */
 +
@media screen and (max-width: 850px){
 +
#ca-nstab-mediawiki.selected,
 +
#ca-nstab-main.selected,
 +
#ca-edit.selected,
 +
#ca-history.selected,
 +
#ca-nstab-user.selected,
 +
#ca-nstab-template.selected,
 +
#ca-nstab-user.selected,
 +
#ca-nstab-user.selected,
 +
#ca-nstab-category.selected,
 +
#ca-nstab-image.selected,
 +
#ca-nstab-project.selected {
 +
padding: 5px;
 +
background: #72b531;
 +
margin: 5px 2px 0;
 +
border-radius: 5px;
 +
border-bottom: 0.3rem solid #3b7e0e;
 +
box-shadow: none;
 +
transition: 0.7s;
 +
}
 +
}
 +
/* Hover */
 +
#ca-nstab-mediawiki.selected:hover,
 +
#ca-nstab-main.selected:hover,
 +
#ca-edit.selected,
 +
#ca-history.selected:hover,
 +
#ca-nstab-user.selected:hover,
 +
#ca-nstab-template.selected:hover,
 +
#ca-nstab-user.selected:hover,
 +
#ca-nstab-user.selected:hover,
 +
#ca-nstab-category.selected:hover,
 +
#ca-nstab-image.selected:hover,
 +
#ca-nstab-project.selected:hover {
 +
padding: 5px;
 +
background: #72b531;
 +
margin: 5px 2px 0;
 +
border-radius: 5px;
 +
border-bottom: 0.3rem solid #3b7e0e;
 +
box-shadow: inset 3.65em 0px 0px 20em #3b7e0e61;
 +
transition: 0.7s;
 +
}
 +
/* Active */
 +
#ca-nstab-mediawiki.selected:active,
 +
#ca-nstab-main.selected:active,
 +
#ca-edit.selected,
 +
#ca-history.selected:active,
 +
#ca-nstab-user.selected:active,
 +
#ca-nstab-template.selected:active,
 +
#ca-nstab-user.selected:active,
 +
#ca-nstab-user:active,
 +
#ca-nstab-category:active,
 +
#ca-nstab-image.selected:active,
 +
#ca-nstab-project.selected:active {
 +
padding:5px;
 +
background:#72b531;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
border-bottom:0.3rem solid #6a9c0c;
 +
box-shadow:inset 3.65em 0px 0px 20em #94c231;
 +
transition:0.7s;
 +
position: relative;
 +
top: 2px;
 +
}
 +
 +
.tools-inline li[id^="ca-nstab-"] a,#ca-edit a, #ca-history a,#ca-talk a,#t-contributions a {
 +
    color: white;
 +
    font-weight: bold;
 +
    padding-left: 1.5em;
 +
}
 +
 +
/* Watch */
 +
#ca-unwatch.mw-watchlink,#ca-watch.mw-watchlink {
 +
padding: 5px;
 +
background: #ffc742;
 +
margin: 5px 2px 0 -11px;
 +
border-radius: 5px;
 +
border-bottom: 0.3rem solid #e48102;
 +
transition: 0.3s;
 +
}
 +
#ca-unwatch.mw-watchlink:hover,#ca-watch.mw-watchlink:hover {
 +
padding: 5px;
 +
background: #f2a624;
 +
margin: 5px 2px 0 -11px;
 +
border-radius: 5px;
 +
border-bottom: 0.3rem solid #e48102;
 +
transition: 0.3s;
 +
}
 +
#ca-unwatch.mw-watchlink:active,#ca-watch.mw-watchlink:active {
 +
padding: 5px;
 +
background: #ffd745;
 +
margin: 5px 2px 0 -11px;
 +
border-radius: 5px;
 +
border-bottom: 0.3rem solid #e49d0d;
 +
transition: 0.3s;
 +
position: relative;
 +
top: 3px;
 +
}
 +
 +
/* Unselected */
 +
#p-views li, #p-more li {
 +
    margin-left: 1em;
 +
    background: #5aa7e2;
 +
    border-bottom: 0.3rem solid #254a8f;
 +
    box-shadow: inset 3.65em 0px 0px -1.9em #254a8f61;
 +
    margin: 5px 2px 0;
 +
    border-radius: 5px;
 +
    transition: 0.3s;
 +
    padding: 5px;
 +
}
 +
@media screen and (max-width: 850px){
 +
#p-views li, #p-more li {
 +
    margin-left: 1em;
 +
    background: #5aa7e2;
 +
    border-bottom: 0.3rem solid #254a8f;
 +
    box-shadow: none;
 +
    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;
 +
    box-shadow: inset 3.65em 0px 0px -1.9em #b2440861;
 +
    transition: 0.3s;
 +
}
 +
@media screen and (max-width: 850px){
 +
#ca-talk {
 +
    background: #e49202;
 +
    margin: 5px 2px 0;
 +
    border-radius: 5px;
 +
    padding: 5px;
 +
    border-bottom: 0.3rem solid #b24408;
 +
    box-shadow: none;
 +
    transition: 0.7s;
 +
}
 +
}
 +
#ca-talk:hover {
 +
    background: #e49202;
 +
    border-radius: 5px;
 +
    padding: 5px;
 +
    border-bottom: 0.3rem solid #b24408;
 +
    box-shadow: inset 3.65em 0px 0px 20em #b2440861;
 +
    transition: 1s;
 +
}
 +
#ca-talk:active {
 +
    background: #e49202;
 +
    border-radius: 5px;
 +
    padding: 5px;
 +
    border-bottom: 0.3rem solid #c36f08;
 +
    box-shadow: inset 3.65em 0px 0px 20em #f1ad00;
 +
    transition: 0.7s;
 +
    position: relative;
 +
    top: 2px;
 +
}
 +
 +
/* Icon replacements */
 +
#ca-edit a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/editicon.png);
 +
    background-size: 1.15em;
 +
    background-position: left center;
 +
}
 +
@media screen and (max-width: 850px){
 +
#ca-edit a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/editicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
}
 +
#ca-edit:hover {
 +
margin-left:1em;
 +
background:#5aa7e2;
 +
border-bottom:0.3rem solid #254a8f;
 +
box-shadow:inset 3.65em 0px 0px 20em #254a8f61;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
transition:0.7s;
 +
padding:5px
 +
}
 +
#ca-edit:active {
 +
margin-left:1em;
 +
background:#5aa7e2;
 +
border-bottom:0.3rem solid #2972a3;
 +
box-shadow:inset 3.65em 0px 0px 20em #5cbee8;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
transition:0.7s;
 +
padding:5px;
 +
position: relative;
 +
top: 2px;
 +
}
 +
 +
 +
#ca-history a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/historyicon.png);
 +
    background-size: 1.15em;
 +
    background-position: left center;
 +
}
 +
@media screen and (max-width: 850px){
 +
#ca-history a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/historyicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
}
 +
#ca-history:hover {
 +
margin-left:1em;
 +
background:#5aa7e2;
 +
border-bottom:0.3rem solid #254a8f;
 +
box-shadow:inset 3.65em 0px 0px 20em #254a8f61;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
transition:0.7s;
 +
padding:5px
 +
}
 +
#ca-history:active {
 +
margin-left:1em;
 +
background:#5aa7e2;
 +
border-bottom:0.3rem solid #2972a3;
 +
box-shadow:inset 3.65em 0px 0px 20em #5cbee8;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
transition:0.7s;
 +
padding:5px;
 +
position: relative;
 +
top: 2px;
 +
}
 +
#ca-talk a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/discussionicon.png);
 +
    background-size: 1.15em;
 +
    background-position: left center;
 +
}
 +
@media screen and (max-width: 850px){
 +
#ca-talk a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/discussionicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
}
 +
.tools-inline li[id^="ca-nstab-"] a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/pageicon.png);
 +
    background-size: 1.15em;
 +
    background-position: left center;
 +
}
 +
@media screen and (max-width: 850px){
 +
.tools-inline li[id^="ca-nstab-"] a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/pageicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
}
 +
#ca-watch a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/watchicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
#ca-unwatch a
 +
{
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/unwatchicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
#t-contributions a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/contributionsicon.png);
 +
    background-size: 1.23em;
 +
    background-position: left center;
 +
}
 +
#t-contributions:hover {
 +
margin-left:1em;
 +
background:#5aa7e2;
 +
border-bottom:0.3rem solid #254a8f;
 +
box-shadow:inset 3.65em 0px 0px 20em #254a8f61;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
transition:0.7s;
 +
padding:5px
 +
}
 +
#t-contributions:active {
 +
margin-left:1em;
 +
background:#5aa7e2;
 +
border-bottom:0.3rem solid #2972a3;
 +
box-shadow:inset 3.65em 0px 0px 20em #5cbee8;
 +
margin:5px 2px 0;
 +
border-radius:5px;
 +
transition:0.7s;
 +
padding:5px;
 +
position: relative;
 +
top: 2px;
 +
}
 +
 +
@media screen and (max-width: 850px){
 +
#t-contributions a {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/contributionsicon.png);
 +
    background-size: 1.23em;
 +
    background-position: center center;
 +
}
 +
}
 +
#ca-more span {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/settingsicon.png);
 +
    background-size: 1.15em;
 +
    background-position: left center;
 +
}
 +
@media screen and (max-width: 850px){
 +
#ca-more span {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/settingsicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
}
 +
#ca-languages span {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/languageicon.png);
 +
    background-size: 1.15em;
 +
    background-position: left center;
 +
}
 +
@media screen and (max-width: 850px){
 +
#ca-languages span {
 +
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/languageicon.png);
 +
    background-size: 1.15em;
 +
    background-position: center center;
 +
}
 +
}
 +
 +
/* Big Logo on large display */
 +
@media (min-width: 1340px) {
 +
  #mw-content {
 +
    margin-top: 10.7em;
 +
}
 +
 +
.mw-wiki-logo {
 +
    background-image: url(https://drawntolife.wiki/w/images/3/35/WikiLogo.png?07ef3);
 +
}
 +
  .mw-wiki-logo:hover {
 +
    background-image: url(https://drawntolife.wiki/w/images/3/35/WikiLogo.png?07ef3);
 +
    filter: brightness(1.2);
 +
}
 +
 +
.mw-wiki-logo.fallback {
 +
    width: 26em;
 +
    height: 9.2em;
 +
    position: absolute;
 +
    left: 43%;
 +
    top: 3em;
 +
    transition: 0.3s;
 +
}
 +
.mw-wiki-logo.fallback:active {
 +
    height: 10.2em;
 +
}
 +
#p-logo {
 +
    margin-top: 9.736em;
 +
}
 +
}
 +
 +
/* Blurs header on scroll > 200 */
 +
.headerblur {
 +
  backdrop-filter: blur(5px);
 +
  background: linear-gradient(to bottom, #FFF, #FFFFFFA3) !important;
 +
  transition: background 0.5s;
 +
}
 +
 +
/* Fix category pane on 2nd smallest size */
 +
@media screen and (min-width:851px) and (max-width:1099px) {
 +
#content-bottom-stuff {
 +
    background: #353c49;
 +
    border-top: solid 3px #5aa7e2;
 +
}
 +
/* Page margins and border shadow*/
 +
#mw-content {
 +
    margin-left: 1em;
 +
    margin-bottom: 1em;
 +
    margin-right: 1em;
 +
    border: 3px solid #5aa7e2;
 +
    box-shadow: #0000007d 0 0 4px;
 +
    border-bottom-right-radius: 10px;
 +
    border-bottom-left-radius: 10px;
 +
}
 +
}

Revision as of 02:06, 3 June 2021

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

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

@media screen and (max-width: 1439px) {
 #mw-content-container:not(.ns-2) {
    background: #71bdf7;
    background-image: url("https://drawntolife.wiki/w/images/1/1e/ForestWikiBackgroundsMedium.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
 }
}

@media screen and (min-width: 1440px) {
 #mw-content-container:not(.ns-2) {
    background: #71bdf7;
    background-image: url("https://drawntolife.wiki/w/images/2/2b/ForestWikiBackgroundsBig.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
 }
}

@media screen and (max-width: 1439px) {
 .ns-2 #mw-content-container,.ns-6 #mw-content-container,.ns-10 #mw-content-container {
    background: #71bdf7;
    background-image: url("https://drawntolife.wiki/w/images/archive/0/08/20210602053901%21ForestWikiBackgroundsMediumGrid.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
 }
}

@media screen and (min-width: 1440px) {
 .ns-2 #mw-content-container,.ns-6 #mw-content-container,.ns-10 #mw-content-container {
    background: #71bdf7;
    background-image: url("https://drawntolife.wiki/w/images/archive/1/15/20210602053855%21ForestWikiBackgroundsBigGrid.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 and sidebar borders */
@media (min-width: 1100px) {

 #mw-content {
     border: 3px solid #5aa7e2;
     border-radius: 10px;
     box-shadow: #0000007d 0 0 4px;
     margin-top: 1em;
     margin-right: 1em;
     background: rgba(255, 255, 255, 0.99);
 }
 
 
 #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
    border: 3px solid #5aa7e2;
    border-radius: 10px;
    box-shadow: #0000007d 0 0 4px;
    background: rgba(255, 255, 255, 0.98);
 }

}
 /********/
/* Logo */

.mw-wiki-logo {
    background-image: url(https://drawntolife.wiki/w/images/0/0b/DTLWIKIBig.png);
    background-size: 100%;
    transition: 0.2s;
}
.mw-wiki-logo:hover {
    background-image: url(https://drawntolife.wiki/w/images/1/1d/DTLWikiAnimated.png);
    background-size: 100%;
}
@media (max-width: 1339px) {
.mw-wiki-logo:active {
    background-image: url(https://drawntolife.wiki/w/images/1/1d/DTLWikiAnimated.png);
    background-size: 95%;
}
}
 /***********/
/* Modules */

/* Notification */
.mw-notification, .dropdown {
  border-radius: 5px;
  box-shadow: #0000001a 0px 3px 4px;
}
@media screen and (min-width: 851px) and (max-width: 1339px) {
#mw-wrapper .dropdown-active .dropdown {
    margin-right: 1.4em;
}
}

/* Navbar border-bottom color */
#mw-content-container {
    margin-top: 3.21em;
 }
 @media screen and (min-width: 851px) {
.color-bar {
    visibility: hidden;
}
}

@media screen and (max-width:850px) {
#mw-content-container {
    margin-top: 0;
 }
.color-right, .color-middle, .color-left {
    background: #0d3e91;
    height: 0.35em;
 }
}
#mw-header-nav-hack, #mw-header-hack {
    box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.17),0 0 2px rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 851px) {
#mw-header-container {
    border-bottom: 2px solid #ffffff;
}
}

/* 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;
}
/* Shadow */
.toc {
    box-shadow: #0000001a 0px 3px 4px;
}

/* 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;
}

/* Search */
#simpleSearch {
    border-radius: 0.5em;
}


/* 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,
#ca-nstab-user.selected, 
#ca-nstab-template.selected,
#ca-nstab-user.selected,
#ca-nstab-user.selected,
#ca-nstab-category.selected,
#ca-nstab-image.selected,
#ca-nstab-project.selected {
 padding: 5px;
 background: #72b531;
 margin: 5px 2px 0;
 border-radius: 5px;
 border-bottom: 0.3rem solid #3b7e0e;
 box-shadow: inset 3.65em 0px 0px -1.9em #3b7e0e61;
 transition: 0.3s;
}
/* Small */
@media screen and (max-width: 850px){
#ca-nstab-mediawiki.selected,
#ca-nstab-main.selected,
#ca-edit.selected,
#ca-history.selected,
#ca-nstab-user.selected, 
#ca-nstab-template.selected,
#ca-nstab-user.selected,
#ca-nstab-user.selected,
#ca-nstab-category.selected,
#ca-nstab-image.selected,
#ca-nstab-project.selected {
 padding: 5px;
 background: #72b531;
 margin: 5px 2px 0;
 border-radius: 5px;
 border-bottom: 0.3rem solid #3b7e0e;
 box-shadow: none;
 transition: 0.7s;
 }
}
/* Hover */
#ca-nstab-mediawiki.selected:hover,
#ca-nstab-main.selected:hover,
#ca-edit.selected,
#ca-history.selected:hover,
#ca-nstab-user.selected:hover,
#ca-nstab-template.selected:hover,
#ca-nstab-user.selected:hover,
#ca-nstab-user.selected:hover,
#ca-nstab-category.selected:hover,
#ca-nstab-image.selected:hover,
#ca-nstab-project.selected:hover {
 padding: 5px;
 background: #72b531;
 margin: 5px 2px 0;
 border-radius: 5px;
 border-bottom: 0.3rem solid #3b7e0e;
 box-shadow: inset 3.65em 0px 0px 20em #3b7e0e61;
 transition: 0.7s;
}
/* Active */
#ca-nstab-mediawiki.selected:active,
#ca-nstab-main.selected:active,
#ca-edit.selected,
#ca-history.selected:active,
#ca-nstab-user.selected:active,
#ca-nstab-template.selected:active,
#ca-nstab-user.selected:active,
#ca-nstab-user:active,
#ca-nstab-category:active,
#ca-nstab-image.selected:active,
#ca-nstab-project.selected:active {
 padding:5px;
 background:#72b531;
 margin:5px 2px 0;
 border-radius:5px;
 border-bottom:0.3rem solid #6a9c0c;
 box-shadow:inset 3.65em 0px 0px 20em #94c231;
 transition:0.7s;
 position: relative;
 top: 2px;
}

.tools-inline li[id^="ca-nstab-"] a,#ca-edit a, #ca-history a,#ca-talk a,#t-contributions a {
    color: white;
    font-weight: bold;
    padding-left: 1.5em;
}

/* Watch */
#ca-unwatch.mw-watchlink,#ca-watch.mw-watchlink {
padding: 5px;
background: #ffc742;
margin: 5px 2px 0 -11px;
border-radius: 5px;
border-bottom: 0.3rem solid #e48102;
transition: 0.3s;
}
#ca-unwatch.mw-watchlink:hover,#ca-watch.mw-watchlink:hover {
padding: 5px;
background: #f2a624;
margin: 5px 2px 0 -11px;
border-radius: 5px;
border-bottom: 0.3rem solid #e48102;
transition: 0.3s;
}
#ca-unwatch.mw-watchlink:active,#ca-watch.mw-watchlink:active {
padding: 5px;
background: #ffd745;
margin: 5px 2px 0 -11px;
border-radius: 5px;
border-bottom: 0.3rem solid #e49d0d;
transition: 0.3s;
position: relative;
top: 3px;
}

/* Unselected */
#p-views li, #p-more li {
    margin-left: 1em;
    background: #5aa7e2;
    border-bottom: 0.3rem solid #254a8f;
    box-shadow: inset 3.65em 0px 0px -1.9em #254a8f61;
    margin: 5px 2px 0;
    border-radius: 5px;
    transition: 0.3s;
    padding: 5px;
}
@media screen and (max-width: 850px){
#p-views li, #p-more li {
    margin-left: 1em;
    background: #5aa7e2;
    border-bottom: 0.3rem solid #254a8f;
    box-shadow: none;
    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;
    box-shadow: inset 3.65em 0px 0px -1.9em #b2440861;
    transition: 0.3s;
}
@media screen and (max-width: 850px){
#ca-talk {
    background: #e49202;
    margin: 5px 2px 0;
    border-radius: 5px;
    padding: 5px;
    border-bottom: 0.3rem solid #b24408;
    box-shadow: none;
    transition: 0.7s;
}
}
#ca-talk:hover {
    background: #e49202;
    border-radius: 5px;
    padding: 5px;
    border-bottom: 0.3rem solid #b24408;
    box-shadow: inset 3.65em 0px 0px 20em #b2440861;
    transition: 1s;
}
#ca-talk:active {
    background: #e49202;
    border-radius: 5px;
    padding: 5px;
    border-bottom: 0.3rem solid #c36f08;
    box-shadow: inset 3.65em 0px 0px 20em #f1ad00;
    transition: 0.7s;
    position: relative;
    top: 2px;
}

/* Icon replacements */
#ca-edit a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/editicon.png);
    background-size: 1.15em;
    background-position: left center;
}
@media screen and (max-width: 850px){
#ca-edit a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/editicon.png);
    background-size: 1.15em;
    background-position: center center;
}
}
#ca-edit:hover {
 margin-left:1em;
 background:#5aa7e2;
 border-bottom:0.3rem solid #254a8f;
 box-shadow:inset 3.65em 0px 0px 20em #254a8f61;
 margin:5px 2px 0;
 border-radius:5px;
 transition:0.7s;
 padding:5px
}
#ca-edit:active {
 margin-left:1em;
 background:#5aa7e2;
 border-bottom:0.3rem solid #2972a3;
 box-shadow:inset 3.65em 0px 0px 20em #5cbee8;
 margin:5px 2px 0;
 border-radius:5px;
 transition:0.7s;
 padding:5px;
 position: relative;
 top: 2px;
}


#ca-history a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/historyicon.png);
    background-size: 1.15em;
    background-position: left center;
}
@media screen and (max-width: 850px){
#ca-history a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/historyicon.png);
    background-size: 1.15em;
    background-position: center center;
}
}
#ca-history:hover {
 margin-left:1em;
 background:#5aa7e2;
 border-bottom:0.3rem solid #254a8f;
 box-shadow:inset 3.65em 0px 0px 20em #254a8f61;
 margin:5px 2px 0;
 border-radius:5px;
 transition:0.7s;
 padding:5px
}
#ca-history:active {
 margin-left:1em;
 background:#5aa7e2;
 border-bottom:0.3rem solid #2972a3;
 box-shadow:inset 3.65em 0px 0px 20em #5cbee8;
 margin:5px 2px 0;
 border-radius:5px;
 transition:0.7s;
 padding:5px;
 position: relative;
 top: 2px;
}
#ca-talk a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/discussionicon.png);
    background-size: 1.15em;
    background-position: left center;
}
@media screen and (max-width: 850px){
#ca-talk a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/discussionicon.png);
    background-size: 1.15em;
    background-position: center center;
}
}
.tools-inline li[id^="ca-nstab-"] a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/pageicon.png);
    background-size: 1.15em;
    background-position: left center;
}
@media screen and (max-width: 850px){
.tools-inline li[id^="ca-nstab-"] a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/pageicon.png);
    background-size: 1.15em;
    background-position: center center;
}
}
#ca-watch a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/watchicon.png);
    background-size: 1.15em;
    background-position: center center;
}
#ca-unwatch a
{
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/unwatchicon.png);
    background-size: 1.15em;
    background-position: center center;
}
#t-contributions a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/contributionsicon.png);
    background-size: 1.23em;
    background-position: left center;
}
#t-contributions:hover {
 margin-left:1em;
 background:#5aa7e2;
 border-bottom:0.3rem solid #254a8f;
 box-shadow:inset 3.65em 0px 0px 20em #254a8f61;
 margin:5px 2px 0;
 border-radius:5px;
 transition:0.7s;
 padding:5px
}
#t-contributions:active {
 margin-left:1em;
 background:#5aa7e2;
 border-bottom:0.3rem solid #2972a3;
 box-shadow:inset 3.65em 0px 0px 20em #5cbee8;
 margin:5px 2px 0;
 border-radius:5px;
 transition:0.7s;
 padding:5px;
 position: relative;
 top: 2px;
}

@media screen and (max-width: 850px){
#t-contributions a {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/contributionsicon.png);
    background-size: 1.23em;
    background-position: center center;
}
}
#ca-more span {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/settingsicon.png);
    background-size: 1.15em;
    background-position: left center;
}
@media screen and (max-width: 850px){
#ca-more span {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/settingsicon.png);
    background-size: 1.15em;
    background-position: center center;
}
}
#ca-languages span {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/languageicon.png);
    background-size: 1.15em;
    background-position: left center;
}
@media screen and (max-width: 850px){
#ca-languages span {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Timeless/resources/images/dtlicons/languageicon.png);
    background-size: 1.15em;
    background-position: center center;
}
}

/* Big Logo on large display */
@media (min-width: 1340px) {
  #mw-content {
    margin-top: 10.7em;
 }
 
 .mw-wiki-logo {
    background-image: url(https://drawntolife.wiki/w/images/3/35/WikiLogo.png?07ef3);
 }
  .mw-wiki-logo:hover {
    background-image: url(https://drawntolife.wiki/w/images/3/35/WikiLogo.png?07ef3);
    filter: brightness(1.2);
 }

 .mw-wiki-logo.fallback {
    width: 26em;
    height: 9.2em;
    position: absolute;
    left: 43%;
    top: 3em;
    transition: 0.3s;
 }
 .mw-wiki-logo.fallback:active {
    height: 10.2em;
 }
 #p-logo {
    margin-top: 9.736em;
 }
}

/* Blurs header on scroll > 200 */
 .headerblur {
  backdrop-filter: blur(5px);
  background: linear-gradient(to bottom, #FFF, #FFFFFFA3) !important;
  transition: background 0.5s;
}

/* Fix category pane on 2nd smallest size */
@media screen and (min-width:851px) and (max-width:1099px) {
#content-bottom-stuff {
    background: #353c49;
    border-top: solid 3px #5aa7e2;
}
/* Page margins and border shadow*/
#mw-content {
    margin-left: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    border: 3px solid #5aa7e2;
    box-shadow: #0000007d 0 0 4px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
 }
}
Retrieved from "https://drawntolife.wiki/w/index.php?title=MediaWiki:Timeless.css&oldid=11538"