vue-shovel/src/assets/field.css

.block,
#player {
  transition: filter .5s linear;
}

.block {
  flex: 0 0 auto;
  width: var(--block-size);
  height: var(--block-size);
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.block::after {
  content: '';
  position: absolute;
  width: var(--block-size);
  height: var(--block-size);
  background-color: transparent;
  background-image: url(/break.png);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: calc(var(--block-size) * -7);
  background-size: cover;
}

.block.damage-0::after {
  background-position-x: 0px;
}

.block.damage-1::after {
  background-position-x: calc(var(--block-size) * -1);
}

.block.damage-2::after {
  background-position-x: calc(var(--block-size) * -2);
}

.block.damage-3::after {
  background-position-x: calc(var(--block-size) * -3);
}

.block.damage-4::after {
  background-position-x: calc(var(--block-size) * -4);
}

.block.damage-5::after {
  background-position-x: calc(var(--block-size) * -5);
}

.block.damage-6::after {
  background-position-x: calc(var(--block-size) * -6);
}

.block.grass {
  background-image: url(/Tiles/dirt_grass.png);
}

.block.treeCrown,
.block.treeLeaves {
  background-image: url(/Tiles/leaves_transparent.png);
}

.block.treeTrunk {
  background-image: url(/Tiles/trunk_mid.png);
}

.block.treeRoot {
  background-image: url(/Tiles/trunk_bottom.png);
}

.block.soil {
  background-image: url(/Tiles/dirt.png);
}

.block.soilGravel {
  background-image: url(/Tiles/gravel_dirt.png);
}

.block.stoneGravel {
  background-image: url(/Tiles/gravel_stone.png);
}

.block.stone {
  background-image: url(/Tiles/stone.png);
}

.block.bedrock {
  background-image: url(/Tiles/greystone.png);
}

.block.cave {
  background-color: #000;
}

.block.brickWall {
  background-image: url(/Tiles/brick_grey.png);
}

#field .block:hover,
#field .block.block.highlight {
  filter: brightness(1.2) saturate(1.2);
  outline: 1px solid white;
  z-index: 10;
}

.morning0 .block,
.morning0 #player {
  filter: saturate(50%);
}

.morning1 .block,
.morning1 #player {
  filter: saturate(100%);
}

.morning2 .block,
.morning2 #player {
  filter: saturate(120%);
}

.evening0 .block,
.evening0 #player {
  filter: saturate(90%);
}

.evening1 .block,
.evening1 #player {
  filter: saturate(70%);
}

.evening2 .block,
.evening2 #player {
  filter: saturate(50%);
}

.night .block,
.night #player {
  filter: saturate(30%);
}

#blocks {
  position: absolute;
  top: calc(var(--block-size) * (var(--spare-blocks) / -2));
  left: calc(var(--block-size) * (var(--spare-blocks) / -2));
  width: calc(var(--field-width) + var(--spare-blocks) * var(--block-size));
  height: calc(var(--field-height) + var(--spare-blocks) * var(--block-size));
  display: flex;
  flex-flow: row wrap;
}

#light-mask {
  position: absolute;
  top: calc(var(--block-size) * -1);
  left: calc(var(--block-size) * -1);
  width: calc(100% + var(--block-size) * 2);
  height: calc(100% + var(--block-size) * 2);
  mix-blend-mode: multiply;
  pointer-events: none;
}