You are here

base.css in Drupal 10

Generic base elements.

File

core/themes/olivero/css/base/base.css
View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Generic base elements.
  10. */
  11. /*
  12. * Media query breakpoints.
  13. * Processed by postcss/postcss-custom-media.
  14. */
  15. /* Navigation related breakpoints */
  16. /* Grid related breakpoints */
  17. /* Grid shifts from 6 to 14 columns. */
  18. /* Width of the entire grid maxes out. */
  19. *,
  20. *:before,
  21. *:after {
  22. box-sizing: border-box;
  23. }
  24. html {
  25. font-family: var(--font-sans);
  26. font-size: 100%;
  27. font-weight: normal;
  28. font-style: normal;
  29. line-height: var(--line-height-base);
  30. }
  31. body {
  32. margin: 0;
  33. color: var(--color-text-neutral-medium);
  34. background-color: var(--color--gray-100);
  35. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
  36. background-position: top left /* LTR */
  37. }
  38. body.is-fixed {
  39. position: fixed;
  40. overflow: hidden;
  41. width: 100%;
  42. }
  43. [dir="rtl"] body {
  44. background-position: top right;
  45. }
  46. a {
  47. color: var(--color-text-primary-medium)
  48. }
  49. a:hover {
  50. color: var(--color--primary-50);
  51. }
  52. a:focus {
  53. outline: solid 2px currentColor;
  54. outline-offset: 2px;
  55. }
  56. button {
  57. font-family: inherit;
  58. }
  59. img,
  60. video {
  61. display: block;
  62. max-width: 100%;
  63. height: auto;
  64. }
  65. audio {
  66. display: block;
  67. max-width: 100%;
  68. }
  69. h1 {
  70. letter-spacing: -0.01em;
  71. font-size: 1.75rem;
  72. line-height: var(--sp2)
  73. }
  74. @media (min-width: 43.75rem) {
  75. h1 {
  76. font-size: 3.75rem;
  77. line-height: var(--sp4)
  78. }
  79. }
  80. h2 {
  81. letter-spacing: -0.01em;
  82. font-size: 1.5rem;
  83. line-height: var(--sp2)
  84. }
  85. @media (min-width: 43.75rem) {
  86. h2 {
  87. font-size: 2.25rem;
  88. line-height: var(--sp3)
  89. }
  90. }
  91. h3 {
  92. font-size: 1.25rem;
  93. line-height: var(--sp1-5)
  94. }
  95. @media (min-width: 43.75rem) {
  96. h3 {
  97. font-size: 1.5rem;
  98. line-height: var(--sp2)
  99. }
  100. }
  101. h4 {
  102. font-size: 1.125rem;
  103. line-height: var(--sp1-5);
  104. }
  105. h5 {
  106. font-size: 1rem;
  107. line-height: var(--sp1-5);
  108. }
  109. h6 {
  110. font-size: 0.875rem;
  111. line-height: var(--sp);
  112. }
  113. h1,
  114. h2,
  115. h3,
  116. h4,
  117. h5,
  118. h6 {
  119. margin-top: var(--sp);
  120. margin-bottom: var(--sp);
  121. color: var(--color-text-neutral-loud);
  122. font-family: var(--font-sans);
  123. font-weight: bold
  124. }
  125. @media (min-width: 43.75rem) {
  126. h1,
  127. h2,
  128. h3,
  129. h4,
  130. h5,
  131. h6 {
  132. margin-top: var(--sp2);
  133. margin-bottom: var(--sp2)
  134. }
  135. }
  136. [dir="ltr"] ul {
  137. margin-left: 1.5em;
  138. }
  139. [dir="rtl"] ul {
  140. margin-right: 1.5em;
  141. }
  142. [dir="ltr"] ul {
  143. margin-right: 0;
  144. }
  145. [dir="rtl"] ul {
  146. margin-left: 0;
  147. }
  148. [dir="ltr"] ul {
  149. padding-left: 0;
  150. }
  151. [dir="rtl"] ul {
  152. padding-right: 0;
  153. }
  154. ul {
  155. margin-top: 0.25em;
  156. margin-bottom: 0.25em;
  157. list-style-type: disc;
  158. list-style-image: none;
  159. }