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.
190 lines
3.0 KiB
190 lines
3.0 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%;
|
|
background: #201717;
|
|
}
|
|
|
|
/* Orb is clickable */
|
|
.orb {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Disabled effect */
|
|
.orb.disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
/* No-disabled-fade version has all orbs at full opacity */
|
|
.cfg-fade-disabled .orb.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Disabled orb has no glow or shadow */
|
|
.orb.disabled .orb-glow,
|
|
.orb.disabled:hover .orb-glow,
|
|
.cfg-fade-disabled .orb.disabled .orb-shadow,
|
|
.cfg-fade-disabled .orb.disabled:hover .orb-shadow {
|
|
fill-opacity: 0;
|
|
}
|
|
|
|
.cfg-no-fade-disabled.cfg-blur .orb.disabled .orb-shadow,
|
|
.cfg-no-fade-disabled.cfg-blur .orb.disabled:hover .orb-shadow {
|
|
fill-opacity: 0.7;
|
|
}
|
|
|
|
/* Blur effect */
|
|
.orb-shadow {
|
|
filter: url('#filterDropshadow');
|
|
}
|
|
|
|
.orb-glow {
|
|
filter: url('#filterGlow');
|
|
}
|
|
|
|
/* Hover and select effects */
|
|
.orb-glow, .orb-shadow {
|
|
transition: fill-opacity linear 0.2s;
|
|
}
|
|
|
|
/* Default opacity */
|
|
.orb .orb-shadow {
|
|
fill-opacity: 0.7;
|
|
}
|
|
|
|
/* Glow effect */
|
|
.orb.selected .orb-glow,
|
|
.orb:hover .orb-glow {
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
.orb.selected .orb-shadow,
|
|
.orb:hover .orb-shadow {
|
|
fill-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,
|
|
.cfg-no-blur .tile-shadow {
|
|
filter: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.cfg-no-blur .board-bg-hex {
|
|
fill: #534334;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
text {
|
|
paint-order: stroke;
|
|
font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD",
|
|
"URW Palladio L", "New Century Schoolbook", Georgia, "Liberation Serif",
|
|
"Noto Serif", serif;
|
|
user-select: none;
|
|
}
|
|
|
|
/* GUI */
|
|
.button-text {
|
|
fill: #8d7761;
|
|
stroke: #453b30;
|
|
text-anchor: start;
|
|
text-align: left;
|
|
stroke-width: 2px;
|
|
cursor: pointer;
|
|
}
|
|
.button-text.working,
|
|
.button-text.working:hover {
|
|
fill: #8d7761;
|
|
font-size: 26px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.button-text.working {
|
|
transition: opacity linear 0.2s;
|
|
}
|
|
|
|
.cfg-no-anim .button-text.working {
|
|
transition: none;
|
|
}
|
|
|
|
.button-text.working.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.you-win {
|
|
font-size: 80px;
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
fill: #ffd675;
|
|
stroke: #2d2520;
|
|
stroke-width: 4px;
|
|
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity linear 0.2s;
|
|
}
|
|
|
|
.you-win.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cfg-no-anim .you-win {
|
|
transition: none;
|
|
}
|
|
|
|
.button-text.config {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.button-text.right {
|
|
text-anchor: end;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|