elements.css

Same filename in other branches
  1. 9 core/themes/seven/css/base/elements.css
  2. 9 core/themes/claro/css/base/elements.css
  3. 9 core/themes/bartik/css/base/elements.css
  4. 8.9.x core/themes/seven/css/base/elements.css
  5. 8.9.x core/themes/claro/css/base/elements.css
  6. 8.9.x core/themes/bartik/css/base/elements.css
  7. 10 core/themes/claro/css/base/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;
  -webkit-hyphens: auto;
  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-type: disc;
  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;
}

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

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.   -webkit-hyphens: auto;

  23.   hyphens: auto;

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

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

  26. }

  27. 

  28. a,

  29. .link {

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

  31. }

  32. 

  33. a:hover,

  34. a:focus,

  35. .link:hover,

  36. .link:focus {

  37.   -webkit-text-decoration: none;

  38.   text-decoration: none;

  39.   outline: 0;

  40. }

  41. 

  42. a:hover,

  43. .link:hover {

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

  45. }

  46. 

  47. a:active,

  48. .link:active {

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

  50. }

  51. 

  52. hr {

  53.   height: 1px;

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

  55.   padding: 0;

  56.   border: none;

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

  58. }

  59. 

  60. summary {

  61.   font-weight: bold;

  62. }

  63. 

  64. /**

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

  66.  * headings on a page without affecting accessibility.

  67.  */

  68. 

  69. h1,

  70. .heading-a {

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

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

  73.   font-weight: bold;

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

  75. }

  76. 

  77. h2,

  78. .heading-b {

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

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

  81.   font-weight: bold;

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

  83. }

  84. 

  85. h3,

  86. .heading-c {

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

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

  89.   font-weight: bold;

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

  91. }

  92. 

  93. h4,

  94. .heading-d {

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

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

  97.   font-weight: bold;

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

  99. }

  100. 

  101. h5,

  102. .heading-e {

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

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

  105.   font-weight: bold;

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

  107. }

  108. 

  109. h6,

  110. .heading-f {

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

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

  113.   font-weight: bold;

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

  115. }

  116. 

  117. p {

  118.   margin: 1em 0;

  119. }

  120. 

  121. dl {

  122.   margin: 0 0 1.25rem;

  123. }

  124. 

  125. dl dd,

  126. dl dl {

  127.   margin-block-end: 0.625rem;

  128.   margin-inline-start: 1.25rem;

  129. }

  130. 

  131. blockquote {

  132.   position: relative;

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

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

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

  136. }

  137. 

  138. blockquote::before {

  139.   position: absolute;

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

  141.   content: open-quote;

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

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

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

  145.   line-height: 1em;

  146. }

  147. 

  148. blockquote::after {

  149.   content: no-close-quote;

  150. }

  151. 

  152. address {

  153.   font-style: italic;

  154. }

  155. 

  156. u,

  157. ins {

  158.   -webkit-text-decoration: underline;

  159.   text-decoration: underline;

  160. }

  161. 

  162. s,

  163. strike,

  164. del {

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

  166.   text-decoration: line-through;

  167. }

  168. 

  169. big {

  170.   font-size: larger;

  171. }

  172. 

  173. small {

  174.   font-size: smaller;

  175. }

  176. 

  177. sub {

  178.   vertical-align: sub;

  179.   font-size: smaller;

  180.   line-height: normal;

  181. }

  182. 

  183. sup {

  184.   vertical-align: super;

  185.   font-size: smaller;

  186.   line-height: normal;

  187. }

  188. 

  189. abbr,

  190. acronym {

  191.   border-bottom: dotted 1px;

  192. }

  193. 

  194. ul {

  195.   margin-block: 0.25em;

  196.   margin-inline: 1.5em 0;

  197.   padding-inline-start: 0;

  198.   list-style-type: disc;

  199.   list-style-image: none;

  200. }

  201. 

  202. ol {

  203.   margin-block: 0.25em;

  204.   margin-inline: 2em 0;

  205.   padding: 0;

  206. }

  207. 

  208. code {

  209.   margin: 0.5em 0;

  210. }

  211. 

  212. pre {

  213.   margin: 0.5em 0;

  214.   white-space: pre-wrap;

  215. }

  216. 

  217. details {

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

  219. }

  220. 

  221. details summary {

  222.   padding: 0.95em 1.45em;

  223. }

  224. 

  225. details summary:focus {

  226.   outline: none;

  227. }

  228. 

  229. img {

  230.   max-width: 100%;

  231.   height: auto;

  232. }

  233. 

  234. /**

  235.  * Default focus styles for focused elements.

  236.  *

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

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

  239.  */

  240. 

  241. .page-wrapper *:focus,

  242. .ui-dialog *:focus {

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

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

  245. }

  246. 

  247. /**

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

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

  250.  * without JavaScript will still display them

  251.  */

  252. 

  253. .views-tabs,

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

  255.   display: none;

  256. }

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