mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2020-08-05 15:40:13 +02:00
parent a4d511d827
commit e0664b575c
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
3 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/files/css/files.scss
View File

@ -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);
}
}
}

50
core/css/apps.scss
View File

@ -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 {

8
core/css/header.scss
View File

@ -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;