MediaWiki:Mobile.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will affect users of the mobile site */ /* new mobile CSS (after updating the wiki version */ /* 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; }