pafat.css 17 KB

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