Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Fine tuning Larry styles + browser specific css quirks

  • Loading branch information...
commit 071c78c3a4f344f1005c8be8ba895a91452de6b9 1 parent 0b179e0
Thomas B. authored January 20, 2012
10  program/js/common.js
@@ -121,14 +121,16 @@ function roundcube_browser()
121 121
     else if (this.konq)
122 122
       classname += ' konqueror';
123 123
     else if (this.safari)
124  
-      classname += ' safari';
125  
-
126  
-    if (this.chrome)
127 124
       classname += ' chrome';
128  
-    else if (this.iphone)
  125
+    else if (this.chrome)
  126
+      classname += ' chrome';
  127
+
  128
+    if (this.iphone)
129 129
       classname += ' iphone';
130 130
     else if (this.ipad)
131 131
       classname += ' ipad';
  132
+    else if (this.safari || this.chrome)
  133
+      classname += ' webkit';
132 134
 
133 135
     if (document.documentElement)
134 136
       document.documentElement.className += classname;
2  skins/larry/addressbook.css
... ...
@@ -1,7 +1,7 @@
1 1
 /**
2 2
  * Roundcube webmail styles for the Address Book section
3 3
  *
4  
- * Copyright (c) 2011, The Roundcube Dev Team
  4
+ * Copyright (c) 2012, The Roundcube Dev Team
5 5
  * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
6 6
  *
7 7
  * The contents are subject to the Creative Commons Attribution-ShareAlike
32  skins/larry/mail.css
... ...
@@ -1,7 +1,7 @@
1 1
 /**
2 2
  * Roundcube webmail styles for the Email section
3 3
  *
4  
- * Copyright (c) 2011, The Roundcube Dev Team
  4
+ * Copyright (c) 2012, The Roundcube Dev Team
5 5
  * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
6 6
  *
7 7
  * The contents are subject to the Creative Commons Attribution-ShareAlike
@@ -324,11 +324,11 @@ a.iconbutton.threadmode.selected {
324 324
 	padding: 2px 3px;
325 325
 }
326 326
 
327  
-.chrome #messagelist tr td.attachment,
328  
-.chrome #messagelist tr td.threads,
329  
-.chrome #messagelist tr td.status,
330  
-.chrome #messagelist tr td.flag,
331  
-.chrome #messagelist tr td.priority {
  327
+.webkit #messagelist tr td.attachment,
  328
+.webkit #messagelist tr td.threads,
  329
+.webkit #messagelist tr td.status,
  330
+.webkit #messagelist tr td.flag,
  331
+.webkit #messagelist tr td.priority {
332 332
 	width: 26px;
333 333
 }
334 334
 
@@ -336,7 +336,7 @@ a.iconbutton.threadmode.selected {
336 336
 	width: 26px;
337 337
 }
338 338
 
339  
-.chrome #messagelist tr td.threads {
  339
+.webkit #messagelist tr td.threads {
340 340
 	width: 30px;
341 341
 }
342 342
 
@@ -617,7 +617,7 @@ a.iconbutton.threadmode.selected {
617 617
 #composeheaders {
618 618
 	position: relative;
619 619
 	padding: 3px 0;
620  
-	background: #fff;
  620
+	background: #f9f9f9;
621 621
 	background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
622 622
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9));
623 623
 	background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
@@ -711,7 +711,12 @@ h3.subject {
711 711
 	position: relative;
712 712
 	color: #666;
713 713
 	text-align: center;
714  
-	background-color: #EBEBEB;
  714
+	background-color: #f9f9f9;
  715
+	background: -moz-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
  716
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#e9e9e9));
  717
+	background: -o-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
  718
+	background: -ms-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
  719
+	background: linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
715 720
 }
716 721
 
717 722
 div.more-headers {
@@ -947,6 +952,11 @@ div.message-part blockquote blockquote blockquote {
947 952
 	border-bottom: 4px solid #c7e3ef;
948 953
 }
949 954
 
  955
+#compose-contacts .scroller {
  956
+	top: 65px;
  957
+	border-top: 1px solid #fff;
  958
+}
  959
+
950 960
 #contacts-table {
951 961
 	table-layout: fixed;
952 962
 }
@@ -966,6 +976,10 @@ div.message-part blockquote blockquote blockquote {
966 976
 	text-overflow: ellipsis;
967 977
 }
968 978
 
  979
+#contacts-table tr:first-child td {
  980
+	border-top: 0;
  981
+}
  982
+
969 983
 #compose-contacts li.addressbook a {
970 984
 	background-position: 6px -766px;
971 985
 }
2  skins/larry/print.css
... ...
@@ -1,7 +1,7 @@
1 1
 /**
2 2
  * Roundcube webmail styles for message printing
3 3
  *
4  
- * Copyright (c) 2011, The Roundcube Dev Team
  4
+ * Copyright (c) 2012, The Roundcube Dev Team
5 5
  *
6 6
  * The contents are subject to the Creative Commons Attribution-ShareAlike
7 7
  * License. It is allowed to copy, distribute, transmit and to adapt the work
21  skins/larry/settings.css
... ...
@@ -1,7 +1,7 @@
1 1
 /**
2 2
  * Roundcube webmail styles for the Settings section
3 3
  *
4  
- * Copyright (c) 2011, The Roundcube Dev Team
  4
+ * Copyright (c) 2012, The Roundcube Dev Team
5 5
  * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
6 6
  *
7 7
  * The contents are subject to the Creative Commons Attribution-ShareAlike
@@ -184,13 +184,24 @@
184 184
 	bottom: 0;
185 185
 }
186 186
 
  187
+#subscription-table {
  188
+	table-layout: fixed;
  189
+}
  190
+
187 191
 #subscription-table tr.root td {
188 192
 	font-size: 5%;
189 193
 	height: 5px;
190 194
 	padding: 2px;
191 195
 }
192 196
 
  197
+#subscription-table td.name {
  198
+	width: 85%;
  199
+	overflow: hidden;
  200
+	text-overflow: ellipsis;
  201
+}
  202
+
193 203
 #subscription-table td.subscribed {
  204
+	min-width: 30px;
194 205
 	padding: 3px 12px 3px 3px;
195 206
 	text-align: right;
196 207
 }
@@ -199,8 +210,16 @@
199 210
 	width: 5em;
200 211
 }
201 212
 
  213
+.webkit #pluginlist td.version {
  214
+	width: 6em;
  215
+}
  216
+
202 217
 #pluginlist td.license,
203 218
 #pluginlist td.source {
204 219
 	width: 8em;
205 220
 }
206 221
 
  222
+.webkit #pluginlist td.license,
  223
+.webkit #pluginlist td.source {
  224
+	width: 9em;
  225
+}
37  skins/larry/styles.css
... ...
@@ -1,7 +1,7 @@
1 1
 /**
2 2
  * Roundcube webmail styles for skin "Larry"
3 3
  *
4  
- * Copyright (c) 2011, The Roundcube Dev Team
  4
+ * Copyright (c) 2012, The Roundcube Dev Team
5 5
  * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
6 6
  *
7 7
  * The contents are subject to the Creative Commons Attribution-ShareAlike
@@ -20,6 +20,11 @@ body {
20 20
 	margin: 0;
21 21
 }
22 22
 
  23
+body.noscroll {
  24
+	/* also avoids bounce effect in Chrome and Safari */
  25
+	overflow: hidden;
  26
+}
  27
+
23 28
 a {
24 29
 	color: #0069a6;
25 30
 }
@@ -238,7 +243,7 @@ input.button:active {
238 243
 .pagenav.dark a.button {
239 244
 	font-weight: bold;
240 245
 	border-color: #e6e6e6;
241  
-	background: #f7f7f7;
  246
+	background: #d8d8d8;
242 247
 	background: -moz-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
243 248
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#bababa));
244 249
 	background: -o-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
@@ -352,6 +357,7 @@ a.iconlink {
352 357
 	display: inline-block;
353 358
 	color: #888;
354 359
 	text-decoration: none;
  360
+	white-space: nowrap;
355 361
 	padding: 2px 8px 2px 20px;
356 362
 	background: url(images/buttons.png) -1000px 0 no-repeat;
357 363
 }
@@ -499,7 +505,7 @@ a.iconlink.upload {
499 505
 	height: 46px;
500 506
 	margin-bottom: 10px;
501 507
 	padding: 0 0 0 10px;
502  
-	background: #3a3a3a;
  508
+	background: #111;
503 509
 	background: -moz-linear-gradient(top, rgba(64,64,64,1) 0%, rgba(6,6,6,1) 100%);
504 510
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,1)), color-stop(100%,rgba(6,6,6,1)));
505 511
 	background: -o-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%);
@@ -736,6 +742,11 @@ a.iconlink.upload {
736 742
 	display: table-cell;
737 743
 	padding-bottom: 5px;
738 744
 	height: auto;
  745
+	min-height: 14px;
  746
+}
  747
+
  748
+.webkit .listing tbody td {
  749
+	height: 14px;
739 750
 }
740 751
 
741 752
 .listbox .listitem.selected,
@@ -922,7 +933,7 @@ table.records-table {
922 933
 	font-weight: bold;
923 934
 	background: #d6eaf3;
924 935
 	background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
925  
-	background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(14px,#d6eaf3), color-stop(100%,#d6eaf3));
  936
+	background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(8%,#d6eaf3), color-stop(100%,#d6eaf3));
926 937
 	background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
927 938
 	background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
928 939
 	background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
@@ -1485,6 +1496,10 @@ ul.toolbarmenu li a {
1485 1496
 	padding: 6px 10px 6px 10px;
1486 1497
 }
1487 1498
 
  1499
+.googie_list td span {
  1500
+	padding: 3px 10px;
  1501
+}
  1502
+
1488 1503
 .googie_list td span,
1489 1504
 ul.toolbarmenu li a.active {
1490 1505
 	color: #fff;
@@ -1676,16 +1691,18 @@ ul.toolbarmenu li span.conversation {
1676 1691
 	/* reduce the damage in FF3.0 */
1677 1692
 	display: block; 
1678 1693
 	width: 0;
  1694
+	z-index: 251;
1679 1695
 }
1680 1696
 
1681  
-._draglayercopy:before {
  1697
+.draglayercopy:before {
1682 1698
 	position: absolute;
1683  
-	bottom: -5px;
  1699
+	bottom: -6px;
1684 1700
 	left: -6px;
1685 1701
 	content: " ";
1686  
-	width: 15px;
1687  
-	height: 15px;
1688  
-	background: url(images/buttons.png) -8px -360px no-repeat;
  1702
+	width: 16px;
  1703
+	height: 16px;
  1704
+	background: url(images/buttons.png) -7px -358px no-repeat;
  1705
+	z-index: 255;
1689 1706
 }
1690 1707
 
1691 1708
 
@@ -1845,7 +1862,7 @@ ul.toolbarmenu li span.conversation {
1845 1862
 
1846 1863
 .tabsbar .tablink.selected a {
1847 1864
 	color: #004458;
1848  
-	background: #fff;
  1865
+	background: #f6f6f6;
1849 1866
 	background: -moz-linear-gradient(top, #fff 40%, #efefef 100%);
1850 1867
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef));
1851 1868
 	background: -o-linear-gradient(top, #fff 40%, #efefef 100%);
2  skins/larry/templates/addressbook.html
@@ -4,7 +4,7 @@
4 4
 <title><roundcube:object name="pagetitle" /></title>
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 </head>
7  
-<body>
  7
+<body class="noscroll">
8 8
 
9 9
 <roundcube:include file="/includes/header.html" />
10 10
 
8  skins/larry/templates/compose.html
@@ -5,7 +5,7 @@
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 <link rel="stylesheet" type="text/css" href="/googiespell.css" />
7 7
 </head>
8  
-<body>
  8
+<body class="noscroll">
9 9
 
10 10
 <roundcube:include file="/includes/header.html" />
11 11
 
@@ -16,10 +16,10 @@
16 16
 <!-- inline address book -->
17 17
 <div id="compose-contacts" class="uibox listbox">
18 18
 <h2 class="boxtitle"><roundcube:label name="contacts" /></h2>
19  
-<div class="scroller withfooter">
20 19
 	<roundcube:object name="adressbooks" id="directorylist" class="listing" />
21  
-	<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
22  
-</div>
  20
+	<div class="scroller withfooter">
  21
+		<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
  22
+	</div>
23 23
 <div class="boxfooter">
24 24
 	<roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" />
25 25
 </div>
2  skins/larry/templates/folders.html
@@ -4,7 +4,7 @@
4 4
 <title><roundcube:object name="pagetitle" /></title>
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 </head>
7  
-<body>
  7
+<body class="noscroll">
8 8
 
9 9
 <roundcube:include file="/includes/header.html" />
10 10
 
2  skins/larry/templates/identities.html
@@ -4,7 +4,7 @@
4 4
 <title><roundcube:object name="pagetitle" /></title>
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 </head>
7  
-<body>
  7
+<body class="noscroll">
8 8
 
9 9
 <roundcube:include file="/includes/header.html" />
10 10
 
14  skins/larry/templates/login.html
@@ -34,5 +34,19 @@
34 34
 
35 35
 <roundcube:include file="/includes/footer.html" />
36 36
 
  37
+<roundcube:object name="preloader" images="
  38
+  /images/ajaxloader.gif
  39
+  /images/buttons.png
  40
+  /images/addcontact.png
  41
+  /images/filetypes.png
  42
+  /images/listicons.png
  43
+  /images/messages.png
  44
+  /images/quota.png
  45
+  /images/messageicons.png
  46
+  /images/selector.png
  47
+  /images/splitter.png
  48
+  /images/watermark.jpg
  49
+" />
  50
+
37 51
 </body>
38 52
 </html>
3  skins/larry/templates/mail.html
@@ -10,9 +10,8 @@
10 10
 	#mailpreviewframe { display: block; }
11 11
 <roundcube:endif />
12 12
 </style>
13  
-
14 13
 </head>
15  
-<body>
  14
+<body class="noscroll">
16 15
 
17 16
 <roundcube:include file="/includes/header.html" />
18 17
 
2  skins/larry/templates/message.html
@@ -4,7 +4,7 @@
4 4
 <title><roundcube:object name="pagetitle" /></title>
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 </head>
7  
-<body>
  7
+<body class="noscroll">
8 8
 
9 9
 <roundcube:include file="/includes/header.html" />
10 10
 
2  skins/larry/templates/plugin.html
@@ -4,7 +4,7 @@
4 4
 <title><roundcube:object name="pagetitle" /></title>
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 </head>
7  
-<body>
  7
+<body class="noscroll">
8 8
 
9 9
 <roundcube:include file="/includes/header.html" />
10 10
 
2  skins/larry/templates/settings.html
@@ -4,7 +4,7 @@
4 4
 <title><roundcube:object name="pagetitle" /></title>
5 5
 <roundcube:include file="/includes/links.html" />
6 6
 </head>
7  
-<body>
  7
+<body class="noscroll">
8 8
 
9 9
 <roundcube:include file="/includes/header.html" />
10 10
 
16  skins/larry/ui.js
@@ -82,7 +82,7 @@ function rcube_mail_ui()
82 82
         $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
83 83
       }
84 84
       else if (rcmail.env.action == 'compose') {
85  
-        rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
  85
+        rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); });
86 86
         rcmail.addEventListener('aftersend-attachment', show_uploadform);
87 87
         rcmail.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); });
88 88
         layout_composeview();
@@ -95,7 +95,7 @@ function rcube_mail_ui()
95 95
         }).css('cursor', 'pointer');
96 96
 
97 97
         new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right',
98  
-          orientation:'v', relative:true, start:248, min:170, size:12 }).init();
  98
+          orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init();
99 99
       }
100 100
       else if (rcmail.env.action == 'list' || !rcmail.env.action) {
101 101
           mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
@@ -271,22 +271,26 @@ function rcube_mail_ui()
271 271
   function layout_composeview()
272 272
   {
273 273
     var body = $('#composebody'),
  274
+      form = $('#compose-content'),
274 275
       bottom = $('#composeview-bottom'),
275 276
       w, h;
276 277
 
277  
-    bottom.css('height', (bottom.parent().height() - bottom.position().top) + 'px');
  278
+    bottom.css('height', (form.height() - bottom.position().top) + 'px');
278 279
 
279  
-    w = body.parent().width() - 8;
  280
+    w = body.parent().width() - 6;
280 281
     h = body.parent().height() - 36;
281 282
     body.width(w).height(h);
282 283
 
283 284
     if (window.tinyMCE && tinyMCE.get('composebody')) {
284  
-      $('#composebody_tbl').width((w+12)+'px').height('').css('margin-top', '1px');
285  
-      $('#composebody_ifr').width((w+12)+'px').height((h-22)+'px');
  285
+      $('#composebody_tbl').width((w+10)+'px').height('').css('margin-top', '1px');
  286
+      $('#composebody_ifr').width((w+10)+'px').height((h-22)+'px');
286 287
     }
287 288
     else {
288 289
       $('#googie_edit_layer').height(h+'px');
289 290
     }
  291
+    
  292
+    var abooks = $('#directorylist');
  293
+    $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
290 294
   }
291 295
 
292 296
 

0 notes on commit 071c78c

Please sign in to comment.
Something went wrong with that request. Please try again.