Template:SkillLevelsInfoBox/styles.css
From Ymirheim Wiki
.skill-levels-infobox { float: right; width: auto; } .skill-levels-infobox .skill-infobox { float: none; clear: both; margin: 0; } .skill-levels-infobox .level-infobox { display: none; } .skill-levels-infobox .level-infobox > label { cursor: pointer; background: rgba(0, 0, 0, 0.8); border: 1px solid #FFF; border-radius: 5px 5px 0 0; border-bottom: none; color: #fff; padding: 0 3px; font-size: 0.9em; box-shadow: 0 0 5px black; margin: 0 5px; user-select: none; } .skill-levels-infobox .level-infobox .next-level { float: right; } .skill-levels-infobox .level-infobox .prev-level { float: left; } .skill-levels-infobox input[data-level] { display: none; } .skill-levels-infobox input[data-level="1"]:checked ~ .level-infoboxes .level-infobox[data-level="1"], .skill-levels-infobox input[data-level="2"]:checked ~ .level-infoboxes .level-infobox[data-level="2"], .skill-levels-infobox input[data-level="3"]:checked ~ .level-infoboxes .level-infobox[data-level="3"], .skill-levels-infobox input[data-level="4"]:checked ~ .level-infoboxes .level-infobox[data-level="4"], .skill-levels-infobox input[data-level="5"]:checked ~ .level-infoboxes .level-infobox[data-level="5"], .skill-levels-infobox input[data-level="6"]:checked ~ .level-infoboxes .level-infobox[data-level="6"], .skill-levels-infobox input[data-level="7"]:checked ~ .level-infoboxes .level-infobox[data-level="7"], .skill-levels-infobox input[data-level="8"]:checked ~ .level-infoboxes .level-infobox[data-level="8"], .skill-levels-infobox input[data-level="9"]:checked ~ .level-infoboxes .level-infobox[data-level="9"], .skill-levels-infobox input[data-level="10"]:checked ~ .level-infoboxes .level-infobox[data-level="10"], .skill-levels-infobox input[data-level="11"]:checked ~ .level-infoboxes .level-infobox[data-level="11"], .skill-levels-infobox input[data-level="12"]:checked ~ .level-infoboxes .level-infobox[data-level="12"], .skill-levels-infobox input[data-level="13"]:checked ~ .level-infoboxes .level-infobox[data-level="13"], .skill-levels-infobox input[data-level="14"]:checked ~ .level-infoboxes .level-infobox[data-level="14"], .skill-levels-infobox input[data-level="15"]:checked ~ .level-infoboxes .level-infobox[data-level="15"], .skill-levels-infobox input[data-level="16"]:checked ~ .level-infoboxes .level-infobox[data-level="16"], .skill-levels-infobox input[data-level="17"]:checked ~ .level-infoboxes .level-infobox[data-level="17"], .skill-levels-infobox input[data-level="18"]:checked ~ .level-infoboxes .level-infobox[data-level="18"], .skill-levels-infobox input[data-level="19"]:checked ~ .level-infoboxes .level-infobox[data-level="19"], .skill-levels-infobox input[data-level="20"]:checked ~ .level-infoboxes .level-infobox[data-level="20"], .skill-levels-infobox input[data-level="21"]:checked ~ .level-infoboxes .level-infobox[data-level="21"] { display: block; }