web reimplementation of Sigmar's Garden https://bits.ondrovo.com/sigmar/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
sigmar/style.css

143 lines
2.6 KiB

*, *::before, *::after {
box-sizing: border-box;
}
html, body {
background: #201717;
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;
}
/* GUI */
.button-text {
fill: #8d7761;
stroke: #453b30;
text-anchor: start;
text-align: left;
stroke-width: 2px;
paint-order: stroke;
font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
cursor: pointer;
user-select: none;
}
.button-text.config {
font-size: 26px;
}
.button-text:hover {
fill: #e3c4a2;
}
.button-text:active {
transform: translateY(1px);
}
.button-text.disabled,
.button-text.disabled:hover,
.button-text.disabled:active {
cursor: default;
opacity: .5;
fill: #8d7761;
transform: none;
}