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.
73 lines
3.0 KiB
CSS
73 lines
3.0 KiB
CSS
.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.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; }
|
|
#field .block:hover { outline: 1px solid white; z-index: 10; }
|
|
|
|
.block.sun-3 { filter: brightness(1.0); }
|
|
.block.sun-2 { filter: brightness(0.4); }
|
|
.block.sun-1 { filter: brightness(0.2); }
|
|
.block.sun-0 { filter: brightness(0.0); }
|
|
|
|
.morning0 .block, .morning0 #player {filter: saturate(50%) brightness(0.6) hue-rotate(-10deg); }
|
|
.morning1 .block, .morning1 #player { filter: saturate(100%) brightness(0.8) hue-rotate(-20deg); }
|
|
.morning2 .block, .morning2 #player { filter: saturate(200%) hue-rotate(-30deg); }
|
|
|
|
.morning0 .block.sun-2 { filter: brightness(0); }
|
|
.morning1 .block.sun-2 { filter: saturate(100%) brightness(0.2) hue-rotate(-20deg); }
|
|
.morning2 .block.sun-2 { filter: saturate(200%) brightness(0.4) hue-rotate(-30deg); }
|
|
|
|
.morning0 .block.sun-1,
|
|
.morning1 .block.sun-1 { filter: brightness(0); }
|
|
.morning2 .block.sun-1 { filter: saturate(200%) brightness(0.2) hue-rotate(-30deg); }
|
|
|
|
.evening0 .block, .evening0 #player { filter: brightness(0.8) hue-rotate(-10deg); }
|
|
.evening1 .block, .evening1 #player { filter: brightness(0.6) hue-rotate(-20deg); }
|
|
.evening2 .block, .evening2 #player { filter: brightness(0.4) hue-rotate(-10deg) saturate(50%); }
|
|
|
|
.evening0 .block.sun-2 { filter: brightness(0.3) hue-rotate(-10deg); }
|
|
.evening1 .block.sun-2 { filter: brightness(0.2) hue-rotate(-20deg); }
|
|
.evening2 .block.sun-2 { filter: brightness(0); }
|
|
|
|
.evening0 .block.sun-1 { filter: brightness(0.2) hue-rotate(-10deg); }
|
|
.evening1 .block.sun-1, .evening2 .block.sun-1 { filter: brightness(0); }
|
|
|
|
.night .block, .night #player { filter: brightness(0.3) saturate(30%); }
|
|
|
|
.block.sun-0,
|
|
.morning0 .block.sun-0,
|
|
.morning1 .block.sun-0,
|
|
.morning2 .block.sun-0,
|
|
.evening0 .block.sun-0,
|
|
.evening1 .block.sun-0,
|
|
.evening2 .block.sun-0,
|
|
.night .block.sun-0 { filter: brightness(0); }
|
|
|
|
#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;
|
|
}
|