Calendar: Fix toolbar switch styling

This commit is contained in:
nathan 2024-04-09 14:05:55 -06:00
parent a100f6bbf6
commit 77d3ddb87e
3 changed files with 16 additions and 10 deletions

View File

@ -1473,6 +1473,8 @@ img.calendar_print_button, img.calendar_print_appicon {
/* Integration slide switches in toolbar */ /* Integration slide switches in toolbar */
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
--sl-toggle-size-medium: 30px;
--height: 30px;
height: var(--height); height: var(--height);
display: inline-flex; display: inline-flex;
} }
@ -1483,6 +1485,7 @@ img.calendar_print_button, img.calendar_print_appicon {
background-size: 20px; background-size: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
--width: var(--height);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch::part(base), #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch::part(base),
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] , #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] ,
@ -1495,11 +1498,11 @@ et2-switch#calendar-toolbar_toolbar-weekend {
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend::part(base){width: 100%; height: 100%;} #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend::part(base){width: 100%; height: 100%;}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span {
background-size: 20px; background-size: 20px;
height: 75%;
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label {
width: 100%; width: 100%;
height: 100%; height: 100%;
align-items: normal;
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {min-width: 60px;} #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {min-width: 60px;}
et2-switch#calendar-toolbar_toolbar-weekend::part(control) {width: 100%;} et2-switch#calendar-toolbar_toolbar-weekend::part(control) {width: 100%;}
@ -1521,7 +1524,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {width: 100%; height: 1
visibility: hidden; visibility: hidden;
} }
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid var(--sl-color-neutral-300); border: 1px solid var(--sl-color-neutral-300);

View File

@ -115,7 +115,7 @@
box-shadow: none; box-shadow: none;
} }
/* Hide email in sidebox */ /* Hide email in sidebox */
#calendar-sidebox_owner sl-option::part(suffix) { #calendar-sidebox_owner::part(tag__suffix) {
display: none; display: none;
} }
/* Conflict display */ /* Conflict display */
@ -1443,6 +1443,8 @@ img.calendar_print_appicon {
} }
/* Integration slide switches in toolbar */ /* Integration slide switches in toolbar */
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
--sl-toggle-size-medium: 30px;
--height: 30px;
height: var(--height); height: var(--height);
display: inline-flex; display: inline-flex;
} }
@ -1452,6 +1454,7 @@ img.calendar_print_appicon {
background-size: 20px; background-size: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
--width: var(--height);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch::part(base), #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch::part(base),
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"], #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
@ -1467,11 +1470,11 @@ et2-switch#calendar-toolbar_toolbar-weekend {
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span {
background-size: 20px; background-size: 20px;
height: 75%;
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label {
width: 100%; width: 100%;
height: 100%; height: 100%;
align-items: normal;
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {
min-width: 60px; min-width: 60px;
@ -1499,7 +1502,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
visibility: hidden; visibility: hidden;
} }
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid var(--sl-color-neutral-300); border: 1px solid var(--sl-color-neutral-300);
@ -2628,7 +2630,7 @@ div#calendar-container div.calendar {
} }
div#calendar-container div.calendar table { div#calendar-container div.calendar table {
background-color: #fafafa; background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }
div#calendar-container div.calendar table thead .button { div#calendar-container div.calendar table thead .button {
background-color: #FFDD73; background-color: #FFDD73;

View File

@ -103,7 +103,7 @@
box-shadow: none; box-shadow: none;
} }
/* Hide email in sidebox */ /* Hide email in sidebox */
#calendar-sidebox_owner sl-option::part(suffix) { #calendar-sidebox_owner::part(tag__suffix) {
display: none; display: none;
} }
/* Conflict display */ /* Conflict display */
@ -1431,6 +1431,8 @@ img.calendar_print_appicon {
} }
/* Integration slide switches in toolbar */ /* Integration slide switches in toolbar */
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
--sl-toggle-size-medium: 30px;
--height: 30px;
height: var(--height); height: var(--height);
display: inline-flex; display: inline-flex;
} }
@ -1440,6 +1442,7 @@ img.calendar_print_appicon {
background-size: 20px; background-size: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
--width: var(--height);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch::part(base), #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch::part(base),
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"], #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
@ -1455,11 +1458,11 @@ et2-switch#calendar-toolbar_toolbar-weekend {
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span {
background-size: 20px; background-size: 20px;
height: 75%;
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label {
width: 100%; width: 100%;
height: 100%; height: 100%;
align-items: normal;
} }
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend { #calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {
min-width: 60px; min-width: 60px;
@ -1487,7 +1490,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
visibility: hidden; visibility: hidden;
} }
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid var(--sl-color-neutral-300); border: 1px solid var(--sl-color-neutral-300);
@ -2616,7 +2618,7 @@ div#calendar-container div.calendar {
} }
div#calendar-container div.calendar table { div#calendar-container div.calendar table {
background-color: #fafafa; background-color: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }
div#calendar-container div.calendar table thead .button { div#calendar-container div.calendar table thead .button {
background-color: #FFDD73; background-color: #FFDD73;