base.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/base.css
  2. 11.x core/misc/dialog/off-canvas/css/base.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/base.css
  2. 9 core/themes/olivero/css/base/base.css
  3. 8.9.x core/profiles/demo_umami/themes/umami/css/base.css
  4. 8.9.x core/assets/vendor/jquery.ui/themes/base/base.css
  5. 10 core/profiles/demo_umami/themes/umami/css/base.css
  6. 10 core/misc/dialog/off-canvas/css/base.css
  7. 10 core/themes/olivero/css/base/base.css

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. *::before,
  13. *::after {
  14. box-sizing: border-box;
  15. }
  16. html {
  17. font-family: var(--font-sans);
  18. font-size: 100%;
  19. font-weight: normal;
  20. font-style: normal;
  21. line-height: var(--line-height-base);
  22. }
  23. body {
  24. margin: 0;
  25. word-wrap: break-word;
  26. -webkit-hyphens: auto;
  27. hyphens: auto;
  28. color: var(--color-text-neutral-medium);
  29. background-color: var(--color--gray-100);
  30. 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");
  31. background-position: top left; /* LTR */
  32. }
  33. body.is-fixed {
  34. position: fixed;
  35. overflow: hidden;
  36. width: 100%;
  37. }
  38. [dir="rtl"] body {
  39. background-position: top right;
  40. }
  41. a {
  42. color: var(--color-text-primary-medium);
  43. }
  44. a:hover {
  45. color: var(--color--primary-50);
  46. }
  47. a:focus {
  48. outline: solid 2px currentColor;
  49. outline-offset: 2px;
  50. }
  51. button {
  52. font-family: inherit;
  53. }
  54. img,
  55. video {
  56. display: block;
  57. max-width: 100%;
  58. height: auto;
  59. }
  60. audio {
  61. display: block;
  62. max-width: 100%;
  63. }
  64. h1 {
  65. letter-spacing: -0.01em;
  66. font-size: 1.75rem;
  67. line-height: var(--sp2);
  68. }
  69. @media (min-width: 43.75rem) {
  70. h1 {
  71. font-size: 3.75rem;
  72. line-height: var(--sp4);
  73. }
  74. }
  75. h2 {
  76. letter-spacing: -0.01em;
  77. font-size: 1.5rem;
  78. line-height: var(--sp2);
  79. }
  80. @media (min-width: 43.75rem) {
  81. h2 {
  82. font-size: 2.25rem;
  83. line-height: var(--sp3);
  84. }
  85. }
  86. h3 {
  87. font-size: 1.25rem;
  88. line-height: var(--sp1-5);
  89. }
  90. @media (min-width: 43.75rem) {
  91. h3 {
  92. font-size: 1.5rem;
  93. line-height: var(--sp2);
  94. }
  95. }
  96. h4 {
  97. font-size: 1.125rem;
  98. line-height: var(--sp1-5);
  99. }
  100. h5 {
  101. font-size: 1rem;
  102. line-height: var(--sp1-5);
  103. }
  104. h6 {
  105. font-size: 0.875rem;
  106. line-height: var(--sp);
  107. }
  108. h1,
  109. h2,
  110. h3,
  111. h4,
  112. h5,
  113. h6 {
  114. margin-block: var(--sp);
  115. color: var(--color-text-neutral-loud);
  116. font-family: var(--font-sans);
  117. font-weight: bold;
  118. }
  119. @media (min-width: 43.75rem) {
  120. h1,
  121. h2,
  122. h3,
  123. h4,
  124. h5,
  125. h6 {
  126. margin-block: var(--sp2);
  127. }
  128. }
  129. ul {
  130. margin-block-start: 0.25em;
  131. margin-block-end: 0.25em;
  132. margin-inline-start: 1.5em;
  133. margin-inline-end: 0;
  134. padding-inline-start: 0;
  135. list-style-type: disc;
  136. list-style-image: none;
  137. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.