Template:SkillTree Diagram/SkillTree.css

.skillTree-tabber .label-table { border-spacing: 0; } .skillTree-tabber .label-header { position: absolute; top: 0; color: #cfcd54; text-align: center; font-size: 17px; text-decoration: underline; background-color: rgba(26, 12, 2, 0.3); z-index: 4; } .skillTree-tabber .label-node { background:url("https://static.miraheze.org/phereonwiki/thumb/6/6f/Node.png/96px-Node.png"); } .skillTree-tabber .label-connection-h, .skillTree-tabber .label-connection-v { background:url("https://static.miraheze.org/phereonwiki/thumb/f/f1/Connection_empty.png/48px-Connection_empty.png"); background-repeat:no-repeat; background-position:center; } .skillTree-tabber .label-connection-h-a, .skillTree-tabber .label-connection-v-a { background:url("https://static.miraheze.org/phereonwiki/thumb/6/60/Connection_full.png/48px-Connection_full.png"); background-repeat:no-repeat; background-position:center; } .skillTree-tabber .label-node, .skillTree-tabber .label-connection-h-a, .skillTree-tabber label-connection-h, .skillTree-tabber label-connection-v { position: relative; } .skillTree-tabber .label-connection-v, .skillTree-tabber .label-connection-v-a { transform: rotate(270deg); } .skillTree-tabber .label-image,.skillTree-tabber .label-image-background,.skillTree-tabber label-connection { position: absolute; top: 0; } .skillTree-tabber .label-image { z-index: 2; } .skillTree-tabber .label-image-background { z-index: 1; } .skillTree-tabber .label-primary, .skillTree-tabber .label-secondary, .skillTree-tabber .label-count-1, .skillTree-tabber .label-count-2, .skillTree-tabber .label-count-3, .skillTree-tabber .label-count-4, .skillTree-tabber .label-count-5, .skillTree-tabber .label-count-6, .skillTree-tabber .label-count-7, .skillTree-tabber .label-count-8, .skillTree-tabber .label-count-9, .skillTree-tabber .label-count-10, .skillTree-tabber .label-minus, .skillTree-tabber .label-plus { position: absolute; z-index: 3; } .skillTree-tabber .label-count-1, .skillTree-tabber .label-count-2, .skillTree-tabber .label-count-3, .skillTree-tabber .label-count-4, .skillTree-tabber .label-count-5, .skillTree-tabber .label-count-6, .skillTree-tabber .label-count-7, .skillTree-tabber .label-count-8, .skillTree-tabber .label-count-9, .skillTree-tabber .label-count-10 { left: 2px; } .skillTree-tabber .label-primary { bottom: 0; right: 2px; } .skillTree-tabber .label-secondary { bottom: 18px; right: 2px; } .skillTree-tabber .label-count-1 { bottom: 0; } .skillTree-tabber .label-count-2 { bottom: 10px; } .skillTree-tabber .label-count-3 { bottom: 20px; } .skillTree-tabber .label-count-4 { bottom: 30px; } .skillTree-tabber .label-count-5 { bottom: 40px; } .skillTree-tabber .label-count-6 { bottom: 50px; } .skillTree-tabber .label-count-7 { bottom: 60px; } .skillTree-tabber .label-count-8 { bottom: 70px; } .skillTree-tabber .label-count-9 { bottom: 80px; } .skillTree-tabber .label-count-10 { bottom: 90px; } .skillTree-tabber .label-plus { bottom: 58px; right: 2px; background: #b8540d; height: 11px; border: solid 1px #2f1603; line-height: 0.6; cursor: pointer; } .skillTree-tabber .label-minus { bottom: 43px; right: 2px; background: #b8540d; height: 11px; width: 10px; text-indent: 2px; border: solid 1px #2f1603; line-height: 0.6; cursor: pointer; } .skillTree-tabber .label-secondary-Unknown { color:white; } .skillTree-tabber .tabber .tabbernav > li > a[title="Centaur​"], .skillTree-tabber .label-primary-Centaur, .skillTree-tabber .label-secondary-Centaur {color: #ffbd8a !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Plant​"], .skillTree-tabber .label-primary-PlantGirl, .skillTree-tabber .label-secondary-PlantGirl {color: #9cce3c !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Mermaid​"], .skillTree-tabber .label-primary-Mermaid, .skillTree-tabber .label-secondary-Mermaid {color: #65b9ff !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Lava​"], .skillTree-tabber .label-primary-LavaGirl, .skillTree-tabber .label-secondary-LavaGirl {color: #ff6400 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Lymean​"], .skillTree-tabber .label-primary-Lymean, .skillTree-tabber .label-secondary-Lymean {color: #f0ff00 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Succubus​"], .skillTree-tabber .label-primary-Succubus, .skillTree-tabber .label-secondary-Succubus {color: #ff6ef5 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Harpy​"], .skillTree-tabber .label-primary-Harpy, .skillTree-tabber .label-secondary-Harpy {color: #c3fff7 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Lizard​"], .skillTree-tabber .label-primary-LizardGirl, .skillTree-tabber .label-secondary-LizardGirl {color: #3ce412 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Insect​"], .skillTree-tabber .label-primary-InsectGirl, .skillTree-tabber .label-secondary-InsectGirl {color: #d9d9d9 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Beast​"], .skillTree-tabber .label-primary-BeastGirl, .skillTree-tabber .label-secondary-BeastGirl {color: #b0794f !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Shadow​"], .skillTree-tabber .label-primary-Shadow, .skillTree-tabber .label-secondary-Shadow {color: #909090 !important;} .skillTree-tabber .tabber .tabbernav > li > a[title="Tentacle​"], .skillTree-tabber .label-primary-Tanid, .skillTree-tabber .label-secondary-Tanid {color: #c85d2d !important;} .skillTree-tabber .tabber .tabbernav { margin-left:calc(50% - 300px); margin-right:calc(50% - 300px); } .skillTree-tabber .content-table-wrapper { display:inline-block; } .skillTree-tabber .description { display:inline-block; vertical-align: top; border: 2px solid black; padding: 5px; }