_list-view.css 1.4 KB

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