/** * 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(../../api/templates/default/images/email.svg); } a.et2_url.phone { background-image: url(../../api/templates/default/images/phone.svg); } a.et2_url.url { background-image: url(../../api/templates/default/images/url.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(../../api/templates/default/images/close.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(../../api/templates/default/images/bullet.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(../../api/templates/default/images/previous.svg) !important; background-position: 0px 0px !important; background-size: contain; } .ui-datepicker .ui-datepicker-next span { background-image: url(../../api/templates/default/images/next.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("../../api/templates/default/images/delete.svg"); } .et2_file .progress p { background-color: @color_progress; } span.et2_file_span{ background-image: url(../../api/templates/default/images/attach.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(../../api/templates/default/images/arrow_down.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(../../api/templates/default/images/arrow_down.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("../../api/templates/default/images/delete.svg"); background-position: center; background-repeat: no-repeat; background-size: 12px 12px; padding: 0px; } } } .et2_vfs { td { div.delete { visibility: hidden; background-image: url("../../api/templates/default/images/delete.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; } }*/ /** * Validation */ .et2_required, [required]::part(base) { background-color: @egw_color_1_e; .border_radius (3px, 3px ,3px ,3px ); } /** * 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(../../api/templates/default/images/delete.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 { background-image: url(../../api/templates/default/images/favorites.svg); background-size: 12px 12px; background-position: 1px 0; margin-right: 9px; margin-left: 4px; } // Bulltpoints div.sideboxstar { width: 4px; height: 12px; margin-left: 5px; margin-right: 10px; background-image: url(../../api/templates/default/images/fav_filter.svg); background-size: 12px 12px; background-position: 0 0; background-repeat: no-repeat; } } // Aktuelle Ansicht als Favorit img {.dimension_width_height_xs; 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_xs;} } // 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(../../api/templates/default/images/arrow_up.svg); background-size: 8px 8px; } .nextmatch_sortheader.desc { font-weight: bold; background-image: url(../../api/templates/default/images/arrow_down.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("../../api/templates/default/images/minus.svg"); background-size: 50%; } .et2_taglist_toggle.et2_taglist_single.expanded > div.toggle { background-image: url("../../api/templates/default/images/plus.svg"); background-size: 50%; } .et2_taglist.et2_taglist_category {max-height: 30px !important;} /** * et2_toolbar */ .et2_toolbar { background: none; margin: 0 !important; padding: 0 !important; } .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;*/ } } div.ui-toolbar-menulist{ position: absolute; height: inherit; z-index: 999 !important; overflow: hidden !important; border: solid black 1px; padding: 0 !important; margin-top: 3px !important; } .ui-toolbar-menulist > h { padding-bottom: 7px; } .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(../../api/templates/default/images/edit.svg); } /*#################################### ET2 SEARCHBOX #####################################################*/ .et2_searchbox button.et2_button { background-image: url(../../api/templates/default/images/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) { } // // //