top_bar.css

/* cspell:ignore xxxs */
:root {
  --drupal-displace-offset-top: 64px;
  --admin-toolbar-top-bar-height: 64px;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {
  height: auto;
  min-height: 64px;
  opacity: 0.95;
  border-block-end: 1px solid var(--gin-border-color-layer);
  background: var(--gin-bg-layer);
  box-shadow: none;
  padding-inline: calc(var(--admin-toolbar-sidebar-width) + var(--gin-spacing-m)) var(--gin-spacing-m);
  padding-block: var(--gin-spacing-xxxs);
}

@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {
    opacity: 0.999;
    /* stylelint-disable-next-line color-function-notation */
    background: rgb(from var(--layer-background) r g b/ 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.gin--high-contrast-mode :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {
  background: var(--gin-bg-layer);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar--offset {
  margin-top: calc(64px + var(--gin-spacing-s));
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {
  display: flex;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .top-bar__burger {
  align-self: center;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .top-bar__context {
  gap: var(--gin-spacing-xs);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .top-bar__actions,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gin-spacing-xs);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions__item,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .form-actions,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .gin-sticky-form-actions {
  width: auto;
  margin: 0;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-title {
  color: var(--gin-color-text);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-title__icon path {
  fill: var(--gin-color-text);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button {
  font-size: var(--gin-font-size-xs);
  font-weight: var(--gin-font-weight-semibold);
  font-variation-settings: normal;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu {
  box-sizing: border-box;
  padding: var(--gin-spacing-xs);
  border-radius: var(--gin-border-l);
  background-color: var(--gin-bg-layer3);
  box-shadow: var(--gin-shadow-l2);
  gap: 0;
}

@media (prefers-reduced-motion: no-preference) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu {
    transition: opacity var(--gin-transition-fast);
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link {
  box-sizing: border-box;
  width: 100%;
  max-width: 240px;
  margin: 0 !important;
  padding: var(--gin-spacing-s);
  text-align: start;
  text-decoration: none;
  border: 0 !important;
  border-radius: var(--gin-border-s);
  box-shadow: none;
  font-size: var(--gin-font-size-xs);
  font-weight: var(--gin-font-weight-semibold);
  line-height: 1;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:hover,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:active,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:focus {
  color: var(--gin-color-button-text);
  outline: none;
  background-color: var(--gin-color-primary);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:hover::before,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:active::before,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:focus::before {
  background-color: var(--gin-bg-layer) !important;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__item + .toolbar-dropdown__item {
  border: none;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar button,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar input[type="submit"],
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .action-link--icon-trash.action-link--danger,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .button.button--danger,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar a.button.button--danger,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions__item a {
  text-decoration: none;
  box-shadow: none;
  font-size: var(--gin-font-size-xs);
  font-weight: var(--gin-font-weight-bold);
  padding-block: calc(var(--gin-spacing-xs) - var(--gin-spacing-xxxs));
  padding-inline: var(--gin-spacing-s);
  margin-block: 0;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .action-link--icon-trash.action-link--danger,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .button.button--danger,
:is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar a.button.button--danger {
  padding-block: calc(var(--gin-spacing-xs) - 0.5px);
}

body:has(.gin--navigation-top-bar .gin-sticky-form-actions) :where(#gin_sidebar) {
  inset-block-start: 64px !important;
  height: calc(100% - 64px) !important;
}

:where(.gin--edit-form) .gin-sticky-form-actions {
  gap: var(--gin-spacing-xs);
}

[dir="ltr"] :where(.gin--edit-form) .gin-sticky-form-actions .button {
  margin-inline-end: 0;
}

[dir="rtl"] :where(.gin--edit-form) .gin-sticky-form-actions .button {
  margin-inline-start: 0;
}

:where(.gin--edit-form) .gin-sticky-form-actions [data-drupal-selector="edit-delete"] {
  display: none;
}

#block-gin-page-title {
  margin-block: var(--gin-spacing-xxs) var(--gin-spacing-s);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/layout/top_bar.css

View source 
  1. /* cspell:ignore xxxs */

  2. :root {

  3.   --drupal-displace-offset-top: 64px;

  4.   --admin-toolbar-top-bar-height: 64px;

  5. }

  6. 

  7. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {

  8.   height: auto;

  9.   min-height: 64px;

  10.   opacity: 0.95;

  11.   border-block-end: 1px solid var(--gin-border-color-layer);

  12.   background: var(--gin-bg-layer);

  13.   box-shadow: none;

  14.   padding-inline: calc(var(--admin-toolbar-sidebar-width) + var(--gin-spacing-m)) var(--gin-spacing-m);

  15.   padding-block: var(--gin-spacing-xxxs);

  16. }

  17. 

  18. @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {

  19.   :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {

  20.     opacity: 0.999;

  21.     /* stylelint-disable-next-line color-function-notation */

  22.     background: rgb(from var(--layer-background) r g b/ 0.8);

  23.     -webkit-backdrop-filter: blur(12px);

  24.     backdrop-filter: blur(12px);

  25.   }

  26. }

  27. 

  28. .gin--high-contrast-mode :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {

  29.   background: var(--gin-bg-layer);

  30.   -webkit-backdrop-filter: none;

  31.   backdrop-filter: none;

  32. }

  33. 

  34. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar--offset {

  35.   margin-top: calc(64px + var(--gin-spacing-s));

  36. }

  37. 

  38. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {

  39.   display: flex;

  40. }

  41. 

  42. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .top-bar__burger {

  43.   align-self: center;

  44. }

  45. 

  46. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .top-bar__context {

  47.   gap: var(--gin-spacing-xs);

  48. }

  49. 

  50. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .top-bar__actions,

  51. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions {

  52.   display: flex;

  53.   flex-wrap: wrap;

  54.   align-items: center;

  55.   gap: var(--gin-spacing-xs);

  56. }

  57. 

  58. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions,

  59. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions__item,

  60. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .form-actions,

  61. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .gin-sticky-form-actions {

  62.   width: auto;

  63.   margin: 0;

  64. }

  65. 

  66. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-title {

  67.   color: var(--gin-color-text);

  68. }

  69. 

  70. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-title__icon path {

  71.   fill: var(--gin-color-text);

  72. }

  73. 

  74. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button {

  75.   font-size: var(--gin-font-size-xs);

  76.   font-weight: var(--gin-font-weight-semibold);

  77.   font-variation-settings: normal;

  78. }

  79. 

  80. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu {

  81.   box-sizing: border-box;

  82.   padding: var(--gin-spacing-xs);

  83.   border-radius: var(--gin-border-l);

  84.   background-color: var(--gin-bg-layer3);

  85.   box-shadow: var(--gin-shadow-l2);

  86.   gap: 0;

  87. }

  88. 

  89. @media (prefers-reduced-motion: no-preference) {

  90.   :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu {

  91.     transition: opacity var(--gin-transition-fast);

  92.   }

  93. }

  94. 

  95. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link {

  96.   box-sizing: border-box;

  97.   width: 100%;

  98.   max-width: 240px;

  99.   margin: 0 !important;

  100.   padding: var(--gin-spacing-s);

  101.   text-align: start;

  102.   text-decoration: none;

  103.   border: 0 !important;

  104.   border-radius: var(--gin-border-s);

  105.   box-shadow: none;

  106.   font-size: var(--gin-font-size-xs);

  107.   font-weight: var(--gin-font-weight-semibold);

  108.   line-height: 1;

  109. }

  110. 

  111. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:hover,

  112. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:active,

  113. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:focus {

  114.   color: var(--gin-color-button-text);

  115.   outline: none;

  116.   background-color: var(--gin-color-primary);

  117. }

  118. 

  119. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:hover::before,

  120. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:active::before,

  121. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__link:focus::before {

  122.   background-color: var(--gin-bg-layer) !important;

  123. }

  124. 

  125. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-dropdown__menu .toolbar-dropdown__item + .toolbar-dropdown__item {

  126.   border: none;

  127. }

  128. 

  129. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar button,

  130. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar input[type="submit"],

  131. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .action-link--icon-trash.action-link--danger,

  132. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .button.button--danger,

  133. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar a.button.button--danger,

  134. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions__item a {

  135.   text-decoration: none;

  136.   box-shadow: none;

  137.   font-size: var(--gin-font-size-xs);

  138.   font-weight: var(--gin-font-weight-bold);

  139.   padding-block: calc(var(--gin-spacing-xs) - var(--gin-spacing-xxxs));

  140.   padding-inline: var(--gin-spacing-s);

  141.   margin-block: 0;

  142. }

  143. 

  144. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .action-link--icon-trash.action-link--danger,

  145. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar .button.button--danger,

  146. :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar a.button.button--danger {

  147.   padding-block: calc(var(--gin-spacing-xs) - 0.5px);

  148. }

  149. 

  150. body:has(.gin--navigation-top-bar .gin-sticky-form-actions) :where(#gin_sidebar) {

  151.   inset-block-start: 64px !important;

  152.   height: calc(100% - 64px) !important;

  153. }

  154. 

  155. :where(.gin--edit-form) .gin-sticky-form-actions {

  156.   gap: var(--gin-spacing-xs);

  157. }

  158. 

  159. [dir="ltr"] :where(.gin--edit-form) .gin-sticky-form-actions .button {

  160.   margin-inline-end: 0;

  161. }

  162. 

  163. [dir="rtl"] :where(.gin--edit-form) .gin-sticky-form-actions .button {

  164.   margin-inline-start: 0;

  165. }

  166. 

  167. :where(.gin--edit-form) .gin-sticky-form-actions [data-drupal-selector="edit-delete"] {

  168.   display: none;

  169. }

  170. 

  171. #block-gin-page-title {

  172.   margin-block: var(--gin-spacing-xxs) var(--gin-spacing-s);

  173. }

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