Update sass style file

2 files changed, 45 insertions, 223 deletions

diff --git a/web/style/index.css b/web/style/index.css
index 9724105..635a569 100644
--- a/web/style/index.css
+++ b/web/style/index.css
@@ -1,220 +1 @@
-* {
-  font-family: sans-serif
-}
-
-body {
-  margin: 0
-}
-
-h1 {
-  font-size: 1rem
-}
-
-:root {
-  --stickers-per-row: 4;
-  --sticker-size: calc(100vw / var(--stickers-per-row))
-}
-
-main {
-  color: var(--text-color)
-}
-
-main.spinner {
-  margin-top: 5rem
-}
-
-main.error,
-main.empty {
-  margin: 2rem
-}
-
-main.empty {
-  text-align: center
-}
-
-div.search-empty {
-  margin: 1rem;
-  text-align: center
-}
-
-main.has-content {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: grid;
-  grid-template-rows: calc(12vw + 2px) min-content auto
-}
-
-main.theme-light {
-  --highlight-color: #eee;
-  --search-box-color: var(--highlight-color);
-  --text-color: black;
-  background-color: white
-}
-
-main.theme-dark {
-  --highlight-color: #444;
-  --search-box-color: #383e4b;
-  --text-color: white;
-  background-color: #22262e
-}
-
-main.theme-black {
-  --highlight-color: #222;
-  --search-box-color: var(--highlight-color);
-  --text-color: white;
-  background-color: black
-}
-
-.icon {
-  width: 100%;
-  height: 100%;
-  background-color: var(--text-color);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-image: var(--icon-image);
-  -webkit-mask-image: var(--icon-image)
-}
-
-.icon.icon-settings {
-  --icon-image: url(../res/settings.svg)
-}
-
-.icon.icon-recent {
-  --icon-image: url(../res/recent.svg)
-}
-
-.icon.icon-search {
-  --icon-image: url(../res/search.svg)
-}
-
-nav {
-  display: flex;
-  overflow-x: auto
-}
-
-nav>a {
-  border-bottom: 2px solid transparent
-}
-
-nav>a.visible {
-  border-bottom-color: green
-}
-
-nav>a>div.sticker {
-  width: 12vw;
-  height: 12vw
-}
-
-div.pack-list,
-nav {
-  scrollbar-width: none
-}
-
-div.pack-list::-webkit-scrollbar,
-nav::-webkit-scrollbar {
-  display: none
-}
-
-div.pack-list {
-  overflow-y: auto
-}
-
-div.pack-list.ios-safari-hack {
-  position: fixed;
-  top: calc(12vw + 2 * .7rem + 2 * 1rem + 2px);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-overflow-scrolling: touch
-}
-
-section.stickerpack {
-  margin-top: .75rem
-}
-
-section.stickerpack>div.sticker-list {
-  display: flex;
-  flex-wrap: wrap
-}
-
-section.stickerpack>h1 {
-  margin: 0 0 0 .75rem
-}
-
-div.sticker {
-  display: flex;
-  padding: 4px;
-  cursor: pointer;
-  position: relative;
-  width: var(--sticker-size);
-  height: var(--sticker-size);
-  box-sizing: border-box
-}
-
-div.sticker:hover {
-  background-color: var(--highlight-color)
-}
-
-div.sticker>img {
-  display: none;
-  width: 100%;
-  object-fit: contain
-}
-
-div.sticker>img.visible {
-  display: initial
-}
-
-div.sticker>.icon {
-  width: 70%;
-  height: 70%;
-  margin: 15%
-}
-
-div.search-box {
-  position: relative;
-  display: flex;
-}
-
-div.search-box>input[type="text"] {
-  flex-grow: 1;
-  background-color: var(--search-box-color);
-  outline: none;
-  border: none;
-  border-radius: .25rem;
-  padding: .7rem 1.8rem .7rem .7rem;
-  margin: .5rem;
-  font-size: 1rem;
-  color: var(--text-color);
-}
-
-div.search-box>span.icon {
-  display: flex;
-  position: absolute;
-  right: 1rem;
-  top: calc(50% - .5rem);
-  width: 1rem;
-  height: 1rem;
-  box-sizing: border-box;
-}
-
-div.settings-list {
-  display: flex;
-  flex-direction: column
-}
-
-div.settings-list>* {
-  margin: .5rem
-}
-
-div.settings-list button {
-  padding: .5rem;
-  border-radius: .25rem
-}
-
-div.settings-list input {
-  width: 100%
-}
+*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:white}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:black}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}.icon.icon.icon-search{--icon-image: url(../res/search.svg)}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(calc(12vw + 2px) + calc(2 * .7rem + 2 * .5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.search-box{position:relative;display:flex}div.search-box>input[type="text"]{flex-grow:1;background-color:var(--search-box-color);outline:none;border:none;border-radius:.25rem;height:1rem;padding:.7rem;padding-right:calc(1rem + .7rem);margin:.5rem;font-size:1rem;color:var(--text-color)}div.search-box>span.icon{display:flex;position:absolute;top:calc(50% - 1rem / 2);right:1rem;width:1rem;height:1rem;box-sizing:border-box}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}
diff --git a/web/style/index.sass b/web/style/index.sass
index 2b61292..c079f65 100644
--- a/web/style/index.sass
+++ b/web/style/index.sass
@@ -32,6 +32,12 @@ $nav-bottom-highlight: 2px
 $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
 $nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
 
+$search-box-icon-size: 1rem
+$search-box-input-height: 1rem
+$search-box-input-padding: .7rem
+$search-box-input-margin: .5rem
+$search-box-height: calc(2 * #{$search-box-input-padding} + 2 * #{$search-box-input-margin} + #{$search-box-input-height})
+
 main
   color: var(--text-color)
 
@@ -50,22 +56,24 @@ main
     left: 0
     right: 0
     bottom: 0
-
     display: grid
-    grid-template-rows: $nav-height auto
+    grid-template-rows: $nav-height min-content auto
 
 main.theme-light
   --highlight-color: #eee
+  --search-box-color: var(--highlight-color)
   --text-color: black
   background-color: white
 
 main.theme-dark
   --highlight-color: #444
+  --search-box-color: #383e4b
   --text-color: white
   background-color: #22262e
 
 main.theme-black
   --highlight-color: #222
+  --search-box-color: var(--highlight-color)
   --text-color: white
   background-color: black
 
@@ -84,6 +92,9 @@ main.theme-black
   &.icon-recent
     --icon-image: url(../res/recent.svg)
 
+  &.icon.icon-search
+    --icon-image: url(../res/search.svg)
+
 nav
   display: flex
   overflow-x: auto
@@ -109,12 +120,16 @@ div.pack-list
 
 div.pack-list.ios-safari-hack
   position: fixed
-  top: $nav-height
+  top: calc(#{$nav-height} + #{$search-box-height})
   bottom: 0
   left: 0
   right: 0
   -webkit-overflow-scrolling: touch
 
+div.search-empty
+  margin: 1.2rem
+  text-align: center
+
 section.stickerpack
   margin-top: .75rem
 
@@ -150,6 +165,32 @@ div.sticker
     height: 70%
     margin: 15%
 
+div.search-box
+  position: relative
+  display: flex
+
+  >input[type="text"]
+    flex-grow: 1
+    background-color: var(--search-box-color)
+    outline: none
+    border: none
+    border-radius: .25rem
+    height: $search-box-input-height
+    padding: $search-box-input-padding
+    padding-right: calc(#{$search-box-icon-size} + #{$search-box-input-padding})
+    margin: $search-box-input-margin
+    font-size: 1rem
+    color: var(--text-color)
+
+  >span.icon
+    display: flex
+    position: absolute
+    top: calc(50% - #{$search-box-icon-size} / 2)
+    right: $search-box-icon-size
+    width: $search-box-icon-size
+    height: $search-box-icon-size
+    box-sizing: border-box
+
 div.settings-list
   display: flex
   flex-direction: column