diff options
| -rw-r--r-- | skins/larry/iehacks.css | 149 | ||||
| -rw-r--r-- | skins/larry/includes/links.html | 3 | ||||
| -rw-r--r-- | skins/larry/styles.css | 39 | ||||
| -rw-r--r-- | skins/larry/svggradient.php | 42 | ||||
| -rw-r--r-- | skins/larry/svggradients.css | 179 | ||||
| -rw-r--r-- | skins/larry/templates/addressbook.html | 2 | ||||
| -rw-r--r-- | skins/larry/templates/identities.html | 2 | ||||
| -rw-r--r-- | skins/larry/templates/mail.html | 2 | ||||
| -rw-r--r-- | skins/larry/templates/settings.html | 2 |
9 files changed, 400 insertions, 20 deletions
diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css new file mode 100644 index 000000000..5814fb05b --- /dev/null +++ b/skins/larry/iehacks.css @@ -0,0 +1,149 @@ +/** + * Roundcube webmail CSS hacks for IE < 9 + * + * Copyright (c) 2012, The Roundcube Dev Team + * + * The contents are subject to the Creative Commons Attribution-ShareAlike + * License. It is allowed to copy, distribute, transmit and to adapt the work + * by keeping credits to the original autors in the README file. + * See http://creativecommons.org/licenses/by-sa/3.0/ for details. + * + * $Id$ + */ + +input.button { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0); +} + +.formbuttons input.button { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7b7b7b', endColorstr='#606060', GradientType=0); +} + +.formbuttons input.button:active { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#7b7b7b', GradientType=0); +} + +input.button.mainaction { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#505050', endColorstr='#2a2e31', GradientType=0); +} + +input.button.mainaction:active { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2e31', endColorstr='#505050', GradientType=0); +} + +a.button { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0); +} + +a.button.pressed, +a.button:active, +input.button:active { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#f9f9f9', GradientType=0); +} + +.pagenav.dark a.button { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#bababa', GradientType=0); +} + +.pagenav.dark a.button.pressed { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#d8d8d8', GradientType=0); +} + +#message.statusbar { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c8c8c8', GradientType=0); +} + +.ui-dialog.popupmessage .ui-dialog-titlebar { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#cfcfcf', GradientType=0); +} + +.ui-dialog.popupmessage .ui-widget-content { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dcdcdc', GradientType=0); +} + +#topnav { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#060606', GradientType=0); +} + +.records-table tr.selected td { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#019bc6', endColorstr='#017cb4', GradientType=0); +} + +.contentbox .boxtitle, +body.iframe .boxtitle { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dfdfdf', GradientType=0); +} + +#login-form input.button { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e2e2e2', GradientType=0); +} + +#login-form input.button:active { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#f9f9f9', GradientType=0); +} + +.toolbar a.button { + filter: none; +} + +a.menuselector { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#dddddd', GradientType=0); +} + +a.menuselector:active { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#f8f8f8', GradientType=0); +} + +.googie_list td.googie_list_onhover, +ul.toolbarmenu li a.active:hover, +#rcmKSearchpane ul li.selected { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aad6', endColorstr='#008fc9', GradientType=0); +} + +.tabsbar .tablink { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#d3d3d3 50%, #f8f8f8', GradientType=0); +} + +.tabsbar .tablink.selected a { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef', GradientType=0); +} + + +/*** addressbook.css ***/ + +.contactfieldgroup { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eeeeee', GradientType=0); +} + +.contactfieldgroup legend { + margin: -8px -8px 8px -8px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d6d6d6', GradientType=0); +} + + +/*** mail.css ***/ + +#mailboxlist li.mailbox .unreadcount { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82acb5', endColorstr='#6a939f', GradientType=0); +} + +#mailboxlist li.mailbox.selected .unreadcount { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d76', endColorstr='#004558', GradientType=0); +} + +#messageheader, #partheader, #composeheaders { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0); +} + +#full-headers { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#e9e9e9', GradientType=0); +} + +#all-headers { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#ffffff', GradientType=0); +} + +#composeoptionsbox { + border-top: 1px solid #999; +} + diff --git a/skins/larry/includes/links.html b/skins/larry/includes/links.html index d2426aee4..0ddc2e160 100644 --- a/skins/larry/includes/links.html +++ b/skins/larry/includes/links.html @@ -3,6 +3,7 @@ <roundcube:if condition="in_array(env:task, array('mail','addressbook','settings'))" /> <link rel="stylesheet" type="text/css" href="/<roundcube:var name="env:task" />.css" /> <roundcube:endif /> +<!--[if IE 9]><link rel="stylesheet" type="text/css" href="/svggradients.css" /><![endif]--> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="/iehacks.css" /><![endif]--> -<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/ie6hacks.css" /><![endif]--> +<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/ie7hacks.css" /><![endif]--> <script type="text/javascript" src="/ui.js"></script>
\ No newline at end of file diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 9a08a2368..2c22cfed0 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -227,6 +227,7 @@ input.button[disabled]:hover { a.button.disabled span.inner { opacity: 0.4; + filter: alpha(opacity=40); } a.button.pressed, @@ -338,6 +339,7 @@ a.iconbutton { a.iconbutton.disabled { opacity: 0.4; + filter: alpha(opacity=40); cursor: default; } @@ -506,11 +508,11 @@ a.iconlink.upload { margin-bottom: 10px; padding: 0 0 0 10px; background: #111; - background: -moz-linear-gradient(top, rgba(64,64,64,1) 0%, rgba(6,6,6,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,1)), color-stop(100%,rgba(6,6,6,1))); - background: -o-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); - background: -ms-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); - background: linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); + background: -moz-linear-gradient(top, #404040 0%, #060606 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#060606)); + background: -o-linear-gradient(top, #404040 0%, #060606 100%); + background: -ms-linear-gradient(top, #404040 0%, #060606 100%); + background: linear-gradient(top, #404040 0%, #060606 100%); } #topline a, @@ -852,6 +854,7 @@ table.layout td { .boxfooter .listbutton.disabled .inner { opacity: 0.4; + filter: alpha(opacity=40); } .boxfooter .countdisplay { @@ -894,6 +897,7 @@ table.layout td { .boxpagenav a.icon.disabled { opacity: 0.4; + filter: alpha(opacity=40); } .centerbox { @@ -1181,11 +1185,11 @@ ul.proplist li { text-shadow: 0px 1px 1px #fff; border-color: #f9f9f9; background: #f9f9f9; - background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(226,226,226,1))); - background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); - background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); - background: linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); + background: -moz-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e2e2e2)); + background: -o-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + background: -ms-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + background: linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); box-shadow: inset 0 1px 0 0 #fff; -moz-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff; @@ -1202,11 +1206,11 @@ ul.proplist li { #login-form input.button:active { color: #333; - background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(249,249,249,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(249,249,249,1))); - background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); - background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); - background: linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); + background: -moz-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#f9f9f9)); + background: -o-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); + background: -ms-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); + background: linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); } #login-form td.title { @@ -1296,6 +1300,7 @@ ul.proplist li { .toolbar a.button.disabled { opacity: 0.4; + filter: alpha(opacity=40); } .dropbutton { @@ -1320,6 +1325,7 @@ ul.proplist li { .dropbutton a.button.disabled + .dropbuttontip { opacity: 0.5; + filter: alpha(opacity=50); } .dropbutton a.button.disabled + .dropbuttontip:hover { @@ -1542,10 +1548,12 @@ ul.toolbarmenu li span.icon { background-position: -100px 0; background-repeat: no-repeat; opacity: 0.2; + filter: alpha(opacity=20); } ul.toolbarmenu li a.active span.icon { opacity: 0.99; + filter: alpha(opacity=100); } ul.toolbarmenu li span.read { @@ -1677,6 +1685,7 @@ ul.toolbarmenu li span.conversation { color: #ccc; white-space: nowrap; opacity: 0.92; + filter: alpha(opacity=92); text-shadow: 0px 1px 1px #333; } diff --git a/skins/larry/svggradient.php b/skins/larry/svggradient.php new file mode 100644 index 000000000..25b2e9082 --- /dev/null +++ b/skins/larry/svggradient.php @@ -0,0 +1,42 @@ +<?php + +/** + * Render SVG gradients for IE 9 + * + * Copyright (c) 2012, The Roundcube Dev Team + * + * The contents are subject to the Creative Commons Attribution-ShareAlike + * License. It is allowed to copy, distribute, transmit and to adapt the work + * by keeping credits to the original autors in the README file. + * See http://creativecommons.org/licenses/by-sa/3.0/ for details. + * + * $Id$ + */ + +header('Content-Type: image/svg+xml'); +header("Expires: ".gmdate("D, d M Y H:i:s", time()+864000)." GMT"); +header("Cache-Control: max-age=864000"); +header("Pragma: "); + +$svg_stops = ''; +$color_stops = explode(';', preg_replace('/[^a-f0-9,;%]/i', '', $_GET['c'])); +$last = count($color_stops) - 1; +foreach ($color_stops as $i => $stop) { + list($color, $offset) = explode(',', $stop); + if ($offset) + $offset = intval($offset); + else + $offset = $i == $last ? 100 : 0; + + $svg_stops .= '<stop offset="' . $offset . '%" stop-color="#' . $color . '" stop-opacity="1"/>'; +} + +?> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"> +<defs> + <linearGradient id="LG1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> + <?php echo $svg_stops; ?> + </linearGradient> +</defs> +<rect width="100%" height="100%" style="fill:url(#LG1);"/> +</svg> diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css new file mode 100644 index 000000000..91192d79d --- /dev/null +++ b/skins/larry/svggradients.css @@ -0,0 +1,179 @@ +/** + * Roundcube webmail SVG-based gradients for IE 9 + * + * Copyright (c) 2012, The Roundcube Dev Team + * + * The contents are subject to the Creative Commons Attribution-ShareAlike + * License. It is allowed to copy, distribute, transmit and to adapt the work + * by keeping credits to the original autors in the README file. + * See http://creativecommons.org/licenses/by-sa/3.0/ for details. + * + * $Id$ + */ + +input.button { + background-image: url(svggradient.php?c=f9f9f9;e6e6e6); +} + +.formbuttons input.button { + background-image: url(svggradient.php?c=7b7b7b;606060); +} + +.formbuttons input.button:active { + background-image: url(svggradient.php?c=5c5c5c;7b7b7b); +} + +input.button.mainaction { + background-image: url(svggradient.php?c=505050;2a2e31); +} + +input.button.mainaction:active { + background-image: url(svggradient.php?c=2a2e31;505050); +} + +a.button { + background-image: url(svggradient.php?c=f9f9f9;e6e6e6); +} + +a.button.pressed, +a.button:active, +input.button:active { + background-image: url(svggradient.php?c=e6e6e6;f9f9f9); +} + +.pagenav.dark a.button { + background-image: url(svggradient.php?c=d8d8d8;bababa); +} + +.pagenav.dark a.button.pressed { + background-image: url(svggradient.php?c=bababa;d8d8d8); +} + +#message.statusbar { + background-image: url(svggradient.php?c=eaeaea;c8c8c8); +} + +.ui-dialog.popupmessage .ui-dialog-titlebar { + background-image: url(svggradient.php?c=e3e3e3;cfcfcf); +} + +.ui-dialog.popupmessage .ui-widget-content { + background-image: url(svggradient.php?c=eeeeee;dcdcdc); +} + +#topnav { + background-image: url(svggradient.php?c=404040;060606); +} + +.records-table tr.selected td { + background-image: url(svggradient.php?c=019bc6;017cb4); +} + +.contentbox .boxtitle, +body.iframe .boxtitle { + background-image: url(svggradient.php?c=eeeeee;dfdfdf); +/* background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.0%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22mLG1%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%20spreadMethod%3D%22pad%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23eeeeee%22%20stop-opacity%3D%221%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23dfdfdf%22%20stop-opacity%3D%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Aurl%28%23mLG1%29%3B%22/%3E%3C/svg%3E);*/ +} + +#login-form input.button { + background-image: url(svggradient.php?c=f9f9f9;e2e2e2); +} + +#login-form input.button:active { + background-image: url(svggradient.php?c=dcdcdc;f9f9f9); +} + +.toolbar a.button { + filter: none; +} + +a.menuselector { + background-image: url(svggradient.php?c=f8f8f8;dddddd); +} + +a.menuselector:active { + background-image: url(svggradient.php?c=dddddd;f8f8f8); +} + +.googie_list td.googie_list_onhover, +ul.toolbarmenu li a.active:hover, +#rcmKSearchpane ul li.selected { + background-image: url(svggradient.php?c=00aad6;008fc9); +} + +.tabsbar .tablink { + background-image: url(svggradient.php?c=f8f8f8;d3d3d3,50;f8f8f8); + outline: none; +} + +.tabsbar .tablink.selected a { + background-image: url(svggradient.php?c=ffffff;efefef); + outline: none; +} + + +/*** addressbook.css ***/ + +.contactfieldgroup { + background-image: url(svggradient.php?c=f7f7f7;eeeeee); +} + +.contactfieldgroup legend { + background-image: url(svggradient.php?c=f0f0f0;d6d6d6); +} + + +/*** mail.css ***/ + +#mailboxlist li.mailbox .unreadcount { + background-image: url(svggradient.php?c=82acb5;6a939f); +} + +#mailboxlist li.mailbox.selected .unreadcount { + background-image: url(svggradient.php?c=005d76;004558); +} + +#messageheader, #partheader, #composeheaders { + background-image: url(svggradient.php?c=ffffff;e9e9e9); +} + +#full-headers { + background-image: url(svggradient.php?c=eaeaea;e9e9e9); +} + +#all-headers { + background-image: url(svggradient.php?c=f3f3f3;ffffff); +} + + +/*** jqueryui theme ***/ + +.ui-menu .ui-menu-item a.ui-state-hover, +.ui-menu .ui-menu-item a.ui-state-active { + background-image: url(svggradient.php?c=00aad6;008fc9) !important; +} + +.ui-button.ui-state-default { + background-image: url(svggradient.php?c=f9f9f9;e6e6e6) !important; +} + +.ui-button.ui-state-active { + background-image: url(svggradient.php?c=e6e6e6;f9f9f9) !important; +} + +.ui-tabs .ui-tabs-nav li { + background-image: url(svggradient.php?c=f8f8f8;d3d3d3,50;d3d3d3) !important; +} + +.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { + background-image: url(svggradient.php?c=fafafa,40;e4e4e4) !important; +} + +.ui-datepicker td a.ui-state-default { + background-image: url(svggradient.php?c=e6e6e6;d6d6d6) !important; +} + +.ui-datepicker td a.ui-state-active { + background-image: url(svggradient.php?c=00acd4;008fc7) !important; +} + diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 5f32887fd..ffba90251 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -63,7 +63,7 @@ <div id="contacts-box" class="uibox"> - <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:96%" src="/watermark.html" /> + <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> <roundcube:object name="message" id="message" class="statusbar" /> </div> diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index 428ebcee0..061088ea5 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -25,7 +25,7 @@ </div> <div id="identity-details" class="uibox contentbox"> - <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:96%" src="/watermark.html" /> + <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> <roundcube:object name="message" id="message" class="statusbar" /> </div> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 2608c93f6..b723b2088 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -100,7 +100,7 @@ <div id="mailview-bottom" class="uibox"> <div id="mailpreviewframe"> -<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" src="/watermark.html" /> +<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> <roundcube:object name="message" id="message" class="statusbar" /> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 0b398351f..88b6b96b2 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -21,7 +21,7 @@ </div> <div id="preferences-box" class="uibox contentbox"> -<roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:96%" src="/watermark.html" /> +<roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> <roundcube:object name="message" id="message" class="statusbar" /> </div> |