Calendar: Make events nicer for screen readers

This commit is contained in:
nathangray 2021-02-22 10:02:27 -07:00
parent 8b86b2cf05
commit 2455b7176d
4 changed files with 86 additions and 72 deletions

View File

@ -237,6 +237,7 @@ var et2_calendar_event = /** @class */ (function (_super) {
// Let timegrid always get the drag
.droppable('option', 'greedy', false);
}
var tooltip = jQuery(this._tooltip()).text();
// DOM nodes
this.div
// Set full day flag
@ -250,6 +251,9 @@ var et2_calendar_event = /** @class */ (function (_super) {
.attr('data-recur_type', event.recur_type)
.attr('data-resize', event.whole_day ? 'WD' : '' + (event.recur_type ? 'S' : ''))
.attr('data-priority', event.priority)
// Accessibility
.attr("tabindex", 0)
.attr("aria-label", tooltip)
// Remove any category classes
.removeClass(function (index, css) {
return (css.match(/(^|\s)cat_\S+/g) || []).join(' ');
@ -437,24 +441,24 @@ var et2_calendar_event = /** @class */ (function (_super) {
}
for (var type_name in this.options.value.participant_types) {
if (type_name) {
participants += '</p><p><span class="calendar_calEventLabel">' + type_name + '</span>:<br />';
participants += '</p><p><span class="calendar_calEventLabel">' + type_name + ':</span><br />';
participants += this.options.value.participant_types[type_name].join("<br />");
}
}
return '<div class="calendar_calEventTooltip ' + this._status_class() + ' ' + this.options.class +
'" style="border-color: ' + border + '; background-color: ' + bg_color + ';">' +
'<div class="calendar_calEventHeaderSmall">' +
'<font style="color:' + header_color + '">' + timespan + '</font>' +
'<span style="color:' + header_color + '">' + timespan + '</span>' +
this.icons[0].outerHTML +
'</div>' +
'<div class="calendar_calEventBody">' +
'<p style="margin: 0px;">' +
'<span class="calendar_calEventTitle">' + egw.htmlspecialchars(this.options.value.title) + '</span><br>' +
'<h1 class="calendar_calEventTitle">' + egw.htmlspecialchars(this.options.value.title) + '</h1><br>' +
egw.htmlspecialchars(this.options.value.description) + '</p>' +
'<p style="margin: 2px 0px;">' + times + '</p>' +
location +
(cat_label ? '<p><span class="calendar_calEventLabel">' + this.egw().lang('Category') + '</span>:' + cat_label + '</p>' : '') +
'<p><span class="calendar_calEventLabel">' + this.egw().lang('Participants') + '</span>:<br />' +
(cat_label ? '<p><h2 class="calendar_calEventLabel">' + this.egw().lang('Category') + ':</h2>' + cat_label + '</p>' : '') +
'<p><h2 class="calendar_calEventLabel">' + this.egw().lang('Participants') + ':</h2><br />' +
participants + '</p>' + this._participant_summary(this.options.value.participants) +
'</div>' +
'</div>';

View File

@ -302,6 +302,7 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
// Let timegrid always get the drag
.droppable('option','greedy',false);
}
let tooltip = jQuery(this._tooltip()).text();
// DOM nodes
this.div
// Set full day flag
@ -316,6 +317,9 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
.attr('data-recur_type', event.recur_type)
.attr('data-resize', event.whole_day ? 'WD' : '' + (event.recur_type ? 'S':''))
.attr('data-priority', event.priority)
// Accessibility
.attr("tabindex",0)
.attr("aria-label", tooltip)
// Remove any category classes
.removeClass(function(index, css) {
return (css.match (/(^|\s)cat_\S+/g) || []).join(' ');
@ -557,7 +561,7 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
{
if(type_name)
{
participants += '</p><p><span class="calendar_calEventLabel">'+type_name+'</span>:<br />';
participants += '</p><p><span class="calendar_calEventLabel">'+type_name+':</span><br />';
participants += this.options.value.participant_types[type_name].join("<br />");
}
}
@ -565,17 +569,17 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
return '<div class="calendar_calEventTooltip ' + this._status_class() +' '+ this.options.class +
'" style="border-color: '+border+'; background-color: '+bg_color+';">'+
'<div class="calendar_calEventHeaderSmall">'+
'<font style="color:'+header_color+'">'+timespan+'</font>'+
'<span style="color:'+header_color+'">'+timespan+'</span>'+
this.icons[0].outerHTML+
'</div>'+
'<div class="calendar_calEventBody">'+
'<p style="margin: 0px;">'+
'<span class="calendar_calEventTitle">'+egw.htmlspecialchars(this.options.value.title)+'</span><br>'+
'<h1 class="calendar_calEventTitle">'+egw.htmlspecialchars(this.options.value.title)+'</h1><br>'+
egw.htmlspecialchars(this.options.value.description)+'</p>'+
'<p style="margin: 2px 0px;">'+times+'</p>'+
location +
(cat_label ? '<p><span class="calendar_calEventLabel">'+this.egw().lang('Category') + '</span>:' + cat_label +'</p>' : '')+
'<p><span class="calendar_calEventLabel">'+this.egw().lang('Participants')+'</span>:<br />'+
(cat_label ? '<p><h2 class="calendar_calEventLabel">'+this.egw().lang('Category') + ':</h2>' + cat_label +'</p>' : '')+
'<p><h2 class="calendar_calEventLabel">'+this.egw().lang('Participants')+':</h2><br />'+
participants + '</p>'+ this._participant_summary(this.options.value.participants) +
'</div>'+
'</div>';

View File

@ -917,10 +917,13 @@ Hide subsequent headers in week view with non-consolidated owners
.calendar_calEventLabel{
font-weight: bold;
font-size: 90%;
display:inline;
}
.calendar_calEventTitle{
font-weight: bold;
font-size:100%;
display:inline;
}
/* Event is too small for full display */

View File

@ -383,13 +383,13 @@ Hide subsequent headers in week view with non-consolidated owners
top: 2em;
}
#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader .calendar_calDayColHeader_spacer {
height: calc(1.5em + 32px);
height: calc(33.5em);
}
#calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label {
white-space: nowrap;
display: block;
position: static;
width: calc(100% - 58px);
width: calc(42%);
margin-left: 58px;
color: white;
background-color: #2D6393;
@ -899,9 +899,12 @@ Hide subsequent headers in week view with non-consolidated owners
.calendar_calEventLabel {
font-weight: bold;
font-size: 90%;
display: inline;
}
.calendar_calEventTitle {
font-weight: bold;
font-size: 100%;
display: inline;
}
/* Event is too small for full display */
.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan {
@ -1632,13 +1635,13 @@ img.sideboxstar:active {
.calendar_calEventBodySmall img[src$="svg"],
.calendar_calDayColHeader img[src$="svg"] {
background-color: #0c5da5;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -ms-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0C5DA5), to(#0C5DA5));
background-image: -webkit-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -o-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5));
background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -o-linear-gradient(top, #0c5da5, #0c5da5);
background-image: linear-gradient(top, #0c5da5, #0c5da5);
background-repeat: repeat-x;
}
/* calender view*/
@ -1662,26 +1665,26 @@ div.calendar {
/* They are the navigation buttons */
padding: 2px;
/* Make the buttons seem like they're pressing */
background-color: #FFDD73;
background-color: #ffdd73;
}
.calendar .nav {
/*background: url(../images/menuarrow.png) no-repeat 100% 100%;*/
background-image: none;
background-color: #FFDD73;
background-color: #ffdd73;
}
.calendar thead .title {
/* This holds the current "month, year" */
font-weight: bold;
/* Pressing it will take you to the current date */
/*text-align: center;*/
background-color: #679FD2;
background-color: #679fd2;
}
.calendar thead .title:hover {
background-color: #E6E6E6 !important;
background-color: #e6e6e6 !important;
}
.calendar thead .headrow {
/* Row <TR> containing navigation buttons */
background-color: #FFDD73;
background-color: #ffdd73;
color: #fff;
}
.calendar thead .daynames {
@ -1711,7 +1714,7 @@ div.calendar {
}
.calendar thead .active {
/* Active (pressed) buttons in header */
background_color: #408DD2;
background_color: #408dd2;
/*padding: 2px 0px 0px 2px;*/
}
.calendar tbody tr,
@ -1756,7 +1759,7 @@ div.calendar {
/*border: 0px solid @gray_50;*/
/*padding: 1px 3px 1px 1px;*/
/*padding: 0px;*/
background-color: #FFDD73;
background-color: #ffdd73;
color: #000;
-webkit-box-shadow: inset 1px 2px 1px #000000;
-moz-box-shadow: inset 1px 2px 1px #000000;
@ -1938,7 +1941,7 @@ div.calendar {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
#calendar-edit #calendar-edit_calendar-edit-details #calendar-edit_details_alarms {
background-color: #CDCDCD;
background-color: #cdcdcd;
display: block !important;
}
#calendar-edit #calendar-edit_calendar-edit-description #calendar-edit_details_category {
@ -1956,7 +1959,7 @@ div.calendar {
}
#calendar-edit #calendar-edit_calendar-edit-description #calendar-edit_category {
border: 1px solid;
border-color: #B4B4B4;
border-color: #b4b4b4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
@ -2063,10 +2066,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
*/
.calendar_calToday,
.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday.et2_link.et2_clickable {
background-color: #FFDD73;
background-color: #ffdd73;
}
.calendar_calWeek {
background-color: #FFFFFF;
background-color: #ffffff;
width: auto;
margin: 0 auto;
text-align: center;
@ -2074,7 +2077,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
}
.calendar_calMonth {
/*.background_table_cal_head;*/
background-color: #FFFFFF;
background-color: #ffffff;
width: auto;
margin: 0 auto;
text-align: center;
@ -2182,12 +2185,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
* border-color: depending on category
* background: depending on category (shade)
*/
background-color: #679FD2;
background-color: #679fd2;
border-top: 1px solid;
}
.calendar_calEvent:not([class*=" cat_"]) {
/* Defaults for no category, so we don't override it */
background-color: #679FD2;
background-color: #679fd2;
}
/**
* All participants accepted the invitation
@ -2203,7 +2206,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
overflow: auto;
}
.calendar_calDayColHeader .calendar_calAddEvent:hover {
background-color: #FFDD73;
background-color: #ffdd73;
cursor: pointer;
color: #ffffff;
}
@ -2228,7 +2231,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
position: absolute;
right: 0px;
top: 0px;
background-color: #E6E6E6;
background-color: #e6e6e6;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
@ -2250,13 +2253,13 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
}
.calendar_calDayTodos .calendar_calDayTodosHeader a img[src$="svg"] {
background-color: #0c5da5;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -ms-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0C5DA5), to(#0C5DA5));
background-image: -webkit-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -o-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5));
background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -o-linear-gradient(top, #0c5da5, #0c5da5);
background-image: linear-gradient(top, #0c5da5, #0c5da5);
background-repeat: repeat-x;
}
.calendar_calDayTodos .calendar_calDayTodosHeader a img {
@ -2277,7 +2280,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
background-color: #E6E6E6;
background-color: #e6e6e6;
width: 16px;
height: 16px;
}
@ -2288,7 +2291,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
background-color: inherit;
}
.calendar_calDayTodos .calendar_calDayTodosTable table tr:nth-child(even) {
background: #FFFFFF;
background: #ffffff;
}
.calendar_calDayTodos .calendar_calDayTodosTable table tr:nth_child(odd) {
background: #f2f2f2;
@ -2298,13 +2301,13 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
}
.calendar_calDayTodos .calendar_calDayTodosTable table td img[src$="svg"] {
background-color: #0c5da5;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -ms-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0C5DA5), to(#0C5DA5));
background-image: -webkit-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: -o-linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: linear-gradient(top, #0C5DA5, #0C5DA5);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5));
background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -o-linear-gradient(top, #0c5da5, #0c5da5);
background-image: linear-gradient(top, #0c5da5, #0c5da5);
background-repeat: repeat-x;
}
.calendar_calDayTodos .calendar_calDayTodosTable table td img {
@ -2473,7 +2476,7 @@ button#series {
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
background-color: #E6E6E6;
background-color: #e6e6e6;
padding-left: 30px;
background-position: 6px center;
background-repeat: no-repeat;
@ -2483,13 +2486,13 @@ button#series {
}
button#series img[url*="svg"] {
background-color: #b4b4b4;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: -ms-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4B4B4), to(#B4B4B4));
background-image: -webkit-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: -o-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -ms-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b4b4b4), to(#b4b4b4));
background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -o-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: linear-gradient(top, #b4b4b4, #b4b4b4);
background-repeat: repeat-x;
fill: red;
}
@ -2526,7 +2529,7 @@ button#exception {
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
background-color: #E6E6E6;
background-color: #e6e6e6;
padding-left: 30px;
background-position: 6px center;
background-repeat: no-repeat;
@ -2536,13 +2539,13 @@ button#exception {
}
button#exception img[url*="svg"] {
background-color: #b4b4b4;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: -ms-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4B4B4), to(#B4B4B4));
background-image: -webkit-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: -o-linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: linear-gradient(top, #B4B4B4, #B4B4B4);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -ms-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b4b4b4), to(#b4b4b4));
background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: -o-linear-gradient(top, #b4b4b4, #b4b4b4);
background-image: linear-gradient(top, #b4b4b4, #b4b4b4);
background-repeat: repeat-x;
fill: red;
}
@ -2606,22 +2609,22 @@ div#calendar-container div.calendar table {
font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
}
div#calendar-container div.calendar table thead .button {
background-color: #FFDD73;
background-color: #ffdd73;
}
div#calendar-container div.calendar table thead .title {
border: none;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #FFDD73;
background-color: #ffdd73;
}
div#calendar-container div.calendar table thead .headrow {
color: #1E1E1E;
color: #1e1e1e;
}
div#calendar-container div.calendar table thead .headrow td {
background-color: #ffc200;
}
div#calendar-container div.calendar table thead .daynames {
background-color: #679FD2;
background-color: #679fd2;
}
div#calendar-container div.calendar table tbody tr.daysrow:hover {
background-color: #ffc200;
@ -2650,7 +2653,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
box-shadow: none;
}
#calendar-sidebox_date .ui-datepicker-today {
background-color: #FFDD73;
background-color: #ffdd73;
}
#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover {
background-color: rgba(153, 204, 255, 0.4);