night.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. @import "../css/default.less";
  2. :root {
  3. --bg-main : #333;
  4. --border-main : #666;
  5. --border-dark : #222;
  6. --bg-panel : #222;
  7. --fg-main: #999;
  8. --fg-light : #ccc;
  9. --bg-active: #2a89bc;
  10. }
  11. /* main layout overrides */
  12. body.flat.ttrss_main.ttrss_index {
  13. #feeds-holder {
  14. background : var(--bg-panel);
  15. box-shadow : inset -1px 0px 2px -1px var(--border-main);
  16. }
  17. #headlines-frame,
  18. div.whiteBox {
  19. border-color : var(--border-main);
  20. }
  21. #main,
  22. #overlay {
  23. background : var(--bg-main);
  24. color : var(--fg-main);
  25. }
  26. #content-insert {
  27. background : var(--bg-main);
  28. }
  29. #content-insert_splitter {
  30. border-color : var(--border-main);
  31. background : var(--bg-panel);
  32. }
  33. #feeds-holder_splitter {
  34. border-color : var(--border-main);
  35. background : var(--bg-main);
  36. }
  37. /* misc */
  38. .insensitive {
  39. color : var(--fg-light);
  40. }
  41. hr,
  42. h1,
  43. h2,
  44. h3 {
  45. border-color : var(--border-dark);
  46. }
  47. code {
  48. color : #c90 ! important;
  49. }
  50. pre {
  51. color : var(--fg-main);
  52. background : var(--bg-panel) ! important;
  53. }
  54. /* feeds */
  55. #feeds-holder #feedTree .dijitTreeRow {
  56. color : var(--fg-light) ! important;
  57. }
  58. #feeds-holder #feedTree.dijitTree .dijitTreeRowHover {
  59. background : var(--bg-panel);
  60. border-color : var(--border-main) transparent;
  61. }
  62. #feeds-holder #feedTree.dijitTree .dijitTreeRowSelected {
  63. background : var(--bg-main);
  64. border-color : var(--bg-main) transparent;
  65. }
  66. #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLabel {
  67. text-shadow : none;
  68. }
  69. #feeds-holder #feedTree .counterNode.aux {
  70. background : var(--bg-panel);
  71. color : var(--fg-main);
  72. border-color : var(--bg-main);
  73. }
  74. /* headlines */
  75. #headlines-frame {
  76. background : var(--bg-main);
  77. color : var(--fg-light);
  78. }
  79. #main-toolbar {
  80. background : var(--bg-panel);
  81. border-color : var(--border-dark);
  82. }
  83. #main-toolbar .dijitButtonText {
  84. color : var(--fg-light);
  85. }
  86. #main-toolbar .dijitSelect,
  87. #main-toolbar .dijitSelect .dijitButtonText {
  88. background : var(--bg-panel);
  89. }
  90. .hl .feed a,
  91. .cdm .feed a {
  92. color : white;
  93. }
  94. #headlines-frame .hl {
  95. border-color : var(--border-dark);
  96. }
  97. #headlines-frame .hl:not(.Selected):not(.active) .title a {
  98. color : var(--fg-main);
  99. }
  100. #headlines-frame .hl.Unread:not(.Selected):not(.active) .title a {
  101. color : var(--fg-light);
  102. }
  103. .post .header {
  104. background : var(--bg-panel);
  105. border-color : var(--border-main);
  106. }
  107. .post .content,
  108. .cdm .content-inner {
  109. color : var(--fg-main);
  110. }
  111. .post .content img,
  112. .cdm .content-inner img,
  113. .post .content video,
  114. .cdm .content-inner video {
  115. transition : opacity 0.5s linear, filter 0.5s linear;
  116. }
  117. .post .content img:not(:hover),
  118. .cdm .content-inner img:not(:hover),
  119. .post .content video:not(:hover),
  120. .cdm .content-inner video:not(:hover) {
  121. opacity : 0.5;
  122. filter: grayscale(80%);
  123. }
  124. div.cdm div.footer {
  125. border-color : var(--border-dark);
  126. color : var(--fg-light);
  127. }
  128. div.cdm .header a.title {
  129. color : var(--fg-main);
  130. }
  131. div.cdm.Unread .header a.title {
  132. color : var(--fg-light);
  133. }
  134. .cdm.expandable.active .header a.title,
  135. .cdm.expanded.active .header a.title {
  136. color : #2a89bc;
  137. }
  138. #headlines-frame .cdm {
  139. border-color : var(--border-dark);
  140. }
  141. #headlines-frame .cdm .header .author {
  142. color : var(--fg-main);
  143. }
  144. #headlines-frame .cdm.expandable {
  145. background : var(--bg-main) ! important;
  146. }
  147. #headlines-frame .cdm.expandable.Selected {
  148. background : var(--bg-active) ! important;
  149. }
  150. #headlines-frame .cdm.expandable.active {
  151. background : var(--bg-main);
  152. }
  153. #headlines-frame .cdm.expanded.active {
  154. background : var(--bg-main);
  155. }
  156. #content-insert blockquote,
  157. #headlines-frame blockquote,
  158. .dijitContentPane blockquote {
  159. color : var(--fg-main);
  160. border-color : var(--border-main);
  161. }
  162. .dijitInputField.dijitButtonText {
  163. background : var(--bg-main);
  164. }
  165. .cdm .footer img {
  166. opacity : 0.6;
  167. }
  168. #floatingTitle {
  169. background : var(--bg-panel);
  170. border-color : var(--border-main);
  171. }
  172. #floatingTitle * {
  173. color : var(--fg-light) ! important;
  174. }
  175. /* other dijits */
  176. .dijitMenu,
  177. .dijitMenuTable,
  178. .dijitMenu .dijitMenuItem td {
  179. border-color : var(--bg-panel);
  180. background : var(--bg-panel);
  181. color : var(--fg-main);
  182. }
  183. .dijitMenu .dijitMenuItemSelected,
  184. .dijitMenu .dijitMenuItemSelected td {
  185. background : black;
  186. color : white;
  187. }
  188. .dijitMenu .dijitMenuSeparator * {
  189. border-bottom-color : var(--border-dark) ! important;
  190. }
  191. .articleNote {
  192. background : var(--bg-panel);
  193. border-color : #9a8c59;
  194. }
  195. ::-webkit-scrollbar {
  196. width: 4px;
  197. }
  198. ::-webkit-scrollbar-thumb {
  199. background-color: var(--border-main);
  200. }
  201. ::-webkit-scrollbar-track {
  202. background-color: var(--bg-panel);
  203. }
  204. }