.page-versions { /* margin: 0 0.2rem 0 auto; */ position: relative; display: flex; align-items: center; justify-content: space-between; line-height: 1; height: var(--toolbar-height); margin: 1rem 0.7rem; padding: 0 1.25em; } /* @media screen and (min-width: 1024px) { .page-versions { margin-right: 0.7rem; } } */ .page-versions .backdrop { display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 2; } .backdrop.is-active { display: block; } .page-versions h2.title { color: var(--nav-heading-font-color); font-size: inherit; font-weight: var(--body-font-weight-bold); margin: 0; /* padding: 0.25em 0 0.125em 0.75em; */ } .page-versions .version-menu-toggle { color: var(--color-bwg-main); font-weight: 600; background: url(../img/chevron.svg) no-repeat; background-position: right 0.5rem top 50%; background-size: auto 0.75em; outline: none; line-height: inherit; padding: 0.5rem 2rem 0.5rem 1rem; position: relative; border-radius: 0.5rem; border: 2px solid var(--color-smoke-90); transition: all 0.15s ease-in-out; z-index: var(--z-index-page-version-menu); } .page-versions .version-menu-toggle:hover { border: 2px solid var(--color-bwg-main); } .page-versions .version-menu { display: flex; min-width: 85px; flex-direction: column; align-items: flex-start; /* background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat; */ background-color: white; padding: 0.25rem; position: absolute; top: 45px; right: 22px; white-space: nowrap; z-index: var(--z-index-page-version-menu); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); border-radius: 0.5rem; } .page-versions:not(.is-active) .version-menu { display: none; } .page-versions .version { color: var(--color-gray-50); width: 100%; display: block; padding: 0.35rem 0 0.35rem 0.85rem; border-radius: 0.5rem; } .page-versions .version:hover { background-color: var(--color-blue-10); } .page-versions .version.is-current { display: none; } .page-versions .version.is-missing { color: var(--page-version-missing-font-color); font-style: italic; text-decoration: none; }