egroupware_official/pixelegg/less/etemplate2.less

/**
 * Styles for etemplate2 widgets
 * Überschreibt egroupware/etemplate/templates/default/etemplate2.css
 *
 * @version: 1
 * Stefan Reinhardt
 */

@import (reference) "./def_design_pattern_color_font_shadow.less";
@import (reference) "./def_buttons.less";
/*@import (less) "../../api/templates/default/etemplate2.css";*/


@media all {


/**
 * Top level
 */
.et2_container {
    padding: 0px;
    background-color: transparent;
}
.et2_container > div:not([class]) {
    height: 100%;
}


/**
 * Basic rules
 */

/**
 * img gray filter
 */

img.et2_appicon,
.et2_appicon img,
table.egwGridView_grid img.et2_appicon
{
    .img_filter_gray;

}

/**
 * VBox widget
 */
div.et2_vbox>* {
    display: block;
}

/**
 * HBox widget
 */
div.et2_hbox_right {
    background: transparent;
}







/**
 * Placeholder widget - used for un-implemented widgets
 */
.et2_placeholder {
    display: inline-block;
    /*border: 1px solid cornflowerblue;*/
    .border_normal;
    background-color: @gray_10;
}

.et2_placeholder .et2_attr {
    color: @gray_100;
}

/**
 * Label widget, and labels for other widgets
 */
.et2_label {
    color: @gray_90;
	white-space: pre-wrap;
}

/**
 * img Icons
 */
a.et2_url {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  cursor: pointer;
  margin: -4px;
  padding: 2px;
  padding-left: 16px;
  margin-left: -10px;
}
a.et2_url.email {
  background-image: url(../../node_modules/bootstrap-icons/icons/envelope.svg);
}
a.et2_url.phone {
  background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg);
}
a.et2_url.url {
  background-image: url(../../node_modules/bootstrap-icons/icons/link-45deg.svg);
}



/**
 * Button widget - text only, and icon
 */
.et2_button {
    text-shadow: 0px 0px !important;
    .Complete_Button_normal;
}


.et2_button_icon {
    .dimension_height_s;
	background-color: transparent;
}

/* give the image a button lock and feel*/
img.et2_button_icon[src*="svg"]{
    .gradient_vertical (@gray_30, @gray_30);
    &:hover {.gradient_vertical (@color_positive_action_active, @color_positive_action_active); .box_shadow_standard_light_hover;}
    &:active {.box_shadow_standard_light_inset;}
}

/*look in layout_content_elements*/
button.et2_button_text,
input[type=button] {}


.et2_selectbox .ui-multiselect-checkboxes li {

    &:hover {background-color: @color_selected_row !important;}
}

.et2_selectbox .ui-multiselect-checkboxes label {
    display: block;
    border: 0px solid transparent;
    padding: 0.1em 0.2em;

    //	&:hover {background-color: @egw_color_2_e;}
}

.et2_selectbox .ui-multiselect-checkboxes div.ui-icon-close{
    /*visibility: hidden;*/
    background-image: url(../../node_modules/bootstrap-icons/icons/x-square.svg);
    margin: -2px -3px;
    padding: 0px;
}
/**
 * Date / Time widgets
 */
span.et2_date input.et2_date {
    min-width: 21.5ex;
}
span.et2_date span {
    color: @gray_0;
}
span.et2_date_duration {
	border: 1px solid @gray_10;
}
span.et2_date_duration :not(input:first-child) {
	border-left: 1px solid @gray_5;
}

.ui-datepicker .ui-datepicker-buttonpane button[data-handler="today"] {
    background-image: url(../../node_modules/bootstrap-icons/icons/record.svg);
	background-color: transparent;
	background-size: contain;
	border: none;
	opacity: 1;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	&:hover{
		border: none;
		background-color: transparent;
	}
}
.ui-datepicker .ui-datepicker-prev span {
	background-image: url(../../node_modules/bootstrap-icons/icons/arrow-bar-left.svg) !important;
	background-position: 0px 0px !important;
	background-size: contain;
}
.ui-datepicker .ui-datepicker-next span {
	background-image: url(../../node_modules/bootstrap-icons/icons/arrow-bar-right.svg) !important;
	background-position: 0px 0px !important;
	background-size: contain;

	&:hover {
		border: none;
		background-color: transparent;
	}
}

.et2_file .progress li:hover div.remove {
    .dimension_width_height_s;
	background-image: url("../../node_modules/bootstrap-icons/icons/trash3.svg");
}

.et2_file .progress p {
    background-color: @color_progress;
}
span.et2_file_span{
	background-image: url(../../node_modules/bootstrap-icons/icons/paperclip.svg);
	.Complete_Button_save_apply_copy !important;
}
div.et2_file input.et2_file_upload{
	background-color: @gray_0 !important;
	.rounded (3px);
	&:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
}

/* Gantt widget */
.et2_gantt {
	.gantt_task_line {
		background-color: @egw_color_2_e;

		.gantt_task_content {
			color: @egw_color_2_c;
		}
		.gantt_selected {
			background-color: @color_active_row;
		}

		.gantt_task_progress {
			color: @egw_color_2_c;
			background-color: @color_progress;

			/* outline progress in a complementary color */
			border: 1px solid @egw_color_1_b;
			border-right: none;
			margin: -1px;

		}
	}
	.gantt_task_line.gantt_milestone {
		background-color: @egw_color_1;
		border-color: @egw_color_1_b;
	}
	.gantt_task_link
	{
		.gantt_line_wrapper div
		{
			background-color: green;
		}
		.gantt_link_arrow_left
		{
			border-right-color:  green;
		}
		.gantt_link_arrow_right
		{
			border-left-color:  green;
		}
		&:hover .gantt_line_wrapper div {
			box-shadow: 0 0 5px 0 green;
		}
	}

	.gantt_task_link.invalid_constraint {
		.gantt_line_wrapper div
		{
			background-color: @color_error;
		}
		.gantt_link_arrow_left
		{
			border-right-color:  @color_error;
		}
		.gantt_link_arrow_right
		{
			border-left-color:  @color_error;
		}
		&:hover .gantt_line_wrapper div
		{
			box-shadow: 0 0 5px 0 @color_error;
		}
	}
}

/*
        Link to / Selector Widget
*/
.et2_link_to.et2_toolbar {margin-top: 2px !important;}
.et2_link_to {
	.et2_link_entry {
		select, input, button {padding:0; padding-left:4px;}
		.ui-icon-close {
			background-color: transparent;
			left: 0px;
		}
		.ui-icon-triangle-1-s {
			background: #ffffff url(../../node_modules/bootstrap-icons/icons/caret-down-fill.svg) no-repeat center right;
		}
	}
	// BUTTON: make link button
	button:first-child {

	}
	// next line - left
	// et2_vfs_btn
	button.et2_vfs_btn {

	}
	.et2_file {
		span {
			background-position: center;
			background-size: 16px 16px;
			background-repeat: no-repeat;
			.rounded (3px);
		}
	}
}

.et2_link_entry {
	.ui-icon-triangle-1-s {
		background: #ffffff url(../../node_modules/bootstrap-icons/icons/caret-down-fill.svg) no-repeat center right;
		background-size: contain;
	}
}

.et2_link {
	color: @egw_color_2_a;
}
.et2_link_list {
	tr {
		cursor: pointer;
		&:hover {background-color: @color_hover_row;}
		 &:active {background-color: @color_active_row;}
	}

	.icon img {
		width: 14px !important;
		height: 14px !important;
	}

	td {
		div.delete {
			visibility: hidden;
			background-image: url("../../node_modules/bootstrap-icons/icons/trash3.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 12px 12px;
			padding: 0px;
		}
	}
}
.et2_vfs {
	td {
		div.delete {
			visibility: hidden;
			background-image: url("../../node_modules/bootstrap-icons/icons/trash3.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 12px 12px;
			padding: 0px;
		}
	}
}


.egw_tooltip
{
    background-color: @color_tooltip;
}



// defined in layout-dialog.less
/**
 * Tabs widget
 */

/*.et2_tabflag {
    margin: 1em 3px -1px 0;
    padding: 4px;
    .background_color_25_gray;
    .inner_shadow(1px, 0px, 0px, 0.5);
    -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:  1px 0px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    min-width: 73px;
   &:hover {
        .color_5_gray;
        .background_color_25_gray;
    }
    &:active{
        .background_color_0_gray;
        .color_0_gray;
    }
}


.et2_tabflag.active {
    border-spacing: 0px;
    background-color: white;
    .color_100_gray;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: @gray_70;
    &:hover {
        .color_100_gray;
        //			border: 1px solid gray;
        background-color: white;
    }
}

.et2_tabs {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: @gray_70;
    padding: 5px;
    overflow-y: auto;
    background-color: @gray_0;
    .border_radius_button_normal;
}*/

// defined in layout-dialog.less
/*.et2_tabheader {
    padding-left: 0em;
    border-bottom: 1px solid #bfbfbf;
    margin: 0 2px;
	background-image: none;
    :first-child {
        margin-left: 1px;
    }
}*/

/**
 * hrule widget
 */

hr {
    border-top: 1px solid @gray_10;
}

/**
 * grid widget
 */

.et2_grid th,
.et2_grid tr,
.et2_grid td{
    /*	border: 1px dashed silver;*/

    .gray {
        padding: 0px;
        .dimension_height_m;
        /*background-color: @color_hint;*/
        .gradient_thead;
        span.et2_label {background-color: transparent;padding-left: 3px;}
        }
}





/* ##################################################################################
 * Nextmatch widget
 *
 * SEARCH FIELD | SEARCH BUTTON ###### FILTER ##### EXPORT IMG ### FAVORITES ### COUNT
 *
 * ##################################################################################*/



div.header_row_right{

    //favoriten
    div[id$=favorite_wrapper]{margin-top: 0px;}

}


// AREA AROUND CONTENT
.et2_nextmatch {
    background-color: transparent;
	.egwGridView_outer {
		thead tr > th:first-child {
			border-left: 6px solid @gray_30;
		}
	}
}

// complete nextmatch....Background color!
.et2_nextmatch .nextmatch_header {
    padding: 0;
    border: none;
    background-image: none;
    background-color: transparent;
}

// ALL images
.et2_nextmatch > img {.dimension_width_height_s;}


// area width left and right boxes
.ui-helper-clearfix{}

/*################################################################
*
* Filters
*
################################################################*/
.nextmatch_header_row {
    .et2_label {

        // distance to label
        select { margin-left: 3px; border-color:@gray_20;}
    }
}


.nextmatch_header_row > .filters {

    /*width: 83%;*/
    z-index: 7;
    margin-bottom: 4px;
    top: 0px; // fix for stylite template
    padding: 0 5px 0 0;
    /*background-color: @gray_30;*/
    background: transparent;
    border: none !important;
    /*border-color: @gray_100;*/
    background-image: none !important;
    min-height: 37px;
    margin-left: 224px; // fix for stylite
    margin-right: 119px; // fix for stylite
/*    .border_radius (3px, 3px, 0px, 0px);*/

    select {margin-top: 10px;}

    .et2_label {
        padding: 0.2em;
        select {
            /*.Complete_Button_select;*/
            margin-left: 2px;
            margin-right: 1px;
            margin-top: 8px;
            width: 20%;
            max-width: 20% !important; // fix for stylite template
            &:hover{
                .Complete_Button_select_hover;
            }

            &:after {}

             /*Dialog - Addressbook - View */
              #infolog-index_cat_id,
              #infolog-index_filter {width: 50% !important;}
        }

    }
}


// Select -> Option
.nextmatch_header > .filters > select > option {.fontsize_normal;}

// Input Field
.nextmatch_header > .filters input {
    margin-right: 2ex;
    width: 15%;
    .Complete_Button_input;
    &:hover{ .Complete_Button_input_hover;   }
    &:focus{ .Complete_Button_input_focus;   }
}



/*################################################################
*
* Export Button
*
################################################################*/

.nextmatch_header .et2_button_icon {}

// Export Button
.nextmatch_header > .filters .et2_button_icon {
    margin-top: 8px;
    vertical-align: middle;
    .Complete_Button_Icon_normal;
    box-shadow: none;
    margin-right: 1em;
    .dimension_width_height_s;
    padding: 2px;

    &:hover{.Complete_Button_Icon_hover ;}
    &:active{.Complete_Button_Icon_active ;}

}

/*################################################################
*
* Kategorien
*
################################################################*/



/*div#admin-categories-index{

    padding: 0px;

    // save space above nextmatch
    // set height to zero
    div.ui-helper-clearfix { height: 0px;}
}*/

/*################################################################
*
* Favorites
*
################################################################*/

.nextmatch_header div[id$=favorite_wrapper] {

    .border_radius_button_normal;
    /*.background_color_25_gray;*/
    z-index: 200;
}

   /**
    * Drop down button
    */
    .et2_dropdown{

            position: relative;
            /*top: -5px;*/

            button {
                .dimension_height_m;
                display: inline-block;
                vertical-align: middle;
                margin-right: -2px;
                padding: 0px 1ex;
                background-color: @gray_0;
                background-image: none;
    //            width: 50px;

                // Filter img
                img{.dimension_width_height_xs;}

            }
            button > div {
                vertical-align: middle;
            }
            button:last-child {
                padding: 0px
            }
            + ul.ui-menu {
                position: absolute;
                z-index: 2;
            }

            /*left Button*/
            button.ui-corner-left,
            button.ui-state-default{
                background-image: none !important;
                background-repeat: no-repeat !important;
    //            background-size: 10px 10px;

                img {
                    .dimension_width_height_s;
                    text-align: left;
                    position: relative;
                    right: 1px;
                    top: 1px;
                    }

                 /*&:hover {.Complete_Button_save_apply_copy;}*/
                 &:active {background-color: @color_positive_action_active;}

            }


            /*right Button*/
            button.ui-corner-right {}

           /* hover */
            button.ui-state-hover { background-color: @gray_10; }

             button.ui-state-hover > img {}




    } // dropdown





// Favoriten
.sidebox-favorites {

	ul.favorites {
		width: 99%;
		padding: 0px;
		border: none;
		background: white;

		li.ui-menu-item {
			margin-left: 0px;
			min-height: 16px;
			padding: 3px 0px;
			margin-bottom: 0.2em;
			a {color:@gray_100;}
			&:hover {
				.color_100_gray;
				background-color: @color_hover_row;
				padding: 3px 0;
				a {
					text-decoration: none;
					color: @gray_100;
					.ui-icon-trash {
						background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
						background-size: 12px 12px;
						background-position: center 2px;
						margin-top: 0px;
					}
				}
			}

			// delete favourites
			&:first-of-type {
				a {color: @gray_100;}
			}

			// view as favourites
			&:last-of-type {
				a {color: @gray_100;}
			}

			a {
				line-height: inherit;
				padding: 2px 1px;
				// Heart
				div.ui-icon-heart {
				  width: 9px;
				  height: @mass_s;
				  background-image: url(../../node_modules/bootstrap-icons/icons/star-fill.svg);
				  background-size: @mass_s @mass_s;
				  background-position: 1px 0;
				  margin-right: 9px;
				  margin-left: 3px;
				}
				// Bulltpoints
				div.sideboxstar {
				  width: 9px;
				  height: @mass_s;
				  margin-left: 4px;
				  margin-right: 10px;
				  background-image: url(../../node_modules/bootstrap-icons/icons/star.svg);
				  background-size: @mass_s @mass_s;
				  background-position: 0 0;
				  background-repeat: no-repeat;
				}

			}
			// Aktuelle Ansicht als Favorit
			img {.dimension_width_height_s; margin-left: 5px;margin-right:10px;margin-top:-3px;}

		} // Ende li
		li.ui-menu-item.ui-state-highlight {
			.color_100_gray;
			background: @color_selected_row;
			padding: 3px 0;
			border: none;
		}
	}
} // sidebox-favorites

// Favorites in nextmatch Header
.favorites{

  img {
	.dimension_width_height_s;
  }

}


// Arrow up and down for sorting
.nextmatch_sortheader {
/*    background-position: right center;
    background-repeat: no-repeat;
    color: #003075;
    cursor: pointer;
    margin-right: 10px;*/
    padding-right: 18px;
}

.nextmatch_sortheader.asc {
    font-weight: bold;
    background-image: url(../../node_modules/bootstrap-icons/icons/caret-up-fill.svg);
    background-size: 8px 8px;
}

.nextmatch_sortheader.desc {
    font-weight: bold;
    background-image: url(../../node_modules/bootstrap-icons/icons/caret-down-fill.svg);
    background-size: 8px 8px;
}
/**
 * Grid / nextmatch Hierarchy
 */
/**
 * This class' margin-right is used to line up columns at each indent level
 * Classes level_# are created programmatically with margin-right * depth
 * Margin-right = -(indent + border)
 */
.indentation {
  margin-right: -15px;
}

/* End of hierarchy */

/* Mangled link-to widget inside a nextmatch - used for DnD uploads */
.et2_nextmatch * .et2_link_to {
    position: relative;
}

div.et2_progress > div {
    background-color: @color_progress;
    /*height: 5px;*/
}


/**
* et2_toolbar
*/
.ui-toolbar_dropShadow {
    min-height: 30px;
    border: dashed;
    border-width: 1px;
    border-color: gray;
    opacity:0.7;
}

/**
 * et2_textbox
 */
textarea.et2_textbox {
	border:1px solid @gray_10;
}
textarea,
textarea.description {
    .background_color_5_gray;
    padding: 0.3em 0 0 0.3em;
    border: none;
	height: auto;
}

/**
* et2_taglist
*/
.et2_taglist_toggle > div.toggle {
	background-image: url("../../node_modules/bootstrap-icons/icons/dash-lg.svg");
	background-size: 50%;
}
.et2_taglist_toggle.et2_taglist_single.expanded > div.toggle {
	background-image: url("../../node_modules/bootstrap-icons/icons/plus-lg.svg");
	background-size: 50%;
}
.et2_taglist.et2_taglist_category {max-height: 30px !important;}

/**
* et2_toolbar
*/
.et2_toolbar {
	background: none;
}
.et2_toolbar-dropdown {

    button {
            /*        height: 100% !important;
                    border: none !important;
                    background: #E0E0E0 !important;
                    background-color: #E0E0E0 !important;
                    border-radius: 0 !important;
                    color: #101010 !important;
                    font-size: 9pt !important;
                    font-weight: normal !important;
                    vertical-align: bottom !important;
                    padding: 1px !important;
                    margin: 2px !important;
                    min-height: 19px;*/
            }

}

.ui-toolbar-menulistHeader{
	font-size: xx-small;
	height:100%;
	margin-top: 1px;
	direction: ltr;
}
.et2_toolbar_more{
	float:right;
}
.et2_toolbar_actionlist{
	float:left;
}

.splitter-bar {
	.ui-icon.ui-icon-grip-solid-vertical {
		background-image: url(../../api/templates/default/images/splitter_vert.png);
		background-position: center;
		background-repeat: no-repeat;
	}
	.ui-icon.ui-icon-grip-solid-horizontal {
		background-image: url(../../api/templates/default/images/splitter_horz.png);
		background-position:  center;
		background-repeat: no-repeat;
	}
}
.splitter-bar.ui-state-hover {background: none;}

/**
 * Do not wrap content of a single widget incl. a label or children of a hbox.
 * Taking into eg. select-account widget rendered as ul and prefixed with a label
 * and maintaining some space between widgets.
 */
.et2_nowrap{
	white-space: nowrap;
}
ul.et2_nowrap, div.et2_nowrap{
	display: inline-block;
}
.et2_nowrap > *{
	padding-left: 5px;
}
.et2_nowrap > *:first-child{
	padding-left: 0;
}
.et2_nowrap > label > *{
	padding-left: 5px;
}

.et2_vfsPath input.et2_textbox.et2_vfs {
    background-image: url(../../node_modules/bootstrap-icons/icons/pencil-square.svg);
}

/*#################################### ET2 SEARCHBOX #####################################################*/
.et2_searchbox button.et2_button {
	background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
	background-size: 20px 20px;
	background-position: center;
}

/*#################################### ET2 SLIDESWITCH #####################################################*/
span.et2_checkbox_slideSwitch:hover {
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
	border: 1px solid gray;
	cursor: pointer;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container {background-color: #fafafa;}
.et2_toolbar {
	span.et2_checkbox_slideSwitch {
		filter: grayscale(1) contrast(0.9999) opacity(0.7);
	}
	span.et2_checkbox_slideSwitch.switchOn {filter:none;}
}

} // Ende Media all

/*#################################### Media Queries #####################################################*/

@media only screen and (min-width: 980px) and (max-width: 1279px) {

    .nextmatch_header > .filters select {  margin: 0px;}

}

@media only screen and (min-width: 760px) and (max-width: 979px) {

}

@media only screen and (min-width: 320px)  and (max-width: 759px) {

}

//
//
//