MediaWiki:Common.css
From Dragon Mania Legends (DML) Wiki
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.
/* CSS placed here will be applied to all skins */
/* --- Code formatted using below with exceptions for short titles ---- */
/* - See https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS - */
/* Add rights group using Special:UserRights, then add to the appropriate groups below */
/* Bureaucrats */
a[href="/wiki/User:Kimberly"],
a[href="/wiki/User:Soukupmi"],
a[href="/wiki/User:Ophexis"],
a[href="/wiki/User:CrystalClear"],
a[href="/wiki/User:Suryebamshi1"],
a[href="/wiki/User:Star_Warden"] {
color: #aa00bb !important;
}
/* Bureaucrat Badge */
a[href="/wiki/User:Kimberly"]::after,
a[href="/wiki/User:Soukupmi"]::after,
a[href="/wiki/User:Star_Warden"]::after,
a[href="/wiki/User:Ophexis"]::after,
a[href="/wiki/User:CrystalClear"]::after,
a[href="/wiki/User:Suryebamshi1"]::after {
content : url("/w/images/thumb/2/2c/B_Icon.png/20px-B_Icon.png");
margin: 0 2px 0 6px;
position: relative;
top: 4px;
}
/* Bureaucrat history page text*/
.history-user a[href="/wiki/User:Kimberly"]::after,
.history-user a[href="/wiki/User:Soukupmi"]::after,
.history-user a[href="/wiki/User:Ophexis"]::after,
.history-user a[href="/wiki/User:CrystalClear"]::after,
.history-user a[href="/wiki/User:Suryebamshi1"]::after,
.history-user a[href="/wiki/User:Star_Warden"]::after {
content: " (Bureaucrat)";
color: #b57edc;
font-size: 85%;
top: -2px;
margin: 0;
}
/* Administrators */
a[href="/wiki/User:LoriN"],
a[href="/wiki/User:Kartattack"] {
color:#ff6700 !important;
}
/* Administrator badge */
a[href="/wiki/User:LoriN"]::after,
a[href="/wiki/User:Kartattack"]::after {
content : url("/w/images/thumb/8/8d/A_Icon.png/20px-A_Icon.png");
margin: 0 2px 0 6px;
position: relative;
top: 4px;
}
/* Administrator history page text */
.history-user a[href="/wiki/User:LoriN"]::after,
.history-user a[href="/wiki/User:Kartattack"]::after {
content: " (Administrator)";
color: #b7410e;
font-size: 85%;
top: -2px;
margin: 0;
}
/* Staff Moderators */
/* a[href="/wiki/User:Kartattack"] {
color: green !important;
} */
/* Staff Moderator Badge */
/* a[href="/wiki/User:Kartattack"]::after {
content : url("/w/images/thumb/c/cf/Mod_Icon.png/20px-Mod_Icon.png");
margin: 0px 2px 0px 6px;
position: relative;
top: 4px;
} */
/* Staff Moderator history page text */
/* .history-user a[href="/wiki/User:Kartattack"]::after {
content: " (Moderator)";
color: #228b22;
font-size: 85%;
top: -2px;
margin: 0px;
} */
/* All (Badged) Community Members text color */
a[href="/wiki/User:Panda"],
a[href="/wiki/User:Shusserata"],
a[href="/wiki/User:TaraDML"],
a[href="/wiki/User:Kassandra"],
a[href="/wiki/User:BigEarsQuake_2"] {
color: blue !important;
}
/* Community Mod Icon (rewards, auto-patrolled) */
/*a[href="/wiki/User:REPLACETHIS"]::after {
content : url("/w/images/thumb/2/22/V_Icon.png/20px-V_Icon.png");
margin: 0px 2px 0px 6px;
position: relative;
top: 4px;
}
*/
/* Community Mod history text
.history-user a[href="/wiki/User:REPLACETHIS"]::after {
content: " (Community Mod)";
color: blue;
font-size: 85%;
top: -2px;
margin: 0px;
}*/
/* Ongoing (MVP)
a[href="/wiki/User:Kartattack"]::after {
content : url("/w/images/thumb/6/6c/O_Icon.png/20px-O_Icon.png");
margin: 0 2px 0 6px;
position: relative;
top: 4px;
} */
/* Ongoing MVP history text
.history-user a[href="/wiki/User:Kartattack"]::after {
content: " (Ongoing MVP)";
color: blue;
font-size: 85%;
top: -2px;
margin: 0;
} */
/* Pro MVP (periodic repeats) */
a[href="/wiki/User:Shusserata"]::after,
a[href="/wiki/User:Panda"]::after,
a[href="/wiki/User:BigEarsQuake_2"]::after {
content : url("/w/images/thumb/0/08/P_Icon.png/20px-P_Icon.png");
margin: 0 2px 0 6px;
position: relative;
top: 4px;
}
/* Pro MVP history text */
.history-user a[href="/wiki/User:Shusserata"]::after,
.history-user a[href="/wiki/User:Panda"]::after,
.history-user a[href="/wiki/User:BigEarsQuake_2"]::after {
content: " (Pro MVP)";
color: blue;
font-size: 85%;
top: -2px;
margin: 0;
}
/* MVP (one-time) */
a[href="/wiki/User:TaraDML"]::after,
a[href="/wiki/User:Kassandra"]::after {
content : url("/w/images/thumb/2/27/M_Icon.png/20px-M_Icon.png");
margin: 0 2px 0 6px;
position: relative;
top: 4px;
}
/* MVP */
/* MVP history text */
.history-user a[href="/wiki/User:TaraDML"]::after,
.history-user a[href="/wiki/User:Kassandra"]::after {
content: " (MVP)";
color: blue;
font-size: 85%;
top: -2px;
margin: 0;
}
li #ca-nstab-user {
display:none;
}
/* ---- Format staff page tables ---- */
.bureaucrats-purple {
border:1px solid purple!important;
vertical-align:top;
}
.administrators-orange {
border:1px solid orange!important;
vertical-align:top;
}
.moderators-green {
border:1px solid green!important;
vertical-align:top;
}
.former-staff-black {
border:1px solid black!important;
vertical-align:top;
}
.bureaucrats-purple tr,
.administrators-orange tr,
.moderators-green tr,
.former-staff-black tr {
border-top: 1px solid lightgray;
padding: 0.2em 0.4em;
}
.bureaucrats-purple tbody tr td,
.administrators-orange tbody tr td,
.moderators-green tbody tr td,
.former-staff-black tbody tr td {
border: none;
}
.bureaucrats-purple tr:first-of-type,
.administrators-orange tr:first-of-type,
.moderators-green tr:first-of-type,
.former-staff-black tr:first-of-type {
border-top: none !important;
}
/* --------------- */
/* -- Community -- */
/* DML Planner */
.dml-planner-container {
background: url("/w/images/7/77/Paper_Texture.jpg") rgba(220, 211, 188, 0.35)!important;
background-blend-mode: hard-light;
border: 3px dashed rgba(88, 53, 0, 0.35);
border-radius: 1em;
padding: 1em 1.5em .5em 1.5em;
color: #623f0d;
margin: 40px -1px;
}
.dml-planner-container,
.dml-planner-container p,
.dml-planner-container td,
.dml-planner-container th,
.dml-planner-container .wikitable td,
.dml-planner-container .wikitable th {
color: #623f0d;
background: transparent;
}
.dml-planner-container .wikitable td,
.dml-planner-container .wikitable th {
border: 1px solid transparent; /* #ded5c4 editing visblty */
}
.dml-planner-container tr,
.dml-planner-container tbody,
.dml-planner-container th,
.dml-planner-container td,
.dml-planner-container .wikitable,
.dml-planner-container .wikitable p,
.dml-planner-container .wikitable tr,
.dml-planner-container .wikitable tbody,
.dml-planner-container .wikitable th,
.dml-planner-container .wikitable td {
width: 100%;
display: inline-block !important;
padding: 0!important;
}
.dml-planner-container strong {
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.2rem;
text-shadow: 1px 1px 4px white;
}
.dml-planner-container strong::after {
display: block;
content: ' ';
height: 5px;
}
.dml-planner-container ul,
.dml-planner-container ol {
margin-bottom: 3px;
}
/* ------------- */
/* -- General -- */
html {
scroll-behavior: smooth;
}
/* Hide Main Page title */
.page-Main_Page h1 {
display:none;
}
/* Hide subpage bread crumbs */
span .subpages {
display: none;
}
/* -- Grobold -- */
@font-face {
font-family: 'grobold';
src: url("/w/images/5/50/Grobold.woff2") format('woff2'), /* Super Modern Browsers */
url("/w/images/5/50/Grobold.woff") format('woff'); /* Pretty Modern Browsers */
/* font-display: block; outdated? */
}
/* Root font size, all values resize in relation, all themes */
html {
font-size:16px;
}
/* Global cursor */
body {
cursor: url("/w/images/1/1a/Cursor_Icon.png"), pointer;
}
/* Link cursor */
a:hover,
label {
cursor: url("/w/images/f/f4/Indicator_Arrow_Icon.png"), pointer;
}
body {
background: url("/w/images/d/de/DMLWIKI-Background-Initial-Size.jpg") no-repeat left top fixed;
background-size: cover;
}
/* Allow centered tables */
div.centered,
table.centered,
ul.centered,
.centered {
margin-left: auto;
margin-right: auto;
}
.thumbinner {
border: transparent;
padding: 3px !important;
background-color: transparent;
font-size: 94%;
text-align: center;
overflow: hidden;
}
h2, h3, h4, h5, h6,
.mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}
#firstHeading {
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
letter-spacing: 1px;
}
pre {
padding: 1em;
}
pre, code, tt, kbd, samp, .mw-code {
font-family: monospace,"Courier New",Courier;
font-size: smaller;
}
hr {
margin: inherit;
}
ul.gallery {
text-align: center;
}
input#searchInput {
height:20px;
}
ul, ol, dl {
font-size: inherit;
line-height: inherit;
}
dl {
margin-top: 0.2em;
margin-bottom: 0.5em;
}
ol.references {
font-size: .8em;
margin-bottom: .5em!important;
}
.codebox {
font-family: monospace,"Courier New",Courier;
border: 1px solid #d7d7d7;
color: #000;
background-color: #fff;
padding: 15px;
border-radius: 2px !important;
}
.codebox,
.codebox ul,
.codebox ul li,
.codebox p {
font-size: 14px!important;
}
button:hover, button:focus, .button:hover, .button:focus {
background-color: #fde5bc;
}
div.hidden,
div.hidden ul,
div.hidden ul {
display:none;
}
.thumbinner {
width: auto!important;
}
/* Image error, text smaller */
div.MediaTransformError {
max-width: 50px;
font-size: 12px;
}
/* __HIDDENCAT__ links */
.mw-hidden-catlinks {
display:none;
}
.mw-hidden-cats-user-shown {
display:inline;
}
/* Either VE or 1.35 specific */
.mw-editsection-bracket {
margin-left: 1px!important;
margin-right: 1px!important;
}
/* External link arrow not present in Pivot */
.mw-parser-output a.external {
background-image: url("/w/images/3/32/External_Link_Icon.png");
background-position: center right;
background-repeat: no-repeat;
background-size: 0.857em;
padding-right: 1em;
}
/* Editor and view source text in Monospace */
.wikiEditor-ui-text,
.mw-editfont-monospace,
#mw-content-text > textarea {
font-family: monospace, "Courier New", Courier;
}
.mw-body-content,
.mw-body-content p {
line-height: 1.5;
}
#mw-content-text {
font-size: 1rem;
}
.mw-history-histlinks {
margin-right:10px;
}
/* Allow tables with .wide to be 100% */
wide {
width:100%!important;
}
.wide tbody,
.wide tr,
.wide th {
display:inherit!important;
}
/* make non-wikitable captions not shrink, and not align-center */
table caption {
width:100%;
text-align:left;
}
/* No bottom margin on scrolling tables */
.scroll-all table.wikitable {
margin-bottom:0;
}
/* -- Wikitables to scroll not shrink -- */
table.wikitable,
.table-milestones,
.mw-collapsible {
/* use 'display:table;' inline for normal table display */
display: block;
max-width: 100%;
overflow-x: auto;
}
/* end Tables to scroll */
/* -- Invisible wikitable --*/
.no-border,
.no-border > * > tr > td,
.no-border > * > tr > th {
border: 0!important;
background:unset!important;
/* background-color:#f6f6f6!important; */
}
table.no-border td {
padding-right: 1.5em;
}
table.no-border td ul {
margin:0.2em 0.2em 0 1.3em;
}
/* Collapsible table toggle button spacing */
.mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
margin-left: 20px;
}
/* Editor buttons too large, reduce padding */
.wikiEditor-ui-buttons button {
margin-left: 0.5em;
padding: 8px;
}
/* Remove print cuttoff line in CSS editing view */
.ace_print-margin {
display: none;
}
.label {
background-color: unset;
}
/* --------------- */
/* -- Templates -- */
.themeFont a {
color:white;
}
.roundy {
border-radius: 10px;
}
.dmlcolumns ul {
margin-top: 0px!important;
margin-bottom: 0px!important;
}
.dmlcolumns ul li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.leaderboard-table {
border-spacing: 0 3px;
border-collapse: separate;
vertical-align:middle;
width:100%;
width:auto;
max-width:700px;
color:white;
font:18px Grobold, sans-serif;
background: #dfdfdf;
text-shadow:1px 1px #222222;
line-height:2.2em;
}
.leaderboard-table th {
min-width:100px;
background: #595959;
text-align:center;
}
.leaderboard-table td {
padding: 0 1em;
background: #a8a8a8;
}
.leaderboard-table a {
color: white;
text-decoration: underline;
}
.leaderboard-table img {
position: relative;
bottom: 5px;
}
.dml-quote::before {
font-family: 'Times New Roman', serif;
content: "\201C";
font-size: 55px;
color: #e8e8e8;
position: absolute;
left: 10px;
top: -15px;
font-weight: bold;
}
.dml-quote {
display: flex;
margin:20px auto;
font-style:italic;
color:#555555;
padding:.8em 75px .8em 75px;
border-left: 5px solid #dbdbdb;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
line-height:1.6;
position:relative;
background:white;
}
.dml-quote::after {
font-family: 'Times New Roman', serif;
content: '\201D';
font-size: 55px;
color: #e8e8e8;
position: absolute;
right: 36px;
bottom: -30px;
font-weight: bold;
display: none;
}
/* alternative */
.dml-quote-2::before {
font-family: 'Times New Roman', serif;
content: "\201C";
font-size: 55px;
color: #e8e8e8;
position: absolute;
left: 10px;
top: -15px;
font-weight: bold;
}
.dml-quote-2 {
display: flex;
margin:20px auto;
font-style:italic;
color:#555555;
padding:.8em 75px .8em 75px;
border-left: 5px solid #dbdbdb;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
line-height:1.6;
position:relative;
background:white;
}
.dml-quote-2 p {
margin-bottom: unset;
}
.dml-quote-3 {
display: flex;
margin:20px auto;
font-style:italic;
color:#555555;
padding:.8em 45px .8em 45px;
border-left: 5px solid #dbdbdb;
/* border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8; */
line-height:1.6;
position:relative;
background:white;
}
/* Collapsible template */
.dml-collapsetoggle-clear > .mw-collapsible-toggle {
width: 100%;
text-align: right;
}
.toc-template {
float:right;
margin:0 0 1em 1em;
}
.toc-template .toc {
min-width: 200px;
}
.dml-decorations img {
max-height: 80px;
width: auto;
}
/* -- SliderRight --*/
.table-slider {
background-color: #e7e7e7;
border: 1px solid darkgray;
display: block;
overflow-x: scroll;
}
.table-slider tr:first-of-type {
padding-top: 15px;
}
.table-slider tr:last-of-type {
padding-bottom: 17px;
}
.slider-right {
width:140px;
text-align: center;
/* font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
font-size: 0.9rem;
line-height: 1rem;
padding: 10px 3px 3px 3px;
position:relative; /* to position before/after arrows relative to */
margin-right: 5px;
margin-left: 5px;
}
.slider-event a,
.slider-event a:visited {
color:white
}
.slider-event img {
max-height: 124px;
width: auto;
}
.slider-bgimg-arcade,
.slider-bgimg-cake-craze,
.slider-bgimg-calendar,
.slider-bgimg-chain-breeding,
.slider-bgimg-clan,
.slider-bgimg-collection,
.slider-bgimg-dragon-dice,
.slider-bgimg-feeding,
.slider-bgimg-food-gathering,
.slider-bgimg-gem-spending,
.slider-bgimg-generic,
.slider-bgimg-gold-collecting,
.slider-bgimg-gold-spending,
.slider-bgimg-movie-marathon,
.slider-bgimg-relay,
.slider-bgimg-sigil-campaign,
.slider-bgimg-solo,
.slider-bgimg-treasure-hunt {
background-image:linear-gradient(#f1d75f,#dda739);
background-color: #f1d75f;
background-size: 162px auto;
background-repeat: no-repeat;
background-clip: content-box;
}
/* /images/3/3d/Event_Slider_Bottomless_Dungeon.jpg */
/* /images/c/c3/Event_Slider_Boss_Challenge.jpg */
/* /images/c/c2/Event_Slider_Heroe's_Challenge.jpg */
/* /images/0/03/Event_Slider_Otto's_Lotto.png */
.slider-bgimg-arcade {
background-image: url("/w/images/5/5f/Event_Slider_Arcade.jpg");
}
.slider-bgimg-cake-craze {
background-image: url("/w/images/b/b5/Event_Slider_Cake_Craze.jpg");
}
.slider-bgimg-calendar {
background-image: url("/images/d/de/Event_Slider_Calender.jpg");
}
.slider-bgimg-chain-breeding {
background-image: url("/w/images/0/0b/Event_Slider_Chain_Breeding.jpg");
}
.slider-bgimg-clan {
background-image: url("/w/images/4/4e/Event_Slider_Clan.jpg");
}
.slider-bgimg-collection {
background-image: url("/w/images/5/5a/Event_Slider_Collection.jpg");
}
.slider-bgimg-dragon-dice {
background-image: url("/w/images/a/aa/Event_Slider_Dragon_Dice.jpg");
}
.slider-bgimg-feeding {
background-image: url("/w/images/5/53/Event_Slider_Feeding.jpg");
}
.slider-bgimg-food-gathering {
background-image: url("/w/images/9/93/Event_Slider_Food_Gathering.jpg");
}
.slider-bgimg-gem-spending {
background-image: url("/w/images/e/e0/Event_Slider_Gem_Spending.jpg");
}
.slider-bgimg-generic {
background-image: url("/w/images/4/42/Event_Slider_Generic.jpg");
}
.slider-bgimg-gold-collecting {
background-image: url("/w/images/0/04/Event_Slider_Gold_Collecting.jpg");
}
.slider-bgimg-gold-spending {
background-image: url("/w/images/0/07/Event_Slider_Gold_Spending.jpg");
}
.slider-bgimg-movie-marathon {
background-image: url("/w/images/8/8d/Event_Slider_Movie_Marathon.jpg");
}
.slider-bgimg-relay {
background-image: url("/w/images/c/c3/Event_Slider_Boss_Challenge.jpg");
}
.slider-bgimg-sigil-campaign {
background-image: url("/images/2/20/Event_Slider_Sigil_Campaign.jpg");
}
.slider-bgimg-solo {
background-image: url("/w/images/8/8e/Event_Slider_Solo.jpg");
}
.slider-bgimg-treasure-hunt {
background-image: url("/w/images/0/09/Event_Slider_Treasure_Hunt.jpg");
}
/* BreedingChain */
table .breedchain {
text-align:center;
}
.breedchaincol1 img {
max-height: 60px;
width: auto;
}
.breedchaincol2 img {
max-height: 100px;
width: auto;
}
.breedchaincol3 img {
max-height: 150px;
width: auto;
}
/* Background images */
.dragons-hoard {
background-image: url("/w/images/e/eb/Dragons_Hoard_Event_Background.jpg");
background-size: cover;
}
.dungeon-foyer {
background-image: url("/w/images/e/e2/Bottomless_Dungeon_Foyer_Background.jpg");
background-size: cover;
}
.table-slider .dragons-hoard .slider-right {
margin-top: 40px;
margin-bottom: 40px;
}
.main-screen {
background-image: url("/w/images/4/4d/Main_Screen_Background.jpg");
background-size: cover;
}
/* -- Milestones -- */
.divine-milestones,
.milestones {
min-width: 200px!important;
background-color: #e7e7e7;
padding: 10px 5px;
border: 1px solid darkgray;
display: flex;
overflow: auto;
width: auto;
max-width: fit-content;
}
/* ---- Milestone at top ---- */
.milestone-top,
.milestone-top-purple,
.milestone-top-orange,
.milestone-top-yellow,
.milestone-top-grey,
.milestone-top-gray,
.milestone-top-green,
.milestone-top-greenfill,
.milestone-bottom,
.milestone-bottom-purple,
.milestone-bottom-orange,
.milestone-bottom-yellow,
.milestone-bottom-grey,
.milestone-bottom-gray,
.milestone-bottom-green,
.milestone-bottom-greenfill {
width:110px;
height:100px;
background-color:#fff;
text-align: center;
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.9rem;
line-height: 1rem;
padding: 8px 3px 3px 3px;
border: 3px solid #f5cd13;
box-shadow: 2px 2px 2px #888888;
position:relative; /* to position before/after arrows relative to */
margin-right: 5px;
margin-left: 5px;
}
.divine-milestones img,
.milestones img {
vertical-align: text-bottom;
}
.milestone-bottom img,
.milestone-top img {
max-height: 55px;
width: auto;
}
/* Milestone border default color */
.milestone-bottom {
border-color: #b35ba2;
}
/* Override top milestone fill color when greenfill */
.milestone-top-greenfill,
.milestone-bottom-greenfill {
background-color:#cce3c5;
}
/* Override top milestone border color when chosen */
.milestone-top-grey,
.milestone-top-gray,
.milestone-bottom-grey,
.milestone-bottom-gray {
border-color: #717171!important;
}
.milestone-top-purple,
.milestone-bottom-purple {
border-color: #b35ba2!important;
}
.milestone-top-green,
.milestone-bottom-green,
.milestone-top-greenfill,
.milestone-bottom-greenfill {
border-color: #4fc545!important;
}
/* Top Milestone ▽ Triangle Outline (2 triangles ao get outline/inner */
.milestone-top::before,
.milestone-top-purple::before,
.milestone-top-orange::before,
.milestone-top-yellow::before,
.milestone-top-orange::before,
.milestone-top-grey::before,
.milestone-top-gray::before,
.milestone-top-green::before,
.milestone-top-greenfill::before {
content: "";
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #f5cd13 transparent transparent transparent;
right: 40.5%;
bottom: -20px; /* Position of orange triangle/outline */
}
/* Override outline color when chosen */
.milestone-top-purple::before,
.milestone-bottom-purple::before {
border-color: #b35ba2 transparent transparent transparent!important;
}
.milestone-top-orange::before,
.milestone-bottom-orange::before,
.milestone-top-yellow::before,
.milestone-bottom-yellow::before {
border-color: #f5cd13 transparent transparent transparent!important;
}
.milestone-top-grey::before,
.milestone-bottom-grey::before,
.milestone-top-gray::before,
.milestone-bottom-gray::before {
border-color: #717171 transparent transparent transparent!important;
}
.milestone-top-green::before,
.milestone-bottom-green::before {
border-color: #4dc63d transparent transparent transparent!important;
}
.milestone-top-greenfill::before,
.milestone-bottom-greenfill::before {
border-color: #4dc63d transparent transparent transparent!important;
}
/* Top Milestone Triangle ▼ Inner (2 triangles to get outline/inner) */
.milestone-top::after,
.milestone-top-purple::after,
.milestone-top-orange::after,
.milestone-top-yellow::after,
.milestone-top-grey::after,
.milestone-top-gray::after,
.milestone-top-green::after,
.milestone-top-greenfill::after {
content: "";
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #fff transparent transparent transparent;
right: 40.5%;
bottom: -14px; /* Position of white inner-triangle/outline */
}
/* Override inner color when chosen */
.milestone-top-greenfill::after {
border-color: #cce3c5 transparent transparent transparent!important;
}
/* -- Milestone at Bottom -- */
/* BOTTOM Milestone */
.milestone-bottom::before,
.milestone-bottom-purple::before,
.milestone-bottom-orange::before,
.milestone-bottom-yellow::before,
.milestone-bottom-grey::before,
.milestone-bottom-gray::before,
.milestone-bottom-green::before,
.milestone-bottom-greenfill::before {
content: "";
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #b35ba2 transparent;
right: 40.5%;
top: -20px; /* Position of orange triangle/outline */
}
/* Override border colors when chosen */
.milestone-bottom-purple::before {
border-color: transparent transparent #b35ba2 transparent!important;
}
.milestone-bottom-orange::before,
.milestone-bottom-yellow::before {
border-color: transparent transparent #f5cd13 transparent!important;
}
.milestone-bottom-grey::before,
.milestone-bottom-gray::before {
border-color: transparent transparent #717171 transparent!important;
}
.milestone-bottom-green::before,
.milestone-bottom-greenfill::before {
border-color: transparent transparent #4dc63d transparent!important;
}
/* BOTTOM ▽ Triangle Outline (2 triangles ao get outline/inner) */
/* Bottom Milestone Triangle ▼ Inner (2 triangles are used to get Outline and Inner) */
.milestone-bottom::after,
.milestone-bottom-purple::after,
.milestone-bottom-orange::after,
.milestone-bottom-yellow::after,
.milestone-bottom-grey::after,
.milestone-bottom-gray::after,
.milestone-bottom-green::after,
.milestone-bottom-greenfill::after {
content: "";
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 0 10px 18px 10px;
border-color:transparent transparent #fff transparent;
right: 40.5%;
top: -14px; /* Position of white inner-triangle/outline */
}
/* Override inner when set */
.milestone-bottom-greenfill::after {
border-color: transparent transparent #cce3c5 transparent!important;
}
/* Milestone timeline */
.milestone-timeline {
background-color: #a8a8a8;
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
text-align: center;
text-shadow: 0 0 2px #000000;
padding-top: 3px;
padding-bottom: 3px;
height: 31px;
}
.table-milestones tr:first-of-type {
padding-top: 15px;
}
.table-milestones tr:last-of-type {
padding-bottom: 17px;
}
.table-milestones {
/* use 'display:table;' inline for normal table display */
display: block;
max-width: 100%;
overflow-x: auto;
}
/* ---- Side infoboxes ---- */
.side-infobox ol,
.side-infobox ul {
list-style-type: none;
}
.side-infobox {
width: 300px;
float:right;
margin-left: 2em!important;
margin-left: 2em!important;
min-width:270px;
margin-bottom: 2em;
position:relative;
z-index:2;
}
.side-infobox table {
max-width:500px;
}
.side-infobox p {
margin-bottom: 5px;
padding-top: 4px;
}
.gallery-infobox span .oo-ui-iconElement-icon .oo-ui-icon-imageGallery {
display:none;
}
/* -- Dragonbox/infobox heading styles -- */
.dragonbox-header-links {
font-family: 'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;
color:#fff;
font-size: 1.3rem;
letter-spacing: 1px;
text-shadow: 1px 1px #000000;
font-weight: bold;
}
.dragonbox-header-links > a,
.dragonbox-header-links > a:hover {
color:#fff;
}
/* --------- */
/* -- New -- */
.DragonboxProfile span {
width: 100%;
position: relative;
bottom: 0;
text-align: center;
}
.DragonboxProfile {
text-align:center;
align-self: flex-end;
}
.DragonboxProfile div span:active {
text-decoration:underline;
}
.DragonboxProfile a img {
height: auto!important;
max-width: 72px!important;
max-height: 60px;
width: auto;
}
.dragonAdult img {
max-height:300px;
width: auto;
}
.DragonboxProfile a.new {
font-size:small;
}
.legend {
font-size: 0.9em;
}
.NavSubpage {
font-weight:bold;
background-color:white;
}
.NavSubpage .mw-selflink {
color: white!important;
background-color: #0078a0;
border-top: 1px solid #0078a0;
border-bottom: 1px solid #0088a0;
border: 1px solid #0078a0!important;
}
.NavSubpage a.mw-selflink:hover {
color:white!important;
border: 1px solid #0078a0!important;
}
.NavSubpage tr td {
padding: 0;
text-align: center;
width: 25px;
}
.NavSubpage a {
color: #008CBA;
background-color: white;
padding: 4px 7px;
padding: 4px 8px;
border-left: 1px solid #92b2bc;
border-top: 1px solid #92b2bc;
border-bottom: 1px solid #92b2bc;
border-right: 0;
}
.NavSubpage td:last-of-type a {
border-right: 1px solid #92b2bc;
}
.NavSubpage a:hover {
color: #ec8504!important;
}
/* -- Dragonbox Gallery -- */
/* Wrap gallery in a div class="gallery-med" */
.gallery-med {
height: 400px;
width: 273px!important;
}
.gallery-med img,
.gallery-med .mw-gallery-slideshow-img-container { /* use on div wrapped around gallery to limit height */
max-height:200px;
}
.gallery-med .mw-gallery-slideshow-img-container {
min-height:200px;
}
.gallery-med .gallery li.gallerybox div.thumb {
font-size: 12px;
max-height:50px!important;
}
/* Wrap gallery in a div class="gallery-med" */
.gallery-lg img { /* use on div wrapped around gallery to limit height */
max-height:300px;
}
/* Adjustments to only galleries with .gallery-infobox class */
.gallery-infobox > ul .gallery .mw-gallery-slideshow {
margin-bottom: 1em!important; /* gallery thumbnails hidden */
}
.gallery-infobox .mw-gallery-slideshow-caption {
}
.gallery-infobox > ul > li .mw-gallery-slideshow-thumbnails-toggled {
margin-bottom: 0; /* no margin between img and thumbs when thumbs visible */
}
.gallery-infobox ul .gallery .mw-gallery-slideshow .gallerycarousel .mw-gallery-slideshow-thumbnails-toggled {
margin-bottom: 0.2em; /* small margin below thumbnails when visible */
}
ul.gallery .mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {
margin: 0.2em;
}
.mw-gallery-slideshow-buttons {
margin: 0.2em;
}
/* .gallery-infobox span.oo-ui-iconElement-icon.oo-ui-icon-imageGallery {
display: unset!important;
} */
/* --------------- */
/* -- Galleries -- */
/* New gallery (mode=slideshow) styles */
/* Wrap gallery in a div class="gallery-sm" */
.gallery-sm img { /* use on div wrapped around gallery to limit height */
max-height:100px;
}
/* Wrap gallery in a div class="gallery-med" */
.gallery-med img { /* use on div wrapped around gallery to limit height */
max-height:200px;
}
/* Wrap gallery in a div class="gallery-med" */
.gallery-lg img { /* use on div wrapped around gallery to limit height */
max-height:300px;
}
/* Fix broken thumbnails when showthumbnails is set as parameter on slideshow */
li.gallerybox {
display: inline-block;
}
/* ---- Slideshow gallery ---- */
/* Thumbnails, reduce padding and thus height */
.side-infobox li.gallerybox > div > div.thumb > div {
margin:0.5em auto!important;
}
/* Reduce gallerytext size and make bold */
.side-infobox .gallerytext p {
font-size: 0.8rem!important;
font-weight: bold;
}
/* Align thumbs to the bottom so text lines up - all galleries*/
li.gallerybox {
vertical-align: bottom;
}
/* Adjustments to only galleries with .gallery-infobox class */
.gallery-infobox ul .gallery .mw-gallery-slideshow {
margin-bottom: 1em!important; /* gallery thumbnails hidden */
}
.gallery-infobox .mw-gallery-slideshow-caption {
display:none; /* Don't need captions below img and thumbs */
}
.gallery-infobox > ul > li.mw-gallery-slideshow-thumbnails-toggled {
margin-bottom: 0; /* no margin between img and thumbs when thumbs visible */
}
.gallery-infobox ul .gallery .mw-gallery-slideshow .gallerycarousel .mw-gallery-slideshow-thumbnails-toggled {
margin-bottom: 0.2em; /* small margin below thumbnails when visible */
}
/* ecPacks */
.wikitable .ecPacks tbody tr th,
.wikitable .ecPacks tbody tr td,
.ecPacks tbody tr th,
.ecPacks tbody tr td {
vertical-align: bottom;
text-align: center !important;
}
/* shop image filter buttons */
.shop-filters tbody tr td {
vertical-align: bottom;
}
.shop-filters tbody tr td p {
margin:unset;
}
div.shop-filters {
display: flex;
align-items: end;
flex-wrap: wrap
}
/* DML Calendar */
.calendar-light a.fc-title:active,
.calendar-light a.fc-title:visited {
color: black;
}
.calendar-light a.fc-event:hover {
color: #333 !important;
}
.calendar-light .fc-today {
background: #eee !important;
}
.calendar-light table:first-child {
background:white;
}
.wikitable .dml-calendar {
background-color: #ebc01b;
text-align: center;
}
.wikitable .dml-calendar > tr > th,
.wikitable .dml-calendar > * > tr > th {
color:#fff;
background-color: #ebc01b;
}
.wikitable .dml-calendar > tr > td,
.wikitable .dml-calendar > * > tr > td {
height: 120px;
font-size: 0.8rem!important;
min-width: 110px;
vertical-align: bottom;
border-top: #ebc01b;
padding-bottom: 5px;
}
.wikitable .dml-calendar > tr > td img,
.wikitable .dml-calendar > * > tr > td img {
max-width: 90px;
}
/* Header rows */
table .wikitable .dml-calendar > * > tr > th {
border-bottom:#ebc01b;
}
.wikitable .dml-calendar > * > tr > td.purple {
background-color:#a634e4!important;
}
.wikitable .dml-calendar > * > tr > th.purple {
background: linear-gradient(to bottom,rgb(216,132,241) 0%,rgb(134,40,218) 100%);
}
.wikitable .dml-calendar > * > tr > td.ltblue {
background-color:#52a2eb!important;
}
.wikitable .dml-calendar > * > tr > th.ltblue {
background: linear-gradient(to bottom,rgb(150, 203, 252) 0%,rgb(33, 147, 252) 100%);
}
/* Text + links for purple cells white */
.wikitable .dml-calendar > tr > td.purple,
.wikitable .dml-calendar > tr > td.purple a,
.wikitable .dml-calendar > * > tr > td.purple,
.wikitable .dml-calendar > * > tr > td.purple a,
.wikitable .dml-calendar > tr > td.ltblue,
.wikitable .dml-calendar > tr > td.ltblue a,
.wikitable .dml-calendar > * > tr > td.ltblue,
.wikitable .dml-calendar > * > tr > td.ltblue a {
color: #fff!important;
vertical-align: bottom;
padding-top: 10px;
}
.wikitable .dml-calendar > tr > th span,
.wikitable .dml-calendar > * > tr > th span {
color: #000;
font-weight:normal;
}
/* DML Calendar day */
.cal-day {
background:white;
border-collapse:collapse;
border-style: hidden; /*Hides standard (collapsed) border*/
border-radius: 6px;
display:block;
float:left;
margin:20px 10px 15px 10px;
font-size:.8em;
counter-reset:count-calendar;
}
.cal-day caption {
height: 1px;
}
.cal-day-day {
position:relative;
height:35px;
width:35px;
display:inline-block;
text-align:center;
color:white;
font-family:'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
top:-21px;
left:27px;
font-size:1rem;
padding-top:5px;
text-shadow: 1px 1px #444;
}
.cal-day p {
font-size: 0.8rem !important;
margin-bottom: 0;
text-align: center;
}
.cal-day-day::before {
/* counter-increment: ct-calendar; // move to inline instead, Increment the value of ct-calendar by 1 */
content: counter(ct-calendar); /* Display the value of ct-calendar where the class cal-day-day is */
}
.cal-day .deco .deco-label {
display:none;
}
/* Generic Counters */
/* Incrementing to go in the template(s) itself/themselves instead of Common.css */
.ct-1::before {
content: counter(ct-1); /* Display the value of ctt-1 */
}
.ct-2::before {
content: counter(ct-2);
}
.ct-3::before {
content: counter(ct-3);
}
.ct-4::before {
content: counter(ct-4);
}
.ct-5::before {
content: counter(ct-5);
}
/* -------------------- */
/* -- Specific Pages -- */
/* FAQ page styles */
table.tbl-blue {
margin: 0!important;
}
table.tbl-blue tbody tr th {
background-color: #d5e4f7 !important;
padding: 5px 10px!important;
color:black!important;
}
table.tbl-blue tbody tr th a,
table.tbl-blue tbody tr th a:hover {
color:black!important;
}
table.more-padding tbody tr td {
padding: 10px 15px!important;
}
table.tbl-wide {
display: inline-table!important;
max-width: 1000px!important;
width: 100%;
}
.expandCollapse-button {
float:right;
}
/* Recent Changes legend */
.mw-changeslist-legend dd,
.mw-changeslist-legend dt {
font-size: 0.8em;
}
/* Margin on Recent table too large */
table.mw-enhanced-rc {
border: 0;
border-spacing: 0;
margin-bottom: 0.2em;
}
/* Force DOTW/DOTM collapsible table header text to not be nasty red color */
.wikitable.mw-collapsible tr:first-of-type th {
color:#fff;
background-color: #999;
}
.mw-collapsible tr:first-of-type th a,
.mw-collapsible tr:first-of-type th a:hover {
color:#fff;
}
/* -- Main page boxes -- */
.recent-dragons a img {
max-height: 175px;
width: auto;
}
/* Element table icons too high */
.element-table tbody tr th sup a.image img {
position: relative;
top: 4px;
}
.ltd-countdown div.floatright,
.ltd-countdown div.floatright img {
margin-left:0.2em!important;
}
.white-inner .ltd-countdown {
padding-bottom:0;
}
/* Dev items */
.mainpg-ltd-dragons .small-6,
.mainpg-community-corner .small-6,
.mainpg-ltd-dragons .large-4,
.mainpg-community-corner .large-4 {
width:33.3%;
}
.mainpg-ltd-dragons .small-12,
.mainpg-community-corner .small-12,
.mainpg-ltd-dragons .large-4,
.mainpg-community-corner .large-4 {
float: left!important;
}
.ltd-countdown-dev {
position: relative;
height: 237px;
}
.ltd-dragon-dev {
}
.ltd-countdown-dragon {
height:146px;
}
.ltd-countdown-dragon img {
max-height: 146px;
width: auto;
}
.ltd-dragon-text {
position:absolute;
bottom: 10px;
text-align: center;
width:100%;
font-size:0.8rem;
line-height: 0.8rem;
}
.ltd-dragontext-dev p {
margin-bottom: 0px!important;
}
.mainpg-ltd-dragons,
.mainpg-community-corner {
padding-left:0;
clear: both;
background-color:#f0bf11;
border-right: 5px solid #f6f6f6;
padding-right:0;
display:flex;
}
.mainpg-ltd-dragons .orange-box,
.mainpg-community-corner .orange-box {
flex: 1;
height: 100%;
}
.mainpg-ltd-dragons .small-6.large-4,
.mainpg-community-corner .small-6.large-4,
.mainpg-ltd-dragons .small-12.large-4,
.mainpg-community-corner .small-12.large-4 {
margin:0px!important;
padding: 0px!important;
flex:1;
}
.mainpg-ltd-dragons .small-6.large-4 .orange-box,
.mainpg-community-corner .small-6.large-4 .orange-box {
border-right:0px!important;
padding-right:4px;
height:100%;
}
.mainpg-community-corner .white-inner {
height:365px;
}
/* Event items dev */
.mainpg-event-box {
width:200px;
height:200px;
position:relative;
float:left;
text-align:center;
}
.mainpg-event-background {
position:relative;
width: 140px;
height: 140px;
border: 5px solid #c0c0c0;
border-radius: 50%;
padding: 15px;
margin:0 auto;
}
.mainpg-event-vip {
position: absolute;
bottom: -9px;
left: -9px;
}
.mainpg-event-title {
position:absolute;
bottom:26px;
left:10px;
font-size:0.9rem;
width:190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mainpg-event-time {
position:absolute;
bottom:3px;
left:10px;
font-size:0.8rem;
width:190px;
}
.mainpg-event-box-hz {
position:relative;
margin-bottom:20px;
display:table;
}
.mainpg-event-box-hz img {
max-width:60px!important;
transition: all .3s ease-in;
}
.mainpg-event-box-hz img:hover {
transform: rotate(20deg);
}
.mainpg-event-vip-hz {
position: absolute;
bottom: -9px;
left: -9px;
}
.mainpg-event-title-hz {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
}
.mainpg-event-title-hz p {
margin-bottom:0!important;
}
/* Mainpage Grid */
.row {
max-width: none;
}
.row .row {
max-width: 1300px;
}
div.tright {
margin-left: 0!important;
}
/* ---- Unclear if below styles are still used ---- */
.infotextwidget {
background-color:rgba(255,255,255,0.5);
border-color:rgba(255,255,255,0.7);
border-style:solid;
border-width:2px;
border-radius:10px;
text-align:center;
font-size:24px;
font-weight:600;
position:relative;
}
.textwidget, .cd {
padding:5px;
background-color:rgba(255,255,255,0.5);
border-color:rgba(255,255,255,0.7);
border-style:solid;
border-width:2px;
border-radius:10px;
text-align:center;
position:relative;
overflow:hidden;
}
.textwidget {
width: 100%;
}
.textwidget2 {
padding:5px;
background-color:#FBAC33;
border-color:#FDFF00;
border-style:solid;
border-width:2px;
border-radius:10px;
text-align:center;
position:relative;
overflow:hidden;
}
.intothing {
box-shadow:0 0 15px white inset;
border: 3px solid #8a8;
border-color:#F0BF11;
margin-top: 0.2em;
padding: 0.2em;
text-align: center;
}
.intothing2 {
box-shadow:0 0 15px white inset;
width: 50%;
border-style:solid;
border-color:#858585;
border-radius:10px;
border-width:10px 0 10px 0;
position:relative;
padding:4px;
}
.intothing3 {
box-shadow:0 0 15px white inset;
width: 65%;
border-style:solid;
border-color:#F0BF11;
border-radius:10px;
border-width:10px 0 10px 0;
position:relative;
padding:1px;
}
.intothing4 {
background-color:#F69705;
box-shadow:0 0 15px white inset;
width: 65%;
border-style:solid;
border-color:#FBAC33;
border-radius:10px;
border-width:10px 0 10px 0;
position:relative;
padding:4px;
}
/* ---- End unclear if still used ----*/
/* ------- Fixed header scrolling tables ------- */
/* ---- DO NOT CHANGE STUFF IN THIS SECTION ---- */
/*---------------------------------------------- */
/* Fixed Header Wiki Table Styles */
.fixed_header {
table-layout: fixed;
border-collapse: collapse;
width:fit-content!important; /* 1.35+ */
}
.fixed_header tbody {
display:block;
/* width: 100%; */
/* overflow: auto; */ /* causes double scroll now */
height: 800px;
-webkit-overflow-scrolling: touch;
width: fit-content;
}
.fixed_header tbody tr:nth-child(even) {
background-color: #f3f3f3;
}
.fixed_header thead tr {
display: block;
}
.fixed_header thead {
/* background: black; */
color:#fff;
}
.fixed_header th, .fixed_header td {
/* padding: 5px; */
text-align: left;
/* width: 200px;*/
}
.fixed_hr,
.wikitable .fixed_hr {
border-collapse: separate!important;
display:block;
height: 800px;
-webkit-overflow-scrolling: touch;
width: fit-content!important;
border-spacing: 0;
}
.fixed_hr tr:nth-child(even) {
background-color: #f3f3f3;
}
.fixed_hr th {
position:sticky;
top:0;
border-top: 1px solid;
border-bottom: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
border-left: unset!important;
}
.fixed_hr td {
/* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
border-bottom: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
border-top:unset!important;
border-left: unset!important;
}
.fixed_hr th:first-child,
.fixed_hr td:first-child {
/* Apply a left border on the first <td> or <th> in a row */
border-left: 1px solid #a2a9b1!important;
}
/* -- New styles --*/
.table-container {
height: 800px;
border: solid 1px #cccccc;
margin: 10px auto;
background: #FFF;
padding-top: 50px;
overflow: hidden;
}
.table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
.table-header-fixed {
width: 100%;
background: #FFF;
overflow-x: hidden;
overflow-y: auto;
}
/* --------------------- */
/* -- Reusable Styles -- */
.center {
text-align: center!important;
}
span.flip img {
display: inline-block;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
span.flip-v img {
display: inline-block;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.no-padding,
table.no-padding tr td,
table.no-padding > * > tr > td {
padding:0!important;
}
.no-lrpadding {
padding-left:0px!important;
padding-right:0px!important;
}
.no-tbpadding {
padding-top:0px!important;
padding-bottom:0px!important;
}
.no-margins {
margin: 0px!important;
}
.uppercase {
text-transform:uppercase;
}
.capitalize {
text-transform:capitalize!important;
}
.lowercase {
text-transform:lowercase!important;
}
.none,
.text {
text-transform:none!important;
}
.full-width {
width:100%;
}
.table-dotted-lines tr {
border-top-style: dotted;
border-top-width: 2px;
border-top-color: #a0ceff;
}
/* Notices */
.unreleased {
position:relative;
width: 70%;
height: auto;
min-height: 110px;
line-height: 1.5em;
text-align: center;
border-top: 10px solid #ccc;
border-bottom: 10px solid #ccc;
padding: 10px 20px 10px 20px;
border-radius: 10px;
background-color: #e6e5e5;
-webkit-box-shadow: -1px 1px 4px 0 rgba(101,101,101,0.75);
-moz-box-shadow: -1px 1px 4px 0 rgba(101,101,101,0.75);
box-shadow: -1px 1px 4px 0 rgba(101,101,101,0.75);
margin:0 auto 30px auto;
}
.unreleased a {
font-weight: bold;
}
.unreleased .floatleft {
margin-top: -10px;
}
/* layers on top of unreleased style, changes border + bg color */
/* orange */
.uncertain,
.orangenotice {
background-color: #f2bc5a!important;
border-color: #e69402!important;
}
.orangenotice::before {
color:grey;
}
/* salmon/pink/red */
.bug {
background-color:#f3c2b7!important;
border-color:#e89481!important;
}
/* grey */
.inprogress {
background-color:#e6e5e5!important;
border-color:#cccccc!important;
}
/* blue */
.apolloed {
background-color:#99d2cf!important;
border-color:#70bbbe!important;
}
.compactnotice {
min-height: 32px;
line-height: 1em;
border-top: 5px solid #ccc;
border-bottom: 5px solid #ccc;
padding: 5px 20px 5px 8px;
margin: 0 auto 1.5em auto;
font-size: small;
}
.references {
display: inline-block;
font-size: 0.8rem !important;
line-height: 1.2rem !important;
}
.note,
.reference-text {
font-size: 0.8rem;
font-style: italic;
}
.note-box {
background-color:#fff;
border:1px; border-style:solid;
border-color:#969696;
padding:10px;
margin-bottom:1.5em; /* 1.35 1.36 1.37+ */
}
.orange-box {
background-color: #f0bf11;
padding: 1px 7px 1px 7px;
border-right: 5px solid #f6f6f6;
}
.orange-box p {
margin:0;
}
.white-inner {
background-color: #fff;
border-radius: 1em;
margin: 2px 0 2px 0;
padding: 20px 14px;
position: relative;
height: inherit;
}
/* Grobold text (for light or dark backgrounds) */
.dml-text-light,
.dml-text-light a { /* White text, black dropshadow */
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:1.2rem;
color: #fff;
text-shadow: 1px 1px #000;
line-height:normal;
}
.dml-text-light a:active,
.dml-text-light a:hover {
color: #fff!important;
text-decoration:none;
}
.dml-text-dark,
.dml-text-dark a { /* Black text, white dropshadow */
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:1.2rem;
color: #444!important;
text-decoration:none;
line-height:normal;
}
.dml-text-dark a:active,
.dml-text-dark a:hover {
text-decoration:none;
}
/* ---- Reusable Banners ---- */
.dml-banner {
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
text-shadow: 1px 1px #000;
letter-spacing: 1px;
line-height: 1.2em;
text-decoration: none;
text-transform: uppercase;
border: 5px solid #fff;
width:100%;
/* button color with fallback color for older browsers */
background: rgb(231,148,17); /* Old browsers */
background: -moz-linear-gradient(top, rgb(231,148,17) 0%, rgb(240,191,17) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(231,148,17) 0%,rgb(240,191,17) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(231,148,17) 0%,rgb(240,191,17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-radius:.4em .4em;;
display: inline-block;
padding: 10px 8px 10px 10px;
border: 3px solid #fff;
margin-top: 8px;
overflow: hidden;
}
.criss-cross { /* Adds CSS to skew the banners as per game shapes */
border-radius: 15px 5px;
}
.skew { /* Adds a shape skew to be layered with other styles */
-moz-transform: skew(-2deg, 0deg);
-webkit-transform: skew(-2deg, 0deg);
-o-transform: skew(-2deg, 0deg);
-ms-transform: skew(-2deg, 0deg);
transform: skew(-2deg, 0deg);
}
/* -- Main page title text -- */
.lg-text { /* font adjusted on mobile below */
font-size:2.5rem;
line-height:normal;
}
.med-text { /* font adjusted on mobile below */
font-size:1.5rem;
line-height:normal;
}
.sm-text { /* font adjusted on mobile below */
font-size:1.3rem;
line-height:normal;
}
.sm-bdy-text {
font-size:1rem;
}
.scroll-all {
overflow:auto!important;
-webkit-overflow-scrolling: touch;
}
.float-r {
float:right;
margin-left:1em;
margin-bottom:1em;
text-align:right;
max-width:400px; /* Avoid images stretching too large on very large screens */
}
.float-l {
float:left;
margin-right:1em;
margin-bottom:1em;
text-align:left;
max-width:400px; /* Avoid images stretching too large on very large screens */
}
/* -- Buttons base CSS followed by colors -- */
.dmlbtn,
.dmlbtn a {
/* button base shared by all buttons, affecting all buttons and tabs */
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff !important;
text-align: center;
text-decoration: none;
position: relative;
display: inline-block;
letter-spacing: 1px;
line-height: 1.2em;
text-transform: uppercase;
}
.dmlbtn {
/* base affecting all buttons and tabs */
font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff !important;
text-align: center;
text-decoration: none;
position: relative;
display: inline-block;
letter-spacing: 1px;
}
.sz-sm {
font-size: 12px;
text-shadow: 1px 1px #333333;
border-bottom: 0.1rem solid #1e9813;
border-radius: 0.2rem;
padding: 0.20rem 0.4rem 0.10rem 0.4rem;
top: -1px;
min-width: 0.9rem;
}
.sz-sm img {
max-height: 15px !important;
width: auto;
vertical-align: text-bottom;
}
/* VE */
.sz-sm figure-inline > a > img,
.sz-sm figure-inline > img {
max-height: 13px;
width: auto;
margin-top: -5px;
}
.sz-sm .two-line {
font-size:0.4rem;
}
.sz-med {
font-size: 0.8rem;
text-shadow: 1px 1px #333333;
border-bottom: 0.2rem solid #1e9813;
border-radius: 0.3rem;
padding: 0.5rem 0.6rem 0.4rem 0.6rem;
min-width: 1.2rem;
margin: 0 5px 5px 0;
}
.sz-lg {
font-size: 1rem;
text-shadow: 1px 1px #333333;
border-bottom: 0.3rem solid #1e9813;
border-radius: 0.5rem;
padding: 0.7rem 0.8rem 0.5rem 0.8rem;
min-width: 1.6rem;
margin: 0 5px 5px 0;
}
.style-cir {
border-radius: 3rem;
/* padding: 0.17rem 0.2rem 0.1rem 0.2rem; */
}
.sz-sm .style-cir {
font-size: 0.65rem;
padding-top: 0.33rem;
min-height: 2em;
min-width: 2em;
}
.sz-med .style-cir {
padding-top: 0.45rem;
min-height: 2em;
min-width: 2.1em;
}
.sz-lg .style-cir {
padding-top: 0.6rem;
min-height: 2em;
min-width: 2.2em;
}
.style-tab {
border-radius: 0.4rem 0.4rem 0 0;
}
.style-tab-lt {
border-radius: 0.3rem 0 0 0.3rem;
}
.style-tab-rt {
border-radius: 0 0.3rem 0.3rem 0;
}
.sz-sm .style-ptab-lt {
padding-left:1.5em;
-webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 15% 100%, 0% 52%, 0% 48%, 15% 0%);
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 15% 100%, 0% 52%, 0% 48%, 15% 0%);
}
.sz-med .style-ptab-lt,
.sz-lg .style-ptab-lt {
padding-left:2em;
-webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 20% 100%, 0% 52%, 0% 48%, 20% 0%);
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 20% 100%, 0% 52%, 0% 48%, 20% 0%);
}
.sz-sm .style-ptab-rt {
padding-right:1.5em;
-webkit-clip-path: polygon(85% 0%, 100% 48%, 100% 52%, 85% 100%, 0% 100%, 0% 0%);
clip-path: polygon(85% 0%, 100% 48%, 100% 52%, 85% 100%, 0% 100%, 0% 0%);
}
.sz-med .style-ptab-rt,
.sz-lg .style-ptab-rt {
padding-right:2em;
-webkit-clip-path: polygon(80% 0%, 100% 48%, 100% 52%, 80% 100%, 0% 100%, 0% 0%);
clip-path: polygon(80% 0%, 100% 48%, 100% 52%, 80% 100%, 0% 100%, 0% 0%);
}
/* dml button colors bases */
.green {
background: rgb(159,222,35); /* Old browsers */
background: -moz-linear-gradient(top, rgb(159,222,35) 0%, rgb(60,189,54) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(159,222,35) 0%,rgb(60,189,54) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(159,222,35) 0%,rgb(60,189,54) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-color: #1e9a14;
}
.lt-blue {
background: rgb(54,209,252);
background: -moz-linear-gradient(top, rgb(54,209,252) 0%, rgb(0,175,233) 100%);
background: -webkit-linear-gradient(top, rgb(54,209,252) 0%,rgb(0,175,233) 100%);
background: linear-gradient(to bottom, rgb(54,209,252) 0%,rgb(0,175,233) 100%);
border-color: #0584df;
}
.blue {
background: rgb(72,132,247);
background: -moz-linear-gradient(top, rgb(72,132,247) 0%, rgb(31,72,156) 100%);
background: -webkit-linear-gradient(top, rgb(72,132,247) 0%,rgb(31,72,156) 100%);
background: linear-gradient(to bottom, rgb(72,132,247) 0%,rgb(31,72,156) 100%);
border-color: #0e2459;
}
.red {
background: rgb(247,124,123);
background: -moz-linear-gradient(top, rgb(247,124,123) 0%, rgb(226,56,56) 100%);
background: -webkit-linear-gradient(top, rgb(247,124,123) 0%,rgb(226,56,56) 100%);
background: linear-gradient(to bottom, rgb(247,124,123) 0%,rgb(226,56,56) 100%);
border-color: #cb1414;
}
.yellow {
background: rgb(250,218,75);
background: -moz-linear-gradient(top, rgb(250,218,75) 0%, rgb(231,166,0) 100%);
background: -webkit-linear-gradient(top, rgb(250,218,75) 0%,rgb(231,166,0) 100%);
background: linear-gradient(to bottom, rgb(250,218,75) 0%,rgb(231,166,0) 100%);
border-color: #df8600;
}
.gray,
.grey {
background: rgb(151,151,162);
background: -moz-linear-gradient(top, rgb(151,151,162) 0%, rgb(88,94,105) 100%);
background: -webkit-linear-gradient(top, rgb(151,151,162) 0%,rgb(88,94,105) 100%);
background: linear-gradient(to bottom, rgb(151,151,162) 0%,rgb(88,94,105) 100%);
border-color: #383a42;
}
.purple {
background: rgb(176,73,252);
background: -moz-linear-gradient(top, rgb(176,73,252) 0%, rgb(102,23,167) 100%);
background: -webkit-linear-gradient(top, rgb(176,73,252) 0%,rgb(102,23,167) 100%);
background: linear-gradient(to bottom, rgb(216,132,241) 0%,rgb(134,40,218) 100%);
border-color: #3d0b67;
}
/* Hide external link arrow from dml buttons */
.dmlbtn a.external,
.dmlbtn .external,
.dmlbtn .link-https {
background-image: unset !important;
padding-right: unset !important;
background-position: unset !important;
background-repeat: unset !important;
background-size: unset !important;
padding-right: unset !important;
}
/* Image annotations */
div.img-annotation > div > span {
background-color: #fafaec!important;
padding: 4px 6px 4px 10px;
border-radius: 2px;
font-size:14px;
}
.img-annotation div.annot-left::before {
content:url("/w/images/f/f4/Indicator_Arrow_Icon.png");
display:inline-block;
position:relative;
z-index:9999;
left:8px;
top:6px;
transform: rotate(-46deg);
}
.img-annotation div.annot-right::before {
content:url("/w/images/f/f4/Indicator_Arrow_Icon.png");
display:inline-block;
position: absolute;
z-index: 9999;
right: -19px;
top: -5px;
transform: rotate(133deg);
}
.img-annotation div.annot-top::before {
content:url("/w/images/f/f4/Indicator_Arrow_Icon.png");
display:inline-block;
position: absolute;
z-index: 9999;
right: 38%;
top: -23px;
transform: rotate(44deg);
left: auto;
}
/* Clan Quests */
table.clan-quests-blue td {
background-color: #89AEC8!important;
}
table.clan-quests-blue th {
background-color: #5F9DB6!important;
color:#fff;
text-shadow: 1px 1px #000;
min-width: 35px;
}
table.clan-quests-yellow td {
background-color: #F3D670!important;
}
table.clan-quests-yellow th {
background-color: #DDB228!important;
color:#fff;
text-shadow: 1px 1px #000;
}
table.clan-quests-blue td,
table.clan-quests-yellow td {
padding:7px 1em;
font-weight:bold;
font-size: 14px;
}
table.clan-quests-blue th,
table.clan-quests-yellow th {
font-weight:bold;
}
table.clan-quests-blue td:first-of-type,
table.clan-quests-yellow td:first-of-type {
width:75px!important;
color:black;
}
/* ------------- */
/* -- Gadgets -- */
.skin-pivot #middle-nav ul {
display:inline-block;
float: right;
list-style:none;
}
.skin-pivot #utcdate {
margin-top: 11px;
font-weight: lighter;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: none;
font-size: 0.8rem;
}
.skin-pivot #utcdate::before {
content: "(UTC)\a0";
font-size: 0.9rem;
font-weight:normal;
}
/* Monobook and Vector */
.skin-vector #utcdate {
width: 6em;
/*
* The default margin-left is 0.75em, but set it again here explicitly, so
* we can be sure of the exact width.
*/
margin-left: 0.75em;
}
.skin-monobook #utcdate {
width: 6.279em;
display: inline-block; /* We need this for the width property to work */
/*
* The default margin-left is 1em, but set it again here explicitly, so
* we can be sure of the exact width.
*/
margin-left: 1em;
}
/* ---------------- */
/* -- Extensions -- */
/* Multimedia Viewer */
.mw-mmv-prev-image,
.mw-mmv-next-image {
background-position: center;
}
.mw-mmv-next-image:hover,
.mw-mmv-prev-image:hover {
background-color: #666 !important;
}
/* PF Jexcel */
.jexcel_container,
.pfSpreadsheet {
width: auto;
display: block;
overflow: scroll;
}
.jexcel_filter {
justify-content: unset;
}
.jexcel > thead > tr > td {
position: unset;
top: unset;
}
.jexcel_content {
max-height: 800px!important;
}
.resizable {
position: sticky;
top: 0;
left: 0;
}
/* Code Mirror */
.cm-mw-parserfunction,
.cm-mw-parserfunction-name,
.cm-mw-parserfunction-bracket,
.cm-mw-parserfunction-delimiter,
.cm-mw-template-ground,
.cm-mw-template2-ground,
.cm-mw-template3-ground,
.cm-mw-template,
.cm-mw-template-bracket,
.cm-mw-template-ext-link-ground,
.cm-mw-template2-ext-ground,
.cm-mw-link-bracket,
.cm-mw-link-pagename,
.cm-mw-pagename,
.cm-mw-template2-ext2-ground,
.cm-mw-templatevariable-bracket,
.cm-mw-comment {
background-color:transparent;
background:transparent;
}
.CodeMirror-vscrollbar {
z-index: 1;
}/* Text selection */
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background:#0078D7;
color: white;
}
.cm-mw-matchingbracket {
background-color: #f7ff03;
box-shadow: 0 0 0 1px orange;
border: 1px solid #f7ff03;
margin-left: 0px;
}
/* Tabs Extension */
input .tabs-input[type="radio"],
input .tabs-input[type="checkbox"],
.tabs-input {
display:none!important;
}
.tabs-tabbox > .tabs-input + .tabs-input + .tabs-label {
margin-left: 2px;
}
.tabs-tabbox > .tabs-label {
border-radius: 3px 3px 0 0;
padding: 5px 10px;
}
.tabs-label {
font-weight: bold;
background-color: #e7e7e7;
border-top: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
}
.tabs-label:hover {
background-color: unset;
}
.tabs-tabbox > .tabs-container {
padding: 1em;
border-radius: 0 0 3px 3px;
border: 1px solid lightgray;
margin-bottom: 10px;
background: white;
}
.tabs-content {
margin-bottom: unset;
}
/* Tabs - Buttons appearance instead of tabs */
.tabs-buttons .tabs-container {
border: none;
}
.tabs-buttons .tabs-label {
border-radius: 3px;
margin-bottom: 5px;
border-bottom: 1px solid lightgray;
}
/* Tabs Toggle Box */
.tabs-togglebox {
margin:unset!important;
}
.tabs-togglebox > * > .tabs-label {
border-radius: unset;
}
.tabs-togglebox > * > .tabs-input:checked + .tabs-label, .tabs-dropdown > * > .tabs-label:focus, .tabs-dropdown:hover > * > .tabs-label {
border-radius: unset;
}
.tabs-togglebox > * > .tabs-content {
padding: 1em;
border-radius: unset;
border: 1px solid lightgray;
margin: unset;
}
/* Cargo */
/* Special:CargoTables page bullets */
/* .CargoDelimiter {
display: none;
} */
table.cargoTable td,
table.cargoTable th {
padding: 1px 5px!important;
}
.cargoTable p {
margin-bottom: unset;
display:inline;
}
.cargo-wrapper.nodataTableNav .dataTables_wrapper .dataTables_paginate {
display:none;
}
a.specialCargoQuery-extraPane-toggle {
display:none!important;
}
.datafont a {
color: #666;
}
/* Supress "more..." link external icon */
.cargo-wrapper a.external {
background-image: unset!important;
}
.galleryfilename {
font-size: 80%;
}
.mw-datatable {
display: block;
overflow: auto !important;
padding-left: 0 !important;
border:unset!important;
}
.notogglecols a.toggle-vis {
display:none;
}
.notoggle .dataTables_wrapper {
top: -25px;
background: #f6f6f6;
}
.dataTable tbody tr td p {
margin-bottom:0!important;
}
.dataTable tbody th,
.dataTable tbody td {
padding: 1px 5px!important;
}
.dataTable thead th,
.dataTable thead td {
padding: 2px 5px!important;
}
.dataTable thead .sorting,
.dataTable thead .sorting_desc,
.dataTable thead .sorting_asc {
background-image: none;
}
.cargoDynamicTable {
display: block;
max-width: 100%;
overflow-x: auto;
}
.checkboxLabel .oo-ui-checkboxInputWidget {
line-height: .8em;
margin-right: 1px;
}
label.checkboxLabel {
margin-right: unset;
}
.oo-ui-comboBoxInputWidget-field {
min-width: auto!important;
}
.field-checkboxes .oo-ui-iconElement-icon {
min-width: 15px;
min-height: 15px;
}
.field-checkboxes .oo-ui-checkboxInputWidget [type="checkbox"],
.field-checkboxes .oo-ui-checkboxInputWidget [type="checkbox"] + span {
width: 15px;
height: 15px;
}
/* Visual Editor */
.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link, .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link {
display: table!important; /* must use adjoining classes above */
}
.ve-ui-mwSaveDialog-summaryLabel, .ve-ui-mwSaveDialog-license {
display:none;
}
.mw-upload-bookletLayout-filePreview {
height: auto;
width: unset;
}
.flow-component .ve-init-mw-target-surface {
padding-bottom: 65px;
}
.ve-init-mw-desktopArticleTarget-loading-overlay {
/* margin-top:20px; */
text-align:center;
}
/*
/* Visual editor, hide VE section edit link and divider */
.mw-editsection-visualeditor,
.mw-editsection-divider {
display:none;
}
/* hide VE feedback text and link with our wiki referring URL */
.ve-ui-mwHelpPopupTool-items .ve-ui-mwHelpPopupTool-item:first-of-type,
.ve-ui-mwHelpPopupTool-item > span:last-of-type {
display:none!important;
}
/*
.ve-init-mw-desktopArticleTarget-loading-overlay::before {
content:"If (Visual) Edit fails to load close this page completely and re-open it or edit in Source Edit mode.";
font-size: 16px;
font-weight: bold;
text-align:center;
line-height:2em;
}*/
/* Page Forms */
.formtable-border {
border: 1px solid #b7b9c0;
width: 100%;
height:fit-content;
max-width: 1070px;
margin-bottom: 40px;
}
table.formtable {
max-width: 1070px;
background-color:whitesmoke;
}
table.formtable hr {
margin-top: 15px;
margin-bottom: 5px;
}
table.formtable th {
font-weight:bold;
padding-top: 8px;
padding-bottom: 5px;
padding-left: 15px;
}
table.formtable th,
table.formtable th p {
text-align: left!important;
}
table.formtable > tbody > tr > td,
div.tabbertab table > tr > td {
padding-left:15px;
vertical-align: top;
}
table.formtable > tbody > tr > td:last-of-type {
padding-right:15px;
}
table.formtable > tbody > tr:last-of-type {
padding-bottom: 30px;
}
.pfFieldDescription {
font-weight:normal!important;
font-style: italic;
font-size: 0.8rem!important;
color:#666;
}
#pfForm textarea {
min-width: 260px;
width: 100%!important;
}
#pfForm .select2-container {
width: 100%;
}
#pfForm .createboxInput {
padding: 0px 30px 0px 8px;
width:100%!important;
margin-top: 4px;
}
#pfForm .createboxInput, #pfForm .mandatoryField, #pfForm textarea {
font-size: 0.8rem;
margin-bottom: 8px;
}
table.formtable > tbody > tr > td .ui-widget {
margin-top: 3px;
}
#pfForm select {
min-width: 100px;
max-width: 100%;
width: auto !important;
}
p.pfFieldDescription {
margin-block-start: 0em;
margin-block-end: 0em;
}
p.pfFieldDescription b,
p.pfFieldDescription strong {
color:darkred;
}
.form-showonselect {
text-align: left;
font-size: 0.8rem;
}
table.form-elements td {
font-size:0.6rem;
}
.formtable-border .formtable .mw-collapsible {
border: 1px solid lightgrey;
padding: 5px;
}
.formtable-border table.formtable caption {
text-align:left;
background-color: #cedff2;
border-bottom: 1px solid lightgrey;
padding: 8px;
}
table.formtable caption .mw-collapsible-toggle {
float: right;
}
.formfield-inactive {
border: 1px solid #BBB;
padding: 8px;
background-color: #e7e7e7;
border-radius: 3px;
color: #666666;
font-size: 0.8rem;
font-style: italic;
cursor: text;
}
.formtable .note a.new {
font-size: 0.7rem;
}
.formtable .note a.new::before {
content: "This image has not yet been uploaded:";
}
.formtable .tabber {
margin-top:20px!important;
}
/* DPL3 */
.dpl-nav {
padding: 5px 0;
margin: 5px 0;
}
.dpl-nav span {
margin-right: 3px;
background: #e7e7e7;
padding: 5px;
border: 1px solid #a2a9b1;
border-radius: 3px;
}
.dpl-nav-active {
background: white!important;
}
/* Input Box */
.mw-inputbox-element {
margin-bottom: 8px;
}
.inputbox-sidebar {
width: 300px;
border: 1px solid lightgrey;
clear: right;
float: right;
margin: 3px;
padding:10px;
margin-left: 2em;
}
.mw-inputbox-centered {
border: 1px solid lightgray;
padding: 20px;
}
/* Edittools
* @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
*/
.mw-charinsert-buttons {
border: 1px solid #aaa;
margin-top: 10px;
padding: 1px;
font-size: 1.1em;
text-align: center;
}
.mw-charinsert-buttons a {
background-color: #cde !important;
color: #000;
border: thin #069 outset;
padding: 0 1px 1px;
font-weight: bold;
font-size: .9em;
text-decoration: none;
}
.mw-charinsert-buttons a:hover,
.mw-charinsert-buttons a:active {
background-color: #bcd;
border-style: inset;
}
.client-js .mw-edittools-section {
display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
font-size: .9em;
margin-left: 1px;
padding-left: 1px;
padding-right: 1px;
}
/* Comment Streams */
/* Reminder, wiki is not official */
.createdbyplayers {
font-weight: bold;
margin: 2em 0;
}
.cs-header {
margin-top: 10px;
}
.cs-button img {
width:30px;
height:30px;
}
/* fix comment buttons taking up space making rows huge */
.cs-button {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.cs-comment-button-label {
padding-left: 5px;
color: #222;
}
.cs-comment-body p {
margin-bottom:0;
}
h2.flow-topic-title {
font-size: 1.2em!important;
}
/* Force table to break word and not exceed width */
.csall-wikitable {
table-layout: fixed;
width: 100%;
}
.csall-wikitable td {
word-break: break-all;
}
.csall-wikitable th:nth-child(1) {
min-width:200px;
}
.csall-wikitable th:nth-child(2) {
min-width:100px;
}
/* TemplateData */
.mw-templatedata-doc-params caption p {
font-weight:bold;
text-align: left;
}
.mw-templatedata-doc-wrap::before {
content: "Template Documentation";
font-weight: bold;
border-bottom: 1px solid #666;
}
.mw-templatedata-doc-wrap {
border: 1px solid #b5b5b5;
background-color: #e9f4f9;
padding: 10px;
margin-top: 20px;
}
/* Force template data to always start after content including side infoboxes */
div.mw-templatedata-doc-wrap {
clear:both;
}
/* Template Wizard */
.ext-templatewizard-searchform .oo-ui-textInputWidget:first-of-type::before,
.ve-ui-mwTemplatePlaceholderPage::before {
content:"Type a letter to see the first 10 templates beginning with that letter.";
}
.ext-templatewizard-searchform .oo-ui-comboBoxInputWidget .oo-ui-iconElement-icon {
z-index: 1;
height: 75px;
}
/* Facebook */
.facebook-widget {
background: #6B437D; /* Old browsers */
background: -webkit-linear-gradient(top, rgb(28,25,61) 0%,rgb(174,95,160) 100%); /* Chrome10-25,Safari5.1-6 */
background: -moz-linear-gradient(top, rgb(28,25,61) 0%, rgb(174,95,160) 100%); /* FF3.6-15 */
background: linear-gradient(to bottom, rgb(28,25,61) 0%,rgb(174,95,160) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-radius: 1em;
}
/* Video Embed */
.embed-wrapper {
max-width:600px;
max-height:338px;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.iframe-embed-max iframe {
width:100%;
min-height:700px;
}
/* Echo */
.oo-ui-popupWidget-popup {
font-size: .8em!important;
}
#echo-notifications {
z-index: 1;
}
.oo-ui-popupWidget .oo-ui-popupWidget-anchor {
margin-left: 0px!important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
max-width: unset!important;
}
.oo-ui-decoratedOptionWidget .oo-ui-labelElement-label {
line-height: 1em;
margin: 0 5px;
font-size:1em!important;
}
div.mw-indicator-mw-helplink,
div#mw-indicator-mw-helplink,
.mw-indicator,
.mw-indicators,
div.mw-indicator,
div.mw-indicators,
div .mw-indicators .mw-body-content,
#mw-indicator-mw-helplink a {
float:right;
display:none!important;
}
/* Adsense */
.dml-gas-top {
flex-basis:320px;
margin-left:auto;
margin-top: auto;
margin-bottom: auto;
}
side-nav li {
margin: 0 auto!important;
}
.dml-gas-sidebar {
margin-top:1em;
width: fit-content;
margin: 0 auto;
}
div .top-gas-container > div .intothing .roundy {
float:none!important;
max-width:75%;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;
flex-grow: 1; /* do not add styles to this */
}
.top-gas-container {
display:flex; /* do not add styles to this */
}
.dml-gas-bottom {
padding-top: 40px; /* not displaying in css for some reason */
text-align: center;
width: fit-content!important;
margin-left: auto!important;
margin-right: auto!important;
}
/* UTC update */
.skin-pivot #utcdate {
width: 105px;
}
/* -------------------- */
/* --- Media queries ---*/
/* 1920 px wide or more */
@media only screen and (min-width: 1920px) {
.main-pg small-8 {
max-width: 1240px;
}
.main-page small-4 {
max-width:414px;
}
.gas-bottom-first {
width: 970px; height: 90px;
}
}
/* 1920 px wide or LESS */
@media only screen and (max-width: 1920px) {
.main-pg small-8 {
max-width: 1240px;
}
.main-page small-4 {
max-width:414px;
}
.gas-bottom-first {
width: 728px; height: 90px;
}
}
/* 1330 px wide or less */
@media only screen and (max-width: 1330px) {
.main-pg.medium-6 {
width: 100%;
}
.small-block-grid-5 > li {
font-size: 0.8rem;
}
.lg-text {
font-size:1.9rem;
}
.sm-text {
font-size: 0.9rem;
}
.ltd-countdown div.floatright img {
width:80px;
}
}
/* 1201 - 1025px wide */
@media only screen and (max-width: 1201px) and (min-width: 1025px) {
.ltd-countdown-item3 {
grid-column: span 2;
}
}
/* 1180 px wide to 960px */
@media only screen and (max-width: 1180px) and (min-width: 960px) {
.leaderboard-table th,
.leaderboard-table td {
font-size:0.85rem;
}
.ltd-countdown-dev {
position: relative;
height: 215px;
}
.ltd-countdown-dragon img {
max-height: 120px;
}
.ltd-countdown-dragon .dotm-last img {
max-height: 150px;
}
}
/* 1080 px wide or more */
@media only screen and (min-width: 1080px) {
.main-pg.small-8 {
width: 75%;
}
.main-pg.small-4 {
width: 25%;
}
}
/* 1080 px wide or LESS */
@media only screen and (max-width: 1080px) {
.lg-text {
font-size:1.4rem;
}
.small-block-grid-3 > li {
width: 100%;
}
ul .small-block-grid-3 {
margin-left: 0.2em;
}
div.event-slider {
max-height: 400px;
overflow-y: scroll;
}
li.gallerybox div.thumb img {
max-width: 280px;
}
.mainpg-ltd-dragons,
.mainpg-community-corner {
display:unset!important;
}
.mainpg-ltd-dragons .small-6,
.mainpg-community-corner .small-6,
.mainpg-ltd-dragons .large-4,
.mainpg-community-corner .large-4 {
width: 49.7%;
}
.mainpg-ltd-dragons .small-12,
.mainpg-community-corner .small-12 {
width:100%;
padding-left: 7px;
}
.mainpg-ltd-dragons .small-12 .orange-box,
.mainpg-community-corner .small-12 .orange-box,
.mainpg-news .small-6 .orange-box,
.mainpg-ongoing-events .orange-box,
.mainpg-news .orange-box {
padding-right: 7px!important;
padding-left:7px!important;
}
.mainpg-event-title-hz,
.mainpg-event-time-hz {
font-size: 0.8rem;
}
.ltd-countdown-dev:last-of-type {
height: 210px;
}
.ltd-countdown-dev {
height:200px;
}
.more-scroll { /* For smooth transition */
-webkit-overflow-scrolling : touch!important;
}
.more-scroll::after {
font-size: 0.8em;
line-height: 1.2rem;
content:"\2195";
position:absolute;
bottom: 14px;
right:14px;
color: #fff;
z-index: 999;
background-color: rgba(0, 0, 0, 0.3);
padding: 3px 5px 6px 5px;
border-radius: 5px;
-webkit-transform: translate3d(0,0,0); /* silly safari fix */
-webkit-overflow-scrolling : touch!important;
}
.gas-bottom-first {
width: 468px!important;
height: 60px!important;
}
}
/* 1024 px wide or MORE */
@media only screen and (min-width: 1024px) {
.mainpg-ongoing-events .orange-box {
border-right:0;
}
}
/* 1024 px wide or less */
@media only screen and (max-width: 1024px) {
/* mainpage grid adjustment */
.small-block-grid-5 > li {
font-size: .7rem;
}
.side-infobox {
width:100%;
margin-left:0px!important;
text-align: center;
clear: both; /* Required so content doesn't disappear eventbox */
float: none; /* Required so content doesn't disappear eventbox */
margin-bottom: 30px;
}
.top-gas-container {
display:block!important;
}
.dml-gas-top {
margin-left:0;
margin-top:6px;
}
div .top-gas-container > div .intothing .roundy {
max-width: unset;
margin-right: 0;
}
.mainpg-ongoing-events .orange-box {
border-right: 5px solid #f6f6f6;
/* border-right: 5px solid #f6f6f6; */ /* 1.35 1.36 1.37+ */
}
.ltd-countdown-dev {
position: relative;
height: 255px;
}
.mainpg-event-title-hz, .mainpg-event-time-hz {
font-size: 1rem;
}
.medium-block-grid-2 > li {
width:100%;
}
}
/* 961 px wide or more */
@media only screen and (min-width: 961px) {
/* mainpage grid adjustments */
.small-8,
.small-4 {
padding-right: 0;
}
.small-4.columns div.orange-box {
border-right: 0;
}
}
/* 960px to 717px wide */
@media only screen and (max-width: 960px) and (min-width: 717px) {
.ltd-countdown-item3 {
grid-column: span 2;
}
}
/* 960 px wide or less */
@media only screen and (max-width: 960px) {
/* mainpage grid adjustments */
.small-8,
.small-4 {
padding-right: 0;
padding-left: 0;
width: 100%;
}
.main-pg .small-4 {
width: 32%;
margin-right: 2%;
}
.main-pg .small-4:last-child {
margin-right:0;
}
.medium-block-grid-2 > li {
width:50%;
}
.small-3.columns .orange-box,
.small-4.columns .orange-box,
.small-5.columns .orange-box,
.small-6.columns .orange-box,
.small-7.columns .orange-box,
.small-8.columns .orange-box,
.small-12.columns .orange-box,
.large-4.columns .orange-box,
.large-5.columns .orange-box,
.large-6.columns .orange-box,
.large-7.columns .orange-box,
.large-8.columns .orange-box,
.large-12.columns .orange-box,
.small-12 {
border-right: 0px!important;
}
.small-block-grid-5 > li {
font-size: .7rem;
}
/* mainpage text adjustments */
.med-text {
font-size:1.5rem;
}
.sm-text {
font-size:1.5rem;
}
.sm-bdy-text {
font-size:1rem;
}
div.events-legend, div.legend {
display: flex;
width:100%;
margin-left:0;
text-align: center;
}
.nomobile, span.nomobile {
display:none;
}
.mobile {
max-width: none!important;
min-width: 100px!important;
width: 100%;
clear: both;
text-align: center;
}
.float-r .mobile,
.mobile .float-r {
float:none!important;
margin-left: 0!important;
}
.mobile-width {
width:100%!important;
}
/* Force headers and content following to begin BELOW eventbox at 100% width */
div.eventbox-pagebody {
clear:both;
}
table.formtable td {
display:block;
width:97%!important;
}
div.tabbertab table > tbody > tr > td {
display:block;
width:100%!important;
}
div.tabbertab table > tbody > tr > th {
font-weight: bold;
width: 100%!important;
display: block!important;
}
div.tabbertab table > tbody > tr > td {
padding-left: 0;
padding-right:0;
}
div.tabbertab table > tbody > tr > th {
padding-left: 0px!important;
}
table.formtable > tbody > tr > td:last-of-type {
padding-right: 0;
}
tabber .tabbertab {
padding-right: 30px;
}
.ltd-countdown-dev {
height: 230px;
}
.ltd-countdown-dev {
height: 216px;
}
.ltd-countdown-dev:last-of-type {
height: 212px;
}
.ltd-countdown .dotm-last img {
max-height: 146px;
}
.ltd-countdown-dragon img {
max-height: 130px;
}
.gas-bottom-first {
width: 468px!important;
height: 60px!important;
float:left;
}
.mainpg-event-box-hz {
margin: 0 auto;
padding-bottom: 10px;
}
}
/* -- At 700 px wide or less -- */
@media only screen and (max-width: 700px) {
/* Make tabs block for mobile */
ul.tabbernav li a {
/* display: block!important; */
margin-left: 0px!important;
}
ul.tabbernav {
margin-left: 0px!important;
margin-right: 0px!important;
}
.leaderboard-table th,
.leaderboard-table td {
font-size:0.9rem;
}
.ltd-countdown img {
max-height: 138px;
}
.ltd-countdown .dotm-last img {
max-height: 160px;
}
.gas-bottom-first {
display:none!important;
}
}
/* 640 - 540px wide */
@media only screen and (max-width: 640px) and (min-width: 540px) {
.ltd-countdown-item3 {
grid-column: span 2;
}
}
/* 640 px wide or less */
@media only screen and (max-width: 641px) {
.show-for-small-only > img {
display:none!important;
}
/* Echo (notifications) */
.oo-ui-popupWidget-popup {
margin-left: 0px!important;
font-size: .7em!important;
max-width: 300px!important;
}
/* Echo triangle */
.oo-ui-popupWidget-anchored-top {
right: 1.5em!important;
left: unset!important;
}
/* Echo triangle */
.oo-ui-popupWidget .oo-ui-popupWidget-anchor {
margin-left: -200px!important;
}
/* notifications content table */
.mw-echo-ui-notificationItemWidget-content-table {
width: 100%;
}
.mw-echo-ui-menuItemWidget-prioritized {
display: block;
}
.oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
width: 100%!important;
max-width: unset!important;
}
/* Don't display on mobile */
.nomobile-640 {
display:none;
}
/* comment streams below page */
#cs-comments::before,
.flow-board-page::before {
font-size: 0.8em;
line-height:0.8em;
}
.small-block-grid-2 li:last-of-type {
float: none;
margin: 0 auto;
}
.ltd-countdown-dragon img {
max-height: 146px;
}
.dmlcolumns-3 {
column-count:2!important;
}
}
/* 501 px wide or more */
@media only screen and (min-width: 501px) {
/* mainpage grid adjustments */
.small-block-grid-3 li {
width: 33%;
}
}
/* 500 px wide or less */
@media only screen and (max-width: 500px) {
/* mainpage grid adjustments */
.small-block-grid-5 > li {
font-size: 0.6rem;
}
.lg-text {
font-size:1.5rem;
}
.med-text {
font-size:1.2rem;
}
.sm-text {
font-size:1.2rem;
}
.large-10, .medium-9, .columns, .medium-9.columns {
padding-left: 0em!important;
padding-right: 0em!important;
}
.white-inner {
padding: 10px 10px;
position:relative;
}
[class*="block-grid-"] > li {
padding: 0 0.3rem 1.25rem;
}
ul[class*="block-grid"] {
margin-left: 0!important;
}
.nomobile-500 {
display:none;
}
.mainpg-ltd-dragons .small-12,
.mainpg-ltd-dragons .small-6,
.mainpg-ltd-dragons .large-4 {
width:100%;
}
.show-for-small-only {
font-size: 0.8em;
}
.client-js .mw-changeslist ul, .client-js .mw-changeslist table.mw-enhanced-rc {
margin-left: 1em;
}
.mw-rcfilters-ui-liveUpdateButtonWidget a {
font-size:13px;
}
.mw-rcfilters-ui-changesLimitAndDateButtonWidget span a {
font-size:13px;
}
/* Make long links and bits wrap on Recent Changes page */
bdi {
word-break:break-word;
}
.comment--without-parentheses,
.comment--without-parentheses a {
word-break:break-word;
}
.mw-changeslist-line-inner .mw-title a {
word-break:break-word;
}
.mw-rcfilters-ui-filterWrapperWidget-showNewChanges {
font-size: 13px;
}
.mw-rcfilters-ui-filterWrapperWidget-bottom {
width: 300px;
overflow-wrap: break-word;
display: block;
}
.dmlcolumns {
column-count:1!important;
}
.specialevent-item1,
.specialevent-item2 {
grid-column: span 2;
}
}
/* 400 px wide or less */
@media only screen and (max-width: 400px) {
.skin-pivot #middle-nav ul {
margin-left: 0;
}
#echo-notifications li {
margin: 0 0 0 10px;
}
.nomobile-400 {
display:none;
}
.mw-collapsible-content {
width:100%;
margin-left:0;
}
div.mw-indicators {
display:none!important;
}
fieldset {
max-width: 300px!important;
padding: 0;
margin: 0 auto;
}
.mw-recentchanges-table table tr td,
#mw-prefsection-personal fieldset table tr td,
#mw-prefsection-rendering fieldset table tr td,
#mw-prefsection-editing fieldset table tr td,
#mw-prefsection-rc fieldset table tr td,
#mw-prefsection-watchlist fieldset table tr td,
#mw-prefsection-echo fieldset table tr td {
display: block;
margin-left:0;
margin-right:0;
}
.mw-recentchanges-table table tr td, #mw-prefsection-personal fieldset table tr td, #mw-prefsection-rendering fieldset table tr td, #mw-prefsection-editing fieldset table tr td, #mw-prefsection-rc fieldset table tr td, #mw-prefsection-watchlist fieldset table tr td, #mw-prefsection-echo fieldset table tr td {
display: block;
margin-left: 0;
}
#mw-prefsection-personal fieldset table tr td.mw-label,
#mw-prefsection-rendering fieldset table tr td.mw-label,
#mw-prefsection-editing fieldset table tr td.mw-label,
#mw-prefsection-rc fieldset table tr td.mw-label,
#mw-prefsection-watchlist fieldset table tr td.mw-label,
#mw-prefsection-echo fieldset table tr td.mw-label {
width: 100%;
text-align: left;
}
.mw-recentchanges-table tr td {
display: block;
}
/* Recent changes legend */
.mw-changeslist-legend {
width: 100%;
}
.mw-changeslist-legend dd, .mw-changeslist-legend dt {
font-size: 0.8em;
display: table-cell;
}
ul .gallery .mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {
margin: 0 1em;
}
.show-for-small-only {
/* -- At 360 -- display:none!important;*/
font-size: 0.5em;
}
.breakword,
.breakword tbody tr td {
word-break: break-word;
}
}
/* -- At 360 px wide or less -- */
@media only screen and (max-width: 360px) {
.show-for-small-only {
display:none!important;
}
/* #middle-nav ul {
display:none;
} */
}
/* -- At 320 px wide or less -- */
@media only screen and (max-width: 320px) {
.oo-ui-popupWidget-popup {
margin-left: 0px!important;
font-size: .7em!important;
max-width: 280px!important;
left: 6%;
}
.nomobile-320{
display:none;
}
.DragonSwitchCenter {
display:none;
}
}
/* Fixes for updated themes and responsive grids/layouts */
.small-block-grid-5 > li {
list-style: none;
}
.show-for-small-only {
content: "DML Wiki";
}
.large-12 {
padding-left: 0;
padding-right: 0;
}
.main-pg.medium-6 {
width: 100%;
}
.main-pg.medium-6:first-of-type {
margin-bottom: 1em;
}
/* Remove related changes from sidebar */
li#t-recentchangeslinked,
li#t-permalink,
li#t-specialpages {
display:none;
}
.main-pg small-8,
.main-page small-4 {
float:left;
}
/* Remove bottom margin on input fields so they can be aligned with text */
input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, input[type="file"], input[type="checkbox"], input[type="radio"], select {
margin-bottom: 0;
}
input[type="submit"] {
margin-top: 15px;
}
.mw-label {
padding: 0.5em;
}
input[type="number"] {
width:auto;
}
/* Dropdown field fit to contents not 100% width */
select {
width: auto;
margin-bottom:0;
padding-right: 20px;
}
/* Testing fix for input number spinners, this verion of MW using depreciated version of jquery */
/* Remove number field spinners in webkit browsers (Chrome etc.) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Remove number field spinners in Firefox */
input[type=number] {
-moz-appearance:textfield;
}
ul[class*="block-grid"] {
margin-left: 0.2em;
}
/* ----------------------- */
/* -- Test wiki colors --- */
/* Leave here!
.tab-bar {
background: #989898!important;
}
ul.side-nav label {
background: #989898!important;
}
*/
/* ------------------ */
/* -- experimental -- */
.dmlshadow img {
-webkit-filter: drop-shadow(2px 2px 2px #777);
filter: drop-shadow(2px 2px 2px #777);
}
.dmlwidth img:hover {
transition: width .1s;
-webkit-transition: width .1s;
width: calc(100% - 15px);
}
.dmltransition img:hover {
transition: all .3s ease-in;
}
.dmlrotate-right img,
.dmlrotate-left img {
transition: all .3s ease-in;
}
.dmlrotate-right img:hover {
transform: rotate(20deg);
}
.dmlrotate-left img:hover {
transform: rotate(-20deg);
}
/* Move up */
.dmltransition-up img {
will-change: transform;
transition: transform 450ms;
}
.dmltransition-up img:hover,
.dmltransition-up img:hover .dmltransition-up img {
transform: translateY(-3px);
}
/* Blurry, clear on hover */
.dmlblur img:hover {
filter: blur(3px);
transition: 0.3s ease-in-out;
}
/* Blurry, clear on hover */
.dmlblur img:hover {
filter: blur(0px);
transition: 0.3s ease-in-out;
}
.dmltransition-opacity img:hover {
opacity: 1;
transition: 0.3s ease-in-out;
}
/* To be respectful reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.dmlwidth img:hover,
.dmltransition img:hover,
.dmltransition-up img:hover,
.dmlrotate-right img:hover,
.dmlrotate-left img:hover,
.dmltransition-up img:hover,
.dmltransition-up img,
.dmltransition-up img:hover .dmltransition-up img,
.dmlblur img:hover,
.dmltransition-opacity img:hover {
transition: none;
}
}