diff --git a/apps/files/css/files.css b/apps/files/css/files.css index f09e51e70c2..138b15db04f 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -7,14 +7,34 @@ .actions input, .actions button, .actions .button { margin:0; float:left; } .actions .button a { color: #555; } .actions .button a:hover, .actions .button a:active { color: #333; } -#new { - height:17px; margin:0 0 0 1em; z-index:1010; float:left; +#new, #trash { + 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 { - display:none; position:fixed; min-width:7em; z-index:10; - padding:.5em; padding-bottom:0; margin-top:.075em; margin-left:-.5em; + display: none; + position: fixed; + min-width: 7em; + z-index: 10; + padding: .5em; + padding-bottom: 0; + margin-top: 14px; + margin-left: -1px; text-align:left; background: #f8f8f8; border: 1px solid #ddd; @@ -25,18 +45,16 @@ #new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em; background-repeat:no-repeat; cursor:pointer; } #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; } /* 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:hover, tbody tr:active { background-color: rgb(240,240,240); @@ -90,9 +108,18 @@ table th#headerDate, table td.date { /* Multiselect bar */ #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 { background-color: rgba(210,210,210,.7); @@ -293,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; } -div.crumb a{ padding:0.9em 0 0.7em 0; color:#555; } - table.dragshadow { width:auto; } diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 2d11e41ba88..ef043569094 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -1,38 +1,63 @@ - #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; } #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; + position: relative; + display: block; + width: 100%; + height: 44px; + width: 44px; + 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_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; } #file_upload_start { - float: left; - left:0; top:0; width:28px; height:27px; padding:0; - font-size:1em; + position: relative; + left: 0; + 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; - z-index:20; position:relative; cursor:pointer; overflow:hidden; + z-index: 20; + cursor: pointer; + overflow: hidden; } #uploadprogresswrapper { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; display: inline-block; vertical-align: top; - margin:0.3em; - height: 29px; + height: 36px; + box-sizing: border-box; +} +#uploadprogresswrapper > input[type='button'] { + height: 36px; } #uploadprogressbar { position:relative; float: left; margin-left: 12px; width: 130px; - height: 26px; + height: 36px; display:inline-block; } #uploadprogressbar + stop { diff --git a/core/css/styles.css b/core/css/styles.css index 06b61f0fa68..72cb7994ea6 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -152,22 +152,37 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b /* CONTENT ------------------------------------------------------------------ */ #controls { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; position: fixed; - height: 36px; + height: 44px; width: 100%; - padding: 0 75px 0 6px; + padding-right: 75px; margin: 0; background: #eee; border-bottom: 1px solid #e7e7e7; 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; + height: 36px; + padding: 7px 10px } #content { position:relative; height:100%; width:100%; } -#content .hascontrols { position: relative; top: 2.9em; } +#content .hascontrols { + position: relative; + top: 45px; +} #content-wrapper { position:absolute; height:100%; width:100%; padding-top:3.5em; padding-left:80px; -moz-box-sizing:border-box; box-sizing:border-box; @@ -746,15 +761,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.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); } -.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;} /* ---- 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; } +div.crumb { + float: left; + display: block; + 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 */ div.crumb:hover, diff --git a/core/img/breadcrumb-start.png b/core/img/breadcrumb-start.png deleted file mode 100644 index b0df5f44037..00000000000 Binary files a/core/img/breadcrumb-start.png and /dev/null differ diff --git a/core/img/breadcrumb-start.svg b/core/img/breadcrumb-start.svg deleted file mode 100644 index 7f36231cdf8..00000000000 --- a/core/img/breadcrumb-start.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/core/img/breadcrumb.png b/core/img/breadcrumb.png index 84992be0d93..7e9593a36bf 100644 Binary files a/core/img/breadcrumb.png and b/core/img/breadcrumb.png differ diff --git a/core/img/breadcrumb.svg b/core/img/breadcrumb.svg index 05a216e50a9..f0b5c9218d5 100644 --- a/core/img/breadcrumb.svg +++ b/core/img/breadcrumb.svg @@ -1,6 +1,12 @@ - - - - - + + + + + image/svg+xml + + + + + + diff --git a/settings/css/settings.css b/settings/css/settings.css index 57a43180a43..0afdd9edbfa 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -47,18 +47,37 @@ tr:hover>td.remove>a { float:right; } li.selected { background-color:#ddd; } table:not(.nostyle) { width:100%; } #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.recoveryPassword { left:50em; display:block; position:absolute; top:-1px; } input#recoveryPassword {width:15em;} select.quota { position:absolute; 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; } /* positioning fixes */ -#newuser { position:relative; top:-3px; } -#newuser .multiselect { top:1px; } +#newuser .multiselect { + min-width: 150px !important; +} +#newuser .multiselect, +#newusergroups + input[type='submit'] { + position: relative; + top: 1px; +} #headerGroups, #headerSubAdmins, #headerQuota { padding-left:18px; } .ie8 table.hascontrols{border-collapse:collapse;width: 100%;}