diff options
Diffstat (limited to 'core/css/public.scss')
| -rw-r--r-- | core/css/public.scss | 59 |
1 files changed, 38 insertions, 21 deletions
diff --git a/core/css/public.scss b/core/css/public.scss index b171dd4970d..92c7a069f3e 100644 --- a/core/css/public.scss +++ b/core/css/public.scss @@ -1,10 +1,13 @@ -$footer-height: 65px; - +/*! + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ #body-public { - .header-right { + --footer-height: calc(2lh + 2 * var(--default-grid-baseline)); // Set the initial value, will be updated programmatically to match the actual height + .header-end { #header-primary-action a { - color: var(--color-primary-text); + color: var(--color-primary-element-text); } #header-secondary-action { @@ -14,6 +17,7 @@ $footer-height: 65px; #header-actions-toggle { background-color: transparent; border-color: transparent; + filter: var(--background-invert-if-dark); &:hover, &:focus, @@ -36,9 +40,12 @@ $footer-height: 65px; } #content { - // 100% - footer - min-height: calc(100% - #{$footer-height}); + min-height: var(--body-height, calc(100% - var(--footer-height))); + padding-block-end: var(--footer-height); + } + #app-content-vue { + padding-block-end: var(--footer-height); } /** don't apply content header padding on the base layout */ @@ -46,12 +53,6 @@ $footer-height: 65px; padding-top: 0; } - /* force layout to make sure the content element's height matches its contents' height */ - .ie #content { - display: inline-block; - } - - p.info { margin: 20px auto; text-shadow: 0 0 2px rgba(0, 0, 0, .4); @@ -68,23 +69,39 @@ $footer-height: 65px; /* public footer */ footer { - position: relative; + position: fixed; + bottom: var(--body-container-margin); + background-color: var(--color-main-background); + border-radius: var(--body-container-radius); + box-sizing: border-box; + display: flex; + flex-direction: column; align-items: center; justify-content: center; - height: $footer-height; - flex-direction: column; + + width: calc(100% - 2 * var(--body-container-margin)); + margin-inline: var(--body-container-margin); + padding-block: var(--default-grid-baseline); + + .footer__legal-links { + margin-block-end: var(--default-grid-baseline); + } + p { text-align: center; - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); + margin-block: 0 var(--default-grid-baseline); + width: 100%; + a { - color: var(--color-text-lighter); + display: inline-block; + font-size: var(--default-font-size); font-weight: bold; + line-height: var(--default-line-height); + height: var(--default-line-height); + color: var(--color-text-maxcontrast); white-space: nowrap; - /* increasing clickability to more than the text height */ - padding: 10px; - margin: -10px; - line-height: 200%; } } } |