ansum.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341
  1. @font-face {
  2. font-family: "lato";
  3. font-style: normal;
  4. font-stretch: normal;
  5. font-weight: 400;
  6. src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff");
  7. }
  8. @font-face {
  9. font-family: "lato";
  10. font-style: italic;
  11. font-stretch: normal;
  12. font-weight: 400;
  13. src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff");
  14. }
  15. @font-face {
  16. font-family: "lato";
  17. font-style: normal;
  18. font-stretch: normal;
  19. font-weight: 700;
  20. src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff");
  21. }
  22. @font-face {
  23. font-family: "lato";
  24. font-style: italic;
  25. font-stretch: normal;
  26. font-weight: 700;
  27. src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
  28. }
  29. @font-face {
  30. font-family: "spectral";
  31. font-style: normal;
  32. font-stretch: normal;
  33. font-weight: 400;
  34. src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff");
  35. }
  36. @font-face {
  37. font-family: "spectral";
  38. font-style: italic;
  39. font-stretch: normal;
  40. font-weight: 400;
  41. src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff");
  42. }
  43. @font-face {
  44. font-family: "spectral";
  45. font-style: normal;
  46. font-stretch: normal;
  47. font-weight: 700;
  48. src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff");
  49. }
  50. @font-face {
  51. font-family: "spectral";
  52. font-style: italic;
  53. font-stretch: normal;
  54. font-weight: 700;
  55. src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff");
  56. }
  57. /* stylelint-disable property-no-vendor-prefix */
  58. /* FUNCTIONS */
  59. /* btns */
  60. .btn {
  61. margin: 0;
  62. padding: 0.5rem 1.5rem;
  63. background: #fcfaf8;
  64. color: #766556;
  65. font-size: 1rem;
  66. border: none;
  67. border-radius: 5px;
  68. min-height: 25px;
  69. min-width: 15px;
  70. line-height: 25px;
  71. vertical-align: middle;
  72. transition: all 0.15s ease-in-out;
  73. }
  74. .btn.btn-important {
  75. background: #ca7227;
  76. color: #fff;
  77. }
  78. .btn.btn-important:hover, .btn.btn-important:active {
  79. background: #b7641d;
  80. }
  81. .btn.btn-important img {
  82. filter: brightness(3);
  83. }
  84. .btn.btn-attention {
  85. background: #f5633e;
  86. color: #fff;
  87. }
  88. .btn.btn-attention:hover, .btn.btn-attention:active {
  89. background: #73341f;
  90. }
  91. .btn:hover {
  92. text-decoration: none;
  93. }
  94. /*=== Forms */
  95. legend {
  96. margin: 2rem 0 1rem 0;
  97. padding: 0;
  98. display: inline-block;
  99. width: auto;
  100. font-size: 1rem;
  101. clear: both;
  102. text-transform: uppercase;
  103. letter-spacing: 1px;
  104. font-weight: 700;
  105. }
  106. label {
  107. min-height: 25px;
  108. padding: 5px 0;
  109. cursor: pointer;
  110. color: #766556;
  111. }
  112. textarea {
  113. max-width: 100%;
  114. }
  115. input, select, textarea, button {
  116. padding: 5px 10px;
  117. background: #fff;
  118. color: #766556;
  119. font-family: "lato", "Helvetica", "Arial", sans-serif;
  120. font-size: 1rem;
  121. border: 1px solid #f5f0ec;
  122. border-radius: 2px;
  123. min-height: 25px;
  124. line-height: 25px;
  125. vertical-align: middle;
  126. }
  127. select {
  128. padding-top: 9px;
  129. padding-bottom: 9px;
  130. }
  131. option {
  132. padding: 0 0.5em;
  133. }
  134. input:focus, select:focus, textarea:focus {
  135. color: #363330;
  136. border-color: #ca7227;
  137. }
  138. input:invalid, select:invalid {
  139. color: #f5633e;
  140. border-color: #f5633e;
  141. box-shadow: none;
  142. }
  143. input:disabled, select:disabled {
  144. color: #ba9;
  145. border-color: #ba9;
  146. }
  147. .form-group {
  148. padding: 5px;
  149. border-radius: 3px;
  150. }
  151. .form-group::after {
  152. display: block;
  153. clear: both;
  154. }
  155. .form-group .group-name {
  156. padding: 10px 0;
  157. }
  158. .form-group .group-controls {
  159. min-height: 25px;
  160. padding: 5px 0;
  161. }
  162. .form-group .group-controls .control {
  163. line-height: 2em;
  164. }
  165. .form-group.form-actions {
  166. margin: 15px 0 25px;
  167. padding: 5px 0;
  168. }
  169. .form-group.form-actions .btn {
  170. margin: 0 0.5rem 0 0;
  171. }
  172. /*=== Tables */
  173. table {
  174. border-collapse: collapse;
  175. }
  176. th, td {
  177. border: 1px solid #e4d8cc;
  178. }
  179. th {
  180. background: #fcfaf8;
  181. }
  182. .config-articleicons td,
  183. .config-articleicons th {
  184. font-weight: normal;
  185. text-align: center;
  186. }
  187. /*=== COMPONENTS */
  188. /*===============*/
  189. /*=== Forms */
  190. /*=== Horizontal-list */
  191. .horizontal-list {
  192. padding: 0.1rem 0;
  193. }
  194. .horizontal-list > .item:first-child {
  195. padding-left: 0.5rem;
  196. }
  197. /*=== Dropdown */
  198. .dropdown .dropdown-target:target + .btn {
  199. background-color: #e4d8cc;
  200. }
  201. .dropdown-menu {
  202. margin: 9px 0 0 0;
  203. padding: 0.5rem 0 1rem 0;
  204. background: #fcfaf8;
  205. font-size: 1rem;
  206. border: none;
  207. border-radius: 3px;
  208. box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
  209. text-align: left;
  210. }
  211. .dropdown-menu::after {
  212. border: none;
  213. right: 17px;
  214. }
  215. .dropdown-menu .dropdown-header,
  216. .dropdown-menu .dropdown-section .dropdown-section-title {
  217. padding: 1rem 1.5rem;
  218. font-weight: bold;
  219. text-align: left;
  220. color: #766556;
  221. text-transform: uppercase;
  222. letter-spacing: 1px;
  223. }
  224. .dropdown-menu .item {
  225. transition: all 0.075s ease-in-out;
  226. }
  227. .dropdown-menu .item > a,
  228. .dropdown-menu .item > span,
  229. .dropdown-menu .item > .as-link {
  230. padding: 0 2rem;
  231. color: #363330;
  232. font-size: inherit;
  233. line-height: 2.5em;
  234. }
  235. .dropdown-menu .item > a span.icon,
  236. .dropdown-menu .item > span span.icon,
  237. .dropdown-menu .item > .as-link span.icon {
  238. padding: 0 0.25rem !important;
  239. }
  240. .dropdown-menu .item > a:not(.addItem):hover,
  241. .dropdown-menu .item > .as-link:not(.addItem):hover {
  242. background: #ca7227;
  243. color: #fff;
  244. }
  245. .dropdown-menu .item > a:not(.addItem):hover .icon,
  246. .dropdown-menu .item > .as-link:not(.addItem):hover .icon {
  247. filter: grayscale(100%) brightness(2.5);
  248. }
  249. .dropdown-menu .item.dropdown-section {
  250. margin-top: 0.75rem;
  251. }
  252. .dropdown-menu .item.dropdown-section ~ .dropdown-section {
  253. border-top-color: #f5f0ec;
  254. }
  255. .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
  256. padding-left: 2rem;
  257. }
  258. .dropdown-menu .item:not(.addItem) > a:hover,
  259. .dropdown-menu .item:not(.addItem) button:hover {
  260. background: #ca7227;
  261. color: #fff;
  262. }
  263. .dropdown-menu .item:not(.addItem) > a:hover .icon,
  264. .dropdown-menu .item:not(.addItem) button:hover .icon {
  265. filter: brightness(3);
  266. }
  267. .dropdown-menu .item[aria-checked=true] a::before {
  268. margin: 0 0 0 -14px;
  269. font-weight: bold;
  270. }
  271. .dropdown-menu .item ~ .dropdown-header {
  272. margin-top: 0.75rem;
  273. padding-top: 1.75rem;
  274. border-top-color: #f5f0ec;
  275. }
  276. .dropdown-menu .item.separator {
  277. margin-top: 0.75rem;
  278. border-top-color: #f5f0ec;
  279. }
  280. .dropdown-menu .input select, .dropdown-menu .input input {
  281. margin: 0 auto 5px;
  282. padding: 2px 5px;
  283. border-radius: 3px;
  284. }
  285. .tree .tree-folder .tree-folder-items .dropdown-menu .item {
  286. padding: 0;
  287. }
  288. .tree .tree-folder .tree-folder-items .dropdown-menu .item a,
  289. .tree .tree-folder .tree-folder-items .dropdown-menu .item button {
  290. color: #363330;
  291. }
  292. .tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover,
  293. .tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover {
  294. color: #fff;
  295. }
  296. .tree .tree-folder .tree-folder-items .dropdown-menu .item:hover {
  297. background: #ca7227;
  298. }
  299. /*=== Alerts */
  300. .alert {
  301. background: #fcfaf8;
  302. color: #766556;
  303. font-size: 1rem;
  304. border: 1px solid #d9ccbf;
  305. border-radius: 3px;
  306. text-shadow: 0 0 1px #f5f0ec;
  307. }
  308. .alert-head {
  309. font-size: 1.15em;
  310. }
  311. .alert > a {
  312. text-decoration: underline;
  313. color: inherit;
  314. }
  315. .alert-warn {
  316. background: #fdfde0;
  317. color: #73762f;
  318. border: 1px solid #73762f33;
  319. }
  320. .alert-success {
  321. background: #cffdef;
  322. color: #0c7556;
  323. border: 1px solid #0c755633;
  324. }
  325. .alert-error {
  326. background: #fde0d8;
  327. color: #73341f;
  328. border: 1px solid #73341f33;
  329. }
  330. /*=== Pagination */
  331. .pagination {
  332. background: #f5f0ec;
  333. color: #363330;
  334. }
  335. .pagination .item a {
  336. color: #363330;
  337. }
  338. #load_more.loading,
  339. #load_more.loading:hover {
  340. background: url("loader.gif") center center no-repeat #34495e;
  341. }
  342. /*=== Boxes */
  343. .box {
  344. background: #fff;
  345. border: none;
  346. border-radius: 3px;
  347. box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  348. }
  349. .box .box-title {
  350. background: #f5f0ec;
  351. color: #363330;
  352. border-radius: 2px 2px 0 0;
  353. }
  354. .box .box-content {
  355. padding-left: 30px;
  356. }
  357. .box .box-content .item {
  358. padding: 0.5rem 0;
  359. color: #363330;
  360. font-size: 1rem;
  361. border-bottom: 1px solid #f5f0ec;
  362. line-height: 1.7em;
  363. }
  364. .box .box-content .item:last-child {
  365. border-bottom: none;
  366. }
  367. .box .configure {
  368. margin-right: 0.5rem;
  369. padding: 0.25rem;
  370. border-radius: 3px;
  371. }
  372. .box .configure .icon {
  373. vertical-align: middle;
  374. }
  375. .box .configure:hover {
  376. border-radius: 2px;
  377. background-color: #ca7227;
  378. }
  379. .box .configure:hover .icon {
  380. filter: brightness(3);
  381. }
  382. /*=== "Load more" part */
  383. #bigMarkAsRead.big {
  384. text-align: center;
  385. text-decoration: none;
  386. background: #fdf6ef;
  387. color: #ca7227;
  388. transition: all 0.15s ease-in-out;
  389. }
  390. #bigMarkAsRead.big:hover {
  391. background: #ca7227;
  392. color: #fff;
  393. }
  394. #bigMarkAsRead.big:hover .bigTick {
  395. filter: brightness(7);
  396. }
  397. #bigMarkAsRead.big .bigTick {
  398. margin: 0.5rem 0;
  399. background: url(icons/tick-color.svg) center no-repeat;
  400. display: inline-block;
  401. width: 64px;
  402. height: 64px;
  403. text-indent: -9999px;
  404. white-space: nowrap;
  405. }
  406. /*=== DIVERS */
  407. /*===========*/
  408. .aside.aside_feed .nav-form input,
  409. .aside.aside_feed .nav-form select {
  410. width: 140px;
  411. }
  412. .aside.aside_feed .nav-form .dropdown .dropdown-menu {
  413. right: -20px;
  414. }
  415. .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
  416. right: 33px;
  417. }
  418. /*=== Tree */
  419. .tree {
  420. margin: 10px 0;
  421. }
  422. .tree#sidebar {
  423. scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
  424. scrollbar-color: #36333033 #36333022;
  425. }
  426. .tree .tree-folder {
  427. border-bottom: 1px solid #f0e7da;
  428. box-shadow: inset -1px -11px 8px rgba(0, 0, 0, 0.2);
  429. }
  430. .tree .tree-folder .tree-folder-title {
  431. padding: 0.75rem 1rem;
  432. background: #fbf9f6;
  433. position: relative;
  434. font-size: 0.85rem;
  435. letter-spacing: 1px;
  436. font-weight: 700;
  437. text-transform: uppercase;
  438. }
  439. .tree .tree-folder .tree-folder-title button.dropdown-toggle {
  440. margin: -0.75rem 0.25rem -0.75rem -1rem;
  441. padding: 0.75rem 0 0.75rem 1rem;
  442. }
  443. .tree .tree-folder .tree-folder-title button.dropdown-toggle:hover .icon {
  444. filter: brightness(1.7) !important;
  445. transition: 0.1s linear;
  446. }
  447. .tree .tree-folder .tree-folder-title .icon {
  448. margin-right: 0.5rem;
  449. }
  450. .tree .tree-folder .tree-folder-title .title {
  451. background: inherit;
  452. color: #363330;
  453. }
  454. .tree .tree-folder .tree-folder-title .title:hover {
  455. text-decoration: none;
  456. }
  457. .tree .tree-folder.active .tree-folder-title {
  458. background: #fbf9f6;
  459. font-weight: bold;
  460. }
  461. .tree .tree-folder .tree-folder-items {
  462. background: #f7f2ea;
  463. }
  464. .tree .tree-folder .tree-folder-items .item {
  465. font-size: 1rem;
  466. font-weight: 400;
  467. transition: all 0.15s ease-in-out;
  468. }
  469. .tree .tree-folder .tree-folder-items .item.active {
  470. background: #ca7227;
  471. }
  472. .tree .tree-folder .tree-folder-items .item.active .dropdown li a {
  473. color: #363330;
  474. }
  475. .tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
  476. color: #363330;
  477. }
  478. .tree .tree-folder .tree-folder-items .item.active a {
  479. color: #ffffff;
  480. }
  481. .tree .tree-folder .tree-folder-items .item:hover {
  482. background: #efe3d3;
  483. }
  484. .tree .tree-folder .tree-folder-items .item a {
  485. text-decoration: none;
  486. color: #363330;
  487. }
  488. .tree .tree-folder .tree-folder-items .item a.dropdown-toggle .icon {
  489. margin-right: 0.25rem;
  490. }
  491. /*=== Buttons */
  492. .stick input, .stick .btn,
  493. .group input,
  494. .group .btn {
  495. border-radius: 0;
  496. }
  497. .stick .btn:first-child,
  498. .group .btn:first-child {
  499. border-radius: 5px 0 0 5px;
  500. }
  501. .stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
  502. .group .btn:last-child,
  503. .group input:last-child,
  504. .group .dropdown:last-child > .btn {
  505. border-radius: 0 5px 5px 0;
  506. }
  507. .stick .btn + .btn,
  508. .stick .btn + input,
  509. .stick .btn + .dropdown > .btn,
  510. .stick input + .btn,
  511. .stick input + input,
  512. .stick input + .dropdown > .btn,
  513. .stick .dropdown + .btn,
  514. .stick .dropdown + input,
  515. .stick .dropdown + .dropdown > .btn,
  516. .group .btn + .btn,
  517. .group .btn + input,
  518. .group .btn + .dropdown > .btn,
  519. .group input + .btn,
  520. .group input + input,
  521. .group input + .dropdown > .btn,
  522. .group .dropdown + .btn,
  523. .group .dropdown + input,
  524. .group .dropdown + .dropdown > .btn {
  525. border-left: 1px solid #e4d8cc;
  526. }
  527. .aside {
  528. background: #fbf9f6;
  529. }
  530. .aside.aside_feed {
  531. padding: 10px 0;
  532. text-align: center;
  533. background: #fbf9f6;
  534. border-right: 1px solid #f0e7da;
  535. }
  536. .aside.aside_feed .tree-folder-title:hover button.dropdown-toggle .icon {
  537. filter: none;
  538. }
  539. .aside.aside_feed .tree {
  540. margin: 10px 0 50px;
  541. }
  542. .aside a:hover .icon {
  543. filter: brightness(1.7);
  544. transition: 0.1s linear;
  545. }
  546. /* Sidebar des pages de configuration */
  547. /*=== Navigation */
  548. .nav-list {
  549. font-size: 1rem;
  550. }
  551. .nav-list .item.nav-header,
  552. .nav-list .item {
  553. min-height: 2.5em;
  554. line-height: 2.5em;
  555. }
  556. .nav-list .item {
  557. background: #fbf9f6;
  558. min-height: 2.5em;
  559. line-height: 2.5em;
  560. }
  561. .nav-list .item.nav-header {
  562. min-height: 2.5em;
  563. line-height: 2.5em;
  564. }
  565. .nav-list .item a,
  566. .nav-list .item .as-link {
  567. padding: 0 1rem;
  568. color: #363330;
  569. transition: all 0.15s ease-in-out;
  570. }
  571. .nav-list .item a:hover,
  572. .nav-list .item .as-link:hover {
  573. background: #efe3d3;
  574. text-decoration: none;
  575. }
  576. .nav-list .item.active {
  577. background: #ca7227;
  578. color: #fff;
  579. }
  580. .nav-list .item.active a,
  581. .nav-list .item.active .as-link {
  582. background: #ca7227;
  583. color: #fff;
  584. text-decoration: none;
  585. }
  586. .nav-list .nav-header {
  587. padding: 0 1rem;
  588. font-weight: bold;
  589. color: #766556;
  590. text-transform: uppercase;
  591. letter-spacing: 1px;
  592. }
  593. .nav-list .nav-form {
  594. padding: 3px;
  595. text-align: center;
  596. }
  597. /*=== Aside main page (categories) */
  598. .aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
  599. width: calc(100% - 35px - 35px);
  600. }
  601. .aside.aside_feed .category .title:not([data-unread="0"])::after {
  602. margin: 0.75rem 0 0 0;
  603. background-color: rgba(35, 35, 0, 0.15);
  604. }
  605. .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
  606. margin: 0.5em 0 0 0;
  607. background-color: rgba(35, 35, 0, 0.15);
  608. }
  609. .feed.item.empty.active {
  610. background: #766556;
  611. }
  612. .feed.item.error.active {
  613. background: #766556;
  614. }
  615. .feed.item.empty,
  616. .feed.item.empty > a {
  617. color: #766556;
  618. }
  619. .feed.item.error,
  620. .feed.item.error > a {
  621. color: #766556;
  622. }
  623. .feed.item.empty.active,
  624. .feed.item.error.active,
  625. .feed.item.empty.active > a,
  626. .feed.item.error.active > a {
  627. color: #fff;
  628. }
  629. .aside_feed .tree-folder-items .dropdown-menu::after {
  630. left: 2px;
  631. }
  632. .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
  633. .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
  634. .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
  635. border-radius: 3px;
  636. }
  637. .aside_feed .stick #btn-add {
  638. border-left-color: #fbf9f6;
  639. }
  640. /*=== STRUCTURE */
  641. /*===============*/
  642. /*=== Header */
  643. .header {
  644. background: #fbf9f6;
  645. }
  646. .header .item {
  647. vertical-align: middle;
  648. }
  649. .header .item.title a {
  650. padding: 0.5rem 1rem;
  651. }
  652. .header .item.title a .logo {
  653. filter: invert(80%);
  654. }
  655. .header .item.title a:hover .logo {
  656. filter: invert(80%) opacity(80%);
  657. }
  658. .header .item.search input {
  659. width: 350px;
  660. color: #363330;
  661. border: none;
  662. border-radius: 2px 0 0 2px;
  663. background-color: #f7f2ea;
  664. transition: all 0.15s ease-in-out;
  665. }
  666. .header .item.search input:hover {
  667. background-color: #efe3d3;
  668. }
  669. .header .item.search input:focus {
  670. color: #766556;
  671. background-color: #fff;
  672. }
  673. .header .item.search input:focus ~ .btn,
  674. .header .item.search input:hover ~ .btn {
  675. background-color: #ca7227;
  676. }
  677. .header .item.search input:focus ~ .btn .icon,
  678. .header .item.search input:hover ~ .btn .icon {
  679. filter: brightness(3);
  680. }
  681. .header .item.search .btn {
  682. width: 3rem;
  683. border-radius: 0 2px 2px 0;
  684. background-color: #f7f2ea;
  685. border-left-width: 0;
  686. min-height: 35px;
  687. }
  688. .header .item.search .btn .icon {
  689. filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%);
  690. }
  691. .header .item.search .btn:hover {
  692. background-color: #b7641d;
  693. }
  694. .header .item.search .btn:hover .icon {
  695. filter: brightness(3);
  696. }
  697. .header .item.configure {
  698. text-align: center;
  699. }
  700. .header .item.configure .btn {
  701. padding: 0.25rem 1rem;
  702. background-color: transparent;
  703. }
  704. /*=== Body */
  705. #global {
  706. height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
  707. }
  708. /*=== Prompt (centered) */
  709. main.prompt {
  710. background: #f5f0ec;
  711. border-radius: 5px;
  712. }
  713. /*=== New article notification */
  714. #new-article {
  715. background: #ca7227;
  716. font-size: 1rem;
  717. text-align: center;
  718. }
  719. #new-article > a {
  720. padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
  721. font-weight: bold;
  722. color: #fff;
  723. }
  724. #new-article > a:hover {
  725. text-decoration: none;
  726. background: #b7641d;
  727. }
  728. /*=== Transition indication, e.g. day */
  729. .transition {
  730. padding: 1rem 0 0 1.25rem;
  731. color: #6d655f;
  732. font-size: 0.875rem;
  733. font-weight: 700;
  734. line-height: 3em;
  735. letter-spacing: 1px;
  736. text-transform: uppercase;
  737. }
  738. .transition .name {
  739. padding: 0 1rem 0 1rem;
  740. color: #363330;
  741. font-size: 0.875rem;
  742. position: relative;
  743. left: 0;
  744. text-transform: uppercase;
  745. }
  746. .btn {
  747. border-left-width: 0;
  748. padding: 0.5rem 1rem;
  749. background-color: #f5f0ec;
  750. background-position: center;
  751. background-repeat: no-repeat;
  752. transition: all 0.15s ease-in-out;
  753. }
  754. .btn:hover {
  755. background-color: #e4d8cc;
  756. }
  757. .btn.active {
  758. background-color: #ca7227;
  759. }
  760. /*=== Index menu */
  761. .nav_menu {
  762. text-align: center;
  763. padding: 5px 0;
  764. }
  765. .nav_menu .btn {
  766. border-left-width: 0;
  767. padding: 0.5rem 1rem;
  768. background-color: #fcfaf8;
  769. background-position: center;
  770. background-repeat: no-repeat;
  771. }
  772. .nav_menu .btn:hover {
  773. background-color: #e4d8cc;
  774. }
  775. .nav_menu .stick .btn,
  776. .nav_menu .group .btn {
  777. border-left-width: 0;
  778. padding: 0.5rem 1rem;
  779. background-color: #fcfaf8;
  780. background-position: center;
  781. background-repeat: no-repeat;
  782. transition: all 0.15s ease-in-out;
  783. }
  784. .nav_menu .stick .btn:hover,
  785. .nav_menu .group .btn:hover {
  786. background-color: #e4d8cc;
  787. }
  788. .nav_menu .stick .btn.active,
  789. .nav_menu .group .btn.active {
  790. background-color: #ca7227;
  791. }
  792. .nav_menu .stick .btn.active .icon,
  793. .nav_menu .group .btn.active .icon {
  794. filter: brightness(5);
  795. }
  796. .nav_menu .stick .btn.read_all,
  797. .nav_menu .group .btn.read_all {
  798. padding: 5px 16px;
  799. color: #363330;
  800. background-color: #fcfaf8;
  801. transition: all 0.15s ease-in-out;
  802. }
  803. .nav_menu .stick .btn.read_all:hover,
  804. .nav_menu .group .btn.read_all:hover {
  805. background-color: #e4d8cc;
  806. }
  807. .nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
  808. .nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
  809. border-left-width: 0;
  810. background-image: url(icons/more.svg);
  811. }
  812. .nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
  813. .nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
  814. display: none;
  815. }
  816. .nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
  817. .nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
  818. border-left-width: 0;
  819. }
  820. #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
  821. vertical-align: middle;
  822. border-radius: 3px;
  823. }
  824. /*=== Content of feed articles */
  825. .content, .content_thin {
  826. padding: 20px 10px;
  827. font-size: 1.125rem;
  828. line-height: 1.8rem;
  829. }
  830. .content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
  831. color: #363330;
  832. font-family: "spectral", serif;
  833. font-size: 2rem;
  834. }
  835. .content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
  836. color: #ca7227;
  837. text-decoration: none;
  838. }
  839. .content .author, .content_thin .author {
  840. color: #6d655f;
  841. font-size: 1.125rem;
  842. }
  843. .content p, .content ul, .content_thin p, .content_thin ul {
  844. font-size: 1.125rem;
  845. line-height: 1.8rem;
  846. }
  847. .content .content hr, .content_thin .content hr {
  848. margin: 30px 10px;
  849. background: #e4d8cc;
  850. height: 1px;
  851. border: 0;
  852. box-shadow: 0 2px 5px #ccc;
  853. }
  854. .content pre, .content_thin pre {
  855. background: #221f1d;
  856. color: #fff;
  857. border-radius: 3px;
  858. }
  859. .content pre code, .content_thin pre code {
  860. background: transparent;
  861. color: #fff;
  862. border: none;
  863. }
  864. .content code, .content_thin code {
  865. background: #fcfaf8;
  866. border-color: #f5f0ec;
  867. border-radius: 3px;
  868. }
  869. .content blockquote, .content_thin blockquote {
  870. margin: 0;
  871. padding: 5px 20px;
  872. background: #fcfaf8;
  873. display: block;
  874. color: #363330;
  875. border-top: 1px solid #e4d8cc;
  876. border-bottom: 1px solid #e4d8cc;
  877. }
  878. .content blockquote p, .content_thin blockquote p {
  879. margin: 0;
  880. }
  881. /*=== Notification and actualize notification */
  882. .notification {
  883. padding: 1rem 0;
  884. background: #e4d8cc;
  885. width: 100%;
  886. height: 3rem;
  887. color: #766556;
  888. font-size: 1em;
  889. border: none;
  890. position: fixed;
  891. top: auto;
  892. bottom: 0;
  893. left: 0;
  894. right: 0;
  895. text-align: center;
  896. vertical-align: middle;
  897. }
  898. .notification a {
  899. color: #000;
  900. }
  901. .notification .msg {
  902. display: inline-block;
  903. font-size: 1rem;
  904. }
  905. .notification.good {
  906. background: #10f5b2;
  907. color: #fff;
  908. }
  909. .notification.bad {
  910. background: #f5633e;
  911. color: #fff;
  912. }
  913. .notification .close .icon {
  914. filter: brightness(3);
  915. }
  916. .notification.good .close:hover {
  917. background: #0c7556;
  918. }
  919. .notification.bad .close:hover {
  920. background: #73341f;
  921. }
  922. .notification#actualizeProgress br {
  923. display: none;
  924. }
  925. .notification#actualizeProgress .title {
  926. margin: 0 2rem;
  927. }
  928. /*=== Navigation menu (for articles) */
  929. #nav_entries {
  930. background: #fbf9f6;
  931. }
  932. /*=== Feed articles */
  933. .flux {
  934. background: #fff;
  935. transition: all 0.15s ease-in-out;
  936. }
  937. .flux .flux_header:hover {
  938. background: #fcfaf8;
  939. }
  940. .flux .flux_header:hover:not(.current):hover .item .title {
  941. background: #fcfaf8;
  942. }
  943. .flux.current {
  944. background: #fff;
  945. border-left-color: #ca7227;
  946. }
  947. .flux.current:not(.active) {
  948. background: #fcfaf8;
  949. }
  950. .flux.not_read:not(.current) {
  951. background: #f2f6f8;
  952. }
  953. .flux.not_read:not(.current):hover .item .title {
  954. background: #f2f6f8;
  955. }
  956. .flux.not_read .item .title a {
  957. color: #161a38;
  958. }
  959. .flux.not_read .item.website a {
  960. color: #161a38;
  961. }
  962. .flux.not_read .item .date {
  963. color: rgba(22, 26, 56, 0.5);
  964. }
  965. .flux.favorite {
  966. border-left-color: #ffc300;
  967. transition: all 0.15s ease-in-out;
  968. }
  969. .flux.favorite:not(.current) {
  970. background: #fff6da;
  971. }
  972. .flux.favorite:not(.current):hover .item .title {
  973. background: #fff6da;
  974. }
  975. .flux .website a {
  976. color: #363330;
  977. opacity: 0.75;
  978. }
  979. .flux .flux_header .date,
  980. .flux .flux_content .bottom .date {
  981. color: rgba(54, 51, 48, 0.5);
  982. font-size: 0.85rem;
  983. }
  984. .flux .bottom {
  985. font-size: 1rem;
  986. text-align: center;
  987. }
  988. .flux_header {
  989. font-size: 1rem;
  990. cursor: pointer;
  991. border-top: 1px solid #f5f0ec;
  992. }
  993. .flux_header .title {
  994. font-size: 1rem;
  995. }
  996. /*=== GLOBAL VIEW */
  997. /*================*/
  998. #stream .box.category:not([data-unread="0"]) .box-title .title {
  999. font-weight: bold;
  1000. }
  1001. #stream .box.category .box-title {
  1002. padding: 1.5rem;
  1003. background: none;
  1004. }
  1005. #stream .box.category .box-title a.title {
  1006. color: #766556;
  1007. font-size: 1rem;
  1008. font-weight: normal;
  1009. text-decoration: none;
  1010. text-align: left;
  1011. text-transform: uppercase;
  1012. letter-spacing: 1px;
  1013. }
  1014. #stream .box.category .box-title a.title:not([data-unread="0"])::after {
  1015. margin: -0.5rem 1rem 0 0;
  1016. padding: 0 0.75rem;
  1017. background: #f5f0ec;
  1018. border-radius: 12px;
  1019. position: absolute;
  1020. top: 1.75rem;
  1021. right: 0;
  1022. line-height: 1.5rem;
  1023. text-align: center;
  1024. }
  1025. #stream .box.category .box-title a.title:hover {
  1026. color: #ca7227;
  1027. }
  1028. #stream .box.category .box-content .item.feed a {
  1029. color: #363330;
  1030. font-weight: 400;
  1031. }
  1032. #stream .box.category .box-content .item.feed a:hover {
  1033. color: #ca7227;
  1034. text-decoration: none;
  1035. }
  1036. #overlay {
  1037. background: rgba(0, 0, 0, 0.65);
  1038. }
  1039. #panel {
  1040. top: 3rem;
  1041. right: 3rem;
  1042. bottom: 3rem;
  1043. left: 3rem;
  1044. border-radius: 3px;
  1045. }
  1046. /*=== READER VIEW */
  1047. /*================*/
  1048. #stream.reader .flux {
  1049. background: #f5f0ec;
  1050. color: #363330;
  1051. border: none;
  1052. }
  1053. #stream.reader .flux .flux_content {
  1054. background-color: #fff;
  1055. border: none;
  1056. }
  1057. #stream.reader .flux .flux_content .author {
  1058. color: #ba9;
  1059. }
  1060. /*=== Configuration pages */
  1061. .post {
  1062. font-size: 1rem;
  1063. }
  1064. .post h1, .post h2 {
  1065. color: #363330;
  1066. font-size: 2rem;
  1067. margin-top: 1.75rem;
  1068. font-weight: 300;
  1069. line-height: 1.2em;
  1070. }
  1071. .post h2 {
  1072. font-size: 1.5rem;
  1073. }
  1074. .post a[href="./"] {
  1075. margin: 0;
  1076. padding: 0.75rem 1.5rem;
  1077. background: #fcfaf8;
  1078. display: inline-block;
  1079. color: #766556;
  1080. font-size: 1rem;
  1081. border: 1px solid #e4d8cc;
  1082. border-radius: 5px;
  1083. min-width: 15px;
  1084. line-height: 25px;
  1085. vertical-align: middle;
  1086. cursor: pointer;
  1087. overflow: hidden;
  1088. }
  1089. .post a[href="./"]:hover {
  1090. background: #ca7227;
  1091. color: white;
  1092. border: 1px solid #ca7227;
  1093. text-decoration: none;
  1094. }
  1095. #slider {
  1096. border-left: none;
  1097. box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
  1098. }
  1099. .theme-preview-list .preview-container .properties {
  1100. padding: 1rem;
  1101. background: rgba(0, 0, 0, 0.75);
  1102. color: white;
  1103. border: 0;
  1104. }
  1105. .theme-preview-list .preview-container .properties .page-number {
  1106. right: 1rem;
  1107. top: 1rem;
  1108. }
  1109. /*=== LOGS */
  1110. /*=========*/
  1111. .log-item.log-error {
  1112. background-color: rgba(202, 114, 39, 0.2);
  1113. }
  1114. /*=== STATISTICS */
  1115. /*===============*/
  1116. .stat {
  1117. margin: 10px 0 20px;
  1118. }
  1119. .stat th,
  1120. .stat td,
  1121. .stat tr {
  1122. border: none;
  1123. }
  1124. .stat > table td,
  1125. .stat > table th {
  1126. border-bottom: 1px solid #e4d8cc;
  1127. }
  1128. /*=== MOBILE */
  1129. /*===========*/
  1130. @media (max-width: 840px) {
  1131. .aside {
  1132. transition: all 0.2s ease-in-out;
  1133. }
  1134. .aside.aside_feed {
  1135. padding: 0;
  1136. }
  1137. .aside .tree .tree-folder .tree-folder-items .item a {
  1138. padding: 0.5rem 1rem;
  1139. }
  1140. .aside .toggle_aside,
  1141. #overlay .close,
  1142. .dropdown-menu .toggle_aside,
  1143. #slider .toggle_aside {
  1144. background-color: #ca7227;
  1145. }
  1146. .aside .toggle_aside:hover,
  1147. #overlay .close:hover,
  1148. .dropdown-menu .toggle_aside:hover,
  1149. #slider .toggle_aside:hover {
  1150. background-color: #b7641d;
  1151. }
  1152. .aside .toggle_aside .icon,
  1153. #overlay .close .icon,
  1154. .dropdown-menu .toggle_aside .icon,
  1155. #slider .toggle_aside .icon {
  1156. filter: grayscale(100%) brightness(2.5);
  1157. }
  1158. .header .item.search {
  1159. display: none;
  1160. }
  1161. .header .item.configure {
  1162. position: absolute;
  1163. top: 0;
  1164. right: 0;
  1165. }
  1166. #global {
  1167. height: calc(100% - 8rem);
  1168. }
  1169. #panel {
  1170. top: 0;
  1171. right: 0;
  1172. bottom: 0;
  1173. left: 0;
  1174. }
  1175. .post {
  1176. padding-left: 1rem;
  1177. padding-right: 1rem;
  1178. }
  1179. .nav_menu .btn {
  1180. margin: 0;
  1181. padding: 0.85rem 1.25rem;
  1182. }
  1183. .nav_menu .stick,
  1184. .nav_menu .group {
  1185. margin: 0.5rem 0.5rem;
  1186. }
  1187. .nav_menu .stick .btn,
  1188. .nav_menu .group .btn {
  1189. margin: 0;
  1190. padding: 0.85rem 1.25rem;
  1191. }
  1192. .nav_menu .stick .btn.read_all,
  1193. .nav_menu .group .btn.read_all {
  1194. padding: 0.85rem 1.25rem;
  1195. }
  1196. .nav_menu .search .input {
  1197. max-width: 97%;
  1198. width: 90px;
  1199. }
  1200. .nav_menu .search .input:focus {
  1201. width: 400px;
  1202. }
  1203. #nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
  1204. background-image: none;
  1205. }
  1206. #stream .flux .flux_header {
  1207. padding: 0.5rem 0;
  1208. }
  1209. .dropdown-target:target ~ .dropdown-toggle::after {
  1210. background-color: #fcfaf8;
  1211. border-top: 1px solid #f5f0ec;
  1212. border-left: 1px solid #f5f0ec;
  1213. right: 21px;
  1214. bottom: -14px;
  1215. }
  1216. .dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
  1217. bottom: -17px;
  1218. }
  1219. .transition {
  1220. text-align: center;
  1221. padding: 1rem 0;
  1222. }
  1223. .transition .name {
  1224. padding: 0;
  1225. display: block;
  1226. width: 100%;
  1227. line-height: 1.5rem;
  1228. margin-bottom: 1rem;
  1229. }
  1230. #nav_entries button {
  1231. height: 4.5rem;
  1232. }
  1233. .notification {
  1234. border-radius: 0;
  1235. }
  1236. .notification a.close {
  1237. background: transparent;
  1238. display: block;
  1239. left: 0;
  1240. }
  1241. .notification a.close:hover {
  1242. opacity: 0.5;
  1243. }
  1244. .notification a.close .icon {
  1245. display: none;
  1246. }
  1247. }
  1248. /*=== GENERAL */
  1249. /*============*/
  1250. html, body {
  1251. background: #f5f0ec;
  1252. color: #161a38;
  1253. font-family: "lato", "Helvetica", "Arial", sans-serif;
  1254. font-size: 0.875rem;
  1255. }
  1256. body.formLogin,
  1257. body.register {
  1258. background: #fbf9f6;
  1259. }
  1260. /*=== Links */
  1261. a, button.as-link {
  1262. outline: none;
  1263. color: #ca7227;
  1264. }
  1265. /*# sourceMappingURL=ansum.css.map */