309 lines
5.1 KiB
CSS
309 lines
5.1 KiB
CSS
/* Variables */
|
|
|
|
:root {
|
|
--background: rgba(255, 255, 255, 0);
|
|
--background-titlebar: rgba(0, 0, 0, 0.24);
|
|
--background-menu: rgba(168, 190, 210, 0.36);
|
|
--background-menu-interactable: rgba(125, 135, 150, 0.48);
|
|
--background-menu-interactable-hover: rgba(157, 172, 213, 0.48);
|
|
--background-menu-uninteractable: rgba(79, 87, 99, 0.48);
|
|
--text-color-default: rgba(235, 245, 245, 1);
|
|
--cursor-default: default;
|
|
--cursor-not-allowed: not-allowed;
|
|
}
|
|
|
|
/* Rules */
|
|
|
|
* {
|
|
background: var(--background);
|
|
cursor: var(--cursor-default);
|
|
color: var(--text-color-default);
|
|
margin: 0px;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
header {
|
|
z-index: 100;
|
|
background: var(--background-titlebar);
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 3rem;
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
#title {
|
|
margin: 0.4rem;
|
|
}
|
|
|
|
#actionbuttoncontainer {
|
|
position: absolute;
|
|
display: flex;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: 100%;
|
|
-webkit-app-region: no-drag;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.windowactionbutton {
|
|
top: 0px;
|
|
width: 6rem;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.windowactionbutton:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.windowactionbutton * {
|
|
position: absolute;
|
|
margin: auto;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
#minwin {
|
|
right: calc(6rem + 6rem);
|
|
}
|
|
|
|
#maxrestorewin {
|
|
right: 6rem;
|
|
}
|
|
|
|
#closewin {
|
|
right: 0px;
|
|
background: rgba(255, 0, 0, 0.25);
|
|
}
|
|
|
|
#closewin:hover {
|
|
background: rgba(255, 0, 0, 0.5);
|
|
}
|
|
|
|
.initially-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.fullscreen {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay {
|
|
z-index: 96;
|
|
}
|
|
|
|
#renderers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
|
|
#renderers > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
}
|
|
|
|
#gui {
|
|
z-index: 15;
|
|
}
|
|
|
|
#crosshair {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
mix-blend-mode: difference;
|
|
z-index: 15
|
|
}
|
|
|
|
#touchcontrols {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 30;
|
|
}
|
|
|
|
#dpad {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
min-width: 16rem;
|
|
min-height: 16rem;
|
|
max-width: 48rem;
|
|
max-height: 48rem;
|
|
background: radial-gradient(rgba(180, 180, 180, 0.80) 0%, rgba(180, 180, 180, 0) 72%);
|
|
z-index: 32;
|
|
}
|
|
|
|
#secpad {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
min-width: calc(16rem / 3);
|
|
min-height: calc(16rem / 3);
|
|
max-width: calc(48rem / 3);
|
|
max-height: calc(48rem / 3);
|
|
margin: calc(16rem / 3);
|
|
background: radial-gradient(rgba(180, 180, 180, 0.80) 0%, rgba(180, 180, 180, 0) 72%);
|
|
z-index: 32;
|
|
}
|
|
|
|
#menus {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-flow: row;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 40;
|
|
}
|
|
|
|
.menu {
|
|
top: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
/* position: absolute; */
|
|
background: var(--background-menu);
|
|
height: calc(100% - 3rem);
|
|
padding-top: 3rem;
|
|
z-index: 40;
|
|
}
|
|
|
|
.void {
|
|
height: inherit;
|
|
width: inherit;
|
|
}
|
|
|
|
.closebutton {
|
|
left: 0px;
|
|
width: calc(100% - 1rem);
|
|
bottom: 0px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
#loadingscreen {
|
|
background: rgba(32, 48, 64, 1);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0px;
|
|
right: 0px;
|
|
z-index: 45;
|
|
}
|
|
|
|
#loadingbar {
|
|
position: absolute;
|
|
min-width: 12rem;
|
|
min-height: 3rem;
|
|
width: 64%;
|
|
height: 25%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(240, 24, 24, 1);
|
|
}
|
|
|
|
#loadingtext {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 45;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
#loadingbarprogress {
|
|
position: relative;
|
|
height: 100%;
|
|
background: rgba(24, 240, 48, 1);
|
|
}
|
|
|
|
button:disabled, button:disabled:hover, input:disabled, input:disabled:hover {
|
|
background: var(--background-menu-uninteractable);
|
|
cursor: var(--cursor-not-allowed);
|
|
}
|
|
|
|
button, input:not(input[type=checkbox]), select {
|
|
appearance: none;
|
|
background: var(--background-menu-interactable);
|
|
border: 0.125rem solid black;
|
|
padding: 0px;
|
|
margin: 0.5rem;
|
|
font-size: 1rem;
|
|
width: calc(100% - 1rem);
|
|
height: 4rem;
|
|
}
|
|
|
|
|
|
input:not(input[type=checkbox]) {
|
|
width: calc(100% - 1.25rem);
|
|
height: 4rem;
|
|
}
|
|
|
|
button:hover, input:hover, select:hover {
|
|
background: var(--background-menu-interactable-hover);
|
|
}
|
|
|
|
input[type=text]::placeholder {
|
|
color: rgba(235, 245, 245, 0.5);
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
background: rgba(125, 135, 150, 0.25);
|
|
border: 0.125rem solid black;
|
|
border-radius: 0px;
|
|
width: 1.5rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
input[type=range]::-moz-range-thumb {
|
|
-moz-appearance: none;
|
|
background: rgba(125, 135, 150, 0.25);
|
|
border: 0.125rem solid black;
|
|
border-radius: 0px;
|
|
width: 1.5rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb:hover {
|
|
background: var(--background-menu-interactable-hover);
|
|
}
|
|
|
|
input[type=range]::-moz-range-thumb:hover {
|
|
background: var(--background-menu-interactable-hover);
|
|
}
|