egroupware_official/pixelegg/css/fancy.less

/**
 * EGroupware: "fancy" theme
 *
 * @link https://www.egroupware.org
 * @license https://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package pixelegg
 */
@import "pixelegg.less";

// overwriting pixelegg.less and Shoelace themes
:root, :host, .sl-theme-light, .sl-theme-dark {
    --sl-border-radius-medium: 20px;
  --sl-border-radius-small: 1rem;
    --sl-input-border-radius-medium: var(--sl-border-radius-medium);
    --et2-button-image-padding-left: .6rem;
    --can-scroll: 1;

    et2-button:not(imageOnly) > et2-image[class*="circle"], et2-button:not(imageOnly) > et2-image[class*="clock"]{
        --et2-button-image-padding-left: .2rem;
    }

	et2-button:not([label])::part(base), et2-button-timestamp::part(base) {
	  --sl-input-border-color: transparent;
	}
	et2-vfs-select::part(base), et2-link-to::part(button_base) {
	  --sl-input-border-color: transparent;
	}

    et2-tabbox {
        --track-width: 0px;

        &::part(tabs) {
            padding-bottom: var(--sl-spacing-x-small);
            padding-top: var(--sl-spacing-large);
            gap: var(--sl-spacing-medium);
        }

        // left rounded box around the tab content to visually group it
        //scroll detection detect if scrollbar is available scroll detection only works in chromium not in Firefox or Safari
        // see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility
        &::part(body){
            animation: detect-scroll linear;
            animation-timeline: scroll(self);
            border: 1px solid var(--sl-color-neutral-300);
            border-radius: var(--sl-border-radius-medium);
            border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
            border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
            padding: var(--sl-spacing-medium);
        }

        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);
            }
        }

        .tabLabel {
            max-height: 1.1em;
        }

        .et2_toolbar input.et2_textbox, .nextmatch_header_row input.et2_textbox{
            border-radius: var(--sl-border-radius-pill);
        }
    }
}

.et2_required:not(.hasValue){
    background-color: initial;
}

.et2_toolbar {
  padding: 0;
  border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
}

// Nextmatch
.et2_nextmatch .nextmatch_header {
  border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);

  .nextmatch_header_row {
	padding-bottom: 0.25em;
  }
}

//rounded flatpickr
div.flatpickr-calendar {
    border-radius: var(--sl-border-radius-medium);
}

div.flatpickr-calendar .flatpickr-months {
    border-top-left-radius: var(--sl-border-radius-medium);
    border-top-right-radius: var(--sl-border-radius-medium);
}

div.flatpickr-calendar .shortcut-buttons-flatpickr-buttons button:first-child {
    border-bottom-left-radius: var(--sl-border-radius-medium);
}

div.flatpickr-calendar .shortcut-buttons-flatpickr-buttons button:last-child {
    border-bottom-right-radius: var(--sl-border-radius-medium);
}

.flatpickr-calendar > .flatpickr-time:first-child{
    border-top-left-radius: var(--sl-border-radius-medium);
    border-top-right-radius: var(--sl-border-radius-medium);
}

.flatpickr-calendar > .flatpickr-time:first-child .flatpickr-minute ~ span{
    margin-right: 1em;
}
//end rounded flatpickr


// styling of legacy NM parts
.nextmatch_header .header_count {
    border-radius: var(--sl-border-radius-medium);
}

//tabs header styling
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 {
    text-transform: none;
}

#egw_fw_header {
  #egw_divLogo img {
	margin-top: 2px;
	height: 41px;
  }
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header{
    gap:1em;
    padding-top: 5px;
  height: 37px;
  .egw_fw_ui_tab_header_active {
	border-bottom-width: 0px !important;
  }
}

#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 {
    display: none;
}

#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
    width: 40px !important;
    height: 28px !important;
    margin:  0;
    padding: 0;
    padding-top: .2em;
    padding-right:.5em;
    padding-left: .5em;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header{
    padding: 0;
}

#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active){
    border-top:0;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover{
    border-top:0;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button{
    background-size: 12px 12px;
    right: 0px;
    top: 2px
}


//sidebox

#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category{
    border-radius: var(--sl-border-radius-medium);

  .egw_fw_ui_category_content {
	border-width : 1px ;
	border-style: solid;
    border-radius: var(--sl-border-radius-medium);
	border-top: none;
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	overflow: hidden;
  }

   ul li {
	border-radius: var(--sl-border-radius-medium);
  }
}