diff options
| -rw-r--r-- | apps/files/css/files.scss | 11 | ||||
| -rw-r--r-- | core/css/apps.scss | 74 | ||||
| -rw-r--r-- | core/css/header.scss | 2 | ||||
| -rw-r--r-- | core/css/mobile.scss | 2 | ||||
| -rw-r--r-- | core/css/public.scss | 7 | ||||
| -rw-r--r-- | core/css/styles.scss | 2 | ||||
| -rw-r--r-- | core/templates/layout.user.php | 3 |
7 files changed, 69 insertions, 32 deletions
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 33ec23cdad1..715a404be07 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -68,8 +68,8 @@ thead { position: -webkit-sticky; position: sticky; - // header + breadcrumbs - top: variables.$header-height; + // breadcrumbs + top: 44px; // under breadcrumbs, over file list z-index: 60; display: block; @@ -310,11 +310,6 @@ table th.column-last, table td.column-last { max-width: 130px; } -#app-content-files thead, -#app-content-trashbin thead { - top: 94px; -} - #app-content-recent, #app-content-favorites, #app-content-shareoverview, @@ -1197,7 +1192,7 @@ table.dragshadow td.size { padding: 22px; opacity: .5; position: fixed; - right: 0; + right: 16px; z-index: 100; &:hover, diff --git a/core/css/apps.scss b/core/css/apps.scss index ecf119f893b..cc53224a46d 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -19,10 +19,37 @@ @use 'sass:math'; @import 'functions'; + +:root { + --body-container-margin: 8px; + --body-container-radius: var(--border-radius-large); + --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin)); +} + +@media screen and (max-width: variables.$breakpoint-mobile) { + :root { + --body-container-margin: 0px; + --body-container-radius: 0px; + } +} + + +html { + width: 100%; + height: 100%; + position: absolute; + background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg'); + background-size: cover; + background-position: top center; +} + body { - background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg'); - background-size: contain; - position: fixed; + background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg'); + background-size: cover; + background-position: top center; + position: fixed; + width: 100%; + height: calc(100vh - env(safe-area-inset-bottom)); } /* BASE STYLING ------------------------------------------------------------ */ @@ -89,10 +116,14 @@ kbd { #app-navigation:not(.vue) { width: variables.$navigation-width; z-index: 500; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; - background-color: var(--color-main-background); - -webkit-user-select: none; + background-color: var(--color-main-background-blur); + backdrop-filter: var(--filter-background-blur); + -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none; + position: sticky; + height: 100%; + padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -100,8 +131,6 @@ kbd { flex-direction: column; flex-grow: 0; flex-shrink: 0; - background-color: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); /* 'New' button */ .app-navigation-new { @@ -613,15 +642,18 @@ kbd { #content { box-sizing: border-box; position: static; - // padding is included in height - min-height: 100%; - margin: 8px; - margin-top: 50px; - display: flex; - height: calc(100vh - 50px - 8px); - border-radius: var(--border-radius-large); - box-sizing: content-box; - overflow-y: scroll; + margin: var(--body-container-margin); + margin-top: 50px; + padding: 0; + display: flex; + width: calc(100% - var(--body-container-margin) * 2); + height: var(--body-height); + border-radius: var(--body-container-radius); + overflow: hidden; + + &:not(.with-sidebar--full) { + position: fixed; + } } /* APP-CONTENT AND WRAPPER ------------------------------------------ */ @@ -638,8 +670,9 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - z-index: 1000; background-color: var(--color-main-background); flex-basis: 100vw; - min-height: 100%; - overflow-y: scroll; + overflow: auto; + position: initial; + height: 100%; /* margin if navigation element is here */ /* no top border for first settings item */ > .section:first-child { @@ -711,7 +744,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - #app-settings-content { display: none; padding: 10px; - background-color: var(--color-main-background); /* restrict height of settings and make scrollable */ max-height: 300px; overflow-y: auto; @@ -744,6 +776,8 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - #app-settings-header { box-sizing: border-box; background-color: var(--color-main-background); + overflow: hidden; + border-radius: var(--border-radius-pill); } diff --git a/core/css/header.scss b/core/css/header.scss index d4d7ce6ea18..f926566c687 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -32,7 +32,7 @@ #body-settings #header, #body-public #header { display: inline-flex; - position: fixed; + position: absolute; top: 0; width: 100%; z-index: 2000; diff --git a/core/css/mobile.scss b/core/css/mobile.scss index db303eec1fc..021ab40c15e 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -23,6 +23,8 @@ /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ #app-navigation { transform: translateX(-#{variables.$navigation-width}); + position: fixed; + height: var(--body-height); } .snapjs-left { #app-navigation { diff --git a/core/css/public.scss b/core/css/public.scss index b171dd4970d..87c0587bd7a 100644 --- a/core/css/public.scss +++ b/core/css/public.scss @@ -68,12 +68,17 @@ $footer-height: 65px; /* public footer */ footer { - position: relative; + position: fixed; display: flex; align-items: center; justify-content: center; height: $footer-height; flex-direction: column; + bottom: 0; + width: calc(100% - 16px); + margin: 8px; + background-color: var(--color-main-background); + border-radius: var(--border-radius-large); p { text-align: center; color: var(--color-text-lighter); diff --git a/core/css/styles.scss b/core/css/styles.scss index ef6b06276c9..0ace61ccc5c 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -203,7 +203,7 @@ body { -ms-user-select: none; user-select: none; display: flex; - top: variables.$header-height; + top: 0; } /* position controls for apps with app-navigation */ diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 05698b3aa67..5650e23c724 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -22,7 +22,8 @@ $getUserAvatar = static function (int $size) use ($_): string { p($theme->getTitle()); ?> </title> - <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 user-scalable=no, viewport-fit=cover" /> + <?php if ($theme->getiTunesAppId() !== '') { ?> <meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>"> <?php } ?> |