mirror of
https://github.com/nextcloud/server.git
synced 2026-02-18 18:28:50 -05:00
refactor: de-duplicate header styles, add comments and mark deprecations
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
nextcloud-command
parent
687df7c8ab
commit
ab49a6d8a9
2 changed files with 179 additions and 207 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
> .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;
|
||||
}
|
||||
|
||||
/* 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();
|
||||
}
|
||||
}
|
||||
|
||||
.emptycontent {
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
[class^='icon-'],
|
||||
[class*='icon-'] {
|
||||
background-size: 48px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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: variables.$header-height;
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty content messages in the header e.g. notifications, contacts menu, … */
|
||||
header #emptycontent,
|
||||
header .emptycontent {
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
[class^='icon-'],
|
||||
[class*='icon-'] {
|
||||
background-size: 48px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (display-mode: standalone) or (display-mode: minimal-ui) {
|
||||
#header {
|
||||
#header:not(.header-guest) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue