gitweb.ps.run Git - lolstats/blob - html/style.css

   1 body {
   2   font-family: 'Noto Sans SC', sans-serif;
   3   font-weight: bold;
   4   background-color: black;
   5   width: 100%;
   6   height: 100%;
   7   padding: 0px;
   8   margin: 0px;
   9   background-color: rgb(200, 50, 50);
  10   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
  11 }
  12 input, select, button {
  13   font-size:inherit;
  14   border: none;
  15 }
  16 @keyframes startup {
  17   0% {
  18     top: 50%;
  19     transform: translate(-50%, -50%);
  20     width: 65%;
  21   }
  22   100% {
  23     top: 0%;
  24     transform: translate(-50%, 0%);
  25     width: calc(100% - 20px);
  26   }
  27 }
  28 @keyframes startdown {
  29   100% {
  30     top: 50%;
  31     transform: translate(-50%, -50%);
  32     width: 65%;
  33   }
  34   0% {
  35     top: 0%;
  36     transform: translate(-50%, 0%);
  37     width: calc(100% - 20px);
  38   }
  39 }
  40 #start.slideup {
  41   animation: startup 0.3s forwards linear;
  42 }
  43 #start.slidedown {
  44   animation: startdown 0.3s forwards linear;
  45 }
  46 #start.up {
  47   top: 0%;
  48   transform: translate(-50%, 0%);
  49   width: calc(100% - 20px);
  50 }
  51 #start.down {
  52   top: 50%;
  53   transform: translate(-50%, -50%);
  54   width: 65%;
  55 }
  56 #start {
  57   position: absolute;
  58   width: 65%;
  59   left: 50%;
  60   top: 50%;
  61   transform: translate(-50%, -50%);
  62   padding: 10px;
  63   text-align: center;
  64   background-color: transparent;
  65   font-size: 5rem;
  66 }
  67 #title {
  68   width: 100%;
  69   color: white;
  70   text-shadow: 1px 1px 40px black;
  71   user-select: none;
  72 }
  73 #inputpanel {
  74   border-radius: 5px;
  75   width: calc(100% - 20px);
  76   height: 50px;
  77   background-color: white;
  78   padding: 10px;
  79   box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8);
  80   font-size: 2rem;
  81   position: relative;
  82 }
  83 #regionselect {
  84   width: 110px;
  85   height: 50px;
  86   position: relative;
  87   top: 0px;
  88   padding: 0px 0px 0px 10px;
  89   margin: 5px;
  90   text-align: center;
  91   background-color: rgb(200, 50, 50);
  92   color: white;
  93   border-radius: 5px;
  94   border: none;
  95   outline: none;
  96   text-transform: uppercase;
  97   position: absolute;
  98   left: 5px;
  99   top: 5px;
 100   z-index: 1;
 101 }
 102 #regionselect:hover {
 103   background-color: rgb(180, 30, 30);
 104 }
 105 #regionselect>option {
 106   background-color: rgb(200, 50, 50);
 107 }
 108 #nameinput {
 109   text-align: center;
 110   border-bottom: 1px solid lightgray;
 111   outline: none;
 112   margin: 5px;
 113   width: calc(100% - 220px - 10px);
 114   height: 50px;
 115   position: absolute;
 116   left: 110px;
 117   top: 5px;
 118 }
 119 #gobutton, #statsbutton, #historybutton {
 120   position: absolute;
 121   top: 5px;
 122   right: 5px;
 123   z-index: 1;
 124 }
 125 #refreshbutton {
 126   position: absolute;
 127   right: 5px;
 128   bottom: 5px;
 129 }
 130 button {
 131   vertical-align: baseline;
 132   margin: 5px;
 133   width: 110px;
 134   height: 50px;
 135   background-color: rgb(200, 50, 50);
 136   color: white;
 137   border-radius: 5px;
 138   outline: none;
 139 }
 140 #gobutton:hover {
 141   background-color: rgba(180, 30, 30);
 142 }
 143 #matchhistory, #stats {
 144   position: absolute;
 145   width: calc(100% - 20px);
 146   height: calc(100% - 90px - 10px);
 147   left: 10px;
 148   top: 90px;
 149   background-color: white;
 150   border-radius: 5px;
 151   text-align: center;
 152 }
 153 .bottom-right {
 154   position: absolute;
 155   right: 0px;
 156   bottom: 0px;
 157 }