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