toolbar.pcss.css

/**
 * @file
 * Legacy toolbar layout styles.
 */

@import "../base/media-queries.pcss.css";

:root {
  --gin-toolbar-height: 39px;
  --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;

  @media (--admin-large) {
    --gin-toolbar-secondary-height: 64px;
    --gin-icon-size-toolbar: 16px;
    --gin-scroll-offset: 200px;
  }
}

:root .gin--edit-form {
  @media (--admin-large) {
    --gin-sticky-offset: var(--gin-height-sticky);
  }
}

@media (--admin-medium) {
  .toolbar-fixed.toolbar-tray-open:not(.toolbar-vertical) {
    --gin-toolbar-y-offset: 78px;
  }
}

.region-breadcrumb {
  margin-block-start: var(--space-m);
}

.toolbar .toolbar-bar {
  position: fixed;
  inset-inline-start: 0;
  width: 100%;
  background: #100f10;
  box-shadow: none;
}

.toolbar .toolbar-menu,
.toolbar-horizontal .menu-item > .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
.toolbar .toolbar-tray {
  background-color: var(--gin-bg-layer);
}

.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
  border-inline-start: 1px solid var(--gin-border-color);
}

.toolbar-tray-horizontal ul li.menu-item .menu-item {
  border-block-end: 1px solid var(--gin-border-color);
}

.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {
  padding-inline-end: 2.25em;
}

.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
  inset-block-start: 0.75rem;
}

.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
  width: 100%;
}

.toolbar-tray a,
.toolbar-tray span,
.toolbar .toolbar-menu .toolbar-menu a,
.toolbar .toolbar-menu .toolbar-menu span {
  color: var(--gin-color-text);

  &:hover {
    color: var(--gin-color-title);
  }
}

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,
.toolbar .toolbar-tray a.is-active {
  color: var(--gin-color-primary);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a::before,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active::before,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active::before,
.toolbar .toolbar-tray a.is-active::before {
  background: var(--gin-color-primary);
}

.toolbar .toolbar-tray .menu-item:hover > .toolbar-icon,
.toolbar .toolbar-tray .toolbar-menu > li:hover > a {
  color: var(--gin-color-primary-hover);
  background-color: var(--gin-bg-item-hover);
}

.toolbar .toolbar-tray .menu-item:hover > .toolbar-icon::before,
.toolbar .toolbar-tray .toolbar-menu > li:hover > a::before {
  background: var(--gin-color-primary);
}

#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {
  background: #100f10;

  .toolbar-icon.toolbar-icon-edit.toolbar-item,
  .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
  .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
    background: var(--gin-color-primary);
  }

  .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
  .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
    background: var(--gin-color-primary-hover);
  }

  .toolbar-icon.toolbar-icon-edit.toolbar-item:hover::before,
  .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover::before {
    background: #fff;
  }
}

.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus,
.toolbar .toolbar-icon.toolbar-handle:focus {
  background-color: var(--gin-bg-layer2);
}

.toolbar-tray-horizontal .menu-item:hover {
  background-color: transparent;
}

.toolbar-menu__trigger,
.toolbar .menu-item-title,
.menu-item-sub-title {
  display: none !important;
}

.gin--dark-mode .toolbar .toolbar-toggle-orientation {
  background-color: var(--gin-bg-layer2);
}

.gin--toolbar .page-wrapper__node-edit-form .layout-region--secondary {
  padding-block-start: var(--gin-toolbar-y-offset);
}

@media (--admin-large) {
  .gin--toolbar table.sticky-header {
    margin-block-start: 0;
  }
}

.toolbar-menu .menu-item > span {
  padding-inline-start: 2.75em;
}

.toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help {
  width: auto;
  height: 100%;
  text-indent: -999em;

  &::before {
    mask-size: 20px 20px;

    @media (--admin-medium) {
      inset-inline-start: var(--space-m);
    }
  }
}

@media (--admin-large) {
  #toolbar-item-administration-tray .toolbar-logo img {
    max-height: 21px;
  }
}

.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
  position: relative;
}

.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded::before,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus::before {
  inset-block-start: var(--space-s);
  inset-inline-end: var(--space-s);
}

#admin-toolbar-search-tab .form-item::before {
  inset-block-start: 6px;
  inset-inline-start: 26px;
}

#admin-toolbar-search-input {
  padding-inline-start: var(--space-xl);
}

#toolbar-item-administration-tray,
.toolbar-loading #toolbar-item-administration-tray {
  border-block-end: 1px solid var(--gin-border-color);
  box-shadow: 0 0 4px rgb(0, 0, 0, 0.1);
}

#toolbar-item-administration-tray .toolbar-lining,
.toolbar-loading #toolbar-item-administration-tray .toolbar-lining {
  background-color: var(--gin-bg-layer);
}