User:LIMAFOX76/timeless.css: Difference between revisions

From Battlestar Wiki, the free, open content Battlestar Galactica encyclopedia and episode guide
No edit summary
mNo edit summary
 
(70 intermediate revisions by the same user not shown)
Line 49: Line 49:


.nav-block() {
.nav-block() {
         .box();
         background: var(--background3);
        border: solid var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
         padding: 1.5em 1.5em 0;
         padding: 1.5em 1.5em 0;
         margin: 1em 0;
         margin: 1em 0;
Line 55: Line 58:
         word-wrap: break-word;
         word-wrap: break-word;
         font-size: 0.95em;
         font-size: 0.95em;
 
}
        ul,
.nav-block() ul,
        li {
.nav-block() li {
                 list-style: none;
                 list-style: none;
                 margin: 0;
                 margin: 0;
                 padding: 0;
                 padding: 0;
        }
}


        h3 {
.nav-block() h3 {
                 font-weight: normal;
                 font-weight: normal;
                 font-size: 1em;
                 font-size: 1em;
Line 69: Line 72:
                 padding-bottom: 0.15em;
                 padding-bottom: 0.15em;
                 border-bottom: solid 2px var(--grey);
                 border-bottom: solid 2px var(--grey);
        }
}


        ul {
.nav-block() ul {
                 margin-bottom: 2em;
                 margin-bottom: 2em;
        }
}


        li {
.nav-block() li {
                 padding: 0.25em 0;
                 padding: 0.25em 0;
        }
}
}


#mw-page-header-links {
        div,
        ul,
        li {
                list-style: none;
                display: inline-block;
                margin: 0;
                padding: 0;
        }


        li {
#mw-page-header-links li:hover {
                margin: 0.25em 0 1em;
                border-bottom: solid 3px transparent;
 
                &:hover {
                         border-bottom-color: var(--grey);
                         border-bottom-color: var(--grey);
                }
}


                &.selected {
#mw-page-header-links li.selected {
                         border-bottom-color: var(--orange);
                         border-bottom-color: var(--orange);
 
}
                        a {
#mw-page-header-links li.selected a {
                                 color: var(--text);
                                 color: var(--text);
                        }
                }
        }
}
}


/* Global width */
/* Global width */


.ts-inner {
.ts-inner {
padding: 0 3.2em;
max-width: 1920px;
max-width: 1920px;
}
}
Line 123: Line 109:


#mw-content {
#mw-content {
         .box;
         background: var(--background3);
        border: solid var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
         background: var(--background);
         background: var(--background);
         padding: 1em @content-padding 3em;
         padding: 1em @content-padding 3em;
Line 142: Line 131:


#mw-site-navigation .sidebar-chunk,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
#mw-related-navigation .sidebar-chunk,
#personal .dropdown {
     background: #160807;
     background: #160807;
     border: solid #ffd700;
     border: solid #ffd700;
Line 222: Line 212:
         text-decoration: none;
         text-decoration: none;
         color: var(--yellow);
         color: var(--yellow);
}


        &:hover, {
a:hover {
                 color: var(--yellow-bright);
                 color: var(--yellow-bright);
        }
}


        &:visited {
a:visited {
                 color: var(--yellow-dark);
                 color: var(--yellow-dark);
        }
}
}


a.extiw,
a.extiw,
Line 238: Line 229:
.mw-parser-output a.extiw {
.mw-parser-output a.extiw {
         color: var(--orange);
         color: var(--orange);
 
}
        &:hover,
a.extiw:hover,
        &:visited {
.extiw a:hover,
a.external.text:hover,
a.external.free:hover,
.mw-parser-output a.extiw:hover,
a.extiw:visited,
.extiw a:visited,
a.external.text:visited,
a.external.free:visited,
.mw-parser-output a.extiw:visited {
                 color: var(--orange-dark);
                 color: var(--orange-dark);
        }
}
}


Line 248: Line 246:
.new a {
.new a {
         color: var(--red);
         color: var(--red);
}


        &:hover,
a.new:hover,
        &:visited {
.new a:hover,
a.new:visited,
.new a:visited {
                 color: var(--red-dark);
                 color: var(--red-dark);
        }
}
}


Line 262: Line 262:




        h1,
.mw-body h1,
        h2,
.mw-body h2,
        h3,
.mw-body h3,
        h4,
.mw-body h4,
        h5,
.mw-body h5,
        h6,
.mw-body h6,
        dt {
.mw-body dt {
                 color: var(--yellow-dark);
                 color: var(--yellow-dark);
                 line-height: 1.125;
                 line-height: 1.125;
Line 274: Line 274:
         }
         }


        dt {
.mw-body dt {
                 font-weight: bold;
                 font-weight: bold;
                 line-height: 1.125;
                 line-height: 1.125;
Line 281: Line 281:
         }
         }


        dl {
.mw-body dl {
                 margin-top: 0.2em;
                 margin-top: 0.2em;
                 margin-bottom: 0.5em;
                 margin-bottom: 0.5em;
         }
         }


        form dt {
.mw-body form dt {
                 margin: 0 0.5em 0 0;
                 margin: 0 0.5em 0 0;
         }
         }


h1.firstHeading {
.mw-body h1.firstHeading {
         margin: 0.25em 0 0.5em;
         margin: 0.25em 0 0.5em;
         border-bottom: solid 4px var(--yellow-dark);
         border-bottom: solid 4px var(--yellow-dark);
Line 296: Line 296:
}
}


        h1 {
.mw-body h1 {
                 font-size: 2em;
                 font-size: 2em;
                 border-bottom: solid 3px var(--orange);
                 border-bottom: solid 3px var(--orange);
Line 302: Line 302:
         }
         }


        h2 {
.mw-body h2 {
                 font-size: 1.5em;
                 font-size: 1.5em;
                 border-bottom: solid 2px var(--orange);
                 border-bottom: solid 2px var(--orange);
Line 308: Line 308:
         }
         }


        h3 {
.mw-body h3 {
                 font-size: 1.3em;
                 font-size: 1.3em;
         }
         }


        h4 {
.mw-body h4 {
                 font-size: 1.15em;
                 font-size: 1.15em;
         }
         }


        h5 {
.mw-body h5 {
                 font-size: 1.05em;
                 font-size: 1.05em;
         }
         }


        h6 {
.mw-body h6 {
                 font-size: 1em;
                 font-size: 1em;
         }
         }


        dt {
.mw-body dt {
                 margin-top: 1em;
                 margin-top: 1em;
         }
         }


        dd {
.mw-body dd {
                 margin-bottom: 1em;
                 margin-bottom: 1em;
         }
         }


        .mw-changeslist-legend dt {
.mw-body .mw-changeslist-legend dt {
                 margin: 0 0.5em 0 0;
                 margin: 0 0.5em 0 0;
         }
         }


        .mw-changeslist-legend dd {
.mw-body .mw-changeslist-legend dd {
                 margin-bottom: 0;
                 margin-bottom: 0;
         }
         }
Line 342: Line 342:


.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, // wat
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, // wat
.mw-changeslist-legend,
.mw-body .mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.mw-body fieldset#mw-searchoptions,
Line 370: Line 370:
/* page history */
/* page history */


#pagehistory {
#pagehistory li.selected {
        li.selected {
                 background-color: var(--background3);
                 background-color: var(--background3);
                 color: var(--grey-bright);
                 color: var(--grey-bright);
         }
}
 
.portalS {
        box-sizing: border-box;
        border: 15px solid transparent;
        border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 60 round;
        -webkit-border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 60 round;
        background: #1f0b0c;
        background-clip: padding-box;
        padding: 2px;
        vertical-align: top;
        margin: 0;
        z-index: -1;
}
 
.mw-body .portals h2 {
        margin: 8px 0;
        background-color: var(--background);
        border: 1px solid var(--orange-dark);
        padding: 0.2em 0.4em;
}
 
.contentbox-th,
.portal_h2 {
        margin: 8px;
        background-color: var(--background);
        border: 1px solid var(--yellow-dark);
        padding: 0.2em 0.4em;
}
 
.navbox {
        box-sizing: border-box;
        border: 7px solid transparent;
        border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        -webkit-border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        background: #1f0b0c;
        background-clip: padding-box;
        width: 100%;
        clear: both;
        font-size: 88%;
        text-align: center;
        margin: 1em auto 0;
}
 
.centered {
        align: center;
        width: auto;
}
 
.tree {
        border: 7px solid transparent;
        border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        -webkit-border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        background: #1f0b0c;
        background-clip: padding-box;
        font-size: 88%;
        text-align: center;
        margin: 1em auto 0;
}
 
.thumbinner {
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}
 
ul#filetoc,
.toc,
.mw-warning {
        display: table;
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
        padding: 1.25em 1.75em;
        margin-top: 1em;
        margin-bottom: 1em;
        min-width: 15em;
}
 
div.editOptions,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        color: var(--text);
}
 
.skin-timeless .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget.oo-ui-widget-enabled input {
         margin: 0;
}
 
#menus-cover {
        background: var(--background)
}
 
.sidebar-inner {
        background: var(--background3);
}
 
@media screen and ( max-width: 851px ) {
      .dropdown,
      .sidebar-inner {
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        color: var(--text);
      }
}
 
.wikitable,
.messagebox {
background-color: var(--background);
border: 1px solid var(--yellow);
}
 
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.messagebox > tr > td,
.messagebox > * > tr > td {
border:1px solid var(--yellow);
}
 
.wikitable > tr > th,
.wikitable > * > tr > th,
.infoboxheader {
background-color: var(--background3);
}
 
.infobox tr {
border-bottom: none !important;
}
}

Latest revision as of 06:19, 28 January 2020

/* LIMAFOX76 CSS style for the Timeless skin */

/* variables */

:root {
     --text: #fff;
     --background: #471919;
     --background2: #000;
     --background3: #160807;
     --background-dark: #f4a460;
     --background-dark2: #d2691e;
     --text-inverse: #018;
     --grey: #ccc;
     --grey-bright: #eee;
     --grey-dark: #666;
     --red: #d44;
     --red-bright: #f55;
     --red-dark: #900;
     --orange: #ffa500;
     --orange-bright: #ff4500;
     --orange-dark: #ff8c00;
     --yellow: #ffff00;
     --yellow-bright: #ffffe0;
     --yellow-dark: #ffd700;
     --green: #3b7;
     --green-bright: #4c8;
     --green-dark: #396;
     --blue: #08d;
     --blue-bright: #2af;
     --blue-dark: #069;
     --link: #ffff00;
     --link-red: #d44;
     --font-size: 0.93em;
}

.box() {
        background: var(--background3);
        border: solid var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}

body {
        color: var(--text);
        background: var(--background3);
        font-size: var(--font-size);
        line-height: 1.4;
}

.nav-block() {
        background: var(--background3);
        border: solid var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
        padding: 1.5em 1.5em 0;
        margin: 1em 0;
        line-height: 1.125;
        word-wrap: break-word;
        font-size: 0.95em;
}
.nav-block() ul,
.nav-block() li {
                list-style: none;
                margin: 0;
                padding: 0;
}

.nav-block() h3 {
                font-weight: normal;
                font-size: 1em;
                margin: 0.25em 0 0.75em 0;
                padding-bottom: 0.15em;
                border-bottom: solid 2px var(--grey);
}

.nav-block() ul {
                margin-bottom: 2em;
}

.nav-block() li {
                padding: 0.25em 0;
}


#mw-page-header-links li:hover {
                        border-bottom-color: var(--grey);
}

#mw-page-header-links li.selected {
                        border-bottom-color: var(--orange);
}
#mw-page-header-links li.selected a {
                                color: var(--text);
}


/* Global width */

.ts-inner {
	max-width: 1920px;
}

/* Content */

#mw-content-container {
        background: var(--background2);
        border-bottom: solid 4px var(--yellow-dark);
}

#mw-content {
        background: var(--background3);
        border: solid var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
        background: var(--background);
        padding: 1em @content-padding 3em;

        /* Set a z-index for the content to group it away from any nav stuff (extensions) - T200148 */
        position: relative;
        z-index: 0;
}

/* Logo background */

#p-logo {
	background: #160807;
	border: 1px solid #471919;
}

/* Site Navigation */

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
#personal .dropdown {
    background: #160807;
    border: solid #ffd700;
    border-width: 1px 1px 0.2em;
    color: #ffffff;
}

/* Header Container */

#mw-header-container {
	background: #471919;
	color: #ffffff;
}

#p-logo-text a {
	color: #ffffff;
}


/* Color Middle */

.color-middle-container {
    padding: 0 4.0em;
    max-width: 1920px;
}

.color-middle {
	margin-left: 13.2em;
	margin-right: 15em;
	background: #ff8c00;
}

/* Context Infoboxes Jar*/

#stacked_layout {
	background: #000000;
}

/* Footer */

#mw-footer-container {
    border-top: solid 1px #ffa500;
    background: #160807;
}

/* Style effects for the Browse properties */

.mw_metadata th,
#mw-allmessagestable td {
    background-color: #160807;
}

#mw-allmessagestable tbody:hover {
	background-color: #471919;;
}

.mw_metadata td,
#mw-allmessagestable th,
.diff-addedline .diffchange {
	background: #000;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
	background-color: #fff;
}

.warningbox {
	background-color: #160807;
	color: #fff;
}

div.mw-warning-with-logexcerpt {
	background: #160807;
}

/* Misc */

a {
        text-decoration: none;
        color: var(--yellow);
}

a:hover {
                color: var(--yellow-bright);
}

a:visited {
                color: var(--yellow-dark);
}


a.extiw,
.extiw a,
a.external.text,
a.external.free,
.mw-parser-output a.extiw {
        color: var(--orange);
}
a.extiw:hover,
.extiw a:hover,
a.external.text:hover,
a.external.free:hover,
.mw-parser-output a.extiw:hover,
a.extiw:visited,
.extiw a:visited,
a.external.text:visited,
a.external.free:visited,
.mw-parser-output a.extiw:visited {
                color: var(--orange-dark);
}

a.new,
.new a {
        color: var(--red);
}

a.new:hover,
.new a:hover,
a.new:visited,
.new a:visited {
                color: var(--red-dark);
}

a.mw-selflink {
        color: inherit;
        font-weight: bold;
        text-decoration: inherit;
}


.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-body dt {
                color: var(--yellow-dark);
                line-height: 1.125;
                margin: 0.7em 0 0.5em;
        }

.mw-body dt {
                font-weight: bold;
                line-height: 1.125;
                margin: 0.7em 0 0.5em;
                margin-bottom: 0.1em;
        }

.mw-body dl {
                margin-top: 0.2em;
                margin-bottom: 0.5em;
        }

.mw-body form dt {
                margin: 0 0.5em 0 0;
        }

.mw-body h1.firstHeading {
        margin: 0.25em 0 0.5em;
        border-bottom: solid 4px var(--yellow-dark);
        overflow: visible;
}

.mw-body h1 {
                font-size: 2em;
                border-bottom: solid 3px var(--orange);
                overflow: hidden;
        }

.mw-body h2 {
                font-size: 1.5em;
                border-bottom: solid 2px var(--orange);
                overflow: hidden;
        }

.mw-body h3 {
                font-size: 1.3em;
        }

.mw-body h4 {
                font-size: 1.15em;
        }

.mw-body h5 {
                font-size: 1.05em;
        }

.mw-body h6 {
                font-size: 1em;
        }

.mw-body dt {
                margin-top: 1em;
        }

.mw-body dd {
                margin-bottom: 1em;
        }

.mw-body .mw-changeslist-legend dt {
                margin: 0 0.5em 0 0;
        }

.mw-body .mw-changeslist-legend dd {
                margin-bottom: 0;
        }


.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, // wat
.mw-body .mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable {
        color: var(--text);
        .box;
}

.mw-body .mw-search-profile-tabs {
        padding: 0.5em;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
        border: 1px solid var(--yellow-bright);
        padding: 0.5em;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
        border: 1px solid var(--yellow-bright);
        background: var(--background2);
}

/* page history */

#pagehistory li.selected {
                background-color: var(--background3);
                color: var(--grey-bright);
}

.portalS {
        box-sizing: border-box;
        border: 15px solid transparent;
        border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 60 round;
        -webkit-border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 60 round;
        background: #1f0b0c;
        background-clip: padding-box;
        padding: 2px;
        vertical-align: top;
        margin: 0;
        z-index: -1;
}

.mw-body .portals h2 {
        margin: 8px 0;
        background-color: var(--background);
        border: 1px solid var(--orange-dark);
        padding: 0.2em 0.4em;
}

.contentbox-th,
.portal_h2 {
        margin: 8px;
        background-color: var(--background);
        border: 1px solid var(--yellow-dark);
        padding: 0.2em 0.4em;
}

.navbox {
        box-sizing: border-box;
        border: 7px solid transparent;
        border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        -webkit-border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        background: #1f0b0c;
        background-clip: padding-box;
        width: 100%;
        clear: both;
        font-size: 88%;
        text-align: center;
        margin: 1em auto 0;
}

.centered {
        align: center;
        width: auto;
}

.tree {
        border: 7px solid transparent;
        border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        -webkit-border-image: url('https://media.battlestarwiki.org/images/2/20/BSG_Border.png') 50 round;
        background: #1f0b0c;
        background-clip: padding-box;
        font-size: 88%;
        text-align: center;
        margin: 1em auto 0;
}

.thumbinner {
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}

ul#filetoc,
.toc,
.mw-warning {
        display: table;
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        padding: 1.25em 1.75em;
        box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
        padding: 1.25em 1.75em;
        margin-top: 1em;
        margin-bottom: 1em;
        min-width: 15em;
}

div.editOptions,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        color: var(--text);
}

.skin-timeless .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget.oo-ui-widget-enabled input {
        margin: 0;
}

#menus-cover {
        background: var(--background)
}

.sidebar-inner {
        background: var(--background3);
}

@media screen and ( max-width: 851px ) {
       .dropdown,
       .sidebar-inner {
        background: var(--background3);
        border: solid 1px var(--yellow-dark);
        color: var(--text);
       }
}

.wikitable,
.messagebox {
 background-color: var(--background);
 border: 1px solid var(--yellow);
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.messagebox > tr > td,
.messagebox > * > tr > td {
 border:1px solid var(--yellow);
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.infoboxheader {
 background-color: var(--background3);
}

.infobox tr {
 border-bottom: none !important;
}