_list-view.scss 1.5 KB

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