common.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378
  1. /* Layout */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. html {
  8. -webkit-text-size-adjust: 100%;
  9. text-size-adjust: 100%;
  10. }
  11. body {
  12. font-family: var(--font-family);
  13. text-rendering: optimizeLegibility;
  14. color: var(--body-color);
  15. background: var(--body-background);
  16. }
  17. hr {
  18. border: 0;
  19. height: 0;
  20. border-top: 1px dotted var(--hr-border-color);
  21. padding-bottom: 10px;
  22. }
  23. h1, h2, h3 {
  24. color: var(--title-color);
  25. }
  26. main {
  27. padding-left: 3px;
  28. padding-right: 3px;
  29. margin-bottom: 30px;
  30. }
  31. a {
  32. color: var(--link-color);
  33. }
  34. a:focus {
  35. outline: 0;
  36. color: var(--link-focus-color);
  37. text-decoration: none;
  38. outline: 1px dotted #aaa;
  39. }
  40. a:hover {
  41. color: var(--link-hover-color);
  42. text-decoration: none;
  43. }
  44. .sr-only {
  45. border: 0 !important;
  46. clip: rect(1px, 1px, 1px, 1px) !important;
  47. clip-path: inset(50%) !important;
  48. height: 1px !important;
  49. overflow: hidden !important;
  50. margin: -1px !important;
  51. padding: 0 !important;
  52. position: absolute !important;
  53. width: 1px !important;
  54. white-space: nowrap !important;
  55. }
  56. .skip-to-content-link {
  57. --padding-size: 8px;
  58. --border-size: 1px;
  59. background-color: var(--category-background-color);
  60. color: var(--category-color);
  61. border: var(--border-size) solid var(--category-border-color);
  62. border-radius: 5px;
  63. inset-inline-start: 50%;
  64. padding: var(--padding-size);
  65. position: absolute;
  66. transition: translate 0.3s;
  67. translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
  68. }
  69. .skip-to-content-link:focus {
  70. translate: -50% 0;
  71. }
  72. /* Smoother pages transition */
  73. @media not all and (prefers-reduced-motion: reduce) {
  74. @view-transition {
  75. navigation: auto;
  76. }
  77. }
  78. @media (prefers-reduced-motion: reduce) {
  79. @view-transition {
  80. navigation: none;
  81. }
  82. }
  83. /* Header and main menu */
  84. .header {
  85. margin-top: 10px;
  86. margin-bottom: 20px;
  87. }
  88. .header nav {
  89. display: flex;
  90. align-items: stretch;
  91. flex-direction: column;
  92. }
  93. .header nav .logo svg {
  94. padding: 5px;
  95. inline-size: 24px;
  96. block-size: 24px;
  97. }
  98. .header nav .logo[aria-expanded="true"] svg {
  99. rotate: 180deg;
  100. }
  101. .header ul.js-menu-show {
  102. display: initial;
  103. }
  104. .header ul:not(.js-menu-show) {
  105. display: none;
  106. }
  107. .header li {
  108. cursor: pointer;
  109. padding-left: 10px;
  110. line-height: 2.1em;
  111. font-size: 1.2em;
  112. border-bottom: 1px dotted var(--header-list-border-color);
  113. }
  114. .header li a:hover {
  115. color: #888;
  116. }
  117. .header :is(a, summary) {
  118. font-size: 0.9em;
  119. color: var(--header-link-color);
  120. text-decoration: none;
  121. border: none;
  122. font-weight: 400;
  123. }
  124. .header .active a {
  125. color: var(--header-active-link-color);
  126. /* Note: Firefox on Windows does not show the link as bold if the value is under 600 */
  127. font-weight: 600;
  128. }
  129. .header a:focus {
  130. color: var(--header-link-focus-color);
  131. }
  132. /* Page header and footer*/
  133. .page-header {
  134. padding-inline: 3px;
  135. margin-bottom: 10px;
  136. }
  137. .page-footer {
  138. margin-bottom: 10px;
  139. }
  140. .page-header h1 {
  141. font-weight: 500;
  142. border-bottom: 1px dotted var(--page-header-title-border-color);
  143. font-size: 1.5rem;
  144. }
  145. .page-header h1 a {
  146. text-decoration: none;
  147. color: var(--page-header-title-color);
  148. }
  149. .page-header h1 a:hover,
  150. .page-header h1 a:focus {
  151. color: #666;
  152. }
  153. .page-header li,
  154. .page-footer li {
  155. list-style-type: none;
  156. line-height: 1.8em;
  157. white-space: nowrap;
  158. }
  159. #header-menu .icon,
  160. .page-header ul a .icon {
  161. margin-bottom: 2px;
  162. }
  163. .page-header-action-form {
  164. display: inline-flex;
  165. }
  166. :is(.page-button, .page-link) {
  167. color: var(--link-color);
  168. border: none;
  169. background-color: transparent;
  170. font-size: 1rem;
  171. cursor: pointer;
  172. &:is(:hover, :focus) {
  173. color: var(--link-hover-color);
  174. }
  175. }
  176. .page-button:active {
  177. translate: 1px 1px;
  178. }
  179. /* Logo */
  180. .logo {
  181. text-align: center;
  182. display: flex;
  183. justify-content: center;
  184. }
  185. .logo a {
  186. color: var(--logo-color);
  187. letter-spacing: 1px;
  188. display: flex;
  189. align-items: center;
  190. }
  191. .logo a:hover {
  192. color: #339966;
  193. }
  194. .logo a span {
  195. color: #339966;
  196. }
  197. .logo a:hover span {
  198. color: var(--logo-hover-color-span);
  199. }
  200. /* PWA prompt */
  201. #prompt-home-screen {
  202. display: none;
  203. position: fixed;
  204. bottom: 0;
  205. right: 0;
  206. width: 100%;
  207. text-align: center;
  208. background: #000;
  209. opacity: 85%;
  210. }
  211. #btn-add-to-home-screen {
  212. text-decoration: none;
  213. height: 30px;
  214. color: #fff;
  215. background-color: transparent;
  216. border: 0;
  217. }
  218. #btn-add-to-home-screen:hover {
  219. color: red;
  220. }
  221. /* Notification - "Toast" */
  222. #toast-wrapper {
  223. visibility: hidden;
  224. opacity: 0;
  225. position: fixed;
  226. left: 0;
  227. bottom: 10%;
  228. color: #fff;
  229. width: 100%;
  230. text-align: center;
  231. }
  232. #toast-msg {
  233. background-color: rgba(0,0,0,0.7);
  234. padding-bottom: 4px;
  235. padding-left: 4px;
  236. padding-right: 5px;
  237. border-radius: 5px;
  238. }
  239. .toast-animate {
  240. animation: toastKeyFrames 2s;
  241. }
  242. @keyframes toastKeyFrames {
  243. 0% {visibility: hidden; opacity: 0;}
  244. 25% {visibility: visible; opacity: 1; z-index: 9999}
  245. 50% {visibility: visible; opacity: 1; z-index: 9999}
  246. 75% {visibility: visible; opacity: 1; z-index: 9999}
  247. 100% {visibility: hidden; opacity: 0; z-index: 0}
  248. }
  249. /* Hide the logo when there is not enough space to display menus when using languages more verbose than English */
  250. @media (min-width: 620px) and (max-width: 850px) {
  251. .logo {
  252. display: none;
  253. }
  254. }
  255. @media (min-width: 850px) {
  256. .logo {
  257. padding-right: 8px;
  258. }
  259. }
  260. @media (min-width: 620px) {
  261. body {
  262. margin: auto;
  263. max-width: 900px; /* Wide enough to display the logo and the menu one a single row for any languages */
  264. }
  265. .header {
  266. padding-left: 3px;
  267. }
  268. .header li {
  269. display: inline-block;
  270. padding: 0 5px 0 0;
  271. line-height: normal;
  272. border: none;
  273. font-size: 1.0em;
  274. }
  275. .header nav {
  276. flex-direction: row;
  277. }
  278. .header .logo svg {
  279. display: none;
  280. }
  281. .header ul:not(.js-menu-show), .header ul.js-menu-show {
  282. display: revert;
  283. }
  284. .header :is(a, summary):hover {
  285. color: var(--header-link-hover-color);
  286. }
  287. .page-header li,
  288. .page-footer li {
  289. display: inline;
  290. padding-right: 15px;
  291. }
  292. .pagination-backward,
  293. .pagination-forward {
  294. display: flex;
  295. }
  296. }
  297. /* Tables */
  298. table {
  299. width: 100%;
  300. border-collapse: collapse;
  301. }
  302. table, th, td {
  303. border: 1px solid var(--table-border-color);
  304. }
  305. th, td {
  306. padding: 5px;
  307. text-align: left;
  308. }
  309. td {
  310. vertical-align: top;
  311. }
  312. th {
  313. background: var(--table-th-background);
  314. color: var(--table-th-color);
  315. font-weight: 400;
  316. }
  317. tr:hover {
  318. color: var(--table-tr-hover-color);
  319. background-color: var(--table-tr-hover-background-color);
  320. }
  321. .column-40 {
  322. width: 40%;
  323. }
  324. .column-25 {
  325. width: 25%;
  326. }
  327. .column-20 {
  328. width: 20%;
  329. }
  330. /* Forms */
  331. fieldset {
  332. border: 1px dotted #ddd;
  333. padding: 8px;
  334. margin-bottom: 20px;
  335. }
  336. legend {
  337. font-weight: 500;
  338. padding-left: 3px;
  339. padding-right: 3px;
  340. }
  341. label {
  342. cursor: pointer;
  343. display: block;
  344. }
  345. .radio-group {
  346. line-height: 1.9em;
  347. }
  348. div.radio-group label {
  349. display: inline-block;
  350. }
  351. select {
  352. margin-bottom: 15px;
  353. }
  354. input[type="search"],
  355. input[type="url"],
  356. input[type="password"],
  357. input[type="text"],
  358. input[type="number"] {
  359. color: var(--input-color);
  360. background: var(--input-background);
  361. border: var(--input-border);
  362. padding: 3px;
  363. line-height: 20px;
  364. width: 250px;
  365. font-size: 99%;
  366. margin-top: 5px;
  367. margin-bottom: 10px;;
  368. appearance: none;
  369. }
  370. input[type="search"]:focus,
  371. input[type="url"]:focus,
  372. input[type="password"]:focus,
  373. input[type="text"]:focus,
  374. input[type="number"]:focus {
  375. color: var(--input-focus-color);
  376. border-color: var(--input-focus-border-color);
  377. outline: 0;
  378. box-shadow: var(--input-focus-box-shadow);
  379. }
  380. #form-entries-per-page {
  381. max-width: 80px;
  382. }
  383. input[type="checkbox"] {
  384. margin-top: 10px;
  385. margin-bottom: 10px;
  386. }
  387. .search-form {
  388. display: flex;
  389. flex-direction: column;
  390. align-items: flex-start;
  391. gap: 6px;
  392. }
  393. .search-input-row {
  394. display: flex;
  395. align-items: center;
  396. gap: 12px;
  397. }
  398. .search-input-row input[type="search"] {
  399. margin: 0;
  400. }
  401. .search-input-row .button {
  402. margin: 0;
  403. }
  404. .search-filter {
  405. display: inline-flex;
  406. align-items: center;
  407. gap: 6px;
  408. margin: 0;
  409. }
  410. .search-filter input[type="checkbox"] {
  411. margin: 0;
  412. }
  413. textarea {
  414. width: 350px;
  415. color: var(--input-color);
  416. background: var(--input-background);
  417. border: var(--input-border);
  418. padding: 3px;
  419. margin-bottom: 10px;
  420. margin-top: 5px;
  421. appearance: none;
  422. }
  423. textarea:focus {
  424. color: var(--input-focus-color);
  425. border-color: var(--input-focus-border-color);
  426. outline: 0;
  427. box-shadow: var(--input-focus-box-shadow);
  428. }
  429. input::placeholder {
  430. color: var(--input-placeholder-color);
  431. padding-top: 2px;
  432. }
  433. .form-label-row {
  434. display: flex;
  435. }
  436. .form-help {
  437. font-size: 0.9em;
  438. color: brown;
  439. margin-bottom: 15px;
  440. }
  441. .form-section {
  442. border-left: 2px dotted #ddd;
  443. padding-left: 20px;
  444. margin-left: 10px;
  445. }
  446. details > summary {
  447. outline: none;
  448. cursor: pointer;
  449. }
  450. .details-content {
  451. margin-top: 15px;
  452. }
  453. /* Buttons */
  454. a.button {
  455. text-decoration: none;
  456. }
  457. .button {
  458. display: inline-block;
  459. appearance: none;
  460. font-size: 1.1em;
  461. cursor: pointer;
  462. padding: 3px 10px;
  463. border: 1px solid;
  464. border-radius: unset;
  465. }
  466. .button-primary {
  467. border-color: var(--button-primary-border-color);
  468. background: var(--button-primary-background);
  469. color: var(--button-primary-color);
  470. }
  471. a.button-primary:hover,
  472. a.button-primary:focus,
  473. .button-primary:hover,
  474. .button-primary:focus {
  475. border-color: var(--button-primary-focus-border-color);
  476. background: var(--button-primary-focus-background);
  477. color: var(--button-primary-color);
  478. }
  479. .button-danger {
  480. border-color: #b0281a;
  481. background: #d14836;
  482. color: #fff;
  483. }
  484. .button-danger:hover,
  485. .button-danger:focus {
  486. color: #fff;
  487. background: #c53727;
  488. }
  489. .button:disabled {
  490. color: #ccc;
  491. background: #f7f7f7;
  492. border-color: #ccc;
  493. }
  494. .buttons {
  495. margin-top: 10px;
  496. margin-bottom: 20px;
  497. }
  498. fieldset .buttons {
  499. margin-bottom: 0;
  500. }
  501. /* Alerts */
  502. .alert {
  503. padding: 8px 35px 8px 14px;
  504. margin-bottom: 20px;
  505. color: var(--alert-color);
  506. background-color: var(--alert-background-color);
  507. border: 1px solid var(--alert-border-color);
  508. border-radius: 4px;
  509. overflow: auto;
  510. }
  511. .alert h3 {
  512. margin-top: 0;
  513. margin-bottom: 15px;
  514. }
  515. .alert-success {
  516. color: var(--alert-success-color);
  517. background-color: var(--alert-success-background-color);
  518. border-color: var(--alert-success-border-color);
  519. }
  520. .alert-error {
  521. color: var(--alert-error-color);
  522. background-color: var(--alert-error-background-color);
  523. border-color: var(--alert-error-border-color);
  524. }
  525. .alert-error h3,
  526. .alert-error a {
  527. color: var(--alert-error-color);
  528. }
  529. .alert-info {
  530. color: var(--alert-info-color);
  531. background-color: var(--alert-info-background-color);
  532. border-color: var(--alert-info-border-color);
  533. }
  534. /* Panel */
  535. .panel {
  536. color: var(--panel-color);
  537. background-color: var(--panel-background);
  538. border: 1px solid var(--panel-border-color);
  539. border-radius: 5px;
  540. padding: 10px;
  541. margin-bottom: 15px;
  542. }
  543. .panel h3 {
  544. font-weight: 500;
  545. margin-top: 0;
  546. margin-bottom: 20px;
  547. }
  548. .panel ul {
  549. margin-left: 30px;
  550. }
  551. /* Modals */
  552. template {
  553. display: none;
  554. }
  555. dialog {
  556. max-height: none;
  557. height: 100vh;
  558. border: none;
  559. padding: 1%;
  560. }
  561. .btn-close-modal {
  562. position: absolute;
  563. top: 0;
  564. right: 0;
  565. font-size: 1.7em;
  566. color: #ccc;
  567. padding:0 .2em;
  568. margin: 10px;
  569. text-decoration: none;
  570. background-color: transparent;
  571. border: none;
  572. }
  573. .btn-close-modal:hover {
  574. color: #999;
  575. }
  576. /* Keyboard Shortcuts */
  577. .keyboard-shortcuts li {
  578. margin-left: 25px;
  579. list-style-type: square;
  580. color: var(--keyboard-shortcuts-li-color);
  581. font-size: 0.95em;
  582. line-height: 1.45em;
  583. }
  584. .keyboard-shortcuts p {
  585. line-height: 1.9em;
  586. }
  587. /* Login form */
  588. .login-form {
  589. margin: 50px auto 0;
  590. max-width: 300px;
  591. }
  592. .webauthn {
  593. margin-bottom: 20px;
  594. }
  595. /* Counters */
  596. .unread-counter-wrapper,
  597. .error-feeds-counter-wrapper {
  598. font-size: 0.9em;
  599. font-weight: 300;
  600. color: var(--counter-color);
  601. }
  602. /* Category label */
  603. .category {
  604. font-size: 0.75em;
  605. background-color: var(--category-background-color);
  606. border: 1px solid var(--category-border-color);
  607. border-radius: 5px;
  608. margin-left: 0.25em;
  609. padding: 1px 0.4em 1px 0.4em;
  610. white-space: nowrap;
  611. color: var(--category-color);
  612. }
  613. .category a {
  614. color: var(--category-link-color);
  615. text-decoration: none;
  616. }
  617. .category a:hover,
  618. .category a:focus {
  619. color: var(--category-link-hover-color);
  620. }
  621. .category-item-total {
  622. color: var(--body-color);
  623. }
  624. /* Pagination */
  625. .pagination {
  626. font-size: 1.1em;
  627. display: flex;
  628. align-items: center;
  629. justify-content: space-between;
  630. }
  631. .pagination-top {
  632. padding-bottom: 8px;
  633. }
  634. .pagination-bottom {
  635. padding-top: 8px;
  636. }
  637. .pagination-entry-top {
  638. padding-top: 8px;
  639. }
  640. .pagination-entry-bottom {
  641. border-top: 1px dotted var(--pagination-border-color);
  642. margin-bottom: 15px;
  643. margin-top: 50px;
  644. padding-top: 8px;
  645. }
  646. .pagination > div.pagination-backward > div {
  647. padding-right: 15px;
  648. }
  649. .pagination > div.pagination-forward > div {
  650. padding-left: 15px;
  651. }
  652. .pagination-next, .pagination-last {
  653. text-align: right;
  654. }
  655. .pagination-next:after {
  656. content: " ›";
  657. }
  658. .pagination-last:after {
  659. content: " »";
  660. }
  661. .pagination-prev:before {
  662. content: "‹ ";
  663. }
  664. .pagination-first:before {
  665. content: "« ";
  666. }
  667. .pagination a {
  668. color: var(--pagination-link-color);
  669. }
  670. .pagination a:hover,
  671. .pagination a:focus {
  672. text-decoration: none;
  673. }
  674. /* List view */
  675. .item {
  676. border: 1px dotted var(--item-border-color);
  677. margin-bottom: 20px;
  678. padding: var(--item-padding);
  679. overflow: hidden;
  680. }
  681. .item.current-item {
  682. border: var(--current-item-border-width) solid var(--current-item-border-color);
  683. padding: 3px;
  684. box-shadow: var(--current-item-box-shadow);
  685. }
  686. .item.current-item:focus {
  687. outline: none;
  688. }
  689. .item-header {
  690. font-size: 1rem;
  691. }
  692. .item-header span {
  693. font-weight: normal;
  694. display: inline-block;
  695. }
  696. .item-title {
  697. font-size: 1rem;
  698. margin: 0;
  699. display: inline;
  700. }
  701. .item-title a {
  702. text-decoration: none;
  703. font-weight: var(--item-title-link-font-weight);
  704. font-size: inherit;
  705. }
  706. .feed-entries-counter {
  707. display: inline-flex;
  708. gap: 2px;
  709. align-items: center;
  710. }
  711. .item-status-read .item-title a {
  712. color: var(--item-status-read-title-link-color);
  713. }
  714. .item-meta {
  715. color: var(--item-meta-focus-color);
  716. font-size: 0.8em;
  717. }
  718. .item-meta a {
  719. color: #777;
  720. text-decoration: none;
  721. }
  722. .item-meta :is(a:is(:focus, :hover), button:is(:focus, :hover)) {
  723. color: #333;
  724. }
  725. .item-meta ul {
  726. margin-top: 5px;
  727. }
  728. .item-meta li {
  729. display: inline-block;
  730. }
  731. .item-meta-info {
  732. font-size: 0.85em;
  733. }
  734. .item-meta-info li:not(:last-child):after {
  735. content: "|";
  736. color: var(--item-meta-li-color);
  737. }
  738. .item-meta-icons li {
  739. margin-right: 8px;
  740. margin-top: 4px;
  741. }
  742. .item-meta-icons li:last-child {
  743. margin-right: 0;
  744. }
  745. .item-meta-icons li > :is(a, button) {
  746. color: #777;
  747. text-decoration: none;
  748. font-size: 0.8rem;
  749. border: none;
  750. background-color: transparent;
  751. cursor: pointer;
  752. }
  753. .item-meta-icons a span {
  754. text-decoration: underline;
  755. }
  756. .item-meta-icons button:active {
  757. translate: 1px 1px;
  758. }
  759. .items {
  760. overflow-x: hidden;
  761. touch-action: pan-y;
  762. }
  763. .hide-read-items .item-status-read:not(.current-item) {
  764. display: none;
  765. }
  766. .entry-swipe {
  767. transition-property: transform;
  768. transition-duration: 0s;
  769. transition-timing-function: ease-out;
  770. }
  771. /* Feeds list */
  772. article.feed-parsing-error {
  773. background-color: var(--feed-parsing-error-background-color);
  774. border-style: var(--feed-parsing-error-border-style);
  775. border-color: var(--feed-parsing-error-border-color);
  776. }
  777. article.feed-has-unread {
  778. background-color: var(--feed-has-unread-background-color);
  779. border-style: var(--feed-has-unread-border-style);
  780. border-color: var(--feed-has-unread-border-color);
  781. }
  782. .parsing-error {
  783. font-size: 0.85em;
  784. margin-top: 2px;
  785. color: var(--parsing-error-color);
  786. }
  787. .parsing-error-count {
  788. cursor: pointer;
  789. }
  790. /* Categories list */
  791. article.category-has-unread {
  792. background-color: var(--category-has-unread-background-color);
  793. border-style: var(--category-has-unread-border-style);
  794. border-color: var(--category-has-unread-border-color);
  795. }
  796. /* Icons */
  797. .icon,
  798. .icon-label {
  799. vertical-align: text-bottom;
  800. display: inline-block;
  801. margin-right: 2px;
  802. }
  803. .icon {
  804. width: 16px;
  805. height: 16px;
  806. }
  807. /* Entry view */
  808. .entry header {
  809. padding-bottom: 5px;
  810. padding-inline: 5px;
  811. border-bottom: 1px dotted var(--entry-header-border-color);
  812. }
  813. .entry header h1 {
  814. font-size: 2.0em;
  815. line-height: 1.25em;
  816. margin: 5px 0 30px 0;
  817. overflow-wrap: break-word;
  818. }
  819. .entry header h1 a {
  820. text-decoration: none;
  821. color: var(--entry-header-title-link-color);
  822. }
  823. .entry header h1 a:hover,
  824. .entry header h1 a:focus {
  825. color: #666;
  826. }
  827. .entry-actions {
  828. margin-bottom: 20px;
  829. }
  830. .entry-actions a span {
  831. text-decoration: underline;
  832. }
  833. .entry-actions li {
  834. display: inline-block;
  835. margin-right: 15px;
  836. line-height: 1.7em;
  837. }
  838. .entry-actions .icon-label {
  839. vertical-align: middle;
  840. }
  841. .entry-meta {
  842. font-size: 0.95em;
  843. margin: 0 0 20px;
  844. color: #666;
  845. overflow-wrap: break-word;
  846. }
  847. .entry-tags {
  848. margin-top: 20px;
  849. margin-bottom: 20px;
  850. }
  851. .entry-tags strong {
  852. font-weight: 600;
  853. }
  854. .entry-tags-list {
  855. display: inline;
  856. margin: 0;
  857. padding: 0;
  858. }
  859. .entry-tags-list li {
  860. display: inline-block;
  861. }
  862. .entry-tags-list li::after {
  863. content: ", ";
  864. }
  865. .entry-tags-list li:last-child::after {
  866. content: "";
  867. }
  868. .entry-additional-tags {
  869. font-size: 0.8em;
  870. margin-top: 10px;
  871. }
  872. .entry-website img {
  873. vertical-align: top;
  874. }
  875. .entry-website a {
  876. color: #666;
  877. vertical-align: top;
  878. text-decoration: none;
  879. }
  880. .entry-website a:hover,
  881. .entry-website a:focus {
  882. text-decoration: underline;
  883. }
  884. .entry-date {
  885. font-size: 0.65em;
  886. font-style: italic;
  887. color: #555;
  888. }
  889. .entry-content {
  890. padding-top: 15px;
  891. font-size: 1.2em;
  892. font-weight: var(--entry-content-font-weight);
  893. font-family: var(--entry-content-font-family);
  894. color: var(--entry-content-color);
  895. line-height: 1.4em;
  896. overflow-wrap: break-word;
  897. }
  898. .entry-content h1, h2, h3, h4, h5, h6 {
  899. margin-top: 15px;
  900. margin-bottom: 10px;
  901. }
  902. .entry-content iframe,
  903. .entry-content video,
  904. .entry-content img {
  905. max-width: 100%;
  906. }
  907. .entry-content img {
  908. height: auto;
  909. }
  910. .entry-content figure {
  911. margin-top: 15px;
  912. margin-bottom: 15px;
  913. }
  914. .entry-content figure img {
  915. border: 1px solid #000;
  916. }
  917. .entry-content figcaption {
  918. font-size: 0.75em;
  919. text-transform: uppercase;
  920. color: #777;
  921. }
  922. .entry-content p {
  923. margin-top: 10px;
  924. margin-bottom: 15px;
  925. }
  926. .entry-content a {
  927. overflow-wrap: break-word;
  928. }
  929. .entry-content a:visited {
  930. color: var(--link-visited-color);
  931. }
  932. .entry-content dt {
  933. font-weight: 500;
  934. margin-top: 15px;
  935. color: #555;
  936. }
  937. .entry-content dd {
  938. margin-left: 15px;
  939. margin-top: 5px;
  940. padding-left: 20px;
  941. border-left: 3px solid #ddd;
  942. color: #777;
  943. font-weight: 300;
  944. line-height: 1.4em;
  945. }
  946. .entry-content blockquote {
  947. border-left: 4px solid #ddd;
  948. padding-left: 25px;
  949. margin-left: 20px;
  950. margin-top: 20px;
  951. margin-bottom: 20px;
  952. line-height: 1.4em;
  953. font-family: var(--entry-content-quote-font-family);
  954. }
  955. .entry-content q {
  956. color: var(--entry-content-quote-color);
  957. font-family: var(--entry-content-quote-font-family);
  958. font-style: italic;
  959. }
  960. .entry-content q:before {
  961. content: "“";
  962. }
  963. .entry-content q:after {
  964. content: "”";
  965. }
  966. .entry-content pre {
  967. padding: 5px;
  968. overflow: auto;
  969. overflow-wrap: initial;
  970. border-width: 1px;
  971. border-style: solid;
  972. }
  973. .entry-content pre,
  974. .entry-content code {
  975. color: var(--entry-content-code-color);
  976. background: var(--entry-content-code-background);
  977. border-color: var(--entry-content-code-border-color);
  978. }
  979. .entry-content table {
  980. max-width: 100%;
  981. }
  982. .entry-content ul,
  983. .entry-content ol {
  984. margin-left: 30px;
  985. margin-top: 15px;
  986. margin-bottom: 15px;
  987. }
  988. .entry-content li ul,
  989. .entry-content li ol {
  990. margin-top: 0;
  991. margin-bottom: 0;
  992. }
  993. .entry-content ul {
  994. list-style-type: square;
  995. }
  996. .entry-content strong {
  997. font-weight: 600;
  998. }
  999. .entry-content sub,
  1000. .entry-content sup {
  1001. font-size: 75%;
  1002. line-height: 0;
  1003. position: relative;
  1004. vertical-align: baseline;
  1005. }
  1006. .entry-content sub {
  1007. bottom: -0.25em;
  1008. }
  1009. .entry-content sup {
  1010. top: -0.5em;
  1011. }
  1012. .entry-content abbr {
  1013. cursor: pointer;
  1014. text-decoration: none;
  1015. border-bottom: 1px dashed var(--entry-content-abbr-border-color);
  1016. }
  1017. .entry-content aside {
  1018. font-size: 0.9em;
  1019. padding: 1ch;
  1020. margin-bottom: 15px;
  1021. font-style: italic;
  1022. border: dotted var(--entry-content-aside-border-color) 2px;
  1023. }
  1024. details.entry-enclosures {
  1025. margin-top: 25px;
  1026. }
  1027. .entry-enclosures summary {
  1028. font-weight: 500;
  1029. font-size: 1.2em;
  1030. }
  1031. .entry-enclosure {
  1032. border: 1px dotted var(--entry-enclosure-border-color);
  1033. padding: 5px;
  1034. margin-top: 10px;
  1035. max-width: 100%;
  1036. }
  1037. .entry-enclosure-download {
  1038. font-size: 0.85em;
  1039. overflow-wrap: break-word;
  1040. }
  1041. .enclosure-video video,
  1042. .enclosure-image img {
  1043. max-width: 100%;
  1044. }
  1045. .entry-external-link {
  1046. font-size: 0.8em;
  1047. margin-top: 10px;
  1048. margin-bottom: 10px;
  1049. word-wrap: break-word;
  1050. }
  1051. /* Confirmation */
  1052. .confirm {
  1053. font-weight: 500;
  1054. color: #ed2d04;
  1055. }
  1056. .confirm button {
  1057. color: #ed2d04;
  1058. border: none;
  1059. background-color: transparent;
  1060. cursor: pointer;
  1061. font-size: inherit;
  1062. }
  1063. .loading {
  1064. font-style: italic;
  1065. }
  1066. /* Bookmarlet */
  1067. .bookmarklet {
  1068. border: 1px dashed #ccc;
  1069. border-radius: 5px;
  1070. padding: 15px;
  1071. margin: 15px;
  1072. text-align: center;
  1073. }
  1074. .bookmarklet a {
  1075. font-weight: 600;
  1076. text-decoration: none;
  1077. font-size: 1.2em;
  1078. }
  1079. .disabled {
  1080. opacity: 20%;
  1081. }
  1082. audio, video {
  1083. width: 100%;
  1084. }
  1085. .media-controls{
  1086. font-size: .9em;
  1087. display: flex;
  1088. flex-wrap: wrap;
  1089. }
  1090. .media-controls .media-control-label{
  1091. line-height: 1em;
  1092. }
  1093. .media-controls>div{
  1094. display: flex;
  1095. flex-wrap: nowrap;
  1096. justify-content:center;
  1097. min-width: 50%;
  1098. align-items: center;
  1099. }
  1100. .media-controls>div>*{
  1101. padding-left:12px;
  1102. }
  1103. .media-controls>div>*:first-child{
  1104. padding-left:0;
  1105. }
  1106. .media-controls span.speed-indicator{
  1107. /*monospace to ensure constant width even when value change. JS ensure the value is always on 4 characters (in most cases)
  1108. This reduce ui flickering due to element moving around a bit
  1109. */
  1110. font-family: monospace;
  1111. }
  1112. .integration-form summary {
  1113. font-weight: 700;
  1114. }
  1115. .integration-form details {
  1116. margin-bottom: 15px;
  1117. }
  1118. .integration-form details .form-section {
  1119. margin-top: 15px;
  1120. }
  1121. .hidden {
  1122. display: none;
  1123. }
  1124. footer {
  1125. margin: 1em auto;
  1126. }
  1127. footer .elevator {
  1128. display: block;
  1129. width: fit-content;
  1130. margin: 0 auto;
  1131. }
  1132. .pagination-top .elevator,
  1133. .pagination-entry-top .elevator {
  1134. display: none;
  1135. }