XVoxel-ASync/assets/stylesheets/game.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);
}