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

change styling of fancy theme tabbox to visualy group tab contents

Browse Source
This commit is contained in:
milan 2024-09-13 00:06:41 +02:00
parent 9d8224453e
commit eacb9e5494
2 changed files with 71 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pixelegg/css/fancy.css
View File

@ -7147,11 +7147,44 @@ img.et2_button_icon[src*="svg"]:hover {
.sl-theme-dark et2-tabbox { .sl-theme-dark et2-tabbox {
--track-width: 0px; --track-width: 0px;
} }
:root et2-tabbox::part(tabs),
:host et2-tabbox::part(tabs),
.sl-theme-light et2-tabbox::part(tabs),
.sl-theme-dark et2-tabbox::part(tabs) {
padding-bottom: var(--sl-spacing-large);
padding-top: var(--sl-spacing-x-large);
gap: var(--sl-spacing-large);
}
:root et2-tabbox et2-tab::part(base),
:host et2-tabbox et2-tab::part(base),
.sl-theme-light et2-tabbox et2-tab::part(base),
.sl-theme-dark et2-tabbox et2-tab::part(base) {
border: 1px solid;
border-color: var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-pill);
}
:root et2-tabbox et2-tab[active]::part(base), :root et2-tabbox et2-tab[active]::part(base),
:host et2-tabbox et2-tab[active]::part(base), :host et2-tabbox et2-tab[active]::part(base),
.sl-theme-light et2-tabbox et2-tab[active]::part(base), .sl-theme-light et2-tabbox et2-tab[active]::part(base),
.sl-theme-dark et2-tabbox et2-tab[active]::part(base) { .sl-theme-dark et2-tabbox et2-tab[active]::part(base) {
border: 1px solid; border-color: var(--sl-color-neutral-900);
}
:root et2-tabbox et2-tab-panel,
:host et2-tabbox et2-tab-panel,
.sl-theme-light et2-tabbox et2-tab-panel,
.sl-theme-dark et2-tabbox et2-tab-panel {
border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium);
padding: var(--sl-spacing-medium);
}
:root et2-tabbox .et2_toolbar input.et2_textbox,
:host et2-tabbox .et2_toolbar input.et2_textbox,
.sl-theme-light et2-tabbox .et2_toolbar input.et2_textbox,
.sl-theme-dark et2-tabbox .et2_toolbar input.et2_textbox,
:root et2-tabbox .nextmatch_header_row input.et2_textbox,
:host et2-tabbox .nextmatch_header_row input.et2_textbox,
.sl-theme-light et2-tabbox .nextmatch_header_row input.et2_textbox,
.sl-theme-dark et2-tabbox .nextmatch_header_row input.et2_textbox {
border-radius: var(--sl-border-radius-pill); border-radius: var(--sl-border-radius-pill);
} }
.nextmatch_header .header_count { .nextmatch_header .header_count {

50
pixelegg/css/fancy.less
View File

@ -9,23 +9,47 @@
// overwriting pixelegg.less and Shoelace themes // overwriting pixelegg.less and Shoelace themes
:root, :host, .sl-theme-light, .sl-theme-dark { :root, :host, .sl-theme-light, .sl-theme-dark {
--sl-border-radius-medium: 20px; --sl-border-radius-medium: 20px;
--sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-radius-medium: var(--sl-border-radius-medium);
--et2-button-image-padding-left: .3rem; --et2-button-image-padding-left: .3rem;
et2-tabbox { et2-tabbox {
--track-width: 0px; --track-width: 0px;
et2-tab[active] {
&::part(base) { &::part(tabs) {
border: 1px solid; padding-bottom: var(--sl-spacing-large);
border-radius: var(--sl-border-radius-pill); padding-top: var(--sl-spacing-x-large);
} gap: var(--sl-spacing-large);
} }
}
et2-tab {
&::part(base) {
border: 1px solid;
border-color: var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-pill);
}
}
et2-tab[active] {
&::part(base) {
border-color: var(--sl-color-neutral-900);
}
}
et2-tab-panel{
border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium);
padding: var(--sl-spacing-medium);
}
.et2_toolbar input.et2_textbox, .nextmatch_header_row input.et2_textbox{
border-radius: var(--sl-border-radius-pill);
}
}
} }
// styling of legacy NM parts // styling of legacy NM parts
.nextmatch_header .header_count { .nextmatch_header .header_count {
border-radius: var(--sl-border-radius-medium); border-radius: var(--sl-border-radius-medium);
} }