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   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, #statsfilters {
  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   height: calc(100% - 28px - 2px - (21vmin + 14px));
  76   margin: 7px;
  77   overflow: auto;
  78 }
  79
  80 hr {
  81   margin: 0;
  82 }
  83
  84 select {
  85   text-align: center;
  86 }
  87
  88 select:hover {
  89   background-color: #b41e1e;
  90 }
  91
  92 select > option {
  93   background-color: #c83232;
  94 }
  95
  96 input {
  97   border: none;
  98   outline: none;
  99   font-size: inherit;
 100 }
 101
 102 button, select {
 103   vertical-align: baseline;
 104   width: 18vmin;
 105   height: 7vmin;
 106   background-color: #c83232;
 107   color: white;
 108   border-radius: 4px;
 109   border: none;
 110   outline: none;
 111   font-size: inherit;
 112 }
 113
 114 button:hover {
 115   background-color: #b41e1e;
 116 }
 117
 118 .bottom-right {
 119   position: absolute;
 120   right: 0px;
 121   bottom: 0px;
 122 }
 123
 124 .championIcon {
 125   width: 60px;
 126   height: 60px;
 127 }
 128
 129 #regionselect {
 130   text-transform: uppercase;
 131   position: absolute;
 132   left: 0;
 133   z-index: 1;
 134 }
 135
 136 #nameinput {
 137   text-align: center;
 138   border-bottom: 1px solid lightgray;
 139   width: calc(100% - 36vmin);
 140   height: 7vmin;
 141   position: absolute;
 142   left: 18vmin;
 143   top: 0px;
 144 }
 145
 146 #gobutton, #statsbutton, #historybutton {
 147   position: absolute;
 148   margin: 0px;
 149   top: 0px;
 150   right: 0px;
 151   z-index: 1;
 152 }
 153
 154 #refreshbutton {
 155   position: absolute;
 156   right: 0px;
 157   bottom: 0px;
 158 }
 159
 160 #champselect {
 161   position: absolute;
 162   top: 0;
 163   left: 0;
 164   height: 100%;
 165   width: auto;
 166   overflow: auto;
 167   text-align: left;
 168 }
 169
 170 button.champselect {
 171   width: 9vmin;
 172   height: 3.5vmin;
 173 }
 174
 175 @keyframes startup {
 176   0% {
 177     top: 50%;
 178     transform: translate(-50%, -50%);
 179     @media only screen and (orientation: landscape) {
 180       width: 65%;
 181     }
 182     @media only screen and (orientation: portrait) {
 183       width: 85%;
 184     }
 185   }
 186   100% {
 187     top: 0%;
 188     transform: translate(-50%, 0%);
 189     width: calc(100% - 14px);
 190   }
 191 }
 192 @keyframes startdown {
 193   100% {
 194     top: 50%;
 195     transform: translate(-50%, -50%);
 196     @media only screen and (orientation: landscape) {
 197       width: 65%;
 198     }
 199     @media only screen and (orientation: portrait) {
 200       width: 85%;
 201     }
 202   }
 203   0% {
 204     top: 0%;
 205     transform: translate(-50%, 0%);
 206     width: calc(100% - 14px);
 207   }
 208 }
 209 #start.slideup {
 210   animation: startup 0.3s forwards linear;
 211 }
 212
 213 #start.slidedown {
 214   animation: startdown 0.3s forwards linear;
 215 }
 216
 217 #start.up {
 218   top: 0;
 219   width: calc(100% - 14px);
 220   transform: translate(-50%, 0%);
 221 }
 222
 223 #start.down {
 224   top: 50%;
 225   transform: translate(-50%, -50%);
 226 }
 227 @media only screen and (orientation: landscape) {
 228   #start.down {
 229     width: 65%;
 230   }
 231 }
 232 @media only screen and (orientation: portrait) {
 233   #start.down {
 234     width: 85%;
 235   }
 236 }
 237
 238 /*# sourceMappingURL=style.css.map */