planet-wars/frontend/www/static/res/style.css

240 lines
4.1 KiB
CSS
Raw Normal View History

2019-09-21 16:54:48 +02:00
* {
margin: 0;
padding: 0;
}
2019-09-18 12:29:56 +02:00
body {
background-color: #333;
}
2019-09-17 20:19:04 +02:00
2019-09-21 16:54:48 +02:00
body, html {
height: 99%;
}
2019-09-21 18:56:46 +02:00
p {
padding: 3px 0;
}
2019-09-21 16:54:48 +02:00
#wrapper {
max-height: 100vh;
min-height: 100vh;
width: 100%;
height: 100vh;
}
#main {
height: calc(100% - 200px);
width: 100%;
position: relative;
}
2019-09-24 15:38:04 +02:00
#name {
position: absolute;
top: 10px;
left: 10px;
color: white;
}
2019-09-21 16:54:48 +02:00
#meta{
padding: 10px 2%;
color: white;
position: absolute;
bottom: 0;
width: 96%;
}
#options {
background-color: #444;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
height: 200px;
min-height: 200px !important;
max-height: 200px !important;
}
.option {
display: inline-block;
color: white;
text-align: center;
width: 200px;
height: 100%;
2019-09-21 18:56:46 +02:00
vertical-align:top
2019-09-21 16:54:48 +02:00
}
.option:hover {
background-color: #777;
}
2019-09-17 20:19:04 +02:00
.loading {
position: relative;
display: inline-block;
}
.loading::before{
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #1c5ba2;
border-radius: 100%;
z-index: 5;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-animation: slide-top 0.5s ease-out infinite alternate ;
animation: slide-top 0.5s ease-out infinite alternate ;
}
2019-09-21 16:54:48 +02:00
#speed {
width: 100px;
}
2019-09-17 20:19:04 +02:00
#c {
position: relative;
2019-09-18 12:29:56 +02:00
background-color: black;
2019-09-21 16:54:48 +02:00
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;
2019-09-17 20:19:04 +02:00
}
/* ----------------------------------------------
* 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%);
}
}
2019-09-21 10:43:03 +02:00
/**
* ----------------------------------------
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
* ----------------------------------------
*/
.slidecontainer {
2019-09-21 16:54:48 +02:00
margin-top: 10px;
2019-09-21 10:43:03 +02:00
width: 100%; /* Width of the outside container */
}
.slider {
2019-09-21 16:54:48 +02:00
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
2019-09-21 10:43:03 +02:00
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
2019-09-21 16:54:48 +02:00
-webkit-appearance: none;
2019-09-21 10:43:03 +02:00
appearance: none;
2019-09-21 16:54:48 +02:00
width: 25px;
height: 25px;
border-radius: 50%;
background: #ff7000;
cursor: pointer;
2019-09-21 10:43:03 +02:00
}
.slider::-moz-range-thumb {
2019-09-21 16:54:48 +02:00
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)
2019-09-21 10:43:03 +02:00
}