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.
75 lines
3.5 KiB
CSS
75 lines
3.5 KiB
CSS
.block.grass { background-image: url(./grass01.png); }
|
|
|
|
.block.treeTopLeft { background-image: url(./tree_top_left.png); }
|
|
.block.treeTopMiddle { background-image: url(./tree_top_middle.png); }
|
|
.block.treeTopRight { background-image: url(./tree_top_right.png); }
|
|
|
|
.block.treeCrownLeft { background-image: url(./tree_crown_left.png); }
|
|
.block.treeCrownMiddle { background-image: url(./tree_crown_middle.png); }
|
|
.block.treeCrownRight { background-image: url(./tree_crown_right.png); }
|
|
|
|
.block.treeTrunkLeft { background-image: url(./tree_trunk_left.png); }
|
|
.block.treeTrunkMiddle { background-image: url(./tree_trunk_middle.png); }
|
|
.block.treeTrunkRight { background-image: url(./tree_trunk_right.png); }
|
|
|
|
.block.treeRootLeft { background-image: url(./tree_root_left.png); }
|
|
.block.treeRootMiddle { background-image: url(./tree_root_middle.png); }
|
|
.block.treeRootRight { background-image: url(./tree_root_right.png); }
|
|
|
|
.block.treeTopLeftMixed { background-image: url(./tree_top_left_mixed.png); }
|
|
.block.treeCrownLeftMixed { background-image: url(./tree_crown_left_mixed.png); }
|
|
.block.treeTrunkLeftMixed { background-image: url(./tree_trunk_left_mixed.png); }
|
|
.block.treeRootLeftMixed { background-image: url(./tree_root_left_mixed.png); }
|
|
|
|
.block.treeTopRightMixed { background-image: url(./tree_top_right_mixed.png); }
|
|
.block.treeCrownRightMixed { background-image: url(./tree_crown_right_mixed.png); }
|
|
.block.treeTrunkRightMixed { background-image: url(./tree_trunk_right_mixed.png); }
|
|
.block.treeRootRightMixed { background-image: url(./tree_root_right_mixed.png); }
|
|
|
|
.block.soil { background-image: url(./soil.png); }
|
|
.block.soilGravel { background-image: url(./soil_gravel.png); }
|
|
.block.stoneGravel { background-image: url(./rock_gravel.png); }
|
|
.block.stone { background-image: url(./rock.png); }
|
|
.block.bedrock { background-image: url(./bedrock.png); }
|
|
.block.cave { background-color: #000; }
|
|
#field .block:hover { outline: 1px solid white; z-index: 10; }
|
|
|
|
.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); }
|
|
|
|
.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%); }
|
|
|
|
.night .block, .night #player { filter: brightness(0.3) saturate(30%); }
|
|
|
|
#player {
|
|
position: absolute;
|
|
left: calc(var(--field-width) / 2);
|
|
top: calc(var(--field-height) / 2);
|
|
background-image: url(./dwarf_right.png);
|
|
}
|
|
#player.right { background-image: url(./dwarf_right.png); }
|
|
#player.left { background-image: url(./dwarf_left.png); }
|
|
#player.up { background-image: url(./dwarf_back.png); }
|
|
#player.down { background-image: url(./dwarf_back.png); }
|
|
#player, .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;
|
|
}
|
|
#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;
|
|
}
|