Style changes

- Increase day header  sizes
- Remove event borders, event status shown in category color bar
- Remove zebra striping from timegrid, switched to hour & half hour lines

calendar/js/et2_widget_event.js

@@ -417,7 +417,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 			cat.destroy();
 		}
 		
-		return '<div class="calendar_calEventTooltip ' + this._status_class() + '" style="border-color: '+border+'; background: '+bg_color+';">'+
+		return '<div class="calendar_calEventTooltip ' + this._status_class() + '" style="border-color: '+border+'; background-color: '+bg_color+';">'+
 			'<div class="calendar_calEventHeaderSmall">'+
 				'<font style="color:'+header_color+'">'+timespan+'</font>'+
 				this.icons[0].outerHTML+

calendar/templates/default/app.css

@@ -162,7 +162,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
  */
 .calendar_calBirthday,.calendar_calBirthday a{
-	color: black;
+	color: #626161;
 	font-weight: bold;
 	font-style: italic;
 }
@@ -214,20 +214,26 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  *  top:
  */
 }
-.calendar_calTimeRow:nth-child(odd) {
-	background-color: rgba(0,0,0,0.01);
-}
 
 /* time in a timeRow
  */
-.calendar_calTimeRowTime{
+.calendar_calTimeRowTime {
 	padding-left: 5px;
 	height: 100%;
 	line-height: 14px;
 	font-size:8pt;
 	text-align: left;
 }
-
+.calendar_calTimeRowTime[data-minute='0'] {
+	border-top: 1px solid silver;
+	background-image: none;
+}
+.calendar_calTimeRowTime[data-minute='30'] {
+	background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75) 2px, transparent 0%);
+    background-position: top;
+    background-size: 6px 1px;
+    background-repeat: repeat-x;
+}
 /* contains (multiple) dayCol's
  */
 .calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{
@@ -287,7 +293,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	padding-bottom: 2ex;
 }
 .calendar_calDayColHeader > div[data-date] {
-	height: 16px;
+	font-size: 14px;
+	line-height: 27px;
 	text-align: center;
 	border-bottom: 1px solid silver;
 }
@@ -348,7 +355,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calGridHeader > div {
 	position: relative;
 	height: 100%;
-	margin-left: 55px;
+	margin-left: 58px;
 	width: initial;
 	white-space: nowrap;
 	border-left: 1px solid silver;
@@ -357,6 +364,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 .calendar_calGridHeader > label {
 	float: left;
+	font-size: 14px;
+	line-height: 27px;
+	width: 58px;
+	text-align: center;
 }
 .calendar_TimeGridNoLabel > .calendar_calGridHeader > ul {
     display: none;
@@ -411,7 +422,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_calGridHeader{
 	text-align: left;
-	padding-left: 3px;
 	z-index: 29;
 	border-bottom: 1px solid silver;
 	border-top: 1px solid silver;
@@ -488,28 +498,26 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * All participants accepted the invitation
  */
 .calendar_calEventAllAccepted {
-	border-style: solid;
-	border-width: 1px;
 }
 
 /**
  * All participants answered the invitation, but not all accepted
  */
 .calendar_calEventAllAnswered {
-	border-style: dotted;
+	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.8) 50%);
-	border-width: 2px;
+	background-repeat: repeat-y;
-	border-color: white;
+	background-size: 6px 2px;
 }
 
 /**
  * Some participants did NOT answer the invitation
  */
 .calendar_calEventSomeUnknown:not(.calendar_calEventUnknown) {
-	border-style: dashed;
+	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
-	border-width: 1px;
+	background-repeat: repeat-y;
-	border-color: white;
+	background-size: 6px 5px;
 }
-.calendar_calEvent:not([class*="cat_"]) {
+.calendar_calEvent:not([class*=" cat_"]) {
 	/* Defaults for no category, so we don't override it */
 	background-color: #808080;
 }
@@ -532,6 +540,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	min-width: 25ex;
 	overflow: auto;
 }
+
+/* Do not show icons in header, only tooltip */
+.calendar_calEventTooltip .calendar_calEventIcons {
+	display: inline-block;
+}
+.calendar_calEventTooltip .calendar_calEventBody,
 .calendar_calEventTooltip .calendar_calEventBodySmall {
 	padding-bottom: 1em;
 }
@@ -560,6 +574,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	padding-left: 2px;
 	min-height: 1em;
 	overflow: hidden;
+	white-space: nowrap;
 /* set via inline style on runtime
  *  background-color: depending on category
  *	color: white || black depending on cat;
@@ -574,6 +589,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	position: absolute;
 	right: 0px;
 	top: 0px;
+	/* Do not show icons in header, only tooltip */
+	display: none;
 }
 .calendar_calEventIcons img{
 	height: 13px;
@@ -918,26 +935,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	border: 1px solid white;
 }
 
-.calendar_plannerEvent,.calendar_plannerEventPrivate{
+.calendar_plannerWidget .calendar_calEventHeader,.calendar_calEventHeaderSmall {
-	position: absolute;
-	top: 0px;
 	height: 100%;
-	overflow: hidden;
-	z-index: 20;
-	border: 1px solid black;
-	min-width: 5px;
-/* set via inline style on runtime:
- *  left: depending on startime
- *  width: depending on length
- *  background-color: depending on category
- */
-}
-.calendar_plannerEvent img,.calendar_plannerEventPrivate img {
 	padding-top: 2px;
 }
-.calendar_plannerEvent:hover{
-	cursor: pointer;
-}
 
 /* Special colors for the year view */
 .calendar_cal_year_legend_weekend {

calendar/templates/pixelegg/app.css

@@ -681,12 +681,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* marks a day in the column-header additionaly as birthday of some contact,
  * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
  */
-.calendar_calBirthday,
-.calendar_calBirthday a {
-  color: black;
-  font-weight: bold;
-  font-style: italic;
-}
 /* timeGridWidget, contains timeRow's and dayCol's
  */
 .calendar_calTimeGrid {
@@ -775,15 +769,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
  */
-.calendar_calGridHeader {
-  text-align: left;
-  padding-left: 3px;
-}
 /* contains one event: header-row & -body
  */
-.calendar_calEvent,
+.calendar_calEvent {
-.calendar_calEventPrivate {
-  border-width: 1px;
   /* set via inline style on runtime:
      *  top: depending on startime
      *  height: depending on length
@@ -797,24 +785,12 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /**
  * All participants accepted the invitation
  */
-.calendar_calEventAllAccepted {
-  border-style: solid;
-  border-width: 1px;
-}
 /**
  * All participants answered the invitation, but not all accepted
  */
-.calendar_calEventAllAnswered {
-  border-style: dotted;
-  border-width: 2px;
-}
 /**
  * Some participants did NOT answer the invitation
  */
-.calendar_calEventSomeUnknown {
-  border-style: dashed;
-  border-width: 1px;
-}
 .calendar_calEventTooltip {
   max-height: 400px;
   overflow: auto;

calendar/templates/pixelegg/app.less

@@ -792,9 +792,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
  */
 .calendar_calBirthday,.calendar_calBirthday a{
-    color: black;
-    font-weight: bold;
-    font-style: italic;
 }
 
 
@@ -903,14 +900,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
  */
 .calendar_calGridHeader{
-    text-align: left;
-    padding-left: 3px;
 }
 
 /* contains one event: header-row & -body
  */
-.calendar_calEvent,.calendar_calEventPrivate{
+.calendar_calEvent {
-    border-width: 1px;
     /* set via inline style on runtime:
      *  top: depending on startime
      *  height: depending on length
@@ -926,24 +920,18 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * All participants accepted the invitation
  */
 .calendar_calEventAllAccepted {
-    border-style: solid;
-    border-width: 1px;
 }
 
 /**
  * All participants answered the invitation, but not all accepted
  */
 .calendar_calEventAllAnswered {
-    border-style: dotted;
-    border-width: 2px;
 }
 
 /**
  * Some participants did NOT answer the invitation
  */
 .calendar_calEventSomeUnknown {
-    border-style: dashed;
-    border-width: 1px;
 }
 
 .calendar_calEventTooltip{