From e0c41795120e8ffac061cebf596cde9979744b01 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 1 Apr 2021 13:43:05 +0200 Subject: [PATCH] Fix styling of integration toolbar actions in calendar's toolbar morelist --- calendar/templates/default/app.css | 12 +++++-- calendar/templates/mobile/app.css | 54 ++++++++++++++++++++++------ calendar/templates/pixelegg/app.css | 20 +++++++---- calendar/templates/pixelegg/app.less | 10 +++--- 4 files changed, 71 insertions(+), 25 deletions(-) diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 533968d80a..15f698046d 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -1526,17 +1526,23 @@ img.calendar_print_button, img.calendar_print_appicon { left:44%; } /* Integration slide switches in toolbar */ -#calendar-toolbar_toolbar span[data-group="integration"] > span { +#calendar-toolbar_toolbar span[data-group="integration"] > span, +#toolbar-menulist span[id^="toolbar-integration_stylite"] , +#toolbar-menulist span[id^="toolbar-video_toggle"] { background-size: contain; background-repeat: no-repeat; background-position: center; filter: grayscale(1) contrast(0.9999) opacity(0.7); } -#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn { +#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, +#toolbar-menulist span[id^="toolbar-integration_stylite"].switchOn, +#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn{ filter: none; box-shadow: inset 1px 1px 1px 1px gray !important; } -#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container { +#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, +#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, +#toolbar-menulist span[id^="toolbar-integration_stylite"] span.slideSwitch_container{ background: none; min-width: 24px; } diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index 61381ad0a9..7b037ad528 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -101,6 +101,7 @@ } #calendar-sidebox_cat_id { width: 90%; + margin-bottom: 10px; } #calendar-sidebox_cat_id ~ * { vertical-align: top; @@ -110,6 +111,10 @@ border: none; box-shadow: none; } +#calendar-et2_target hr { + display: block; + border-top: 1px solid #696969; +} #calendar-sidebox_buttons tbody { width: 100%; } @@ -192,14 +197,37 @@ div.calendar_conflicts { #calendar-toolbar { height: 30px; } -#calendar-toolbar button#toolbar-add { - margin-right: -3px; +#calendar-toolbar > div { + display: flex; +} +#calendar-toolbar .et2_toolbar { + background: inherit; } #calendar-toolbar .egw_fw_ui_app_header_container { border: none; display: flex; align-items: center; min-height: 26px; + justify-content: flex-end; +} +#calendar-toolbar #calendar-toolbar_keywords { + margin-right: 4px; +} +#calendar-toolbar .et2_searchbox input { + height: 14px; +} +#calendar-toolbar #calendar-toolbar_favorite_wrapper { + float: right; + white-space: nowrap; + margin-right: 5px; + margin-top: -4px; +} +#calendar-toolbar #calendar-toolbar_favorite_wrapper #calendar-toolbar_favorite_menu { + z-index: 40; + font-weight: normal; +} +#calendar-toolbar .et2_dropdown button.ui-state-default { + background: #ffffff; } /* Space for toolbar */ #calendar-view, @@ -1472,17 +1500,20 @@ img.calendar_print_appicon { left: 44%; } /* Integration slide switches in toolbar */ -#calendar-toolbar_toolbar span[id^="toolbar-integration_"] { +#calendar-toolbar_toolbar span[data-group="integration"] > span, +#calendar-toolbar_toolbar span[id^="toolbar-integration_"] > span { background-size: contain; background-repeat: no-repeat; background-position: center; filter: grayscale(1) contrast(0.9999) opacity(0.7); } -#calendar-toolbar_toolbar span[id^="toolbar-integration_"].switchOn { +#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, +#calendar-toolbar_toolbar span[id^="toolbar-integration_"] > span.switchOn { filter: none; box-shadow: inset 1px 1px 1px 1px gray !important; } -#calendar-toolbar_toolbar span[id^="toolbar-integration_"] span.slideSwitch_container { +#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, +#calendar-toolbar_toolbar span[id^="toolbar-integration_"] > span span.slideSwitch_container { background: none; min-width: 24px; } @@ -1579,6 +1610,9 @@ img.calendar_print_appicon { #calendar-list_nm .nextmatch_header .header_count { margin-right: -4px; } +#calendar-list_nm .nextmatch_header .search { + display: none; +} /*generell*/ .egw_fw_content_browser_iframe img[src$="svg"] { background-color: #828282 !important; @@ -2321,7 +2355,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calDayTodos .calendar_calDayTodosTable table tr:nth-child(even) { background: #FFFFFF; } -.calendar_calDayTodos .calendar_calDayTodosTable table tr:nth_child(odd) { +.calendar_calDayTodos .calendar_calDayTodosTable table tr:nth-child(odd) { background: #f2f2f2; } .calendar_calDayTodos .calendar_calDayTodosTable table td { @@ -2486,7 +2520,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /*ui-widget*/ /*edit series*/ button#series { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; /*.border_normal;*/ /*.box_shadow_standard_light;*/ /*.rounded (3px);*/ @@ -2531,7 +2565,7 @@ button#series:hover { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } button#series:hover { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; background-color: #b3e4a6 !important; } button#series:active { @@ -2539,7 +2573,7 @@ button#series:active { } /*edit exception*/ button#exception { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; /*.border_normal;*/ /*.box_shadow_standard_light;*/ /*.rounded (3px);*/ @@ -2584,7 +2618,7 @@ button#exception:hover { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } button#exception:hover { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; background-color: #b3e4a6 !important; } button#exception:active { diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 0bfa09f5b4..e1738a7ff9 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -1488,17 +1488,23 @@ img.calendar_print_appicon { left: 44%; } /* Integration slide switches in toolbar */ -#calendar-toolbar_toolbar span[data-group="integration"] > span { +#calendar-toolbar_toolbar span[data-group="integration"] > span, +#toolbar-menulist span[id^="toolbar-integration_stylite"], +#toolbar-menulist span[id^="toolbar-video_toggle"] { background-size: contain; background-repeat: no-repeat; background-position: center; filter: grayscale(1) contrast(0.9999) opacity(0.7); } -#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn { +#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, +#toolbar-menulist span[id^="toolbar-integration_stylite"].switchOn, +#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn { filter: none; box-shadow: inset 1px 1px 1px 1px gray !important; } -#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container { +#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, +#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, +#toolbar-menulist span[id^="toolbar-integration_stylite"] span.slideSwitch_container { background: none; min-width: 24px; } @@ -2505,7 +2511,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /*ui-widget*/ /*edit series*/ button#series { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; /*.border_normal;*/ /*.box_shadow_standard_light;*/ /*.rounded (3px);*/ @@ -2550,7 +2556,7 @@ button#series:hover { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } button#series:hover { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; background-color: #b3e4a6 !important; } button#series:active { @@ -2558,7 +2564,7 @@ button#series:active { } /*edit exception*/ button#exception { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; /*.border_normal;*/ /*.box_shadow_standard_light;*/ /*.rounded (3px);*/ @@ -2603,7 +2609,7 @@ button#exception:hover { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } button#exception:hover { - background-image: url('../images/edit.png') !important; + background-image: url('../../../pixelegg/images/edit.svg') !important; background-color: #b3e4a6 !important; } button#exception:active { diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 8153edbbef..ae87cc3e83 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -867,7 +867,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget // Listendarstellung // Reihen ohne Border left und right tr:nth-child(even) {background: @color_even;} - tr:nth_child(odd) {background: @color_odd;} + tr:nth-child(odd) {background: @color_odd;} td { padding: 3px; @@ -1009,18 +1009,18 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget /*ui-widget*/ /*edit series*/ button#series { - background-image:url('../images/edit.png') !important; + background-image:url('../../../pixelegg/images/edit.svg') !important; .Complete_Button_text_icon_before; .Complete_Button_save_apply_copy; - &:hover {background-image:url('../images/edit.png') !important; background-color: @color_positive_action_active !important;} + &:hover {background-image:url('../../../pixelegg/images/edit.svg') !important; background-color: @color_positive_action_active !important;} &:active {background-color: @color_positive_action_active !important;} } /*edit exception*/ button#exception { - background-image:url('../images/edit.png') !important; + background-image:url('../../../pixelegg/images/edit.svg') !important; .Complete_Button_text_icon_before; .Complete_Button_save_apply_copy; - &:hover {background-image:url('../images/edit.png') !important;background-color: @color_positive_action_active !important;} + &:hover {background-image:url('../../../pixelegg/images/edit.svg') !important;background-color: @color_positive_action_active !important;} &:active {background-color: @color_positive_action_active !important;} }