.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; }