navigation.css

Same filename in this branch
  1. main core/themes/default_admin/migration/css/layout/navigation.css
  2. main core/themes/default_admin/css/components/navigation.css
Same filename and directory in other branches
  1. 11.x core/themes/admin/migration/css/layout/navigation.css
  2. 11.x core/themes/default_admin/migration/css/layout/navigation.css
  3. 11.x core/themes/default_admin/css/components/navigation.css
/* cspell:ignore navigationcreate, toolsextra, xxxs */
:root {
  --gin-toolbar-height: 48px;
  --gin-toolbar-secondary-height: 48px;
  --gin-scroll-offset: 72px;
  --gin-toolbar-y-offset: var(--gin-toolbar-height);
  --gin-toolbar-x-offset: 0px;
  --gin-sticky-offset: 0px;
  --gin-icon-size-toolbar: 20px;
}

@media (min-width: 61em) {
  :root {
    --gin-toolbar-height: 0px;
    --gin-toolbar-secondary-height: 52px;
    --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);
    --gin-scroll-offset: 130px;
    --gin-sticky-offset: var(--gin-height-sticky);
  }
}

@media (min-width: 61em) {
  html.admin-toolbar-expanded {
    --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);
  }
}

body.gin--navigation {
  --admin-toolbar-sidebar-width: 4rem;
}

[data-admin-toolbar="expanded"] body.gin--navigation {
  --admin-toolbar-sidebar-width: 16.5rem;
}

@media (--admin-toolbar-tablet) {
  [data-admin-toolbar="expanded"] body.gin--navigation {
    --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  --admin-toolbar-font-family: var(--gin-font);
  --admin-toolbar-color-white: var(--gin-bg-layer);
  --admin-toolbar-color-gray-050: var(--gin-bg-layer2);
  --admin-toolbar-color-gray-100: var(--gin-border-color-layer);
  --admin-toolbar-color-gray-200: var(--gin-border-color-layer2);
  --admin-toolbar-color-gray-800: var(--gin-color-text);
  --admin-toolbar-color-gray-990: var(--gin-color-primary-active);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar-control-bar {
  background-color: var(--admin-toolbar-color-white);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover::before {
  inline-size: var(--gin-spacing-xxs);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar {
  top: 0;
  height: 100%;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__header {
  padding-block-start: var(--gin-spacing-xs);
}

@media (min-width: 64em) {
  :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__header {
    padding-block-start: 0;
  }
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__content {
  margin-block-start: calc(var(--gin-spacing-xxs) * -1);
  padding: var(--admin-toolbar-sidebar-header) var(--gin-spacing-s) var(--gin-spacing-s) var(--gin-spacing-s);
}

@media (min-width: 64em) {
  :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__content {
    margin-block-start: 0;
    padding: var(--gin-spacing-s);
  }
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__footer {
  padding: var(--gin-spacing-s);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__footer,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {
  border-block-start-color: var(--gin-border-color-secondary);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo {
  border-radius: 10px;
  line-height: 0;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo svg rect {
  fill: var(--gin-color-primary);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo svg path {
  fill: var(--gin-bg-app);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:hover svg rect {
  fill: var(--gin-color-primary-hover);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:active svg rect,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:focus svg rect {
  fill: var(--gin-color-primary-active);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #navigation-link-navigationcreate {
  margin-block-start: var(--gin-spacing-xxs);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-block__list {
  gap: 0;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button {
  min-height: unset;
  padding-inline: 10px;
  padding-block: calc(var(--gin-spacing-xs) + 1px);
  margin-block-end: var(--gin-spacing-xxxs);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button--primary {
  color: var(--gin-color-button-text) !important;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button {
  min-height: auto;
  padding: var(--gin-spacing-xs) var(--gin-spacing-s);
  border: 0 none;
  border-radius: var(--gin-border-m);
  outline: none;
}

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

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--primary {
  --toolbar-button-color: var(--gin-color-button-text);
  --toolbar-button-bg: var(--gin-color-primary);
  --toolbar-button-hover-color: var(--gin-color-button-text);
  --toolbar-button-hover-bg: var(--gin-color-primary-hover);
  --toolbar-button-focus-color: var(--gin-color-button-text);
  --toolbar-button-focus-bg: var(--gin-color-primary-active);
  --toolbar-button-icon-size: var(--gin-font-size-s);
}

[dir="ltr"] :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--primary {
  box-shadow: 0.1em 0.25em 0.5em var(--gin-color-primary-light);
}

[dir="rtl"] :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--primary {
  box-shadow: -0.1em 0.25em 0.5em var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots {
  display: block;
  width: 32px;
  height: 32px;
  padding: 6px;
  cursor: pointer;
  color: var(--gin-color-text);
  border-radius: var(--gin-border-m);
  background: transparent;
  margin-inline: calc(var(--gin-spacing-xxs) * -1);
}

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

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:hover,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:focus {
  background: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:hover::before,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:focus::before {
  background: var(--gin-color-primary);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots[aria-expanded="true"],
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots.is-active {
  background-color: var(--gin-color-primary-light-hover);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots[aria-expanded="true"]::before,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots.is-active::before {
  background-color: var(--gin-color-primary-active);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link {
  color: var(--gin-color-text);
  font-weight: var(--gin-font-weight-semibold);
  font-variation-settings: unset;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:hover,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:active,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:active {
  outline: none;
  box-shadow: none;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:hover,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover {
  color: var(--gin-color-primary);
  background-color: var(--gin-bg-item-hover);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:active,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:hover:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:active,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover:focus {
  color: var(--gin-color-primary-hover);
  background-color: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button--large {
  font-weight: var(--gin-font-weight-bold);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) *:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .button:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .local-actions__item *:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .local-actions__item *:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.toolbar-button:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--gin-color-focus-border),
    inset 0 0 0 3px var(--gin-color-focus);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current {
  background-color: var(--gin-bg-item-hover);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:hover {
  background-color: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:active,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:focus,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:hover:focus {
  background-color: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current.is-active,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
  color: var(--gin-color-primary);
  background-color: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current.is-active::before,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button:has(+ .toolbar-popover__wrapper .is-active)::before {
  color: var(--gin-color-primary) !important;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button__icon {
  margin: -1px;
  color: var(--gin-icon-color);
  stroke-width: 0.03125rem;
  stroke: currentColor;
  inline-size: 22px;
  block-size: 22px;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon path:not(:first-of-type) {
  stroke-width: 1.325rem;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button--icon--dots path {
  stroke-width: 0.5rem;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #navigation-link-navigationcreate:first-child {
  margin-block-end: var(--admin-toolbar-space-8);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #navigation-link-navigationcreate:first-child::after {
  display: block;
  margin-block-start: var(--admin-toolbar-space-12);
  content: "";
  border-block-end: 1px solid var(--gin-border-color-secondary);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button {
  margin-block-start: calc(var(--gin-spacing-xs) * -1);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button:hover {
  color: var(--gin-color-text-light);
  border-color: var(--gin-border-color);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-popover--expanded {
  background-color: transparent;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-popover--expanded > .toolbar-button {
  background-color: var(--gin-bg-item-hover);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin--dark-mode .toolbar-popover__wrapper {
  border-inline-start: 2px solid var(--gin-border-color-secondary);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__tooltip {
  color: #fff;
  background-color: var(--gin-tooltip-bg);
  font-size: var(--gin-font-size-xs);
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-block__list-item[id*="navigation-link-admin-toolbar-toolsextra-links"] {
  display: none;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #toolbar-item-shortcuts,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #toolbar-item-announcement {
  display: none;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-id--toolbar-icon-user {
  display: none !important;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-menu {
  gap: 0;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-menu__trigger {
  display: none;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-tray .menu-item + .menu-item {
  border-inline-start: none;
}

:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-loading #toolbar-item-shortcuts-tray,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-loading #toolbar-item-shortcuts {
  visibility: hidden;
}

File

View on git.drupalcode.org

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

View source 
  1. /* cspell:ignore navigationcreate, toolsextra, xxxs */

  2. :root {

  3.   --gin-toolbar-height: 48px;

  4.   --gin-toolbar-secondary-height: 48px;

  5.   --gin-scroll-offset: 72px;

  6.   --gin-toolbar-y-offset: var(--gin-toolbar-height);

  7.   --gin-toolbar-x-offset: 0px;

  8.   --gin-sticky-offset: 0px;

  9.   --gin-icon-size-toolbar: 20px;

  10. }

  11. 

  12. @media (min-width: 61em) {

  13.   :root {

  14.     --gin-toolbar-height: 0px;

  15.     --gin-toolbar-secondary-height: 52px;

  16.     --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);

  17.     --gin-scroll-offset: 130px;

  18.     --gin-sticky-offset: var(--gin-height-sticky);

  19.   }

  20. }

  21. 

  22. @media (min-width: 61em) {

  23.   html.admin-toolbar-expanded {

  24.     --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);

  25.   }

  26. }

  27. 

  28. body.gin--navigation {

  29.   --admin-toolbar-sidebar-width: 4rem;

  30. }

  31. 

  32. [data-admin-toolbar="expanded"] body.gin--navigation {

  33.   --admin-toolbar-sidebar-width: 16.5rem;

  34. }

  35. 

  36. @media (--admin-toolbar-tablet) {

  37.   [data-admin-toolbar="expanded"] body.gin--navigation {

  38.     --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));

  39.   }

  40. }

  41. 

  42. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  43.   --admin-toolbar-font-family: var(--gin-font);

  44.   --admin-toolbar-color-white: var(--gin-bg-layer);

  45.   --admin-toolbar-color-gray-050: var(--gin-bg-layer2);

  46.   --admin-toolbar-color-gray-100: var(--gin-border-color-layer);

  47.   --admin-toolbar-color-gray-200: var(--gin-border-color-layer2);

  48.   --admin-toolbar-color-gray-800: var(--gin-color-text);

  49.   --admin-toolbar-color-gray-990: var(--gin-color-primary-active);

  50. }

  51. 

  52. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar-control-bar {

  53.   background-color: var(--admin-toolbar-color-white);

  54. }

  55. 

  56. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover::before {

  57.   inline-size: var(--gin-spacing-xxs);

  58. }

  59. 

  60. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar {

  61.   top: 0;

  62.   height: 100%;

  63. }

  64. 

  65. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__header {

  66.   padding-block-start: var(--gin-spacing-xs);

  67. }

  68. 

  69. @media (min-width: 64em) {

  70.   :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__header {

  71.     padding-block-start: 0;

  72.   }

  73. }

  74. 

  75. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__content {

  76.   margin-block-start: calc(var(--gin-spacing-xxs) * -1);

  77.   padding: var(--admin-toolbar-sidebar-header) var(--gin-spacing-s) var(--gin-spacing-s) var(--gin-spacing-s);

  78. }

  79. 

  80. @media (min-width: 64em) {

  81.   :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__content {

  82.     margin-block-start: 0;

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

  84.   }

  85. }

  86. 

  87. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__footer {

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

  89. }

  90. 

  91. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__footer,

  92. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {

  93.   border-block-start-color: var(--gin-border-color-secondary);

  94. }

  95. 

  96. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo {

  97.   border-radius: 10px;

  98.   line-height: 0;

  99. }

  100. 

  101. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo svg rect {

  102.   fill: var(--gin-color-primary);

  103. }

  104. 

  105. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo svg path {

  106.   fill: var(--gin-bg-app);

  107. }

  108. 

  109. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:hover svg rect {

  110.   fill: var(--gin-color-primary-hover);

  111. }

  112. 

  113. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:active svg rect,

  114. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:focus svg rect {

  115.   fill: var(--gin-color-primary-active);

  116. }

  117. 

  118. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #navigation-link-navigationcreate {

  119.   margin-block-start: var(--gin-spacing-xxs);

  120. }

  121. 

  122. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-block__list {

  123.   gap: 0;

  124. }

  125. 

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

  127.   min-height: unset;

  128.   padding-inline: 10px;

  129.   padding-block: calc(var(--gin-spacing-xs) + 1px);

  130.   margin-block-end: var(--gin-spacing-xxxs);

  131. }

  132. 

  133. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button--primary {

  134.   color: var(--gin-color-button-text) !important;

  135. }

  136. 

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

  138.   min-height: auto;

  139.   padding: var(--gin-spacing-xs) var(--gin-spacing-s);

  140.   border: 0 none;

  141.   border-radius: var(--gin-border-m);

  142.   outline: none;

  143. }

  144. 

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

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

  147.     transition: var(--gin-transition);

  148.   }

  149. }

  150. 

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

  152.   --toolbar-button-color: var(--gin-color-button-text);

  153.   --toolbar-button-bg: var(--gin-color-primary);

  154.   --toolbar-button-hover-color: var(--gin-color-button-text);

  155.   --toolbar-button-hover-bg: var(--gin-color-primary-hover);

  156.   --toolbar-button-focus-color: var(--gin-color-button-text);

  157.   --toolbar-button-focus-bg: var(--gin-color-primary-active);

  158.   --toolbar-button-icon-size: var(--gin-font-size-s);

  159. }

  160. 

  161. [dir="ltr"] :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--primary {

  162.   box-shadow: 0.1em 0.25em 0.5em var(--gin-color-primary-light);

  163. }

  164. 

  165. [dir="rtl"] :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--primary {

  166.   box-shadow: -0.1em 0.25em 0.5em var(--gin-color-primary-light);

  167. }

  168. 

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

  170.   display: block;

  171.   width: 32px;

  172.   height: 32px;

  173.   padding: 6px;

  174.   cursor: pointer;

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

  176.   border-radius: var(--gin-border-m);

  177.   background: transparent;

  178.   margin-inline: calc(var(--gin-spacing-xxs) * -1);

  179. }

  180. 

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

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

  183.     transition: background var(--gin-transition-fast);

  184.   }

  185. }

  186. 

  187. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:hover,

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

  189.   background: var(--gin-color-primary-light);

  190. }

  191. 

  192. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:hover::before,

  193. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots:focus::before {

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

  195. }

  196. 

  197. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots[aria-expanded="true"],

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

  199.   background-color: var(--gin-color-primary-light-hover);

  200. }

  201. 

  202. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots[aria-expanded="true"]::before,

  203. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots.is-active::before {

  204.   background-color: var(--gin-color-primary-active);

  205. }

  206. 

  207. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button,

  208. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link {

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

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

  211.   font-variation-settings: unset;

  212. }

  213. 

  214. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button,

  215. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:hover,

  216. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:active,

  217. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link,

  218. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover,

  219. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:active {

  220.   outline: none;

  221.   box-shadow: none;

  222. }

  223. 

  224. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:hover,

  225. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover {

  226.   color: var(--gin-color-primary);

  227.   background-color: var(--gin-bg-item-hover);

  228. }

  229. 

  230. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:active,

  231. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:focus,

  232. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button:hover:focus,

  233. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:active,

  234. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:focus,

  235. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:hover:focus {

  236.   color: var(--gin-color-primary-hover);

  237.   background-color: var(--gin-color-primary-light);

  238. }

  239. 

  240. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button--large {

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

  242. }

  243. 

  244. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) *:focus,

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

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

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

  248. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .local-actions__item *:focus,

  249. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo:focus,

  250. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.toolbar-button:focus,

  251. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button:focus {

  252.   outline: none;

  253.   box-shadow: var(--focus-ring);

  254. }

  255. 

  256. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-menu__link:focus {

  257.   outline: none;

  258.   box-shadow:

  259.     inset 0 0 0 1px var(--gin-color-focus-border),

  260.     inset 0 0 0 3px var(--gin-color-focus);

  261. }

  262. 

  263. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current {

  264.   background-color: var(--gin-bg-item-hover);

  265. }

  266. 

  267. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:hover {

  268.   background-color: var(--gin-color-primary-light);

  269. }

  270. 

  271. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:active,

  272. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:focus,

  273. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current:hover:focus {

  274.   background-color: var(--gin-color-primary-light);

  275. }

  276. 

  277. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current.is-active,

  278. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {

  279.   color: var(--gin-color-primary);

  280.   background-color: var(--gin-color-primary-light);

  281. }

  282. 

  283. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current.is-active::before,

  284. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button:has(+ .toolbar-popover__wrapper .is-active)::before {

  285.   color: var(--gin-color-primary) !important;

  286. }

  287. 

  288. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button__icon {

  289.   margin: -1px;

  290.   color: var(--gin-icon-color);

  291.   stroke-width: 0.03125rem;

  292.   stroke: currentColor;

  293.   inline-size: 22px;

  294.   block-size: 22px;

  295. }

  296. 

  297. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon path:not(:first-of-type) {

  298.   stroke-width: 1.325rem;

  299. }

  300. 

  301. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button--icon--dots path {

  302.   stroke-width: 0.5rem;

  303. }

  304. 

  305. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #navigation-link-navigationcreate:first-child {

  306.   margin-block-end: var(--admin-toolbar-space-8);

  307. }

  308. 

  309. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #navigation-link-navigationcreate:first-child::after {

  310.   display: block;

  311.   margin-block-start: var(--admin-toolbar-space-12);

  312.   content: "";

  313.   border-block-end: 1px solid var(--gin-border-color-secondary);

  314. }

  315. 

  316. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button {

  317.   margin-block-start: calc(var(--gin-spacing-xs) * -1);

  318. }

  319. 

  320. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button,

  321. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__expand-button:hover {

  322.   color: var(--gin-color-text-light);

  323.   border-color: var(--gin-border-color);

  324. }

  325. 

  326. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-popover--expanded {

  327.   background-color: transparent;

  328. }

  329. 

  330. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-popover--expanded > .toolbar-button {

  331.   background-color: var(--gin-bg-item-hover);

  332. }

  333. 

  334. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin--dark-mode .toolbar-popover__wrapper {

  335.   border-inline-start: 2px solid var(--gin-border-color-secondary);

  336. }

  337. 

  338. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__tooltip {

  339.   color: #fff;

  340.   background-color: var(--gin-tooltip-bg);

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

  342. }

  343. 

  344. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-block__list-item[id*="navigation-link-admin-toolbar-toolsextra-links"] {

  345.   display: none;

  346. }

  347. 

  348. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #toolbar-item-shortcuts,

  349. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) #toolbar-item-announcement {

  350.   display: none;

  351. }

  352. 

  353. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-id--toolbar-icon-user {

  354.   display: none !important;

  355. }

  356. 

  357. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-menu {

  358.   gap: 0;

  359. }

  360. 

  361. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-menu__trigger {

  362.   display: none;

  363. }

  364. 

  365. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .gin-secondary-toolbar .toolbar-tray .menu-item + .menu-item {

  366.   border-inline-start: none;

  367. }

  368. 

  369. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-loading #toolbar-item-shortcuts-tray,

  370. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-loading #toolbar-item-shortcuts {

  371.   visibility: hidden;

  372. }

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