diff --git a/www/drive/file.css b/www/drive/file.css index 0013e063c..e80d6f98a 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -101,18 +101,21 @@ span.fa-folder-open { color: #000; } #tree li { - /*cursor: pointer;*/ cursor: auto; } -#tree li:hover > span.element { - text-decoration: underline; -} #tree li.collapsed ul { display: none; } #tree li input { width: calc(70%); } +#tree li > span.element-row { + width: 100%; + display: inline-block; +} +#tree li > span.element-row:not(.selected):hover { + background-color: #eee; +} #tree span.element { cursor: pointer; } @@ -220,6 +223,9 @@ span.fa-folder-open { #content li:not(.header) *:not(input) { /*pointer-events: none;*/ } +#content li:not(.header):hover:not(.selected) { + background-color: #eee; +} #content li:not(.header):hover .name { /*text-decoration: underline;*/ } @@ -233,6 +239,8 @@ span.fa-folder-open { text-align: center; vertical-align: top; overflow: hidden; + padding-top: 10px; + padding-bottom: 5px; } #content div.grid li .name { width: 100%; diff --git a/www/drive/file.less b/www/drive/file.less index d3f49709a..d5a7c1d73 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -2,6 +2,8 @@ @tree-fg: #000; @tree-lines-col: #888; +@drive-hover: #eee; + @content-bg: @tree-bg; @content-bg-ro: darken(@content-bg, 10%); @content-fg: @tree-fg; @@ -134,17 +136,20 @@ span { padding: 10px 0px; color: @tree-fg; li { - /*cursor: pointer;*/ cursor: auto; - &:hover > span.element { - text-decoration: underline; - } &.collapsed ul { display: none; } input { width: calc(100% - 30px); } + & > span.element-row { + width: 100%; + display: inline-block; + } + & > span.element-row:not(.selected):hover { + background-color: @drive-hover; + } } span.element { cursor: pointer; @@ -261,6 +266,9 @@ span { /*pointer-events: none;*/ } &:hover { + &:not(.selected) { + background-color: @drive-hover; + } .name { /*text-decoration: underline;*/ } @@ -276,6 +284,8 @@ span { text-align: center; vertical-align: top; overflow: hidden; + padding-top: 10px; + padding-bottom: 5px; .name { width: 100%;