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

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