User:SOTO/CSS6: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
(I lost another key thing, so I'm backing all my (re-)progress up, just in case.)
 
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre>
<pre>
div#inline-box {
div#inline-box {
     float: left;
     float: left;
Line 5: Line 6:
     text-align: center;
     text-align: center;
     border: 1px solid var(--accent-7);
     border: 1px solid var(--accent-7);
     width: 250px;
     width: 246px;
     margin: 10px 14px 10px 6px;
     margin: 9px 14px 5px 5px;
     line-height: 1.1em;
     line-height: 1.1em;
     font-size: .8em;
     font-size: .8em;
     font-weight: 400;
     font-weight: 400;
     font-style: normal;
     font-style: normal;
     background-color: #081630;
     /* background-color: #0c1d3e; */
     color: var(--text-color);
     color: var(--text-color);
    position: relative;
    left: -3px;
    top: -4.28px;
}
}


Line 21: Line 25:


@media screen and (min-width: 851px) {
@media screen and (min-width: 851px) {
     #mw-site-navigation .sidebar-chunk/*, #mw-related-navigation .sidebar-chunk*/ {
     :root.theme-dark #mw-site-navigation .sidebar-chunk/*, #mw-related-navigation .sidebar-chunk*/ {
         /*width: 12.194em;
         /*width: 12.194em;
         position: relative;
         position: relative;
Line 27: Line 31:
         border-color: var(--contrast-color-3);*/
         border-color: var(--contrast-color-3);*/
         border-right-color: var(--primary-2);
         border-right-color: var(--primary-2);
        /*-moz-box-shadow: -2px 0 0 var(--contrast-color-5) inset;
        -webkit-box-shadow: -2px 0 0 var(--contrast-color-5) inset;
        -o-box-shadow: -2px 0 0 var(--contrast-color-5) inset;
        -ms-box-shadow: -2px 0 0 var(--contrast-color-5) inset;
        box-shadow: -2px 0 0 var(--contrast-color-5) inset;
        background: var(--primary-8);
        padding-top: 0.23em!important;
        padding-left: 1.05em;*/
         border-radius: 18px 4.3px 4.3px 18px / 14px 7px 7px 14px;
         border-radius: 18px 4.3px 4.3px 18px / 14px 7px 7px 14px;
         border-radius: 20px 4.3px 4.3px 18px / 14px 7px 7px 14px;
         border-radius: 20px 4.3px 4.3px 18px / 14px 7px 7px 14px;
Line 43: Line 39:
@media screen and (min-width: 1340px) {
@media screen and (min-width: 1340px) {
      
      
     #mw-site-navigation .sidebar-chunk {
     :root.theme-dark #mw-site-navigation .sidebar-chunk {
         -moz-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
         -moz-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
         -webkit-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
         -webkit-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
Line 78: Line 74:
     }  */
     }  */


     #mw-related-navigation .sidebar-chunk {
     :root.theme-dark #mw-related-navigation .sidebar-chunk {
         box-shadow: 2px 0 0 var(--primary-7) inset,1.22px 0 0 var(--primary-7),4.42px 0 0 var(--primary-4), -2px 0 0 var(--contrast-color-5);
         box-shadow: 2px 0 0 var(--primary-7) inset,1.22px 0 0 var(--primary-7),4.42px 0 0 var(--primary-4), -2px 0 0 var(--accent-9);
         right: -0.408em;
         right: -0.408em;
        right: -0.25289em;
     }
     }
      
      
Line 113: Line 110:
     /* outline-color: hsl(216deg 23% 55%); */
     /* outline-color: hsl(216deg 23% 55%); */
     outline-color: #8d99ab;
     outline-color: #8d99ab;
     /* outline-color: #869cbd; */
     /* outline-color: #8b9ebb; */
     border-radius: 14px;
     border-radius: 14px;
     box-shadow: 0 0 0 6px var(--primary-3), 0 0 0 6px var(--TEXT-A-H1);
     box-shadow: 0 0 0 6px var(--primary-3), 0 0 0 6px var(--TEXT-A-H1);
     box-shadow: 0 0 0 5px var(--primary-3), 0px 0 0 6px #0b1f42, 1px 0 0 9px var(--primary-25), -12px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 61px 62px 30px -30px var(--primary-18);
     box-shadow: 0 0 0 5px var(--primary-3), 0px 0 0 6px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18);
     margin: 23.4px auto 18px auto;
    box-shadow: 0 0 0 4px var(--primary-25), 0 0 0 7px var(--primary-3), 0px 0 0 8px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18);
     max-width: 99.88%;
     margin: 24.4px auto 16px auto;
     max-width: 56.68vw;
     max-width: 96.88%;
     min-width: 62%;
     font-family: "Nunito","Rubik",sans-serif;
     font-family: "Nunito","Rubik",sans-serif;
     font-size: 0.84em;
     font-size: 0.84em;
     position: relative;
     position: relative;
     top: -3.02px;
     top: -11.08px;
     left: 6.82px;
     left: 4.82px;
     z-index: -1;
     z-index: 0;
    /* z-index: -1; */
}
h2 ~ .content-table-wrapper table.wikitable,
h2 ~ .content-table-wrapper #smwtable,
h2 ~ .content-table-wrapper table.smwtable {
    left: 7.82px;
}
@media screen and (min-width: 1340px) {
    h2 ~ .content-table-wrapper table.wikitable,
    h2 ~ .content-table-wrapper #smwtable,
    h2 ~ .content-table-wrapper table.smwtable {
        max-width: 57.48vw;
    }
}
h2 + .content-table-wrapper table.wikitable,
h2 + .content-table-wrapper #smwtable,
h2 + .content-table-wrapper table.smwtable {
    top: -5.08px;
    left: 2.82px;
    left: 5.48px;
}
h3 + .content-table-wrapper table.wikitable,
h3 + .content-table-wrapper #smwtable,
h3 + .content-table-wrapper table.smwtable {
    top: -10.42px;
}
h3 + h4 + .content-table-wrapper table.wikitable,
h3 + h4 + .content-table-wrapper #smwtable,
h3 + h4 + .content-table-wrapper table.smwtable {
    top: -9.22px;
}
h4 + .content-table-wrapper table.wikitable,
h4 + .content-table-wrapper #smwtable,
h4 + .content-table-wrapper table.smwtable {
    top: -8.44px;
}
}


:root.theme-dark table.wikitable > tr:nth-child(n+2) > th,
:root.theme-dark table.wikitable > tr:nth-child(n+2) > th,
Line 165: Line 197:
     border: solid 2px #555a64;
     border: solid 2px #555a64;
}
}
:root.theme-dark table.wikitable>tr>th,
:root.theme-dark table.wikitable>*>tr>th,
:root.theme-dark #smwtable tr>th,
:root.theme-dark table.smwtable>*>tr>th {
    background: var(--primary-9);
    background: #0f2140;
    background: #091a36;
    background: #081a38;
    background: #071834;
    background: #081832;
    background: #0a1932;
    /* background: #081938; */
    /* background: #0a162c; */
    /* background: #09162e; */
    border: solid 3px var(--primary-21);
    /* border: solid 3px #1d335c; */
    color: var(--text-color-2);
}


table.wikitable tbody tr:hover td a, :root.theme-dark #smwtable tbody tr:hover td a, :root.theme-dark table.smwtable tbody tr:hover td a, :root.theme-dark table.wikitable tbody tr:hover td, :root.theme-dark #smwtable tbody tr:hover td, :root.theme-dark table.smwtable tbody tr:hover td {
table.wikitable tbody tr:hover td a, :root.theme-dark #smwtable tbody tr:hover td a, :root.theme-dark table.smwtable tbody tr:hover td a, :root.theme-dark table.wikitable tbody tr:hover td, :root.theme-dark #smwtable tbody tr:hover td, :root.theme-dark table.smwtable tbody tr:hover td {
Line 196: Line 249:




.mw-parser-output > ul + h3 {
 
     margin-top: 13.42px!important;
ul#filetoc, .toc, .toccolours, .mw-warning {
     position: relative;
    background: #0c1d3e;
     top: 4px;
    /* background: #0a1932; */
    border-color: #8d99ab;
    /*max-width: 240px;
    margin-right: 0.06em;*/
    border-color: var(--contrast-color-10);
    border-color: var(--primary-26);
    max-width: 238px;
    top: -15px;
    top: 1px;
    /* top: -39px; */
    /* top: -34px; */
    right: 12px;
    right: 20px;
    /* z-index: -1; */
}
 
:root.theme-dark ul#filetoc > ul,
:root.theme-dark .toc > ul,
:root.theme-dark .toccolours > ul {
     filter: invert(1) hue-rotate(180deg);
}
.mw-body .toctitle {
    border-bottom: solid 3.4px var(--primary-26);
     border-bottom: solid 3.4px var(--primary-3);
}
.mw-body .toctitle h2 {
    color: #91a6d3;
    color: #8499c7;
}
.toctogglelabel {
    color: #91a6d3;
}
 
@media screen and (min-width: 1100px) {
     .mw-parser-output > h3 {
        margin-left: -0.972px;
        font-variant: unset;
    }
}
}


.mw-parser-output > p + h3 {
 
     margin-top: 15.42px!important;
 
    position: relative;
.pullout-wrapper .pullout-content {
    top: 7px;
     /* background: var(--accent-1); */
}
}


.mw-parser-output > .content-table-wrapper:has(.wikitable) + h3 {
@media screen and (min-width: 851px) {
    position: relative;
   
     top: -1px;
    .pullout-content div#article-type {
        max-width: 54.82em;
        position: relative;
        border-right: solid 1em var(--accent-5);
    }
   
     #subpage-article ~ .portable-infobox ~ .portable-infobox, .subpage-tabs-main ~ .portable-infobox ~ .portable-infobox {
        margin-top: 2px;
    }
}
}


:root.theme-dark table.wikitable>tr>th, :root.theme-dark table.wikitable>*>tr>th, :root.theme-dark #smwtable tr>th, :root.theme-dark table.smwtable>*>tr>th {
.stub-type#image-link {
     background: var(--primary-9);
     /* filter: invert(1) hue-rotate(322deg) brightness(0.93) contrast(2.2) saturate(0.58); */
    background: #0f2140;
    background: #091a36;
    background: #081a38;
    background: #071834;
    background: #081832;
    background: #0a1932;
    background: #091a36;
    border: solid 3px var(--primary-21);
    color: var(--text-color-2);
}
}
</pre>
</pre>

Latest revision as of 02:44, 16 November 2024


div#inline-box {
    float: left;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--accent-7);
    width: 246px;
    margin: 9px 14px 5px 5px;
    line-height: 1.1em;
    font-size: .8em;
    font-weight: 400;
    font-style: normal;
    /* background-color: #0c1d3e; */
    color: var(--text-color);
    position: relative;
    left: -3px;
    top: -4.28px;
}

#mw-related-navigation {
    margin-top: 1px;
    /* margin-left: 1px; */
}

@media screen and (min-width: 851px) {
    :root.theme-dark #mw-site-navigation .sidebar-chunk/*, #mw-related-navigation .sidebar-chunk*/ {
        /*width: 12.194em;
        position: relative;
        right: 0.052em;
        border-color: var(--contrast-color-3);*/
        border-right-color: var(--primary-2);
        border-radius: 18px 4.3px 4.3px 18px / 14px 7px 7px 14px;
        border-radius: 20px 4.3px 4.3px 18px / 14px 7px 7px 14px;
    }
}


@media screen and (min-width: 1340px) {
    
    :root.theme-dark #mw-site-navigation .sidebar-chunk {
        -moz-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
        -webkit-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
        -o-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
        -ms-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
        box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-1.78px 0 0 var(--primary-2),-3.78px 0 0 var(--primary-4),1px 0px 0 4px var(--primary-17), 0px -1px 0 2px var(--primary-3);
        box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-1.78px 0 0 var(--primary-2),-3.78px 0 0 var(--primary-4),1px 0px 0 4px var(--primary-17), 1px 0px 0 2px var(--primary-3);
        /* box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-3.28px 0 0 var(--primary-9),-3.78px 0 0 var(--primary-2),-4.78px 0 0 var(--primary-4),2px 0px 0 4px var(--primary-17), 1px 0px 0 2px var(--primary-3); */
        /* border-top-right-radius: 17px; */
        /* border-bottom-right-radius: 18px; */
    }
    
    #mw-site-navigation .sidebar-chunk#site-navigation {
        font-size: 0.9626em;
        left: 0.068em;
        top: -0.4288em;
        border-bottom-left-radius: 3px;
    }

    /*
    #mw-related-navigation .sidebar-chunk {
        right: -0.438em;
        /* right: -0.348em; */
        /* right: -0.598em; */
        /* right: -0.348em; */
    }/*

    #mw-related-navigation .sidebar-chunk {
        border-left-color: var(--primary-3);
        border-left-width: 3.28px;
        border-right-color: var(--contrast-color-3);
        box-shadow: 2px 0 0 var(--primary-7) inset,2.22px 0 0 var(--primary-7),5.42px 0 0 var(--primary-4),1px 1px 0 4px var(--primary-17), 1px -1px 0 4px var(--primary-2);
        border-radius: 4.3px 18px 18px 4.3px / 1px 14px 14px 7px;
    }  */

    :root.theme-dark #mw-related-navigation .sidebar-chunk {
        box-shadow: 2px 0 0 var(--primary-7) inset,1.22px 0 0 var(--primary-7),4.42px 0 0 var(--primary-4), -2px 0 0 var(--accent-9);
        right: -0.408em;
        right: -0.25289em;
    }
    
}



:root.theme-dark .mw-ui-button.mw-ui-progressive:not(:disabled) {
    outline: solid 4px var(--primary-26);
    background: var(--primary-28)!important;
}




table.wikitable, #smwtable, table.smwtable {
    border: solid 3px #555b66;
    border: solid 3px #3e4e6c;
    border: solid 3px var(--TEXT-B-H2);
    border: solid 3px hsl(220deg 60% 22%);
    border: solid 3px var(--primary-6);
    outline: solid 3px var(--accent-10);
    outline: solid 3px var(--contrast-color-14);
    /* outline: solid 3px #6f81a5; */
    outline-color: var(--contrast-color-13);
    outline-color: #6d809b;
    outline-color: #8497b3;
    outline-color: #8691a1;
    outline-color: #909caf;
    outline-color: #869bbb;
    outline-color: #778daf;
    /* outline-color: hsl(216deg 23% 55%); */
    outline-color: #8d99ab;
    /* outline-color: #8b9ebb; */
    border-radius: 14px;
    box-shadow: 0 0 0 6px var(--primary-3), 0 0 0 6px var(--TEXT-A-H1);
    box-shadow: 0 0 0 5px var(--primary-3), 0px 0 0 6px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18);
    box-shadow: 0 0 0 4px var(--primary-25), 0 0 0 7px var(--primary-3), 0px 0 0 8px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18);
    margin: 24.4px auto 16px auto;
    max-width: 96.88%;
    min-width: 62%;
    font-family: "Nunito","Rubik",sans-serif;
    font-size: 0.84em;
    position: relative;
    top: -11.08px;
    left: 4.82px;
    z-index: 0;
    /* z-index: -1; */
}
h2 ~ .content-table-wrapper table.wikitable,
h2 ~ .content-table-wrapper #smwtable,
h2 ~ .content-table-wrapper table.smwtable {
    left: 7.82px;
}
@media screen and (min-width: 1340px) {
    h2 ~ .content-table-wrapper table.wikitable,
    h2 ~ .content-table-wrapper #smwtable,
    h2 ~ .content-table-wrapper table.smwtable {
        max-width: 57.48vw;
    }
}
h2 + .content-table-wrapper table.wikitable,
h2 + .content-table-wrapper #smwtable,
h2 + .content-table-wrapper table.smwtable {
    top: -5.08px;
    left: 2.82px;
    left: 5.48px;
}
h3 + .content-table-wrapper table.wikitable,
h3 + .content-table-wrapper #smwtable,
h3 + .content-table-wrapper table.smwtable {
    top: -10.42px;
}
h3 + h4 + .content-table-wrapper table.wikitable,
h3 + h4 + .content-table-wrapper #smwtable,
h3 + h4 + .content-table-wrapper table.smwtable {
    top: -9.22px;
}
h4 + .content-table-wrapper table.wikitable,
h4 + .content-table-wrapper #smwtable,
h4 + .content-table-wrapper table.smwtable {
    top: -8.44px;
}

:root.theme-dark table.wikitable > tr:nth-child(n+2) > th,
:root.theme-dark table.wikitable > * > tr:nth-child(n+2) > th,
:root.theme-dark #smwtable tr:nth-child(n+2) > th,
:root.theme-dark table.smwtable > * > tr:nth-child(n+2) > th {
    background: #162a4c;
    background: #1d3158;
    background: #17294c;
    background: #1d3158;
    background: #091836;
    /* background: #162b4c; */
    /* background: #1f3154; */
    /* background: #23375a; */
    /* font-size: 1.1em; */
}

:root.theme-dark .mw_metadata>tr>th, :root.theme-dark .mw-datatable>tr>th, :root.theme-dark .wikitable>tr>th, :root.theme-dark .mw_metadata>tr>td, :root.theme-dark .mw-datatable>tr>td, :root.theme-dark .wikitable>tr>td, :root.theme-dark .mw_metadata>*>tr>th, :root.theme-dark .mw-datatable>*>tr>th, :root.theme-dark .wikitable>*>tr>th, :root.theme-dark .mw_metadata>*>tr>td, :root.theme-dark .mw-datatable>*>tr>td, :root.theme-dark .wikitable>*>tr>td {
    background: #0c1d3c;
    background: var(--primary-6);
    background: var(--primary-12);
    background: #15223c;
    background: #091d43;
    background: #16284a;
    background: var(--primary-18);
    background: #11203c;
    background: #0e2140;
    background: #0a1e3e;
    /* background: #091d3c; */
    /* background: #0a1d3a; */
    /* background: #081832; */
    background: #081a38;
    background: #081b3c;
    background: #081938;
    background: #0c1d3e;
    border: solid 2px #555b66;
    border: solid 2px #555a64;
}


:root.theme-dark table.wikitable>tr>th,
:root.theme-dark table.wikitable>*>tr>th,
:root.theme-dark #smwtable tr>th,
:root.theme-dark table.smwtable>*>tr>th {
    background: var(--primary-9);
    background: #0f2140;
    background: #091a36;
    background: #081a38;
    background: #071834;
    background: #081832;
    background: #0a1932;
    /* background: #081938; */
    /* background: #0a162c; */
    /* background: #09162e; */
    border: solid 3px var(--primary-21);
    /* border: solid 3px #1d335c; */
    color: var(--text-color-2);
}


table.wikitable tbody tr:hover td a, :root.theme-dark #smwtable tbody tr:hover td a, :root.theme-dark table.smwtable tbody tr:hover td a, :root.theme-dark table.wikitable tbody tr:hover td, :root.theme-dark #smwtable tbody tr:hover td, :root.theme-dark table.smwtable tbody tr:hover td {
    background: #162a4c;
    background: #0c182e;
    background: #0f1b32;
    /* background: #1d3158; */
    /* background: #162b4c; */
    /* background: #1f3154; */
    background: #23375a;
    background: #091b38;
    background: #0a1d3a;
    background: #1a3054;
    outline: solid 2px var(--primary-21);
}



table.wikitable tbody tr:hover td a,
#smwtable tbody tr:hover td a,
table.smwtable tbody tr:hover td a {
    color: var(--accent-1);
}
table.wikitable tbody tr:hover td a:hover,
#smwtable tbody tr:hover td a:hover,
table.smwtable tbody tr:hover td a:hover {
    color: var(--accent-2);
    color: var(--alt-link-color-1b);
    text-decoration-color: var(--accent-7);
}



ul#filetoc, .toc, .toccolours, .mw-warning {
    background: #0c1d3e;
    /* background: #0a1932; */
    border-color: #8d99ab;
    /*max-width: 240px;
    margin-right: 0.06em;*/
    border-color: var(--contrast-color-10);
    border-color: var(--primary-26);
    max-width: 238px;
    top: -15px;
    top: 1px;
    /* top: -39px; */
    /* top: -34px; */
    right: 12px;
    right: 20px;
    /* z-index: -1; */
}

:root.theme-dark ul#filetoc > ul,
:root.theme-dark .toc > ul,
:root.theme-dark .toccolours > ul {
    filter: invert(1) hue-rotate(180deg);
}
.mw-body .toctitle {
    border-bottom: solid 3.4px var(--primary-26);
    border-bottom: solid 3.4px var(--primary-3);
}
.mw-body .toctitle h2 {
    color: #91a6d3;
    color: #8499c7;
}
.toctogglelabel {
    color: #91a6d3;
}

@media screen and (min-width: 1100px) {
    .mw-parser-output > h3 {
        margin-left: -0.972px;
        font-variant: unset;
    }
}



.pullout-wrapper .pullout-content {
    /* background: var(--accent-1); */
}

@media screen and (min-width: 851px) {
    
    .pullout-content div#article-type {
        max-width: 54.82em;
        position: relative;
        border-right: solid 1em var(--accent-5);
    }
    
    #subpage-article ~ .portable-infobox ~ .portable-infobox, .subpage-tabs-main ~ .portable-infobox ~ .portable-infobox {
        margin-top: 2px;
    }
}

.stub-type#image-link {
    /* filter: invert(1) hue-rotate(322deg) brightness(0.93) contrast(2.2) saturate(0.58); */
}