origine-compact.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. @charset "UTF-8";
  2. /*=== GENERAL */
  3. /*============*/
  4. :root {
  5. --frss-padding-top-bottom: 0.125rem;
  6. }
  7. /*=== COMPONENTS */
  8. /*===============*/
  9. /*=== Forms */
  10. .form-group.form-actions .btn {
  11. margin: 0 10px;
  12. }
  13. .form-group .group-controls {
  14. min-height: 25px;
  15. padding: 8px 0;
  16. }
  17. /*=== Buttons */
  18. .btn {
  19. margin: 0;
  20. padding: 5px 10px;
  21. min-height: 32px;
  22. line-height: 1.4;
  23. }
  24. a.btn,
  25. .stick .btn {
  26. min-height: 20px;
  27. line-height: 1.4;
  28. }
  29. /*=== Navigation */
  30. /*=== Horizontal-list */
  31. .horizontal-list {
  32. font-size: 0.9rem;
  33. }
  34. /*=== Dropdown */
  35. /*=== Alerts */
  36. /*=== Pagination */
  37. /*=== Boxes */
  38. /*=== Tree */
  39. /*=== STRUCTURE */
  40. /*===============*/
  41. /*=== Header */
  42. .header {
  43. /* search bar and config button height = 2.1rem */
  44. height: calc(2.1rem + 2 * var(--frss-padding-top-bottom));
  45. }
  46. .header > .item.title a {
  47. padding: 0 1rem;
  48. }
  49. .header > .item.title .logo {
  50. /* logo is smaller than needed */
  51. height: 1.5rem;
  52. }
  53. /*=== Body */
  54. #global {
  55. height: calc(100vh - (calc(2.1rem + 2 * var(--frss-padding-top-bottom))))
  56. }
  57. /*=== Aside main page (categories) */
  58. .aside.aside_feed .category .title:not([data-unread="0"])::after,
  59. .global .box.category .title:not([data-unread="0"])::after {
  60. font-size: 0.8rem;
  61. }
  62. #stream.global .feed .item-title:not([data-unread="0"])::after {
  63. margin-top: 0.125rem;
  64. }
  65. .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
  66. font-size: 0.7rem;
  67. }
  68. /*=== Day indication */
  69. .day {
  70. font-size: 0.9rem;
  71. line-height: 2;
  72. }
  73. .day .name {
  74. font-size: 1em;
  75. opacity: 0.6;
  76. }
  77. /*=== Index menu */
  78. /*=== Feed articles */
  79. .flux .item.thumbnail {
  80. padding: 5px;
  81. height: 50px;
  82. }
  83. .flux .item.thumbnail.small {
  84. height: 30px;
  85. }
  86. .flux .item.thumbnail.portrait {
  87. width: 38px;
  88. }
  89. .flux .item.thumbnail.square {
  90. width: 50px;
  91. }
  92. .flux .item.thumbnail.landscape {
  93. width: 80px;
  94. }
  95. .flux .item.thumbnail.portrait.small {
  96. width: 20px;
  97. }
  98. .flux .item.thumbnail.square.small {
  99. width: 30px;
  100. }
  101. .flux .item.thumbnail.landscape.small {
  102. width: 40px;
  103. }
  104. .flux .item.title .summary {
  105. max-height: 1.5em;
  106. }
  107. .flux .flux_header .item .item-element {
  108. padding: 0.25rem 0;
  109. }
  110. /*=== Content of feed articles */
  111. /*=== Notification and actualize notification */
  112. /*=== "Load more" part */
  113. #bigMarkAsRead {
  114. font-size: 1.2em;
  115. }
  116. #bigMarkAsRead .bigTick {
  117. font-size: 3em;
  118. }
  119. /*=== Navigation menu (for articles) */
  120. /*=== READER VIEW */
  121. /*================*/
  122. /*=== GLOBAL VIEW */
  123. /*================*/
  124. /*=== DIVERS */
  125. /*===========*/
  126. /*=== STATISTICS */
  127. /*===============*/
  128. /*=== MOBILE */
  129. /*===========*/
  130. @media (max-width: 840px) {
  131. .nav_menu .search input {
  132. padding: 1px 5px;
  133. }
  134. .dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
  135. margin-top: 5px;
  136. }
  137. .post {
  138. padding-left: 1rem;
  139. padding-right: 1rem;
  140. }
  141. }