adark.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201
  1. @charset "UTF-8";
  2. /*=== GENERAL */
  3. /*============*/
  4. :root {
  5. --background-color-dark: #171717;
  6. --background-color-dark-transparent: #171717aa;
  7. --background-color-middle: #1f1f1f;
  8. --background-color-light: #262626;
  9. --background-color-hover: #1d242f;
  10. --background-color-active: #333;
  11. --background-color-slider-shadow: rgba(0, 0, 0, 0.5);
  12. --contrast-background-color: #0062b7;
  13. --contrast-background-color-hover: #0078e0;
  14. --contrast-background-color-active: #003461;
  15. --contrast-background-font-color: #eee;
  16. --contrast-border-color-hover: #0078e0;
  17. --contrast-attention-background-color: #912621;
  18. --contrast-attention-background-color-hover: #be342c;
  19. --contrast-attention-font-color: #eee;
  20. --font-color-dark: #666;
  21. --font-color-middle: #999;
  22. --font-color-light: #ccc;
  23. --font-color-contrast: #0062b7;
  24. --font-color-error: #912621;
  25. --border-color-dark: #333;
  26. --border-color-middle: #666;
  27. --frss-border-color: var(--border-color-dark);
  28. --border-color-favorite: #ffc300;
  29. --border-color-unread: #e74c3c;
  30. --empty-feed-color: #e67e22;
  31. --alert-warn-border-color: #615f20;
  32. --alert-info-border-color: #0062b7;
  33. --alert-success-border-color: #18521d;
  34. --alert-error-border-color: #912621;
  35. --notification-border-color: #eeb;
  36. --notification-good-border-color: #0062b7;
  37. --notification-good-background-color: #0062b7;
  38. --notification-bad-background-color: #fdd;
  39. --notification-bad-font-color: #912621;
  40. --notification-bad-border-color: #ecc;
  41. --frss-box-shadow-color-transparent: #bbb3;
  42. }
  43. html, body {
  44. background-color: var(--background-color-dark);
  45. color: var(--font-color-middle);
  46. font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
  47. }
  48. /*=== Links */
  49. a, button.as-link {
  50. color: var(--font-color-light);
  51. outline: none;
  52. }
  53. a:hover .icon {
  54. filter: brightness(2);
  55. }
  56. /*=== Forms */
  57. legend {
  58. margin: 20px 0 5px;
  59. padding: 5px 0;
  60. font-size: 1.4em;
  61. border-bottom: 1px solid var(--border-color-dark);
  62. }
  63. label {
  64. min-height: 25px;
  65. padding: 5px 0;
  66. cursor: pointer;
  67. }
  68. input, select, textarea {
  69. background: var(--background-color-light);
  70. color: var(--font-color-middle);
  71. border: 1px solid var(--border-color-middle);
  72. border-radius: 3px;
  73. }
  74. input:hover,
  75. select:hover,
  76. textarea:hover,
  77. label:hover {
  78. color: var(--font-color-light);
  79. }
  80. option {
  81. padding: 0 .5em;
  82. }
  83. input[type="checkbox"],
  84. input[type="radio"] {
  85. accent-color: var(--contrast-background-color);
  86. }
  87. input[type="checkbox"]:hover,
  88. input[type="radio"]:hover {
  89. accent-color: var(--contrast-background-color-hover);
  90. }
  91. input:disabled, select:disabled, textarea:disabled {
  92. color: var(--font-color-dark);
  93. border-color: var(--border-color-dark);
  94. }
  95. /*=== Tables */
  96. table {
  97. border-collapse: collapse;
  98. }
  99. th, td {
  100. border: 1px solid var(--border-color-dark);
  101. }
  102. th {
  103. background: var(--background-color-light);
  104. }
  105. .config-articleicons td,
  106. .config-articleicons th {
  107. font-weight: normal;
  108. text-align: center;
  109. }
  110. /*=== COMPONENTS */
  111. /*===============*/
  112. /*=== Forms */
  113. .form-group.form-actions {
  114. padding: 5px 0;
  115. background-color: var(--background-color-dark-transparent);
  116. border-top: 1px solid var(--border-color-dark);
  117. }
  118. .form-group.form-actions .btn {
  119. margin: 0 10px;
  120. }
  121. .form-group .group-name {
  122. padding: 10px 0;
  123. }
  124. .form-group .group-controls {
  125. min-height: 25px;
  126. padding: 5px 0;
  127. }
  128. /*=== Buttons */
  129. .stick input,
  130. .group .btn,
  131. .stick .btn {
  132. border-radius: 0;
  133. }
  134. .stick .btn:first-child,
  135. .group .btn:first-child,
  136. .stick input:first-child,
  137. .group input:first-child {
  138. border-radius: 3px 0 0 3px;
  139. }
  140. .stick .btn-important:first-child {
  141. border-right: 1px solid var(--contrast-background-color-hover);
  142. }
  143. .stick .btn:last-child,
  144. .group .btn:last-child,
  145. .stick input:last-child,
  146. .group input:last-child {
  147. border-radius: 0 3px 3px 0;
  148. }
  149. .group > .btn:only-child,
  150. .group > .dropdown:only-child > .btn {
  151. border-radius: 3px;
  152. }
  153. .stick .btn + .btn:not(:hover),
  154. .group .btn + .btn:not(:hover),
  155. .stick .btn + input,
  156. .stick .btn + .dropdown > .btn:not(:hover),
  157. .group .btn + .dropdown > .btn:not(:hover),
  158. .stick input + .btn:not(:hover),
  159. .stick input + input,
  160. .stick input + .dropdown > .btn:not(:hover),
  161. .stick .dropdown + .btn:not(:hover),
  162. .group .dropdown + .btn:not(:hover),
  163. .stick .dropdown + input,
  164. .stick .dropdown + .dropdown > .btn:not(:hover),
  165. .group .dropdown + .dropdown > .btn:not(:hover) {
  166. border-left: none;
  167. }
  168. .stick .btn + .dropdown > .btn,
  169. .group .dropdown + .dropdown > .btn {
  170. border-radius: 0 3px 3px 0;
  171. }
  172. .btn {
  173. margin: 0;
  174. padding: 0.25rem 0.5rem;
  175. background: var(--background-color-dark);
  176. color: var(--font-color-middle);
  177. font-size: 0.9rem;
  178. border: 1px solid var(--border-color-middle);
  179. border-radius: 3px;
  180. min-height: 25px;
  181. min-width: 15px;
  182. line-height: 1.7;
  183. vertical-align: middle;
  184. }
  185. .btn:hover {
  186. background: var(--background-color-hover);
  187. text-decoration: none;
  188. color: var(--font-color-light);
  189. border: 1px solid var(--contrast-border-color-hover);
  190. }
  191. .btn:hover .icon {
  192. filter: brightness(2);
  193. }
  194. .btn.active,
  195. .btn:active,
  196. .dropdown-target:target ~ .btn.dropdown-toggle {
  197. background: var(--background-color-light);
  198. }
  199. .btn-important {
  200. background: var(--contrast-background-color);
  201. color: var(--contrast-background-font-color);
  202. border: 1px solid var(--contrast-border-color-hover);
  203. font-weight: normal;
  204. }
  205. .btn-important:hover {
  206. background: var(--contrast-background-color-hover);
  207. color: var(--contrast-background-font-color);
  208. }
  209. .btn-important .icon {
  210. filter: brightness(3);
  211. }
  212. .btn-important:active {
  213. background: var(--contrast-background-color-active);
  214. box-shadow: none;
  215. }
  216. .btn-attention {
  217. background-color: var(--contrast-attention-background-color);
  218. color: var(--contrast-attention-font-color);
  219. }
  220. .btn-attention:hover {
  221. background-color: var(--contrast-attention-background-color-hover);
  222. color: var(--contrast-attention-font-color);
  223. }
  224. .btn-attention:active {
  225. background: var(--contrast-attention-background-color);
  226. box-shadow: none;
  227. }
  228. .spinner {
  229. filter: invert(1);
  230. }
  231. a:hover > .spinner {
  232. filter: invert(1) brightness(2);
  233. }
  234. .flux .item.manage .read:hover .icon.spinner {
  235. filter: invert(1) grayscale(0.8) brightness(1.7);
  236. }
  237. /*=== switches */
  238. .switch.active {
  239. background-color: var(--contrast-background-color);
  240. }
  241. .switch.active:hover {
  242. background-image: url('./icons/disabled-light.svg');
  243. }
  244. /*=== Navigation */
  245. .nav-list {
  246. color: var(--font-color-light);
  247. font-size: 0.9rem;
  248. }
  249. .nav-list .item,
  250. .nav-list .item.nav-header {
  251. min-height: 2.5em;
  252. line-height: 2.5;
  253. }
  254. .nav-list .item a,
  255. .nav-list .item .as-link {
  256. color: var(--font-color-middle);
  257. }
  258. .nav-list .item a:hover,
  259. .nav-list .item .as-link:hover {
  260. background-color: var(--background-color-hover);
  261. color: var(--font-color-light);
  262. }
  263. .nav-list .item.active a,
  264. .nav-list .item.active .as-link {
  265. background-color: var(--background-color-dark);
  266. color: var(--font-color-light);
  267. }
  268. .nav-list .item > a,
  269. .nav-list .item > .as-link {
  270. padding: 0 1rem;
  271. }
  272. .nav-list a:hover,
  273. .nav-list .as-link:hover {
  274. text-decoration: none;
  275. }
  276. .nav-list .nav-header {
  277. padding: 0 1rem;
  278. color: var(--font-color-middle);
  279. font-weight: bold;
  280. }
  281. .nav-list .nav-form {
  282. padding: 3px;
  283. text-align: center;
  284. }
  285. /*=== Dropdown */
  286. .dropdown-menu {
  287. margin: 5px 0 0;
  288. padding: 0.5rem 0 0.25rem 0;
  289. background: var(--background-color-active);
  290. font-size: 0.8rem;
  291. border: 2px solid var(--background-color-light);
  292. border-radius: 5px;
  293. text-align: left;
  294. }
  295. .dropdown-menu::after {
  296. border-color: var(--border-color-dark);
  297. }
  298. .dropdown-header,
  299. .dropdown-section .dropdown-section-title {
  300. padding: 0.25rem 0.5rem 0.25rem 1rem;
  301. color: var(--font-color-middle);
  302. font-weight: bold;
  303. text-align: left;
  304. }
  305. .dropdown-menu .item > a,
  306. .dropdown-menu .item > span,
  307. .dropdown-menu .item > .as-link {
  308. padding: 0 22px;
  309. line-height: 2.5;
  310. font-size: inherit;
  311. }
  312. .dropdown-menu .dropdown-section .item > a,
  313. .dropdown-menu .dropdown-section .item > span,
  314. .dropdown-menu .dropdown-section .item > .as-link {
  315. padding-left: 2rem;
  316. }
  317. .dropdown-menu .dropdown-section .item:last-child {
  318. margin-bottom: 0.5rem;
  319. }
  320. .dropdown-menu .item > a:focus,
  321. .dropdown-menu .item > a:hover,
  322. .dropdown-menu .item > button:focus:not([disabled]),
  323. .dropdown-menu .item > button:hover:not([disabled]),
  324. .dropdown-menu .item > label:focus:not(.noHover),
  325. .dropdown-menu .item > label:hover:not(.noHover) {
  326. background: var(--background-color-hover);
  327. color: var(--font-color-light);
  328. }
  329. .dropdown-menu > .item[aria-checked="true"] > a::before {
  330. font-weight: bold;
  331. margin: 0 0 0 -14px;
  332. }
  333. .dropdown-menu .input select,
  334. .dropdown-menu .input input {
  335. margin: 0 auto 5px;
  336. padding: 2px 5px;
  337. border-radius: 3px;
  338. }
  339. .dropdown-menu input[type="checkbox"] {
  340. margin-left: 1rem;
  341. }
  342. .dropdown-menu .item .emptyLabels {
  343. padding-left: 1rem;
  344. padding-right: 1rem;
  345. }
  346. .item ~ .dropdown-header,
  347. .dropdown-section ~ .dropdown-section,
  348. .item.separator {
  349. border-top-color: var(--border-color-dark);
  350. }
  351. /*=== Alerts */
  352. .alert {
  353. background-color: var(--background-color-dark);
  354. color: var(--font-color-middle);
  355. font-size: 0.9em;
  356. border-width: 2px;
  357. border-style: solid;
  358. border-radius: 5px;
  359. }
  360. .alert-head {
  361. font-size: 1.15em;
  362. }
  363. .alert a {
  364. color: var(--font-color-middle);
  365. text-decoration: underline;
  366. }
  367. .alert a:hover {
  368. color: var(--font-color-light);
  369. }
  370. .alert-warn {
  371. border-color: var(--alert-warn-border-color);
  372. }
  373. .alert-info {
  374. border-color: var(--alert-info-border-color);
  375. }
  376. .alert-success {
  377. border-color: var(--alert-success-border-color);
  378. }
  379. .alert-error {
  380. border-color: var(--alert-error-border-color);
  381. }
  382. kbd {
  383. background-color: var(--background-color-middle);
  384. color: var(--font-color-middle);
  385. border-color: var(--border-color-middle);
  386. }
  387. /*=== Pagination */
  388. .pagination {
  389. color: var(--font-color-middle);
  390. border-top: 1px solid var(--border-color-dark);
  391. border-bottom: 1px solid var(--border-color-dark);
  392. }
  393. /*=== Boxes */
  394. .box {
  395. background: var(--background-color-middle);
  396. border-width: 0;
  397. border-radius: 3px;
  398. }
  399. .box .box-title {
  400. background: var(--background-color-light);
  401. border-radius: 5px 5px 0 0;
  402. }
  403. .box .box-title .configure {
  404. margin-right: 4px;
  405. }
  406. .box .box-content {
  407. padding-left: 30px;
  408. min-height: 2.5em;
  409. max-height: 260px;
  410. }
  411. .box .box-content .item {
  412. font-size: 0.9rem;
  413. }
  414. /*=== Tree */
  415. .tree {
  416. margin: 10px 0;
  417. }
  418. .tree-folder-title {
  419. position: relative;
  420. padding: 0 10px;
  421. background: var(--background-color-light);
  422. line-height: 2.5;
  423. font-size: 1rem;
  424. }
  425. .tree-folder-title:hover {
  426. background: var(--background-color-hover);
  427. }
  428. .tree-folder-title:hover .title {
  429. color: var(--font-color-light);
  430. }
  431. .tree-folder-title:hover .dropdown-toggle .icon {
  432. filter: brightness(2);
  433. }
  434. .tree-folder-title:hover button.dropdown-toggle .icon {
  435. filter: inherit;
  436. }
  437. .tree-folder-title button.dropdown-toggle:hover .icon {
  438. filter: brightness(2);
  439. }
  440. .tree-folder-title .title {
  441. background: inherit;
  442. color: var(--font-color-middle);
  443. }
  444. .tree-folder-title .title:hover {
  445. text-decoration: none;
  446. }
  447. .tree-folder.active .tree-folder-title {
  448. background: var(--background-color-dark);
  449. font-weight: bold;
  450. }
  451. .tree-folder.active .tree-folder-title .title {
  452. color: var(--font-color-light);
  453. }
  454. .tree-folder-items {
  455. background: var(--background-color-light);
  456. }
  457. .tree-folder-items:hover {
  458. background: var(--background-color-middle);
  459. }
  460. .tree-folder-items > .item {
  461. font-size: 0.8rem;
  462. }
  463. .tree-folder-items > .item.active {
  464. background: var(--background-color-dark);
  465. }
  466. .tree-folder-items > .item > a {
  467. text-decoration: none;
  468. }
  469. .tree-folder-items > .item.active > a {
  470. color: var(--font-color-middle);
  471. }
  472. /*=== STRUCTURE */
  473. /*===============*/
  474. /*=== Header */
  475. .header {
  476. background: var(--background-color-dark);
  477. }
  478. .header > .item {
  479. box-shadow: inset 0 -1px 0 var(--border-color-dark);
  480. vertical-align: middle;
  481. text-align: center;
  482. }
  483. .header > .item.title .logo {
  484. filter: grayscale(100%) brightness(2.5);
  485. }
  486. .header > .item.title a:hover .logo {
  487. filter: grayscale(100%) brightness(2.8);
  488. }
  489. .header > .item.search input {
  490. width: 350px;
  491. }
  492. /*=== Body */
  493. .aside {
  494. background: var(--background-color-light);
  495. }
  496. .aside.aside_feed {
  497. padding: 10px 0;
  498. text-align: center;
  499. background: var(--background-color-light);
  500. }
  501. .aside.aside_feed .tree {
  502. margin: 10px 0 50px;
  503. }
  504. /*=== Aside main page (categories) */
  505. .aside_feed .category .title:not([data-unread="0"])::after {
  506. padding: 0 10px;
  507. line-height: 1.5;
  508. }
  509. .aside.aside_feed .category .title:not([data-unread="0"])::after,
  510. .aside.aside_feed .feed .item-title:not([data-unread="0"])::after,
  511. .global .box.category .title:not([data-unread="0"])::after,
  512. .global .feed .item-title:not([data-unread="0"])::after {
  513. background-color: var(--background-color-dark);
  514. color: var(--font-color-middle);
  515. }
  516. .aside.aside_feed .category:hover .title:not([data-unread="0"])::after,
  517. .aside.aside_feed .feed:hover .item-title:not([data-unread="0"])::after {
  518. color: var(--font-color-light);
  519. }
  520. .aside_feed .tree-folder-title button.dropdown-toggle {
  521. margin: -0.75rem 0 -0.75rem -0.75rem;
  522. padding: 0.75rem 0 0.75rem 0.75rem;
  523. }
  524. /*=== Aside main page (feeds) */
  525. .feed.item.empty.active,
  526. .feed.item.empty.active > a {
  527. background: var(--empty-feed-color);
  528. color: var(--font-color-dark);
  529. }
  530. .feed.item.error.active {
  531. background: var(--contrast-attention-background-color);
  532. }
  533. .feed.item.empty,
  534. .feed.item.empty > a {
  535. color: var(--empty-feed-color);
  536. }
  537. .feed.item.error,
  538. .feed.item.error > a {
  539. color: var(--font-color-error);
  540. }
  541. .feed.item.error.active,
  542. .feed.item.error.active > a {
  543. color: var(--font-color-light);
  544. }
  545. .aside_feed .tree-folder-items .dropdown-menu::after {
  546. left: 2px;
  547. }
  548. .theme-preview-list {
  549. border-color: var(--border-color-middle);
  550. }
  551. .theme-preview-list .properties {
  552. background-color: var(--background-color-light);
  553. color: var(--font-color-middle);
  554. border-color: var(--border-color-middle);
  555. }
  556. /*=== Prompt (centered) */
  557. .prompt .form-group {
  558. margin-bottom: 1rem;
  559. }
  560. .prompt .form-group::after {
  561. display: none;
  562. }
  563. .prompt .form-group.form-group-actions {
  564. display: flex;
  565. margin-top: 2rem;
  566. align-items: center;
  567. justify-content: space-between;
  568. }
  569. .prompt .btn.btn-important {
  570. padding-left: 1.5rem;
  571. padding-right: 1.5rem;
  572. font-size: 1.1rem;
  573. }
  574. /*=== New article notification */
  575. #new-article {
  576. background: var(--contrast-background-color);
  577. text-align: center;
  578. font-size: 0.9em;
  579. }
  580. #new-article > a {
  581. padding: 0.75rem;
  582. color: var(--font-color-light);
  583. font-weight: bold;
  584. }
  585. #new-article > a:hover {
  586. text-decoration: none;
  587. background: var(--contrast-background-color-hover);
  588. }
  589. /*=== Transition indication, e.g. day */
  590. .transition {
  591. padding: 0 10px;
  592. font-weight: bold;
  593. line-height: 3;
  594. background: var(--background-color-dark);
  595. color: var(--font-color-light);
  596. border-top: 1px solid var(--border-color-dark);
  597. }
  598. .transition span {
  599. line-height: 1.5;
  600. }
  601. #new-article + .transition {
  602. border-top: none;
  603. }
  604. .transition .name {
  605. padding: 0 10px 0 0;
  606. color: var(--font-color-light);
  607. font-size: 1.8em;
  608. opacity: 0.3;
  609. text-shadow: 0px -1px 0px var(--font-color-dark);
  610. font-style: italic;
  611. text-align: right;
  612. }
  613. /*=== Index menu */
  614. .nav_menu {
  615. padding: 5px 0.5rem 5px 3rem;
  616. background: var(--background-color-dark);
  617. text-align: center;
  618. }
  619. .nav_menu .btn {
  620. margin: 5px 10px;
  621. }
  622. .nav_menu .stick,
  623. .nav_menu .group {
  624. margin: 0 10px;
  625. }
  626. .nav_menu .stick .btn,
  627. .nav_menu .group .btn {
  628. margin: 5px 0;
  629. }
  630. /*=== Feed articles */
  631. .flux {
  632. background: var(--background-color-dark);
  633. border-left-color: var(--border-color-dark);
  634. border-left-width: 2px;
  635. border-left-style: solid;
  636. }
  637. .flux .flux_header:hover {
  638. background: var(--background-color-hover);
  639. }
  640. .flux.current {
  641. background: var(--background-color-middle);
  642. border-left: 2px solid var(--contrast-border-color-hover);
  643. }
  644. .flux.current.active {
  645. background: var(--background-color-middle);
  646. }
  647. .flux.not_read {
  648. border-left: 2px solid var(--border-color-unread);
  649. }
  650. .flux.not_read:not(.current) {
  651. background: var(--background-color-dark);
  652. }
  653. .flux.not_read:not(.current):hover .item .title {
  654. background: var(--background-color-hover);
  655. }
  656. .flux.current:not(.active) {
  657. background: var(--background-color-hover);
  658. }
  659. .flux .flux_header .item .title {
  660. color: var(--font-color-light);
  661. }
  662. .flux .flux_header .item .title .author {
  663. color: var(--font-color-dark);
  664. }
  665. .flux.favorite {
  666. border-left: 2px solid var(--border-color-favorite);
  667. }
  668. .flux.favorite:not(.current) {
  669. background: var(--background-color-dark);
  670. }
  671. /* stylelint-disable-next-line no-duplicate-selectors */
  672. .flux.current {
  673. border-left-width: 5px;
  674. border-left-style: double;
  675. }
  676. .flux.current > .flux_header,
  677. .flux.not_read.current > .flux_header, .flux.not_read.current > .flux_header:hover,
  678. .flux.favorite.current > .flux_header, .flux.favorite.current > .flux_header:hover {
  679. background: linear-gradient(to right, transparent 0, transparent 3px, var(--background-color-hover) 3px);
  680. margin-left: -3px; /* Compensate increased border-left-width */
  681. }
  682. .flux_header {
  683. font-size: 0.8rem;
  684. border-top: 1px solid var(--border-color-dark);
  685. cursor: pointer;
  686. }
  687. .flux_header .title {
  688. font-size: 0.9rem;
  689. }
  690. .flux .website a:hover .favicon,
  691. .flux a.website:hover .favicon {
  692. filter: grayscale(50%);
  693. }
  694. .flux .item.manage .read:hover .icon {
  695. filter: grayscale(0.8) brightness(1.7);
  696. }
  697. .flux .flux_header .date,
  698. .flux .flux_content .bottom .date {
  699. color: var(--font-color-light);
  700. }
  701. .flux .bottom {
  702. font-size: 0.8rem;
  703. text-align: center;
  704. }
  705. /*=== Content of feed articles */
  706. .content {
  707. padding: 20px 10px;
  708. color: var(--font-color-middle);
  709. }
  710. .content h1,
  711. .content h2,
  712. .content h3 {
  713. color: var(--font-color-light);
  714. }
  715. .content hr {
  716. margin: 30px 10px;
  717. background: var(--font-color-middle);
  718. height: 1px;
  719. border: 0;
  720. }
  721. .content pre {
  722. background: var(--background-color-dark);
  723. color: var(--font-color-light);
  724. border-radius: 3px;
  725. }
  726. .content code {
  727. background: var(--background-color-light);
  728. border-color: var(--background-color-light);
  729. border-radius: 3px;
  730. }
  731. .content pre code {
  732. background: transparent;
  733. color: var(--font-color-light);
  734. border: none;
  735. }
  736. .content blockquote {
  737. margin: 0;
  738. padding: 25px;
  739. background: var(--background-color-light);
  740. display: block;
  741. color: var(--font-color-middle);
  742. }
  743. .content blockquote p {
  744. margin: 0;
  745. }
  746. .content > footer {
  747. border-color: var(--border-color-middle);
  748. }
  749. .content > header a,
  750. .content > header .subtitle,
  751. .content > footer a,
  752. .content > footer .subtitle {
  753. color: var(--font-color-middle);
  754. }
  755. .content > header h1 a {
  756. color: var(--font-color-light);
  757. }
  758. /*=== Notification and actualize notification */
  759. .notification {
  760. font-size: 0.9em;
  761. border: 2px solid var(--notification-border-color);
  762. border-radius: 5px;
  763. text-align: center;
  764. font-weight: bold;
  765. vertical-align: middle;
  766. }
  767. .notification.good {
  768. background-color: var(--background-color-light);
  769. color: var(--font-color-middle);
  770. border-color: var(--notification-good-border-color);
  771. }
  772. .notification.good .close:hover {
  773. background: var(--notification-good-background-color);
  774. }
  775. .notification.bad {
  776. background-color: var(--notification-bad-background-color);
  777. color: var(--notification-bad-font-color);
  778. border-color: var(--notification-bad-border-color);
  779. }
  780. .notification.bad .close:hover {
  781. background: var(--notification-bad-background-color);
  782. }
  783. .notification .close .icon {
  784. filter: brightness(1);
  785. }
  786. .notification .close:hover .icon {
  787. filter: brightness(2);
  788. }
  789. .notification a {
  790. color: var(--font-color-contrast);
  791. }
  792. /*=== "Load more" part */
  793. #bigMarkAsRead.big {
  794. background: var(--background-color-dark);
  795. color: var(--font-color-contrast);
  796. text-align: center;
  797. text-decoration: none;
  798. }
  799. #bigMarkAsRead:hover {
  800. background-color: var(--background-color-hover);
  801. color: var(--font-color-light);
  802. }
  803. .bigTick {
  804. display: none!important;
  805. }
  806. /*=== Navigation menu (for articles) */
  807. #nav_entries {
  808. background: var(--background-color-light);
  809. }
  810. /*=== READER VIEW */
  811. /*================*/
  812. #stream.reader .flux {
  813. color: var(--font-color-dark);
  814. background-color: var(--background-color-dark);
  815. border-bottom: 10px solid var(--background-color-dark);
  816. }
  817. #stream.reader .flux:hover {
  818. background: inherit !important;
  819. }
  820. #stream.reader .flux .flux_content {
  821. background-color: var(--background-color-middle);
  822. border-color: var(--border-color-dark);
  823. }
  824. #stream.reader .flux.current.active {
  825. background: var(--background-color-middle);
  826. }
  827. #stream.reader .flux .author {
  828. color: var(--font-color-dark);
  829. }
  830. #stream-footer {
  831. border-top-color: var(--border-color-dark);
  832. }
  833. /*=== GLOBAL VIEW */
  834. /*================*/
  835. .box.category .box-title .title {
  836. font-weight: normal;
  837. text-decoration: none;
  838. text-align: left;
  839. }
  840. .box.category:not([data-unread="0"]) .box-title {
  841. background: var(--background-color-light);
  842. }
  843. .box.category:not([data-unread="0"]) .box-title:active {
  844. background: var(--background-color-dark);
  845. }
  846. .box.category:not([data-unread="0"]) .box-title .title {
  847. color: var(--font-color-middle);
  848. font-weight: bold;
  849. }
  850. .box.category .title:not([data-unread="0"])::after {
  851. background: none;
  852. color: var(--font-color-light);
  853. border: 0;
  854. box-shadow: none;
  855. position: absolute;
  856. top: 5px; right: 10px;
  857. font-weight: bold;
  858. text-shadow: none;
  859. }
  860. #stream.global .feed .item-title:not([data-unread="0"])::after {
  861. margin: 1rem 0px 0px;
  862. }
  863. /*=== Slider */
  864. #slider {
  865. background: var(--background-color-dark);
  866. border-left: 1px solid var(--border-color-dark);
  867. }
  868. #slider.active:target + #close-slider {
  869. background-color: var(--background-color-slider-shadow);
  870. }
  871. /*=== SLIDESHOW */
  872. /*==============*/
  873. .nav label {
  874. color: var(--font-color-light);
  875. }
  876. .nav label:hover {
  877. color: var(--font-color-contrast);
  878. }
  879. /*=== DIVERS */
  880. /*===========*/
  881. .aside.aside_feed .nav-form input,
  882. .aside.aside_feed .nav-form select {
  883. width: 140px;
  884. }
  885. .aside.aside_feed .nav-form .dropdown .dropdown-menu {
  886. right: -20px;
  887. }
  888. .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
  889. right: 33px;
  890. }
  891. /*=== STATISTICS */
  892. /*===============*/
  893. .stat {
  894. margin: 10px 0 20px;
  895. }
  896. .stat th,
  897. .stat td,
  898. .stat tr {
  899. border: none;
  900. }
  901. .stat > table td,
  902. .stat > table th {
  903. border-bottom: 1px solid var(--border-color-dark);
  904. }
  905. /*=== MOBILE */
  906. /*===========*/
  907. @media (max-width: 840px) {
  908. .form-group .group-name {
  909. padding-bottom: 0;
  910. }
  911. .aside {
  912. box-shadow: 3px 0 3px var(--background-color-active);
  913. }
  914. .aside .toggle_aside,
  915. #overlay .close,
  916. .dropdown-menu .toggle_aside,
  917. #slider .toggle_aside {
  918. background: var(--background-color-light);
  919. border-bottom-color: var(--border-color-dark);
  920. }
  921. .aside .toggle_aside:hover,
  922. #overlay .close:hover,
  923. .dropdown-menu .toggle_aside:hover,
  924. #slider .toggle_aside:hover {
  925. background-color: var(--background-color-hover);
  926. }
  927. .aside .toggle_aside:hover .icon,
  928. #overlay .close:hover .icon,
  929. .dropdown-menu .toggle_aside:hover .icon {
  930. filter: brightness(2);
  931. }
  932. .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close {
  933. background-color: var(--background-color-slider-shadow);
  934. }
  935. .configure .dropdown .dropdown-menu {
  936. border-width: 0;
  937. box-shadow: -3px 0 3px var(--background-color-active);
  938. }
  939. .nav_menu .btn {
  940. padding: 3px 5px;
  941. min-height: 0;
  942. }
  943. .nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
  944. border-left: 1px solid var(--border-color-middle);
  945. border-top-left-radius: 3px;
  946. border-bottom-left-radius: 3px;
  947. }
  948. .nav_menu .stick #mark-read-menu .dropdown-toggle.btn:hover {
  949. border-left-color: var(--contrast-border-color-hover);
  950. }
  951. .dropdown-target:target ~ .dropdown-toggle::after {
  952. background-color: var(--background-color-active);
  953. border-top: 2px solid var(--background-color-light);
  954. border-left: 2px solid var(--background-color-light);
  955. }
  956. .transition .name {
  957. display: none!important;
  958. font-size: 1.1rem;
  959. text-shadow: none;
  960. }
  961. .flux:not(.current):hover .item.title {
  962. background: var(--background-color-hover);
  963. }
  964. .notification .close {
  965. background: transparent;
  966. display: block;
  967. left: 0;
  968. }
  969. .notification .close:hover {
  970. opacity: 0.5;
  971. }
  972. .notification .close .icon {
  973. display: none;
  974. }
  975. .post {
  976. padding-left: 15px;
  977. padding-right: 15px;
  978. }
  979. }