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

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