|
|
|
|
*, *::before, *::after {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html, body {
|
|
|
|
|
background:black;
|
|
|
|
|
color:white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#wrap {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0; top: 0; right: 0; bottom: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#board {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disabled .orb {
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Highlighting */
|
|
|
|
|
.highlight-salt .symbol-salt .orb-fill,
|
|
|
|
|
.highlight-air .symbol-air .orb-fill,
|
|
|
|
|
.highlight-fire .symbol-fire .orb-fill,
|
|
|
|
|
.highlight-water .symbol-water .orb-fill,
|
|
|
|
|
.highlight-earth .symbol-earth .orb-fill,
|
|
|
|
|
.highlight-mercury .symbol-mercury .orb-fill,
|
|
|
|
|
.highlight-lead .symbol-lead .orb-fill,
|
|
|
|
|
.highlight-tin .symbol-tin .orb-fill,
|
|
|
|
|
.highlight-iron .symbol-iron .orb-fill,
|
|
|
|
|
.highlight-copper .symbol-copper .orb-fill,
|
|
|
|
|
.highlight-silver .symbol-silver .orb-fill,
|
|
|
|
|
.highlight-gold .symbol-gold .orb-fill,
|
|
|
|
|
.highlight-vitae .symbol-vitae .orb-fill,
|
|
|
|
|
.highlight-mors .symbol-mors .orb-fill {
|
|
|
|
|
stroke: yellow;
|
|
|
|
|
stroke-width: 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Orb is clickable */
|
|
|
|
|
.orb {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Disabled effect */
|
|
|
|
|
.orb.disabled {
|
|
|
|
|
cursor: default;
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Disabled orb has no glow or shadow */
|
|
|
|
|
.orb.disabled .orb-glow,
|
|
|
|
|
.orb.disabled .orb-shadow,
|
|
|
|
|
.orb.disabled:hover .orb-glow,
|
|
|
|
|
.orb.disabled:hover .orb-shadow {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Blur effect */
|
|
|
|
|
.orb-shadow, .orb-glow {
|
|
|
|
|
filter: url('#filterDropshadow');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hover and select effects */
|
|
|
|
|
.orb-glow, .orb-shadow {
|
|
|
|
|
transition: opacity linear 0.1s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.orb.selected .orb-glow,
|
|
|
|
|
.orb:hover .orb-glow {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.orb.selected .orb-shadow,
|
|
|
|
|
.orb:hover .orb-shadow {
|
|
|
|
|
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;
|
|
|
|
|
}
|
