Adjust entry highlights of navigation and menus based on Vue component style

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index e875e0da29aea7a527f02164712859f63aa393d2..e47e47d7f4b8496ae1c28b5f9db0d783b022df8d 100644 (file)
--- 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 420e5bb4a04835cd64f7e7ccc2bb9bd81c630362..cb2b32611b1281d042aa21dcf3992566cb502554 100644 (file)
--- 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 1851695f1ea55fefbfc2dce05db2aaf6ea27a7ef..e4a22141b066b76a985b0601f173a0872f02dfc5 100644 (file)
--- 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;