_list-view.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @use "sass:color";
  2. @use "mixins";
  3. @use "variables";
  4. /*=== Feed articles */
  5. .flux {
  6. background: variables.$white;
  7. @include mixins.transition(all, 0.15s, ease-in-out);
  8. &:hover {
  9. background: variables.$grey-lighter;
  10. &:not(.current):hover .item.title {
  11. background: variables.$grey-lighter;
  12. }
  13. }
  14. &.current {
  15. background: variables.$grey-lighter;
  16. border-left-color: variables.$main-first;
  17. }
  18. &.not_read:not(.current) {
  19. background: variables.$unread-bg;
  20. &:hover .item.title {
  21. background: variables.$unread-bg;
  22. }
  23. }
  24. &.not_read {
  25. .item.title {
  26. a {
  27. color: variables.$unread-font-color;
  28. }
  29. }
  30. .item.website {
  31. a {
  32. color: variables.$unread-font-color;
  33. }
  34. }
  35. .item.date {
  36. color: color.scale(variables.$unread-font-color, $alpha: -50%);
  37. }
  38. }
  39. &.favorite {
  40. border-left-color: variables.$fav-bg;
  41. @include mixins.transition(all, 0.15s, ease-in-out);
  42. }
  43. &.favorite:not(.current) {
  44. background: variables.$fav-light;
  45. &:hover .item.title {
  46. background: variables.$fav-light;
  47. }
  48. }
  49. .website {
  50. a {
  51. color: variables.$main-font-color;
  52. opacity: 0.75;
  53. }
  54. .favicon {
  55. padding: 5px;
  56. }
  57. }
  58. .item.date {
  59. color: color.scale(variables.$main-font-color, $alpha: -50%);
  60. font-size: 0.85rem;
  61. }
  62. .bottom {
  63. font-size: 1rem;
  64. text-align: center;
  65. }
  66. }
  67. .flux_header {
  68. font-size: 1rem;
  69. cursor: pointer;
  70. border-top: 1px solid variables.$grey-light;
  71. .title {
  72. font-size: 1rem;
  73. }
  74. }