4
0

BlueLagoon.css 21 KB

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