diff options
| -rw-r--r-- | core/css/header.scss | 372 | ||||
| -rw-r--r-- | core/templates/layout.guest.php | 2 |
2 files changed, 173 insertions, 201 deletions
diff --git a/core/css/header.scss b/core/css/header.scss index d6bb8a363e1..e14e1eecb11 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -3,16 +3,86 @@ * SPDX-FileCopyrightText: 2016 ownCloud, Inc. * SPDX-License-Identifier: AGPL-3.0-or-later */ -@use 'variables'; -/* prevent ugly selection effect on accidental selection */ -#header, -#expanddiv { +@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))); +} + +/* Skip navigation links – show only on keyboard focus */ +#skip-actions { + position: absolute; + overflow: hidden; + z-index: 9999; + top: -999px; + inset-inline-start: 3px; + padding: 11px; + display: flex; + flex-wrap: wrap; + gap: 11px; + + &:focus-within { + top: var(--header-height); + } +} + +/* HEADERS ------------------------------------------------------------------ */ +#header { + // prevent ugly selection effect on accidental selection -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + // 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; + top: 0; + width: 100%; + z-index: 2000; + height: var(--header-height); + box-sizing: border-box; + justify-content: space-between; + } + + // 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; + + &:hover, &:active { + opacity: 1; + } + + // 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)); + } + } + + // 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 { @@ -32,141 +102,29 @@ } } - .header-end { - // 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 { - inset-inline-start: 40%; - } - } - -} - -/* HEADERS ------------------------------------------------------------------ */ -#body-user #header, -#body-settings #header, -#body-public #header { - display: inline-flex; - 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-inline-start: 86px; // logo width + 2* pa - position: relative; - height: calc(100% - 4px); - box-sizing: border-box; - opacity: 1; - align-items: center; - display: flex; - flex-wrap: wrap; - overflow: hidden; - margin: 2px; - - &:hover, &:active { - opacity: 1; - } -} - -@mixin header-menu-height() { - min-height: calc(44px * 1.5); // show at least 1.5 entries - max-height: calc(100vh - #{variables.$header-height} - 8px); -} - -/* Header menu */ -#header { - .header-end > 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; - position: absolute; - max-width: 350px; - @include header-menu-height(); - inset-inline-end: 8px; // relative to parent - top: variables.$header-height; - margin: 0; - overflow-y: auto; - - &:not(.popovermenu) { - display: none; - } - - /* 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; - } - - & > div, - & > ul { - -webkit-overflow-scrolling: touch; - @include header-menu-height(); - } - } - .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)); - } - - .header-appname-container { - display: none; - padding-inline-end: 10px; - flex-shrink: 0; - } - - #header-start, .header-start, - #header-end, .header-end { + // 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-start, .header-start { flex: 1 0; white-space: nowrap; min-width: 0; } - #header-end, .header-end { + // 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-end { - > .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%; @@ -175,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; @@ -190,86 +148,100 @@ outline: none; } } - } - } -} - -/* hover effect for app switcher label */ - -.header-appname-container .header-appname { - opacity: .75; -} - -/* 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-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%; -} - -.header-info { - display: flex; - flex-direction: column; - overflow: hidden; -} -.header-title { - overflow: hidden; - text-overflow: ellipsis; -} + > .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-shared-by { - color: var(--color-background-plain-text); - position: relative; - font-weight: 300; - font-size: 11px; - line-height: 11px; - overflow: hidden; - text-overflow: ellipsis; -} + /* 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; + } -/* Skip navigation links – show only on keyboard focus */ -#skip-actions { - position: absolute; - overflow: hidden; - z-index: 9999; - top: -999px; - inset-inline-start: 3px; - padding: 11px; - display: flex; - flex-wrap: wrap; - gap: 11px; + & > div, + & > ul { + -webkit-overflow-scrolling: touch; + @include header-menu-height(); + } + } - &:focus-within { - top: variables.$header-height; + .emptycontent { + h2 { + font-weight: normal; + font-size: 16px; + } + [class^='icon-'], + [class*='icon-'] { + background-size: 48px; + height: 48px; + width: 48px; + } + } + } } -} -/* Empty content messages in the header e.g. notifications, contacts menu, … */ -header #emptycontent, -header .emptycontent { - h2 { - font-weight: normal; + // 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; - } - [class^='icon-'], - [class*='icon-'] { - background-size: 48px; - height: 48px; - width: 48px; + 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-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; + } + } } } @media (display-mode: standalone) or (display-mode: minimal-ui) { - #header { + #header:not(.header-guest) { display: none !important; } diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php index 0723e90173b..1b5b90c29fc 100644 --- a/core/templates/layout.guest.php +++ b/core/templates/layout.guest.php @@ -44,7 +44,7 @@ p($theme->getTitle()); <div class="v-align"> <?php if ($_['bodyid'] === 'body-login'): ?> <header> - <div id="header"> + <div id="header" class="header-guest"> <div class="logo"></div> </div> </header> |