From c335169f6de619ba05685cc1de5cbd1163c18321 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt <hey@jancborchardt.net> Date: Fri, 4 Oct 2013 08:41:16 +0300 Subject: [PATCH] increase height of controls bar and elements to more clickable 44px --- apps/files/css/files.css | 59 ++++++++++++++++++++++++---------- apps/files/css/upload.css | 55 ++++++++++++++++++++++--------- core/css/styles.css | 58 +++++++++++++++++++++++++++------ core/img/breadcrumb-start.png | Bin 311 -> 0 bytes core/img/breadcrumb-start.svg | 6 ---- core/img/breadcrumb.png | Bin 320 -> 594 bytes core/img/breadcrumb.svg | 16 ++++++--- settings/css/settings.css | 27 +++++++++++++--- 8 files changed, 164 insertions(+), 57 deletions(-) delete mode 100644 core/img/breadcrumb-start.png delete mode 100644 core/img/breadcrumb-start.svg diff --git a/apps/files/css/files.css b/apps/files/css/files.css index f09e51e70c..138b15db04 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 2d11e41ba8..ef04356909 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 06b61f0fa6..72cb7994ea 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 b0df5f44037637c322fb4eb867f90c18c6e8f613..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 311 zcmeAS@N?(olHy`uVBq!ia0y~yVBlt8U{K*;V_;y24?A#_fq{Xg*vT`5gM)*kh9jke zfq{Xuz$3Dlfr0lr2s1iq%&uTyV2~_vjVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw z{mw>;fq`L*r;B5V#p&c7<?rX+|NsBLWXD0C^7r>@KfJkVtd}JEpZ!r;kjVe44-XpE zHg^4IzPoRJ#?b&?Ll<qfN8;b#-xpU1Gvx4Bb^RExV5S&m$T6SI%SdpwM9XH6z&~;l zR*#Nou{}JxMB`um?{B&6i$w45EPj4#rg3^iXAsX((Ip!HxW25h+1TZH?xu(EQ5DO@ zO}`x7y_V=K^K?43sOpirX0-3px<H2#MQ5*%u0aQH`29UJXG#_m!+b5Cq^^Av6&M&8 O7(8A5T-G@yGywqF*mju! diff --git a/core/img/breadcrumb-start.svg b/core/img/breadcrumb-start.svg deleted file mode 100644 index 7f36231cdf..0000000000 --- a/core/img/breadcrumb-start.svg +++ /dev/null @@ -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> diff --git a/core/img/breadcrumb.png b/core/img/breadcrumb.png index 84992be0d9350d7a94455cfe46dcea2fcc669e64..7e9593a36bf9a2fc123ee6237fdfc88c022df0a6 100644 GIT binary patch delta 530 zcmX@Wbcsc=Gr-TCmrII^fq{Y7)59f*fq{XKfq_AXgN=cKAylXH%|u0?ddBmfE{-7{ zol~!z@AfT}IR0^Z;--Yev&WLIT-NY8C4a!_kdt8cO&+07i;rkbIrd|#g0$w%4VxS$ z+aGW{*?+e7luk}W^o9vXx9)g;t@PQP>T{K^N?uj|n)7}8^Us#?d*kvqUVlCJ)%V}K zY=n38?>rN;+}YRVNOaACrGAGV)yk<G)fXqLC%V)eEWY!`t3~_9^qJOHoXU^b-#zjR zSGsd3Bu(yxN>9iA8Ha1q{K^y$3I93x#^PaD-TwV+X3nhsz!NO^akFlqi_W9Ph6`7S zh?VlGzjg}L?&&yRu~1FqaYupV@6}F*VG@G(3;kU+W_1|!`#udY;ZlAizD}!k5wD=! z<Ms6u147sqtTHOrpQq(?ahitGy$6$(MAmk)ma@G!xH~Ii-MT}pHXR-Lt8Zy_J<U0M z@Y<0xF_{I{G1C9ia{H@zCRdo`nB<unUr*xPEcmhLM!xf&j`fR`BzDg^bEm=hM&vwG z!TblIE_?L(vpQ$)6m2(*HI;YYv({jDR)nX{y5o{E8LNK3GD@0yGq=A=WOeV1*wFv1 z3dYwZX4LL^6D|CaY1%B89vyY#>yLHHOgm2<d0i2kTBd7gy!`=(*>=HRA@L6z&b{$U qN_%&#thr+AI?g%Q63RmVGTU<Qf9-!ld^!UI1B0ilpUXO@geCyZeDlHp delta 254 zcmcb_a)3#(Gr-TCmrII^fq{Y7)59f*fq{XWfq_AVgN=cKAwKND(TR#a^$dGGT^vI! zPOrVXTkw#9fNLOYUo4aF4*nO1MVu6uF={nvDOfR@C<$3UTz*%QDZSkE+r8z_n}oM* zy>_XZOD)E*<Y83y!6r+t{DR{*T5lg<Y}c^acG*032k)7PMISDh8J9jZ+i=v9Wqadk z^}zcN`WNk6$9X(FaQ_4IK>M%zx?Y7GRF+%4B2Q;yysPU2Mspukp{h3p|Mcfn^?qPq z7A8Jz(j{5GAgx6YKeVq8eRZg9wL+-T!(U#a$vcXIQ|JBkwPD;*yeROwYVZ*T1_lOC LS3j3^P6<r_&y#2R diff --git a/core/img/breadcrumb.svg b/core/img/breadcrumb.svg index 05a216e50a..f0b5c9218d 100644 --- a/core/img/breadcrumb.svg +++ b/core/img/breadcrumb.svg @@ -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="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.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"/> - </g> +<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/"> + <metadata> + <rdf:RDF> + <cc:Work rdf:about=""> + <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> diff --git a/settings/css/settings.css b/settings/css/settings.css index 57a43180a4..0afdd9edbf 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%;} -- GitLab