Widget:SkillTreeCalculator/css

<style>

1. SkillTreeCalculator {

display: flex; flex-direction: column; }

1. SkillTreeCalculator * {

user-select: none; }

1. SkillTreeCalculator .top {

height: 10em; border: 1px solid; }

1. SkillTreeCalculator .bottom {

display: flex; flex-wrap: wrap; }

1. SkillTreeCalculator .bottom .block {

margin: 0.5em; display: flex; flex-direction: column; }

1. SkillTreeCalculator .bottom .block.green {

--light: rgb(46, 135, 59); --dark: rgb(38, 59, 41); }

1. SkillTreeCalculator .bottom .block.blue {

--light: rgb(46, 67, 135); --dark: rgb(37, 42, 58); }

1. SkillTreeCalculator .bottom .block.red {

--light: rgb(135, 46, 46); --dark: rgb(59, 38, 38); }

1. SkillTreeCalculator .bottom .block.purple {

--light: rgb(135, 46, 105); --dark: rgb(59, 38, 52); }

1. SkillTreeCalculator .bottom .block .body {

--size: 80px; --gap: 5px; position: relative; background-color: var(--dark); border-radius: 10px; overflow: hidden; }

1. SkillTreeCalculator .bottom .block .body .mask {

position: absolute; top: 0; left: 0; width: 100%; height: calc(((var(--p) + 5) / 30) * (100% - var(--gap)) + var(--gap)); max-height: 100%; background-color: var(--light); }

1. SkillTreeCalculator .bottom .block .body .icons {

--darkBg: rgb(40 40 40); --lightBg: rgb(55 55 55); --activeBg: rgb(70 70 70); --border: rgb(25 25 25); --word: rgb(217 217 217); position: relative; z-index: 1; padding: var(--gap); display: grid; grid-gap: var(--gap); grid-template-columns: repeat(3, var(--size)); grid-template-rows: repeat(6, var(--size)); }

1. SkillTreeCalculator .bottom .block .body .icons .icon {

grid-column-start: var(--c); grid-row-start: var(--r); color: var(--word); background-color: var(--darkBg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 0 4px 0 var(--border); display: flex; flex-direction: column; overflow: hidden; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .img {

height: calc(100% - 1.5em); border-bottom: 1px solid var(--border); display: flex; justify-content: center; align-items: center; }

1. SkillTreeCalculator .bottom .block .body .icons .icon:not(.used) .img {

filter: grayscale(100%); }

1. SkillTreeCalculator .bottom .block .body .icons .icon .img img {

height: 100%; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl {

height: 1.5em; display: flex; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func] {

display: flex; justify-content: center; align-items: center; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func="minus"],
2. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func="plus"] {

width: 1.5em; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func="minus"]:after {

content: "－"; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func="plus"]:after {

content: "＋"; }

1. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func="point"] {

flex: 1; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }

1. SkillTreeCalculator .bottom .block .body .icons .icon .img:hover,
2. SkillTreeCalculator .bottom .block .body .icons .icon .ctrl [data-func]:hover {

cursor: pointer; background-color: var(--activeBg); } </style>