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