diff --git a/api/js/etemplate/et2_widget_toolbar.ts b/api/js/etemplate/et2_widget_toolbar.ts index e8075e6477..204c9ed317 100644 --- a/api/js/etemplate/et2_widget_toolbar.ts +++ b/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); diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index e7337653ef..dad456fe96 100644 --- a/api/templates/default/etemplate2.css +++ b/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) { - background-color: var(--sl-color-gray-150); +et2-switch-icon:hover:not([disabled]) { 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; } diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 2542375f3b..15612a6453 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -125,14 +125,14 @@ /* Toolbar */ #calendar-toolbar { - height: 3.6em; - margin-top: 0.3em; + height: auto; } #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, diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index 0cbcdacfe0..a051cfca8c 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -138,14 +138,14 @@ } /* Toolbar */ #calendar-toolbar { - height: 3.6em; - margin-top: 0.3em; + height: auto; } #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, diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index a7f9a48325..ff1b662395 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -126,14 +126,14 @@ } /* Toolbar */ #calendar-toolbar { - height: 3.6em; - margin-top: 0.3em; + height: auto; } #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, diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css index d77849b1a9..bcb925e908 100644 --- a/mail/templates/default/app.css +++ b/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 { diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css index 38cf81ae0f..a5634f6a31 100644 --- a/pixelegg/css/fancy.css +++ b/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); } diff --git a/pixelegg/css/fancy.less b/pixelegg/css/fancy.less index 53c2de8b89..ceac92145e 100644 --- a/pixelegg/css/fancy.less +++ b/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); diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 3f9e3c1b40..2105209d10 100644 --- a/pixelegg/css/mobile.css +++ b/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; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 2cf4455595..ce6893fb19 100644 --- a/pixelegg/css/monochrome.css +++ b/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; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 7c23cd4a5a..3c8e0e031d 100644 --- a/pixelegg/css/pixelegg.css +++ b/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; diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index 738d867611..0487da7234 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -880,8 +880,6 @@ textarea.description { */ .et2_toolbar { background: none; - margin: 0 !important; - padding: 0 !important; } .et2_toolbar-dropdown { diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index d6b5e7cf96..0f759eed69 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/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;