planet-wars/frontend/www/static/res/style.css
2020-04-01 22:16:55 +02:00

327 lines
No EOL
5.4 KiB
CSS

* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
p {
padding: 3px 0;
}
#wrapper {
max-height: 100%;
min-height: 100%;
width: 100%;
height: 100%;
display: flex;
}
#main {
height: 100%;
flex-grow: 1;
position: relative;
}
#name {
position: absolute;
top: 10px;
left: 10px;
color: white;
}
#meta {
padding: 10px 2%;
color: white;
position: absolute;
bottom: 0;
width: 96%;
}
.options {
background-color: black;
max-width: 300px;
width: 20%;
min-width: 150px;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.option {
color: white;
margin: 0 0 20px 0;
padding: 10px;
background-color: grey;
}
.option:last-child {
margin: 0;
}
.option:hover {
background-color: #777;
}
.lds-roller {
display: none;
}
.loading>.lds-roller {
display: inline-block;
}
.lds-roller {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#speed {
width: 100px;
}
#c {
position: relative;
background-color: black;
width: 100%;
height: 100%;
}
.button {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}
.button:before,
.button:after {
content: "";
position: absolute;
background-color: grey;
}
.button:hover:before,
.button:hover:after {
background-color: white;
}
.button:before {
top: 0;
left: 50%;
width: 6px;
height: 100%;
margin-left: -3px;
}
.button:after {
top: 50%;
left: 0;
width: 100%;
height: 6px;
margin-top: -3px;
}
/* ----------------------------------------------
* Generated by Animista on 2019-9-17 14:35:13
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-top
* ----------------------------------------
*/
@-webkit-keyframes slide-top {
0% {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
100% {
-webkit-transform: translate(-50%, -150%);
transform: translate(-50%, -150%);
}
}
@keyframes slide-top {
0% {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
100% {
-webkit-transform: translate(-50%, -150%);
transform: translate(-50%, -150%);
}
}
/**
* ----------------------------------------
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
* ----------------------------------------
*/
.slidecontainer {
margin-top: 10px;
width: 100%;
/* Width of the outside container */
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #ff7000;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #ff7000;
cursor: pointer;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #444;
border-radius: 10px;
}
::-webkit-scrollbar {
width: 10px;
background-color: #444;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
}