You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
1.6 KiB

  1. // Copyright (c) 2020 Tulir Asokan
  2. //
  3. // This Source Code Form is subject to the terms of the Mozilla Public
  4. // License, v. 2.0. If a copy of the MPL was not distributed with this
  5. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
  6. *
  7. font-family: sans-serif
  8. body
  9. margin: 0
  10. h1
  11. font-size: 1rem
  12. $sticker-size: 25vw
  13. $nav-sticker-size: 12vw
  14. $nav-bottom-highlight: 2px
  15. $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
  16. $nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
  17. main
  18. &.spinner
  19. margin-top: 5rem
  20. &.error, &.empty
  21. margin: 2rem
  22. &.empty
  23. text-align: center
  24. &.has-content
  25. position: fixed
  26. top: 0
  27. left: 0
  28. right: 0
  29. bottom: 0
  30. display: grid
  31. grid-template-rows: $nav-height auto
  32. nav
  33. display: flex
  34. overflow-x: auto
  35. height: $nav-height
  36. background-color: white
  37. > a
  38. border-bottom: $nav-bottom-highlight solid transparent
  39. &.visible
  40. border-bottom-color: green
  41. > div.sticker
  42. width: $nav-sticker-size
  43. height: $nav-sticker-size
  44. div.pack-list, nav
  45. scrollbar-width: none
  46. &::-webkit-scrollbar
  47. display: none
  48. div.pack-list
  49. overflow-y: auto
  50. section.stickerpack
  51. margin-top: .75rem
  52. > div.sticker-list
  53. display: flex
  54. flex-wrap: wrap
  55. > h1
  56. margin: 0 0 0 .75rem
  57. div.sticker
  58. display: flex
  59. padding: 4px
  60. cursor: pointer
  61. position: relative
  62. width: $sticker-size
  63. height: $sticker-size
  64. box-sizing: border-box
  65. &:hover
  66. background-color: #eee
  67. > img
  68. display: none
  69. width: 100%
  70. object-fit: contain
  71. &.visible
  72. display: initial