pafat.rtl.css 22 KB

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