wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5109 from owncloud/controls-bar-height

Browse source 
Controls bar height
This commit is contained in:
Morris Jobke 2013-10-04 01:01:54 -07:00
commit ecd2bf2a55
8 changed files with 164 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
apps/files/css/files.css
View file

@ -7,14 +7,34 @@
.actions input, .actions button, .actions .button { margin:0; float:left; } .actions input, .actions button, .actions .button { margin:0; float:left; }
.actions .button a { color: #555; } .actions .button a { color: #555; }
.actions .button a:hover, .actions .button a:active { color: #333; } .actions .button a:hover, .actions .button a:active { color: #333; }
#new { #new, #trash {
height:17px; margin:0 0 0 1em; z-index:1010; float:left; z-index: 1010;
float: left;
padding: 0 !important; /* override default control bar button padding */
}
#trash {
margin: 0 1em;
float: right;
}
#new>a, #trash>a {
padding: 14px 10px;
position: relative;
top: 7px;
}
#new.active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
} }
#new.active { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
#new>a { padding:.5em 1.2em .3em; }
#new>ul { #new>ul {
display:none; position:fixed; min-width:7em; z-index:10; display: none;
padding:.5em; padding-bottom:0; margin-top:.075em; margin-left:-.5em; position: fixed;
min-width: 7em;
z-index: 10;
padding: .5em;
padding-bottom: 0;
margin-top: 14px;
margin-left: -1px;
text-align:left; text-align:left;
background: #f8f8f8; background: #f8f8f8;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -25,53 +45,16 @@
#new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em; #new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em;
background-repeat:no-repeat; cursor:pointer; } background-repeat:no-repeat; cursor:pointer; }
#new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;} #new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;}
#new>ul>li>form>input {
padding: 5px;
margin: 2px 0;
}
#trash { margin: 0 1em; z-index:1010; float: right; }
#upload {
height:27px; padding:0; margin-left:0.2em; overflow:hidden;
}
#upload a {
position:relative; display:block; width:100%; height:27px;
cursor:pointer; z-index:10;
background-image:url('%webroot%/core/img/actions/upload.svg');
background-repeat:no-repeat;
background-position:7px 6px;
opacity:0.65;
}
.file_upload_target { display:none; }
.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; }
#file_upload_start {
left:0; top:0; width:28px; height:27px; padding:0;
font-size:1em;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
z-index:20; position:relative; cursor:pointer; overflow:hidden;
}
#uploadprogresswrapper {
position: relative;
display: inline;
}
#uploadprogressbar {
position:relative;
float: left;
margin-left: 12px;
width: 130px;
height: 26px;
display:inline-block;
}
#uploadprogressbar + stop {
font-size: 13px;
}
/* FILE TABLE */ /* FILE TABLE */
#filestable { position: relative; top:37px; width:100%; } #filestable {
position: relative;
top: 44px;
width: 100%;
}
#filestable tbody tr { background-color:#fff; height:2.5em; } #filestable tbody tr { background-color:#fff; height:2.5em; }
#filestable tbody tr:hover, tbody tr:active { #filestable tbody tr:hover, tbody tr:active {
background-color: rgb(240,240,240); background-color: rgb(240,240,240);
@ -125,9 +108,18 @@ table th#headerDate, table td.date {
/* Multiselect bar */ /* Multiselect bar */
#filestable.multiselect { #filestable.multiselect {
top: 88px; top: 95px;
}
table.multiselect thead {
position: fixed;
top: 89px;
z-index: 1;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0;
padding-left: 80px;
width: 100%;
} }
table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 80px; width:100%; }
table.multiselect thead th { table.multiselect thead th {
background-color: rgba(210,210,210,.7); background-color: rgba(210,210,210,.7);
@ -328,8 +320,6 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
#scanning-message{ top:40%; left:40%; position:absolute; display:none; } #scanning-message{ top:40%; left:40%; position:absolute; display:none; }
div.crumb a{ padding:0.9em 0 0.7em 0; color:#555; }
table.dragshadow { table.dragshadow {
width:auto; width:auto;
} }

55
apps/files/css/upload.css
View file

@ -1,38 +1,63 @@
#upload { #upload {
height:27px; padding:0; margin-left:0.2em; overflow:hidden; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 36px;
width: 39px;
padding: 0 !important; /* override default control bar button padding */
margin-left: .2em;
overflow: hidden;
vertical-align: top; vertical-align: top;
} }
#upload a { #upload a {
position:relative; display:block; width:100%; height:27px; position: relative;
cursor:pointer; z-index:10; display: block;
background-image:url('%webroot%/core/img/actions/upload.svg'); width: 100%;
background-repeat:no-repeat; height: 44px;
background-position:7px 6px; width: 44px;
opacity:0.65; margin: -5px -3px;
cursor: pointer;
z-index: 10;
background-image: url('%webroot%/core/img/actions/upload.svg');
background-repeat: no-repeat;
background-position: center;
opacity: .65;
} }
.file_upload_target { display:none; } .file_upload_target { display:none; }
.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; } .file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; }
#file_upload_start { #file_upload_start {
float: left; position: relative;
left:0; top:0; width:28px; height:27px; padding:0; left: 0;
font-size:1em; top: 0;
width: 44px;
height: 44px;
margin: -5px -3px;
padding: 0;
font-size: 1em;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
z-index:20; position:relative; cursor:pointer; overflow:hidden; z-index: 20;
cursor: pointer;
overflow: hidden;
} }
#uploadprogresswrapper { #uploadprogresswrapper {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin:0.3em; height: 36px;
height: 29px; box-sizing: border-box;
}
#uploadprogresswrapper > input[type='button'] {
height: 36px;
} }
#uploadprogressbar { #uploadprogressbar {
position:relative; position:relative;
float: left; float: left;
margin-left: 12px; margin-left: 12px;
width: 130px; width: 130px;
height: 26px; height: 36px;
display:inline-block; display:inline-block;
} }
#uploadprogressbar + stop { #uploadprogressbar + stop {

58
core/css/styles.css
View file

@ -156,22 +156,37 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
/* CONTENT ------------------------------------------------------------------ */ /* CONTENT ------------------------------------------------------------------ */
#controls { #controls {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed; position: fixed;
height: 36px; height: 44px;
width: 100%; width: 100%;
padding: 0 75px 0 6px; padding-right: 75px;
margin: 0; margin: 0;
background: #eee; background: #eee;
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
z-index: 50; z-index: 50;
-moz-box-sizing: border-box; box-sizing: border-box;
} }
#controls .button { #controls .button,
#controls button,
#controls input[type='submit'],
#controls input[type='text'],
#controls input[type='password'],
#controls select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block; display: inline-block;
height: 36px;
padding: 7px 10px
} }
#content { position:relative; height:100%; width:100%; } #content { position:relative; height:100%; width:100%; }
#content .hascontrols { position: relative; top: 2.9em; } #content .hascontrols {
position: relative;
top: 45px;
}
#content-wrapper { #content-wrapper {
position:absolute; height:100%; width:100%; padding-top:3.5em; padding-left:80px; position:absolute; height:100%; width:100%; padding-top:3.5em; padding-left:80px;
-moz-box-sizing:border-box; box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
@ -750,15 +765,38 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;}
.arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); } .arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); }
.arrow.up { top:-8px; right:2em; } .arrow.up { top:-8px; right:2em; }
.arrow.down { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } .arrow.down { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
.help-includes {overflow: hidden; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 2.8em; } .help-includes {
overflow: hidden;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 44px;
}
.help-iframe {width: 100%; height: 100%; margin: 0;padding: 0; border: 0; overflow: auto;} .help-iframe {width: 100%; height: 100%; margin: 0;padding: 0; border: 0; overflow: auto;}
/* ---- BREADCRUMB ---- */ /* ---- 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 {
div.crumb:first-child { padding:10px 20px 10px 5px; } float: left;
div.crumb.last { font-weight:bold; background:none; padding-right:10px; } display: block;
div.crumb a{ padding: 0.9em 0 0.7em 0; } background: url('../img/breadcrumb.svg') no-repeat right center;
height: 44px;
}
div.crumb a {
position: relative;
top: 12px;
padding: 14px 24px 14px 17px;
color: #555;
}
div.crumb:first-child a {
position: relative;
top: 13px;
}
div.crumb.last {
font-weight: bold;
margin-right: 10px;
}
/* some feedback for hover/tap on breadcrumbs */ /* some feedback for hover/tap on breadcrumbs */
div.crumb:hover, div.crumb:hover,

BIN
core/img/breadcrumb-start.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 311 B

6
core/img/breadcrumb-start.svg
View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="36" width="11" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g transform="translate(0 -1016.4)">
<path d="m0 0 11 18-11 18z" transform="translate(0 1016.4)" fill="#ddd"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 402 B

BIN
core/img/breadcrumb.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 594 B

16
core/img/breadcrumb.svg
View file

@ -1,6 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="44" width="14" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="36" width="11" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <metadata>
<g transform="translate(0 -1016.4)"> <rdf:RDF>
<path d="m0.5 0 10 18-10 18 10-18z" transform="translate(0 1016.4)" stroke="#ddd" stroke-linecap="round" stroke-miterlimit="31.2" stroke-width="0.9" fill="#ddd"/> <cc:Work rdf:about="">
</g> <dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path d="M0.54879,0.047777,12.744,22,0.54879,43.951,12.744,22z" stroke="#d7d7d7" stroke-linecap="round" stroke-miterlimit="31.20000076000000178" stroke-width="1.09758711000000009" fill="#F00"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 491 B

After

Width:  |  Height:  |  Size: 638 B

27
settings/css/settings.css
View file

@ -47,18 +47,37 @@ tr:hover>td.remove>a { float:right; }
li.selected { background-color:#ddd; } li.selected { background-color:#ddd; }
table:not(.nostyle) { width:100%; } table:not(.nostyle) { width:100%; }
#rightcontent { padding-left: 1em; } #rightcontent { padding-left: 1em; }
div.quota { float:right; display:block; position:absolute; right:25em; top:-1px; } div.quota {
float: right;
display: block;
position: absolute;
right: 216px;
top: 0;
}
div.quota-select-wrapper { position: relative; } div.quota-select-wrapper { position: relative; }
div.recoveryPassword { left:50em; display:block; position:absolute; top:-1px; } div.recoveryPassword { left:50em; display:block; position:absolute; top:-1px; }
input#recoveryPassword {width:15em;} input#recoveryPassword {width:15em;}
select.quota { position:absolute; left:0; top:0; width:10em; } select.quota { position:absolute; left:0; top:0; width:10em; }
select.quota-user { position:relative; left:0; top:0; width:10em; } select.quota-user { position:relative; left:0; top:0; width:10em; }
div.quota>span { position:absolute; right:0; white-space:nowrap; top:.7em; color:#888; text-shadow:0 1px 0 #fff; } div.quota>span {
position: absolute;
right: 0;
white-space: nowrap;
top: 12px;
color: #888;
text-shadow: 0 1px 0 #fff;
}
select.quota.active { background: #fff; } select.quota.active { background: #fff; }
/* positioning fixes */ /* positioning fixes */
#newuser { position:relative; top:-3px; } #newuser .multiselect {
#newuser .multiselect { top:1px; } min-width: 150px !important;
}
#newuser .multiselect,
#newusergroups + input[type='submit'] {
position: relative;
top: 1px;
}
#headerGroups, #headerSubAdmins, #headerQuota { padding-left:18px; } #headerGroups, #headerSubAdmins, #headerQuota { padding-left:18px; }
.ie8 table.hascontrols{border-collapse:collapse;width: 100%;} .ie8 table.hascontrols{border-collapse:collapse;width: 100%;}