origine-compact.css 19 KB

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