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   min-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
  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   margin: $margin
  68   height: auto
  69 hr
  70   margin: 0
  71 select
  72   text-align: center
  73 select:hover
  74   background-color: $color1-dark
  75 select>option
  76   background-color: $color1
  77 input
  78   border: none
  79   outline: none
  80   font-size: inherit
  81 button, select
  82   vertical-align: baseline
  83   width: $widget-width
  84   height: $widget-height
  85   background-color: $color1
  86   color: $color2
  87   border-radius: $border
  88   border: none
  89   outline: none
  90   font-size: inherit
  91 button:hover
  92   background-color: $color1-dark
  93 .bottom-right
  94   position: absolute
  95   right: 0px
  96   bottom: 0px
  97 #regionselect
  98   text-transform: uppercase
  99   position: absolute
 100   left: 0
 101   z-index: 1
 102 #nameinput
 103   text-align: center
 104   border-bottom: 1px solid lightgray
 105   width: calc(100% - #{2 * $widget-width})
 106   height: $widget-height
 107   position: absolute
 108   left: $widget-width
 109   top: 0px
 110 #gobutton, #statsbutton, #historybutton
 111   position: absolute
 112   margin: 0px
 113   top: 0px
 114   right: 0px
 115   z-index: 1
 116 #refreshbutton
 117   position: absolute
 118   right: 0px
 119   bottom: 0px
 120 @keyframes startup
 121   0%
 122     top: 50%
 123     transform: translate(-50%, -50%)
 124     @media only screen and (orientation: landscape)
 125       width: 65%
 126     @media only screen and (orientation: portrait)
 127       width: 85%
 128   100%
 129     top: 0%
 130     transform: translate(-50%, 0%)
 131     width: calc(100% - #{2 * $margin})
 132 @keyframes startdown
 133   100%
 134     top: 50%
 135     transform: translate(-50%, -50%)
 136     @media only screen and (orientation: landscape)
 137       width: 65%
 138     @media only screen and (orientation: portrait)
 139       width: 85%
 140   0%
 141     top: 0%
 142     transform: translate(-50%, 0%)
 143     width: calc(100% - #{2 * $margin})
 144 #start.slideup
 145   animation: startup 0.3s forwards linear
 146 #start.slidedown
 147   animation: startdown 0.3s forwards linear
 148 #start.up
 149   top: 0
 150   width: calc(100% - #{2 * $margin})
 151   transform: translate(-50%, 0%)
 152 #start.down
 153   top: 50%
 154   transform: translate(-50%, -50%)
 155   @media only screen and (orientation: landscape)
 156     width: 65%
 157   @media only screen and (orientation: portrait)
 158     width: 85%