origine.rtl.css 18 KB

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