_list-view.scss 1.4 KB

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