From b33f21867fa0755d35a9f4d841a294bdfd5de084 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Wed, 09 Jan 2013 11:56:26 -0500 Subject: [PATCH] Adjust searchbox position --- skins/larry/styles.css | 348 ++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 317 insertions(+), 31 deletions(-) diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 6ee262e..d7485e7 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -59,6 +59,7 @@ -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + outline: none; } input.placeholder, @@ -68,6 +69,12 @@ .bold { font-weight: bold; +} + +/* fixes vertical alignment of checkboxes and labels */ +label input, +label span { + vertical-align: middle; } /*** buttons ***/ @@ -265,6 +272,7 @@ padding: 1px 3px; height: 16px; vertical-align: middle; + margin-bottom: 1px; } .pagenav a.button span.inner { @@ -314,7 +322,7 @@ .pagenav .countdisplay { display: inline-block; - padding:0 1em; + padding: 3px 1em 0 1em; text-shadow: 0px 1px 1px #fff; min-width: 16em; } @@ -329,7 +337,7 @@ width: 24px; height: 18px; text-decoration: none; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -1000px 0 no-repeat; } @@ -502,12 +510,17 @@ /*** basic page layout ***/ +#header { + overflow-x: hidden; /* Chrome bug #1488851 */ +} + #topline { height: 18px; background: url(images/linen_header.jpg) repeat #666; border-bottom: 1px solid #4f4f4f; padding: 2px 0 2px 10px; color: #aaa; + text-align: center; } #topnav { @@ -534,6 +547,7 @@ #toplogo { padding-top: 2px; + cursor: pointer; } .topleft { @@ -566,8 +580,145 @@ color: #fff; } +#taskbar .button-logout { + display: none; +} + +#taskbar a.button-logout span.button-inner { + background-position: -2px -1791px; +} + +#taskbar a.button-logout:hover span.button-inner { + background-position: -2px -1829px; +} + + +/*** minimal version of the page header ***/ + +.minimal #topline { + position: fixed; + top: -18px; + background: #444; + z-index: 5000; + width: 100%; + height: 22px; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.minimal #topline:hover { + top: 0px; + opacity: 0.94; + filter: alpha(opacity=94); + -webkit-transition: top 0.3s ease-in-out; + -moz-transition: top 0.3s ease-in-out; + -o-transition: top 0.3s ease-in-out; + transition: top 0.3s ease-in-out; +} + +.extwin #topline, +.extwin #topline:hover { + position: static; + top: 0px; + height: 18px; + width: auto; + -moz-box-sizing: content-box; + box-sizing: content-box; + opacity: 0.999; +} + +.minimal #topline a.button-logout { + display: none; +} + +.minimal #topline span.username { + display: inline-block; + padding-top: 2px; +} + +.minimal #topnav { + position: relative; + top: 4px; + height: 42px; +} + +.minimal #taskbar a { + position: relative; + padding: 10px 10px 0 6px; + height: 32px; +} + +.minimal #taskbar .button-logout { + display: inline-block; +} + +.minimal #taskbar .button-inner { + top: -4px; + padding: 0; + height: 24px !important; + width: 27px; + text-indent: -5000px; +} + +#taskbar .tooltip { + display: none; +} + +.minimal #taskbar .tooltip { + position: absolute; + top: -500px; + right: 2px; + display: inline-block; + padding: 2px 8px 3px 8px; + background: #444; + background: -moz-linear-gradient(top, #444 0%, #333 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#333)); + background: -o-linear-gradient(top, #444 0%, #333 100%); + background: -ms-linear-gradient(top, #444 0%, #333 100%); + background: linear-gradient(top, #444 0%, #333 100%); + color: #eee; + font-weight: bold; + white-space: nowrap; + border: 1px solid #777; + box-shadow: 0 1px 5px 0 #333; + -moz-box-shadow: 0 1px 5px 0 #333; + -webkit-box-shadow: 0 1px 5px 0 #333; + -o-box-shadow: 0 1px 5px 0 #333; + z-index: 200; + white-space: nowrap; + text-shadow: 0px 1px 1px #000; +} + +.minimal #taskbar .tooltip:after { + content: ""; + position: absolute; + top: -4px; + right: 15px; + border-style: solid; + border-width: 0 4px 4px; + border-color: #888 transparent; + /* reduce the damage in FF3.0 */ + display: block; + width: 0; + z-index: 251; +} + +.ie8 .minimal #taskbar .tooltip:after { + top: -6px; +} + +.minimal #taskbar a:hover .tooltip { + display: block; + top: 39px; +} + /*** taskbar ***/ + +#taskbar { + position: relative; + padding-right: 18px; +} #taskbar a { display: inline-block; @@ -626,6 +777,22 @@ background-position: 0 -168px; } +#taskbar .minmodetoggle { + position: absolute; + top: 0; + right: 0; + display: block; + width: 19px; + height: 46px; + cursor: pointer; + background: url(images/buttons.png) -35px -1778px no-repeat; +} + +.minimal #taskbar .minmodetoggle { + height: 42px; + background-position: -35px -1820px; +} + #mainscreen { position: absolute; top: 88px; @@ -634,8 +801,20 @@ bottom: 20px; } +.minimal #mainscreen { + top: 62px; +} + +.minimal #mainscreen.offset { + top: 102px; +} + +.extwin #mainscreen { + top: 40px; +} + #mainscreen.offset { - top: 130px; + top: 132px; } #mainscreen .offset { @@ -645,11 +824,21 @@ .uibox { border: 1px solid #a3a3a3; border-radius: 4px; + overflow: hidden; box-shadow: 0 0 2px #999; -o-box-shadow: 0 0 2px #999; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; background: #fff; +} + +.minwidth { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + min-width: 1024px; } .scroller { @@ -687,7 +876,8 @@ left: 0; width: 100%; bottom: 0; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; } .listbox .scroller.withfooter { @@ -768,6 +958,7 @@ .listing li.selected > a { color: #004458; font-weight: bold; + background-color: #c7e3ef; } ul.listing { @@ -783,7 +974,7 @@ ul.listing li.droptarget, table.listing tr.droptarget td { - background-color: #c7e3ef; + background-color: #e8e798; } table.listing, @@ -812,6 +1003,10 @@ overflow: hidden; } +.uibox .boxfooter { + border-radius: 0 0 4px 4px; +} + .boxfooter .listbutton { display: inline-block; text-decoration: none; @@ -822,11 +1017,15 @@ margin-top: 1px; } +.uibox .boxfooter .listbutton:first-child { + border-radius: 0 0 0 4px; +} + .boxfooter .listbutton .inner { display: inline-block; width: 48px; height: 35px; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -1000px 0 no-repeat; } @@ -857,6 +1056,10 @@ .boxfooter .listbutton.addbcc .inner { width: 54px; background-position: 2px -1502px; +} + +.boxfooter .listbutton.removegroup .inner { + background-position: 5px -1540px; } .boxfooter .listbutton.disabled .inner { @@ -1001,7 +1204,7 @@ .records-table tr.unfocused td { color: #fff !important; - background: #4db0d2; + background: #4db0d2 !important; } .records-table tr.unfocused td a, @@ -1029,8 +1232,8 @@ margin: 38px 0 10px 0; } -body.iframe.footerbuttons { - margin-bottom: 42px; +body.iframe.floatingbuttons { + margin-bottom: 40px; } body.iframe.fullheight { @@ -1057,14 +1260,27 @@ z-index: 100; } -body.iframe .footerbuttons { +body.iframe .footerleft.floating, +#composeview-bottom .formbuttons.floating { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 110; background: #fff; - padding: 8px; + padding-top: 8px; + padding-bottom: 12px; +} + +body.iframe .footerleft.floating:before, +#composeview-bottom .formbuttons.floating:before { + content: " "; + position: absolute; + top: -6px; + left: 0; + width: 100%; + height: 6px; + background: url(images/overflowshadow.png) top center no-repeat; } .boxcontent { @@ -1080,8 +1296,16 @@ overflow: auto; } +.iframebox { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 28px; +} + .footerleft { - padding: 0 12px; + padding: 0 12px 4px 12px; } .propform fieldset { @@ -1181,13 +1405,22 @@ padding-top: 10px; } +#login-form .noscriptwarning { + margin: 0 auto; + width: 430px; + color: #cf2734; + font-size: 110%; + font-weight: bold; +} + #login-form td.input { + width: 80%; padding: 8px; } #login-form input[type="text"], #login-form input[type="password"] { - width: 24em; + width: 100%; border-color: #666; } @@ -1224,7 +1457,13 @@ background: linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); } +#login-form form table { + width: 98%; +} + #login-form td.title { + width: 20%; + white-space: nowrap; color: #cecece; text-shadow: 0px 1px 1px black; text-align: right; @@ -1262,32 +1501,45 @@ /*** quicksearch **/ #quicksearchbar { - width: 100%; + position: absolute; + right: 1px; + top: -5px; + width: 240px; } #quicksearchbar input { width: 176px; margin: 0; - padding: 5px 26px 5px 38px; + margin-top: 7px; + padding: 3px 30px 3px 34px; + height: 18px; background: #f1f1f1; - border-color: #a3a3a3; + border-color: #ababab; font-weight: bold; + font-size: 11px; } #quicksearchbar #searchmenulink { position: absolute; - top: 5px; - left: 8px; + top: 12px; + left: 6px; } #quicksearchbar #searchreset { position: absolute; - top: 4px; - right: 3px; + top: 11px; + right: 1px; } /*** toolbar ***/ + +.toolbar .spacer { + display: inline-block; + width: 24px; + height: 40px; + padding: 0; +} .toolbar a.button { text-align: center; @@ -1410,7 +1662,7 @@ } .toolbar a.button.spellcheck.selected { - background-position: left -1570px; + background-position: left -1620px; color: #1978a1; } @@ -1430,6 +1682,19 @@ background-position: center -1054px; } +.toolbar a.button.send { + background-position: center -1660px; +} + +.toolbar a.button.savedraft { + background-position: center -1700px; +} + +.toolbar a.button.close { + background-position: 0 -1745px; +} + + a.menuselector { display: inline-block; border: 1px solid #ababab; @@ -1442,12 +1707,15 @@ background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%); text-decoration: none; color: #333; + cursor: pointer; + white-space: nowrap; } a.menuselector .handle { display: inline-block; - padding: 3px 32px 0 8px; - min-height: 18px; + padding: 0 32px 0 6px; + height: 20px; + line-height: 19px; text-shadow: 0px 1px 1px #fff; background: url(images/selector.png) right center no-repeat; border-radius: 4px; @@ -1463,11 +1731,6 @@ text-decoration: none; } -a.dropdownselector { - position: absolute; - z-index: 1; -} - select.decorated { position: relative; z-index: 10; @@ -1481,7 +1744,6 @@ html.opera select.decorated { opacity: 1; - height: auto; } select.decorated option { @@ -1491,7 +1753,7 @@ border-top: 1px solid #5a5a5a; border-bottom: 1px solid #333; text-shadow: 0px 1px 1px #333; - padding: 6px 10px; + padding: 4px 6px; outline: none; } @@ -1869,9 +2131,22 @@ background-position: 0 -338px; } +.attachmentslist li.txt, +.attachmentslist li.text { + background-position: 0 -416px; +} + .attachmentslist li.ics, .attachmentslist li.calendar { background-position: 0 -364px; +} + +.attachmentslist li.vcard { + background-position: 0 -390px; +} + +.attachmentslist li.html { + background-position: 0 -442px; } .attachmentslist li a, @@ -1883,6 +2158,12 @@ text-shadow: 0px 1px 1px #fff; text-decoration: none; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#compose-attachments ul li { + padding-right: 28px; } .attachmentslist li a:hover { @@ -1902,7 +2183,7 @@ height: 18px; padding: 0; text-decoration: none; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -7px -337px no-repeat; } @@ -1917,6 +2198,11 @@ margin-bottom: 12px; padding-top: 15px; height: 27px; + white-space: nowrap; +} + +.ui-dialog-content .tabsbar { + margin-bottom: 0; } .tabsbar .tablink { -- Gitblit v1.9.1