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
Aleksander Machniak
parent
c1c2b10e49
commit
d91bfd77a7
8 changed files with 48 additions and 130 deletions
|
|
@ -69,31 +69,18 @@ body.calendarmain #mainscreen {
|
|||
#datepicker .ui-datepicker-activerange a {
|
||||
color: #185d7a;
|
||||
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 {
|
||||
color: #fff;
|
||||
border-color: #2fa0c0;
|
||||
background: rgba(73,180,210,0.6);
|
||||
text-shadow: 0px 1px 1px #666;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
#datepicker .ui-datepicker-activerange a.ui-state-active {
|
||||
color: #fff;
|
||||
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 {
|
||||
|
|
@ -253,17 +240,14 @@ pre {
|
|||
#calendars .treelist li span.handle {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
top: 7px;
|
||||
right: 6px;
|
||||
padding: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 7px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8em;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
-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);
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
#calendars .treelist div span.actions {
|
||||
|
|
@ -281,15 +265,9 @@ pre {
|
|||
#calendars .treelist div:hover span.actions {
|
||||
top: 1px;
|
||||
right: 21px;
|
||||
border: 1px solid #c6c6c6;
|
||||
border: 1px solid #ababab;
|
||||
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%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0);
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#calendars .treelist li a.subscribed {
|
||||
|
|
@ -431,13 +409,6 @@ pre {
|
|||
min-width: 1.3em;
|
||||
padding: 2px 4px;
|
||||
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;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
|
@ -545,6 +516,10 @@ body.calendarmain #searchmenulink {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#calendarform {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#user {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -627,7 +602,6 @@ a.miniColors-trigger {
|
|||
color: #333;
|
||||
font-weight: bold;
|
||||
padding: 4px 4px 3px 30px;
|
||||
text-shadow: 0px 1px 1px #fff;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
line-height: 20px;
|
||||
|
|
@ -735,11 +709,6 @@ a.miniColors-trigger {
|
|||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
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-bottom: 1px solid #ccc;
|
||||
height: 18px;
|
||||
|
|
@ -1568,12 +1537,7 @@ a.dropdown-link:after {
|
|||
border-top-color: #ddd;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 0 0 4px 4px;
|
||||
background: #ebebeb;
|
||||
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%);
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
#agendaoptions label {
|
||||
|
|
@ -1717,10 +1681,6 @@ a.dropdown-link:after {
|
|||
overflow: hidden;
|
||||
border: 0;
|
||||
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 {
|
||||
|
|
@ -1752,39 +1712,23 @@ a.dropdown-link:after {
|
|||
.calendarmain .fc-button.fc-state-default,
|
||||
.calendarmain .fc-button.fc-state-hover {
|
||||
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.fc-state-default,
|
||||
.calendarmain #calendar .fc-button.fc-state-hover {
|
||||
margin: 0 0 0 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #505050;
|
||||
text-shadow: 0px 1px 1px #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
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;
|
||||
margin: -2px 0 0 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #333;
|
||||
border: 1px solid #ababab;
|
||||
background: #f1f1f1;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.calendarmain #calendar .fc-button.fc-state-disabled {
|
||||
color: #999;
|
||||
background: #d8d8d8;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.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-down {
|
||||
color: #333;
|
||||
background: #bababa;
|
||||
background: -moz-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
|
||||
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%);
|
||||
background: #f1f1f1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.calendarmain #calendar .fc-header .fc-button {
|
||||
|
|
@ -2054,6 +1994,15 @@ div.fc-event-location {
|
|||
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 {
|
||||
background-color: #d6eaf3;
|
||||
color: #004458;
|
||||
|
|
@ -2098,15 +2047,15 @@ div.fc-event-location {
|
|||
}
|
||||
|
||||
.calendarmain .fc-view-table tr.fc-event td {
|
||||
border-color: #ddd;
|
||||
padding: 4px 7px;
|
||||
border-color: #bbd3da;
|
||||
padding: 6px 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.calendarmain .fc-view-table tr.fc-event td.fc-event-handle {
|
||||
padding: 5px 0 2px 7px;
|
||||
padding: 6px 0 2px 7px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -2129,9 +2078,6 @@ div.fc-event-location {
|
|||
font-size: 10px;
|
||||
border-radius: 8px;
|
||||
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 {
|
||||
|
|
|
|||
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 |
|
|
@ -159,16 +159,6 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
#taskselector li.selected a {
|
||||
color: #fff;
|
||||
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;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
|
@ -181,12 +171,6 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
min-width: 1.8em;
|
||||
padding: 2px 4px;
|
||||
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;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
|
|
@ -244,19 +228,19 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
position: relative;
|
||||
top: -1px;
|
||||
margin-left: 5px;
|
||||
padding: 0.15em 0.5em;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
color: #59838e;
|
||||
background: #c7e3ef;
|
||||
box-shadow: inset 0 1px 1px 0 #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: 1px solid #b0ccd7;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tagcloud li.selected .count {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tag-draghelper .tag .count,
|
||||
.tagcloud li.inactive .count {
|
||||
display: none;
|
||||
|
|
@ -334,15 +318,9 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
#tasklistsbox .treelist div:hover span.actions {
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
border: 1px solid #c6c6c6;
|
||||
border: 1px solid #ababab;
|
||||
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%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0);
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#tasklistsbox .treelist div a.remove,
|
||||
|
|
@ -499,7 +477,7 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
|
||||
#quickaddbox .button {
|
||||
margin-left: 5px;
|
||||
padding: 3px 10px;
|
||||
padding: 4px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -509,7 +487,7 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -534,12 +512,7 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
|
||||
#tasksview .buttonbar {
|
||||
color: #777;
|
||||
background: #eee;
|
||||
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%);
|
||||
background: #eaeaea;
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: relative;
|
||||
line-height: 13px;
|
||||
|
|
@ -578,7 +551,6 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 1.5em;
|
||||
text-shadow: 0px 1px 1px #fff;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
|
@ -627,9 +599,9 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5);
|
||||
-moz-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5);
|
||||
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.4);
|
||||
box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.4);
|
||||
padding-right: 26em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue