extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +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%;
}
/* Integration slide switches in toolbar */
#calendar-toolbar_toolbar span[data-group="integration"] > span,
#toolbar-menulist span[id^="toolbar-integration"] ,
#toolbar-menulist span[id^="toolbar-video_toggle"] {
#calendar-toolbar_toolbar et2-switch {
height: var(--height);
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-repeat: no-repeat;
background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
}
#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn,
#toolbar-menulist span[id^="toolbar-integration"].switchOn,
#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn{
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked] ,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked]{
filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
}
#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"] span.slideSwitch_container{
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label{
background: none;
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 {
margin-top: 0;

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

@ -1530,26 +1530,49 @@ img.calendar_print_appicon {
left: 44%;
}
/* Integration slide switches in toolbar */
#calendar-toolbar_toolbar span[data-group="integration"] > span,
#toolbar-menulist span[id^="toolbar-integration"],
#toolbar-menulist span[id^="toolbar-video_toggle"] {
#calendar-toolbar_toolbar et2-switch {
height: var(--height);
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-repeat: no-repeat;
background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
}
#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn,
#toolbar-menulist span[id^="toolbar-integration"].switchOn,
#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn {
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] {
filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
}
#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"] span.slideSwitch_container {
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label {
background: none;
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 {
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 {
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);
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.on {
#calendar-toolbar_toolbar et2-switch .label.on span.on {
filter: none !important;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch {
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 {
#calendar-toolbar_toolbar et2-switch .label span.on {
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
@ -2832,24 +2849,26 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
top: 0;
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-repeat: no-repeat;
background-position: center;
height: 21px;
top: 0;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span {
#calendar-toolbar_toolbar et2-switch .label span {
color: transparent !important;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container a {
#calendar-toolbar_toolbar et2-switch .label a {
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);
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);
width: 50%;
}
/* ########################################################################################
/* * Calendar END */
@ -2982,3 +3001,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
color: #707070;
}
}
/*# sourceMappingURL=app.css.map */

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

@ -1518,26 +1518,49 @@ img.calendar_print_appicon {
left: 44%;
}
/* Integration slide switches in toolbar */
#calendar-toolbar_toolbar span[data-group="integration"] > span,
#toolbar-menulist span[id^="toolbar-integration"],
#toolbar-menulist span[id^="toolbar-video_toggle"] {
#calendar-toolbar_toolbar et2-switch {
height: var(--height);
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-repeat: no-repeat;
background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
}
#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn,
#toolbar-menulist span[id^="toolbar-integration"].switchOn,
#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn {
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] {
filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
}
#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"] span.slideSwitch_container {
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label {
background: none;
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 {
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 {
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);
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.on {
#calendar-toolbar_toolbar et2-switch .label.on span.on {
filter: none !important;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch {
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 {
#calendar-toolbar_toolbar et2-switch .label span.on {
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
@ -2820,24 +2837,26 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
top: 0;
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-repeat: no-repeat;
background-position: center;
height: 21px;
top: 0;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span {
#calendar-toolbar_toolbar et2-switch .label span {
color: transparent !important;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container a {
#calendar-toolbar_toolbar et2-switch .label a {
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);
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);
width: 50%;
}
/* ########################################################################################
/* * Calendar END */

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

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