_list-view.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /*=== Feed articles */
  2. .flux {
  3. background: var(--white);
  4. transition: all 0.15s ease-in-out;
  5. .flux_header {
  6. &:hover {
  7. background: var(--grey-lighter);
  8. &:not(.current):hover .item .title {
  9. background: var(--grey-lighter);
  10. }
  11. }
  12. }
  13. &.current {
  14. background: var(--grey-lighter);
  15. border-left-color: var(--main-first);
  16. }
  17. &.not_read:not(.current) {
  18. background: var(--unread-bg);
  19. &:hover .item .title {
  20. background: var(--unread-bg);
  21. }
  22. }
  23. &.not_read {
  24. .item .title {
  25. a {
  26. color: var(--unread-font-color);
  27. }
  28. }
  29. .item.website {
  30. a {
  31. color: var(--unread-font-color);
  32. }
  33. }
  34. .item .date {
  35. color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
  36. }
  37. }
  38. &.favorite {
  39. border-left-color: var(--fav-bg);
  40. transition: all 0.15s ease-in-out;
  41. }
  42. &.favorite:not(.current) {
  43. background: var(--fav-light);
  44. &:hover .item .title {
  45. background: var(--fav-light);
  46. }
  47. }
  48. .website {
  49. a {
  50. color: var(--main-font-color);
  51. opacity: 0.75;
  52. }
  53. }
  54. .flux_header .date,
  55. .flux_content .bottom .date {
  56. color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
  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 var(--grey-light);
  68. .title {
  69. font-size: 1rem;
  70. }
  71. }