No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

177 líneas
3.6KB

  1. /*!
  2. * Copyright (C) 2019 Josh Habdas <[email protected]>
  3. *
  4. * This file is part of After Dark.
  5. *
  6. * After Dark is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU Affero General Public License as published
  8. * by the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * After Dark is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU Affero General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU Affero General Public License
  17. * along with this program. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. :root {
  20. scroll-behavior: smooth;
  21. --screen-size-small: 30em; /* breakpoint reference only */
  22. }
  23. @keyframes intro {
  24. 0% { opacity: 0 } 100% { opacity: 1 }
  25. }
  26. .blur-up.lazyloading {
  27. filter: blur(5px);
  28. opacity: 1;
  29. transition: opacity 1s, filter 1.5s;
  30. }
  31. .blur-up.lazyload {
  32. opacity: 0;
  33. filter: blur(10px);
  34. }
  35. .blur-up.lazyloaded {
  36. filter: blur(0);
  37. transition: filter 1s;
  38. }
  39. .hack .readmore {
  40. margin-bottom: 2.2em;
  41. }
  42. .responsive-iframe,
  43. .ratio-container {
  44. position: relative;
  45. padding-bottom: 56.25%; /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
  46. padding-top: 25px;
  47. height: 0;
  48. }
  49. .responsive-iframe iframe,
  50. .ratio-container > *:not([itemprop="caption"]) {
  51. position: absolute;
  52. top: 0;
  53. left: 0;
  54. width: 100%;
  55. height: 100%;
  56. }
  57. iframe {
  58. border: 0;
  59. }
  60. main, footer {
  61. animation: intro 0.3s both;
  62. animation-delay: 0.15s;
  63. }
  64. header:first-of-type + details {
  65. margin: 20px 0;
  66. }
  67. footer time[datetime$="M"]:before {
  68. content: "\2013\0020";
  69. }
  70. body > footer p.muted {
  71. margin-bottom: 0;
  72. }
  73. @media only screen and (max-width: 768px) {
  74. footer time[datetime$="M"] {
  75. display: none;
  76. }
  77. }
  78. blockquote cite {
  79. display: block;
  80. }
  81. blockquote cite::before {
  82. content: "\2014\00A0";
  83. }
  84. /* :target {
  85. filter: brightness(1.2);
  86. } */
  87. :disabled {
  88. cursor: not-allowed;
  89. }
  90. /* hack.css overrides and enhancements */
  91. .hack li ul {
  92. margin: 0;
  93. }
  94. .hack ol li {
  95. padding-left: 27px;
  96. }
  97. .main {
  98. padding: 20px 10px;
  99. }
  100. input.form-control {
  101. border-radius: 0;
  102. background-color: transparent;
  103. -webkit-appearance: none;
  104. -moz-appearance: none;
  105. -ms-appearance: none;
  106. }
  107. input.form-control,
  108. textarea.form-control,
  109. select.form-control,
  110. .help-block {
  111. font-size: initial;
  112. }
  113. @media only screen and (max-width: 768px) {
  114. .help-block {
  115. font-size: unset;
  116. }
  117. }
  118. html {
  119. font-size: 13px;
  120. }
  121. .hack .form input,
  122. .hack .form textarea,
  123. .hack .form button,
  124. .hack .form label {
  125. font-size: 1rem;
  126. }
  127. .hack .alert .highlight:first-of-type .chroma,
  128. .hack .card .highlight:first-of-type .chroma {
  129. margin-top: unset;
  130. }
  131. .hack .alert .highlight:last-of-type .chroma,
  132. .hack .card .highlight:last-of-type .chroma {
  133. margin-bottom: unset;
  134. }
  135. .hack blockquote,
  136. .hack blockquote:after {
  137. line-height: 1.5;
  138. }
  139. .hack figure,
  140. .standard figure {
  141. margin: unset;
  142. }
  143. .hack figure a {
  144. border-bottom: none;
  145. }
  146. .hack figure a:hover {
  147. background-color: inherit;
  148. }
  149. article header img {
  150. width: 100%;
  151. border-radius: 3px;
  152. }
  153. table td, table th {
  154. line-height: inherit;
  155. }
  156. table a {
  157. border-bottom: unset;
  158. }
  159. img {
  160. max-width: 100%;
  161. }
  162. @media only screen and (min-width: 768px) {
  163. html {
  164. font-size: 16px;
  165. }
  166. .container {
  167. max-width: 50rem;
  168. }
  169. }
  170. @media only screen and (min-width: 768px), (-ms-high-contrast: active), (-ms-high-contrast: none) {
  171. /* @see http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 */
  172. html {
  173. margin-left: calc(100vw - 100%); /* @see https://aykevl.nl/2014/09/fix-jumping-scrollbar */
  174. }
  175. }