.gin-secondary-toolbar__layout-container *:focus { outline: none; box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus); } .gin-secondary-toolbar { z-index: 102; position: relative; display: flex; align-items: center; padding-top: var(--gin-spacing-xs); padding-bottom: var(--gin-spacing-xs); margin-top: -1px; height: var(--gin-toolbar-secondary-height); border-bottom: 1px solid var(--gin-border-color-secondary); box-sizing: border-box; } @media (min-width: 61em) { .gin-secondary-toolbar { padding: 10px 0; } } .gin-secondary-toolbar--frontend { z-index: 501; /* on top of the Drupal world */ position: sticky; top: 0; margin-top: 0; height: var(--gin-toolbar-secondary-height); background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--gin-border-color-layer); box-sizing: border-box; } @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) { .gin-secondary-toolbar--frontend { opacity: .999; /* Fix Chrome issue with mask */ background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .gin--dark-mode .gin-secondary-toolbar--frontend { background: rgba(27, 27, 29, .98); } @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) { .gin--dark-mode .gin-secondary-toolbar--frontend { background: rgba(7, 7, 7, .9); } } .gin--high-contrast-mode .gin-secondary-toolbar--frontend { background: var(--gin-bg-app); -webkit-backdrop-filter: none; backdrop-filter: none; } @media (min-width: 90em) { .gin--edit-form .gin-secondary-toolbar { position: relative; } [dir="ltr"] .gin--edit-form .gin-secondary-toolbar { left: calc(50% - var(--gin-spacing-xxl)); transform: translateX(-50%); } [dir="rtl"] .gin--edit-form .gin-secondary-toolbar { right: calc(50% - var(--gin-spacing-xxl)); transform: translateX(50%); } } .gin-secondary-toolbar__layout-container { display: flex; align-items: center; min-width: 1px; width: 100%; margin: 0 var(--gin-spacing-m); } @media (min-width: 48em) { .gin-secondary-toolbar__layout-container { margin: 0 var(--gin-spacing-xl); } } @media (min-width: 61em) { .gin-secondary-toolbar__layout-container { margin: 0 min(5vw, var(--gin-spacing-xxl)); } } .gin-secondary-toolbar .region-breadcrumb { min-height: 1.25rem; } .gin-breadcrumb-wrapper { flex-grow: 1; white-space: nowrap; } [dir="ltr"] .gin-breadcrumb-wrapper { margin-right: var(--gin-spacing-xl); } [dir="rtl"] .gin-breadcrumb-wrapper { margin-left: var(--gin-spacing-xl); } .gin-back-to-admin { font-family: var(--gin-font); font-size: var(--gin-font-size-xs); font-weight: var(--gin-font-weight-normal); line-height: 2; color: var(--gin-color-text-light); text-decoration: none; position: relative; border-bottom: 0 none; border-radius: var(--gin-border-xxs); } [dir="ltr"] .gin-back-to-admin { padding-left: 2em; } [dir="rtl"] .gin-back-to-admin { padding-right: 2em; } .gin-back-to-admin::before { content: ""; display: inline-block; position: absolute; top: 50%; width: var(--gin-icon-size-toolbar-secondary); height: var(--gin-icon-size-toolbar-secondary); transform: translateY(-50%); background-color: var(--gin-icon-color); -webkit-mask-image: url("../../media/sprite.svg#backtosite-view"); mask-image: url("../../media/sprite.svg#backtosite-view"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center center; mask-position: center center; } [dir="ltr"] .gin-back-to-admin::before { left: 0; } [dir="rtl"] .gin-back-to-admin::before { right: 0; } .gin-back-to-admin:hover { color: var(--gin-color-primary-hover); } .gin-back-to-admin:hover::before { background-color: var(--gin-color-primary-hover); } @media (min-width: 61em) { .toolbar .toolbar-bar { background: transparent; } .toolbar .toolbar-bar .toolbar-tab, .toolbar .toolbar-bar .toolbar-tab .toolbar-menu__logo { display: none; } .toolbar .toolbar-bar .toolbar-tab.toolbar-tab--toolbar-item-administration { display: block; } .toolbar-tab--toolbar-item-administration > .toolbar-icon-menu { display: none; } #toolbar-item-administration-tray { display: block; position: absolute; top: 0; } } @media (min-width: 61em) { #toolbar-administration-secondary .toolbar-bar { position: relative; display: flex; align-items: center; height: 100%; } } .gin-secondary-toolbar .toolbar-secondary { display: none; } @media (min-width: 61em) { .gin-secondary-toolbar .toolbar-secondary { display: block; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar { height: var(--gin-toolbar-height); z-index: 102; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab { display: block; position: relative; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus-within { border-radius: var(--gin-border-s) var(--gin-border-s) 0 0; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover > .toolbar-item, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus-within > .toolbar-item { color: var(--gin-color-title); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover > .toolbar-item:before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus-within > .toolbar-item:before { background: var(--gin-color-title); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .toolbar-tray, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus-within .toolbar-tray { display: block; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item { font-size: 0; color: var(--gin-color-text-light); width: 32px; height: 32px; margin: 0; border-radius: var(--gin-border-s) var(--gin-border-s) 0 0; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:before { top: 0; } [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:before { left: 10px; } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:before { right: 10px; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:focus { border-radius: var(--gin-border-s); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:focus ~ .toolbar-tray { display: block; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:hover, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:focus { color: var(--gin-color-title); background: none; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:hover::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:focus::before { background-color: var(--gin-color-title); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:focus, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:hover:focus { box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus .trigger { text-decoration: none; background: var(--gin-bg-layer3); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray { position: absolute; width: 170px; background-color: var(--gin-bg-layer3); border-bottom: 0 none; box-shadow: var(--gin-shadow-l2); } [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray { left: 0; border-radius: 0 var(--gin-border-l) var(--gin-border-l) var(--gin-border-l); } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray { right: 0; border-radius: var(--gin-border-l) 0 var(--gin-border-l) var(--gin-border-l); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a { color: var(--gin-color-primary); padding: var(--gin-spacing-s) var(--gin-spacing-m); border-radius: var(--gin-border-s); font-size: var(--gin-font-size-xs); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a:hover, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a:active { color: var(--gin-color-button-text); background-color: var(--gin-color-primary); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a.action-link::before { background-color: var(--gin-color-primary); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a.action-link:hover::before { background-color: var(--gin-color-button-text); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray .toolbar-lining:not(:empty) { padding: var(--gin-spacing-xs); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray .toolbar-icon:before { display: none; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab.hidden { display: none; } [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:nth-last-child(2) .toolbar-tray, [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:last-child .toolbar-tray { left: auto; right: 0; border-radius: var(--gin-border-l) 0 var(--gin-border-l) var(--gin-border-l); } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:nth-last-child(2) .toolbar-tray, [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:last-child .toolbar-tray { right: auto; left: 0; border-radius: 0 var(--gin-border-l) var(--gin-border-l) var(--gin-border-l); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:active, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:focus, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item.is-active, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item.is-active:hover { font-weight: var(--gin-font-weight-normal); color: var(--gin-color-text-light); background-color: transparent; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:active::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:focus::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item.is-active::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item.is-active:hover::before { background-image: none; background-color: var(--gin-icon-color); } } @media (min-width: 61em) and (min-width: 80em) { [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user { margin-right: -1.333em; } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user { margin-left: -1.333em; } } @media (min-width: 61em) { .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user:hover .icon-user { box-shadow: 0 0 0 2px var(--gin-bg-app), 0 0 0 5px var(--gin-bg-layer3); } } @media (min-width: 61em) { .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user { border: 1px solid var(--gin-border-color); overflow: hidden; padding: 0; line-height: 0; } [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user { margin-left: var(--gin-spacing-m); } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user { margin-right: var(--gin-spacing-m); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user:focus { border-radius: 50%; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user__image { width: 100%; height: 100%; object-fit: cover; } } @media (min-width: 61em) and (min-width: 80em) { [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user, [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user ~ .toolbar-tray { margin-right: 1.333em; } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user, [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user .icon-user ~ .toolbar-tray { margin-left: 1.333em; } } @media (min-width: 61em) { .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-menu { background-color: transparent; } } @media (min-width: 80em) { [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab { margin-left: -0.25em; } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab { margin-right: -0.25em; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item { font-size: var(--gin-font-size-xs); width: auto; height: auto; } [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item { padding-left: 2.875em; } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item { padding-right: 2.875em; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item::before { width: var(--gin-icon-size-toolbar-secondary); height: var(--gin-icon-size-toolbar-secondary); top: 50%; transform: translateY(-50%); } [dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item::before { left: 12px; } [dir="rtl"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item::before { right: 12px; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item .icon-user__image { width: 34px; height: 34px; } } #admin-toolbar-search-input { line-height: 1; padding-top: 10px; padding-bottom: 10px; font-size: var(--gin-font-size-xs); } [dir="ltr"] #admin-toolbar-search-input { margin-right: 12px; } [dir="rtl"] #admin-toolbar-search-input { margin-left: 12px; } #admin-toolbar-search-input::placeholder { color: var(--gin-color-disabled); opacity: 1; } .gin--dark-mode #admin-toolbar-search-input::placeholder { color: var(--gin-color-text-light); opacity: .75; } #admin-toolbar-search-tab .js-form-item.form-item { margin-top: 0; } .ui-autocomplete.admin-toolbar-search-autocomplete-list { max-width: 320px; border-radius: var(--gin-border-m); } .ui-autocomplete.admin-toolbar-search-autocomplete-list .ui-menu-item-wrapper { font-size: var(--gin-font-size-xs); }