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

Merge pull request #3672 from owncloud/files-contrast 

Contrast fixes
This commit is contained in:
Jan-Christoph Borchardt 2013-06-11 11:11:55 -07:00
parent 51f8aa90d1 abfbd9b136
commit d2773982d5
4 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/files/css/files.css
View File

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

2
apps/files/js/filelist.js
View File

@ -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",

4
apps/files/templates/part.list.php
View File

@ -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']);

29
core/css/styles.css
View File

@ -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 ---- */