elements.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * Generic elements.
 */

html {
  font-family: var(--font-family);
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  line-height: var(--line-height);
}

body {
  word-wrap: break-word;
  hyphens: auto;
  color: var(--color-fg);
  background: var(--color-bg);
}

a,
.link {
  color: var(--color-link);
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 0;
}

a:hover,
.link:hover {
  color: var(--color-link-hover);
}

a:active,
.link:active {
  color: var(--color-link-active);
}

hr {
  height: 1px;
  margin: var(--space-m) 0;
  padding: 0;
  border: none;
  background: var(--color-divider);
}

summary {
  font-weight: bold;
}

/**
 * Reusable heading classes are included to help modules change the styling of
 * headings on a page without affecting accessibility.
 */

h1,
.heading-a {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h2,
.heading-b {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h3,
.heading-c {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-h3);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h4,
.heading-d {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-h4);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h5,
.heading-e {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-h5);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h6,
.heading-f {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-h6);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

p {
  margin: 1em 0;
}

dl {
  margin: 0 0 1.25rem;
}

dl dd,
dl dl {
  margin-block-end: 0.625rem;
  margin-inline-start: 1.25rem;
}

blockquote {
  position: relative;
  margin-block: var(--space-l);
  margin-inline: 2.5rem var(--space-l);
  font-size: var(--font-size-h6);
}

blockquote::before {
  position: absolute;
  inset-inline-start: -2.5rem;
  content: open-quote;
  color: var(--color-absolutezero);
  font-family: var(--font-family-serif);
  font-size: var(--space-xl);
  line-height: 1em;
}

blockquote::after {
  content: no-close-quote;
}

address {
  font-style: italic;
}

u,
ins {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

s,
strike,
del {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

abbr,
acronym {
  border-bottom: dotted 1px;
}

ul {
  margin-block: 0.25em;
  margin-inline: 1.5em 0;
  padding-inline-start: 0;
  list-style-image: none;
}

ol {
  margin-block: 0.25em;
  margin-inline: 2em 0;
  padding: 0;
}

code {
  margin: 0.5em 0;
}

pre {
  margin: 0.5em 0;
  white-space: pre-wrap;
}

details {
  line-height: var(--details-line-height);
}

details summary {
  padding: 0.95em 1.45em;
}

:is(details summary):focus {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

/**
 * Default focus styles for focused elements.
 *
 * This is applied globally to all interactive elements except Toolbar and
 * Settings Tray since they have their own styles.
 */

.page-wrapper *:focus,
.ui-dialog *:focus {
  outline: var(--focus-outline);
  box-shadow: var(--focus-box-shadow);
}

/**
 * These elements should not be displayed until they are processed
 * by JavaScript, and views-ui-noscript.css exists so browsers
 * without JavaScript will still display them
 */

.views-tabs,
.views-display-top > input.button {
  display: none;
}

File

View on git.drupalcode.org

core/themes/claro/css/base/elements.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. /**

  9.  * Generic elements.

  10.  */

  11. 

  12. html {

  13.   font-family: var(--font-family);

  14.   font-size: 100%;

  15.   font-weight: normal;

  16.   font-style: normal;

  17.   line-height: var(--line-height);

  18. }

  19. 

  20. body {

  21.   word-wrap: break-word;

  22.   hyphens: auto;

  23.   color: var(--color-fg);

  24.   background: var(--color-bg);

  25. }

  26. 

  27. a,

  28. .link {

  29.   color: var(--color-link);

  30. }

  31. 

  32. a:hover,

  33. a:focus,

  34. .link:hover,

  35. .link:focus {

  36.   -webkit-text-decoration: none;

  37.   text-decoration: none;

  38.   outline: 0;

  39. }

  40. 

  41. a:hover,

  42. .link:hover {

  43.   color: var(--color-link-hover);

  44. }

  45. 

  46. a:active,

  47. .link:active {

  48.   color: var(--color-link-active);

  49. }

  50. 

  51. hr {

  52.   height: 1px;

  53.   margin: var(--space-m) 0;

  54.   padding: 0;

  55.   border: none;

  56.   background: var(--color-divider);

  57. }

  58. 

  59. summary {

  60.   font-weight: bold;

  61. }

  62. 

  63. /**

  64.  * Reusable heading classes are included to help modules change the styling of

  65.  * headings on a page without affecting accessibility.

  66.  */

  67. 

  68. h1,

  69. .heading-a {

  70.   margin: var(--space-m) 0 var(--space-s);

  71.   font-size: var(--font-size-h1);

  72.   font-weight: bold;

  73.   line-height: var(--line-height-heading);

  74. }

  75. 

  76. h2,

  77. .heading-b {

  78.   margin: var(--space-m) 0 var(--space-s);

  79.   font-size: var(--font-size-h2);

  80.   font-weight: bold;

  81.   line-height: var(--line-height-heading);

  82. }

  83. 

  84. h3,

  85. .heading-c {

  86.   margin: var(--space-m) 0 var(--space-s);

  87.   font-size: var(--font-size-h3);

  88.   font-weight: bold;

  89.   line-height: var(--line-height-heading);

  90. }

  91. 

  92. h4,

  93. .heading-d {

  94.   margin: var(--space-m) 0 var(--space-s);

  95.   font-size: var(--font-size-h4);

  96.   font-weight: bold;

  97.   line-height: var(--line-height-heading);

  98. }

  99. 

  100. h5,

  101. .heading-e {

  102.   margin: var(--space-m) 0 var(--space-s);

  103.   font-size: var(--font-size-h5);

  104.   font-weight: bold;

  105.   line-height: var(--line-height-heading);

  106. }

  107. 

  108. h6,

  109. .heading-f {

  110.   margin: var(--space-m) 0 var(--space-s);

  111.   font-size: var(--font-size-h6);

  112.   font-weight: bold;

  113.   line-height: var(--line-height-heading);

  114. }

  115. 

  116. p {

  117.   margin: 1em 0;

  118. }

  119. 

  120. dl {

  121.   margin: 0 0 1.25rem;

  122. }

  123. 

  124. dl dd,

  125. dl dl {

  126.   margin-block-end: 0.625rem;

  127.   margin-inline-start: 1.25rem;

  128. }

  129. 

  130. blockquote {

  131.   position: relative;

  132.   margin-block: var(--space-l);

  133.   margin-inline: 2.5rem var(--space-l);

  134.   font-size: var(--font-size-h6);

  135. }

  136. 

  137. blockquote::before {

  138.   position: absolute;

  139.   inset-inline-start: -2.5rem;

  140.   content: open-quote;

  141.   color: var(--color-absolutezero);

  142.   font-family: var(--font-family-serif);

  143.   font-size: var(--space-xl);

  144.   line-height: 1em;

  145. }

  146. 

  147. blockquote::after {

  148.   content: no-close-quote;

  149. }

  150. 

  151. address {

  152.   font-style: italic;

  153. }

  154. 

  155. u,

  156. ins {

  157.   -webkit-text-decoration: underline;

  158.   text-decoration: underline;

  159. }

  160. 

  161. s,

  162. strike,

  163. del {

  164.   -webkit-text-decoration: line-through;

  165.   text-decoration: line-through;

  166. }

  167. 

  168. big {

  169.   font-size: larger;

  170. }

  171. 

  172. small {

  173.   font-size: smaller;

  174. }

  175. 

  176. sub {

  177.   vertical-align: sub;

  178.   font-size: smaller;

  179.   line-height: normal;

  180. }

  181. 

  182. sup {

  183.   vertical-align: super;

  184.   font-size: smaller;

  185.   line-height: normal;

  186. }

  187. 

  188. abbr,

  189. acronym {

  190.   border-bottom: dotted 1px;

  191. }

  192. 

  193. ul {

  194.   margin-block: 0.25em;

  195.   margin-inline: 1.5em 0;

  196.   padding-inline-start: 0;

  197.   list-style-image: none;

  198. }

  199. 

  200. ol {

  201.   margin-block: 0.25em;

  202.   margin-inline: 2em 0;

  203.   padding: 0;

  204. }

  205. 

  206. code {

  207.   margin: 0.5em 0;

  208. }

  209. 

  210. pre {

  211.   margin: 0.5em 0;

  212.   white-space: pre-wrap;

  213. }

  214. 

  215. details {

  216.   line-height: var(--details-line-height);

  217. }

  218. 

  219. details summary {

  220.   padding: 0.95em 1.45em;

  221. }

  222. 

  223. :is(details summary):focus {

  224.   outline: none;

  225. }

  226. 

  227. img {

  228.   max-width: 100%;

  229.   height: auto;

  230. }

  231. 

  232. /**

  233.  * Default focus styles for focused elements.

  234.  *

  235.  * This is applied globally to all interactive elements except Toolbar and

  236.  * Settings Tray since they have their own styles.

  237.  */

  238. 

  239. .page-wrapper *:focus,

  240. .ui-dialog *:focus {

  241.   outline: var(--focus-outline);

  242.   box-shadow: var(--focus-box-shadow);

  243. }

  244. 

  245. /**

  246.  * These elements should not be displayed until they are processed

  247.  * by JavaScript, and views-ui-noscript.css exists so browsers

  248.  * without JavaScript will still display them

  249.  */

  250. 

  251. .views-tabs,

  252. .views-display-top > input.button {

  253.   display: none;

  254. }

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