origine-compact.css 20 KB

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