Template:SkillTree Diagram/SkillTree.css: Difference between revisions

From Portals of Phereon Wiki
Content added Content deleted
(Created page with ".skillTree-tabber .label-table { border-spacing: 0; } .skillTree-tabber .label-header { position: absolute; top: 0; text-align: left; color: #df660f; z-index: 4; } .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 img{ transform: rotate(270deg); } .skillTree-tabber .label-image,.skil...")
 
m (fix)
 
(15 intermediate revisions by one other user not shown)
Line 5: Line 5:
position: absolute;
position: absolute;
top: 0;
top: 0;
text-align: left;
color: #cfcd54;
color: #df660f;
text-align: center;
font-size: 17px;
text-decoration: underline;
background-color: rgba(26, 12, 2, 0.3);
z-index: 4;
z-index: 4;
}
.skillTree-tabber .label-node {
background:url("https://static.miraheze.org/phereonwiki/thumb/6/6f/Node.png/96px-Node.png");
}
.evo-tabber .label-node {
text-align: left;
}
.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 {
.skillTree-tabber .label-node, .skillTree-tabber .label-connection-h-a, .skillTree-tabber label-connection-h, .skillTree-tabber label-connection-v {
position: relative;
position: relative;
}
}
.skillTree-tabber .label-connection-v img{
.skillTree-tabber .label-connection-v, .skillTree-tabber .label-connection-v-a {
transform: rotate(270deg);
transform: rotate(270deg);
}
}
Line 27: Line 46:
.skillTree-tabber .label-primary, .skillTree-tabber .label-secondary, .skillTree-tabber .label-count-1, .skillTree-tabber .label-count-2,
.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-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-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;
position: absolute;
z-index: 3;
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 {
.skillTree-tabber .label-primary {
bottom: 0;
bottom: 0;
right: 0;
right: 2px;
}
}
.skillTree-tabber .label-secondary {
.skillTree-tabber .label-secondary {
bottom: 20px;
bottom: 18px;
right: 0;
right: 2px;
}
}
.skillTree-tabber .label-count-1 {
.skillTree-tabber .label-count-1 {
bottom: 0;
bottom: 0;
left: 0;
}
}
.skillTree-tabber .label-count-2 {
.skillTree-tabber .label-count-2 {
bottom: 10px;
}
.skillTree-tabber .label-count-3 {
bottom: 20px;
bottom: 20px;
}
left: 0;
.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;
}
}

Latest revision as of 16:43, 29 November 2023

.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");
}
.evo-tabber .label-node {
	text-align: left;
}
.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;
}