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
   8 #background {
   9   position: fixed;
  10   width: 100%;
  11   height: 100%;
  12   background-color: #c83232;
  13   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
  14 }
  15
  16 #start {
  17   position: absolute;
  18   margin: 7px;
  19   left: calc(50% - 7px);
  20   top: 50%;
  21   transform: translate(-50%, -50%);
  22   text-align: center;
  23   background-color: transparent;
  24   border-radius: 4px;
  25   background-color: white;
  26   box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8);
  27 }
  28
  29 @media only screen and (orientation: landscape) {
  30   #start {
  31     width: 65%;
  32   }
  33 }
  34 @media only screen and (orientation: portrait) {
  35   #start {
  36     width: 85%;
  37   }
  38 }
  39 #title {
  40   width: 100%;
  41   color: white;
  42   text-shadow: 1px 1px 40px black;
  43   user-select: none;
  44 }
  45
  46 #inputpanel {
  47   width: calc(100% - 14px);
  48   height: 7vmin;
  49   font-size: 4.5vmin;
  50   position: relative;
  51   margin: 7px;
  52 }
  53
  54 #matchhistory, #stats {
  55   position: absolute;
  56   font-size: 2.5vmin;
  57   width: calc(100% - 14px);
  58   min-height: calc(100% - (7vmin + 21px) - 14px);
  59   margin: 7px;
  60   top: calc(7vmin + 21px);
  61   background-color: white;
  62   border-radius: 4px;
  63   text-align: center;
  64 }
  65
  66 #historyfilters {
  67   position: relative;
  68   width: calc(100% - 14px);
  69   height: calc(21vmin + 14px);
  70   margin: 7px;
  71 }
  72
  73 #matchlist {
  74   width: calc(100% - 14px);
  75   margin: 7px;
  76   height: auto;
  77 }
  78
  79 hr {
  80   margin: 0;
  81 }
  82
  83 select {
  84   text-align: center;
  85 }
  86
  87 select:hover {
  88   background-color: #b41e1e;
  89 }
  90
  91 select > option {
  92   background-color: #c83232;
  93 }
  94
  95 input {
  96   border: none;
  97   outline: none;
  98   font-size: inherit;
  99 }
 100
 101 button, select {
 102   vertical-align: baseline;
 103   width: 18vmin;
 104   height: 7vmin;
 105   background-color: #c83232;
 106   color: white;
 107   border-radius: 4px;
 108   border: none;
 109   outline: none;
 110   font-size: inherit;
 111 }
 112
 113 button:hover {
 114   background-color: #b41e1e;
 115 }
 116
 117 .bottom-right {
 118   position: absolute;
 119   right: 0px;
 120   bottom: 0px;
 121 }
 122
 123 #regionselect {
 124   text-transform: uppercase;
 125   position: absolute;
 126   left: 0;
 127   z-index: 1;
 128 }
 129
 130 #nameinput {
 131   text-align: center;
 132   border-bottom: 1px solid lightgray;
 133   width: calc(100% - 36vmin);
 134   height: 7vmin;
 135   position: absolute;
 136   left: 18vmin;
 137   top: 0px;
 138 }
 139
 140 #gobutton, #statsbutton, #historybutton {
 141   position: absolute;
 142   margin: 0px;
 143   top: 0px;
 144   right: 0px;
 145   z-index: 1;
 146 }
 147
 148 #refreshbutton {
 149   position: absolute;
 150   right: 0px;
 151   bottom: 0px;
 152 }
 153
 154 @keyframes startup {
 155   0% {
 156     top: 50%;
 157     transform: translate(-50%, -50%);
 158     @media only screen and (orientation: landscape) {
 159       width: 65%;
 160     }
 161     @media only screen and (orientation: portrait) {
 162       width: 85%;
 163     }
 164   }
 165   100% {
 166     top: 0%;
 167     transform: translate(-50%, 0%);
 168     width: calc(100% - 14px);
 169   }
 170 }
 171 @keyframes startdown {
 172   100% {
 173     top: 50%;
 174     transform: translate(-50%, -50%);
 175     @media only screen and (orientation: landscape) {
 176       width: 65%;
 177     }
 178     @media only screen and (orientation: portrait) {
 179       width: 85%;
 180     }
 181   }
 182   0% {
 183     top: 0%;
 184     transform: translate(-50%, 0%);
 185     width: calc(100% - 14px);
 186   }
 187 }
 188 #start.slideup {
 189   animation: startup 0.3s forwards linear;
 190 }
 191
 192 #start.slidedown {
 193   animation: startdown 0.3s forwards linear;
 194 }
 195
 196 #start.up {
 197   top: 0;
 198   width: calc(100% - 14px);
 199   transform: translate(-50%, 0%);
 200 }
 201
 202 #start.down {
 203   top: 50%;
 204   transform: translate(-50%, -50%);
 205 }
 206 @media only screen and (orientation: landscape) {
 207   #start.down {
 208     width: 65%;
 209   }
 210 }
 211 @media only screen and (orientation: portrait) {
 212   #start.down {
 213     width: 85%;
 214   }
 215 }
 216
 217 /*# sourceMappingURL=style.css.map */