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.

80 lines
1.5 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. * {
  2. font-family: sans-serif; }
  3. body {
  4. margin: 0; }
  5. h1 {
  6. font-size: 1rem; }
  7. main.spinner {
  8. margin-top: 5rem; }
  9. main.error, main.empty {
  10. margin: 2rem; }
  11. main.empty {
  12. text-align: center; }
  13. main.has-content {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. right: 0;
  18. bottom: 0;
  19. display: grid;
  20. grid-template-rows: calc(12vw + 2px) auto; }
  21. nav {
  22. display: flex;
  23. overflow-x: auto;
  24. height: calc(12vw + 2px);
  25. background-color: white; }
  26. nav > a {
  27. border-bottom: 2px solid transparent; }
  28. nav > a.visible {
  29. border-bottom-color: green; }
  30. nav > a > div.sticker {
  31. width: 12vw;
  32. height: 12vw; }
  33. div.pack-list, nav {
  34. scrollbar-width: none; }
  35. div.pack-list::-webkit-scrollbar, nav::-webkit-scrollbar {
  36. display: none; }
  37. div.pack-list {
  38. overflow-y: auto; }
  39. div.pack-list.ios-safari-hack {
  40. position: fixed;
  41. top: calc(12vw + 2px);
  42. bottom: 0;
  43. left: 0;
  44. right: 0;
  45. -webkit-overflow-scrolling: touch; }
  46. section.stickerpack {
  47. margin-top: .75rem; }
  48. section.stickerpack > div.sticker-list {
  49. display: flex;
  50. flex-wrap: wrap; }
  51. section.stickerpack > h1 {
  52. margin: 0 0 0 .75rem; }
  53. div.sticker {
  54. display: flex;
  55. padding: 4px;
  56. cursor: pointer;
  57. position: relative;
  58. width: 25vw;
  59. height: 25vw;
  60. box-sizing: border-box; }
  61. div.sticker:hover {
  62. background-color: #eee; }
  63. div.sticker > img {
  64. display: none;
  65. width: 100%;
  66. object-fit: contain; }
  67. div.sticker > img.visible {
  68. display: initial; }