Difference between revisions of "MediaWiki:Common.css"

From Drawn to Life Wiki
(Created page with "→‎CSS placed here will be applied to all skins: →‎This governs the sections on the Community portal: .cpbox { display: flex; flex-direction: row-reverse; fle...")
 
(remove dark mode styles)
 
(164 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
+
#DiscordBanner {
/* This governs the sections on the Community portal */
+
width: 100%;
.cpbox {
+
height: 5.7em;
    display: flex;
+
background: #7289da;
    flex-direction: row-reverse;
+
color: white;
    flex-wrap: wrap;
+
border: 1px solid #826bf0;
 +
border-radius: 10px;
 +
text-align: center;
 +
font-weight: bold;
 +
line-height: 2em;
 +
background-image: url("/w/backgrounds/28174a34e77bb5e5310ced9f95cb480b.png");
 +
background-repeat: no-repeat;
 +
background-size: 6em;
 +
margin: 10px 0 10px 0;
 +
}
 +
#DiscordBannerText{
 +
position: relative;
 +
top: 38%;
 +
left: 2em;
 +
}
 +
#DiscordBannerText > a:nth-child(1){
 +
color: white;
 
}
 
}
  
.cpbox #admins {
+
.TEMPLATE-LevelMap {
     box-sizing: border-box;
+
     cursor: all-scroll;
     width: calc(33% - 10px);
+
     overflow: hidden;
     margin: 5px;
+
     height: 800px;
    flex-grow: 1;
 
    min-width: 300px;
 
 
}
 
}
  
.cpbox #help {
+
.TEMPLATE-IconSVG-Question {
     box-sizing: border-box;
+
    display: inline-block;
     width: calc(67% - 10px);
+
    width: 0.95em;
     margin: 5px;
+
    background-image: url("https://drawntolife.wiki/w/images/8/82/Question.svg");
     flex-grow: 1;
+
    height: 0.95em;
 +
    background-size: 0.85em;
 +
    background-repeat: no-repeat;
 +
    position: relative;
 +
    top: 0.125em;
 +
}
 +
.TEMPLATE-TD_Name {
 +
    width: 6em;
 +
    float: left;
 +
}
 +
.TEMPLATE-TD_Entry {
 +
padding: 0.4em 0 0.4em 0;
 +
border-bottom: 1px dotted #00000030;
 +
margin-left: 1em;
 +
}
 +
.TEMPLATE-TD_Text {
 +
    display: inline-block;
 +
    padding-left: 1em;
 +
}
 +
.TEMPLATE-TD-OPT_Entry {
 +
padding: 0.4em 0 0.4em 0;
 +
border-bottom: 1px dotted #00000030;
 +
border-left: 1px dotted #00000030;
 +
opacity: 0.7;
 +
font-style: italic;
 +
margin-left: 7em;
 +
}
 +
.TEMPLATE-TD-OPT_Text {
 +
    display: inline-flex;
 +
    padding-left: 1em;
 +
}
 +
.TEMPLATE-TD_Act,.TEMPLATE-TD_Draw {
 +
opacity: 0.85;
 +
font-family: monospace;
 +
padding: 0.4em 0 0.4em 0;
 +
}
 +
.TEMPLATE-TD-INLEVEL {
 +
background-color: #dcdcdc38;
 +
border-radius: 5px;
 +
padding: 5px;
 +
}
 +
#RescuedRaposa h3 {
 +
    border-bottom: none;
 +
}
 +
#mw-customcollapsible-optdialog {
 +
     background-color: #dcdcdc38;
 +
    border-radius: 5px;
 +
    padding: 5px;
 +
}
 +
.page-User_BakiDance_Primordial_Void {
 +
    background-image: url(https://drawntolife.wiki/w/images/f/f3/VoidStatic.png);
 +
    background-attachment: fixed;
 +
    background-size: cover;
 +
}
 +
.page-User_BakiDance_Primordial_Void {
 +
    animation: colorRotate 12s linear 0s infinite;
 +
}
 +
.page-User_BakiDance_Primordial_Void #p-logo a {
 +
    transform: rotate3d(-16, 10, -5, 32deg);
 +
}
 +
.page-User_BakiDance_Primordial_Void .mw-body {
 +
    box-shadow: #00000082 130px 240px 0;
 +
}
 +
.page-User_BakiDance_Primordial_Void .mw-body-content p {
 +
    font-family: monospace;
 +
}
 +
.page-User_BakiDance_Primordial_Void #mw-panel {
 +
    box-shadow: #00000082 30px 320px 0;
 +
}
 +
@keyframes colorRotate {
 +
    from {
 +
        background-color: rgb(255, 0, 0);
 +
    }
 +
    16.6% {
 +
        background-color: rgb(255, 0, 255);
 +
    }
 +
    33.3% {
 +
        background-color: rgb(0, 0, 255);
 +
     }
 +
    50% {
 +
        background-color: rgb(0, 255, 255);
 +
    }
 +
    66.6% {
 +
        background-color: rgb(0, 255, 0);
 +
     }
 +
    83.3% {
 +
        background-color: rgb(255, 255, 0);
 +
    }
 +
    to {
 +
        background-color: rgb(255, 0, 0);
 +
    }
 +
}
 +
@font-face{
 +
    font-family:'Rubik';
 +
    font-style:normal;
 +
    font-weight:400;
 +
    font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWkU1Z4Y.woff2") format('woff2');
 +
    unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
 +
}
 +
@font-face{
 +
    font-family:'Rubik';
 +
    font-style:normal;
 +
    font-weight:400;
 +
    font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2") format('woff2');
 +
    unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
 +
}
 +
@font-face{
 +
    font-family:'Rubik';
 +
    font-style:normal;
 +
    font-weight:400;
 +
    font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFVUU1Z4Y.woff2") format('woff2');
 +
    unicode-range:U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F
 +
}
 +
@font-face{
 +
    font-family:'Rubik';
 +
    font-style:normal;
 +
    font-weight:400;
 +
    font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWUU1Z4Y.woff2") format('woff2');
 +
    unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
 +
}
 +
@font-face{
 +
    font-family:'Rubik';
 +
    font-style:normal;
 +
    font-weight:400;
 +
    font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0U1.woff2") format('woff2');
 +
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
 +
}
 +
@font-face{
 +
    font-family:'Poppins';
 +
    font-style:normal;
 +
    font-weight:400;
 +
    font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2") format('woff2');
 +
    unicode-range:U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB
 +
}
 +
@font-face{
 +
    font-family:'Poppins';
 +
    font-style:normal;
 +
    font-weight:400;
 +
     font-display:swap;
 +
    src:url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2") format('woff2');
 +
    unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
 
}
 
}
 
+
@font-face{
/* Template documentation styles */
+
    font-family:'Poppins';
/* If modifying these styles, be sure to update the mobile skin! */
+
    font-style:normal;
.doc {
+
    font-weight:400;
     margin: 0em auto 1em;
+
    font-display:swap;
     background-color: rgba(0, 0, 0, 0.1);
+
    src:url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2") format('woff2');
     border: 2px solid #BDCAC3;
+
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
     border-radius: 1em;
+
}
     padding: 1em;
+
@font-face{
 +
    font-family:'Pixellari';
 +
    src:url('Pixellari.ttf') format('truetype');
 +
    font-weight:normal;
 +
    font-style:normal
 +
}
 +
@font-face{
 +
     font-family:'Hobo';
 +
    src:url('hobo.ttf') format('truetype');
 +
    font-weight:normal;
 +
     font-style:normal
 +
}
 +
@font-face{
 +
    font-family:'ARCO';
 +
    src:url('ARCO.ttf.woff') format('woff'), url('ARCO.ttf.svg#ARCO') format('svg'), url('ARCO.ttf.eot'), url('ARCO.ttf.eot?#iefix') format('embedded-opentype');
 +
    font-weight:normal;
 +
    font-style:normal
 +
}
 +
.mw-body-content h2{
 +
    font-family:'Rubik', sans-serif
 +
}
 +
.mw-body-content h3,.mw-body-content h4{
 +
    font-family:'Rubik', sans-serif
 +
}
 +
.mw-body-content p{
 +
    font-family:'Poppins', sans-serif;
 +
    letter-spacing:0.01em
 +
}
 +
#mw-content-text .tabber div.tabbertab,#mw-content-text .tabber ul.tabbernav{
 +
    border:none
 +
}
 +
#mw-content-text .tabber ul.tabbernav{
 +
    display:flex;
 +
    flex-flow:row wrap;
 +
    padding:0;
 +
    font-family:Rubik,"Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    overflow:auto
 +
}
 +
#mw-content-text .tabber ul.tabbernav li{
 +
    display:flex
 +
}
 +
#mw-content-text .tabber ul.tabbernav li.tabberactive a,#mw-content-text .tabber ul.tabbernav li:not(.tabberactive) a{
 +
    background:initial;
 +
     border-color:currentColor;
 +
    border-width:0 0 2px !important;
 +
    color:inherit;
 +
    font-size:12px;
 +
    font-weight:700;
 +
    line-height:0;
 +
    margin:0;
 +
    padding:13px 11px;
 +
    text-align:center;
 +
    text-transform:uppercase;
 +
    transition:opacity 0.3s;
 +
    white-space:nowrap;
 +
    text-decoration:none
 +
}
 +
#mw-content-text .tabber ul.tabbernav li:not(.tabberactive) a{
 +
    opacity:0.5
 +
}
 +
#mw-content-text .tabber ul.tabbernav li:not(.tabberactive):hover a{
 +
    opacity:0.75;
 +
     text-decoration:none
 +
}
 +
#mw-content-text .tabber ul.tabbernav{
 +
    align-items:center;
 +
     justify-content:center;
 +
    border-bottom:1px solid #b7bdc4
 
}
 
}
 
+
.mw-warning,.toc,.toccolours{
.doc-header {
+
     background-color:#fff;
     padding-bottom: 3px;
+
     border-radius:5px
     border-bottom: 1px solid #BDCAC3;
 
    margin-bottom: 1ex;
 
 
}
 
}
 
+
li#n-Please-consider-donating-so-that-our-wiki-may-continue-running-ad-free.21{
.doc-footer {
+
     font-weight:bold
    margin: 0;
 
    background-color: rgba(0, 0, 0, 0.1);
 
    border: 2px solid #BDCAC3;
 
     border-radius: 1em;
 
    padding: 1em;
 
 
}
 
}
 
+
.profile-actions{
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
+
    font-family:Rubik,"Helvetica Neue",Helvetica,Arial,sans-serif;
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
+
     font-size:1.3em
.desktopleft {
 
     text-align: left;
 
 
}
 
}
 
+
#profile-title{
.desktopcenter {
+
     font-family:"Arco",m sans-serif
     text-align: center;
 
 
}
 
}
 
+
.rfancyHeader{
.desktopright {
+
    background:#0172b8 url("/w/images/6/69/TurtleRockScreenshot.jpg");
     text-align: right;
+
    background-attachment:fixed;
 +
    background-size:cover;
 +
    position:relative;
 +
    border:1px solid #b8bec4;
 +
     border-radius:15px;
 +
    box-shadow:#0000003b 0 0 7px
 
}
 
}
 
+
.rfancyHeader-textInside{
/* Front page structure */
+
    width:100%;
#fp-container {
+
    max-height:90%;
display: grid;
+
    min-height:60%;
grid-template-areas: "a" "b" "c" "d";
+
    backdrop-filter: blur(10px);
grid-template-columns: 100%;
+
    position:absolute;
 +
    top:50%;
 +
    transform:translateY(-50%);
 +
    text-align:center;
 +
    box-shadow:#0000003b 0 0 7px;
 +
    background:rgb(83 83 83 / 6%)
 
}
 
}
@media screen and (min-width:990px) {
+
.rfancyHeader-headerText{
#fp-container {
+
    font-family:'ARCO' !important;
grid-template-areas: "a b" "c b" "d b";
+
    color:#fff;
grid-template-columns: 50% 50%;
+
    text-shadow:1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
+
    font-size:2em;
 +
    border-bottom:1px dashed #f8fcff
 
}
 
}
@media screen and (min-width:1350px) {
+
.rfancyHeader-contentText{
#fp-container {
+
    font-family:'Poppins', sans-serif !important;
grid-template-areas: "a b c" "d b c";
+
    color:#fff;
grid-template-columns: 33.3% 33.3% 33.3%;
+
    text-shadow:1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000;
}
+
    font-size:1.2em;
 +
    font-weight:bold
 
}
 
}
 
+
#whitelinks a:link,#whitelinks a:visited,#whitelinks i a.mw-selflink.selflink{
.fp-section {
+
    color:#F7F7F7;
display: flex;
+
    text-decoration:none
flex-wrap: wrap;
 
 
}
 
}
 
+
#whitelinks a:hover{
.fp-section .fpbox {
+
    color:#E4E4E4;
width: calc(100% - 2px);
+
    text-decoration:underline
 
}
 
}
 
+
.tooltip-template{
#fp-1 {
+
    position:relative;
grid-area: a;
+
    display:inline-flex;
 +
    cursor: help;
 +
    border-bottom:1px dotted #222;
 +
    height:1.3em
 
}
 
}
 
+
.tooltip-template .tooltiptext-template{
#fp-2 {
+
    visibility:hidden;
grid-area: b;
+
    width:20em;
 +
    background-color:#1e1e1eb8;
 +
    color:#f4f4f4;
 +
    text-align:center;
 +
    border-radius:6px;
 +
    border:1px #272727 solid;
 +
    padding:5px 0;
 +
    position:absolute;
 +
    z-index:1;
 +
    bottom:150%;
 +
    right:-8em;
 +
    margin-left:-60px;
 +
    opacity:0;
 +
    transition:opacity 0.5s;
 +
    backdrop-filter: blur(4px);
 +
    box-shadow: #0000004d 0 0 4px;
 
}
 
}
 
+
.tooltip-template .tooltiptext-template::after{
#fp-3 {
+
    content:"";
grid-area: c;
+
    position:absolute;
 +
    top:100%;
 +
    left:50%;
 +
    margin-left:-5px;
 +
    border-width:5px;
 +
    border-style:solid;
 +
    border-color: #272727 transparent transparent transparent
 
}
 
}
 
+
.tooltip-template:hover .tooltiptext-template{
#fp-4 {
+
    visibility:visible;
grid-area: d;
+
    opacity:1
 
}
 
}
 
+
.wikiEditor-ui .CodeMirror,.wikiEditor-ui textarea{
.fpbox {
+
     background-color:#2c3438;
     margin: 5px;
+
     color:#daddd7
    padding: 5px;
 
     overflow: auto;
 
 
}
 
}
 
+
.cm-mw-template,.cm-mw-template-argument-name{
.fpbox.plain {
+
     color:#eeca5f
     background: transparent;
 
    border: none;
 
    box-shadow: none;
 
 
}
 
}
 
+
.cm-mw-template-bracket,.cm-mw-template-delimiter,.cm-mw-template-name{
.fpbox .heading,
+
     color:#d6a64a
.fpbox .mainheading,
 
.fpbox .welcome {
 
     margin: 0 0 10px;
 
    padding: 0 0 5px;
 
    overflow: auto;
 
 
}
 
}
 
+
.cm-mw-exttag-attribute,.cm-mw-exttag-name{
.fpbox .mainheading,
+
     color:#a5d54f
.fpbox .welcome {
 
     font-size: 150%;
 
    font-weight: bold;
 
 
}
 
}
 
+
.cm-mw-exttag-bracket{
.fpbox .heading {
+
     color:#6dbe36
     text-align: center;
 
    font-size: 132%;
 
 
}
 
}
 
+
.cm-mw-link-pagename{
.linkslabel {
+
     color:#77cbcf
     margin: 15px 5px 5px;
 
    padding: 0 0 5px;
 
 
}
 
}
 
+
.cm-mw-link-bracket{
/* Template:FP links styles */
+
     color:#54a1b3
.fplinks {
 
    display: flex;
 
    flex-wrap: wrap;
 
    justify-content: space-evenly;
 
     align-items: stretch;
 
    text-align: center;
 
 
}
 
}
 
+
.cm-mw-extlink,.cm-mw-extlink-protocol,.cm-mw-free-extlink-protocol{
.fplink-outer {
+
     color:#8aafe8
    padding: 5px;
 
    flex-basis: calc(25% - 10px);
 
    width: calc(25% - 15px);
 
    min-width: 115px;
 
    display: inline-block;
 
     vertical-align: middle;
 
 
}
 
}
 
+
.cm-mw-extlink-bracket{
.fplink-wide {
+
     color:#5e77c4
    flex-basis: calc(33% - 10px);
 
     width: calc(33% - 15px);
 
 
}
 
}
 
+
.cm-mw-section-header{
.fplink-fullwidth {
+
     color:#cc6969
    flex-basis: 100%;
 
    width: calc(100% - 15px);
 
     font-weight: bold;
 
 
}
 
}
 
+
.cm-mw-list{
.fplink {
+
     color:#7b9af7
    padding: 0.5em;
 
    box-sizing: border-box;
 
    width: 100%;
 
    height: 100%;
 
     display: table;
 
 
}
 
}
 
+
.cm-mw-doubleUnderscore,.cm-mw-hr,.cm-mw-signature{
.fplink-plain {
+
     color:#cda2e1;
     background: transparent;
+
     font-weight:bold;
     border-radius: 0;
+
     background-color:#eeeeee0d
     border: 0;
 
    box-shadow: none;
 
 
}
 
}
 
+
.cm-mw-apostrophes-bold,.cm-mw-apostrophes-italic{
.fplink-inner {
+
     color:#a5d54f;
     display: table-row;
+
    font-weight:bold
 
}
 
}
 
+
.cm-mw-htmltag-attribute,.cm-mw-htmltag-name{
.fplink a {
+
     color:#a5d54f
     display: table-cell;
 
    vertical-align: middle;
 
 
}
 
}
 
+
.cm-mw-htmltag-bracket{
.fplink img {
+
     color:#6dbe36
     max-width: 150px;
 
    width: 100%;
 
    height: auto;
 
 
}
 
}
/* Auto-resize front page video to fit smaller columns */
+
.cm-mw-parserfunction-name{
.fpbox .embedvideowrap {
+
     color:#de9191
     width: 100%!important;
 
    max-width: 480px;
 
    margin: 0 auto;
 
 
}
 
}
 
+
.cm-mw-parserfunction-bracket,.cm-mw-parserfunction-delimiter{
.fpbox .embedvideowrap iframe {
+
     color:#cd5858
     width: 100%!important;
 
 
}
 
}
 
+
.cm-mw-skipformatting{
/* This CSS governs the responsive 3 column main page layout */
+
     background-color:#68b5354f
.fpmidsections {
 
     float: left;
 
    width: 100%;
 
    overflow: hidden;
 
 
}
 
}
 
+
.cm-mw-templatevariable-name,.cm-mw-templatevariable{
.fpsection1,
+
     color:#ff7a38
.fpsection2,
 
.fpsection3,
 
.fpsection4 {
 
     float: left;
 
    clear: both;
 
    width: 100%;
 
 
}
 
}
 
+
.cm-mw-table-definition{
.fpmain .columns .leftcol,
+
     color:#ff59ff
.fpmain .columns .rightcol {
 
     width: 100%;
 
    margin: 0;
 
    padding: 0;
 
 
}
 
}
 
+
@media only screen and (max-width: 640px){
@media (min-width: 790px) {
+
     .InfoboxGeneric{
     .fpsection1,
+
         width:100% !important;
    .fpsection4 {
+
        margin-left: 0 !important;
         float: left;
+
         float: none !important;
         clear: none;
+
         max-width: none !important
         width: 50%;
 
 
     }
 
     }
 
+
}
     .fpmidsections {
+
@media only screen and (max-width: 640px){
         float: right;
+
     .InfoboxDynamic{
         clear: none;
+
         width:100% !important;
         width: 50%;
+
        margin-left: 0 !important;
 +
         float: none !important;
 +
         max-width: none !important
 
     }
 
     }
 +
}
 +
.InfoboxStyle {
 +
border-radius: 5px;
 +
background-color: rgba(255, 255, 255, 0.7);
 +
float:right;
 +
margin-left:10px;
 +
width: 35%;
 +
max-width: 40em;
 +
box-shadow: #0000003b 0 0px 7px;
 +
}
 +
.InfoBigText {
 +
text-align:center;
 +
color: white;
 +
border-radius: 5px;
 +
font-family: ARCO;
 +
border-bottom: 4px solid rgb(0 0 0 / 43%);
 +
text-shadow: 1px 0 0 #00000085,0 -1px 0 #00000085,0 1px 0 #00000085,-1px 0 0 #00000085;
 +
font-size: 1.2em;
 +
}
 +
.InfoboxSmallDiv {
 +
color:#ffffff;
 +
border-radius: 5px;
 +
border-bottom: 3.5px
 +
solid rgba(0, 0, 0, 0.43);
 
}
 
}
  
@media (min-width: 990px) {
+
/* Namespace warning */
     .fpmain .columns .leftcol {
+
#top-notice, #top-notice-ns {
        float: left;
+
     margin-bottom: 0.6em;
        width: 50%;
+
    color: #8a8a8b;
     }
+
    text-align: center;
 +
    font-style: italic;
 +
     border-bottom: 1px solid;
 +
}
  
     .fpmain .columns .rightcol {
+
/* Gallery preview */
        float: right;
+
/* Remove checker BG*/
        width: 50%;
+
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
     }
+
     background: inherit;
 +
}
 +
/* BG Color */
 +
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
 +
    background: #6c6c6c;
 +
    box-shadow: #00000078 0px 0px 35px;
 +
}
 +
.mw-mmv-overlay {
 +
     background-color: #545557;
 
}
 
}
  
@media (min-width: 1390px) {
+
/* Dynamic Image Size */
    .fpmidsections {
+
div.imgDynamic img {
        clear: none;
+
    height: auto;
        float: right;
+
    max-width: 100%;
        width: 66.667%;
+
}
    }
 
  
    .fpsection1 {
 
        clear: none;
 
        width: 33.333%;
 
    }
 
  
    .fpsection2,
+
/* Rate Widget */
    .fpsection3 {
+
.ratingstar-plain {
        clear: none;
+
  background-image: url(/w/images/3/3a/Icon_socket.png) !important;
        width: 50%;
+
}
    }
+
.ratingstar-mousedown,.ratingstar-full {
 
+
  background-image: url(/w/images/8/86/Icon_star.png) !important;
    .fpsection4 {
 
        clear: left;
 
        width: 33.333%;
 
    }
 
 
}
 
}
 
+
/* Numbered Lists 1 > b > iii */
/* Gallery tweak */
+
ol {  
ul.mw-gallery-nolines li.gallerybox div.thumb {
+
list-style-type: decimal;  
  background:none;
 
  box-shadow:none;
 
  border:none;
 
 
}
 
}
 
+
ol li > ol {  
/***************************
+
list-style-type: lower-alpha;  
* Used by [[Template:Key]] *
 
****************************/
 
/* Dark Wiki Variation */
 
.keysDark {
 
color:black;
 
border: 1px solid rgb(170, 170, 170);
 
box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221);
 
border-radius: .2em;
 
background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238));
 
background-color: rgb(249, 249, 249);
 
padding: 0.1em 0.6em 0.1em 0.6em;
 
margin-right:2px;
 
font-size:85%;
 
font-family:inherit;
 
font-style:normal;
 
 
}
 
}
 
+
ol li > ol li > ol {  
/* Light Wiki Variation */
+
list-style-type: lower-roman;  
.keysLight {
 
color:white;
 
border: 1px solid rgb(0, 0, 0);
 
box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0);
 
border-radius: .2em;
 
background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30));
 
background-color: rgb(30, 30, 30);
 
padding: 0.1em 0.6em 0.1em 0.6em;
 
margin-right:2px;
 
font-size:85%;
 
font-family:inherit;
 
font-style:normal;
 
 
}
 
}
 
/******************************
 
* End Template:Key coloration *
 
*******************************/
 

Latest revision as of 16:00, 15 October 2023

#DiscordBanner {
width: 100%;
height: 5.7em;
background: #7289da;
color: white;
border: 1px solid #826bf0;
border-radius: 10px;
text-align: center;
font-weight: bold;
line-height: 2em;
background-image: url("/w/backgrounds/28174a34e77bb5e5310ced9f95cb480b.png");
background-repeat: no-repeat;
background-size: 6em;
margin: 10px 0 10px 0;
}
#DiscordBannerText{
position: relative;
top: 38%;
left: 2em;
}
#DiscordBannerText > a:nth-child(1){
color: white;
}

.TEMPLATE-LevelMap {
    cursor: all-scroll;
    overflow: hidden;
    height: 800px;
}

.TEMPLATE-IconSVG-Question {
     display: inline-block;
     width: 0.95em;
     background-image: url("https://drawntolife.wiki/w/images/8/82/Question.svg");
     height: 0.95em;
     background-size: 0.85em;
     background-repeat: no-repeat;
     position: relative;
     top: 0.125em;
}
.TEMPLATE-TD_Name {
    width: 6em;
    float: left;
}
.TEMPLATE-TD_Entry {
 padding: 0.4em 0 0.4em 0;
 border-bottom: 1px dotted #00000030;
 margin-left: 1em;
}
.TEMPLATE-TD_Text {
    display: inline-block;
    padding-left: 1em;
}
.TEMPLATE-TD-OPT_Entry {
 padding: 0.4em 0 0.4em 0;
 border-bottom: 1px dotted #00000030;
 border-left: 1px dotted #00000030;
 opacity: 0.7;
 font-style: italic;
 margin-left: 7em;
}
.TEMPLATE-TD-OPT_Text {
    display: inline-flex;
    padding-left: 1em;
}
.TEMPLATE-TD_Act,.TEMPLATE-TD_Draw {
 opacity: 0.85;
 font-family: monospace;
 padding: 0.4em 0 0.4em 0;
}
.TEMPLATE-TD-INLEVEL {
 background-color: #dcdcdc38;
 border-radius: 5px;
 padding: 5px;
}
#RescuedRaposa h3 {
    border-bottom: none;
}
#mw-customcollapsible-optdialog {
    background-color: #dcdcdc38;
    border-radius: 5px;
    padding: 5px;
}
 .page-User_BakiDance_Primordial_Void {
     background-image: url(https://drawntolife.wiki/w/images/f/f3/VoidStatic.png);
     background-attachment: fixed;
     background-size: cover;
}
 .page-User_BakiDance_Primordial_Void {
     animation: colorRotate 12s linear 0s infinite;
}
 .page-User_BakiDance_Primordial_Void #p-logo a {
     transform: rotate3d(-16, 10, -5, 32deg);
}
 .page-User_BakiDance_Primordial_Void .mw-body {
     box-shadow: #00000082 130px 240px 0;
}
 .page-User_BakiDance_Primordial_Void .mw-body-content p {
     font-family: monospace;
}
 .page-User_BakiDance_Primordial_Void #mw-panel {
     box-shadow: #00000082 30px 320px 0;
}
 @keyframes colorRotate {
     from {
         background-color: rgb(255, 0, 0);
    }
     16.6% {
         background-color: rgb(255, 0, 255);
    }
     33.3% {
         background-color: rgb(0, 0, 255);
    }
     50% {
         background-color: rgb(0, 255, 255);
    }
     66.6% {
         background-color: rgb(0, 255, 0);
    }
     83.3% {
         background-color: rgb(255, 255, 0);
    }
     to {
         background-color: rgb(255, 0, 0);
    }
}
 @font-face{
    font-family:'Rubik';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWkU1Z4Y.woff2") format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}
@font-face{
    font-family:'Rubik';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2") format('woff2');
    unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face{
    font-family:'Rubik';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFVUU1Z4Y.woff2") format('woff2');
    unicode-range:U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F
}
@font-face{
    font-family:'Rubik';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWUU1Z4Y.woff2") format('woff2');
    unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}
@font-face{
    font-family:'Rubik';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0U1.woff2") format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2") format('woff2');
    unicode-range:U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB
}
@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2") format('woff2');
    unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}
@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2") format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face{
    font-family:'Pixellari';
    src:url('Pixellari.ttf') format('truetype');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'Hobo';
    src:url('hobo.ttf') format('truetype');
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'ARCO';
    src:url('ARCO.ttf.woff') format('woff'), url('ARCO.ttf.svg#ARCO') format('svg'), url('ARCO.ttf.eot'), url('ARCO.ttf.eot?#iefix') format('embedded-opentype');
    font-weight:normal;
    font-style:normal
}
.mw-body-content h2{
    font-family:'Rubik', sans-serif
}
.mw-body-content h3,.mw-body-content h4{
    font-family:'Rubik', sans-serif
}
.mw-body-content p{
    font-family:'Poppins', sans-serif;
    letter-spacing:0.01em
}
#mw-content-text .tabber div.tabbertab,#mw-content-text .tabber ul.tabbernav{
    border:none
}
#mw-content-text .tabber ul.tabbernav{
    display:flex;
    flex-flow:row wrap;
    padding:0;
    font-family:Rubik,"Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow:auto
}
#mw-content-text .tabber ul.tabbernav li{
    display:flex
}
#mw-content-text .tabber ul.tabbernav li.tabberactive a,#mw-content-text .tabber ul.tabbernav li:not(.tabberactive) a{
    background:initial;
    border-color:currentColor;
    border-width:0 0 2px !important;
    color:inherit;
    font-size:12px;
    font-weight:700;
    line-height:0;
    margin:0;
    padding:13px 11px;
    text-align:center;
    text-transform:uppercase;
    transition:opacity 0.3s;
    white-space:nowrap;
    text-decoration:none
}
#mw-content-text .tabber ul.tabbernav li:not(.tabberactive) a{
    opacity:0.5
}
#mw-content-text .tabber ul.tabbernav li:not(.tabberactive):hover a{
    opacity:0.75;
    text-decoration:none
}
#mw-content-text .tabber ul.tabbernav{
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #b7bdc4
}
.mw-warning,.toc,.toccolours{
    background-color:#fff;
    border-radius:5px
}
li#n-Please-consider-donating-so-that-our-wiki-may-continue-running-ad-free.21{
    font-weight:bold
}
.profile-actions{
    font-family:Rubik,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:1.3em
}
#profile-title{
    font-family:"Arco",m sans-serif
}
.rfancyHeader{
    background:#0172b8 url("/w/images/6/69/TurtleRockScreenshot.jpg");
    background-attachment:fixed;
    background-size:cover;
    position:relative;
    border:1px solid #b8bec4;
    border-radius:15px;
    box-shadow:#0000003b 0 0 7px
}
.rfancyHeader-textInside{
    width:100%;
    max-height:90%;
    min-height:60%;
    backdrop-filter: blur(10px);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    text-align:center;
    box-shadow:#0000003b 0 0 7px;
    background:rgb(83 83 83 / 6%)
}
.rfancyHeader-headerText{
    font-family:'ARCO' !important;
    color:#fff;
    text-shadow:1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    font-size:2em;
    border-bottom:1px dashed #f8fcff
}
.rfancyHeader-contentText{
    font-family:'Poppins', sans-serif !important;
    color:#fff;
    text-shadow:1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000;
    font-size:1.2em;
    font-weight:bold
}
#whitelinks a:link,#whitelinks a:visited,#whitelinks i a.mw-selflink.selflink{
    color:#F7F7F7;
    text-decoration:none
}
#whitelinks a:hover{
    color:#E4E4E4;
    text-decoration:underline
}
.tooltip-template{
    position:relative;
    display:inline-flex;
    cursor: help;
    border-bottom:1px dotted #222;
    height:1.3em
}
.tooltip-template .tooltiptext-template{
    visibility:hidden;
    width:20em;
    background-color:#1e1e1eb8;
    color:#f4f4f4;
    text-align:center;
    border-radius:6px;
    border:1px #272727 solid;
    padding:5px 0;
    position:absolute;
    z-index:1;
    bottom:150%;
    right:-8em;
    margin-left:-60px;
    opacity:0;
    transition:opacity 0.5s;
     backdrop-filter: blur(4px);
     box-shadow: #0000004d 0 0 4px;
}
.tooltip-template .tooltiptext-template::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color: #272727 transparent transparent transparent
}
.tooltip-template:hover .tooltiptext-template{
    visibility:visible;
    opacity:1
}
.wikiEditor-ui .CodeMirror,.wikiEditor-ui textarea{
    background-color:#2c3438;
    color:#daddd7
}
.cm-mw-template,.cm-mw-template-argument-name{
    color:#eeca5f
}
.cm-mw-template-bracket,.cm-mw-template-delimiter,.cm-mw-template-name{
    color:#d6a64a
}
.cm-mw-exttag-attribute,.cm-mw-exttag-name{
    color:#a5d54f
}
.cm-mw-exttag-bracket{
    color:#6dbe36
}
.cm-mw-link-pagename{
    color:#77cbcf
}
.cm-mw-link-bracket{
    color:#54a1b3
}
.cm-mw-extlink,.cm-mw-extlink-protocol,.cm-mw-free-extlink-protocol{
    color:#8aafe8
}
.cm-mw-extlink-bracket{
    color:#5e77c4
}
.cm-mw-section-header{
    color:#cc6969
}
.cm-mw-list{
    color:#7b9af7
}
.cm-mw-doubleUnderscore,.cm-mw-hr,.cm-mw-signature{
    color:#cda2e1;
    font-weight:bold;
    background-color:#eeeeee0d
}
.cm-mw-apostrophes-bold,.cm-mw-apostrophes-italic{
    color:#a5d54f;
    font-weight:bold
}
.cm-mw-htmltag-attribute,.cm-mw-htmltag-name{
    color:#a5d54f
}
.cm-mw-htmltag-bracket{
    color:#6dbe36
}
.cm-mw-parserfunction-name{
    color:#de9191
}
.cm-mw-parserfunction-bracket,.cm-mw-parserfunction-delimiter{
    color:#cd5858
}
.cm-mw-skipformatting{
    background-color:#68b5354f
}
.cm-mw-templatevariable-name,.cm-mw-templatevariable{
    color:#ff7a38
}
.cm-mw-table-definition{
    color:#ff59ff
}
@media only screen and (max-width: 640px){
    .InfoboxGeneric{
        width:100% !important;
        margin-left: 0 !important;
        float: none !important;
        max-width: none !important
    }
}
@media only screen and (max-width: 640px){
    .InfoboxDynamic{
        width:100% !important;
        margin-left: 0 !important;
        float: none !important;
        max-width: none !important
    }
}
.InfoboxStyle {
border-radius: 5px; 
background-color: rgba(255, 255, 255, 0.7); 
float:right; 
margin-left:10px; 
width: 35%; 
max-width: 40em; 
box-shadow: #0000003b 0 0px 7px;
}
.InfoBigText {
text-align:center; 
color: white;
border-radius: 5px; 
font-family: ARCO; 
border-bottom: 4px solid rgb(0 0 0 / 43%); 
text-shadow: 1px 0 0 #00000085,0 -1px 0 #00000085,0 1px 0 #00000085,-1px 0 0 #00000085;
font-size: 1.2em;
}
.InfoboxSmallDiv {
color:#ffffff; 
border-radius: 5px; 
border-bottom: 3.5px 
solid rgba(0, 0, 0, 0.43);
}

/* Namespace warning */
#top-notice, #top-notice-ns {
    margin-bottom: 0.6em;
    color: #8a8a8b;
    text-align: center;
    font-style: italic;
    border-bottom: 1px solid;
}

/* Gallery preview */
/* Remove checker BG*/
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
    background: inherit;
}
/* BG Color */
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
    background: #6c6c6c;
    box-shadow: #00000078 0px 0px 35px;
}
.mw-mmv-overlay {
    background-color: #545557;
}

/* Dynamic Image Size */
div.imgDynamic img {
    height: auto;
    max-width: 100%;
}


/* Rate Widget */
.ratingstar-plain {
  background-image: url(/w/images/3/3a/Icon_socket.png) !important;
}
.ratingstar-mousedown,.ratingstar-full {
  background-image: url(/w/images/8/86/Icon_star.png) !important;
}
/* Numbered Lists 1 > b > iii */
ol { 
	list-style-type: decimal; 
}
ol li > ol { 
	list-style-type: lower-alpha; 
}
ol li > ol li > ol { 
	list-style-type: lower-roman; 
}