107 lines
3.1 KiB
CSS
107 lines
3.1 KiB
CSS
:root {
|
|
--scale-factor: 2;
|
|
--default-size: 16px;
|
|
}
|
|
|
|
[data-state].hidden {
|
|
display: none;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--width), calc(var(--scale-factor) * var(--default-size)));
|
|
}
|
|
|
|
.m1 {
|
|
margin: 0.1em;
|
|
}
|
|
.m2 {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: var(--left-nav, 400px) 1fr var(--right-nav, 300px);
|
|
grid-template-rows: 40px 1fr var(--bottom-nav, 200px);
|
|
}
|
|
#top-menu {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
}
|
|
#left-menu {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
main {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
#right-menu {
|
|
grid-column: 3;
|
|
grid-row: 2;
|
|
}
|
|
#bottom-menu {
|
|
grid-column: 1 / -1;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.atlas-texture {
|
|
image-rendering: -moz-crisp-edges; /* Firefox fallback */
|
|
image-rendering: pixelated; /* Modern browsers */
|
|
|
|
background-size: calc(var(--scale-factor) * var(--atlas-resolution))
|
|
calc(var(--scale-factor) * var(--atlas-resolution));
|
|
|
|
width: calc(var(--scale-factor) * var(--size-x));
|
|
height: calc(var(--scale-factor) * var(--size-y));
|
|
|
|
background-position-x: calc(var(--scale-factor) * var(--raw-x) * -1);
|
|
background-position-y: calc(var(--scale-factor) * var(--raw-y) * -1);
|
|
}
|
|
.atlas-air {
|
|
width: calc(var(--scale-factor) * var(--size-x, var(--default-size)));
|
|
height: calc(var(--scale-factor) * var(--size-y, var(--default-size)));
|
|
outline: calc(var(--scale-factor) * 0.5px) solid var(--cell-empty-outline-color, #ccc);
|
|
}
|
|
.atlas-air:hover, .atlas-texture:hover {
|
|
outline: calc(var(--scale-factor) * 1px) solid var(--cell-hover-outline-color, #8888);
|
|
}
|
|
[data-highlight] {
|
|
position: relative;
|
|
}
|
|
[data-highlight] .atlas-texture:after, [data-highlight] .atlas-air:after {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
[data-highlight='x'] .atlas-texture:after, [data-highlight='x'] .atlas-air:after {
|
|
inset:
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
0
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
0;
|
|
background-color: var(--higlight-color, #f808);
|
|
}
|
|
[data-highlight='y'] .atlas-texture:after, [data-highlight='y'] .atlas-air:after {
|
|
inset:
|
|
0
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
0
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4);
|
|
background-color: var(--higlight-color, #f808);
|
|
}
|
|
[data-highlight='z'] .atlas-texture:after, [data-highlight='z'] .atlas-air:after {
|
|
inset:
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4);
|
|
background-color: var(--higlight-color, #f808);
|
|
}
|
|
|
|
#block-list [data-active] {
|
|
outline: calc(var(--scale-factor) * 1px) solid var(--block-active-outline-color, #000);
|
|
} |