FXclient-mirror/static/main.css

208 lines
3.7 KiB
CSS
Raw Normal View History

2022-12-27 10:22:27 -08:00
.scrollable {
overflow-y: auto;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #aaaaaa;
}
2022-12-27 10:22:27 -08:00
.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;
2022-12-27 10:22:27 -08:00
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,
2024-02-21 11:58:22 -08:00
.window input,
.window select {
2022-12-27 10:22:27 -08:00
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;
}
2022-12-27 10:22:27 -08:00
canvas,
input,
textarea {
2022-12-27 10:22:27 -08:00
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;
}
2022-12-27 10:22:27 -08:00
input#userna,
input#inputfilebtn {
transition: 0.2s
}
2024-03-05 12:29:17 -08:00
.selectable {
user-select: text;
}
.color-red {
color: #dc143c;
}
.color-green {
color: #32cd32;
}
.color-light-gray {
color: #aaaaaa;
}
2022-12-27 10:22:27 -08:00
/* 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;
}