_list-view.rtl.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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-right: 2px solid var(--main-first);
  16. transition: unset;
  17. .flux_header {
  18. background-color: unset;
  19. margin-right: -2px; /* Compensate increased border-left-width */
  20. }
  21. }
  22. &.not_read:not(.current) {
  23. background: var(--unread-bg);
  24. &:hover .item .title {
  25. background: var(--unread-bg);
  26. }
  27. }
  28. &.not_read {
  29. .item .title {
  30. a {
  31. color: var(--unread-font-color);
  32. }
  33. }
  34. .item.website {
  35. a {
  36. color: var(--unread-font-color);
  37. }
  38. }
  39. .item .date {
  40. color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
  41. }
  42. }
  43. &.favorite {
  44. border-right-color: var(--fav-bg);
  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. }