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

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #333;
}

body, html {
  height: 99%;
}

p {
  padding: 3px 0;
}

#wrapper {
  max-height: 100vh;
  min-height: 100vh;

  width: 100%;
  height: 100vh;
}

#main {
  height: calc(100% - 200px);
  width: 100%;
  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: #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%;
  vertical-align:top
}

.option:hover {
  background-color: #777;
}

.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 ;
 }

 #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)
}