FXclient-mirror/static/main.css

.scrollable {
	overflow-y: auto;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: #aaaaaa;
}

.window {
	position        : fixed;
	background-color: rgba(0, 0, 0, 0.7);
	width           : 90%;
	top             : 0;
	color           : white;
	font-family     : 'Franklin Gothic Medium', 'Trebuchet MS', Arial, sans-serif;
	margin          : auto;
	margin-top      : 20px;
	right           : 0;
	left            : 0;
	padding         : 15px;
	box-sizing      : border-box;
	border-color    : white;
	border-style    : solid;
	border-width    : 2px;
	border-width    : calc(0.15 * (1vw + 1vh));
	font-size       : 20px;
	font-size       : calc(14px + ((0.4 * (0.8vw + 1vh)) + 0.15rem));
	max-height      : 90%;
	transition      : 0.2s;
	z-index         : 10;
}

.window.flex {
	display       : flex;
	flex-direction: column;
}

hr {
	width: 100%;
}

.window button,
.window input,
.window select {
	background-color: rgba(0, 0, 0, 0.7);
	color           : white;
	font-size       : 20px;
	font-size       : 0.9em;
	padding         : 0.4rem;
	transition      : 0.2s;
	border          : 1px solid #fff;
	border-radius   : 5px;
}

h1 {
	font-weight       : normal;
	margin-block-start: 0.5em;
	margin-block-end  : 0.5em;
	transition        : 0.2s;
}
#playerlist h1 {
	margin-block-start: 0.3em;
	margin-block-end  : 0.3em;
}
h3 {
	font-weight       : normal;
	margin-block-start: 0.6em;
	margin-block-end  : 0.6em;
}

canvas,
input,
textarea {
	transition: 0.2s;
}

button:hover {
	background-color: rgba(222, 222, 222, 0.52);
	border-radius   : 8px;
}

.window input:focus {
	background-color: rgba(222, 222, 222, 0.36);
	border-radius   : 8px;
}

td {
	padding: 0px;
}

#playerlist_content.clickable td { cursor: pointer; }
#playerlist_content.clickable td:hover { background-color: #00ff0040; }

tr.new {
    animation: flashAnimation 0.4s ease-out;
}

@keyframes flashAnimation {
    0% {
        background-color: #ffffffaa;
    }
    100% {
        background-color: transparent;
    }
}

table {
	border-spacing: 0px;
}

input#userna,
input#inputfilebtn {
	transition: 0.2s
}

.selectable {
	user-select: text;
}

.color-red {
	color: #dc143c;
}

.color-green {
	color: #32cd32;
}

.color-light-gray {
	color: #aaaaaa;
}

/* Checkbox */
label.checkbox {
	display        : block;
	position       : relative;
	padding-left   : 35px;
	/*margin-bottom: 12px;*/
	cursor         : pointer;
}

label.checkbox input {
	position: absolute;
	opacity : 0;
	cursor  : pointer;
	height  : 0;
	width   : 0;
}

.checkmark {
	position          : absolute;
	top               : 0;
	left              : 0;
	height            : 25px;
	width             : 25px;
	/*background-color: #eee;*/
	background-color  : rgb(255 255 255 / 70%);
}

label.checkbox:hover .checkmark {
	background-color: #ccc;
}

label.checkbox input:checked~.checkmark {
	/*background-color: #2196F3;*/
	background-color: rgba(0, 255, 0, 0.5);
}

.checkmark::after {
	content : "";
	position: absolute;
	display : none;
}

label.checkbox input:checked~.checkmark:after {
	display: block;
}

label.checkbox .checkmark:after {
	left             : 9px;
	top              : 5px;
	width            : 5px;
	height           : 10px;
	border           : solid white;
	border-width     : 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform    : rotate(45deg);
	transform        : rotate(45deg);
}


/* Custom Map Button */
::-webkit-file-upload-button {
	color           : white;
	background-color: #120076;
	border          : 2px solid #fff;
	top             : 0;
	bottom          : 0;
	padding-top     : 20px;
	padding-bottom  : 20px;
	padding-left    : 20px;
	padding-right   : 20px;
	font-family     : 'Trebuchet MS', 'Arial Narrow', Arial, sans-serif;
	text-align      : center;
}