X-Git-Url: https://git.donarmstrong.com/?a=blobdiff_plain;f=skins%2Fdefault%2Fcommon.css;h=bf00dc35177a25772f0f1e5c1004f08e71e407c8;hb=76507f7c63a660742e76889ad6e3919f3dde3bb0;hp=43b3a92abd9675f4cd8d8daa5aa903a8ef77fda8;hpb=b68022ca3782d5eb5a1a7ef6f8cf7abe1dc15bd6;p=roundcube.git diff --git a/skins/default/common.css b/skins/default/common.css index 43b3a92..bf00dc3 100644 --- a/skins/default/common.css +++ b/skins/default/common.css @@ -1,15 +1,17 @@ -/***** RoundCube|Mail basic styles *****/ +/***** Roundcube|Mail basic styles *****/ body { + font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; margin: 8px; - background-color: #F6F6F6; /* #EBEBEB; */ - color: #000000; + background-color: #F6F6F6; + color: #000; + font-size: 12px; } body.iframe { - margin: 0px; + margin: 20px 0 0 0; background-color: #FFF; } @@ -18,11 +20,10 @@ body.extwin margin: 10px; } -body, td, th, div, p, h3 +td, th, div, p, select, input, textarea { - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 12px; - color: #000000; + font-family: inherit; } th @@ -32,20 +33,18 @@ th h3 { - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 18px; - color: #000000; } a, a:active, a:visited { - color: #000000; + color: #000; outline: none; } a.button, a.button:visited, a.tab, a.tab:visited, a.axislist { - color: #000000; + color: #000; text-decoration: none; } @@ -59,7 +58,7 @@ a.tab hr { height: 1px; - background-color: #666666; + background-color: #666; border-style: none; } @@ -68,23 +67,21 @@ input[type="button"], input[type="password"], textarea { - font-size: 9pt; - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - padding: 1px; - padding-left: 3px; - padding-right: 3px; - border: 1px solid #666666; - color: #333333; - background-color: #ffffff; + border: 1px solid #666; + color: #333; + background-color: #FFF; } input, textarea { - font-size: 9pt; - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: black; - padding-left: 3px; - padding-right: 3px; + padding: 1px 3px; +} + +input.placeholder, +textarea.placeholder +{ + color: #aaa; } input.button @@ -103,6 +100,13 @@ input.button:hover color: black; } +input.button[disabled], +input.button[disabled]:hover +{ + color: #aaa; + border-color: #ccc; +} + input.mainaction { font-weight: bold; @@ -125,8 +129,31 @@ img font-size: 11px; } +.formlinks a, +.formlinks a:visited +{ + color: #CC0000; + font-size: 11px; + text-decoration: none; +} + +.formlinks a.disabled, +.formlinks a.disabled:visited +{ + color: #999999; +} + /** common user interface objects */ +#mainscreen +{ + position: absolute; + top: 85px; + right: 20px; + bottom: 20px; + left: 20px; +} + #header { position: absolute; @@ -142,10 +169,10 @@ img position: absolute; top: 0px; right: 0px; - width: 600px; - height: 37px; - background: url(images/taskbar.gif) top right no-repeat; - padding: 10px 4px 10px 0px; + height: 24px; + width: 100%; + background: url(images/taskbar.png) top right no-repeat; + padding: 10px 6px 5px 0px; text-align: right; white-space: nowrap; z-index: 2; @@ -156,8 +183,8 @@ img font-size: 11px; color: #666666; text-decoration: none; - padding: 6px 14px 6px 27px; - background: url('images/taskicons.gif') no-repeat; + padding: 6px 12px 6px 26px; + background: url(images/taskicons.gif) no-repeat; } #taskbar a:hover @@ -190,8 +217,8 @@ img position: absolute; display: none; top: -1px; - left: 200px; - right: 200px; + margin-left: -225px; + left: 50%; z-index: 5000; opacity: 0.85; } @@ -199,46 +226,167 @@ img #message div { width: 400px; - margin: 0px auto; + margin: 0px; min-height: 22px; padding: 8px 10px 8px 46px; } #message div.notice, -#remote-objects-message +#message-objects div.notice { - background: url('images/display/icons.png') 6px 3px no-repeat; + background: url(images/display/icons.png) 6px 3px no-repeat; background-color: #F7FDCB; border: 1px solid #C2D071; } #message div.error, -#message div.warning +#message div.warning, +#message-objects div.warning, +#message-objects div.error { - background: url('images/display/icons.png') 6px -97px no-repeat; + background: url(images/display/icons.png) 6px -97px no-repeat; background-color: #EF9398; border: 1px solid #DC5757; } -#message div.confirmation +#message div.confirmation, +#message-objects div.confirmation { - background: url('images/display/icons.png') 6px -47px no-repeat; + background: url(images/display/icons.png) 6px -47px no-repeat; background-color: #A6EF7B; border: 1px solid #76C83F; } -#message div.loading +#message div.loading, +#message-objects div.loading { - background: url('images/display/loading.gif') 6px 3px no-repeat; + background: url(images/display/loading.gif) 6px 3px no-repeat; background-color: #EBEBEB; border: 1px solid #CCCCCC; } -#pagecontent +#message a +{ + cursor: pointer; + text-decoration: underline; +} + +.box +{ + border: 1px solid #999; +} + +.boxtitle +{ + height: 12px !important; + padding: 2px 10px 5px 5px; + border-bottom: 1px solid #999; + color: #333; + font-size: 11px; + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; + background: url(images/listheader.gif) top left repeat-x #CCC; +} + +.boxtitle .rightalign +{ + float: right; +} + +body.iframe .boxtitle +{ + position: fixed; + top: 0; + left: 0; + width: 100%; +} + +.boxcontent +{ + padding: 15px 10px 10px 10px; + background-color: #F2F2F2; +} + +.boxcontent table td.title +{ + color: #666; + padding-right: 10px; +} + +.boxlistcontent { position: absolute; - top: 95px; - left: 20px; + top: 20px; + bottom: 22px; + left: 0; + right: 0; + width: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.boxsubject +{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + overflow: hidden; + height: 22px; + border-bottom: 1px solid #999; + background: url(images/listheader.gif) top left repeat-x #CCC; +} + +.boxfooter +{ + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + overflow: hidden; + height: 22px; + border-top: 1px solid #999; + background: url(images/listheader.gif) top left repeat-x #CCC; +} + +.boxfooter a.button, +.boxfooter a.buttonPas +{ + display: block; + float: left; + width: 34px; + height: 22px; + padding: 0px; + margin: 0; + overflow: hidden; + background: url(images/icons/groupactions.png) 0 0 no-repeat transparent; + opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ +} + +.boxfooter a.groupactions +{ + background-position: 0 -26px; +} + +.boxfooter a.buttonPas +{ + opacity: 0.35; +} + +.pagenav +{ + min-width: 250px; +} + +.pagenav span +{ + color: #444; + font-size: 11px; + text-shadow: white 1px 1px; + white-space: nowrap; } .pagenav a.button, @@ -251,7 +399,7 @@ img padding: 0; margin: 1px; overflow: hidden; - background: url('images/pagenav.gif') 0 0 no-repeat transparent; + background: url(images/pagenav.gif) 0 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } @@ -298,27 +446,107 @@ img .splitter-h { - cursor: n-resize; + cursor: n-resize; cursor: row-resize; background-position: center 2px; } .splitter-v { - cursor: e-resize; + cursor: e-resize; cursor: col-resize; background-position: 2px center; } -.boxtitle +.popupmenu +{ + position: absolute; + top: 32px; + left: 90px; + width: auto; + display: none; + background-color: #fff; + background-color: rgba(255, 255, 255, 0.95); + border: 1px solid #999; + padding: 4px; + z-index: 240; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -moz-box-shadow: 1px 1px 12px #999; + -webkit-box-shadow: #999 1px 1px 12px; +} + +.popupmenu ul +{ + margin: -4px 0; + padding: 0; + list-style: none; +} + +.popupmenu ul li { - height: 12px !important; - padding: 2px 10px 5px 10px; - border-bottom: 1px solid #999; - color: #333; font-size: 11px; - font-weight: bold; - background: url('images/listheader.gif') top left repeat-x #CCC; + white-space: nowrap; + min-width: 100px; + margin: 3px -4px; +} + +.popupmenu li a +{ + display: block; + color: #a0a0a0; + padding: 2px 10px; + text-decoration: none; + min-height: 14px; +} + +.popupmenu li a.active, +.popupmenu li a.active:active, +.popupmenu li a.active:visited +{ + color: #333; +} + +.popupmenu li a.active:hover +{ + color: #fff; + background-color: #c00; +} + +.popupmenu li.block input +{ + float: left; } +.darkbg +{ + background-color: #F2F2F2 !important; +} + +.dropbutton, +.dropbutton span +{ + float: left; + height: 32px; +} + +.dropbutton:hover +{ +/* background: url(images/dbutton.png) 0 0 no-repeat transparent; */ +} + +.dropbutton span +{ + width: 9px; + background: url(images/dbutton.png) -53px 0 no-repeat transparent; +} + +.dropbutton span:hover +{ + cursor: pointer; + background-position: -74px 0; +} + + /***** common table settings ******/ table.records-table thead tr td @@ -328,7 +556,7 @@ table.records-table thead tr td vertical-align: middle; border-bottom: 1px solid #999999; color: #333333; - background: url('images/listheader.gif') top left repeat-x #CCC; + background: url(images/listheader.gif) top left repeat-x #CCC; font-size: 11px; font-weight: bold; } @@ -372,26 +600,26 @@ table.records-table tr.unfocused td { position: absolute; top: 55px; - right: 20px; - width: 182px; + right: 30px; + width: 190px; height: 20px; text-align: right; - background: url('images/searchfield.gif') top left no-repeat; + background: url(images/searchfield.gif) top left no-repeat; } #searchreset { position: absolute; top: 3px; - right: 4px; + right: 12px; text-decoration: none; } -#searchmod +#searchmenulink { position: absolute; top: 3px; - right: 160px; + right: 168px; } #quicksearchbar img @@ -411,24 +639,17 @@ table.records-table tr.unfocused td border: none; } - /***** roundcube webmail pre-defined classes *****/ -#rcversion +#rcmversion { position: absolute; - top: 67px; - left: 20px; - width: 160px; - text-align: center; - - font-weight: normal; - font-size: x-small; - font-variant: small-caps; - - color: #999999; - /*border: 1px solid #308014; - background-color: #b4eeb4;*/ + bottom: 10px; + right: 20px; + text-align: right; + white-space: nowrap; + font-size: 8pt; + color: #999; } #rcmdraglayer @@ -437,14 +658,30 @@ table.records-table tr.unfocused td width: auto !important; width: 300px; border: 1px solid #999999; - background-color: #F9F9F9; + background-color: #fff; padding-left: 8px; padding-right: 8px; padding-top: 3px; padding-bottom: 3px; font-size: 11px; white-space: nowrap; - opacity: 0.7; + opacity: 0.82; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -moz-box-shadow: 1px 1px 12px #999; + -webkit-box-shadow: #999 1px 1px 12px; +} + +.draglayercopy:before +{ + position: absolute; + bottom: -5px; + left: -6px; + content: " "; + width: 14px; + height: 14px; + background: url(images/messageactions.png) -2px -128px no-repeat; } a.rcmContactAddress @@ -500,9 +737,7 @@ a.rcmContactAddress:hover #login-form table td.title { - color: #666; text-align: right; - padding-right: 10px; white-space: nowrap; } @@ -512,12 +747,205 @@ a.rcmContactAddress:hover margin: auto; } -#login-form .boxcontent +#login-form table td.input input { - padding: 20px 10px 10px 10px; + width: 200px; } #console { opacity: 0.8; } + +.disabled +{ + color: #999; +} + +font.bold +{ + font-weight: bold; +} + + +/***** onclick menu list *****/ + +ul.toolbarmenu +{ + margin: -4px 0 -4px 0; + padding: 0; + list-style: none; +} + +ul.toolbarmenu li +{ + font-size: 11px; + white-space: nowrap; + min-width: 130px; + margin: 2px -4px; +} + +ul.toolbarmenu li a +{ + display: block; + color: #a0a0a0; + padding: 1px 12px 3px 28px; + text-decoration: none; + min-height: 14px; +} + +ul.toolbarmenu li a.active, +ul.toolbarmenu li a.active:active, +ul.toolbarmenu li a.active:visited +{ + color: #333; +} + +ul.toolbarmenu li input +{ + vertical-align: middle; +} + +ul.toolbarmenu li hr +{ + color: #ccc; + width: 130px; + height: 1px; + margin: 2px 1px 2px 1px; +} + +ul.toolbarmenu li img +{ + float: left; + margin: 0 2px; +} + +div.popupmenu ul li.separator_below, +ul.toolbarmenu li.separator_below +{ + border-bottom: 1px solid #ccc; + margin-bottom: 2px; + padding-bottom: 2px; +} + +div.popupmenu ul li.separator_above, +ul.toolbarmenu li.separator_above +{ + border-top: 1px solid #ccc; + margin-top: 2px; + padding-top: 2px; +} + +#searchmenu +{ + width: 160px; +} + +#searchmenu ul.toolbarmenu +{ + margin: 0; +} + +#searchmenu ul.toolbarmenu li +{ + margin: 1px 4px 1px; +} + + +/***** tabbed interface elements *****/ + +div.tabsbar, +#tabsbar +{ + position: absolute; + top: 50px; + left: 220px; + right: 20px; + height: 22px; + border-bottom: 1px solid #999999; + white-space: nowrap; +} + +div.tabsbar +{ + top: 35px; + left: 12px; + right: 12px; +} + +span.tablink, +span.tablink-selected +{ + float: left; + height: 23px !important; + height: 22px; + overflow: hidden; + background: url(images/tabs-left.gif) top left no-repeat; +} + +span.tablink +{ + cursor: pointer; +} + +span.tablink-selected +{ + cursor: default; + background-position: 0px -23px; +} + +span.tablink a, +span.tablink-selected a +{ + display: inline-block; + padding: 5px 10px 0 5px; + margin-left: 5px; + height: 23px; + color: #555555; + max-width: 185px; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + background: url(images/tabs-right.gif) top right no-repeat; +} + +span.tablink-selected a +{ + cursor: inherit; + color: #000000; + background-position: right -23px; +} + +fieldset +{ + margin-bottom: 1em; + border: 1px solid #999999; + padding: 4px 8px 9px 8px; +} + +legend +{ + color: #999999; +} + +fieldset.tabbed +{ + margin-top: 22px; + padding-top: 12px; +} + +.quota_text { + text-align: center; + font-size: 10px; + color: #666; + border: 1px solid #999; + cursor: default; +} +.quota_bg { background-color: white; } +.quota_high { background: url(images/quota-colors.png) repeat-x 0 -28px #f90509; } +.quota_mid { background: url(images/quota-colors.png) repeat-x 0 -14px #e3e909; } +.quota_low { background: url(images/quota-colors.png) repeat-x 0 0px #05f905; } +.quota_text_high { color: white; } +.quota_text_mid { color: #666; } +.quota_text_low { color: #666; }