diff options
| -rw-r--r-- | apps/files/css/files.css | 21 | ||||
| -rw-r--r-- | apps/files/js/filelist.js | 2 | ||||
| -rw-r--r-- | apps/files/templates/part.list.php | 4 | ||||
| -rw-r--r-- | core/css/styles.css | 29 |
4 files changed, 45 insertions, 11 deletions
diff --git a/apps/files/css/files.css b/apps/files/css/files.css index f788949b1b6..108dcd741c6 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -63,8 +63,12 @@ } #filestable { position: relative; top:37px; width:100%; } tbody tr { background-color:#fff; height:2.5em; } -tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#f8f8f8; } -tbody tr.selected { background-color:#eee; } +tbody tr:hover, tbody tr:active { + background-color: rgb(240,240,240); +} +tbody tr.selected { + background-color: rgb(230,230,230); +} tbody a { color:#000; } span.extension, span.uploading, td.date { color:#999; } span.extension { text-transform:lowercase; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; } @@ -81,7 +85,12 @@ table th#headerDate, table td.date { min-width:11em; padding:0 .1em 0 1em; text- /* Multiselect bar */ #filestable.multiselect { top:63px; } table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 64px; width:100%; } -table.multiselect thead th { background:rgba(230,230,230,.8); color:#000; font-weight:bold; border-bottom:0; } +table.multiselect thead th { + background-color: rgba(210,210,210,.7); + color: #000; + font-weight: bold; + border-bottom: 0; +} table.multiselect #headerName { width: 100%; } table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } table td.filename a.name { display:block; height:1.5em; vertical-align:middle; margin-left:3em; } @@ -115,10 +124,12 @@ table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; } } #fileList .name { position:relative; /* Firefox needs to explicitly have this default set … */ } #fileList tr:hover .fileactions { /* background to distinguish when overlaying with file names */ - background:rgba(248,248,248,.9); box-shadow:-5px 0 7px rgba(248,248,248,.9); + background-color: rgba(240,240,240,0.898); + box-shadow: -5px 0 7px rgba(240,240,240,0.898); } #fileList tr.selected:hover .fileactions, #fileList tr.mouseOver .fileactions { /* slightly darker color for selected rows */ - background:rgba(238,238,238,.9); box-shadow:-5px 0 7px rgba(238,238,238,.9); + background-color: rgba(230,230,230,.9); + box-shadow: -5px 0 7px rgba(230,230,230,.9); } #fileList .fileactions a.action img { position:relative; top:.2em; } #fileList a.action { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index c24d1fd8244..e19a35bbc5b 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -51,7 +51,7 @@ var FileList={ }else{ simpleSize=t('files', 'Pending'); } - var sizeColor = Math.round(200-Math.pow((size/(1024*1024)),2)); + var sizeColor = Math.round(160-Math.pow((size/(1024*1024)),2)); var lastModifiedTime = Math.round(lastModified.getTime() / 1000); td = $('<td></td>').attr({ "class": "filesize", diff --git a/apps/files/templates/part.list.php b/apps/files/templates/part.list.php index 1719d25e660..1e94275dcba 100644 --- a/apps/files/templates/part.list.php +++ b/apps/files/templates/part.list.php @@ -3,12 +3,12 @@ <?php foreach($_['files'] as $file): $simple_file_size = OCP\simple_file_size($file['size']); // the bigger the file, the darker the shade of grey; megabytes*2 - $simple_size_color = intval(200-$file['size']/(1024*1024)*2); + $simple_size_color = intval(160-$file['size']/(1024*1024)*2); if($simple_size_color<0) $simple_size_color = 0; $relative_modified_date = OCP\relative_modified_date($file['mtime']); // the older the file, the brighter the shade of grey; days*14 $relative_date_color = round((time()-$file['mtime'])/60/60/24*14); - if($relative_date_color>200) $relative_date_color = 200; + if($relative_date_color>160) $relative_date_color = 160; $name = rawurlencode($file['name']); $name = str_replace('%2F', '/', $name); $directory = rawurlencode($file['directory']); diff --git a/core/css/styles.css b/core/css/styles.css index 313f89195df..58e750da4fa 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -141,7 +141,7 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b padding:0 70px 0 0.5em; margin:0; -moz-box-sizing:border-box; box-sizing:border-box; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; - background:#f7f7f7; border-bottom:1px solid #eee; z-index:50; + background:#eee; border-bottom:1px solid #e7e7e7; z-index:50; } #controls .button { display:inline-block; } @@ -355,14 +355,27 @@ tr .action { width:16px; height:16px; } tr:hover .action:hover, .selectedActions a:hover, .header-action:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } tbody tr:hover, tr:active { background-color:#f8f8f8; } -#body-settings .personalblock, #body-settings .helpblock { padding:.5em 1em; margin:1em; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; } +#body-settings .personalblock, #body-settings .helpblock { + padding: .5em 1em; + margin: 1em; + background-color: rgb(240,240,240); + color: #555; + text-shadow: #fff 0 1px 0; + -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; +} #body-settings .personalblock#quota { position:relative; padding:0; } #body-settings #controls+.helpblock { position:relative; margin-top:3em; } .personalblock > legend { margin-top:2em; } .personalblock > legend, th, dt, label { font-weight:bold; } code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; } -#quota div, div.jp-play-bar, div.jp-seek-bar { padding:0; background:#e6e6e6; font-weight:normal; white-space:nowrap; -moz-border-radius-bottomleft:.4em; -webkit-border-bottom-left-radius:.4em; border-bottom-left-radius:.4em; -moz-border-radius-topleft:.4em; -webkit-border-top-left-radius:.4em; border-top-left-radius:.4em; } +#quota div, div.jp-play-bar, div.jp-seek-bar { + padding: 0; + background-color: rgb(220,220,220); + font-weight: normal; + white-space: nowrap; + -moz-border-radius-bottomleft: .4em; -webkit-border-bottom-left-radius: .4em; border-bottom-left-radius:.4em; + -moz-border-radius-topleft: .4em; -webkit-border-top-left-radius: .4em; border-top-left-radius: .4em; } #quotatext {padding:.6em 1em;} div.jp-play-bar, div.jp-seek-bar { padding:0; } @@ -427,12 +440,22 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;} .help-includes {overflow: hidden; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 2.8em; } .help-iframe {width: 100%; height: 100%; margin: 0;padding: 0; border: 0; overflow: auto;} + /* ---- BREADCRUMB ---- */ div.crumb { float:left; display:block; background:url('../img/breadcrumb.svg') no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; -moz-box-sizing:border-box; box-sizing:border-box; } div.crumb:first-child { padding:10px 20px 10px 5px; } div.crumb.last { font-weight:bold; background:none; padding-right:10px; } div.crumb a{ padding: 0.9em 0 0.7em 0; } +/* some feedback for hover/tap on breadcrumbs */ +div.crumb:hover, +div.crumb:focus, +div.crumb:active { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter:alpha(opacity=70); + opacity:.7; +} + /* ---- APP STYLING ---- */ |