MediaWiki:Common.css
From Drawn to Life Wiki
Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
#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;
}