CSS optimizations for IE8/9
thomascube
13 years ago
parent
071c78c3a4
commit
d5fedc34ab
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue