matrix-stickers/web/style/index.sass

// 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%