From e0664b575c646cd28a1a73e5e7ff2d724c54946e Mon Sep 17 00:00:00 2001 From: "Jan C. Borchardt" Date: Wed, 5 Aug 2020 15:40:13 +0200 Subject: [PATCH] Adjust entry highlights of navigation and menus based on Vue component style Signed-off-by: Jan C. Borchardt --- apps/files/css/files.scss | 27 +++++++++++---------- core/css/apps.scss | 50 ++++++++++++++++++++------------------- core/css/header.scss | 8 +++---- 3 files changed, 45 insertions(+), 40 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index e875e0da29..e47e47d7f4 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -21,9 +21,11 @@ .actions input, .actions button, .actions .button { margin:0; float:left; } .actions .button a { color: #555; } .actions .button a:hover, -.actions .button a:focus, +.actions .button a:focus { + background-color: var(--color-background-hover); +} .actions .button a:active { - color: #333; + background-color: var(--color-primary-light); } .actions.creatable { @@ -107,14 +109,12 @@ } .app-files #app-content { - transition: background-color 0.3s ease; // force the width to be the full width to not go bigger than the screen // flex will grow for the mobile view if necessary width: calc(100% - 300px); } .file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { - transition: background-color 0.3s ease!important; background-color: var(--color-primary-light) !important; } @@ -186,22 +186,23 @@ } #filestable tbody tr { - transition: background-color 0.3s ease; height: 51px; } #filestable tbody tr:hover, #filestable tbody tr:focus, #filestable tbody .name:focus, +#filestable tbody tr:hover .filename form, +table tr.mouseOver td { + background-color: var(--color-background-hover); +} #filestable tbody tr:active, #filestable tbody tr.highlighted, #filestable tbody tr.highlighted .name:focus, #filestable tbody tr.selected, -#filestable tbody tr.searchresult, -#filestable tbody tr:hover .filename form, -table tr.mouseOver td { - transition: background-color 0.3s ease; - background-color: var(--color-background-dark); +#filestable tbody tr.searchresult { + background-color: var(--color-primary-light); } + tbody a { color: var(--color-main-text); } span.conflict-path, span.extension, span.uploading, td.date { @@ -625,6 +626,9 @@ a.action > img { .fileActionsMenu a.action, a.action.action-share.shared-style { opacity: .7; } + .fileActionsMenu .action.permanent { + opacity: 1; + } } // Ellipsize long sharer names @@ -878,8 +882,7 @@ table.dragshadow td.size { .thumbnail-wrapper, .nametext, .fileactions { - transition: background-color 0.3s ease; - background-color: var(--color-background-dark); + background-color: var(--color-background-hover); } } } diff --git a/core/css/apps.scss b/core/css/apps.scss index 420e5bb4a0..cb2b32611b 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -152,16 +152,20 @@ kbd { padding-left: 38px !important; } - &.active, a:hover, - a:focus, + a:focus { + &, + > a { + background-color: var(--color-background-hover); + } + } + &.active, a:active, a.selected , a.active { &, > a { - opacity: 1; - box-shadow: inset 4px 0 var(--color-primary-element); + background-color: var(--color-primary-light); } } @@ -186,8 +190,6 @@ kbd { padding: 0 44px; white-space: nowrap; text-overflow: ellipsis; - // !important to overwrite specific hover and focus - opacity: .7; box-shadow: none !important; user-select: none; pointer-events:none; @@ -207,19 +209,20 @@ kbd { flex-wrap: wrap; padding-left: 44px; &:hover, - &:focus, + &:focus { + &, + > a { + background-color: var(--color-background-hover); + } + } &.active, a.selected { &, > a { - opacity: 1; + background-color: var(--color-primary-light); } } - &.active { - box-shadow: inset 4px 0 var(--color-primary-element); - } - /* align loader */ &.icon-loading-small:after { left: 22px; /* 44px / 2 */ @@ -270,7 +273,7 @@ kbd { white-space: nowrap; text-overflow: ellipsis; color: var(--color-main-text); - opacity: .57; + opacity: .8; flex: 1 1 0px; z-index: 100; /* above the bullet to allow click*/ /* TODO: forbid using img as icon in menu? */ @@ -384,7 +387,8 @@ kbd { -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 105; // above a, under button - background-color: var(--color-main-background); + background-color: var(--color-background-hover); + border-radius: 50%; transition: opacity $animation-quick ease-in-out; } @@ -730,17 +734,14 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; /* like app-navigation a */ color: var(--color-main-text); - opacity: .57; &.opened { border-top: solid 1px var(--color-border); + background-color: var(--color-main-background); } &:hover, - &:focus, - &.opened { - background-color: var(--color-main-background); - opacity: 1; - box-shadow: inset 4px 0 var(--color-primary-element); + &:focus { + background-color: var(--color-background-hover); } } @@ -953,8 +954,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2; width: 100%; color: var(--color-main-text); white-space: nowrap; - /* Override the app-navigation li opacity */ - opacity: .7 !important; + span[class^='icon-'], span[class*=' icon-'], &[class^='icon-'], @@ -985,9 +985,11 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2; padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important; } &:hover, - &:focus, + &:focus { + background-color: var(--color-background-hover); + } &.active { - opacity: 1 !important; + background-color: var(--color-primary-light); } /* prevent .action class to break the design */ &.action { diff --git a/core/css/header.scss b/core/css/header.scss index 1851695f1e..e4a22141b0 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -135,16 +135,16 @@ color: var(--color-main-text); padding: 10px 12px; box-sizing: border-box; - opacity: .7; white-space: nowrap; position: relative; width: 100%; &:hover, - &:focus, + &:focus { + background-color: var(--color-background-hover); + } &:active, &.active { - opacity: 1; - box-shadow: inset 4px 0 var(--color-primary-element); + background-color: var(--color-primary-light); } span { display: inline-block;