Change toolbar style

- buttons normally have no border, only on hover
- border below toolbar

api/js/etemplate/et2_widget_toolbar.ts

@@ -108,7 +108,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_toolbar._attributes, _child || {}));
 
 		this.div = jQuery(document.createElement('div'))
-			.addClass('et2_toolbar ui-widget-header ui-corner-all');
+			.addClass('et2_toolbar');
 
 		// Set proper id and dom_id for the widget
 		this.set_id(this.id);

api/templates/default/etemplate2.css

@@ -2601,8 +2601,10 @@ table.egwGridView_outer thead tr th.noResize:hover {
 .et2_toolbar {
     border: none;
     background: none;
-    margin: 0 !important;
+
-    padding: 0 !important;
+	border-bottom-width: var(--sl-panel-border-width);
+	border-color: var(--sl-panel-border-color);
+	border-bottom-style: solid;
 }
 
 .et2_toolbar *[class ^="et2_toolbar_draggable"] {cursor: pointer !important;}
@@ -2618,15 +2620,29 @@ table.egwGridView_outer thead tr th.noResize:hover {
 	top: 100%;
 }
 
-.et2_toolbar et2-switch-icon {
+.et2_toolbar et2-button:not(:hover)::part(base) {
+	border-color: transparent;
+}
+
+.et2_toolbar *:not(.ui-toolbar-menulist) > et2-button:hover::part(base) {
+	background-color: var(--sl-input-background-color);
+}
+
+.et2_toolbar *:not(.ui-toolbar-menulist) > et2-switch-icon {
 	font-size: 20px;
 	border-radius: var(--sl-border-radius-medium);
-	border-color: var(--sl-input-border-color);
+	border-color: transparent;
 	border-width: var(--sl-input-border-width);
 	border-style: solid;
 	padding: 0px var(--sl-spacing-medium);
 }
 
+.et2_toolbar *:not(.ui-toolbar-menulist) > et2-switch:hover {
+	border-color: var(--sl-input-border-color-hover);
+	border-width: var(--sl-input-border-width);
+	border-style: solid;
+}
+
 .et2_toolbar et2-switch-icon::part(form-control-label) {
 	position: absolute;
 	top: 100%;
@@ -2637,8 +2653,7 @@ table.egwGridView_outer thead tr th.noResize:hover {
 	top: calc(-0.3 * var(--sl-spacing-medium));
 }
 
-et2-switch-icon:hover:not([disabled]), et2-switch-icon:hover:not([disabled])::part(control) {
+et2-switch-icon:hover:not([disabled]) {
-	background-color: var(--sl-color-gray-150);
 	border-color: var(--sl-input-border-color-hover);
 	color: var(--sl-input-color-hover);
 }
@@ -2733,7 +2748,7 @@ div.et2_toolbar.ui-widget-header {
 	--et2-button-image-padding-left: 0px;
 }
 
-.et2_toolbar et2-button::part(base) {
+.et2_toolbar *:not(.ui-toolbar-menulist) > et2-button::part(base) {
 	padding-inline-start: 0px;
 	justify-content: center;
 }

calendar/templates/default/app.css

@@ -125,14 +125,14 @@
 
 /* Toolbar */
 #calendar-toolbar {
-	height: 3.6em;
+	height: auto;
-	margin-top: 0.3em;
 }
 #calendar-toolbar > div {
 	display: flex;
 }
 #calendar-toolbar .et2_toolbar {
 	background: inherit;
+	border:none;
 }
 #calendar-toolbar .egw_fw_ui_app_header_container {
 	border: none;
@@ -1532,7 +1532,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {width: 100%; height: 1
 #calendar-toolbar_toolbar et2-switch {
 	display: inline-block;
 	vertical-align: top;
-	border: 1px solid var(--sl-color-neutral-300);
 	border-radius: var(--sl-border-radius-medium, 3px);
 }
 .ui-toolbar-menulist et2-switch,

calendar/templates/mobile/app.css

@@ -138,14 +138,14 @@
 }
 /* Toolbar */
 #calendar-toolbar {
-  height: 3.6em;
+  height: auto;
-  margin-top: 0.3em;
 }
 #calendar-toolbar > div {
   display: flex;
 }
 #calendar-toolbar .et2_toolbar {
   background: inherit;
+  border: none;
 }
 #calendar-toolbar .egw_fw_ui_app_header_container {
   border: none;
@@ -1509,7 +1509,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
 #calendar-toolbar_toolbar et2-switch {
   display: inline-block;
   vertical-align: top;
-  border: 1px solid var(--sl-color-neutral-300);
   border-radius: var(--sl-border-radius-medium, 3px);
 }
 .ui-toolbar-menulist et2-switch,

calendar/templates/pixelegg/app.css

@@ -126,14 +126,14 @@
 }
 /* Toolbar */
 #calendar-toolbar {
-  height: 3.6em;
+  height: auto;
-  margin-top: 0.3em;
 }
 #calendar-toolbar > div {
   display: flex;
 }
 #calendar-toolbar .et2_toolbar {
   background: inherit;
+  border: none;
 }
 #calendar-toolbar .egw_fw_ui_app_header_container {
   border: none;
@@ -1497,7 +1497,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
 #calendar-toolbar_toolbar et2-switch {
   display: inline-block;
   vertical-align: top;
-  border: 1px solid var(--sl-color-neutral-300);
   border-radius: var(--sl-border-radius-medium, 3px);
 }
 .ui-toolbar-menulist et2-switch,

mail/templates/default/app.css

@@ -477,7 +477,6 @@ et2-details.details {width: 100%}
 }
 #mail-compose_composeToolbar {
 	padding: 0px !important;
-	border: none;
 }
 #mail-compose_composeToolbar > button {
 	padding: .2em .4em;
@@ -516,7 +515,6 @@ et2-details.details {width: 100%}
 	top: 0;
 }
 #mail-index_toolbar {
-	padding: 0px;
 	height: 35px;
 }
 #mail-index_toolbar > button > span {

pixelegg/css/fancy.css

@@ -1042,8 +1042,6 @@
 */
   .et2_toolbar {
     background: none;
-    margin: 0 !important;
-    padding: 0 !important;
   }
   .et2_toolbar-dropdown button {
     /*        height: 100% !important;
@@ -7190,7 +7188,7 @@ img.et2_button_icon[src*="svg"]:hover {
 :host et2-tabbox::part(body),
 .sl-theme-light et2-tabbox::part(body),
 .sl-theme-dark et2-tabbox::part(body) {
-  animation: detect-scroll 1s linear;
+  animation: detect-scroll linear;
   animation-timeline: scroll(self);
   border: 1px solid var(--sl-color-neutral-300);
   border-radius: var(--sl-border-radius-medium);
@@ -7231,6 +7229,10 @@ img.et2_button_icon[src*="svg"]:hover {
 .et2_required:not(.hasValue) {
   background-color: initial;
 }
+.et2_toolbar {
+  padding: 0;
+  border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
+}
 div.flatpickr-calendar {
   border-radius: var(--sl-border-radius-medium);
 }

pixelegg/css/fancy.less

@@ -71,6 +71,11 @@
     background-color: initial;
 }
 
+.et2_toolbar {
+  padding: 0;
+  border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
+}
+
 //rounded flatpickr
 div.flatpickr-calendar {
     border-radius: var(--sl-border-radius-medium);

pixelegg/css/mobile.css

@@ -1045,8 +1045,6 @@
 */
   .et2_toolbar {
     background: none;
-    margin: 0 !important;
-    padding: 0 !important;
   }
   .et2_toolbar-dropdown button {
     /*        height: 100% !important;

pixelegg/css/monochrome.css

@@ -1024,8 +1024,6 @@
 */
   .et2_toolbar {
     background: none;
-    margin: 0 !important;
-    padding: 0 !important;
   }
   .et2_toolbar-dropdown button {
     /*        height: 100% !important;
@@ -1321,9 +1319,6 @@ option:checked {
 .ui-widget-header .ui-state-error-text {
   color: #FF0000;
 }
-.drop-hover {
-  background-color: #FFDD73;
-}
 .ui-icon-close {
   background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg");
   background-repeat: no-repeat;

pixelegg/css/pixelegg.css

@@ -1035,8 +1035,6 @@
 */
   .et2_toolbar {
     background: none;
-    margin: 0 !important;
-    padding: 0 !important;
   }
   .et2_toolbar-dropdown button {
     /*        height: 100% !important;
@@ -6790,6 +6788,7 @@ table.egwGridView_grid img.et2_appicon {
   --sl-focus-ring-width: 2px;
   --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
   --track-width: 3px;
+  --et2-favorites-left: 0.4em;
 }
 .bi::before,
 [class^="bi-"]::before,
@@ -7068,7 +7067,11 @@ table.egwGridView_grid img.et2_appicon {
   border-top-color: #404040;
   border-top-width: 4px !important;
 }
-#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon,
+#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
+  filter: none;
+  width: calc(1em + 2px) !important;
+  height: calc(1em + 2px) !important;
+}
 .standartTreeImage {
   filter: none;
 }
@@ -7135,7 +7138,7 @@ img.et2_button_icon[src*="svg"]:hover {
 ::-ms-input-placeholder {
   color: #666666;
 }
-.et2-toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
+.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
   justify-content: center;
   --et2-button-image-padding-left: 0;
   padding-inline-start: 0;

pixelegg/less/etemplate2.less

@@ -880,8 +880,6 @@ textarea.description {
 */
 .et2_toolbar {
 	background: none;
-	margin: 0 !important;
-	padding: 0 !important;
 }
 .et2_toolbar-dropdown {
 

pixelegg/mobile/fw_mobile.css

@@ -1055,8 +1055,6 @@
 */
   .et2_toolbar {
     background: none;
-    margin: 0 !important;
-    padding: 0 !important;
   }
   .et2_toolbar-dropdown button {
     /*        height: 100% !important;