Guild Wars 2 Wiki:Projects/CSS documentation/template infoboxes- vector
From Guild Wars 2 Wiki
Jump to navigationJump to search
/** INFOBOXES **/ div.infobox { float: right; position: relative; width: 250px; font-size: 0.923em; border-width: 1px; border-style: solid; margin: 0 0 1em 1em; padding: 0; } .infobox-icon { float: right; position: relative; z-index: 2; width: auto; margin: 5px; } .infobox.skill .infobox-icon > div { border: 2px solid #111; } /* Missing icons */ .infobox-icon a.new { color: transparent; display: inline-block; font-size: 0; overflow: hidden; vertical-align: middle; background-image: url("/images/thumb/7/74/Skill.png/40px-Skill.png"); height: 40px; width: 40px; } .infobox.skill .infobox-icon a.new { background-image: url("/images/thumb/7/74/Skill.png/48px-Skill.png"); height: 48px; width: 48px; } /* animation link beneath icon */ .infobox-icon p { font-size: 9px !important; line-height: 1em; margin: 0.25em -0.5em; padding: 2px; } div.infobox .heading { border-bottom-width: 0; font-family: EasonPro, "Times New Roman", serif !important; font-size-adjust: 0.43; font-size: 1.417em !important; font-weight: 700; line-height: 1.176em; margin: -1px -1px 5px !important; padding: 0.5em !important; position: relative; text-align: center; z-index: 1; border-width: 1px; border-style: solid; } div.infobox .statistics { text-align: center; margin: 0 8px; } div.infobox .image_wrapper { text-align: center; padding: 0; margin: 10px 0; } div.infobox .statistics span + span { margin-left: 5px; } div.infobox .wrapper { clear: both; padding: 0; } div.infobox dt { float: left; text-align: right; width: 78px; line-height: 1em; font-weight: 700; clear: left; border-right-width: 1px; border-right-style: solid; margin: 0 -1px 0 0; padding: 2px 8px 2px 3px; } div.infobox dd { float: left; width: 125px; font-weight: 400; border-left-width: 1px; border-left-style: solid; margin: 0; padding: 2px 7px; } div.infobox::after, div.infobox .heading::after { content: ""; position: absolute; width: 100%; left: 0; height: 3px; background-image: url("/images/4/45/Shadow_after.png"); background-size: 100% 3px; } div.infobox::after, div.infobox .heading::after { bottom: -4px; } div.infobox table { background-color: transparent; } div.infobox dt, div.infobox dd { line-height: 1.667em; } /* Switch locator maps from black to white borders with orange areas, and also if using the locator subpage template */ .infobox.area a[href$="locator.svg"], .infobox.area img[alt$="locator.svg"] { filter: invert(100%) hue-rotate(220deg) brightness(78%); } /* RECIPE BOXES */ div.recipe-box { min-width: 300px; display: inline-block; float: none; clear: none; vertical-align: top; font-size: 1em; margin: 0 1em 0 0; position: relative; border-width: 1px; border-style: solid; padding: 0; } /* same as div.infobox:after */ div.recipe-box::after { bottom: -4px; content: ""; position: absolute; width: 100%; left: 0; height: 3px; background-image: url("/images/4/45/Shadow_after.png"); background-size: 100% 3px; } div.recipe-box .heading, div.recipe-box .subheading { text-align: center; padding: 2px; font-weight: bold; border-width: 1px; border-style: solid; 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: 78px; line-height: 1em; font-weight: 700; clear: left; border-right-width: 1px; border-right-style: solid; margin: 0 -1px 0 0; padding: 2px 8px 2px 3px; line-height: 1.667em; } div.recipe-box dd { float: left; border-left-width: 1px; border-left-style: solid; margin: 0; padding: 2px 7px; } div.infobox, div.recipe-box { background-color: #40434A; /* color scheme: inactive tabs */ } div.infobox .heading, div.recipe-box .heading, div.recipe-box .subheading { background-color: #1A1A1A; /* color scheme: super dark */ } div.infobox, div.infobox .heading, div.infobox dt, div.infobox dd, div.recipe-box, div.recipe-box dt, div.recipe-box dd, div.recipe-box .heading, div.recipe-box .subheading { border-color: #5A5C5E; /* color scheme: gray page border */ }