FXclient-mirror/static/main.css

154 lines
3.1 KiB
CSS

.scrollable {
overflow-y: auto;
}
.window {
position : fixed;
background-color: rgba(0, 0, 0, 0.7);
width : 90%;
top : 0;
color : white;
font-family : 'Franklin Gothic Medium', 'Arial Narrow', 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 {
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;
}
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;
}
input#userna,
input#inputfilebtn {
transition: 0.2s
}
.window#donationhistory { 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;
}