You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.0 KiB
CSS
162 lines
3.0 KiB
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) grayscale(1.0);
|
|
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;
|
|
} |