_list-view.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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. }
  55. .item.date {
  56. color: color.scale(variables.$main-font-color, $alpha: -50%);
  57. font-size: 0.85rem;
  58. }
  59. .bottom {
  60. font-size: 1rem;
  61. text-align: center;
  62. }
  63. }
  64. .flux_header {
  65. font-size: 1rem;
  66. cursor: pointer;
  67. border-top: 1px solid variables.$grey-light;
  68. .title {
  69. font-size: 1rem;
  70. }
  71. }