diff options
Diffstat (limited to 'core/css/header.scss')
| -rw-r--r-- | core/css/header.scss | 384 |
1 files changed, 185 insertions, 199 deletions
diff --git a/core/css/header.scss b/core/css/header.scss index 8e576113246..e14e1eecb11 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -3,171 +3,128 @@ * SPDX-FileCopyrightText: 2016 ownCloud, Inc. * SPDX-License-Identifier: AGPL-3.0-or-later */ -@use 'variables'; - -/* prevent ugly selection effect on accidental selection */ -#header, -#expanddiv { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible { - outline: none; - } - - a:not(.button):focus-visible::after, .button-vue:focus-visible::after, div[role=button]:focus-visible::after { - content: " "; - position: absolute; - transform: translateX(-50%); - width: 12px; - height: 2px; - border-radius: 3px; - background-color: var(--color-background-plain-text); - left: 50%; - opacity: 1; - } - - a:not(.button):focus-visible::after, .button-vue:focus-visible::after { - bottom: 2px; - } - - .header-right { - // Add some spacing so the last entry looks ok - margin-inline-end: calc(3 * var(--default-grid-baseline)); - - a:not(.button):focus-visible::after, div[role=button]:focus-visible::after { - bottom: 4px; - } - - #expand.menutoggle:focus-visible::after { - left: 40%; - } - } +@mixin header-menu-height() { + min-height: calc(var(--default-clickable-area) * 1.5); // show at least 1.5 entries + max-height: calc(100vh - var(--header-height) - (2 * var(--default-grid-baseline))); } -/* HEADERS ------------------------------------------------------------------ */ -#body-user #header, -#body-settings #header, -#body-public #header { - display: inline-flex; +/* Skip navigation links – show only on keyboard focus */ +#skip-actions { position: absolute; - top: 0; - width: 100%; - z-index: 2000; - height: variables.$header-height; - box-sizing: border-box; - justify-content: space-between; -} - -/* LOGO and APP NAME -------------------------------------------------------- */ -#nextcloud { - padding: 5px 0; - padding-left: 86px; // logo width + 2* pa - position: relative; - height: calc(100% - 4px); - box-sizing: border-box; - opacity: 1; - align-items: center; + overflow: hidden; + z-index: 9999; + top: -999px; + inset-inline-start: 3px; + padding: 11px; display: flex; flex-wrap: wrap; - overflow: hidden; - margin: 2px; + gap: 11px; - &:hover, &:active { - opacity: 1; + &:focus-within { + top: var(--header-height); } } -@mixin header-menu-height() { - min-height: calc(44px * 1.5); // show at least 1.5 entries - max-height: calc(100vh - #{variables.$header-height} - 8px); -} - +/* HEADERS ------------------------------------------------------------------ */ #header { - /* Header menu */ - $header-menu-entry-height: 44px; + // prevent ugly selection effect on accidental selection + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; - .header-right > div > .menu { - background-color: var(--color-main-background); - filter: drop-shadow(0 1px 5px var(--color-box-shadow)); - border-radius: var(--border-radius-large); - box-sizing: border-box; - z-index: 2000; + // for legacy the reasons the guest layout also uses the same id, so we need to exclude it as it uses a different layout. + &:not(.header-guest) { + display: inline-flex; position: absolute; - max-width: 350px; - @include header-menu-height(); - right: 8px; // relative to parent - top: variables.$header-height; - margin: 0; - overflow-y: auto; + top: 0; + width: 100%; + z-index: 2000; + height: var(--header-height); + box-sizing: border-box; + justify-content: space-between; + } - &:not(.popovermenu) { - display: none; - } + // This is the first entry in the header, it represents the "home"-link + #nextcloud { + padding: 5px 0; + padding-inline-start: 86px; // logo width + 2 * the inset (padding) + position: relative; + height: calc(100% - var(--default-grid-baseline)); + box-sizing: border-box; + opacity: 1; + align-items: center; + display: flex; + flex-wrap: wrap; + overflow: hidden; + margin: 2px; - /* Dropdown arrow */ - &:after { - border: 10px solid transparent; - border-bottom-color: var(--color-main-background); - bottom: 100%; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - right: 10px; + &:hover, &:active { + opacity: 1; } - & > div, - & > ul { - -webkit-overflow-scrolling: touch; - @include header-menu-height(); + // the actual logo within the home-link entry + .logo { + display: inline-flex; + background-image: var(--image-logoheader, var(--image-logo, url('../img/logo/logo.svg'))); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 62px; + position: absolute; + inset-inline-start: 12px; + top: 1px; + bottom: 1px; + // Invert if not customized and background is bright + filter: var(--image-logoheader-custom, var(--background-image-invert-if-bright)); } } - .logo { - display: inline-flex; - background-image: var(--image-logoheader, var(--image-logo, url('../img/logo/logo.svg'))); - background-repeat: no-repeat; - background-size: contain; - background-position: center; - width: 62px; - position: absolute; - left: 12px; - top: 1px; - bottom: 1px; - // Invert if not customized and background is bright - filter: var(--image-logoheader-custom, var(--background-image-invert-if-bright)); - } - .header-appname-container { - display: none; - padding-right: 10px; - flex-shrink: 0; + // focus visible styles + // this adds a small line below all entries when visually focussed + #nextcloud:focus-visible, + .app-menu-entry a:focus-visible, + .header-menu button:first-of-type:focus-visible { + outline: none; + + &::after { + content: " "; + position: absolute; + inset-block-end: 2px; + transform: translateX(-50%); + width: 12px; + height: 2px; + border-radius: 3px; + background-color: var(--color-background-plain-text); + inset-inline-start: 50%; + opacity: 1; + } } - #header-left, .header-left, - #header-right, .header-right { + // This is the first part of the header + // for the user template it contains the application icons (app menu) + // for public templates this contains e.g. share information + .header-start { display: inline-flex; align-items: center; - } - - #header-left, .header-left { flex: 1 0; white-space: nowrap; min-width: 0; } - #header-right, .header-right { + // This is the last part of the header + // It contains the short cuts like unified search, contacts-, or account menu + .header-end { + display: inline-flex; + align-items: center; justify-content: flex-end; flex-shrink: 1; - } + // Add some spacing so the last entry looks ok + margin-inline-end: calc(3 * var(--default-grid-baseline)); - /* Right header standard */ - .header-right { - > .header-menu__trigger img { - filter: var(--background-image-invert-if-bright); - } + // legacy JQuery header menus + // TODO: we already migrated our own code and deprecated it - can be removed together with global jQuery > div, > form { height: 100%; @@ -176,8 +133,8 @@ display: flex; justify-content: center; align-items: center; - width: variables.$header-height; - height: 44px; + width: var(--header-height); + height: var(--header-menu-item-height); cursor: pointer; opacity: 0.85; padding: 0; @@ -191,80 +148,109 @@ outline: none; } } - } - } -} -/* hover effect for app switcher label */ + > .menu { + background-color: var(--color-main-background); + filter: drop-shadow(0 1px 5px var(--color-box-shadow)); + border-radius: var(--border-radius-large); + box-sizing: border-box; + z-index: 2000; + position: absolute; + max-width: 350px; + @include header-menu-height(); + inset-inline-end: 8px; // relative to parent + top: var(--header-height); + margin: 0; + overflow-y: auto; + + &:not(.popovermenu) { + display: none; + } -.header-appname-container .header-appname { - opacity: .75; -} + /* Dropdown arrow */ + &:after { + border: 10px solid transparent; + border-bottom-color: var(--color-main-background); + bottom: 100%; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + inset-inline-end: 10px; + } -/* TODO: move into minimal css file for public shared template */ -/* only used for public share pages now as we have the app icons when logged in */ -.header-appname { - color: var(--color-primary-element-text); - font-size: 16px; - font-weight: bold; - margin: 0; - padding: 0; - padding-right: 5px; - overflow: hidden; - text-overflow: ellipsis; - // Take full width to push the header-shared-by bellow (if any) - flex: 1 1 100%; -} + & > div, + & > ul { + -webkit-overflow-scrolling: touch; + @include header-menu-height(); + } + } -.header-info { - display: flex; - flex-direction: column; - overflow: hidden; -} + .emptycontent { + h2 { + font-weight: normal; + font-size: 16px; + } + [class^='icon-'], + [class*='icon-'] { + background-size: 48px; + height: 48px; + width: 48px; + } + } + } + } -.header-title { - overflow: hidden; - text-overflow: ellipsis; -} + // Public layout related headers + // app related header container ONLY on public shares (layout.public.php) + .header-appname { + color: var(--color-background-plain-text); + font-size: 16px; + font-weight: bold; + margin: 0; + padding: 0; + padding-inline-end: 5px; + overflow: hidden; + text-overflow: ellipsis; + // Take full width to push the header-shared-by bellow (if any) + flex: 1 1 100%; + + // container for the public template header information + .header-info { + display: flex; + flex-direction: column; + overflow: hidden; + + .header-title { + overflow: hidden; + text-overflow: ellipsis; + } -.header-shared-by { - color: var(--color-primary-element-text); - position: relative; - font-weight: 300; - font-size: 11px; - line-height: 11px; - overflow: hidden; - text-overflow: ellipsis; + .header-shared-by { + color: var(--color-background-plain-text); + position: relative; + font-weight: 300; + font-size: var(--font-size-small); + line-height: var(--font-size-small); + overflow: hidden; + text-overflow: ellipsis; + } + } + } } -/* Skip navigation links – show only on keyboard focus */ -#skip-actions { - position: absolute; - overflow: hidden; - z-index: 9999; - top: -999px; - left: 3px; - padding: 11px; - display: flex; - flex-wrap: wrap; - gap: 11px; - - &:focus-within { - top: variables.$header-height; +@media (display-mode: standalone) or (display-mode: minimal-ui) { + #header:not(.header-guest) { + display: none !important; } -} -/* Empty content messages in the header e.g. notifications, contacts menu, … */ -header #emptycontent, -header .emptycontent { - h2 { - font-weight: normal; - font-size: 16px; + #content, #content-vue { + margin-top: var(--body-container-margin); } - [class^='icon-'], - [class*='icon-'] { - background-size: 48px; - height: 48px; - width: 48px; + + :root { + // Override the body height to make up for the additional height due to the missing header. + --body-height: calc(100% - env(safe-area-inset-bottom) - var(--body-container-margin) * 2) !important; } } |