swage.rtl.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180
  1. :root {
  2. --color-text-light: #fcfcfc;
  3. --color-text-light-darker: #969696;
  4. --color-text-dark: #181621;
  5. --color-text-nav: #00488b;
  6. --color-text-aside: #22303d;
  7. --color-text-alert: #fa8052;
  8. --color-text-good: #5eaabf;
  9. --color-text-bad: #b0425b;
  10. --color-text-bad-lighter: #c46178;
  11. --color-text-shadow-light: #fcfcfc;
  12. --color-box-shadow-light: #e3e3e3;
  13. --color-border-light: #fcfcfc;
  14. --color-border-light-darker: #e3e3e3;
  15. --color-border-grey: #e3e3e3;
  16. --color-border-nav: #00488b;
  17. --color-border-bad: #b0425b;
  18. --color-background-light: #fcfcfc;
  19. --color-background-light-darker: #e3e3e3;
  20. --color-background-dark: #181621;
  21. --color-background-nav: #0062be;
  22. --color-background-nav-darker: #00488b;
  23. --color-background-aside: #22303d;
  24. --color-background-alert: #fa8052;
  25. --color-background-alert-darker: #f95c20;
  26. --color-background-good: #5eaabf;
  27. --color-background-bad: #c46178;
  28. --color-background-stared: #fff6da;
  29. --color-background-unread: #fff3ed;
  30. --color-background-hover: #fff;
  31. --frss-scrollbar-handle: rgba(0, 0, 0, 0.1);
  32. --frss-scrollbar-handle-hover: rgba(0, 0, 0, 0.4);
  33. --frss-scrollbar-track: rgba(0, 0, 0, 0.05);
  34. --frss-scrollbar-track-hover: rgba(0, 0, 0, 0.1);
  35. }
  36. input,
  37. select, textarea {
  38. min-height: 25px;
  39. margin-top: 4px;
  40. line-height: 2.25;
  41. vertical-align: middle;
  42. background-color: var(--color-background-light);
  43. border: 2px solid var(--color-border-grey);
  44. padding-right: 8px;
  45. }
  46. input:invalid,
  47. select:invalid {
  48. padding-right: 5px;
  49. color: var(--color-text-bad);
  50. border-right-color: var(--color-border-bad);
  51. border-right-width: 5px;
  52. box-shadow: none;
  53. }
  54. .nav-list .item, .nav-list .nav-header {
  55. height: 2.5em;
  56. line-height: 2.5;
  57. font-size: 0.9rem;
  58. }
  59. .dropdown-menu > .item > a,
  60. .dropdown-menu > .item > span,
  61. .dropdown-menu > .item > .as-link,
  62. .dropdown-menu > .item button, .dropdown-menu > .item {
  63. padding: 0 22px;
  64. color: var(--color-text-light);
  65. font-size: 0.8rem;
  66. line-height: 2.5;
  67. }
  68. .flux::after, .form-group::after {
  69. content: "";
  70. display: block;
  71. clear: both;
  72. }
  73. #nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds {
  74. width: 231px;
  75. }
  76. html,
  77. body {
  78. color: var(--color-text-dark);
  79. font-family: Helvetica, Arial, sans-serif;
  80. }
  81. a {
  82. color: var(--color-nav-lighter);
  83. outline: none;
  84. }
  85. a.btn {
  86. min-height: 25px;
  87. line-height: 1.5;
  88. text-decoration: none;
  89. }
  90. a.btn .icon {
  91. filter: brightness(3);
  92. }
  93. a#btn-subscription {
  94. width: 76%;
  95. }
  96. a#btn-add {
  97. width: 5%;
  98. }
  99. img.icon:hover {
  100. background: none;
  101. }
  102. sup {
  103. top: -0.3em;
  104. }
  105. legend {
  106. margin: 20px 0 5px;
  107. padding: 5px 20px;
  108. background-color: var(--color-background-aside);
  109. display: inline-block;
  110. width: auto;
  111. color: var(--color-text-light);
  112. font-size: 1.4em;
  113. clear: both;
  114. }
  115. label {
  116. min-height: 25px;
  117. }
  118. textarea {
  119. width: 360px;
  120. height: 100px;
  121. }
  122. textarea:focus {
  123. border-color: var(--color-border-nav);
  124. }
  125. input:focus,
  126. select:focus {
  127. border-color: var(--color-border-nav);
  128. }
  129. input:disabled,
  130. select:disabled {
  131. background-color: var(--color-background-light);
  132. }
  133. select {
  134. padding-top: 7px;
  135. padding-bottom: 8px;
  136. }
  137. input.extend {
  138. transition: width 200ms linear;
  139. }
  140. option {
  141. padding: 0 0.5em;
  142. }
  143. table {
  144. border-collapse: collapse;
  145. }
  146. td,
  147. th {
  148. border: 1px solid var(--color-border-light-darker);
  149. }
  150. th {
  151. background-color: var(--color-background-light);
  152. }
  153. form td,
  154. form th {
  155. font-weight: normal;
  156. text-align: center;
  157. }
  158. .category .title.error::before {
  159. display: inline-block;
  160. padding-left: 7px;
  161. width: 16px;
  162. content: url(../Swage/icons/error.svg);
  163. }
  164. .form-group {
  165. padding: 5px;
  166. border: 1px solid transparent;
  167. }
  168. .form-group:hover {
  169. background-color: var(--color-background-light);
  170. border: 1px solid var(--color-border-light);
  171. }
  172. .form-group.form-actions {
  173. margin: 15px 0 25px;
  174. padding: 5px 0;
  175. background-color: var(--color-background-light-darker);
  176. border-top: 3px solid var(--color-border-light-darker);
  177. }
  178. .form-group.form-actions .btn {
  179. margin: 0 10px;
  180. }
  181. .form-group .group-name {
  182. padding: 10px 0;
  183. }
  184. .form-group .group-controls {
  185. min-height: 25px;
  186. padding: 5px 0;
  187. }
  188. .form-group .group-controls .control {
  189. line-height: 2;
  190. }
  191. .stick select {
  192. margin-top: 0;
  193. }
  194. .btn {
  195. margin: 0;
  196. padding: 5px 10px;
  197. background-color: var(--color-background-nav);
  198. display: inline-block;
  199. color: var(--color-text-light);
  200. font-size: 0.9rem;
  201. border: none;
  202. min-height: 35px;
  203. min-width: 15px;
  204. vertical-align: middle;
  205. cursor: pointer;
  206. overflow: hidden;
  207. }
  208. .btn.active, .btn:active, .btn:hover {
  209. background-color: var(--color-background-nav-darker);
  210. text-decoration: none;
  211. }
  212. .btn .icon {
  213. filter: brightness(3);
  214. }
  215. .btn-important, .btn-attention {
  216. font-weight: normal;
  217. background-color: var(--color-background-alert);
  218. color: var(--color-text-light);
  219. }
  220. .btn-important:hover,
  221. .btn-important :active, .btn-attention:hover,
  222. .btn-attention :active {
  223. background-color: var(--color-background-alert-darker) !important;
  224. }
  225. .manage-list .configure .icon {
  226. filter: brightness(0.4);
  227. vertical-align: sub;
  228. }
  229. .manage-list .configure:hover {
  230. filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
  231. }
  232. .switch.active {
  233. background-color: var(--color-background-nav);
  234. }
  235. .switch.active:hover {
  236. background-image: url("./icons/disabled-light.svg");
  237. }
  238. .nav-list .nav-header {
  239. padding: 0 1rem;
  240. font-weight: bold;
  241. background-color: var(--color-background-aside);
  242. color: var(--color-text-light);
  243. cursor: default;
  244. }
  245. .nav-list .item a:hover {
  246. background-color: var(--color-background-nav-darker);
  247. color: var(--color-text-light);
  248. }
  249. .nav-list .item.active {
  250. background: var(--color-background-nav-darker);
  251. color: var(--color-text-light);
  252. }
  253. .nav-list .item.active a {
  254. color: var(--color-text-light);
  255. }
  256. .nav-list .item.active.empty a,
  257. .nav-list .item.active .error a {
  258. color: var(--color-text-light);
  259. }
  260. .nav-list .item.active.empty a {
  261. background-color: var(--color-background-alert);
  262. }
  263. .nav-list .item.active.error a {
  264. background-color: var(--color-background-bad);
  265. }
  266. .nav-list .item > a {
  267. padding: 0 1.5rem;
  268. }
  269. .nav-list .item.empty a {
  270. color: var(--color-text-alert);
  271. }
  272. .nav-list .item.error a {
  273. color: var(--color-text-bad-lighter);
  274. }
  275. .nav-list .item .icon {
  276. filter: brightness(3);
  277. }
  278. .nav-list .nav-form {
  279. padding: 3px;
  280. text-align: center;
  281. }
  282. .nav-list a:hover {
  283. text-decoration: none;
  284. }
  285. .dropdown-menu {
  286. padding: 0.5rem 0 1rem 0;
  287. font-size: 0.8rem;
  288. text-align: right;
  289. border: none;
  290. background-color: var(--color-background-nav-darker);
  291. }
  292. .dropdown-menu .dropdown-header {
  293. cursor: default;
  294. padding: 0.5rem 10px 0.5rem 10px;
  295. font-weight: bold;
  296. color: var(--color-text-light);
  297. }
  298. .dropdown-menu .dropdown-header a {
  299. padding: 0 5px;
  300. position: absolute;
  301. left: 5px;
  302. }
  303. .dropdown-menu .dropdown-header a:hover {
  304. background-color: var(--color-background-nav);
  305. }
  306. .dropdown-menu .dropdown-section .dropdown-section-title {
  307. cursor: default;
  308. padding: 0.25rem 0.25rem 0.125rem 0.5rem;
  309. font-weight: bold;
  310. color: var(--color-text-light);
  311. }
  312. .dropdown-menu .dropdown-section .item a {
  313. padding: 0 22px;
  314. }
  315. .dropdown-menu .dropdown-section .item a:hover {
  316. background-color: var(--color-background-nav);
  317. }
  318. .dropdown-menu::after {
  319. content: none;
  320. }
  321. .dropdown-menu > .item {
  322. padding: 0 0.5rem 0 0;
  323. }
  324. .dropdown-menu > .item > a {
  325. min-width: initial;
  326. white-space: nowrap;
  327. }
  328. .dropdown-menu > .item > a:hover,
  329. .dropdown-menu > .item > button:hover {
  330. background-color: var(--color-background-nav);
  331. color: var(--color-text-light);
  332. }
  333. .dropdown-menu > .item[aria-checked=true] > a::before {
  334. font-weight: bold;
  335. margin: 0 -14px 0 0;
  336. }
  337. .dropdown-menu .input select,
  338. .dropdown-menu .input input {
  339. margin: 0 auto 5px;
  340. padding: 2px 5px;
  341. }
  342. .labels .dropdown-menu,
  343. .tags .dropdown-menu,
  344. .share .dropdown-menu {
  345. left: auto;
  346. }
  347. .item ~ .dropdown-header,
  348. .item.separator {
  349. border-top-color: var(--color-border-light-darker);
  350. cursor: default;
  351. }
  352. .alert {
  353. margin: 5px auto;
  354. padding: 10px 15px;
  355. background-color: var(--color-background-light);
  356. color: var(--color-text-light-darker);
  357. font-size: 0.9em;
  358. border: none;
  359. text-shadow: 0 0 1px var(--color-text-shadow-light);
  360. }
  361. .alert > a {
  362. color: inherit;
  363. text-decoration: underline;
  364. }
  365. .alert-head {
  366. font-size: 1.15em;
  367. }
  368. .alert-warn,
  369. .alert-success,
  370. .alert-error {
  371. border: none;
  372. }
  373. .alert-warn {
  374. background-color: var(--color-background-light);
  375. color: var(--color-text-alert);
  376. }
  377. .alert-success {
  378. background-color: var(--color-background-light);
  379. color: var(--color-text-good);
  380. }
  381. .alert-error {
  382. background-color: var(--color-background-light);
  383. color: var(--color-text-bad);
  384. }
  385. .pagination {
  386. background: var(--color-background-light-darker);
  387. color: var(--color_text);
  388. }
  389. .pagination .item a {
  390. color: var(--color_text);
  391. }
  392. #load_more.loading,
  393. #load_more.loading:hover {
  394. background: url(loader.gif) center center no-repeat var(--color-background-aside);
  395. }
  396. .content {
  397. padding: 20px 10px;
  398. }
  399. .content hr {
  400. margin: 30px 10px;
  401. background: var(--color-background-light-darker);
  402. height: 1px;
  403. border: 0;
  404. box-shadow: 0 2px 5px var(--color-box-shadow-light);
  405. }
  406. .content pre {
  407. margin: 10px auto;
  408. padding: 10px 20px;
  409. overflow: auto;
  410. background-color: var(--color-background-dark);
  411. color: var(--color-text-light);
  412. font-size: 0.9rem;
  413. }
  414. .content pre code {
  415. background: transparent;
  416. color: var(--color-text-light);
  417. border: none;
  418. }
  419. .content code {
  420. padding: 2px 5px;
  421. background-color: var(--color-background-light);
  422. color: var(--color-text-bad);
  423. border: 1px solid var(--color-border-light);
  424. }
  425. .content blockquote {
  426. margin: 0;
  427. padding: 5px 20px;
  428. background-color: var(--color-background-light);
  429. display: block;
  430. color: var(--color-text-light-darker);
  431. border-top: 1px solid var(--color-border-light-darker);
  432. border-bottom: 1px solid var(--color-border-light-darker);
  433. }
  434. .content blockquote p {
  435. margin: 0;
  436. }
  437. .content > h1.title > a {
  438. color: var(--color_text);
  439. }
  440. .box {
  441. border: 1px solid var(--color-border-light-darker);
  442. }
  443. .box .box-title {
  444. margin: 0;
  445. padding: 7px 10px;
  446. background-color: var(--color-background-aside);
  447. color: var(--color-text-light);
  448. border-bottom: 1px solid var(--color-border-light-darker);
  449. }
  450. .box .box-title a {
  451. color: var(--color-text-light);
  452. }
  453. .box .box-title .configure {
  454. margin-left: 4px;
  455. }
  456. .box .box-title .configure .icon:hover {
  457. filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
  458. }
  459. .box .box-content {
  460. padding-right: 30px;
  461. max-height: 260px;
  462. }
  463. .box .box-content .item {
  464. padding: 0 10px;
  465. font-size: 0.9rem;
  466. line-height: 2.5;
  467. }
  468. .box .box-content .item .configure .icon {
  469. vertical-align: middle;
  470. filter: brightness(0.4);
  471. }
  472. .box .box-content .item .configure .icon:hover {
  473. filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
  474. }
  475. .box.category .box-title .title {
  476. font-weight: normal;
  477. text-decoration: none;
  478. text-align: right;
  479. }
  480. .box.category:not([data-unread="0"]) .box-title {
  481. background-color: var(--color-background-nav);
  482. }
  483. .box.category:not([data-unread="0"]) .box-title:active {
  484. background: var(--color-background-nav-darker);
  485. }
  486. .box.category:not([data-unread="0"]) .box-title .title {
  487. font-weight: bold;
  488. color: var(--color-text-light);
  489. }
  490. .box.category .title:not([data-unread="0"])::after {
  491. background: none;
  492. border: 0;
  493. box-shadow: none;
  494. position: absolute;
  495. top: 5px;
  496. left: 10px;
  497. font-weight: bold;
  498. text-shadow: none;
  499. }
  500. .box.visible-semi {
  501. border-style: solid;
  502. }
  503. .tree {
  504. margin: 10px 0;
  505. }
  506. .aside_feed .tree-folder-title {
  507. padding: 0.3rem 0.75rem;
  508. background-color: var(--color-background-aside);
  509. font-size: 1rem;
  510. position: relative;
  511. }
  512. .aside_feed .tree-folder-title .title {
  513. background: inherit;
  514. color: var(--color-text-light);
  515. }
  516. .aside_feed .tree-folder-title .title:hover {
  517. text-decoration: none;
  518. }
  519. .tree-folder-items {
  520. background-color: var(--color-background-aside);
  521. }
  522. .tree-folder-items > .item {
  523. font-size: 0.8rem;
  524. }
  525. .tree-folder-items > .item.active {
  526. background-color: var(--color-background-nav-darker);
  527. }
  528. .tree-folder-items > .item > a {
  529. text-decoration: none;
  530. color: var(--color-text-light);
  531. }
  532. .header {
  533. height: auto;
  534. }
  535. .header > .item {
  536. padding: 0;
  537. vertical-align: middle;
  538. }
  539. .header > .item.title {
  540. position: absolute;
  541. text-align: center;
  542. }
  543. .header > .item.title .logo {
  544. display: inline-block;
  545. height: 26px;
  546. vertical-align: top;
  547. position: relative;
  548. top: 5px;
  549. filter: grayscale(100%) brightness(100);
  550. }
  551. .header .item.search input:focus {
  552. width: 350px;
  553. }
  554. .header .item.search {
  555. display: none;
  556. }
  557. .header .item.configure {
  558. position: fixed;
  559. left: 0;
  560. z-index: 95;
  561. width: 35px;
  562. text-align: center;
  563. line-height: 0.8;
  564. }
  565. .header .item.configure > .icon {
  566. filter: brightness(3);
  567. margin-left: 5px;
  568. margin-top: 3px;
  569. }
  570. .header .item.configure .dropdown .dropdown-menu {
  571. max-height: calc(100vh - 45px);
  572. overflow: auto;
  573. }
  574. .header .item.configure .dropdown .dropdown-menu .icon {
  575. filter: brightness(3);
  576. }
  577. .aside {
  578. padding: 35px 0;
  579. background-color: var(--color-background-aside);
  580. }
  581. .aside.aside_feed .tree {
  582. margin: 0 0 50px;
  583. }
  584. .aside.aside_feed .tree-folder .tree-folder-title:hover,
  585. .aside.aside_feed .tree-folder .item.feed:hover {
  586. background-color: var(--color-background-nav-darker);
  587. }
  588. .aside.aside_feed .nav-form input,
  589. .aside.aside_feed .nav-form select {
  590. width: 140px;
  591. }
  592. .aside.aside_feed .nav-form .dropdown .dropdown-menu {
  593. left: -20px;
  594. }
  595. .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
  596. left: 33px;
  597. }
  598. .aside_feed .category .title:not([data-unread="0"])::after {
  599. margin: 0.5rem 0 0 0;
  600. background-color: var(--color-background-nav-darker);
  601. color: var(--color-text-light);
  602. }
  603. .aside_feed .feed .item-title:not([data-unread="0"])::after {
  604. background-color: var(--color-background-nav);
  605. color: var(--color-text-light);
  606. }
  607. .aside_feed .tree-folder-items .dropdown-menu::after {
  608. right: 2px;
  609. }
  610. .aside_feed .about {
  611. padding: 1rem;
  612. display: block;
  613. text-align: center;
  614. font-size: 0.8em;
  615. font-style: italic;
  616. }
  617. .reader .aside .toggle_aside {
  618. background-color: var(--color-background-aside);
  619. }
  620. .reader .aside .toggle_aside .icon {
  621. filter: brightness(3);
  622. }
  623. .reader .aside .toggle_aside:hover {
  624. background-color: var(--color-background-nav);
  625. }
  626. .post {
  627. padding: 10px 50px;
  628. font-size: 0.9em;
  629. }
  630. .post input.long {
  631. height: 33px;
  632. margin-top: 0px;
  633. }
  634. .post form {
  635. margin: 10px 0;
  636. }
  637. .post.content {
  638. max-width: 550px;
  639. }
  640. .prompt input {
  641. margin: 5px auto;
  642. }
  643. #global {
  644. height: 100vh;
  645. }
  646. #new-article {
  647. background-color: var(--color-background-nav);
  648. font-size: 1em;
  649. text-align: center;
  650. position: fixed;
  651. bottom: 48px;
  652. z-index: 900;
  653. right: 0;
  654. line-height: 1.5;
  655. }
  656. #new-article > a {
  657. padding: 1rem;
  658. line-height: 1.5;
  659. font-weight: bold;
  660. color: var(--color-text-light);
  661. }
  662. #new-article > a:hover {
  663. text-decoration: none;
  664. background-color: var(--color-background-nav-darker);
  665. }
  666. .day {
  667. padding: 0 10px;
  668. font-weight: bold;
  669. line-height: 3;
  670. text-align: center;
  671. }
  672. .day .name {
  673. display: none;
  674. }
  675. .nav a {
  676. color: var(--color-text-light);
  677. }
  678. .nav_menu {
  679. padding: 0;
  680. width: 100%;
  681. font-size: 0;
  682. background-color: var(--color-background-nav);
  683. position: sticky;
  684. top: 0;
  685. z-index: 90;
  686. }
  687. .nav_menu .item.search {
  688. display: inline-block;
  689. position: absolute;
  690. left: 40px;
  691. }
  692. .nav_menu .item.search input {
  693. border-width: 0;
  694. line-height: 1.95;
  695. }
  696. .nav_menu #toggle-unread .icon,
  697. .nav_menu #toggle-starred .icon {
  698. filter: brightness(1);
  699. }
  700. .flux {
  701. padding-left: 10px;
  702. background-color: var(--color-background-light);
  703. }
  704. .flux::after {
  705. margin: 0 auto;
  706. width: 90%;
  707. border-top: 1px solid var(--color-border-light-darker);
  708. }
  709. .flux .flux_header:hover,
  710. .flux .current {
  711. background-color: var(--color-background-hover);
  712. }
  713. .flux .flux_header:hover:not(.current):hover .item.title,
  714. .flux .current:not(.current):hover .item.title {
  715. background-color: var(--color-background-hover);
  716. }
  717. .flux.favorite:not(.current) {
  718. background-color: var(--color-background-stared);
  719. }
  720. .flux.favorite:not(.current):hover .item.title {
  721. background-color: var(--color-background-stared);
  722. }
  723. .flux.not_read:not(.current) {
  724. background-color: var(--color-background-unread);
  725. }
  726. .flux.not_read:not(.current):hover .item.title {
  727. background-color: var(--color-background-unread);
  728. }
  729. .flux .item.date {
  730. color: var(--color-text-light-darker);
  731. font-size: 0.7rem;
  732. }
  733. .flux .bottom {
  734. font-size: 0.8rem;
  735. text-align: center;
  736. }
  737. .flux label {
  738. color: var(--color-text-light);
  739. cursor: pointer;
  740. }
  741. .flux_header {
  742. font-size: 0.8rem;
  743. cursor: pointer;
  744. }
  745. .flux_header .title {
  746. font-size: 0.9rem;
  747. }
  748. .notification {
  749. padding: 10px 0;
  750. background-color: var(--color-background-light-darker);
  751. height: auto;
  752. color: var(--color-text-light-darker);
  753. font-size: 1em;
  754. border: none;
  755. text-align: center;
  756. font-weight: bold;
  757. vertical-align: middle;
  758. position: fixed;
  759. bottom: 48px;
  760. right: 0;
  761. top: auto;
  762. }
  763. .notification.good, .notification.bad {
  764. color: var(--color-text-light);
  765. }
  766. .notification.good {
  767. background-color: var(--color-background-good);
  768. }
  769. .notification.good a.close:hover {
  770. background-color: var(--color-background-good);
  771. }
  772. .notification.bad {
  773. background-color: var(--color-background-bad);
  774. }
  775. .notification.bad a.close:hover {
  776. background-color: var(--color-background-bad);
  777. }
  778. .notification a.close {
  779. display: none;
  780. }
  781. #bigMarkAsRead {
  782. text-align: center;
  783. text-decoration: none;
  784. background: var(--color-background-light-darker);
  785. }
  786. #bigMarkAsRead:hover {
  787. background-color: var(--color-background-aside);
  788. color: var(--color-text-light);
  789. }
  790. #nav_entries {
  791. margin: 0;
  792. text-align: center;
  793. line-height: 3;
  794. table-layout: fixed;
  795. background-color: var(--color-background-aside);
  796. }
  797. .stat {
  798. margin: 10px 0 20px;
  799. }
  800. .stat th,
  801. .stat td,
  802. .stat tr {
  803. border: none;
  804. }
  805. .stat > table td,
  806. .stat > table th {
  807. border-bottom: 1px solid var(--color-border-light-darker);
  808. }
  809. #overlay {
  810. z-index: 100;
  811. }
  812. #panel {
  813. z-index: 100;
  814. }
  815. #panel .nav_menu {
  816. position: relative;
  817. }
  818. .formLogin #global,
  819. .register #global {
  820. height: 0;
  821. }
  822. .formLogin .header,
  823. .register .header {
  824. background-color: var(--color-background-nav);
  825. height: 35px;
  826. position: relative;
  827. }
  828. .formLogin .header > .item.configure,
  829. .register .header > .item.configure {
  830. padding: 8px;
  831. width: auto;
  832. position: absolute;
  833. left: 0;
  834. white-space: nowrap;
  835. bottom: 0;
  836. }
  837. .formLogin .header > .item.configure .icon,
  838. .register .header > .item.configure .icon {
  839. filter: brightness(3);
  840. }
  841. a.signin {
  842. color: var(--color-text-light);
  843. font-size: 70%;
  844. }
  845. .log-item.log-error {
  846. background-color: var(--color-background-bad);
  847. color: var(--color-text-light);
  848. }
  849. .log-item.log-warning {
  850. background-color: var(--color-background-alert);
  851. color: var(--color-text-light);
  852. }
  853. .log-item.log-debug {
  854. background: var(--color-background-dark);
  855. }
  856. @media (max-width: 840px) {
  857. body:not(.formLogin, .register) .header .item.title {
  858. display: none;
  859. }
  860. .form-group .group-name {
  861. padding-bottom: 0;
  862. }
  863. .dropdown {
  864. position: relative;
  865. }
  866. #new-article {
  867. margin-top: 2rem;
  868. width: 100%;
  869. }
  870. .header {
  871. display: table;
  872. }
  873. .header .item {
  874. padding: 0;
  875. }
  876. .header .item.configure {
  877. padding: 0;
  878. position: fixed;
  879. left: 76px;
  880. }
  881. .header .item.configure > .icon {
  882. margin-top: 5px;
  883. }
  884. button.read_all.btn {
  885. display: none;
  886. }
  887. .flux .item.manage,
  888. .flux_header .item.website {
  889. width: 35px;
  890. text-align: center;
  891. }
  892. .flux:not(.current):hover .item.title {
  893. top: auto !important;
  894. }
  895. .aside {
  896. padding: 0;
  897. width: 0;
  898. transition: width 200ms linear;
  899. }
  900. .aside .toggle_aside {
  901. background-color: var(--color-background-aside);
  902. }
  903. .aside .toggle_aside:hover {
  904. background-color: var(--color-background-nav);
  905. }
  906. .aside .toggle_aside .icon {
  907. filter: brightness(3);
  908. }
  909. .aside.aside_feed .configure-feeds {
  910. display: flex;
  911. margin-top: 0;
  912. margin-right: auto;
  913. margin-left: auto;
  914. }
  915. .aside:target {
  916. width: 78%;
  917. z-index: 1000;
  918. }
  919. #slider .toggle_aside {
  920. background-color: var(--color-background-aside);
  921. }
  922. #slider .toggle_aside:hover {
  923. background-color: var(--color-background-nav);
  924. }
  925. #slider .toggle_aside .icon {
  926. filter: brightness(3);
  927. }
  928. .nav_menu {
  929. height: 71px;
  930. }
  931. .nav_menu .btn {
  932. margin: 0;
  933. }
  934. .nav_menu .stick {
  935. margin: 0;
  936. }
  937. .nav_menu .stick .btn {
  938. margin: 0;
  939. }
  940. .nav_menu .item.search {
  941. top: 3px;
  942. margin-right: 77px;
  943. width: calc(100% - 152px);
  944. position: relative;
  945. }
  946. .nav_menu .item.search form {
  947. display: block;
  948. }
  949. .nav_menu .item.search input {
  950. width: 100%;
  951. }
  952. #panel .close,
  953. .dropdown-menu .toggle_aside {
  954. background-color: var(--color-background-aside);
  955. display: block;
  956. height: 50px;
  957. line-height: 3.5;
  958. text-align: center;
  959. padding-left: 10px;
  960. }
  961. #panel .close:hover,
  962. .dropdown-menu .toggle_aside:hover {
  963. background-color: var(--color-background-nav);
  964. }
  965. .dropdown-target:target ~ .dropdown-toggle::after,
  966. .dropdown-target:target ~ .dropdown-toggle.btn::after {
  967. display: none;
  968. }
  969. .share .dropdown-menu {
  970. left: 3%;
  971. right: auto;
  972. }
  973. .day .name {
  974. font-size: 1.1rem;
  975. }
  976. .notification {
  977. width: 100%;
  978. }
  979. .notification a.close {
  980. background: transparent;
  981. display: block;
  982. right: 0;
  983. }
  984. .notification a.close:hover {
  985. opacity: 0.5;
  986. }
  987. .notification a.close .icon {
  988. display: none;
  989. }
  990. #nav_entries {
  991. width: 100% !important;
  992. }
  993. .post {
  994. padding-right: 15px;
  995. padding-left: 15px;
  996. }
  997. div#stream {
  998. margin-top: 0px;
  999. }
  1000. a.btn.toggle_aside {
  1001. position: absolute;
  1002. top: 0;
  1003. }
  1004. form#mark-read-menu,
  1005. a#actualize,
  1006. a#toggle-order,
  1007. div#nav_menu_actions,
  1008. div#nav_menu_views {
  1009. position: absolute;
  1010. }
  1011. form#mark-read-menu {
  1012. left: 38px;
  1013. top: 0;
  1014. }
  1015. a#actualize,
  1016. a#toggle-order {
  1017. left: 0;
  1018. }
  1019. a#actualize {
  1020. top: 0;
  1021. }
  1022. a#toggle-order,
  1023. div#nav_menu_actions,
  1024. div#nav_menu_views {
  1025. top: 36px;
  1026. }
  1027. div#nav_menu_actions {
  1028. right: 0px;
  1029. }
  1030. div#nav_menu_views {
  1031. left: 50px;
  1032. }
  1033. }
  1034. @media (max-width: 410px) {
  1035. .nav_menu .stick {
  1036. margin: 0;
  1037. }
  1038. }
  1039. @media (max-width: 374px) {
  1040. #nav_menu_views {
  1041. display: none;
  1042. }
  1043. }
  1044. button.as-link {
  1045. outline: none;
  1046. }
  1047. .dropdown-target:target ~ .btn.dropdown-toggle {
  1048. background-color: var(--color-background-nav-darker);
  1049. }
  1050. .tree-folder.active .tree-folder-title {
  1051. background-color: var(--color-background-nav-darker);
  1052. font-weight: bold;
  1053. }
  1054. .feed.item.empty {
  1055. color: var(--color-text-alert);
  1056. }
  1057. .feed.item.empty.active {
  1058. background-color: var(--color-background-alert);
  1059. color: var(--color-text-light);
  1060. }
  1061. .feed.item.empty.active > a {
  1062. color: var(--color-text-light);
  1063. }
  1064. .feed.item.empty > a {
  1065. color: var(--color-text-alert);
  1066. }
  1067. .feed.item.error {
  1068. color: var(--color-text-bad-lighter);
  1069. }
  1070. .feed.item.error.active {
  1071. background-color: var(--color-background-bad);
  1072. color: var(--color-text-light);
  1073. }
  1074. .feed.item.error.active > a {
  1075. color: var(--color-text-light);
  1076. }
  1077. .feed.item.error > a {
  1078. color: var(--color-text-bad-lighter);
  1079. }
  1080. #stream.reader .flux {
  1081. background-color: var(--color-background-light);
  1082. color: var(--color-text-aside);
  1083. border: none;
  1084. }
  1085. #stream.reader .flux::after {
  1086. border: none;
  1087. }
  1088. #stream.reader .flux .content {
  1089. border-color: var(--color-border-grey);
  1090. }
  1091. #stream.reader .flux .author {
  1092. margin: 0 0 10px;
  1093. color: var(--color-text-light-darker);
  1094. font-size: 90%;
  1095. }
  1096. #nav_menu_actions ul.dropdown-menu {
  1097. right: 0;
  1098. left: auto;
  1099. }
  1100. #nav_menu_read_all ul.dropdown-menu {
  1101. left: 0;
  1102. right: auto;
  1103. }
  1104. #slider label {
  1105. min-height: initial;
  1106. }