pafat.css 23 KB

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