|
|
@ -1,8 +1,8 @@ |
|
|
|
*,*:before,*:after { |
|
|
|
*, *::before, *::after { |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
html,body { |
|
|
|
html, body { |
|
|
|
background:black; |
|
|
|
background:black; |
|
|
|
color:white; |
|
|
|
color:white; |
|
|
|
} |
|
|
|
} |
|
|
@ -22,6 +22,7 @@ html,body { |
|
|
|
opacity: 0.6; |
|
|
|
opacity: 0.6; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Highlighting */ |
|
|
|
.highlight-salt .symbol-salt .orb-fill, |
|
|
|
.highlight-salt .symbol-salt .orb-fill, |
|
|
|
.highlight-air .symbol-air .orb-fill, |
|
|
|
.highlight-air .symbol-air .orb-fill, |
|
|
|
.highlight-fire .symbol-fire .orb-fill, |
|
|
|
.highlight-fire .symbol-fire .orb-fill, |
|
|
@ -40,33 +41,33 @@ html,body { |
|
|
|
stroke-width: 7px; |
|
|
|
stroke-width: 7px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.orb.disabled .orb-glow, |
|
|
|
/* Orb is clickable */ |
|
|
|
.orb.disabled .orb-shadow, |
|
|
|
|
|
|
|
.orb.disabled:hover .orb-glow, |
|
|
|
|
|
|
|
.orb.disabled:hover .orb-shadow { |
|
|
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.orb { |
|
|
|
.orb { |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Disabled effect */ |
|
|
|
.orb.disabled { |
|
|
|
.orb.disabled { |
|
|
|
cursor: default; |
|
|
|
cursor: default; |
|
|
|
opacity: 0.6; |
|
|
|
opacity: 0.6; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.cfg-no-fade-disabled .orb.disabled { |
|
|
|
/* Disabled orb has no glow or shadow */ |
|
|
|
opacity: 1; |
|
|
|
.orb.disabled .orb-glow, |
|
|
|
|
|
|
|
.orb.disabled .orb-shadow, |
|
|
|
|
|
|
|
.orb.disabled:hover .orb-glow, |
|
|
|
|
|
|
|
.orb.disabled:hover .orb-shadow { |
|
|
|
|
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.orb-glow, |
|
|
|
/* Blur effect */ |
|
|
|
.orb-shadow { |
|
|
|
.orb-shadow, .orb-glow { |
|
|
|
transition: opacity linear 0.1s; |
|
|
|
filter: url('#filterDropshadow'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.cfg-no-anim * { |
|
|
|
/* Hover and select effects */ |
|
|
|
transition: none !important; |
|
|
|
.orb-glow, .orb-shadow { |
|
|
|
|
|
|
|
transition: opacity linear 0.1s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.orb.selected .orb-glow, |
|
|
|
.orb.selected .orb-glow, |
|
|
@ -78,3 +79,31 @@ html,body { |
|
|
|
.orb:hover .orb-shadow { |
|
|
|
.orb:hover .orb-shadow { |
|
|
|
opacity: 0; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* No-anim version applies animations instantly */ |
|
|
|
|
|
|
|
.cfg-no-anim * { |
|
|
|
|
|
|
|
transition: none !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* No-blur version uses white ring around selected orbs, and has no shadow */ |
|
|
|
|
|
|
|
.cfg-no-blur .orb-shadow, |
|
|
|
|
|
|
|
.cfg-no-blur .orb-glow { |
|
|
|
|
|
|
|
filter: none !important; |
|
|
|
|
|
|
|
opacity: 0 !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cfg-no-blur .orb.selected .orb-fill, |
|
|
|
|
|
|
|
.cfg-no-blur .orb:hover .orb-fill { |
|
|
|
|
|
|
|
stroke: white; |
|
|
|
|
|
|
|
stroke-width: 10px; |
|
|
|
|
|
|
|
paint-order: stroke; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cfg-no-blur .orb.disabled .orb-fill { |
|
|
|
|
|
|
|
stroke: transparent !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* No-disabled-fade version has all orbs at full opacity */ |
|
|
|
|
|
|
|
.cfg-no-fade-disabled .orb.disabled { |
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
} |
|
|
|