MediaWiki:Timeless.css

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.
/* All CSS here will be loaded for users of the Timeless skin */
body {
    color: #E6E6E6;
    background: #8C6745; /* Main background color */
}

/** Background **/
#mw-content-container {
    background: url(https://static.miraheze.org/agesofconflictwiki/5/57/World_Map_Background_Blurred_2.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    border: none;
}

/** Icons **/
/* Taken from Zelda Wiki [ https://zeldawiki.wiki/wiki/MediaWiki:Timeless.css ] */
@media screen and (max-width: 850px) {
    #site-navigation h2 {
        background-image: url("https://static.miraheze.org/gogiganticwiki/b/b1/Wiki_Icon_Timeless_Menu_Large_Dark.svg");
    }
    #site-tools h2 {
        background-image: url("https://static.miraheze.org/gogiganticwiki/b/b6/Wiki_Icon_Timeless_Gear_Large_Dark.svg");
    }
    #user-tools h2 {
        background-image: url("https://static.miraheze.org/gogiganticwiki/e/e3/Wiki_Icon_Timeless_User_Large_Dark.svg");
    }
}
@media screen and (min-width: 851px) {
    #personal h2 {
        background-image: url("https://static.miraheze.org/gogiganticwiki/4/48/Wiki_Icon_Timeless_User_Dark.svg");
    }
}
.tools-inline li[id^='ca-nstab-'] a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/4/44/Wiki_Icon_Timeless_Page_Dark.svg");
}
#ca-talk a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/4/48/Wiki_Icon_Timeless_Talk_Dark.svg");
}
#ca-watch a {
    background-image: url("https://gogigantic.miraheze.org/wiki/File:Wiki_Icon_Timeless_Star_Dark.svg");
}
#ca-unwatch a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/5/5e/Wiki_Icon_Timeless_Star_Filled_Dark.svg");
}
.tools-inline li a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/0/0a/Wiki_Icon_Timeless_Page_Misc_Dark.svg");
}
#ca-edit a,
.client-js #ca-ve-edit a,
.mw-editsection {
    background-image: url("https://static.miraheze.org/gogiganticwiki/e/eb/Wiki_Icon_Timeless_Pencil_Dark.svg");
}
.client-js #ca-edit a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/7/7c/Wiki_Icon_Timeless_Pencil_Source_Dark.svg");
}
#ca-viewsource a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/7/72/Wiki_Icon_Timeless_Brackets_Dark.svg");
}
#ca-history a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/b/bb/Wiki_Icon_Timeless_Clock_Dark.svg");
}
#ca-more span {
    background-image: url("https://static.miraheze.org/gogiganticwiki/8/88/Wiki_Icon_Timeless_Gear_Dark.svg");
}
.dropdown-toggle:after,
#user-tools h2:after,
.sidebar-chunk h2:after,
#mw-site-navigation h2:after,
#mw-related-navigation h2:after {
    background-image: url("https://static.miraheze.org/gogiganticwiki/2/29/Wiki_Icon_Timeless_Arrow_Down_Dark.svg");
}
#t-contributions a {
    background-image: url("https://static.miraheze.org/gogiganticwiki/d/d3/Wiki_Icon_Timeless_Puzzle_Dark.svg");
}

/** Banner (search and user toolbar) **/
#mw-header-container {
    color: #E6E6E6;
    background: #C9A86E; /* Banner background color */
}
.color-left,
.color-middle,
.color-right {
    background: #C9A86E; /* Banner background color */
}
/* Title in banner */
.mw-wiki-title {
    text-transform: uppercase !important;
    font-family: 'MuseoSans500' !important;
    font-weight: bold;
}
#p-logo-text {
    max-width: unset;
}
#p-logo-text a {
    color: #FFFDDF !important;
}
/* Username */
#personal h2 span {
    font-family: 'MuseoSans500' !important;
    font-weight: bold;
    margin-top: -5px !important;
}
/* User dropdown */
.dropdown {
    background: #C9A86E !important; /* User dropdown background color */
    border: 3px solid #E9C771 !important; /* User dropdown border color */
}
.dropdown::before,
#personal .dropdown::after { /* Arrows */
    border-bottom: 8px solid #E9C771 !important; /* Arrow color */
}

/** Search bar **/
#simpleSearch {
    background: #8C6745; /* Search bar background color */
    border: solid 2px #E9C771; /* Search bar border color */
}
#searchInput {
    color: #fff;
}
.suggestions .suggestions-results {
    background-color: #C9A86E; /* Suggestions background color */
    border: 2px solid #E9C771; /* Suggestions border color */
}
.suggestions .suggestions-result {
    color: #E6E6E6;
}
.suggestions .suggestions-special {
    background-color: #C9A86E; /* Suggestions special background color */
    border: 2px solid #E9C771; /* Suggestions special border color */
}
.suggestions .suggestions-special .special-query,
.suggestions-special .special-label {
    color: #FFFDDF !important;
}
.suggestions .suggestions-result-current { /* Hover */
    background-color: #E9C771; /* Suggestions hover background color */
    color: #FFFDDF;
}
#searchButton,
#mw-searchButton { /* Icon */
    background-color: transparent !important;
    filter: invert(1);
}

/** Logo **/
/* "Hiding" it - enough to have title on sticky banner, logo will be on Vector */
#p-logo {
    height: 1px !important;
} /* Instead of display: none; to keep sidebar margin */

/** Sidebars **/
/* Placing all sidebars to the left aka forcing layout under 1340px as default 
   Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */
@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%;
    }
    /* Width and paddings */
    #mw-site-navigation,
    #mw-related-navigation {
        width: 14em;
    }
    #mw-related-navigation {
        padding: 0 1em 0 0;
    }
}
/* Other sidebar styling */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background: #C9A86E; /* Sidebar background color */
    border: none;
    padding-bottom: 2px;
}
@media (min-width: 1100px) {
    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.85em;
        padding: 1em 1.5em 0.01em;
    }
}
/* Headings */
.mw-portlet h3 {
    border-color: #E9C771 !important; /* Heading border color */
    font-weight: bold !important;
}
/* Sticky toolbar, also taken from Inkipedia */
@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: 67px;
        padding-bottom: .1em;
        height: fit-content;
    }
    #site-tools {
        position: sticky;
        top: 67px;
        padding-bottom: .1em;
    }
}

/** Content area **/    
#mw-content {
    background: #8C6745; /* Content area background color */
    border: 3px solid #E9C771; /* Content area border color */
    border-top: none;
    box-shadow: none;
}

/** Headers **/
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body dt { /* dt is ; */
    font-family: 'Segoe UI';
}
.mw-body h2 { /* h2 on normal pages */
    font-weight: bold;
}
#mw-subcategories h2,
#mw-pages h2,
#mw-category-media h2 { /* Content headers in categories */
    border-color: #E9C771 !important; /* Heading border color */
    padding-bottom: 5px;
}

/** Divider **/
hr {
    border-color: #E9C771; /* Divider color */
}

/** Page tabs **/
.tools-inline a:hover {
    text-shadow: none;
}
.tools-inline li.selected { /* Selected tab */
    border-bottom-color: #E9C771; /* Selected tab border color */
}
.tools-inline li.selected:hover {
    border-bottom-color: #FFFDDF !important;
}

/** Footer **/
.mw-footer-container {
    border: none;
    box-shadow: none;
    font-size: 90%;
}

/** ToC **/
#toc {
    border: 2px solid #E9C771; /* ToC border color */
    background: #C9A86E; /* ToC background color */
}
.toctitle {
    border-color: #E9C771 !important; /* ToC title border color */
}
.tocnumber,
.toctogglelabel {
    color: #FFFDDF;
}

/** Image thumbnail (|thumb|) **/
.thumbinner {
    background: transparent;
    border: none;
    box-shadow: none;
}
.thumbinner .thumbimage {
    border: none;
}
div.magnify a { /* Icon */
    filter: invert(1);
}

/** Changes for smaller screens **/
@media only screen and (max-width: 1100px) {
    #mw-content { /* Content area */
        border: none;
    }
    #mw-content-block {
        background: #C9A86E; /* Content block background color */
    }
    #mw-header-nav-hack { /* Navigation (transformed sidebar) */
        background: #C9A86E; /* Navigation background color */
        border-color: #C9A86E;
        padding-bottom: 5px;
        border-bottom: 3px solid #E9C771; /* Navigation border color */
    }
    .sidebar-inner { /* Dropdowns (transformed sidebar) */
        background: #C9A86E !important; /* Dropdowns background color */
        border: 3px solid #E9C771 !important; /* Dropdowns border color */
        padding: 1.5em;
    }
    #mw-site-navigation,
    #mw-related-navigation {
        width: initial;
    }
    #mw-site-navigation h2,
    #mw-related-navigation h2 { /* Dropdowns headers */
        font-weight: bold !important;
        font-family: 'Segoe UI';
        margin-top: -5px;
    }
    #mw-site-navigation .sidebar-chunk h2 span::before,
    #mw-site-navigation .sidebar-chunk h2 span::after { /* Dropdowns arrows */
        border-bottom: 10px solid #E9C771; /* Dropdowns arrow color */
    }
    .color-left,
    .color-middle,
    .color-right { /* Banner "borders" */
        display: none;
    }
    #content-bottom-stuff { /* Categories block */
        background: #C9A86E; /* Categories block background color */
        border-top: 3px solid #E9C771; /* Categories block border color */
    }
}

@media only screen and (max-width: 850px) {
    #p-search { /* Search bar */
        border-bottom: 5px solid #8C6745; /* Search bar border color */
    }
    .sidebar-inner .mw-portlet-body {
        line-height: 0.5;
    }
    #mw-content { /* Content area (visually for banner) */
        border-top: 3px solid #E9C771 !important; /* Content area border color */
        padding-top: 0;
    }
}

@media only screen and (max-width: 500px) {
    #p-logo-text { /* Wiki title */
        position: unset;
        text-align: center;
        margin: -10px auto 0;
        font-size: 120%;
        padding: 0.1em 0 0.2em !important;
    }
    #p-logo-text a {
        padding: 0;
    }
    #user-tools h2 { /* User icon */
        margin-top: -4px;
    }
    #personal-extra { /* Alert and Notice icons */
        top: 0.5em;
    }
}
.portable-infobox { background:#8C6745; }
/* [[Category:Styling pages]] */

figure, figcaption {
    border: none !important;
    background: transparent !important; }
Anonymous

Search

MediaWiki:Timeless.css

Namespaces

More

Page actions

Navigation

Navigation

Wiki tools

Wiki tools

Anonymous

Search

MediaWiki:Timeless.css

Navigation

Wiki tools

Page tools

Categories
