Template:Infobox/styles.css
Jump to navigation
Jump to search
/** INFOBOXES **/
div.infobox-n {
float: right;
position: relative;
width: 300px;
background: #fff;
font-size: 0.923em;
border: 1px solid #aaa;
margin: 0 0 1em 1em;
padding: 0;
}
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,
div.infobox-n .details {
text-align: center;
margin: 0 8px;
}
div.infobox-n .statistics span + span,
div.infobox-n .details span + span {
margin-left: 5px;
}
div.infobox-n .heading {
font-weight: 700;
background-image: url("/mediawiki/images/b/b3/Box_overlay.png");
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.5em !important;
}
div.infobox-n .subheading {
font-weight: 700;
background-color: #888;
background-image: url("/mediawiki/images/b/b3/Box_overlay.png");
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.infobox-n dl {
margin: 10px 0;
}
div.infobox-n dt {
float: left;
text-align: right;
width: 90px;
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: 170px;
font-weight: 400;
border-left: 2px solid #999;
margin: 0;
padding: 2px 7px;
}
/* CUSTOM: Weapon widths */
div.infobox-n.weapon dt {
width: 120px;
}
div.infobox-n.weapon dd {
width: 140px;
}
div.infobox-n .image_wrapper {
text-align: center;
padding: 0;
margin: 10px 0;
}
div.infobox-n::after,
div.infobox-n .heading::after,
div.infobox-n .subheading::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 {
bottom: -4px;
}
div.infobox-n .heading::after,
div.infobox-n .subheading::after {
bottom: -3px;
}
div.infobox-n table {
background-color: transparent;
}
div.infobox-n.healer-role dd,
div.infobox-n.healer-role dt {
border-color: #2a491d !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: #4871a0 !important;
}
div.infobox-n.tanker-role .heading,
div.infobox-n.tanker-role .subheading {
background-color: #5587c1 !important;
}
div.infobox-n.dps-role dd,
div.infobox-n.dps-role dt {
border-color: #9a4848 !important;
}
div.infobox-n.dps-role .heading,
div.infobox-n.dps-role .subheading {
background-color: #bb6363 !important;
}
div.infobox-n.pet-role dd,
div.infobox-n.pet-role dt {
border-color: #479e91 !important;
}
div.infobox-n.pet-role .heading,
div.infobox-n.pet-role .subheading {
background-color: #5fb7aa !important;
}
div.infobox-n.crafting-role dd,
div.infobox-n.crafting-role dt {
border-color: #777d9e !important;
}
div.infobox-n.crafting-role .heading,
div.infobox-n.crafting-role .subheading {
background-color: #878eb5 !important;
}
div.infobox-n.gathering-role dd,
div.infobox-n.gathering-role dt {
border-color: #5a8019 !important;
}
div.infobox-n.gathering-role .heading,
div.infobox-n.gathering-role .subheading {
background-color: #78a923 !important;
}
div.infobox-n.mixed-role dd,
div.infobox-n.mixed-role dt {
border-color: #ac8920 !important;
}
div.infobox-n.mixed-role .heading,
div.infobox-n.mixed-role .subheading {
background-color: #deb94e !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.mount dd,
div.infobox-n.mount dt {
border-color: #b042bd !important;
}
div.infobox-n.mount .heading,
div.infobox-n.mount .subheading {
background-color: #cf72da !important;
}
div.infobox-n.armor dd,
div.infobox-n.weapon dd,
div.infobox-n.trinket dd,
div.infobox-n.item dd,
div.infobox-n.armor dt,
div.infobox-n.weapon dt,
div.infobox-n.trinket dt,
div.infobox-n.item dt {
border-color: #c30;
}
div.infobox-n.armor .heading,
div.infobox-n.weapon .heading,
div.infobox-n.trinket .heading,
div.infobox-n.item .heading,
div.infobox-n.armor .subheading,
div.infobox-n.weapon .subheading,
div.infobox-n.trinket .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: 300px;
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.action dd,
div.infobox-n.action dt {
border-color: #999;
}
div.infobox-n.trait dd,
div.infobox-n.trait dt {
border-color: #bb7639;
}
div.infobox-n.trait .heading,
div.infobox-n.trait .subheading {
background: #444;
}
div.infobox-n.trait .heading,
div.infobox-n.trait .subheading {
background: #ce8d54;
}
div.infobox-n.effect .debuff {
background: #363;
}
div.infobox-n.effect .buff {
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: #eea63a;
}
div.infobox-n.quest .heading,
div.infobox-n.quest .subheading {
background: #efaa43;
}
div.infobox-n.duty dd,
div.infobox-n.duty dt {
border-color: #fb6537;
}
div.infobox-n.duty .heading,
div.infobox-n.duty .subheading {
background: #fb6537;
}
div.infobox-n.fate dd,
div.infobox-n.fate dt {
border-color: #bd50d7;
}
div.infobox-n.fate .heading,
div.infobox-n.fate .subheading {
background: #9334be;
}
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.infobox-n dt,
div.infobox-n dd {
line-height: 1.4em; /* CUSTOM (OLD: 1.667em) */
}
@media print {
div.infobox-n .heading,
div.infobox-n .subheading {
color: #000 !important;
text-shadow: none !important;
border-width: 0 !important;
}
}
/* Item statistics */
.infobox-n .statistics.item,
.infobox-n .statistics.weapon {
background-color: #ffece5;
border-bottom: 1px solid #ffdacc;
border-top: 1px solid #ffc7b3;
padding-left: 2em;
margin: 0;
}
.infobox-n .statistics.item.empty,
.infobox-n .statistics.weapon.empty {
border: none;
}
.infobox-n .statistics.item .characteristic,
.infobox-n .statistics.weapon .characteristic {
font-size: 82%;
font-weight: bold;
}
.infobox-n .statistics .unique {
color: #b39e42;
}
.infobox-n .statistics .untradable {
color: #31b434;
}
/* Mount details */
.infobox-n .details.mount {
background-color: #fce5ff;
border-bottom: 1px solid #f9ccff;
border-top: 1px solid #f6b3ff;
padding-left: 2em;
margin: 0;
}
.infobox-n .details.mount.empty {
border: none;
}
.infobox-n .details.mount .characteristic {
font-size: 82%;
font-weight: bold;
}
/* NPC statistics */
.infobox-n .statistics.hunt {
font-weight: bold;
font-style: italic;
font-size: 0.9em;
text-shadow: 0px 0px 1px #333;
}
.infobox-n .statistics.hunt.rank-a {
background: linear-gradient(to right, #fd2424, #fffdbc);
border-bottom: 1px solid #ffcc80;
border-top: 1px solid #ffad33;
margin: 0;
}
.infobox-n .statistics.hunt.rank-b {
background: linear-gradient(to right, #009e81, #d8fdf6);
border-bottom: 1px solid #75f0d9;
border-top: 1px solid #17cfad;
margin: 0;
}
.infobox-n .statistics.hunt.rank-s {
background: linear-gradient(to right, #c619ff, #feffff);
border-bottom: 1px solid #c180ff;
border-top: 1px solid #a733ff;
margin: 0;
}
/* Fix quest infobox dt to accommodate previous quest */
div.infobox-n.quest dt {
width: 100px;
}
.infobox-n .image_wrapper .image img {
width: auto;
height: auto;
/* NOTE: these dimensions are also hardcoded in {{infobox image}}; don't update one without updating the other */
max-width: 280px;
max-height: 420px;
}
.infobox-n .tabber__tabs {
justify-content: safe center;
}
/* make the Mobile infobox above content */
body.skin-minerva .infobox-n {
float:none!important;
}
.infobox-n .clear {height: 5px}
/* Mobile */
@media (max-width: 768px) {
.infobox-n .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 .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.infobox-n .statistics span + span {
margin-left: 5px;
}
div.infobox-n .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 {
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.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.infobox-n .heading::after,
div.infobox-n .subheading::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 {
bottom: -4px;
}
div.infobox-n .heading::after,
div.infobox-n .subheading::after {
bottom: -3px;
}
div.infobox-n table {
background-color: transparent;
}
/* #region TODO: I'm pretty sure literally all of this can be deleted */
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;
}
/* #endregion */
div.infobox-n dt,
div.infobox-n dd {
line-height: 1.667em;
}
}
/* Dark theme */
@media screen {
html.view-dark .infobox-n {
border: 1px solid #383838 !important;
background-color: #181818 !important;
}
html.view-dark .infobox-n .heading {
margin: -1px -1px 5px !important;
border: 1px solid #383838 !important;
background-image: none !important;
}
html.view-dark .infobox-n .subheading {
background-image: none !important;
}
html.view-dark .infobox-n .statistics.item,
html.view-dark .infobox-n .statistics.weapon {
background-color: #2E3134 !important;
border-top-color: #383838 !important;
border-bottom-color: #383838 !important;
}
html.view-dark .infobox-n .details.mount {
background-color: #2E3134 !important;
border-top-color: #383838 !important;
border-bottom-color: #383838 !important;
}
}