From 5d375647a5690275318b1299f1d9d716cb96b038 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Julius=20H=C3=A4rtl?= Date: Wed, 31 Aug 2022 08:51:09 +0200 Subject: [PATCH] Fix some styling issues with the new containers MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- apps/files/css/files.scss | 48 +++++++++++++++++++++++++++++++++++++-- core/css/apps.scss | 18 ++++++++++++--- core/css/header.scss | 2 +- core/css/styles.scss | 42 ---------------------------------- 4 files changed, 62 insertions(+), 48 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 715a404be07..d9fe8fd494d 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -307,7 +307,6 @@ table th.column-last, table td.column-last { position: relative; /* this can not be just width, both need to be set … table styling */ min-width: 130px; - max-width: 130px; } #app-content-recent, @@ -318,7 +317,9 @@ table th.column-last, table td.column-last { #app-content-sharinglinks, #app-content-deletedshares, #app-content-pendingshares { - margin-top: 22px; + thead { + top: 0; + } } table.multiselect thead th { @@ -809,6 +810,49 @@ table.dragshadow td.size { } } + +.files-controls { + box-sizing: border-box; + position: -webkit-sticky; + position: sticky; + height: 54px; + padding: 0; + margin: 0; + background-color: var(--color-main-background-translucent); + z-index: 62; /* must be above the filelist sticky header and texteditor menubar */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; + top: 0; + + .actions { + > div, + & { + > .button, button { + box-sizing: border-box; + display: inline-block; + display: flex; + height: 44px; + width: 44px; + padding: 9px; // width - border - icon width = 18px + align-items: center; + justify-content: center; + } + .button.hidden { + display: none; + } + } + } +} + +/* position controls for apps with app-navigation */ + +.viewer-mode #app-navigation + #app-content .files-controls { + left: 0; +} + .files-filestable .filename .action .icon, .files-filestable .selectedActions a .icon, .files-filestable .filename .favorite-mark .icon, diff --git a/core/css/apps.scss b/core/css/apps.scss index 0bee1a7ba45..4cab3e49a36 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -117,6 +117,9 @@ kbd { /* APP-NAVIGATION ------------------------------------------------------------ */ /* Navigation: folder like structure */ #app-navigation:not(.vue) { + // We use fixed variable for the pill style as we have larger containers around nested list entries + --border-radius-pill: calc(var(--default-clickable-area) / 2); + width: variables.$navigation-width; z-index: 500; overflow-y: auto; @@ -252,10 +255,14 @@ kbd { display: inline-flex; flex-wrap: wrap; padding-left: 44px; + width: 100%; + margin-bottom: 3px; + &:hover, &:focus { &, > a { + border-radius: var(--border-radius-pill); background-color: var(--color-background-hover); } } @@ -263,6 +270,7 @@ kbd { a.selected { &, > a { + border-radius: var(--border-radius-pill); background-color: var(--color-primary-light); } } @@ -315,6 +323,7 @@ kbd { box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; + border-radius: var(--border-radius-pill); color: var(--color-main-text); opacity: .8; flex: 1 1 0px; @@ -445,9 +454,10 @@ kbd { -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 105; // above a, under button - background-color: var(--color-background-hover); border-radius: 50%; transition: opacity variables.$animation-quick ease-in-out; + + } /* force padding on link no matter if 'a' has an icon class */ @@ -459,6 +469,9 @@ kbd { &:before { opacity: 1; } + > a { + background-image: none; + } > .app-navigation-entry-bullet { background: transparent !important; } @@ -805,7 +818,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - background-color: transparent; box-shadow: none; border: 0; - border-radius: 0; + border-radius: var(--border-radius-pill); text-align: left; font-weight: normal; font-size: 100%; @@ -837,7 +850,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - &:focus-visible { box-shadow: 0 0 0 2px inset var(--color-primary) !important; - border-radius: var(--border-radius); background-position: 12px center; } } diff --git a/core/css/header.scss b/core/css/header.scss index 55f797789c7..36047fbd032 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -72,7 +72,7 @@ .header-right > div > .menu { background-color: var(--color-main-background); filter: drop-shadow(0 1px 5px var(--color-box-shadow)); - border-radius: 0 0 var(--border-radius) var(--border-radius); + border-radius: var(--border-radius-large); box-sizing: border-box; z-index: 2000; position: absolute; diff --git a/core/css/styles.scss b/core/css/styles.scss index 0ace61ccc5c..fde14141e43 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -189,52 +189,10 @@ body { /* CONTENT ------------------------------------------------------------------ */ -.files-controls { - box-sizing: border-box; - position: -webkit-sticky; - position: sticky; - height: 54px; - padding: 0; - margin: 0; - background-color: var(--color-main-background-translucent); - z-index: 62; /* must be above the filelist sticky header and texteditor menubar */ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - display: flex; - top: 0; -} - -/* position controls for apps with app-navigation */ - -.viewer-mode #app-navigation + #app-content .files-controls { - left: 0; -} - #app-navigation * { box-sizing: border-box; } -.files-controls .actions { - > div, - & { - > .button, button { - box-sizing: border-box; - display: inline-block; - display: flex; - height: 44px; - width: 44px; - padding: 9px; // width - border - icon width = 18px - align-items: center; - justify-content: center; - } - .button.hidden { - display: none; - } - } -} - /* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */ #emptycontent, -- 2.39.5