elements.css

Same filename in this branch
  1. main core/themes/claro/css/base/elements.css
  2. main core/themes/admin/css/base/elements.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/base/elements.css
  2. 11.x core/themes/claro/css/base/elements.css
  3. 9 core/themes/seven/css/base/elements.css
  4. 9 core/themes/claro/css/base/elements.css
  5. 9 core/themes/bartik/css/base/elements.css
  6. 8.9.x core/themes/seven/css/base/elements.css
  7. 8.9.x core/themes/claro/css/base/elements.css
  8. 8.9.x core/themes/bartik/css/base/elements.css
  9. 11.x core/themes/admin/css/base/elements.css
  10. 11.x core/themes/default_admin/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.
 */

::selection {
  background: var(--admin-color-primary-soft-hover);
}

html {
  font-family: var(--admin-font-family);
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  line-height: var(--admin-line-height);
  scroll-padding-block-start: var(--admin-theme-scroll-offset) !important;
  color-scheme: light; /* Can be overridden by inline styles. */
}

body {
  overflow-x: hidden;
  word-wrap: break-word;
  hyphens: auto;
  color: var(--admin-color-text);
  background: var(--app-bg-color);

  @media (--admin-large) {
    overflow-x: auto;
  }
}

a,
.link,
button.link {
  word-wrap: break-word;
  color: var(--admin-color-primary);
  overflow-wrap: break-word;
  text-decoration-style: var(--admin-link-decoration-style);
}

*|*:any-link:not(svg|a) {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-style: var(--admin-link-decoration-style);
}

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

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

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

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

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(--admin-space-m) 0 var(--admin-space-s);
  letter-spacing: -0.025em;
  font-size: var(--admin-font-size-h1);
  font-weight: var(--admin-font-weight-normal);
  line-height: var(--admin-line-height-heading);
}

h2,
.heading-b {
  margin: var(--admin-space-m) 0 var(--admin-space-s);
  letter-spacing: -0.025em;
  font-size: var(--admin-font-size-h2);
  font-weight: var(--admin-font-weight-normal);
  line-height: var(--admin-line-height-heading);
}

h3,
.heading-c {
  margin: var(--admin-space-m) 0 var(--admin-space-s);
  letter-spacing: -0.025em;
  font-size: var(--admin-font-size-h3);
  font-weight: var(--admin-font-weight-normal);
  line-height: var(--admin-line-height-heading);
}

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

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

h6,
.heading-f {
  margin: var(--admin-space-m) 0 var(--admin-space-s);
  font-size: var(--admin-font-size-h6);
  font-weight: bold;
  line-height: var(--admin-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: var(--admin-space-m);
  padding-inline-start: var(--admin-space-l);
  font-size: var(--admin-font-size-quote);

  &::before {
    position: absolute;
    display: block;
    width: 0.25rem;
    height: 100%;
    content: "";
    color: var(--admin-color-link);
    border-radius: 2px;
    background-color: var(--admin-color-primary);
    font-family: var(--admin-font-family-serif);
    font-size: var(--admin-space-2xl);
    line-height: 1em;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  &::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);

  & summary {
    padding: var(--admin-space-m);
  }
}

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);
}

/**
 * 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;
}

/* Set a dark color scheme to style native browser elements. */

.gin--dark-mode {
  color-scheme: dark;
}

/* Enforcing colors on visually hidden text does not change anything for the
   user, but it prevents accessibility scanners like Wave from reporting contrast
   errors on visually hidden elements. While this is certainly an issue with the
   scanners and not Gin, this ensures that scans provide an accurate account of
   Gin's contrast support. */

.visually-hidden {
  color: #000;

  .gin--dark-mode & {
    color: #fff;
  }

  &.skip-link {
    color: var(--admin-color-text-on-primary);
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/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. ::selection {

  13.   background: var(--admin-color-primary-soft-hover);

  14. }

  15. 

  16. html {

  17.   font-family: var(--admin-font-family);

  18.   font-size: 100%;

  19.   font-weight: normal;

  20.   font-style: normal;

  21.   line-height: var(--admin-line-height);

  22.   scroll-padding-block-start: var(--admin-theme-scroll-offset) !important;

  23.   color-scheme: light; /* Can be overridden by inline styles. */

  24. }

  25. 

  26. body {

  27.   overflow-x: hidden;

  28.   word-wrap: break-word;

  29.   hyphens: auto;

  30.   color: var(--admin-color-text);

  31.   background: var(--app-bg-color);

  32. 

  33.   @media (--admin-large) {

  34.     overflow-x: auto;

  35.   }

  36. }

  37. 

  38. a,

  39. .link,

  40. button.link {

  41.   word-wrap: break-word;

  42.   color: var(--admin-color-primary);

  43.   overflow-wrap: break-word;

  44.   text-decoration-style: var(--admin-link-decoration-style);

  45. }

  46. 

  47. *|*:any-link:not(svg|a) {

  48.   -webkit-text-decoration: underline;

  49.   text-decoration: underline;

  50.   text-decoration-style: var(--admin-link-decoration-style);

  51. }

  52. 

  53. a:hover,

  54. a:focus,

  55. .link:hover,

  56. .link:focus {

  57.   -webkit-text-decoration: none;

  58.   text-decoration: none;

  59. }

  60. 

  61. a:hover,

  62. .link:hover {

  63.   color: var(--admin-color-link-hover);

  64. }

  65. 

  66. a:active,

  67. .link:active {

  68.   color: var(--admin-color-link-active);

  69. }

  70. 

  71. hr {

  72.   height: 1px;

  73.   margin: var(--admin-space-xl) 0;

  74.   padding: 0;

  75.   border: none;

  76.   background: var(--admin-color-border);

  77. }

  78. 

  79. summary {

  80.   font-weight: bold;

  81. }

  82. 

  83. /**

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

  85.  * headings on a page without affecting accessibility.

  86.  */

  87. 

  88. h1,

  89. .heading-a {

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

  91.   letter-spacing: -0.025em;

  92.   font-size: var(--admin-font-size-h1);

  93.   font-weight: var(--admin-font-weight-normal);

  94.   line-height: var(--admin-line-height-heading);

  95. }

  96. 

  97. h2,

  98. .heading-b {

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

  100.   letter-spacing: -0.025em;

  101.   font-size: var(--admin-font-size-h2);

  102.   font-weight: var(--admin-font-weight-normal);

  103.   line-height: var(--admin-line-height-heading);

  104. }

  105. 

  106. h3,

  107. .heading-c {

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

  109.   letter-spacing: -0.025em;

  110.   font-size: var(--admin-font-size-h3);

  111.   font-weight: var(--admin-font-weight-normal);

  112.   line-height: var(--admin-line-height-heading);

  113. }

  114. 

  115. h4,

  116. .heading-d {

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

  118.   font-size: var(--admin-font-size-h4);

  119.   font-weight: bold;

  120.   line-height: var(--admin-line-height-heading);

  121. }

  122. 

  123. h5,

  124. .heading-e {

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

  126.   font-size: var(--admin-font-size-h5);

  127.   font-weight: bold;

  128.   line-height: var(--admin-line-height-heading);

  129. }

  130. 

  131. h6,

  132. .heading-f {

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

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

  135.   font-weight: bold;

  136.   line-height: var(--admin-line-height-heading);

  137. }

  138. 

  139. p {

  140.   margin: 1em 0;

  141. }

  142. 

  143. dl {

  144.   margin: 0 0 1.25rem;

  145. }

  146. 

  147. dl dd,

  148. dl dl {

  149.   margin-block-end: 0.625rem;

  150.   margin-inline-start: 1.25rem;

  151. }

  152. 

  153. blockquote {

  154.   position: relative;

  155.   margin: var(--admin-space-m);

  156.   padding-inline-start: var(--admin-space-l);

  157.   font-size: var(--admin-font-size-quote);

  158. 

  159.   &::before {

  160.     position: absolute;

  161.     display: block;

  162.     width: 0.25rem;

  163.     height: 100%;

  164.     content: "";

  165.     color: var(--admin-color-link);

  166.     border-radius: 2px;

  167.     background-color: var(--admin-color-primary);

  168.     font-family: var(--admin-font-family-serif);

  169.     font-size: var(--admin-space-2xl);

  170.     line-height: 1em;

  171.     inset-block-start: 0;

  172.     inset-inline-start: 0;

  173.   }

  174. 

  175.   &::after {

  176.     content: no-close-quote;

  177.   }

  178. }

  179. 

  180. address {

  181.   font-style: italic;

  182. }

  183. 

  184. u,

  185. ins {

  186.   -webkit-text-decoration: underline;

  187.   text-decoration: underline;

  188. }

  189. 

  190. s,

  191. strike,

  192. del {

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

  194.   text-decoration: line-through;

  195. }

  196. 

  197. big {

  198.   font-size: larger;

  199. }

  200. 

  201. small {

  202.   font-size: smaller;

  203. }

  204. 

  205. sub {

  206.   vertical-align: sub;

  207.   font-size: smaller;

  208.   line-height: normal;

  209. }

  210. 

  211. sup {

  212.   vertical-align: super;

  213.   font-size: smaller;

  214.   line-height: normal;

  215. }

  216. 

  217. abbr,

  218. acronym {

  219.   border-bottom: dotted 1px;

  220. }

  221. 

  222. ul {

  223.   margin-block: 0.25em;

  224.   margin-inline: 1.5em 0;

  225.   padding-inline-start: 0;

  226.   list-style-image: none;

  227. }

  228. 

  229. ol {

  230.   margin-block: 0.25em;

  231.   margin-inline: 2em 0;

  232.   padding: 0;

  233. }

  234. 

  235. code {

  236.   margin: 0.5em 0;

  237. }

  238. 

  239. pre {

  240.   margin: 0.5em 0;

  241.   white-space: pre-wrap;

  242. }

  243. 

  244. details {

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

  246. 

  247.   & summary {

  248.     padding: var(--admin-space-m);

  249.   }

  250. }

  251. 

  252. img {

  253.   max-width: 100%;

  254.   height: auto;

  255. }

  256. 

  257. /**

  258.  * Default focus styles for focused elements.

  259.  *

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

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

  262.  */

  263. 

  264. .page-wrapper *:focus,

  265. .ui-dialog *:focus {

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

  267. }

  268. 

  269. /**

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

  271.  * JavaScript, and views-ui-noscript.css exists so browsers without JavaScript

  272.  * will still display them.

  273.  */

  274. 

  275. .views-tabs,

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

  277.   display: none;

  278. }

  279. 

  280. /* Set a dark color scheme to style native browser elements. */

  281. 

  282. .gin--dark-mode {

  283.   color-scheme: dark;

  284. }

  285. 

  286. /* Enforcing colors on visually hidden text does not change anything for the

  287.    user, but it prevents accessibility scanners like Wave from reporting contrast

  288.    errors on visually hidden elements. While this is certainly an issue with the

  289.    scanners and not Gin, this ensures that scans provide an accurate account of

  290.    Gin's contrast support. */

  291. 

  292. .visually-hidden {

  293.   color: #000;

  294. 

  295.   .gin--dark-mode 
  296. 

  297.   &.skip-link {

  298.     color: var(--admin-color-text-on-primary);

  299.   }

  300. }

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