Difference between revisions of "MediaWiki:Mobile.css"
Jump to navigation
Jump to search
| Line 3: | Line 3: | ||
/* new mobile CSS (after updating the wiki version */ | /* new mobile CSS (after updating the wiki version */ | ||
.mw-overlays-container { | .mw-overlays-container { | ||
} | } | ||
Revision as of 19:31, 15 September 2021
/* CSS placed here will affect users of the mobile site */
/* new mobile CSS (after updating the wiki version */
.mw-overlays-container {
}
.overlay-header-container.position-fixed {
position: absolute !important;
}
/* move search bar icon left */
nav.minerva-user-navigation {
display: flex;
justify-content: left;
}
/* eliminate horizontal scrollbar (not in use because we need the horizontal scrollbar in many instances */
/*
div#mw-mf-viewport{
overflow-x: hidden;
}
*/
/* end of new mobile CSS (after updating the wiki version */
/* new main page */
.desktop-frontpage {
display: none !important;
}
.mobile-frontpage {
display: block !important;
}
.desktop-element {
display: none !important;
}
.mobile-element {
display: block !important;
}
@font-face {
font-family: "EasonPro";
src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.eot);
src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.eot?#iefix")
format("embedded-opentype"),
url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.woff)
format("woff"),
url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.ttf)
format("truetype"),
url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.svg#EasonProregular")
format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "EasonPro";
src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.eot);
src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.eot?#iefix")
format("embedded-opentype"),
url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.woff)
format("woff"),
url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.ttf)
format("truetype"),
url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.svg#EasonProitalic")
format("svg");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "EasonPro";
src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.eot);
src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.eot?#iefix")
format("embedded-opentype"),
url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.woff)
format("woff"),
url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.ttf)
format("truetype"),
url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.svg#EasonProBold")
format("svg");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "CronosPro";
src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/cronos/v1/cronospro-regular-webfont.eot);
src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/cronos/v1/cronospro-regular-webfont.eot?#iefix")
format("embedded-opentype"),
url(https://d1h9a8s8eodvjz.cloudfront.net//fonts/cronos/v1/cronospro-regular-webfont.woff)
format("woff"),
url(https://d1h9a8s8eodvjz.cloudfront.net//fonts/cronos/v1/cronospro-regular-webfont.ttf)
format("truetype"),
url("https://d1h9a8s8eodvjz.cloudfront.net//fonts/cronos/v1/cronospro-regular-webfont.svg#CronosProregular")
format("svg");
font-weight: normal;
font-style: normal;
}
/************************************************************************************
RESPONSIVE STRUCTURE
*************************************************************************************/
#mobile-pagewrap {
width: 960px;
font-size: 95%;
margin: 15px auto;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.75em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #bbb),
color-stop(0.02, #fff),
color-stop(1, #eee)
);
}
.mobile-column {
min-height: 330px;
width: 320px;
float: left;
}
.mobile-first-column {
width: 641px;
}
.mobile-box-content {
padding: 5px 15px;
}
#mobile-bottom {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#mobile-pagewrap {
width: 94%;
}
.mobile-column {
width: 50%;
}
.mobile-first-column {
width: 70%;
}
.mobile-second-column {
width: 30%;
}
.mobile-box-content {
padding: 1% 4%;
}
.two-column-break {
clear: both;
}
}
/*for 820px or less*/
@media screen and (max-width: 820px) {
.mobile-first-column .floatleft {
float: none;
text-align: center;
width: 100%;
}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.mobile-column {
width: auto;
float: none;
}
.mobile-column {
min-height: inherit;
}
}
/************************************************************************************
FURTHER CUSTOMIZATION
*************************************************************************************/
.mobile-box-header {
font-family: EasonPro, "Times New Roman", serif;
font-size: 1.5em;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
background-color: #444;
background-image: url(/mediawiki/images/a/aa/Bg_gradient4.jpg) !important;
font-weight: 400;
text-align: center;
}
#mobile-pagewrap {
border: 1px solid #ccc;
}
.mobile-column {
border-right: 1px solid #ccc;
margin-left: -1px;
}
.mobile-second-column {
border-right: none;
}
/* fixes quotation template on mobile */
.quotation-box {
margin-left: 0 !important;
}
/* From Valento */
/* General */
p img {
margin: 0;
}
img {
border: none;
vertical-align: middle;
}
p,
ul,
ol,
dl {
margin-top: 0.7692307692em;
margin-bottom: 0.7692307692em;
line-height: 1.5384615385em;
}
.infobox-n .clear,
.nav .clear,
.recipe-box .clear {
height: 5px;
}
/* Infobox specific */
div.infobox-n {
float: center;
position: relative;
width: 300px;
background: #fff;
font-size: 0.923em;
border: 1px solid #aaa;
margin: 0 0 1em 1em;
padding: 0;
}
div.infobox-n,
div.nav .box {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffeeeeee);
background-image: linear-gradient(top, #fff 0%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fff),
color-stop(1, #eee)
);
}
div.infobox-n .icon {
float: right;
position: relative;
z-index: 2;
width: auto;
margin: 5px;
}
div.infobox-n .icon p {
text-align: center;
color: #444;
font-size: 9px !important;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.75em;
line-height: 1em;
margin: 0.25em -0.5em;
padding: 2px;
}
div.infobox-n .wrapper {
clear: both;
padding: 0;
}
div.infobox-n .statistics {
text-align: center;
margin: 0 8px;
}
div.statistics span + span {
margin-left: 5px;
}
div.infobox-n .heading,
div.nav .heading {
font-weight: 700;
background-image: url(/mediawiki/images/b/b3/Box_overlay.png) !important;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.25);
border-bottom-width: 0;
position: relative;
z-index: 1;
font-size-adjust: 0.52;
margin: -1px -1px 5px !important;
}
div.infobox-n .heading {
font-family: EasonPro, "Times New Roman", serif !important;
font-size: 1.417em !important;
color: #fff !important;
background-color: #444;
text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
line-height: 1.176em;
font-size-adjust: 0.43;
padding: 0.4em !important;
}
div.infobox-n .subheading,
div.nav .subheading {
font-weight: 700;
background-color: #888;
background-image: url("/images/c/cc/Infobox_header_overlay.png") !important;
border-left: 1px solid rgba(0, 0, 0, 0.25);
border-right: 1px solid rgba(0, 0, 0, 0.25);
line-height: 100%;
text-align: center;
position: relative;
margin: 0 -1px !important;
}
div.infobox-n .subheading {
font-family: EasonPro, "Times New Roman", serif;
font-size: 1.25em !important;
color: #fff !important;
background-color: #444;
text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
z-index: 1;
line-height: 1.333em;
font-size-adjust: 0.43;
padding: 0.567em !important;
}
div.nav dl,
div.infobox-n dl {
margin: 10px 0;
}
div.infobox-n dt {
float: left;
text-align: right;
width: 95px;
line-height: 1em;
font-weight: 700;
clear: left;
border-right: 2px solid #999;
margin: 0 -2px 0 0;
padding: 2px 8px 2px 3px;
}
div.infobox-n dd {
float: left;
width: 175px;
font-weight: 400;
border-left: 2px solid #999;
margin: 0;
padding: 2px 7px;
}
div.infobox-n .image_wrapper {
text-align: center;
padding: 0;
margin: 10px 0;
}
div.infobox-n::after,
div.nav .box::after,
div.infobox-n .heading::after,
div.nav .heading::after,
div.infobox-n .subheading::after,
div.nav .subheading::after,
.table::after {
content: "";
position: absolute;
width: 100%;
left: 0;
height: 3px;
background-image: url(/mediawiki/images/4/45/Shadow_after.png);
background-size: 100% 3px;
}
div.infobox-n::after,
div.nav .box::after {
bottom: -4px;
}
div.infobox-n .heading::after,
div.nav .heading::after,
div.infobox-n .subheading::after,
div.nav .subheading::after,
.table::after {
bottom: -3px;
}
/* Remove after shadow for tables that have been centered, otherwise the shadow spans the entire page */
.table[class*="center"]::after,
.table.noshadowafter::after {
background-image: none;
}
div.infobox-n table,
div.nav table {
background-color: transparent;
}
div.infobox-n.healer-role dd,
div.infobox-n.healer-role dt {
border-color: #3c6829 !important;
}
div.infobox-n.healer-role .heading,
div.infobox-n.healer-role .subheading {
background-color: #3c6829 !important;
}
div.infobox-n.tanker-role dd,
div.infobox-n.tanker-role dt {
border-color: #364496 !important;
}
div.infobox-n.tanker-role .heading,
div.infobox-n.tanker-role .subheading {
background-color: #364496 !important;
}
div.infobox-n.dps-role dd,
div.infobox-n.dps-role dt {
border-color: #683535 !important;
}
div.infobox-n.dps-role .heading,
div.infobox-n.dps-role .subheading {
background-color: #913737 !important;
}
div.infobox-n.buff dd,
div.infobox-n.buff dt {
border-color: #399 !important;
}
div.infobox-n.buff .heading,
div.infobox-n.buff .subheading {
background-color: #399 !important;
}
div.infobox-n.debuff dd,
div.infobox-n.debuff dt {
border-color: #363 !important;
}
div.infobox-n.debuff .heading,
div.infobox-n.debuff .subheading {
background-color: #363 !important;
}
div.infobox-n.armor dd,
div.infobox-n.weapon dd,
div.infobox-n.item dd,
div.infobox-n.armor dt,
div.infobox-n.weapon dt,
div.infobox-n.item dt {
border-color: #c30;
}
div.infobox-n.armor .heading,
div.infobox-n.weapon .heading,
div.infobox-n.item .heading,
div.infobox-n.armor .subheading,
div.infobox-n.weapon .subheading,
div.infobox-n.item .subheading {
background: #c30;
}
div.infobox-n.skin dd,
div.infobox-n.skin dt {
border-color: #c4003e;
}
div.infobox-n.skin .heading,
div.infobox-n.skin .subheading {
background: #c4003e;
}
div.infobox-n.recipe {
width: 250px;
display: inline-block;
float: none;
clear: none;
vertical-align: top;
font-size: 1em;
margin: 0 1em 1em 0;
}
div.infobox-n.recipe .heading,
div.infobox-n.recipe .subheading {
font-size: 1.133em;
background: #533610;
}
div.infobox-n.recipe .wrapper {
padding: 0 10px;
}
div.infobox-n.crafting .heading,
div.infobox-n.crafting .subheading {
background: #533610;
}
div.infobox-n.crafting dd,
div.infobox-n.recipe dd,
div.infobox-n.crafting dt,
div.infobox-n.recipe dt {
border-color: #533610;
}
div.infobox-n.npc dd,
div.infobox-n.npc dt {
border-color: #390;
}
div.infobox-n.npc .heading,
div.infobox-n.npc .subheading {
background: #390;
}
div.infobox-n.skill dd,
div.infobox-n.skill dt {
border-color: #999;
}
div.infobox-n.skill .heading,
div.infobox-n.skill .subheading {
background: #444;
}
div.infobox-n.trait dd,
div.infobox-n.trait dt {
border-color: #bb7639;
}
div.infobox-n.trait .heading,
div.infobox-n.trait .subheading {
background: #ce8d54;
}
div.infobox-n.skill .icon > div {
border: 2px solid #111;
}
div.infobox-n.effect .condition {
background: #363;
}
div.infobox-n.effect .boon {
background: #399;
}
div.infobox-n.pet dd,
div.infobox-n.pet dt {
border-color: #360;
}
div.infobox-n.pet .heading,
div.infobox-n.pet .subheading {
background: #360;
}
div.infobox-n.quest dd,
div.infobox-n.quest dt {
border-color: #f90;
}
div.infobox-n.quest .heading,
div.infobox-n.quest .subheading {
background: #f90;
}
div.infobox-n.area dd,
div.infobox-n.area dt {
border-color: #306;
}
div.infobox-n.area .heading,
div.infobox-n.area .subheading {
background: #306;
}
div.nav dt,
div.nav dd,
div.infobox-n dt,
div.infobox-n dd,
div.nav table {
line-height: 1.667em;
}
div.infobox .heading,
div.infobox .subheading,
div.nav .heading,
div.nav .subheading {
color: #000 !important;
text-shadow: none !important;
border-width: 0 !important;
}
/** NAV BARS **/
div.nav {
position: relative;
width: 500px;
margin: auto;
}
div.nav .box {
position: relative;
font-size: 0.9230769231em;
border-spacing: 0;
overflow: visible;
min-height: 60px;
border: 1px solid #aaa;
margin: 5px;
padding: 0;
}
div.nav .heading {
font-family: Arial, sans-serif !important;
background-color: #888;
font-size: 1.083em;
line-height: 100%;
margin: -1px -1px 0;
padding: 0.769em 0;
}
div.nav .subheading {
font-family: Arial, sans-serif;
font-size: 1em;
font-size-adjust: 0.52;
padding: 0.833em 0;
}
.nav .selflink {
font-weight: bold;
}
div.nav dt,
div.nav dd,
div.infobox dt,
div.infobox dd,
div.nav table {
line-height: 1.667em;
}
div.nav .center {
text-align: center;
margin: 10px 0;
}
div.nav .box table {
background-color: transparent;
border-collapse: collapse;
width: 100%;
margin: 0.667em 0;
}
div.nav dt {
float: left;
text-align: right;
width: 125px;
clear: left;
border-right: 2px solid #999;
margin: 0 -2px 0 0;
padding: 2px 8px;
}
div.nav dd {
float: left;
text-align: left;
border-left: 2px solid #888;
width: 325px;
margin: 0;
padding: 2px 8px;
}
div.nav table th {
text-align: right;
border-right: 2px solid #888;
vertical-align: top;
padding: 2px 8px;
}
div.nav table td {
padding: 2px 8px;
}
div.nav table td a,
div.nav table td strong.selflink {
white-space: nowrap;
}
div.nav.thin .box {
width: 400px;
margin-left: 50px;
}
div.nav.thin dt {
width: 75px;
}
div.nav.thin dd {
width: 290px;
}
div.nav.wide .box {
width: 600px;
margin-left: -50px;
}
div.nav.wide dt {
width: 150px;
}
div.nav.wide dd {
width: 400px;
}
div.nav .heading .selflink {
font-weight: bold !important;
}
div.nav.npc .heading {
background-color: #6c3;
}
div.nav.npc dd,
div.nav.npc dt,
div.nav.npc table th {
border-color: #6c3;
}
div.nav.pve .heading {
background-color: #fc6;
}
div.nav.pve dd,
div.nav.pve dt,
div.nav.pve table th {
border-color: #fc6;
}
div.nav.equip .heading {
background-color: #f96;
}
div.nav.equip dd,
div.nav.equip dt,
div.nav.equip table th {
border-color: #f96;
}
div.nav.mech1 .heading {
background-color: #9a66cc;
}
div.nav.mech1 dd,
div.nav.mech1 dt,
div.nav.mech1 table th {
border-color: #9a66cc;
}
div.nav.mech2 .heading {
background-color: #3cc;
}
div.nav.mech2 dd,
div.nav.mech2 dt,
div.nav.mech2 table th {
border-color: #3cc;
}
div.nav.location .heading {
background-color: #96c;
}
div.nav.location dd,
div.nav.location dt,
div.nav.location table th {
border-color: #96c;
}
div.nav.lore .heading {
background-color: #c6c;
}
div.nav.lore dd,
div.nav.lore dt,
div.nav.lore table th {
border-color: #c6c;
}
div.nav.quest .heading {
background-color: #f8b57d;
}
div.nav.quest dd,
div.nav.quest dt,
div.nav.quest table th {
border-color: #f8b57d;
}
div.nav.debuff .heading {
background-color: #51a651;
}
div.nav.debuff dd,
div.nav.debuff dt,
div.nav.debuff table th {
border-color: #51a651;
}
div.nav.hom .heading {
background-color: #c96;
}
div.nav.hom dd,
div.nav.hom dt,
div.nav.hom table th {
border-color: #c96;
}
div.nav.crafting .heading,
div.nav.recipe .heading {
background-color: #963;
}
div.nav.crafting dd,
div.nav.hom dt,
div.nav.crafting table th,
div.nav.recipe dd,
div.nav.hom dt,
div.nav.recipe table th {
border-color: #963;
}
div.nav.guardian .heading,
div.nav.guardian .subheading {
background-color: #39c;
}
div.nav.guardian dd,
div.nav.guardian dt,
div.nav.guardian table th {
border-color: #39c;
}
/* FFXIV Wiki - Custom */
div.nav.class-nav table th.class-cell,
div.nav.class-nav table td.class-cell {
text-align: left;
font-weight: normal;
}
div.nav.class-nav table th {
text-align: center;
}
div.nav.class-nav table th:last-child {
border: none;
}
div.nav.class-nav {
width: 840px;
}
/* Table */
.table {
border: 0 solid;
border-collapse: collapse;
border-spacing: 0;
font-size: 0.9230769231em;
text-align: left;
clear: none;
position: relative;
display: inline-block;
vertical-align: top;
margin: 10px 0;
padding: 0;
}
/* make table captions bold */
.table > caption {
font-weight: bold;
}
/* this is a hack to add borders to IE8- */
.table > thead,
.table > tbody {
border: 0 solid #aaa\0/;
}
.table tr {
border: 1px solid #aaa\0/;
text-align: left;
border-color: #aaa;
}
/* and this removes them for IE9+ */
:root .table tr {
border-top-width: 0;
border-bottom-width: 0;
}
.table > * > tr > :first-child {
border-left: 1px solid #aaa;
}
.table > * > tr > :last-child {
border-right: 1px solid #aaa;
}
.table > tbody > tr:last-child,
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > *,
.table > caption {
border-bottom: 1px solid #aaa;
}
.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > * {
background-image: url("/images/c/cc/Infobox_header_overlay.png");
background-color: #eee;
border-color: #aaa;
padding: 0.5em;
}
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th {
line-height: 1.667em;
padding: 0.25em 0.5em;
}
.table tr > th,
.table[class*="center"] tr {
text-align: center;
}
.table[class*="left"] tr {
text-align: left;
}
.table[class*="right"] tr {
text-align: right;
}
.table[class*="middle"] tr {
vertical-align: middle;
}
.table[class*="top"] tr {
vertical-align: top;
}
.table[class*="bottom"] tr {
vertical-align: bottom;
}
.table > :first-child > tr:first-child,
.table > tbody > tr.heading {
background-color: #eee;
border: 1px solid #aaa !important;
}
.table > tbody > tr > th,
.table > tfoot > tr > th {
background-color: #e7e7e7;
border-color: #aaa;
}
.table > tbody > tr:nth-child(odd) {
background-color: #f3f3f3;
border-color: #aaa;
}
.table > tbody,
.table > tbody > tr.heading,
.table > tbody > tr > [rowspan],
.table > tbody > tr > [colspan] {
border: 1px solid #aaa;
}
.table > :first-child > tr:first-child + tr [rowspan],
.table > :first-child > tr:first-child + tr [colspan] {
border-top-width: 0;
}
.table .line,
.table .line-bottom {
border-bottom-width: 1px !important;
border-bottom-style: solid;
}
.table .line-top {
border-top-width: 1px !important;
border-top-style: solid;
border-top-color: #aaa;
}
.table .line-left {
border-left-width: 1px !important;
border-left-style: solid;
border-left-color: #aaa;
}
.table .line-right {
border-right-width: 1px !important;
border-right-style: solid;
border-right-color: #aaa;
}
.table table {
background-color: transparent;
padding: 0;
margin: 0;
}
/* any */
.table.any > :first-child > tr:first-child,
.table.any > tbody > tr.heading,
.table.any > :first-child > tr:first-child > *,
.table.any > tbody > tr.heading > * {
background-color: #888 !important;
border-color: #6d6d6d !important;
}
.table.any > tbody > tr > th,
.table.any > tfoot > tr > th,
.table.any > thead > tr > th,
table.table > tbody > tr.any > th {
background-color: #ccc;
border-color: #aaa;
}
.table.any > tbody > tr:nth-child(odd),
.table > tbody > tr.any:nth-child(odd) {
background-color: #eee;
}
/*Important: Show only mobile ad code on mobile*/
.nomobile {
display: none !important;
}
/* Recipe boxes that don't look like infoboxes */
div.recipe-box {
/* from div.infobox-n.recipe */
min-width: 300px;
display: inline-block;
float: none;
clear: none;
vertical-align: top;
font-size: 1em;
margin: 0 1em 0 0;
/* from div.infobox-n*/
position: relative;
background: #fff;
border: 1px solid #aaa;
padding: 0;
/* from div.infobox, div.nav .box */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFFFF,EndColorStr=#FFEEEEEE);
background-image: linear-gradient(top, #fff 0%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fff),
color-stop(1, #eee)
);
}
div.recipe-box::after {
/* from div.infobox:after */
bottom: -4px;
content: "";
position: absolute;
width: 100%;
left: 0;
height: 3px;
background-image: url("/mediawiki/images/4/45/Shadow_after.png");
background-size: 100% 3px;
}
div.recipe-box .subheading,
div.recipe-box .heading {
text-align: center;
background-color: #d3c0a8;
padding: 2px;
font-weight: bold;
background-image: url("/mediawiki/images/b/b3/Box_overlay.png") !important;
border: 1px solid rgba(0, 0, 0, 0.25);
margin: -1px -1px 5px !important;
}
div.recipe-box .subheading {
border-width: 0 1px;
}
div.recipe-box dl {
margin: 10px 0;
}
div.recipe-box dt {
float: left;
text-align: right;
width: 130px; /* CUSTOM (OLD: 112px) */
line-height: 1em;
font-weight: 700;
clear: left;
border-right: 2px solid #a99a86;
margin: 0 -2px 0 0;
padding: 2px 8px 2px 3px;
line-height: 1.4em; /* CUSTOM (OLD: 1.667em) */
}
div.recipe-box dd {
float: left;
border-left: 2px solid #999;
margin: 0;
padding: 2px 7px;
line-height: 1.4;
}
/* For generic ingredient lists anywhere on the wiki */
div.ingredients dt {
float: left;
clear: left;
text-align: right;
font-weight: normal;
width: 25px;
margin: 0 -2px 0 0;
padding: 2px 2px 2px 3px;
line-height: 1.4em; /* CUSTOM (OLD: 1.667em) */
border: none;
}
div.ingredients.wide dt {
width: 50px;
}
div.ingredients dd {
float: left;
margin: 0;
padding: 1px 4px; /* CUSTOM (OLD: 2px 7px) */
border: none;
}
div.ingredients dl {
margin: 2px 0;
}
.ingredients .standard-frame-icon a.external.text {
background: none !important;
}
.ingredients .standard-frame-icon.small {
display: inline-block !important;
}
/** STDT table classes **/
/* dps-role*/
.table.dps-role > :first-child > tr:first-child,
.table.dps-role > tbody > tr.heading,
.table.dps-role > :first-child > tr:first-child > *,
.table.dps-role > tbody > tr.heading > * {
background-color: #bb6363 !important;
border-color: #9a4848 !important;
}
.table.dps-role > tbody > tr > th,
.table.dps-role > tfoot > tr > th,
.table.dps-role > thead > tr > th,
table.table > tbody > tr.dps-role > th {
background-color: #a9d3b7;
border-color: #87a992;
}
.table.dps-role > tbody > tr:nth-child(odd),
.table > tbody > tr.dps-role:nth-child(odd) {
background-color: #f2e8e5;
}
/* healer-role*/
.table.healer-role > :first-child > tr:first-child,
.table.healer-role > tbody > tr.heading,
.table.healer-role > :first-child > tr:first-child > *,
.table.healer-role > tbody > tr.heading > * {
background-color: #3c6829 !important;
border-color: #2a491d !important;
}
.table.healer-role > tbody > tr > th,
.table.healer-role > tfoot > tr > th,
.table.healer-role > thead > tr > th,
table.table > tbody > tr.healer-role > th {
background-color: #a9d3b7;
border-color: #87a992;
}
.table.healer-role > tbody > tr:nth-child(odd),
.table > tbody > tr.healer-role:nth-child(odd) {
background-color: #e7f3e2;
}
/* tanker-role*/
.table.tanker-role > :first-child > tr:first-child,
.table.tanker-role > tbody > tr.heading,
.table.tanker-role > :first-child > tr:first-child > *,
.table.tanker-role > tbody > tr.heading > * {
background-color: #5587c1 !important;
border-color: #4871a0 !important;
}
.table.tanker-role > tbody > tr > th,
.table.tanker-role > tfoot > tr > th,
.table.tanker-role > thead > tr > th,
table.table > tbody > tr.tanker-role > th {
background-color: #a9d3b7;
border-color: #87a992;
}
.table.tanker-role > tbody > tr:nth-child(odd),
.table > tbody > tr.tanker-role:nth-child(odd) {
background-color: #d2e3f7;
}
/* crafting-role*/
.table.crafting-role > :first-child > tr:first-child,
.table.crafting-role > tbody > tr.heading,
.table.crafting-role > :first-child > tr:first-child > *,
.table.crafting-role > tbody > tr.heading > * {
background-color: #878eb5 !important;
border-color: #777d9e !important;
}
.table.crafting-role > tbody > tr > th,
.table.crafting-role > tfoot > tr > th,
.table.crafting-role > thead > tr > th,
table.table > tbody > tr.crafting-role > th {
background-color: #a9d3b7;
border-color: #87a992;
}
.table.crafting-role > tbody > tr:nth-child(odd),
.table > tbody > tr.crafting-role:nth-child(odd) {
background-color: #dfe1ec;
}
/* gathering-role*/
.table.gathering-role > :first-child > tr:first-child,
.table.gathering-role > tbody > tr.heading,
.table.gathering-role > :first-child > tr:first-child > *,
.table.gathering-role > tbody > tr.heading > * {
background-color: #78a923 !important;
border-color: #5a8019 !important;
}
.table.gathering-role > tbody > tr > th,
.table.gathering-role > tfoot > tr > th,
.table.gathering-role > thead > tr > th,
table.table > tbody > tr.gathering-role > th {
background-color: #cbeb93;
border-color: #87a992;
}
.table.gathering-role > tbody > tr:nth-child(odd),
.table > tbody > tr.gathering-role:nth-child(odd) {
background-color: #eaf7d4;
}
/* pet-role*/
.table.pet-role > :first-child > tr:first-child,
.table.pet-role > tbody > tr.heading,
.table.pet-role > :first-child > tr:first-child > *,
.table.pet-role > tbody > tr.heading > * {
background-color: #5fb7aa !important;
border-color: #479e91 !important;
}
.table.pet-role > tbody > tr > th,
.table.pet-role > tfoot > tr > th,
.table.pet-role > thead > tr > th,
table.table > tbody > tr.pet-role > th {
background-color: #a9d3b7;
border-color: #87a992;
}
.table.pet-role > tbody > tr:nth-child(odd),
.table > tbody > tr.pet-role:nth-child(odd) {
background-color: #edf7f6;
}
/* npc */
.table.npc > :first-child > tr:first-child,
.table.npc > tbody > tr.heading,
.table.npc > :first-child > tr:first-child > *,
.table.npc > tbody > tr.heading > * {
background-color: #6c3 !important;
border-color: #52a329 !important;
}
.table.npc > tbody > tr > th,
.table.npc > tfoot > tr > th,
.table.npc > thead > tr > th,
table.table > tbody > tr.npc > th {
background-color: #b3e699;
border-color: #8fb87a;
}
.table.npc > tbody > tr:nth-child(odd),
.table > tbody > tr.npc:nth-child(odd) {
background-color: #e8f8e1;
}
/* pve */
.table.pve > :first-child > tr:first-child,
.table.pve > tbody > tr.heading,
.table.pve > :first-child > tr:first-child > *,
.table.pve > tbody > tr.heading > * {
background-color: #fc6 !important;
border-color: #cca352 !important;
}
.table.pve > tbody > tr > th,
.table.pve > tfoot > tr > th,
.table.pve > thead > tr > th,
table.table > tbody > tr.pve > th {
background-color: #ffe6b3;
border-color: #ccb88f;
}
.table.pve > tbody > tr:nth-child(odd),
.table > tbody > tr.pve:nth-child(odd) {
background-color: #fff8e8;
}
/* equip or item*/
.table.equip > :first-child > tr:first-child,
.table.equip > tbody > tr.heading,
.table.equip > :first-child > tr:first-child > *,
.table.equip > tbody > tr.heading > *,
.table.item > :first-child > tr:first-child,
.table.item > tbody > tr.heading,
.table.item > :first-child > tr:first-child > *,
.table.item > tbody > tr.heading > * {
background-color: #f96 !important;
border-color: #cc7a52 !important;
}
.table.equip > tbody > tr > th,
.table.equip > tfoot > tr > th,
.table.equip > thead > tr > th,
table.table > tbody > tr.equip > th,
.table.item > tbody > tr > th,
.table.item > tfoot > tr > th,
.table.item > thead > tr > th,
table.table > tbody > tr.item > th {
background-color: #ffccb3;
border-color: #cca38f;
}
.table.equip > tbody > tr:nth-child(odd),
.table > tbody > tr.equip:nth-child(odd),
.table.item > tbody > tr:nth-child(odd),
.table > tbody > tr.item:nth-child(odd) {
background-color: #fff0e8;
}
/* skin */
.table.skin > :first-child > tr:first-child,
.table.skin > tbody > tr.heading,
.table.skin > :first-child > tr:first-child > *,
.table.skin > tbody > tr.heading > * {
background-color: #e07a98 !important;
border-color: #996574 !important;
}
.table.skin > tbody > tr > th,
.table.skin > tfoot > tr > th,
.table.skin > thead > tr > th,
table.table > tbody > tr.skin > th {
background-color: #ffd4df;
border-color: #b3a1a5;
}
.table.skin > tbody > tr:nth-child(odd),
.table > tbody > tr.skin:nth-child(odd) {
background-color: #ffedf4;
}
/* mech1 */
.table.mech1 > :first-child > tr:first-child,
.table.mech1 > tbody > tr.heading,
.table.mech1 > :first-child > tr:first-child > *,
.table.mech1 > tbody > tr.heading > * {
background-color: #69c !important;
border-color: #527aa3 !important;
}
.table.mech1 > tbody > tr > th,
.table.mech1 > tfoot > tr > th,
.table.mech1 > thead > tr > th,
table.table > tbody > tr.mech1 > th {
background-color: #b3cce6;
border-color: #8fa3b8;
}
.table.mech1 > tbody > tr:nth-child(odd),
.table > tbody > tr.mech1:nth-child(odd) {
background-color: #e8f0f8;
}
/* mech2 */
.table.mech2 > :first-child > tr:first-child,
.table.mech2 > tbody > tr.heading,
.table.mech2 > :first-child > tr:first-child > *,
.table.mech2 > tbody > tr.heading > * {
background-color: #3cc !important;
border-color: #29a3a3 !important;
}
.table.mech2 > tbody > tr > th,
.table.mech2 > tfoot > tr > th,
.table.mech2 > thead > tr > th,
table.table > tbody > tr.mech2 > th {
background-color: #99e6e6;
border-color: #7ab8b8;
}
.table.mech2 > tbody > tr:nth-child(odd),
.table > tbody > tr.mech2:nth-child(odd) {
background-color: #e1f8f8;
}
/* lore */
.table.lore > :first-child > tr:first-child,
.table.lore > tbody > tr.heading,
.table.lore > :first-child > tr:first-child > *,
.table.lore > tbody > tr.heading > * {
background-color: #c6c !important;
border-color: #a352a3 !important;
}
.table.lore > tbody > tr > th,
.table.lore > tfoot > tr > th,
.table.lore > thead > tr > th,
table.table > tbody > tr.lore > th {
background-color: #e6b3e6;
border-color: #b88fb8;
}
.table.lore > tbody > tr:nth-child(odd),
.table > tbody > tr.lore:nth-child(odd) {
background-color: #f8e8f8;
}
/* location */
.table.location > :first-child > tr:first-child,
.table.location > tbody > tr.heading,
.table.location > :first-child > tr:first-child > *,
.table.location > tbody > tr.heading > * {
background-color: #96c !important;
border-color: #7a52a3 !important;
}
.table.location > tbody > tr > th,
.table.location > tfoot > tr > th,
.table.location > thead > tr > th,
table.table > tbody > tr.location > th {
background-color: #ccb3e6;
border-color: #a38fb8;
}
.table.location > tbody > tr:nth-child(odd),
.table > tbody > tr.location:nth-child(odd) {
background-color: #f0e8f8;
}
/* promo */
.table.promo > :first-child > tr:first-child,
.table.promo > tbody > tr.heading,
.table.promo > :first-child > tr:first-child > *,
.table.promo > tbody > tr.heading > * {
background-color: #9c3 !important;
border-color: #7aa329 !important;
}
.table.promo > tbody > tr > th,
.table.promo > tfoot > tr > th,
.table.promo > thead > tr > th,
table.table > tbody > tr.promo > th {
background-color: #cce699;
border-color: #a3b87a;
}
.table.promo > tbody > tr:nth-child(odd),
.table > tbody > tr.promo:nth-child(odd) {
background-color: #f0f8e1;
}
/* buff */
.table.buff > :first-child > tr:first-child,
.table.buff > tbody > tr.heading,
.table.buff > :first-child > tr:first-child > *,
.table.buff > tbody > tr.heading > * {
background-color: #73d9d9 !important;
border-color: #5caeae !important;
}
.table.buff > tbody > tr > th,
.table.buff > tfoot > tr > th,
.table.buff > thead > tr > th,
table.table > tbody > tr.buff > th {
background-color: #b9ecec;
border-color: #94bdbd;
}
.table.buff > tbody > tr:nth-child(odd),
.table > tbody > tr.buff:nth-child(odd) {
background-color: #eaf9f9;
}
/* debuff */
.table.debuff > :first-child > tr:first-child,
.table.debuff > tbody > tr.heading,
.table.debuff > :first-child > tr:first-child > *,
.table.debuff > tbody > tr.heading > * {
background-color: #51a651 !important;
border-color: #418541 !important;
}
.table.debuff > tbody > tr > th,
.table.debuff > tfoot > tr > th,
.table.debuff > thead > tr > th,
table.table > tbody > tr.debuff > th {
background-color: #a8d3a8;
border-color: #86a986;
}
.table.debuff > tbody > tr:nth-child(odd),
.table > tbody > tr.debuff:nth-child(odd) {
background-color: #e5f2e5;
}
/* crafting */
/* recipe */
.table.crafting > :first-child > tr:first-child,
.table.crafting > tbody > tr.heading,
.table.crafting > :first-child > tr:first-child > *,
.table.crafting > tbody > tr.heading > *,
.table.recipe > :first-child > tr:first-child,
.table.recipe > tbody > tr.heading,
.table.recipe > :first-child > tr:first-child > *,
.table.recipe > tbody > tr.heading > * {
background-color: #a68151 !important;
border-color: #856741 !important;
}
.table.crafting > tbody > tr > th,
.table.crafting > tfoot > tr > th,
.table.crafting > thead > tr > th,
table.table > tbody > tr.crafting > th,
.table.recipe > tbody > tr > th,
.table.recipe > tfoot > tr > th,
.table.recipe > thead > tr > th,
table.table > tbody > tr.recipe > th {
background-color: #d3c0a8;
border-color: #a99a86;
}
/* Action tables */
.table.actions,
.table.traits {
width: 100%;
max-width: 1000px;
display: table;
}
.table.actions > :first-child > tr:first-child ~ tr th[colspan],
.table.traits > :first-child > tr:first-child ~ tr th[colspan] {
text-align: left;
}
.table.actions
> :first-child
> tr:first-child
~ tr
th[colspan]
span.editsection,
.table.traits
> :first-child
> tr:first-child
~ tr
th[colspan]
span.editsection {
display: none;
}
.table.actions > :first-child > tr:first-child ~ tr th[colspan] h4,
.table.traits > :first-child > tr:first-child ~ tr th[colspan] h4 {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
/* Using : lists within tables */
/* no top/bottom margin in these tables */
.table.fm dl,
.table.craftvariants dl {
margin-top: 0;
margin-bottom: 0;
}
/* no left margin when used purely for structure within these tables */
.table.locations dd,
.table.fm dd,
table.craftvariants dd {
margin-left: 0;
}
/* restore margin if it's actually being used as a definition list */
.table.locations dl > dt ~ dd {
margin-left: 2em;
}
/* Using * lists within combo tables */
.table.combo ul {
margin: 0.15em 0;
}
.table.combo li {
display: block;
}
.table .standard-frame-icon.small {
display: inline-block !important;
}
.table .standard-frame-icon.small a.external.text {
background: none !important;
}
.recipe div.ingredients dt {
padding: 3px 15px 5px 0px !important;
}
.recipe div.ingredients dd {
float: none !important;
}
/* TABLES */
/* quest */
.table.quest > :first-child > tr:first-child,
.table.quest > tbody > tr.heading,
.table.quest > :first-child > tr:first-child > *,
.table.quest > tbody > tr.heading > * {
background-color: #efae4d !important;
border-color: #e18f14 !important;
}
.table.quest > tbody > tr > th,
.table.quest > tfoot > tr > th,
.table.quest > thead > tr > th,
table.table > tbody > tr.quest > th {
background-color: #efae4d;
border-color: #e18f14;
}
.table.quest > tbody > tr:nth-child(odd),
.table > tbody > tr.quest:nth-child(odd) {
background-color: #fff3d8;
}
/* Relic weapons nav */
div.nav.relic .pre-relic-label {
width: 120px;
}
div.nav.relic .relic-list {
padding-bottom: 6px;
}
div.nav.relic .role-subheading {
padding: 0 8px;
position: absolute;
}
div.nav.relic td.mw-collapsible div.mw-collapsible-content {
padding-top: 0.6em;
}
div.nav.relic .first-role-job {
width: 112px;
}
div.nav.relic .heading {
background-color: #8d5bc2;
}
div.nav.relic dd,
div.nav.relic dt,
div.nav.relic table th {
border-color: #8d5bc2;
}
.table.crafting > tbody > tr:nth-child(even),
.table > tbody > tr.crafting:nth-child(even),
.table.recipe > tbody > tr:nth-child(even),
.table > tbody > tr.recipe:nth-child(even) {
background-color: #f2ece5 !important;
}
.table.crafting > tbody > tr:nth-child(odd),
.table > tbody > tr.crafting:nth-child(odd),
.table.recipe > tbody > tr:nth-child(odd),
.table > tbody > tr.recipe:nth-child(odd) {
background-color: #fffffe !important;
}