Update calendar and tasklist styles/sprites to new Larry "flat" design

Summary: With Roundcube version 1.3, the default Larry theme receives a small face-list. This change adapts the styles of the calendar and tasklist plugins to tat.

Reviewers: machniak

Differential Revision: https://git.kolab.org/D423
This commit is contained in:
Thomas Bruederli 2017-07-12 15:00:24 +02:00 committed by Aleksander Machniak
parent c1c2b10e49
commit d91bfd77a7
8 changed files with 48 additions and 130 deletions

View file

@ -69,31 +69,18 @@ body.calendarmain #mainscreen {
#datepicker .ui-datepicker-activerange a { #datepicker .ui-datepicker-activerange a {
color: #185d7a; color: #185d7a;
background: #d9f1fb; background: #d9f1fb;
background: -moz-linear-gradient(top, #d9f1fb 0%, #c5e3ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9f1fb), color-stop(100%,#c5e3ee));
background: -o-linear-gradient(top, #d9f1fb 0%, #c5e3ee 100%);
background: -ms-linear-gradient(top, #d9f1fb 0%, #c5e3ee 100%);
background: linear-gradient(top, #d9f1fb 0%, #c5e3ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9f1fb', endColorstr='#c5e3ee', GradientType=0);
} }
#datepicker .ui-datepicker-days-cell-over a.ui-state-default { #datepicker .ui-datepicker-days-cell-over a.ui-state-default {
color: #fff; color: #fff;
border-color: #2fa0c0; border-color: #2fa0c0;
background: rgba(73,180,210,0.6); background: rgba(73,180,210,0.6);
text-shadow: 0px 1px 1px #666;
filter: none; filter: none;
} }
#datepicker .ui-datepicker-activerange a.ui-state-active { #datepicker .ui-datepicker-activerange a.ui-state-active {
color: #fff; color: #fff;
background: #00acd4; background: #00acd4;
background: -moz-linear-gradient(top, #00acd4 0%, #008fc7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00acd4), color-stop(100%,#008fc7));
background: -o-linear-gradient(top, #00acd4 0%, #008fc7 100%);
background: -ms-linear-gradient(top, #00acd4 0%, #008fc7 100%);
background: linear-gradient(top, #00acd4 0%, #008fc7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00acd4', endColorstr='#008fc7', GradientType=0);
} }
#datepicker td.ui-datepicker-week-col { #datepicker td.ui-datepicker-week-col {
@ -253,17 +240,14 @@ pre {
#calendars .treelist li span.handle { #calendars .treelist li span.handle {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 8px; top: 7px;
right: 6px; right: 6px;
padding: 0; padding: 0;
width: 10px; width: 11px;
height: 10px; height: 11px;
border-radius: 7px; border-radius: 8px;
font-size: 0.8em; font-size: 0.8em;
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
} }
#calendars .treelist div span.actions { #calendars .treelist div span.actions {
@ -281,15 +265,9 @@ pre {
#calendars .treelist div:hover span.actions { #calendars .treelist div:hover span.actions {
top: 1px; top: 1px;
right: 21px; right: 21px;
border: 1px solid #c6c6c6; border: 1px solid #ababab;
border-radius: 4px; border-radius: 4px;
background: #f7f7f7; background: #f1f1f1;
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%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0);
} }
#calendars .treelist li a.subscribed { #calendars .treelist li a.subscribed {
@ -431,13 +409,6 @@ pre {
min-width: 1.3em; min-width: 1.3em;
padding: 2px 4px; padding: 2px 4px;
background: #005d76; background: #005d76;
background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
background: linear-gradient(to bottom, #005d76 0%, #004558 100%);
-webkit-box-shadow: inset 0 1px 1px 0 #002635;
box-shadow: inset 0 1px 1px 0 #002635;
border-radius: 10px; border-radius: 10px;
color: #fff; color: #fff;
text-align: center; text-align: center;
@ -545,6 +516,10 @@ body.calendarmain #searchmenulink {
display: none; display: none;
} }
#calendarform {
overflow: visible;
}
#user { #user {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -627,7 +602,6 @@ a.miniColors-trigger {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
padding: 4px 4px 3px 30px; padding: 4px 4px 3px 30px;
text-shadow: 0px 1px 1px #fff;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
line-height: 20px; line-height: 20px;
@ -735,11 +709,6 @@ a.miniColors-trigger {
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
background: #d6eaf3; background: #d6eaf3;
background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(8%,#d6eaf3), color-stop(100%,#d6eaf3));
background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
border: 0; border: 0;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 18px; height: 18px;
@ -1568,12 +1537,7 @@ a.dropdown-link:after {
border-top-color: #ddd; border-top-color: #ddd;
border-bottom-color: #bbb; border-bottom-color: #bbb;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
background: #ebebeb; background: #eaeaea;
background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6));
background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
} }
#agendaoptions label { #agendaoptions label {
@ -1717,10 +1681,6 @@ a.dropdown-link:after {
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 2px #999;
-o-box-shadow: 0 0 2px #999;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
} }
.calendarmain .fc-content { .calendarmain .fc-content {
@ -1752,39 +1712,23 @@ a.dropdown-link:after {
.calendarmain .fc-button.fc-state-default, .calendarmain .fc-button.fc-state-default,
.calendarmain .fc-button.fc-state-hover { .calendarmain .fc-button.fc-state-hover {
background-color: #f5f5f5; background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-position: 0 0;
} }
.calendarmain #calendar .fc-button, .calendarmain #calendar .fc-button,
.calendarmain #calendar .fc-button.fc-state-default, .calendarmain #calendar .fc-button.fc-state-default,
.calendarmain #calendar .fc-button.fc-state-hover { .calendarmain #calendar .fc-button.fc-state-hover {
margin: 0 0 0 0; margin: -2px 0 0 0;
height: 20px; height: 24px;
line-height: 20px; line-height: 24px;
color: #505050; color: #333;
text-shadow: 0px 1px 1px #fff; border: 1px solid #ababab;
border: 1px solid #e6e6e6; background: #f1f1f1;
background: #d8d8d8;
background: -moz-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#bababa));
background: -o-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
background: -ms-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
background: linear-gradient(top, #d8d8d8 0%, #bababa 100%);
box-shadow: 0 1px 1px 0 #999;
-o-box-shadow: 0 1px 1px 0 #999;
-webkit-box-shadow: 0 1px 1px 0 #999;
-moz-box-shadow: 0 1px 1px 0 #999;
text-decoration: none; text-decoration: none;
text-shadow: none;
} }
.calendarmain #calendar .fc-button.fc-state-disabled { .calendarmain #calendar .fc-button.fc-state-disabled {
color: #999; color: #666;
background: #d8d8d8;
} }
.calendarmain .fc-button.fc-state-active, .calendarmain .fc-button.fc-state-active,
@ -1792,12 +1736,8 @@ a.dropdown-link:after {
.calendarmain #calendar .fc-button.fc-state-active, .calendarmain #calendar .fc-button.fc-state-active,
.calendarmain #calendar .fc-button.fc-state-down { .calendarmain #calendar .fc-button.fc-state-down {
color: #333; color: #333;
background: #bababa; background: #f1f1f1;
background: -moz-linear-gradient(top, #bababa 0%, #d8d8d8 100%); box-shadow: none;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#d8d8d8));
background: -o-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: -ms-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
background: linear-gradient(top, #bababa 0%, #d8d8d8 100%);
} }
.calendarmain #calendar .fc-header .fc-button { .calendarmain #calendar .fc-header .fc-button {
@ -2054,6 +1994,15 @@ div.fc-event-location {
background-color: rgba(233,198,14, 0.12); background-color: rgba(233,198,14, 0.12);
} }
.fc-widget-header,
.fc-widget-content {
border-color: #bbd3da !important;
}
.fc-widget-header .fc-agenda-divider-inner {
background: #cad2d9 !important;
}
.fc-widget-header { .fc-widget-header {
background-color: #d6eaf3; background-color: #d6eaf3;
color: #004458; color: #004458;
@ -2098,15 +2047,15 @@ div.fc-event-location {
} }
.calendarmain .fc-view-table tr.fc-event td { .calendarmain .fc-view-table tr.fc-event td {
border-color: #ddd; border-color: #bbd3da;
padding: 4px 7px; padding: 6px 8px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.calendarmain .fc-view-table tr.fc-event td.fc-event-handle { .calendarmain .fc-view-table tr.fc-event td.fc-event-handle {
padding: 5px 0 2px 7px; padding: 6px 0 2px 7px;
width: 12px; width: 12px;
} }
@ -2129,9 +2078,6 @@ div.fc-event-location {
font-size: 10px; font-size: 10px;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0 1px 1px rgba(0, 0, 0, 0.3);
} }
.calendarmain .fc-view-table col.fc-event-location { .calendarmain .fc-view-table col.fc-event-location {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 337 B

After

Width:  |  Height:  |  Size: 204 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 337 B

After

Width:  |  Height:  |  Size: 204 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -159,16 +159,6 @@ ul.toolbarmenu li span.icon.taskadd,
#taskselector li.selected a { #taskselector li.selected a {
color: #fff; color: #fff;
background: #005d76; background: #005d76;
background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
background: linear-gradient(top, #005d76 0%, #004558 100%);
box-shadow: inset 0 1px 1px 0 #003645;
-o-box-shadow: inset 0 1px 1px 0 #003645;
-webkit-box-shadow: inset 0 1px 1px 0 #003645;
-moz-box-shadow: inset 0 1px 1px 0 #003645;
border-color: #003645;
border-radius: 10px; border-radius: 10px;
text-shadow: none; text-shadow: none;
} }
@ -181,12 +171,6 @@ ul.toolbarmenu li span.icon.taskadd,
min-width: 1.8em; min-width: 1.8em;
padding: 2px 4px; padding: 2px 4px;
background: #004558; background: #004558;
background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
background: linear-gradient(top, #005d76 0%, #004558 100%);
box-shadow: 0 1px 2px 0 rgba(24,24,24,0.6);
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
@ -244,19 +228,19 @@ ul.toolbarmenu li span.icon.taskadd,
position: relative; position: relative;
top: -1px; top: -1px;
margin-left: 5px; margin-left: 5px;
padding: 0.15em 0.5em; padding: 0.2em 0.5em;
font-size: 80%; font-size: 80%;
font-weight: bold; font-weight: bold;
color: #59838e; color: #59838e;
background: #c7e3ef; background: #c7e3ef;
box-shadow: inset 0 1px 1px 0 #b0ccd7; border: 1px solid #b0ccd7;
-o-box-shadow: inset 0 1px 1px 0 #b0ccd7;
-webkit-box-shadow: inset 0 1px 1px 0 #b0ccd7;
-moz-box-shadow: inset 0 1px 1px 0 #b0ccd7;
border-color: #b0ccd7;
border-radius: 8px; border-radius: 8px;
} }
.tagcloud li.selected .count {
border: none;
}
.tag-draghelper .tag .count, .tag-draghelper .tag .count,
.tagcloud li.inactive .count { .tagcloud li.inactive .count {
display: none; display: none;
@ -334,15 +318,9 @@ ul.toolbarmenu li span.icon.taskadd,
#tasklistsbox .treelist div:hover span.actions { #tasklistsbox .treelist div:hover span.actions {
top: 1px; top: 1px;
right: 1px; right: 1px;
border: 1px solid #c6c6c6; border: 1px solid #ababab;
border-radius: 4px; border-radius: 4px;
background: #f7f7f7; background: #f1f1f1;
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%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0);
} }
#tasklistsbox .treelist div a.remove, #tasklistsbox .treelist div a.remove,
@ -499,7 +477,7 @@ ul.toolbarmenu li span.icon.taskadd,
#quickaddbox .button { #quickaddbox .button {
margin-left: 5px; margin-left: 5px;
padding: 3px 10px; padding: 4px 10px;
font-weight: bold; font-weight: bold;
} }
@ -509,7 +487,7 @@ ul.toolbarmenu li span.icon.taskadd,
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.25);
overflow: visible; overflow: visible;
} }
@ -534,12 +512,7 @@ ul.toolbarmenu li span.icon.taskadd,
#tasksview .buttonbar { #tasksview .buttonbar {
color: #777; color: #777;
background: #eee; background: #eaeaea;
background: -moz-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dfdfdf));
background: -o-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: linear-gradient(top, #eee 0%, #dfdfdf 100%);
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
position: relative; position: relative;
line-height: 13px; line-height: 13px;
@ -578,7 +551,6 @@ ul.toolbarmenu li span.icon.taskadd,
font-size: 14px; font-size: 14px;
color: #666; color: #666;
margin: 1.5em; margin: 1.5em;
text-shadow: 0px 1px 1px #fff;
text-align:center; text-align:center;
} }
@ -627,9 +599,9 @@ ul.toolbarmenu li span.icon.taskadd,
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 5px; border-radius: 5px;
background: #fff; background: #fff;
-webkit-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5); -webkit-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5); -moz-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.4);
box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5); box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.4);
padding-right: 26em; padding-right: 26em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;