.gin--navigation { /* * Color Palette. */ --color-focus: var(--gin-color-focus); --drupal--brand-blue: var(--gin-color-primary); /* Blue variations. */ --color-blue-100: var(--gin-color-primary-light); --color-blue-600: var(--gin-color-primary); --color-blue-700: var(--gin-color-primary-hover); /* Gray variations. */ --color-gray-050: rgba(var(--gin-color-primary-light-rgb), .25); --color-gray-100: #dedfe4; --color-gray-300: #c1c2c7; --color-gray-500: #919297; --color-gray-600: #828388; --color-gray-700: #75767b; --color-gray-800: #55565b; --color-gray-900: #393a3f; --color-gray-950: #232429; /** * Spaces. */ --space-xl: var(--gin-spacing-xl); --space-l: var(--gin-spacing-l); --space-m: var(--gin-spacing-m); --space-s: var(--gin-spacing-s); --space-xs: var(--gin-spacing-xs); /** * Font Sizes. */ --font-size-base: var(--gin-font-size); --font-size-s: var(--gin-font-size-s); --font-size-xs: var(--gin-font-size-xxs); --font-size-xxs: .625rem; /* ~10px */ } /** * @file * Admin Toolbar styles. */ /** * Sidebar width is attached to the element because it's used as a * fallback value to the margin-inline-start property of the layout container. */ body { --sidebar-width: 64px; } .admin-toolbar-expanded body { --sidebar-width: 264px; } /** * This zero height div has the [data-offset-left] attribute for * Drupal.displace() to measure. It purposefully does not have any transitions * because we want Drupal.displace() to measure the width immediately */ .admin-toolbar__displace-placeholder { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--sidebar-width); } /** * The Admin toolbar component. */ .admin-toolbar { display: flex; flex-direction: column; box-sizing: border-box; border-inline-end: 1px solid #aaa; background-color: white; border-inline-end: 1px solid var(--color-gray-100); font-size: var(--font-size-base); inline-size: var(--sidebar-width); position: fixed; height: 100vh; z-index: 501; padding-inline: var(--space-xs); padding-block-start: var(--space-xs); overflow-y: scroll; } @media only screen and (max-height: 300px) { .admin-toolbar { min-height: 20rem; } } @media (min-width: 61em) { .admin-toolbar ~ .dialog-off-canvas-main-canvas { margin-inline-start: var(--drupal-displace-offset-left, var(--sidebar-width)); } } @media (min-width: 61em) and (prefers-reduced-motion: no-preference) { .admin-toolbar ~ .dialog-off-canvas-main-canvas { transition: margin-inline-start .2s linear; } } .admin-toolbar-expanded .admin-toolbar { overflow-y: auto; } /* @todo: Correct the class name with a BEM modifier. */ .admin-toolbar-expanded .admin-toolbar .admin-toolbar__sticky-section { padding-inline: var(--space-xs); } .admin-toolbar-expanded .admin-toolbar .admin-toolbar__content .admin-toolbar__item, .admin-toolbar-expanded .admin-toolbar .admin-toolbar__sticky-section .admin-toolbar__item { margin-inline: var(--space-xs); } .admin-toolbar__item { flex: 1 0 100%; } .admin-toolbar__logo { display: inline-block; margin-block-start: var(--space-xs); margin-inline-start: var(--space-xs); border-radius: var(--space-xs); overflow: hidden; } .admin-toolbar__logo:hover { background-color: transparent; } .admin-toolbar__logo:focus { outline: 4px solid var(--color-focus); } .admin-toolbar__logo img { display: block; } /** * Middle Content region. * Region where most of the content will be printed. */ .admin-toolbar__content:not(:last-child) { margin-block-end: 20px; } /** * Sticky bottom region. * Region with less used items and button for collapse. */ .admin-toolbar__sticky-section { background-color: white; margin-block-start: auto; position: sticky; inset-block-end: 0; z-index: 40; margin-inline: calc(var(--gin-spacing-xs) * -1); width: calc(100% + var(--space-m)); border-block-start: 1px solid transparent; box-sizing: inherit; padding-block: var(--space-m); padding-inline: var(--space-xs); } .admin-toolbar__sticky-section.shadow { box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, .14); border-color: var(--color-gray-100); } /** * @file * Admin Toolbar menus styles. */ .toolbar-menu { margin: 0; padding: 0; list-style: none; } .toolbar-menu a { display: block; line-height: 1; } .toolbar-menu .toolbar-link--has-icon { display: flex; align-items: center; } .toolbar-menu .toolbar-menu__item { list-style: none; padding-block-start: 0; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; } .toolbar-menu .toolbar-menu__item--to-title { margin-block: var(--space-s) var(--space-xs); margin-inline-start: var(--space-xs); } .toolbar-menu .toolbar-menu__item--level-2 { margin-inline-start: var(--space-m); } /* Add extra bottom space to the main menu in the flyout. */ .cloned-flyout > .toolbar-menu { padding-block-end: var(--space-l); } .toolbar-menu__submenu { flex: 1 0 100%; } /* Toolbar menu item. */ .toolbar-menu__item { display: flex; align-items: center; justify-content: space-between; background-color: transparent; font-weight: 700; position: relative; flex-wrap: nowrap; } .toolbar-menu__item.toolbar-menu__item--expanded > .toolbar-link { color: var(--color-blue-700); } .toolbar-menu__item.current > .toolbar-link { color: var(--color-blue-600); } .toolbar-menu__item:not(.toolbar-menu__item--expanded) > .toolbar-menu__submenu, .toolbar-menu__item:not(.toolbar-menu__item--expanded) > ul.toolbar-menu { display: none; } .toolbar-menu__item:not(.toolbar-menu__item--level-1) { white-space: normal; } .toolbar-menu__item .toolbar-menu { flex-basis: 100%; } .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link { color: var(--color-gray-950); } .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link::before { background-color: var(--color-gray-950); } .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link:hover { color: var(--color-blue-700); } .toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link:hover, .toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link:focus { color: var(--color-blue-700); } .toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link--has-icon:hover::before, .toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link--has-icon:focus::before { background-color: var(--color-blue-700); } .toolbar-menu__item.toolbar-menu__item--has-dropdown.toolbar-menu__item--expanded { flex-wrap: wrap; } .toolbar-menu__item--level-2 .toolbar-menu__item--has-dropdown > button::after { -webkit-mask-size: var(--space-xs); mask-size: var(--space-xs); } /* Duplicated level-1 toolbar-link to use as title in the flyout. */ .toolbar-menu__item--to-title { color: var(--color-gray-800); justify-content: flex-start; align-items: center; } .toolbar-menu__item--to-title .toolbar-link__label { margin-inline-start: var(--space-xs); } .toolbar-menu__item--user { margin-block-start: 10px; } .toolbar-menu__item--user .navigation-box, .toolbar-menu__item--user .toolbar-menu__item--has-dropdown > button[aria-expanded=true] { background-color: transparent; } .toolbar-menu__item--user .toolbar-menu__item { background-color: transparent; } .toolbar-menu__item--level-1 { border-radius: var(--space-xs); font-size: var(--font-size-s); white-space: nowrap; } .toolbar-menu__item--level-1.toolbar-menu__item--expanded { background-color: var(--color-gray-050); } .toolbar-menu__item--level-1 > .toolbar-link { padding-inline: 5px 10px; border-radius: var(--space-xs); } .toolbar-menu__item--level-1 > .toolbar-link:hover, .toolbar-menu__item--level-1 > .toolbar-link:focus { background-color: var(--color-gray-050); } .toolbar-menu__item--level-1 > .toolbar-link:focus { outline-offset: 0; } .toolbar-menu__item--level-1 > .toolbar-menu__item--has-dropdown > button { inline-size: 40px; block-size: 40px; } .toolbar-menu__item--level-1.toolbar-menu__item--expanded, .toolbar-menu__item--level-1.current { background-color: var(--color-gray-050); } .toolbar-menu__item--level-1.toolbar-menu__item--expanded { font-weight: 700; } .toolbar-menu__item--level-1 .toolbar-menu > .toolbar-menu__item--to-title { display: none; } /* Current page dot indicator. */ .toolbar-menu__item--level-2, .toolbar-menu__item--level-3 { position: relative; font-size: var(--font-size-xs); } .toolbar-menu__item--level-2.current > .toolbar-link::after, .toolbar-menu__item--level-3.current > .toolbar-link::after { content: ""; inline-size: var(--space-xs); block-size: var(--space-xs); position: absolute; inset-inline-start: -11px; inset-block-start: 10px; border-radius: 50%; background-color: var(--color-blue-600); z-index: 1; } .toolbar-menu__item--level-2:not(.current) > .toolbar-link:hover::before, .toolbar-menu__item--level-3:not(.current) > .toolbar-link:hover::before { background-color: var(--color-blue-700); inline-size: 2px; } /* Left gray border for submenu items. */ .toolbar-menu__item--level-2 > .toolbar-link::before, .toolbar-menu__item--level-3 > .toolbar-link::before, .toolbar-menu__item--level-2.toolbar-menu__item--expanded > .toolbar-menu::before { content: ""; block-size: 100%; inline-size: 1px; position: absolute; inset-inline-start: calc(var(--gin-spacing-xs) * -1); inset-block-start: 0; background-color: var(--color-gray-300); } .toolbar-menu__item--level-2.toolbar-menu__item--expanded > .toolbar-menu::before { inset-inline-start: 0; } .toolbar-menu__item--level-2 .toolbar-link { font-weight: 600; } .toolbar-menu__item--level-2 .toolbar-link:hover { /* umami override */ background-color: var(--color-gray-050); z-index: 9; } .toolbar-menu__item--level-2 > .toolbar-link { padding-inline: var(--space-xs); margin-inline-start: var(--space-xs); } .toolbar-menu__item--level-2 > .toolbar-menu { padding-block: var(--space-xs); } .toolbar-menu__item--level-3.toolbar-menu__item { margin-inline-start: var(--space-l); } .toolbar-menu__item--level-3.toolbar-menu__item > .toolbar-link { padding-inline-start: var(--space-s); } /* Collapsed styles.*/ html:not(.admin-toolbar-expanded) .admin-toolbar__item > .toolbar-menu { display: flex; flex-direction: column; align-items: center; } html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 { display: inline-block; } html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 > .toolbar-link span, html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 > .toolbar-menu__item--has-dropdown > button { display: none; opacity: 0; } html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 > .toolbar-menu__submenu { display: none; } html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1 .toolbar-menu__item--to-title { display: inline-block; } html:not(.admin-toolbar-expanded) .toolbar-menu__submenu { position: relative; } html:not(.admin-toolbar-expanded) .cloned-flyout { position: absolute; inset-block-start: 0; inset-inline-start: calc(100% + var(--gin-spacing-xs)); width: 248px; background-color: var(--color-gray-050); border-radius: var(--space-xs); padding-inline-end: var(--space-xs); box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, .14); height: fit-content; z-index: 601; } html:not(.admin-toolbar-expanded) .cloned-flyout .toolbar-menu__arrow-ref { display: block; position: absolute; inline-size: 46px; block-size: 46px; display: flex; align-items: center; margin-inline-start: -2px; } html:not(.admin-toolbar-expanded) .cloned-flyout .toolbar-menu__arrow-ref::before { content: ""; width: 14px; height: 14px; background-color: var(--color-gray-050); z-index: 20; } html[dir="ltr"]:not(.admin-toolbar-expanded) .cloned-flyout .toolbar-menu__arrow-ref::before { transform: rotate(45deg); } html[dir="rtl"]:not(.admin-toolbar-expanded) .cloned-flyout .toolbar-menu__arrow-ref::before { transform: rotate(-45deg); } html:not(.admin-toolbar-expanded) .cloned-flyout .toolbar-menu__item--level-2 { margin-inline-start: calc(var(--space-l) + var(--space-xs)); } .toolbar-menu__arrow-ref { display: none; } /** * @file * Toolbar block styles. */ .toolbar-block__title { padding-inline: 5px 10px; font-size: var(--font-size-xxs); font-weight: 600; color: var(--color-gray-600); text-transform: uppercase; letter-spacing: .8px; margin-block: var(--space-l) var(--space-s); } /* Add extra space when the title is hidden. */ .toolbar-block__title.visually-hidden + .toolbar-block__content { margin-block-start: var(--space-l); } /* Temporarily hide titles on collapse. */ html:not(.admin-toolbar-expanded) .admin-toolbar__content .admin-toolbar__item .toolbar-block__title, html:not(.admin-toolbar-expanded) .admin-toolbar__sticky-section .toolbar-block__title { display: none; } /** * @file * Toolbar link styles. */ .toolbar-link { position: relative; padding-block: 10px; padding-inline: 0; color: var(--color-gray-800); text-decoration: none; flex-grow: 1; font-weight: 700; border-radius: var(--space-xs); line-height: 1.2; background: none; border: none; } .toolbar-link:hover { z-index: 20; color: var(--gin-color-primary-hover); background-color: var(--gin-color-primary-light); } .toolbar-link:focus { outline: none; box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus); } .toolbar-link + .toolbar-menu__item--has-dropdown > button { margin-inline-start: 4px; } /** * Specific styles when toolbar-link is a button that toggles a submenu or * content. */ button.toolbar-link { border: 0; z-index: 1; display: flex; align-items: center; background-color: transparent; cursor: pointer; text-align: start; /* Chevron styles. */ } button.toolbar-link:not(.toolbar-link--sidebar-toggle)::after { display: block; block-size: var(--space-s); inline-size: var(--space-s); -webkit-mask-size: var(--space-s); mask-size: var(--space-s); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; background-color: var(--color-gray-500); -webkit-mask-image: url("../../media/sprite.svg#chevron-down-view"); mask-image: url("../../media/sprite.svg#chevron-down-view"); content: ""; margin-inline-start: auto; } button.toolbar-link:hover::after, button.toolbar-link:focus::after { background-color: var(--color-blue-700); } button.toolbar-link + a { margin-inline-end: var(--space-xl); } /* Chevron styles when the item is expanded. */ [dir="ltr"] .toolbar-menu__item--expanded.toolbar-menu__item--has-dropdown > button::after { transform: rotate(180deg); } [dir="rtl"] .toolbar-menu__item--expanded.toolbar-menu__item--has-dropdown > button::after { transform: rotate(-180deg); } /* Sidebar collapsed styles.*/ html:not(.admin-toolbar-expanded) .toolbar-link { padding-inline: 10px; padding-block: 10px; flex-grow: unset; flex-basis: 100%; } html:not(.admin-toolbar-expanded) .toolbar-menu__item--to-title > .toolbar-link { display: flex; align-items: center; font-weight: var(--gin-font-weight-semibold); } html:not(.admin-toolbar-expanded) .toolbar-menu__item--to-title > .toolbar-link:hover { color: var(--gin-color-primary-hover); } html:not(.admin-toolbar-expanded) .toolbar-menu__item--to-title > .toolbar-link:focus { color: var(--gin-color-primary-active); background-color: var(--gin-color-primary-light-hover); } html:not(.admin-toolbar-expanded) .toolbar-menu__item--has-dropdown.toolbar-menu__item--level-1 > button.toolbar-link::after, html:not(.admin-toolbar-expanded) .toolbar-menu__item--to-title > button.toolbar-link::after { content: unset; } .toolbar-link--sidebar-toogle { background: none; border: none; cursor: pointer; line-height: 1; } .toolbar-link--sidebar-toogle:hover, .toolbar-link--sidebar-toogle:focus { background-color: var(--color-gray-050); } .toolbar-link--has-icon { display: flex; align-items: center; } .toolbar-link--has-icon span { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .toolbar-link--has-icon span { transition: opacity .4s ease; } } .toolbar-link--has-icon::before { content: ""; width: 20px; height: 20px; display: block; background-color: var(--color-gray-800); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-image: var(--icon); mask-image: var(--icon); } .admin-toolbar-expanded .toolbar-link--has-icon::before { margin-inline-end: 10px; } .current > .toolbar-link--has-icon::before { background-color: var(--color-blue-600); } /* Visually-hidden button text. */ .toolbar-link__action { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } :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; --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); } } @media (max-width: 60.99em) { body.gin--navigation { padding-block-start: var(--gin-toolbar-y-offset) !important; padding-inline-start: var(--gin-toolbar-x-offset, 39px) !important; } } .gin--navigation .gin-secondary-toolbar:not(.gin-secondary-toolbar--frontend) { margin-block-end: var(--gin-spacing-xxs); } .gin--navigation .gin-secondary-toolbar--frontend { z-index: 102; margin-inline-start: var(--gin-toolbar-x-offset); } @media (prefers-reduced-motion: no-preference) { .admin-toolbar ~ .dialog-off-canvas-main-canvas, .gin--navigation .gin-secondary-toolbar--frontend { transition: margin-inline-start var(--gin-transition-fast), margin-inline-start var(--gin-transition-fast); } } .gin--navigation { padding-block-start: 0 !important; } .gin--navigation .admin-toolbar { font-family: var(--gin-font); inset-block-start: 0; overflow-y: initial; padding-inline: 0; padding-block-start: 0; border-inline-end: 1px solid var(--gin-border-color-layer); } @media (max-width: 60.99em) { .gin--navigation .admin-toolbar { display: none; } } .gin--navigation .admin-toolbar::after { display: none; } .gin--navigation .admin-toolbar__content { padding-block: var(--gin-spacing-xxs); padding-inline: var(--gin-spacing-xs); margin-block-end: 0; overflow-y: auto; } [dir="ltr"] .gin--navigation .admin-toolbar__content { background: linear-gradient(var(--gin-bg-layer) 30%, var(--gin-bg-layer)), linear-gradient(var(--gin-bg-layer), var(--gin-bg-layer) 80%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%; } [dir="rtl"] .gin--navigation .admin-toolbar__content { background: linear-gradient(var(--gin-bg-layer) 30%, var(--gin-bg-layer)), linear-gradient(var(--gin-bg-layer), var(--gin-bg-layer) 80%) 100% 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 100% 100%; } [dir] .gin--navigation .admin-toolbar__content { background-color: var(--gin-bg-layer); background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; background-size: 100% 40px, 100% 40px, 100% 16px, 100% 16px; } .gin--navigation .admin-toolbar__sticky-section { position: static; width: 100%; margin-inline: 0; padding-block-start: var(--gin-spacing-xs); padding-block-end: 0; } .gin--navigation .admin-toolbar, .gin--navigation .admin-toolbar__sticky-section { background: var(--gin-bg-layer); } .gin--navigation .admin-toolbar__header { margin-block-end: -0.5rem; } .gin--navigation .admin-toolbar__header:has(img) { margin-block-end: -1.25rem; } .gin--navigation .toolbar-block__content.toolbar-block__content--content { margin-block-start: var(--space-s); } .gin--navigation .toolbar-link { color: var(--gin-color-text); font-weight: normal; } .gin--navigation .toolbar-menu { margin-inline: 0; } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link { padding-block: calc(var(--gin-spacing-xs) + 1px); margin-block-end: var(--gin-spacing-xxxs); } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:focus { outline: none; box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus); } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--create { margin-block-start: var(--gin-spacing-l); } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--sidebar-toggle { margin-block-end: calc(var(--gin-spacing-xxs) * -1); } .gin--navigation .menu-item.current > .toolbar-link { color: var(--gin-color-primary); } .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded, .gin--navigation .toolbar-menu__item--level-1.current, .gin--navigation .toolbar-menu__item--level-1.active-path, .gin--navigation .toolbar-menu__item--level-2.active-path { background-color: transparent; } .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link { color: var(--gin-color-primary); background-color: var(--gin-color-primary-light); } .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link::after { background: var(--gin-color-primary); } @media (forced-colors: active) { .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link::after { background-color: LinkText; } } .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-link:focus, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-1.current > .toolbar-link:focus, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-1.active-path > .toolbar-link:focus, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-2.active-path > .toolbar-link:focus { color: var(--gin-color-primary-hover); background-color: var(--gin-color-primary-light-hover); } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:focus, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:focus, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:hover, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:focus, .gin--navigation .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link, .gin--navigation .toolbar-link--sidebar-toggle:hover, .gin--navigation .toolbar-link--sidebar-toggle:focus { color: var(--gin-color-primary-hover); background-color: var(--gin-bg-item-hover); } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:hover::before, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:hover::after, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:focus::before, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:focus::after, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:hover::before, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:hover::after, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:focus::before, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:focus::after, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:hover::before, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:hover::after, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:focus::before, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:focus::after, .gin--navigation .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link::before, .gin--navigation .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link::after, .gin--navigation .toolbar-link--sidebar-toggle:hover::before, .gin--navigation .toolbar-link--sidebar-toggle:hover::after, .gin--navigation .toolbar-link--sidebar-toggle:focus::before, .gin--navigation .toolbar-link--sidebar-toggle:focus::after { background: var(--gin-color-primary); } @media (forced-colors: active) { .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:hover::before, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:hover::after, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:focus::before, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link:focus::after, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:hover::before, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:hover::after, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:focus::before, .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link:focus::after, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:hover::before, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:hover::after, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:focus::before, .gin--navigation .toolbar-menu__item--level-2 .toolbar-link:focus::after, .gin--navigation .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link::before, .gin--navigation .toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link::after, .gin--navigation .toolbar-link--sidebar-toggle:hover::before, .gin--navigation .toolbar-link--sidebar-toggle:hover::after, .gin--navigation .toolbar-link--sidebar-toggle:focus::before, .gin--navigation .toolbar-link--sidebar-toggle:focus::after { background-color: LinkText; } } .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--manage-fields, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--manage-form-display, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--manage-display, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--manage-permissions, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--delete, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link--announcements-feed-announcement, .gin--navigation .toolbar-menu__item--level-1 > .toolbar-link[class*=toolbar-link--admin-toolbar-tools-extra-], .gin--navigation .toolbar-menu__item--level-1[data-url*="/media/add/"] { display: none; } .gin--navigation .toolbar-menu__item--level-2, .gin--navigation .toolbar-menu__item--level-3 { font-size: var(--gin-font-size-xs); } .gin--navigation .toolbar-menu__item--level-2.current > .toolbar-link::after, .gin--navigation .toolbar-menu__item--level-3.current > .toolbar-link::after { background-color: var(--gin-color-primary); } .gin--navigation .toolbar-menu__item--level-2 > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-3 > .toolbar-link::before, .gin--navigation .toolbar-menu__item--level-2.menu-item--expanded > .toolbar-menu::before { background-color: var(--gin-border-color-layer2); } .gin--navigation .toolbar .toolbar-menu, .gin--navigation .toolbar .toolbar-icon.toolbar-handle { background-color: transparent; } .gin--navigation .toolbar .toolbar-menu .toolbar-menu a { color: var(--gin-color-text); } .gin--navigation .admin-toolbar__item { flex-basis: unset; flex-grow: unset; } .gin--navigation .admin-toolbar__item > .toolbar-menu { margin-block-start: 0; } html:not(.admin-toolbar-expanded) .gin--navigation .cloned-flyout, html:not(.admin-toolbar-expanded) .gin--navigation .cloned-flyout .toolbar-menu__arrow-ref::before, html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1 > .toolbar-menu-wrapper, html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-menu-wrapper .toolbar-menu__arrow-ref::before { background-color: var(--gin-bg-layer3); } .admin-toolbar-expanded .admin-toolbar .admin-toolbar__content .admin-toolbar__item, .admin-toolbar-expanded .admin-toolbar .admin-toolbar__sticky-section .admin-toolbar__item { margin-inline: var(--gin-spacing-xxs); } .toolbar-menu__item--to-title { padding-inline: 6px; } .toolbar-menu__item--level-1 .toolbar-link, .dashboard-link .toolbar-link { padding-inline: 10px; } .toolbar-anti-flicker.toolbar-loading.toolbar-fixed body.gin--navigation, .toolbar-anti-flicker.toolbar-loading.toolbar-fixed.toolbar-horizontal.toolbar-tray-open body.gin--navigation { padding-block-start: 0; } .toolbar-menu .toolbar-link--has-icon, .toolbar-menu .toolbar-link--has-icon .toolbar-link__label { text-overflow: ellipsis; overflow: hidden; } .toolbar-menu .toolbar-link--has-icon::before, .toolbar-menu .toolbar-link--has-icon::after { flex-shrink: 0; } button.toolbar-link--sidebar-toggle { background: var(--gin-bg-layer2); } button.toolbar-link--sidebar-toggle::before { opacity: .75; position: relative; -webkit-mask-size: var(--space-s) var(--space-s); mask-size: var(--space-s) var(--space-s); } @media (prefers-reduced-motion: no-preference) { button.toolbar-link--sidebar-toggle::before { transition: transform var(--gin-transition); } } button.toolbar-link--sidebar-toggle:hover::before, button.toolbar-link--sidebar-toggle:active::before, button.toolbar-link--sidebar-toggle:focus::before { opacity: 1; } button.toolbar-link--sidebar-toggle[aria-expanded=false]::before { inset-inline-start: 1px; } [dir="ltr"] button.toolbar-link--sidebar-toggle[aria-expanded=false]::before { transform: rotate(-90deg); } [dir="rtl"] button.toolbar-link--sidebar-toggle[aria-expanded=false]::before { transform: rotate(90deg); } button.toolbar-link--sidebar-toggle[aria-expanded=true]::before { inset-inline-start: -1px; } [dir="ltr"] button.toolbar-link--sidebar-toggle[aria-expanded=true]::before { transform: rotate(90deg); } [dir="rtl"] button.toolbar-link--sidebar-toggle[aria-expanded=true]::before { transform: rotate(-90deg); } .toolbar-link--has-icon { --icon: url("../../media/sprite.svg#fallback-view"); /* Default icon, aka --basic */ } .toolbar-link--has-icon::before { width: var(--gin-icon-size-toolbar); height: var(--gin-icon-size-toolbar); background-color: var(--gin-icon-color); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .toolbar-link--has-icon:hover::before, .toolbar-link--has-icon:focus::before { background-color: var(--gin-color-primary); } .admin-toolbar__logo { margin: 0; overflow: unset; } .admin-toolbar__logo img { width: 40px; height: auto; } .admin-toolbar__logo .toolbar-link:not(.toolbar-link--gin-home) { padding: var(--gin-spacing-xxs) !important; margin-block-start: var(--gin-spacing-xxs); } .admin-toolbar__logo .toolbar-link--gin-home { color: var(--gin-bg-layer2); box-sizing: border-box; width: 40px; height: 40px; max-width: 40px; padding: 10px !important; margin-block: 6px 0 !important; margin-inline: var(--gin-spacing-xxs) !important; } .admin-toolbar__logo .toolbar-link--gin-home, .admin-toolbar__logo .toolbar-link--gin-home:hover, .admin-toolbar__logo .toolbar-link--gin-home:focus { background: var(--gin-color-primary) !important; } @media (forced-colors: active) { .admin-toolbar__logo .toolbar-link--gin-home, .admin-toolbar__logo .toolbar-link--gin-home:hover, .admin-toolbar__logo .toolbar-link--gin-home:focus { background: CanvasText !important; } } .admin-toolbar__logo .toolbar-link--gin-home::before { --icon: url("../../media/sprite.svg#drupal-view"); background: var(--gin-bg-layer2) !important; } @media (forced-colors: active) { .admin-toolbar__logo .toolbar-link--gin-home::before { background: Canvas !important; } } .admin-toolbar__logo .toolbar-link--gin-home span { display: none; } .admin-toolbar-expanded .admin-toolbar__logo .toolbar-link--gin-home { margin-inline-start: 0; } .admin-toolbar-expanded .admin-toolbar__logo .toolbar-link--gin-home::before { margin-inline-end: 0; } .admin-toolbar__content .toolbar-block:nth-last-child(n+2)::after { margin-block-start: calc(var(--gin-spacing-s) - var(--gin-spacing-xxs)); padding-block-start: calc(var(--gin-spacing-xs) + var(--gin-spacing-xxs)); content: ""; display: block; border-block-start: 1px solid var(--gin-border-color-table); } .toolbar-icon-workbench-content-tab::before, .toolbar-link--admin-toolbar-tools-help::before, .toolbar-button--icon--admin-toolbar-tools-help::before, .toolbar-button--icon--navigation-extra-tools-help::before { --icon: url("../../media/sprite.svg#tool-view"); } .toolbar-icon-system-themes-page::before, .toolbar-link--system-themes-page::before, .toolbar-button--icon--system-themes-page::before { --icon: url("../../media/sprite.svg#appearance-view"); } .toolbar-link--blocks::before, .toolbar-button--icon--navigation-blocks::before { --icon: url("../../media/sprite.svg#blocks-view"); } .toolbar-link--bookmarks::before, .toolbar-button--icon--bookmarks::before { --icon: url("../../media/sprite.svg#bookmarks-view"); } .toolbar-icon-shortcut::before, .toolbar-button--icon--shortcuts::before { --icon: url("../../media/sprite.svg#shortcut-view"); } .toolbar-icon-system-admin-config::before, .toolbar-link--system-admin-config::before, .toolbar-button--icon--system-admin-config::before { --icon: url("../../media/sprite.svg#config-view"); } .toolbar-icon-system-admin-content::before, .toolbar-link--content::before, .toolbar-button--icon--navigation-content::before { --icon: url("../../media/sprite.svg#content-view"); } .toolbar-link--create::before, .toolbar-button--icon--navigation-create::before { --icon: url("../../media/sprite.svg#create-view"); } .toolbar-button--icon--thin-pencil::before { --icon: url("../../media/sprite.svg#edit-view"); } .toolbar-icon-system-modules-list::before, .toolbar-link--system-modules-list::before, .toolbar-button--icon--system-modules-list::before { --icon: url("../../media/sprite.svg#extend-new-view"); } .toolbar-link--files::before, .toolbar-button--icon--navigation-files::before { --icon: url("../../media/sprite.svg#files-view"); } .toolbar-icon-help-main::before, .toolbar-icon-help::before, .toolbar-link--help::before, .toolbar-button--icon--help::before { --icon: url("../../media/sprite.svg#help-view"); } .toolbar-icon-commerce-admin-commerce::before, .toolbar-link--commerce-admin-commerce::before, .toolbar-button--icon--commerce-admin-commerce::before, .toolbar-icon-commerce-inbox::before, .toolbar-link---commerce-inbox::before, .toolbar-button--icon--commerce-inbox::before { --icon: url("../../media/sprite.svg#commerce-view"); } .toolbar-link--media::before, .toolbar-button--icon--navigation-media::before { --icon: url("../../media/sprite.svg#media-view"); } .toolbar-icon-entity-user-collection::before, .toolbar-link--entity-user-collection::before, .toolbar-button--icon--entity-user-collection::before { --icon: url("../../media/sprite.svg#people-new-view"); } .toolbar-icon-system-admin-reports::before, .toolbar-link--system-admin-reports::before, .toolbar-button--icon--system-admin-reports::before { --icon: url("../../media/sprite.svg#reports-view"); } .toolbar-icon-system-admin-structure::before, .toolbar-link--system-admin-structure::before, .toolbar-button--icon--system-admin-structure::before { --icon: url("../../media/sprite.svg#structure-view"); } .toolbar-icon-entity-webform-collection::before, .toolbar-link--entity-webform-collection::before, .toolbar-button--icon--entity-webform-collection::before { --icon: url("../../media/sprite.svg#webform-view"); } .toolbar-link--sidebar-toggle[aria-expanded=false]::before, .toolbar-link--sidebar-toggle[aria-expanded=true]::before, .toolbar-link--sidebar-toggle[aria-expanded=false]::before, .toolbar-link--sidebar-toggle[aria-expanded=true]::before { --icon: url("../../media/sprite.svg#chevron-down-view"); } .toolbar-icon-user::before, .toolbar-link--user::before, .toolbar-button--icon--user::before, .toolbar-button--icon--navigation-user-links-user-wrapper::before { --icon: url("../../media/sprite.svg#user-view"); } .toolbar-icon-announcements-feed-announcement::before, .toolbar-icon-announce::before, .toolbar-link--announcements-feed-announcement::before, .toolbar-button--icon--announcements-feed-announcement::before { --icon: url("../../media/sprite.svg#announcement-view"); } .toolbar-icon-system-admin-group::before, .toolbar-link--system-admin-group::before, .toolbar-button--icon--system-admin-group::before { --icon: url("../../media/sprite.svg#group-view"); } .toolbar-icon-tmgmt-admin-tmgmt::before, .toolbar-link--tmgmt-admin-tmgmt::before, .toolbar-icon-language::before, .toolbar-link--language::before, .toolbar-button--icon--tmgmt-admin-tmgmt::before, .toolbar-button--icon--language::before { --icon: url("../../media/sprite.svg#tmgmt-view"); } .toolbar-icon-bat-admin::before, .toolbar-link--bat-admin::before, .toolbar-button--icon--bat-admin::before { --icon: url("../../media/sprite.svg#bat-view"); } .toolbar-icon-menu::before, .toolbar-button--icon--burger::before { --icon: url("../../media/sprite.svg#hamburger-view"); } .toolbar-icon-coffee::before, #toolbar-item-administration-search::before, #admin-toolbar-mobile-search-tab .toolbar-icon::before { --icon: url("../../media/sprite.svg#search-view"); } .toolbar-icon-devel::before, .toolbar-button--icon--devel::before { --icon: url("../../media/sprite.svg#devel-view"); } .toolbar-icon-rebuild-cache-access::before { --icon: url("../../media/sprite.svg#rebuild-cache-view"); } .responsive-preview-icon::before { --icon: url("../../media/sprite.svg#responsive-preview-view"); } .toolbar-icon-environment::before, .toolbar-button--icon--environment::before { --icon: url("../../media/sprite.svg#server-view"); } .toolbar-icon-toggle-vertical::before, .toolbar-button--icon--back::before { --icon: url("../../media/sprite.svg#nav-toggle-toleft-view"); } .toolbar-icon-toggle-horizontal::before { --icon: url("../../media/sprite.svg#nav-toggle-totop-view"); } .toolbar-button--icon--cross::before { --icon: url("../../media/sprite.svg#close-view"); } .toolbar-button--icon--navigation-trash { --icon: url("../../media/sprite.svg#trash-module-view"); } .gin-secondary-toolbar .toolbar-menu__trigger { display: none; } .gin-secondary-toolbar .toolbar-tray .menu-item + .menu-item { border-inline-start: none; } .gin--navigation .toolbar-link--user { display: none !important; } #toolbar-administration .toolbar-menu__item--level-1 { display: block; } #toolbar-administration .menu-item { font-weight: var(--gin-font-weight-normal); } @media (min-width: 61em) { #toolbar-administration { display: none; } } .toolbar-menu__title, .toolbar-menu__sub-title, .toolbar-menu__trigger { display: none !important; }