More CSS styling for Larry

pull/1/head
thomascube 13 years ago
parent 0ea1f1e4ef
commit 28e18c75ef

@ -1,7 +1,7 @@
<div id="settings-sections" class="uibox listbox"> <div id="settings-sections" class="uibox listbox">
<h2 class="boxtitle"><roundcube:label name="settings" /></h2> <h2 class="boxtitle"><roundcube:label name="settings" /></h2>
<div id="settings-tabs" class="scroller"> <div id="settings-tabs" class="scroller">
<span id="settingstabdefault" class="listitem preferences"><roundcube:button command="preferences" type="link" label="preferences" title="editpreferences" /></span> <span id="settingstabpreferences" class="listitem preferences"><roundcube:button command="preferences" type="link" label="preferences" title="editpreferences" /></span>
<span id="settingstabfolders" class="listitem folders"><roundcube:button command="folders" type="link" label="folders" title="managefolders" /></span> <span id="settingstabfolders" class="listitem folders"><roundcube:button command="folders" type="link" label="folders" title="managefolders" /></span>
<span id="settingstabidentities" class="listitem identities"><roundcube:button command="identities" type="link" label="identities" title="manageidentities" /></span> <span id="settingstabidentities" class="listitem identities"><roundcube:button command="identities" type="link" label="identities" title="manageidentities" /></span>
<span id="settingstababout" class="listitem about"><roundcube:button command="about" type="link" label="about" title="about" /></span> <span id="settingstababout" class="listitem about"><roundcube:button command="about" type="link" label="about" title="about" /></span>

@ -679,12 +679,21 @@ h2.subject {
font-weight: bold; font-weight: bold;
} }
.headers-table td.header span {
white-space: nowrap;
}
.rcmaddcontact { .rcmaddcontact {
position: relative; position: relative;
top: 1px; top: 1px;
margin-left: 0.5em; margin-left: 0.5em;
} }
.rcmaddcontact imp {
width: 20px;
height: 13px;
}
#messageheader #countcontrols { #messageheader #countcontrols {
position: absolute; position: absolute;
top: 8px; top: 8px;
@ -750,7 +759,7 @@ h2.subject {
div.message-part, div.message-part,
div.message-htmlpart { div.message-htmlpart {
padding: 10px 8px; padding: 10px 2px;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }

@ -42,7 +42,8 @@
} }
#sections-table tbody td.section, #sections-table tbody td.section,
#settings-sections span.listitem a { #settings-sections span.listitem a,
#settings-sections span.tablink a {
padding-left: 36px; padding-left: 36px;
background: url(images/listicons.png) -100px 0 no-repeat; background: url(images/listicons.png) -100px 0 no-repeat;
} }

@ -64,11 +64,32 @@ textarea.placeholder {
/*** buttons ***/ /*** buttons ***/
input.button { input.button {
display: inline-block;
margin: 0 2px;
padding: 4px 6px;
color: #525252;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #c0c0c0;
border-radius: 4px;
background: #f7f7f7;
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6));
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
box-shadow: 0 1px 1px 0 #ccc;
-o-box-shadow: 0 1px 1px 0 #ccc;
-webkit-box-shadow: 0 1px 1px 0 #ccc;
-moz-box-shadow: 0 1px 1px 0 #ccc;
text-decoration: none;
}
.formbuttons input.button {
color: #dddddd; color: #dddddd;
font-size: 110%; font-size: 110%;
text-shadow: 1px 1px 1px #333; text-shadow: 1px 1px 1px #333;
padding: 4px 12px; padding: 4px 12px;
border: 1px solid #465864; border-color: #465864;
border-radius: 5px; border-radius: 5px;
background: #7a7b7d; background: #7a7b7d;
background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
@ -78,7 +99,7 @@ input.button {
background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */ background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
} }
input.button:hover { .formbuttons input.button:hover {
color: #ededed; color: #ededed;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
@ -86,7 +107,7 @@ input.button:hover {
-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
} }
input.button:active { .formbuttons input.button:active {
color: #fff; color: #fff;
background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%); background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1)));
@ -158,7 +179,8 @@ a.button.disabled span.inner {
} }
a.button.pressed, a.button.pressed,
a.button:active { a.button:active,
input.button:active {
background: #e6e6e6; background: #e6e6e6;
background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9));
@ -483,6 +505,7 @@ a.iconbutton.reset {
} }
.listbox .listitem, .listbox .listitem,
.listbox .tablink,
.listing tbody td, .listing tbody td,
.listing li { .listing li {
font-size: 11px; font-size: 11px;
@ -494,6 +517,7 @@ a.iconbutton.reset {
} }
.listbox .listitem a, .listbox .listitem a,
.listbox .tablink a,
.listing tbody td, .listing tbody td,
.listing li a { .listing li a {
display: block; display: block;
@ -505,6 +529,7 @@ a.iconbutton.reset {
} }
.listbox .listitem.selected, .listbox .listitem.selected,
.listbox .tablink.selected,
.listing tbody tr.selected td, .listing tbody tr.selected td,
.listing li.selected { .listing li.selected {
color: #004458; color: #004458;
@ -518,6 +543,14 @@ ul.listing {
padding: 0; padding: 0;
} }
ul.listing li {
background-color: #d9ecf4;
}
ul.listing li.droptarget {
background-color: #c7e3ef;
}
table.listing { table.listing {
width: 100%; width: 100%;
border-spacing: 0; border-spacing: 0;
@ -912,3 +945,48 @@ ul.toolbarmenu li label {
padding: 4px 8px; padding: 4px 8px;
text-shadow: 1px 1px 1px #333; text-shadow: 1px 1px 1px #333;
} }
#rcmdraglayer {
min-width: 300px;
width: auto !important;
width: 300px;
padding: 6px 8px;
background: #444;
border: 1px solid #555;
border-radius: 4px;
box-shadow: 0 2px 6px 0 #333;
-moz-box-shadow: 0 2px 6px 0 #333;
-webkit-box-shadow: 0 2px 6px 0 #333;
-o-box-shadow: 0 2px 6px 0 #333;
z-index: 250;
color: #ccc;
font-size: 11px;
white-space: nowrap;
opacity: 0.92;
text-shadow: 1px 1px 1px #333;
}
#rcmdraglayer:after {
content: "";
position: absolute;
top: 6px;
left: -6px;
border-style: solid;
border-width: 6px 6px 6px 0;
border-color: transparent #444;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
}
._draglayercopy:before {
position: absolute;
bottom: -5px;
left: -6px;
content: " ";
width: 15px;
height: 15px;
background: url(images/buttons.png) -8px -360px no-repeat;
}

@ -13,7 +13,7 @@
</div> </div>
<div id="formfooter"> <div id="formfooter">
<div class="footerleft"> <div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" /> <roundcube:button command="save" type="input" class="button mainaction" label="save" />
</div> </div>
</div> </div>

@ -38,13 +38,21 @@ function rcube_mail_ui()
// rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); // rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui);
rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
$('#mailpreviewtoggle').click(function(e){ toggle_preview_pane(e); return false }); $('#mailpreviewtoggle').click(function(e){ toggle_preview_pane(e); return false });
$('#maillistmode').addClass(rcmail.env.threading ? 'unselected' : 'selected').click(function(e){ switch_view_mode('list'); return false }); $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
$('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : 'unselected').click(function(e){ switch_view_mode('thread'); return false }); $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });
if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') { if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
init_messageview(); layout_messageview();
} }
} }
else if (rcmail.env.task == 'settings') {
var tab = '#settingstabpreferences';
if (rcmail.env.action)
tab = '#settingstab' + (rcmail.env.action.indexOf('identity')>0 ? 'identities' : rcmail.env.action.replace(/\./g, ''));
$(tab).addClass('selected')
.children().first().removeAttr('onclick').click(function() { return false; });
}
$(document.body).bind('mouseup', function(e){ $(document.body).bind('mouseup', function(e){
var config, obj, target = e.target; var config, obj, target = e.target;
@ -70,12 +78,24 @@ function rcube_mail_ui()
} }
} }
}); });
$(window).resize(resize);
}
/**
* Update UI on window resize
*/
function resize()
{
if (rcmail.env.task == 'mail' && (rcmail.env.action == 'show' || rcmail.env.action == 'preview')) {
layout_messageview();
}
} }
/** /**
* Adjust UI objects of the mail view screen * Adjust UI objects of the mail view screen
*/ */
function init_messageview() function layout_messageview()
{ {
$('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px'); $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px');
$('#message-objects div a').addClass('button'); $('#message-objects div a').addClass('button');

Loading…
Cancel
Save