add stickers

1 files changed, 227 insertions, 0 deletions

diff --git a/sticker.pinapelz.moe/style/index.sass b/sticker.pinapelz.moe/style/index.sass
new file mode 100644
index 0000000..1269be5
--- /dev/null
+++ b/sticker.pinapelz.moe/style/index.sass
@@ -0,0 +1,227 @@
+// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
+// Copyright (C) 2020 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+*
+  font-family: sans-serif
+
+body
+  margin: 0
+
+h1
+  font-size: 1rem
+
+\:root
+  --stickers-per-row: 4
+  --sticker-size: calc(100vw / var(--stickers-per-row))
+
+$nav-sticker-size: 12vw
+$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)
+
+  &.spinner
+    margin-top: 5rem
+
+  &.error, &.empty
+    margin: 2rem
+
+  &.empty
+    text-align: center
+
+  &.has-content
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    display: grid
+    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
+
+  .icon.icon-giphy
+    background-image: url(../res/giphy-dark.svg)
+
+main.theme-black
+  --highlight-color: #222
+  --search-box-color: var(--highlight-color)
+  --text-color: white
+  background-color: black
+
+  .icon.icon-giphy
+    background-image: url(../res/giphy-dark.svg)
+
+div.powered-by-giphy
+  padding: 1rem
+  > img
+    width: 100%
+
+.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-settings
+    --icon-image: url(../res/settings.svg)
+
+  &.icon-recent
+    --icon-image: url(../res/recent.svg)
+
+  &.icon.icon-search
+    --icon-image: url(../res/search.svg)
+
+  &.icon.icon-giphy
+    background: center / contain no-repeat url(../res/giphy-light.svg)
+    mask: unset
+
+nav
+  display: flex
+  overflow-x: auto
+
+  > a
+    border-bottom: $nav-bottom-highlight solid transparent
+
+    &.visible
+      border-bottom-color: green
+
+    > div.sticker
+      width: $nav-sticker-size
+      height: $nav-sticker-size
+
+div.pack-list, nav
+  scrollbar-width: none
+
+  &::-webkit-scrollbar
+    display: none
+
+div.pack-list
+  overflow-y: auto
+
+div.pack-list.ios-safari-hack
+  position: fixed
+  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
+
+  > div.sticker-list
+    display: flex
+    flex-wrap: wrap
+
+  > h1
+    margin: 0 0 0 .75rem
+
+section.stickerpack#pack-giphy
+  display: flex
+  justify-content: space-between
+  flex-direction: column
+  min-height: 100%
+
+div.sticker
+  display: flex
+  padding: 4px
+  cursor: pointer
+  position: relative
+  width: var(--sticker-size)
+  height: var(--sticker-size)
+  box-sizing: border-box
+
+  &:hover
+    background-color: var(--highlight-color)
+
+  > img
+    display: none
+    width: 100%
+    object-fit: contain
+
+    &.visible
+      display: initial
+
+  > .icon
+    width: 70%
+    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
+
+  > *
+    margin: .5rem
+
+  button
+    padding: .5rem
+    border-radius: .25rem
+
+  input
+    width: 100%