CSS optimizations for IE8/9

thomascube

2012-01-21 d5fedc34ab68c809d06165e8852910962c52b989

CSS optimizations for IE8/9

 skins/larry/iehacks.css

New file
@@ -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;
}


 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>

 skins/larry/styles.css

@@ -227,6 +227,7 @@

a.button.disabled span.inner {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

a.button.pressed,
@@ -338,6 +339,7 @@

a.iconbutton.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: default;
}

@@ -506,11 +508,11 @@
    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 @@

.boxfooter .listbutton.disabled .inner {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.boxfooter .countdisplay {
@@ -894,6 +897,7 @@

.boxpagenav a.icon.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.centerbox {
@@ -1181,11 +1185,11 @@
    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 @@

#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 @@

.toolbar a.button.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.dropbutton {
@@ -1320,6 +1325,7 @@

.dropbutton a.button.disabled + .dropbuttontip {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.dropbutton a.button.disabled + .dropbuttontip:hover {
@@ -1542,10 +1548,12 @@
    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 @@
    color: #ccc;
    white-space: nowrap;
    opacity: 0.92;
    filter: alpha(opacity=92);
    text-shadow: 0px 1px 1px #333;
}


 skins/larry/svggradient.php

New file
@@ -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>

 skins/larry/svggradients.css

New file
@@ -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;
}


 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>


 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>


 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" />

 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>