sass

[lolstats] / html / style.sass

diff --git a/html/style.sass b/html/style.sass
new file mode 100644 (file)
index 0000000..cf15189
--- /dev/null
+++ b/html/style.sass
@@ -0,0 +1,158 @@
+$widget-width: 18vmin
+$widget-height: 7vmin
+$color1: rgb(200, 50, 50)
+$color1-dark: rgb(180, 30, 30)
+$color2: white
+$font-size1: 4.5vmin
+$font-size2: 2.5vmin
+$margin: 7px
+$border: 4px
+
+body
+  font-family: 'Noto Sans SC', sans-serif
+  font-weight: bold
+  padding: 0px
+  margin: 0px
+#background
+  position: fixed
+  width: 100%
+  height: 100%
+  background-color: $color1
+  box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset
+#start
+  position: absolute
+  margin: $margin
+  left: calc(50% - #{$margin})
+  top: 50%
+  transform: translate(-50%, -50%)
+  text-align: center
+  background-color: transparent
+  border-radius: $border
+  background-color: $color2
+  box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8)
+@media only screen and (orientation: landscape)
+  #start
+    width: 65%
+@media only screen and (orientation: portrait)
+  #start
+    width: 85%
+#title
+  width: 100%
+  color: $color2
+  text-shadow: 1px 1px 40px black
+  user-select: none
+#inputpanel
+  width: calc(100% - #{2 * $margin})
+  height: $widget-height
+  font-size: $font-size1
+  position: relative
+  margin: $margin
+#matchhistory, #stats
+  position: absolute
+  font-size: $font-size2
+  width: calc(100% - #{2 * $margin})
+  min-height: calc(100% - (#{$widget-height} + #{3 * $margin}) - #{2 * $margin})
+  margin: $margin
+  top: calc(#{$widget-height} + #{3 * $margin})
+  background-color: $color2
+  border-radius: $border
+  text-align: center
+#historyfilters
+  position: relative
+  width: calc(100% - #{2 * $margin})
+  height: calc(#{3 * $widget-height} + #{2 * $margin})
+  margin: $margin
+#matchlist
+  width: calc(100% - #{2 * $margin})
+  margin: $margin
+  height: auto
+hr
+  margin: 0
+select
+  text-align: center
+select:hover
+  background-color: $color1-dark
+select>option
+  background-color: $color1
+input
+  border: none
+  outline: none
+  font-size: inherit
+button, select
+  vertical-align: baseline
+  width: $widget-width
+  height: $widget-height
+  background-color: $color1
+  color: $color2
+  border-radius: $border
+  border: none
+  outline: none
+  font-size: inherit
+button:hover
+  background-color: $color1-dark
+.bottom-right
+  position: absolute
+  right: 0px
+  bottom: 0px
+#regionselect
+  text-transform: uppercase
+  position: absolute
+  left: 0
+  z-index: 1
+#nameinput
+  text-align: center
+  border-bottom: 1px solid lightgray
+  width: calc(100% - #{2 * $widget-width})
+  height: $widget-height
+  position: absolute
+  left: $widget-width
+  top: 0px
+#gobutton, #statsbutton, #historybutton
+  position: absolute
+  margin: 0px
+  top: 0px
+  right: 0px
+  z-index: 1
+#refreshbutton
+  position: absolute
+  right: 0px
+  bottom: 0px
+@keyframes startup
+  0%
+    top: 50%
+    transform: translate(-50%, -50%)
+    @media only screen and (orientation: landscape)
+      width: 65%
+    @media only screen and (orientation: portrait)
+      width: 85%
+  100%
+    top: 0%
+    transform: translate(-50%, 0%)
+    width: calc(100% - #{2 * $margin})
+@keyframes startdown
+  100%
+    top: 50%
+    transform: translate(-50%, -50%)
+    @media only screen and (orientation: landscape)
+      width: 65%
+    @media only screen and (orientation: portrait)
+      width: 85%
+  0%
+    top: 0%
+    transform: translate(-50%, 0%)
+    width: calc(100% - #{2 * $margin})
+#start.slideup
+  animation: startup 0.3s forwards linear
+#start.slidedown
+  animation: startdown 0.3s forwards linear
+#start.up
+  top: 0
+  width: calc(100% - #{2 * $margin})
+  transform: translate(-50%, 0%)
+#start.down
+  top: 50%
+  transform: translate(-50%, -50%)
+  @media only screen and (orientation: landscape)
+    width: 65%
+  @media only screen and (orientation: portrait)
+    width: 85%