From 0d817332fff8f564659ccce22ee3bac4c8e70d1e Mon Sep 17 00:00:00 2001 From: Stefan Reinhardt Date: Wed, 5 Mar 2014 10:53:28 +0000 Subject: [PATCH] change css classes: search field sidebar mini calendar - color - sidebar header: view week, day - arrow left and right , arranged --- calendar/templates/pixelegg/app.css | 51 ++++++++++++++++---------- calendar/templates/pixelegg/app.less | 53 +++++++++++++++++++--------- 2 files changed, 70 insertions(+), 34 deletions(-) diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 9b2ff27d6c..150505d6f7 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -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 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; } diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index ee450b355c..3f77ebe5b2 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -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 {