Guild Wars 2 Wiki:Projects/CSS documentation/template infoboxes- monobook
From Guild Wars 2 Wiki
Jump to navigationJump to search
div.infobox { float: right; position: relative; width: 250px; background: #FFF; font-size: 0.923em; border: 1px solid #AAA; margin: 0 0 1em 1em; padding: 0; background-image: linear-gradient(135deg,#fff 0%,#eee 100%); } div.infobox .infobox-icon { float: right; position: relative; z-index: 2; width: auto; margin: 5px; } /* Missing icons */ .infobox-icon a.new { color: transparent; display: inline-block; font: 0/0 a; overflow: hidden; vertical-align: middle; background-image: url("/images/thumb/7/74/Skill.png/40px-Skill.png"); height: 40px; width: 40px; } .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 { 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 .heading { font-weight: 700; background-image: url("/images/c/cc/Infobox_header_overlay.png") !important; text-align: center; border: 1px solid rgba(0, 0, 0, 0.25); border-bottom-width: 0; position: relative; z-index: 1; margin: -1px -1px 5px !important; } div.infobox .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 .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: 2px solid #999; margin: 0 -2px 0 0; padding: 2px 8px 2px 3px; } div.infobox dd { float: left; width: 140px; font-weight: 400; border-left: 2px solid #999; 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: -3px; } div.infobox table { background-color: transparent; } div.infobox dt, div.infobox dd { line-height: 1.667em; } /* declare skill and trait infoboxes first because these colours are overwritten by professions */ div.infobox.skill .heading, div.infobox.trait .heading { background-color: #444; } div.infobox.skill dd, div.infobox.skill dt, div.infobox.trait dd, div.infobox.trait dt { border-color: #999; } .skill .infobox-icon > div { border: 2px solid #111; } div.infobox.guardian .heading { background-color: #066; } div.infobox.guardian dd, div.infobox.guardian dt { border-color: #066; } div.infobox.revenant .heading { background-color: #861313; } div.infobox.revenant dd, div.infobox.revenant dt { border-color: #861313; } div.infobox.warrior .heading { background-color: #C60; } div.infobox.warrior dd, div.infobox.warrior dt { border-color: #C60; } div.infobox.engineer .heading { background-color: #630; } div.infobox.engineer dd, div.infobox.engineer dt { border-color: #630; } div.infobox.ranger .heading { background-color: #360; } div.infobox.ranger dd, div.infobox.ranger dt { border-color: #360; } div.infobox.thief .heading { background-color: #933; } div.infobox.thief dd, div.infobox.thief dt { border-color: #933; } div.infobox.elementalist .heading { background-color: #C00; } div.infobox.elementalist dd, div.infobox.elementalist dt { border-color: #C00; } div.infobox.mesmer .heading { background-color: #606; } div.infobox.mesmer dd, div.infobox.mesmer dt { border-color: #606; } div.infobox.necromancer .heading { background-color: #063; } div.infobox.necromancer dd, div.infobox.necromancer dt { border-color: #063; } div.infobox.asura .heading { background-color: #63C; } div.infobox.asura dd, div.infobox.asura dt { border-color: #63C; } div.infobox.charr .heading { background-color: #900; } div.infobox.charr dd, div.infobox.charr dt { border-color: #900; } div.infobox.human .heading { background-color: #C90; } div.infobox.human dd, div.infobox.human dt { border-color: #C90; } div.infobox.norn .heading { background-color: #069; } div.infobox.norn dd, div.infobox.norn dt { border-color: #069; } div.infobox.sylvari .heading { background-color: #060; } div.infobox.sylvari dd, div.infobox.sylvari dt { border-color: #060; } div.infobox.boon .heading { background-color: #399; } div.infobox.boon dd, div.infobox.boon dt { border-color: #399; } div.infobox.condition .heading { background-color: #363; } div.infobox.condition dd, div.infobox.condition dt { border-color: #363; } div.infobox.promo .heading { background-color: #6EA500; } div.infobox.promo dd, div.infobox.promo dt { border-color: #6EA500; } div.infobox.item .heading { background-color: #C30; } div.infobox.item dd, div.infobox.item dt { border-color: #C30; } div.infobox.skin .heading { background-color: #C4003E; } div.infobox.skin dd, div.infobox.skin dt { border-color: #C4003E; } div.infobox.crafting .heading { background-color: #533610; } div.infobox.crafting dd, div.infobox.crafting dt { border-color: #533610; } div.infobox.npc .heading { background-color: #390; } div.infobox.npc dd, div.infobox.npc dt { border-color: #390; } div.infobox.pet .heading { background-color: #360; } div.infobox.pet dd, div.infobox.pet dt { border-color: #360; } div.infobox.quest .heading { background-color: #F90; } div.infobox.quest dd, div.infobox.quest dt { border-color: #F90; } div.infobox.area .heading { background-color: #306; } div.infobox.area dd, div.infobox.area dt { border-color: #306; } div.infobox.rewardtrack .heading { background-color: #001434; } div.infobox.rewardtrack dd, div.infobox.rewardtrack dt { border-color: #4C5A70; } /* 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; background: #FFF; border: 1px solid #AAA; padding: 0; background-image: linear-gradient(135deg,#fff 0%,#eee 100%); } div.recipe-box::after { /* from div.infobox: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 .subheading, div.recipe-box .heading { text-align: center; background-color: #D3C0A8; padding: 2px; font-weight: bold; background-image: url("/images/c/cc/Infobox_header_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: 78px; 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.667em; } div.recipe-box dd { float: left; border-left: 2px solid #A99A86; margin: 0; padding: 2px 7px; }