template.rtl.css 21 KB

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