382 lines
9.6 KiB
CSS
382 lines
9.6 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
font-family: sans-serif;
|
|
max-height: 100svh;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:root {
|
|
--scale-factor: 2;
|
|
--default-size: 16px;
|
|
|
|
--dark-bg: #990099;
|
|
--dark-bg-text: #fffe;
|
|
--menu-border-color: #666;
|
|
--resize-handle-color: #666;
|
|
--resize-handle-width: 3px;
|
|
}
|
|
|
|
[data-state].hidden {
|
|
display: none;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
.italics {
|
|
font-style: italic;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.list .hidden {
|
|
display: none;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--width-override, 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-menu-size, 15%) 1fr var(--right-menu-size, 10%);
|
|
grid-template-rows: min-content 1fr var(--bottom-menu-size, 15%) min-content;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
#top-menu {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
|
|
background-color: var(--dark-bg);
|
|
color: var(--dark-bg-text);
|
|
}
|
|
#left-menu {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
border-right: 1px solid var(--menu-border-color);
|
|
}
|
|
#bottom-menu {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
border-top: 1px solid var(--menu-border-color);
|
|
border-right: 1px solid var(--menu-border-color);
|
|
}
|
|
main {
|
|
grid-column: 2;
|
|
grid-row: 2 / 4;
|
|
overflow: auto;
|
|
}
|
|
#right-menu {
|
|
grid-column: 3;
|
|
grid-row: 2 / 4;
|
|
border-left: 1px solid var(--menu-border-color);
|
|
}
|
|
#bottom-menu {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
border-top: 1px solid var(--menu-border-color);
|
|
}
|
|
body > footer {
|
|
grid-column: 1 / -1;
|
|
grid-row: 4;
|
|
border-top: 1px solid var(--menu-border-color);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0 0.25em;
|
|
}
|
|
|
|
.status-bar {
|
|
border-bottom: 1px solid var(--status-bar-color, #4444);
|
|
}
|
|
.status-bar > :nth-child(3) {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#left-menu, #right-menu, #bottom-menu {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
[data-resize] {
|
|
position: absolute;
|
|
z-index: 1;
|
|
content: "";
|
|
}
|
|
#left-menu > [data-resize], #right-menu > [data-resize] {
|
|
border-left: 1px solid var(--resize-handle-color);
|
|
border-right: 1px solid var(--resize-handle-color);
|
|
margin: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: calc(var(--resize-handle-width) * 2 - 1px);
|
|
height: 1em;
|
|
}
|
|
#left-menu > [data-resize] {
|
|
cursor: w-resize;
|
|
right: calc(var(--resize-handle-width) * -1);
|
|
}
|
|
#right-menu > [data-resize] {
|
|
cursor: e-resize;
|
|
left: calc(var(--resize-handle-width) * -1);
|
|
}
|
|
#bottom-menu > [data-resize] {
|
|
border-top: 1px solid var(--resize-handle-color);
|
|
border-bottom: 1px solid var(--resize-handle-color);
|
|
cursor: s-resize;
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
top: calc(var(--resize-handle-width) * -1);
|
|
width: 1em;
|
|
height: calc(var(--resize-handle-width) * 2 - 1px);
|
|
}
|
|
body[data-resizing] {
|
|
user-select: none;
|
|
}
|
|
body[data-resizing="left-menu"] {
|
|
cursor: w-resize;
|
|
}
|
|
body[data-resizing="right-menu"] {
|
|
cursor: e-resize;
|
|
}
|
|
body[data-resizing="bottom-menu"] {
|
|
cursor: s-resize;
|
|
}
|
|
|
|
section {
|
|
overflow: auto;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
|
|
width: 100%;
|
|
}
|
|
|
|
.atlas-texture {
|
|
image-rendering: -moz-crisp-edges; /* Firefox fallback */
|
|
image-rendering: pixelated; /* Modern browsers */
|
|
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
|
|
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);
|
|
|
|
opacity: var(--atlas-opacity, 1);
|
|
}
|
|
.atlas-air {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
|
|
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);
|
|
outline-offset: calc(var(--scale-factor) * -0.5px);
|
|
|
|
opacity: var(--atlas-opacity, 1);
|
|
}
|
|
.atlas-air:hover, .atlas-texture:hover {
|
|
outline: calc(var(--scale-factor) * 1px) solid var(--cell-hover-outline-color, #8888);
|
|
outline-offset: calc(var(--scale-factor) * -1px);
|
|
}
|
|
[data-preview], [data-preview-remove] {
|
|
--atlas-opacity: var(--atlas-preview-opacity, 0.5);
|
|
}
|
|
[data-highlight] {
|
|
position: relative;
|
|
}
|
|
[data-highlight] .atlas-texture:after, [data-highlight] .atlas-air:after {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
[data-highlight-distance="1"] {
|
|
--highlight-color: var(--highlight-near-color, #4848);
|
|
}
|
|
[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(--highlight-color, #f808);
|
|
}
|
|
[data-highlight='y'] .atlas-texture:after, [data-highlight='y'] .atlas-air:after {
|
|
inset:
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4)
|
|
calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
|
|
calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4);
|
|
background-color: var(--highlight-color, #f808);
|
|
}
|
|
[data-highlight='z'] .atlas-texture:after, [data-highlight='z'] .atlas-air:after {
|
|
inset:
|
|
0
|
|
calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4)
|
|
0
|
|
calc(var(--scale-factor) * var(--size-x, var(--default-size)) * 0.4);
|
|
background-color: var(--highlight-color, #f808);
|
|
}
|
|
[data-casing="hide"] > * {
|
|
--width-override: calc(var(--width) - 2);
|
|
}
|
|
[data-casing="hide"] [data-casing] {
|
|
display: none;
|
|
}
|
|
[data-selected] {
|
|
outline: calc(var(--scale-factor) * 1px) dashed var(--cell-selected-outline, #f80);
|
|
outline-offset: calc(var(--scale-factor) * -1px);
|
|
}
|
|
[data-selected] .atlas-air {
|
|
outline: none;
|
|
}
|
|
|
|
#block-picker-list [data-active] {
|
|
outline: calc(var(--scale-factor) * 1px) solid var(--block-active-outline-color, #000);
|
|
}
|
|
#block-picker-list [data-index]:hover:not([data-active]) {
|
|
outline: calc(var(--scale-factor) * 1px) solid var(--block-hover-outline-color, #6666);
|
|
}
|
|
|
|
[data-tooltip] {
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
[data-tooltip] > .tooltip {
|
|
position: fixed;
|
|
z-index: 10;
|
|
background: var(--tooltip-background, #222d);
|
|
color: var(--tooltip-foreground, #fff);
|
|
font-size: var(--tooltip-font-size, .8em);
|
|
/*border-radius: var(--tooltip-border-radius, 0.25em);*/
|
|
padding: var(--tooltip-padding, 0.25em);
|
|
border: var(--tooltip-border-size, 1px) solid var(--tooltip-border-color, #fff);
|
|
/*max-width: var(--tooltip-width, 200px);*/
|
|
}
|
|
|
|
.menu-bar {
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
.menu-bar > [data-section] {
|
|
display: inline;
|
|
}
|
|
.menu-bar [data-section]:not(.active) {
|
|
display: none;
|
|
}
|
|
.menu-bar [data-section] {
|
|
position: fixed;
|
|
background: var(--menu-bg, #222);
|
|
color: var(--menu-fg, #fffe);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 100;
|
|
box-shadow: var(--menu-shadow, 0 2px 4px #0002);
|
|
}
|
|
.menu-bar button {
|
|
all: initial;
|
|
font: inherit;
|
|
color: inherit;
|
|
padding: var(--menu-item-padding, 0.25em);
|
|
font-size: var(--menu-item-font-size, 0.8em);
|
|
cursor: default;
|
|
}
|
|
.menu-bar button:disabled {
|
|
color: var(--menu-item-disabled-color, #aaae);
|
|
}
|
|
.menu-bar [data-section] button.active, .menu-bar [data-section] button:hover:not(:disabled) {
|
|
background: var(--menu-bg-hover, #444);
|
|
color: var(--menu-fg-hover, #fffe);
|
|
}
|
|
.menu-bar [data-section] button[data-for-section]::after {
|
|
content: '>';
|
|
float: right;
|
|
margin-left: 0.5em;
|
|
}
|
|
.menu-bar .alt-key {
|
|
text-decoration: underline;
|
|
}
|
|
.menu-bar [data-section]:has(> [data-toggle]) > button {
|
|
display: grid;
|
|
grid-template-columns: 1.25em 1fr;
|
|
}
|
|
.menu-bar [data-section]:has(> [data-toggle]) > button::before {
|
|
content: '';
|
|
inline-size: 1.25em;
|
|
text-align: center;
|
|
}
|
|
.menu-bar button[data-toggle][data-toggled="false"]::before {
|
|
content: '☐';
|
|
}
|
|
.menu-bar button[data-toggle][data-toggled="true"]::before {
|
|
content: '☑';
|
|
}
|
|
|
|
.dialog.hidden {
|
|
display: none;
|
|
}
|
|
.dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--dialog-backdrop, #0008);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
padding: var(--dialog-margin, 1em);
|
|
}
|
|
.dialog > section {
|
|
z-index: 11;
|
|
padding: var(--dialog-padding, 1em);
|
|
background: var(--dialog-background, #fff);
|
|
color: var(--dialog-foreground, #000);
|
|
border-radius: var(--dialog-border-radius, .25em);
|
|
box-shadow: var(--dialog-box-shaodw, 0 4px 8px #0002);
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.dialog > section > header {
|
|
font-size: var(--dialog-header-size, 1.25em);
|
|
}
|
|
.dialog > section > main {
|
|
padding: 1em 0;
|
|
}
|
|
.dialog > section > footer {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
flex-direction: row;
|
|
justify-content: end;
|
|
}
|
|
.dialog > section > .list-choice {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .25em;
|
|
}
|
|
.dialog > section > .list-choice > * {
|
|
font-size: 1em;
|
|
}
|