change css classes:

search field sidebar
mini calendar - color - sidebar
header: view week, day - arrow left and right , arranged
This commit is contained in:
Stefan Reinhardt 2014-03-05 10:53:28 +00:00
parent bb3eb717c1
commit 0d817332ff
2 changed files with 70 additions and 34 deletions

View File

@ -727,11 +727,12 @@ div.calendar {
/* They are the navigation buttons */
padding: 2px;
/* Make the buttons seem like they're pressing */
background-color: #ffdd73;
}
.calendar .nav {
/*background: url(../images/menuarrow.png) no-repeat 100% 100%;*/
background-image: none;
background-color: #ffc200;
background-color: #ffdd73;
}
.calendar thead .title {
/* This holds the current "month, year" */
@ -747,7 +748,7 @@ div.calendar {
}
.calendar thead .headrow {
/* Row <TR> containing navigation buttons */
background-color: #ffc200;
background-color: #ffdd73;
color: #fff;
}
.calendar thead .daynames {
@ -941,7 +942,7 @@ div.calendar {
}
/*###########################################
# #
# dialog-header #
# dialogHeader #
#############################################
# #
# #
@ -1216,7 +1217,7 @@ div#calendar-edit #calendar-edit_calendar-edit-history tbody {
display: table-row-group;
width: 100%;
}
div#calendar-edit tr.dialog-footer-toolbar label.et2_label {
div#calendar-edit tr.dialogFooterToolbar label.et2_label {
top: 0px !important;
}
div#calendar-edit #calendar-edit_action {
@ -1274,29 +1275,30 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
/* marks a day in the colum-header as today
*/
.calendar_calToday {
background-color: #ffc200;
background-color: #ffdd73;
}
.calendar_calWeek {
background-color: #ffc200;
background-color: #ffffff;
width: auto;
margin: 0 auto;
text-align: center;
border: 1px solid silver;
border: none;
}
.calendar_calMonth {
background-color: #ffc200;
/*.background_table_cal_head;*/
background-color: #ffffff;
width: auto;
margin: 0 auto;
text-align: center;
border: 1px solid silver;
border: none;
}
/* marks a day in the colum-header as holiday
*/
.calendar_calHoliday {
background-color: #9b6ad6;
background-color: #ffdd73;
}
.calendar_calHoliday a {
color: #ffffff;
color: #1e1e1e !important;
font-size: 0.9em;
}
/* marks a day in the column-header additionaly as birthday of some contact,
@ -1403,25 +1405,34 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
line-height: 12px;
z-index: 30;
}
.calendar_calGridHeader {
border: none;
}
.calendar_calDayColHeader img {
vertical-align: middle;
}
.calendar_calWeekNavHeader,
.calendar_calMonthNavHeader {
top: 0px;
top: 3px;
left: 0px;
width: 100%;
width: auto;
right: 0px;
/* does not work in IE, but looks better in other browsers then width:100% */
text-align: center;
font-size: 100%;
white-space: nowrap;
border-bottom: 1px solid silver;
border-right: 1px solid silver;
height: 16px;
line-height: 12px;
border-bottom: 0px solid silver;
border-right: 0px solid silver;
height: 24px;
line-height: 21px;
/*height: 24px;*/
z-index: 30;
}
.calendar_calWeekNavHeader a img,
.calendar_calMonthNavHeader a img {
position: relative;
top: 3px;
}
.calendar_calWeekNavHeader,
.calendar_calMonthNavHeader img {
vertical-align: middle;
@ -2146,7 +2157,8 @@ select#calendar_view {
}
/*searchfield*/
input#calendar_keywords {
margin: 5px 0;
margin: 10px 0 10px 2px;
font-size: 1.3em;
}
div#calendar-container {
margin-left: 0px;
@ -2173,6 +2185,9 @@ div#calendar-container div.calendar table thead .title {
-webkit-box-shadow: none;
background-color: #ffc200;
}
div#calendar-container div.calendar table thead .headrow {
color: #1e1e1e;
}
div#calendar-container div.calendar table thead .daynames {
background-color: #679fd2;
}

View File

@ -122,6 +122,7 @@ div.calendar { position: relative; }
.button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /* They are the navigation buttons */
padding: 2px; /* Make the buttons seem like they're pressing */
.background_table_cal_head;
}
.nav {
/*background: url(../images/menuarrow.png) no-repeat 100% 100%;*/
@ -391,7 +392,7 @@ div.calendar { position: relative; }
/*###########################################
# #
# dialog-header #
# dialogHeader #
#############################################
# #
# #
@ -700,7 +701,7 @@ div#calendar-edit{
/*###########################################*/
/*// Toolbar*/
tr.dialog-footer-toolbar{
tr.dialogFooterToolbar{
label.et2_label {top: 0px !important;}
@ -777,26 +778,27 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
}
.calendar_calWeek{
// background: #ffffcc;
.background_table_cal_head;
background-color : @gray_0;
width:auto;
margin:0 auto;
text-align:center;
border: 1px solid silver;
border: none;
}
.calendar_calMonth{
// background: #ffffcc;
.background_table_cal_head;
/*.background_table_cal_head;*/
background-color : @gray_0;
width:auto;
margin:0 auto;
text-align:center;
border: 1px solid silver;
border: none;
}
/* marks a day in the colum-header as holiday
*/
.calendar_calHoliday{
background-color: @egw_color_3_e;
background-color: @egw_color_1_e;
a {
.color_0_gray;
color: @gray_90 !important;
font-size: 0.9em;
}
}
@ -903,23 +905,38 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
line-height: 12px;
z-index: 30;
}
.calendar_calGridHeader{ border: none; }
.calendar_calDayColHeader img {
vertical-align: middle;
}
.calendar_calWeekNavHeader,.calendar_calMonthNavHeader{
top: 0px;
top: 3px;
left: 0px;
width: 100%;
width: auto;
right: 0px; /* does not work in IE, but looks better in other browsers then width:100% */
text-align: center;
font-size: 100%;
white-space: nowrap;
border-bottom: 1px solid silver;
border-right: 1px solid silver;
.dimension_height_s;
line-height: 12px;
border-bottom: 0px solid silver; // cleaned
border-right: 0px solid silver; // cleaned
.dimension_height_m;
line-height: 21px;
/*height: 24px;*/
z-index: 30;
a {
img {
position: relative;
top: 3px;
}
}
}
.calendar_calWeekNavHeader,.calendar_calMonthNavHeader img{
vertical-align: middle;
}
@ -1474,7 +1491,11 @@ button[id*="edit_button[add_alarm]"]{
select#calendar_view{margin-top: 8px;}
/*searchfield*/
input#calendar_keywords{margin: 5px 0;}
input#calendar_keywords{
margin: 10px 0 10px 2px;
font-size: 1.3em;
;
}
div#calendar-container {
margin-left: 0px;
@ -1504,7 +1525,7 @@ div#calendar-container {
}
// << today >>
.headrow {}
.headrow { color: @gray_90;}
// daynames
.daynames {