boardList.styl 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. .board-list
  2. margin: 25px auto
  3. width: 1200px
  4. li
  5. float: left
  6. width: 25%
  7. box-sizing: border-box
  8. position: relative
  9. &.starred .fa-star-o
  10. opacity: 1
  11. a
  12. background-color: #999
  13. color: #f6f6f6
  14. height: 90px
  15. font-size: 16px
  16. line-height: 22px
  17. border-radius: 3px
  18. display: block
  19. font-weight: 700
  20. min-height: 18px
  21. padding: 8px 12px 8px 12px
  22. margin: 0 16px 16px 0
  23. position: relative
  24. text-decoration: none
  25. &.tile
  26. background-size: auto
  27. background-repeat: repeat
  28. .board-list-item-sub-name
  29. color: rgba(255, 255, 255, .5)
  30. display: block
  31. font-size: 14px
  32. font-weight: 400
  33. line-height: 22px
  34. .fa-star-o
  35. bottom: 0
  36. font-size: 14px
  37. height: 18px
  38. line-height: 18px
  39. opacity: 0
  40. padding: 9px 9px
  41. position: absolute
  42. right: 0
  43. top: 0
  44. transition-duration: .15s
  45. transition-property: color, font-size, background
  46. .is-star-active
  47. color: #e6bf00
  48. li:hover a
  49. color: #f6f6f6
  50. .fa-star-o
  51. color: #fff
  52. opacity: .75
  53. &:hover
  54. font-size: 18px
  55. opacity: 1
  56. &.is-star-active
  57. color: #e6bf00
  58. opacity: 1
  59. &:hover
  60. color: #ffd91a
  61. font-size: 16px
  62. opacity: 1
  63. .board-backgrounds-list
  64. .board-background-select
  65. box-sizing: border-box
  66. display: block
  67. float: left
  68. width: 50%
  69. padding-top: 12px
  70. position: relative
  71. z-index: 1
  72. &:nth-child(-n + 2)
  73. padding-top: 0
  74. &:nth-child(2n)
  75. padding-left: 6px
  76. &:nth-child(2n+1)
  77. padding-right: 6px
  78. .background-box
  79. border-radius: 3px
  80. background-size: cover
  81. display: block
  82. height: 74px
  83. position: relative
  84. width: 100%
  85. cursor: pointer
  86. display: flex
  87. align-items: center
  88. justify-content: center
  89. i.fa-check
  90. font-size: 25px
  91. color: white