extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 23:00:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix some of the styling issues regarding Et2Switch used in calendar toolbar

Browse Source
This commit is contained in:
Hadi Nategh 2022-08-03 17:26:14 +02:00
parent 42ccb288f0
commit 417851b7b6
4 changed files with 127 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
calendar/templates/default/app.css
View File

@ -1562,26 +1562,48 @@ img.calendar_print_button, img.calendar_print_appicon {
left:44%; left:44%;
} }
/* Integration slide switches in toolbar */ /* Integration slide switches in toolbar */
#calendar-toolbar_toolbar span[data-group="integration"] > span, #calendar-toolbar_toolbar et2-switch {
#toolbar-menulist span[id^="toolbar-integration"] , height: var(--height);
#toolbar-menulist span[id^="toolbar-video_toggle"] { display: inline-flex;
width: var(--width);
}
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] ,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] {
background-size: 16px; background-size: 16px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7); filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
} }
#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist span[id^="toolbar-integration"].switchOn, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked] ,
#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn{ #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked]{
filter: none; filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important; box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
#toolbar-menulist span[id^="toolbar-integration"] span.slideSwitch_container{ #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label{
background: none; background: none;
min-width: 24px; min-width: 24px;
} }
#calendar-toolbar_toolbar et2-switch::part(control) {
visibility: hidden;
}
#calendar-toolbar_toolbar et2-switch {
height: 24px;
display: inline-block;
vertical-align: top;
border: 1px solid silver;
border-radius: 3px;
}
.ui-toolbar-menulist et2-switch,
.ui-toolbar-menulist et2-switch::part(base),
.ui-toolbar-menulist et2-switch::part(label),
.ui-toolbar-menulist et2-switch .label {width: 100%!important;}
#calendar-toolbar_toolbar .et2_toolbar_more { #calendar-toolbar_toolbar .et2_toolbar_more {
margin-top: 0; margin-top: 0;

66
calendar/templates/mobile/app.css
View File

@ -1530,26 +1530,49 @@ img.calendar_print_appicon {
left: 44%; left: 44%;
} }
/* Integration slide switches in toolbar */ /* Integration slide switches in toolbar */
#calendar-toolbar_toolbar span[data-group="integration"] > span, #calendar-toolbar_toolbar et2-switch {
#toolbar-menulist span[id^="toolbar-integration"], height: var(--height);
#toolbar-menulist span[id^="toolbar-video_toggle"] { display: inline-flex;
width: var(--width);
}
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] {
background-size: 16px; background-size: 16px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7); filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
} }
#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist span[id^="toolbar-integration"].switchOn, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn { #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] {
filter: none; filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important; box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
#toolbar-menulist span[id^="toolbar-integration"] span.slideSwitch_container { #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label {
background: none; background: none;
min-width: 24px; min-width: 24px;
} }
#calendar-toolbar_toolbar et2-switch::part(control) {
visibility: hidden;
}
#calendar-toolbar_toolbar et2-switch {
height: 24px;
display: inline-block;
vertical-align: top;
border: 1px solid silver;
border-radius: 3px;
}
.ui-toolbar-menulist et2-switch,
.ui-toolbar-menulist et2-switch::part(base),
.ui-toolbar-menulist et2-switch::part(label),
.ui-toolbar-menulist et2-switch .label {
width: 100%!important;
}
#calendar-toolbar_toolbar .et2_toolbar_more { #calendar-toolbar_toolbar .et2_toolbar_more {
margin-top: 0; margin-top: 0;
} }
@ -2812,19 +2835,13 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
#calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label {
width: calc(100% - 58px); width: calc(100% - 58px);
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.off { #calendar-toolbar_toolbar et2-switch .label.on span.off {
filter: invert(1); filter: invert(1);
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.on { #calendar-toolbar_toolbar et2-switch .label.on span.on {
filter: none !important; filter: none !important;
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch { #calendar-toolbar_toolbar et2-switch .label span.on {
height: 22px;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container {
padding: 0px;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.on {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -2832,24 +2849,26 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
top: 0; top: 0;
filter: invert(1); filter: invert(1);
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.off { #calendar-toolbar_toolbar et2-switch .label span.off {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 21px;
top: 0; top: 0;
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span { #calendar-toolbar_toolbar et2-switch .label span {
color: transparent !important; color: transparent !important;
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container a { #calendar-toolbar_toolbar et2-switch .label a {
background: none; background: none;
} }
#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.on { #calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.on {
background-image: url(../../../api/templates/default/images/7_day_view.svg); background-image: url(../../../api/templates/default/images/7_day_view.svg);
width: 50%;
} }
#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.off { #calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.off {
background-image: url(../../../api/templates/default/images/5_day_view.svg); background-image: url(../../../api/templates/default/images/5_day_view.svg);
width: 50%;
} }
/* ######################################################################################## /* ########################################################################################
/* * Calendar END */ /* * Calendar END */
@ -2982,3 +3001,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
color: #707070; color: #707070;
} }
} }
/*# sourceMappingURL=app.css.map */

65
calendar/templates/pixelegg/app.css
View File

@ -1518,26 +1518,49 @@ img.calendar_print_appicon {
left: 44%; left: 44%;
} }
/* Integration slide switches in toolbar */ /* Integration slide switches in toolbar */
#calendar-toolbar_toolbar span[data-group="integration"] > span, #calendar-toolbar_toolbar et2-switch {
#toolbar-menulist span[id^="toolbar-integration"], height: var(--height);
#toolbar-menulist span[id^="toolbar-video_toggle"] { display: inline-flex;
width: var(--width);
}
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] {
background-size: 16px; background-size: 16px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7); filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
} }
#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist span[id^="toolbar-integration"].switchOn, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn { #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] {
filter: none; filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important; box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
#toolbar-menulist span[id^="toolbar-integration"] span.slideSwitch_container { #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label {
background: none; background: none;
min-width: 24px; min-width: 24px;
} }
#calendar-toolbar_toolbar et2-switch::part(control) {
visibility: hidden;
}
#calendar-toolbar_toolbar et2-switch {
height: 24px;
display: inline-block;
vertical-align: top;
border: 1px solid silver;
border-radius: 3px;
}
.ui-toolbar-menulist et2-switch,
.ui-toolbar-menulist et2-switch::part(base),
.ui-toolbar-menulist et2-switch::part(label),
.ui-toolbar-menulist et2-switch .label {
width: 100%!important;
}
#calendar-toolbar_toolbar .et2_toolbar_more { #calendar-toolbar_toolbar .et2_toolbar_more {
margin-top: 0; margin-top: 0;
} }
@ -2800,19 +2823,13 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
#calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label {
width: calc(100% - 58px); width: calc(100% - 58px);
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.off { #calendar-toolbar_toolbar et2-switch .label.on span.off {
filter: invert(1); filter: invert(1);
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.on { #calendar-toolbar_toolbar et2-switch .label.on span.on {
filter: none !important; filter: none !important;
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch { #calendar-toolbar_toolbar et2-switch .label span.on {
height: 22px;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container {
padding: 0px;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.on {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -2820,24 +2837,26 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
top: 0; top: 0;
filter: invert(1); filter: invert(1);
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.off { #calendar-toolbar_toolbar et2-switch .label span.off {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 21px;
top: 0; top: 0;
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span { #calendar-toolbar_toolbar et2-switch .label span {
color: transparent !important; color: transparent !important;
} }
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container a { #calendar-toolbar_toolbar et2-switch .label a {
background: none; background: none;
} }
#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.on { #calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.on {
background-image: url(../../../api/templates/default/images/7_day_view.svg); background-image: url(../../../api/templates/default/images/7_day_view.svg);
width: 50%;
} }
#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.off { #calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.off {
background-image: url(../../../api/templates/default/images/5_day_view.svg); background-image: url(../../../api/templates/default/images/5_day_view.svg);
width: 50%;
} }
/* ######################################################################################## /* ########################################################################################
/* * Calendar END */ /* * Calendar END */

22
calendar/templates/pixelegg/app.less
View File

@ -1207,7 +1207,7 @@ div#calendar-container {
} }
} }
#calendar-toolbar_toolbar { #calendar-toolbar_toolbar {
span.et2_checkbox_slideSwitch.switchOn { et2-switch .label.on {
span.off { span.off {
filter: invert(1); filter: invert(1);
} }
@ -1215,9 +1215,8 @@ div#calendar-container {
filter: none !important; filter: none !important;
} }
} }
span.et2_checkbox_slideSwitch { et2-switch {
height: 22px; .label {
span.slideSwitch_container {
span.on { span.on {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1233,18 +1232,19 @@ div#calendar-container {
height: 21px; height: 21px;
top:0; top:0;
} }
padding: 0px;
span {color:transparent !important;} span {color:transparent !important;}
a {background: none;} a {background: none;}
} }
} }
#toolbar-weekend span.slideSwitch_container span.on { #calendar-toolbar_toolbar-weekend .label span.on {
background-image: url(../../../api/templates/default/images/7_day_view.svg); background-image: url(../../../api/templates/default/images/7_day_view.svg);
} width: 50%;
#toolbar-weekend span.slideSwitch_container span.off { }
background-image: url(../../../api/templates/default/images/5_day_view.svg); #calendar-toolbar_toolbar-weekend .label span.off {
} background-image: url(../../../api/templates/default/images/5_day_view.svg);
width: 50%;
}
} }
/* ######################################################################################## /* ########################################################################################