Add files from before the Git repository
This commit is contained in:
BIN
assets/images/xvoxel.ico
Normal file
BIN
assets/images/xvoxel.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
assets/images/xvoxel.png
Normal file
BIN
assets/images/xvoxel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
308
assets/stylesheets/game.css
Normal file
308
assets/stylesheets/game.css
Normal file
@ -0,0 +1,308 @@
|
||||
/* 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);
|
||||
}
|
||||
Reference in New Issue
Block a user