Style changes

api/js/etemplate/Et2Template/Et2Template.styles.ts

@@ -3,7 +3,7 @@ import {css} from 'lit';
 export default css`
 	:host {
 		display: block;
-		position: relative
+		position: relative;
 	}
 
 	.template--loading {

api/js/etemplate/Et2Widget/Et2Widget.ts

@@ -1589,6 +1589,11 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
 		widget.style.setProperty("flex", "0 0 auto");
 		delete attributes.width;
 	}
+	if(attributes.height)
+	{
+		widget.style.setProperty("height", attributes.height);
+		delete attributes.height;
+	}
 
 	// Apply any set attributes - widget will do its own coercion
 	for(let attribute in attributes)

api/templates/default/etemplate2.css

@@ -67,7 +67,7 @@
     max-width: 100%
 }
 
-.et2_container > div:not([class]) {
+.et2_container > *:not([class]) {
     height: 100%;
 }
 
@@ -2058,7 +2058,7 @@ egw-validation-feedback[type] {
     background-color: transparent;
 }
 
-.et2_nextmatch .nextmatch_header_row > div {
+.et2_nextmatch .nextmatch_header_row > div, .et2_nextmatch .nextmatch_header_row et2-template::part(base) {
     display: inline-flex;
     flex-direction: row;
     gap: 1ex;

calendar/templates/default/app.css

@@ -132,7 +132,7 @@
 #calendar-toolbar {
 	height: auto;
 }
-#calendar-toolbar > div {
+#calendar-toolbar > et2-template::part(base) {
 	display: flex;
 	align-items: center;
 }
@@ -178,7 +178,7 @@
 	left: 0px;
 	right: 0px;
 }
-form#calendar-toolbar > div {
+form#calendar-toolbar > * {
 	column-gap: 1ex;
 }
 #calendar-todo {

calendar/templates/mobile/app.css

@@ -91,15 +91,19 @@
 #calendar-et2_target > div {
   position: relative;
 }
-#calendar-sidebox_cat_id {
-  margin-bottom: 5px;
-}
 #calendar-sidebox_cat_id ~ * {
   vertical-align: top;
   display: inline-block;
   border: none;
   box-shadow: none;
 }
+.flatpickr-current-month .numInputWrapper {
+  color: inherit;
+}
+/*overrides above for disabled et2-box*/
+#calendar-sidebox_cat_id ~ et2-box[disabled] {
+  display: none;
+}
 #calendar-sidebox_weekend {
   /* Special css styling goes here */
 }
@@ -140,7 +144,7 @@
 #calendar-toolbar {
   height: auto;
 }
-#calendar-toolbar > div {
+#calendar-toolbar > et2-template::part(base) {
   display: flex;
   align-items: center;
 }
@@ -187,7 +191,7 @@
   left: 0px;
   right: 0px;
 }
-form#calendar-toolbar > div {
+form#calendar-toolbar > * {
   column-gap: 1ex;
 }
 #calendar-todo {
@@ -1445,7 +1449,7 @@ img.calendar_print_appicon {
 /*weekend slideSwitch in toolbar*/
 #calendar-toolbar_app_header {
   color: #000;
-  font-size: var(--sl-font-size-large);
+  font-size: 14px;
   height: 1.6em;
   padding: 4px 3px 3px;
   background: #b4cee773;
@@ -1652,7 +1656,20 @@ et2-button#calendar-toolbar_toolbar-today::part(label) {
   height: calc(100% - 78px);
 }
 #calendar_sidebox_content .egw_fw_ui_category_content {
-  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+div.flatpickr-calendar .flatpickr-months {
+  gap: 0;
+}
+div.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
+  width: 65%;
+  padding-right: 0 !important;
+}
+div.flatpickr-calendar .flatpickr-prev-month {
+  padding-right: 0;
+}
+div.flatpickr-calendar .flatpickr-next-month {
+  padding-left: 0;
 }
 img.sideboxstar {
   width: 12px;

calendar/templates/pixelegg/app.css

@@ -132,7 +132,7 @@
 #calendar-toolbar {
   height: auto;
 }
-#calendar-toolbar > div {
+#calendar-toolbar > et2-template::part(base) {
   display: flex;
   align-items: center;
 }
@@ -179,7 +179,7 @@
   left: 0px;
   right: 0px;
 }
-form#calendar-toolbar > div {
+form#calendar-toolbar > * {
   column-gap: 1ex;
 }
 #calendar-todo {