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.

165 lines
3.1 KiB

  1. // maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
  2. // Copyright (C) 2020 Tulir Asokan
  3. //
  4. // This program is free software: you can redistribute it and/or modify
  5. // it under the terms of the GNU Affero General Public License as published by
  6. // the Free Software Foundation, either version 3 of the License, or
  7. // (at your option) any later version.
  8. //
  9. // This program is distributed in the hope that it will be useful,
  10. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  11. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  12. // GNU Affero General Public License for more details.
  13. //
  14. // You should have received a copy of the GNU Affero General Public License
  15. // along with this program. If not, see <https://www.gnu.org/licenses/>.
  16. *
  17. font-family: sans-serif
  18. body
  19. margin: 0
  20. h1
  21. font-size: 1rem
  22. \:root
  23. --stickers-per-row: 4
  24. --sticker-size: calc(100vw / var(--stickers-per-row))
  25. $nav-sticker-size: 12vw
  26. $nav-bottom-highlight: 2px
  27. $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
  28. $nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
  29. main
  30. color: var(--text-color)
  31. &.spinner
  32. margin-top: 5rem
  33. &.error, &.empty
  34. margin: 2rem
  35. &.empty
  36. text-align: center
  37. &.has-content
  38. position: fixed
  39. top: 0
  40. left: 0
  41. right: 0
  42. bottom: 0
  43. display: grid
  44. grid-template-rows: $nav-height auto
  45. main.theme-light
  46. --highlight-color: #eee
  47. --text-color: black
  48. background-color: white
  49. main.theme-dark
  50. --highlight-color: #444
  51. --text-color: white
  52. background-color: #22262e
  53. main.theme-black
  54. --highlight-color: #222
  55. --text-color: white
  56. background-color: black
  57. .icon
  58. width: 100%
  59. height: 100%
  60. background-color: var(--text-color)
  61. mask-size: contain
  62. -webkit-mask-size: contain
  63. mask-image: var(--icon-image)
  64. -webkit-mask-image: var(--icon-image)
  65. &.icon-settings
  66. --icon-image: url(../res/settings.svg)
  67. &.icon-recent
  68. --icon-image: url(../res/recent.svg)
  69. nav
  70. display: flex
  71. overflow-x: auto
  72. > a
  73. border-bottom: $nav-bottom-highlight solid transparent
  74. &.visible
  75. border-bottom-color: green
  76. > div.sticker
  77. width: $nav-sticker-size
  78. height: $nav-sticker-size
  79. div.pack-list, nav
  80. scrollbar-width: none
  81. &::-webkit-scrollbar
  82. display: none
  83. div.pack-list
  84. overflow-y: auto
  85. div.pack-list.ios-safari-hack
  86. position: fixed
  87. top: $nav-height
  88. bottom: 0
  89. left: 0
  90. right: 0
  91. -webkit-overflow-scrolling: touch
  92. section.stickerpack
  93. margin-top: .75rem
  94. > div.sticker-list
  95. display: flex
  96. flex-wrap: wrap
  97. > h1
  98. margin: 0 0 0 .75rem
  99. div.sticker
  100. display: flex
  101. padding: 4px
  102. cursor: pointer
  103. position: relative
  104. width: var(--sticker-size)
  105. height: var(--sticker-size)
  106. box-sizing: border-box
  107. &:hover
  108. background-color: var(--highlight-color)
  109. > img
  110. display: none
  111. width: 100%
  112. object-fit: contain
  113. &.visible
  114. display: initial
  115. > .icon
  116. width: 70%
  117. height: 70%
  118. margin: 15%
  119. div.settings-list
  120. display: flex
  121. flex-direction: column
  122. > *
  123. margin: .5rem
  124. button
  125. padding: .5rem
  126. border-radius: .25rem
  127. input
  128. width: 100%