Style changes

- Made events partially transparent
- Font size & weight changes
- Remove zebra striping from planner view, using lines

calendar/js/et2_widget_event.js

@@ -263,7 +263,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 			.droppable('option','greedy',false)
 		
 			// Set full day flag
-			.attr('data-full_day', event.whole_day_on_top)
+			.attr('data-full_day', event.whole_day)
 		
 			// Put everything we need for basic interaction here, so it's available immediately
 			.attr('data-id', event.id)

calendar/templates/default/app.css

@@ -163,7 +163,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_calBirthday,.calendar_calBirthday a{
 	color: #626161;
-	font-weight: bold;
 	font-style: italic;
 }
 
@@ -469,6 +468,8 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	-ms-transition: none !important;
 	transition: none !important;
 
+	opacity: 0.85;
+	
 /* set via inline style on runtime:
  *  top: depending on startime
  *  height: depending on length
@@ -533,6 +534,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 .calendar_calDayColHeader .calendar_calEvent .calendar_calEventBody {
 	white-space: nowrap;
+	background-color: #f0f0f0;
 }
 .calendar_calEventTooltip{
 	padding-left: 6px;
@@ -567,7 +569,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_calEventHeader,.calendar_calEventHeaderSmall{
 	position: relative;	/* as the calendar_calEventIcons use postion: absolute! */
-	font-weight: bold;
 	text-align: left;
 	left: 0px;
 	right: 0px;
@@ -575,6 +576,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	min-height: 1em;
 	overflow: hidden;
 	white-space: nowrap;
+	text-overflow: ellipsis;
 /* set via inline style on runtime
  *  background-color: depending on category
  *	color: white || black depending on cat;
@@ -609,6 +611,9 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	white-space: normal;
 	background-color: rgba(255,255,255,0.9);
 }
+[data-full_day="true"] .calendar_calEventBody {
+	background-color: white;
+}
 .calendar_calEventBody > p, .calendar_calEventBodySmall > p {
 	white-space: pre-wrap;
 }
@@ -764,6 +769,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	left: 0px;
 	width: 99.5%;
 	padding-right: 3px;
+	background-color: #f0f0f0;
 }
 .calendar_plannerWidget > div:not(.calendar_plannerHeader) {
 	overflow-y: auto;
@@ -775,7 +781,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	position: relative;
 	top: 0px;
 	left: 0px;
-	background-color: #e0e0e0;
 }
 
 /* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
@@ -786,12 +791,10 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	left: 0px;
 	width: 100%;
 	min-height: 20px;
+	background-color: white;
 }
-.calendar_plannerRowWidget:nth-child(odd) {
-	background-color: #ffffff;
-}
-.calendar_plannerRowWidget:nth-child(even) {
-	background-color: #f2f2f2;
+.calendar_plannerRowWidget:not(:first-child) {
+	border-top: 1px solid silver;
 }
 .calendar_plannerRowWidget[data-has_children]:before {
     padding-right: 20px;
@@ -816,17 +819,15 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	height: 20px;
 	line-height: 20px;
 }
-.calendar_plannerScaleDay {
-	height: 28px;
-	line-height: 14px;
-}
 .calendar_plannerDayScale,.calendar_plannerMonthScale,.calendar_plannerWeekScale,.calendar_plannerHourScale,.calendar_plannerDayOfMonthScale {
 	position: absolute;
 	top: 0px;
 	/* left+width: is set by the code on runtime */
 	text-align: center;
 	height: 100%;
-	border: 1px solid white;
+	border-right: 1px solid silver;
+	border-bottom: 1px solid silver;
+	min-height: 2ex;
 /* set via inline style on runtime:
  *  left:
  *  width:
@@ -857,7 +858,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	width: 150px;
 	height: 100%;
 	line-height: 20px;
-	border-right: 1px solid white;
+	border-right: 1px solid silver;
 	text-overflow: ellipsis;
 	white-space:nowrap;
 	overflow:hidden;

calendar/templates/pixelegg/app.css

@@ -804,7 +804,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  */
 .calendar_calEventHeader,
 .calendar_calEventHeaderSmall {
-  font-weight: bold;
   text-align: left;
   left: 0px;
   right: 0px;
@@ -995,7 +994,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
   /* left+width: is set by the code on runtime */
   text-align: center;
   height: 100%;
-  border: 1px solid white;
   /* set via inline style on runtime:
      *  left:
      *  width:
@@ -1043,31 +1041,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_eventRowWidget {
   border: 1px solid white;
 }
-.calendar_plannerEvent,
-.calendar_plannerEventPrivate {
-  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: 0px;
-  padding: 3px;
-  margin: 2px 1px 0 1px;
-  width: 8px;
-  height: 8px;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  background-color: #e6e6e6;
-}
-.calendar_plannerEvent:hover {
-  cursor: pointer;
-}
 /* Special colors for the year view */
 .calendar_cal_year_legend_weekend {
   background-color: #CCCCCC;

calendar/templates/pixelegg/app.less

@@ -949,7 +949,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /* header-row of the event
  */
 .calendar_calEventHeader,.calendar_calEventHeaderSmall{
-    font-weight: bold;
     text-align: left;
     left: 0px;
     right: 0px;
@@ -1087,7 +1086,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
     /* left+width: is set by the code on runtime */
     text-align: center;
     height: 100%;
-    border: 1px solid white;
     /* set via inline style on runtime:
      *  left:
      *  width:
@@ -1134,27 +1132,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
     border: 1px solid white;
 }
 
-.calendar_plannerEvent,.calendar_plannerEventPrivate{
-    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: 0px;
-    padding: 3px;
-    margin: 2px 1px 0 1px;
-    .dimension_width_height_xxs;
-    .rounded (2px);
-    background-color: @gray_10;
-}
-.calendar_plannerEvent:hover{
-    cursor: pointer;
-}
-
 /* Special colors for the year view */
 .calendar_cal_year_legend_weekend {
     background-color: #CCCCCC;