stickerpicker/web/style/index.sass

// Copyright (c) 2020 Tulir Asokan
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

*
  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})

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 auto

main.theme-light
  --highlight-color: #eee
  --text-color: black
  background-color: white

main.theme-dark
  --highlight-color: #444
  --text-color: white
  background-color: #22262e

main.theme-black
  --highlight-color: #222
  --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-settings
    --icon-image: url(../res/settings.svg)

  &.icon-recent
    --icon-image: url(../res/recent.svg)

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: $nav-height
  bottom: 0
  left: 0
  right: 0
  -webkit-overflow-scrolling: touch

section.stickerpack
  margin-top: .75rem

  > div.sticker-list
    display: flex
    flex-wrap: wrap

  > 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

  &: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.settings-list
  display: flex
  flex-direction: column

  > *
    margin: .5rem

  button
    padding: .5rem
    border-radius: .25rem

  input
    width: 100%