/** * EGroupware - CSS Styles used by eTemplate2 widgets * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @link http://www.egroupware.org * @author Ralf Becker * @author Stefan Reinhard * @package etemplate * @version $Id$ */ @import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; @import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; /** * Top level */ .et2_container { /*margin: 10px; border: 1px solid gray;*/ padding: 0px; background-color: transparent; height: 100%; } .et2_container > div:not([class]) { height: 100%; } /** * Basic rules */ input,button,select { margin: 1px; padding: 0px; } /** * VBox widget */ div.et2_vbox>* { display: block; } /** * HBox widget */ div.et2_hbox div.et2_hbox { display: inline; } div.et2_hbox { white-space: nowrap; } div.et2_hbox>* { text-align: left; } div.et2_hbox_left { float: left; } div.et2_hbox_al_center { text-align: center; } div.et2_hbox_al_right { text-align: right; } div.et2_hbox_right { float: right; clear: right; } div.et2_hbox>div { display: inline-block; } /** * Placeholder widget - used for un-implemented widgets */ .et2_placeholder { display: inline-block; border: 1px solid cornflowerblue; background-color: #FCFCFC; padding: 3px; margin: 1px; } .et2_placeholder .et2_caption { display: block; font-size: 8pt; margin: 0 0 5px 0; font-weight: bold; color: #2E2E2E; cursor: pointer; text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; } .et2_placeholder .et2_attr { display: block; font-size: 8pt; color: #3030A0; margin: 2px 0 2px 0; } /** * Splitter widget - split pane */ .et2_split { width: 100%; min-width: 100px; min-height: 100px; } .splitter-bar-vertical { cursor: ew-resize; width: 5px;} .splitter-bar-horizontal { cursor: ns-resize; height: 5px;} /* Hide iframes so moving works */ .splitter-iframe-hide { display: none;} .et2_split div.splitter-bar-vertical div.ui-icon { position: absolute; margin-left: -5px; top: 45%; } .et2_split div.splitter-bar-horizontal div.ui-icon { position: absolute; margin-top: -6px; left: 47%; } /* Make sure there's no overflow, or hidden bits still appear */ * > .et2_split { overflow: hidden; } /** * Label widget, and labels for other widgets */ .et2_label { color: #101050; } #msg,.message { color: red; font-style: italic; } input.et2_url { margin-right: 6px; padding-right: 8px; } a.et2_url { background-position: center; background-repeat: no-repeat; cursor: pointer; margin: -4px; padding: 2px; padding-left: 16px; margin-left: -10px; } a.et2_url.email { background-image: url(images/email.png); } a.et2_url.phone { background-image: url(images/phone.png); } a.et2_url.url { background-image: url(images/url.png); } /** * Button widget - text only, and icon */ .et2_button { cursor: pointer; text-align: center; font-size: 9pt; text-shadow: 1px 1px #E0E0E0; } // in Nextmatch definiert //.et2_button_text, input[type=button] { // background-color: #E0E0E0; // background-image: url(images/gradient01.png); // background-position: center; // background-repeat: repeat-x; // // margin: 5px; // padding: 3px; // // border: 1px solid silver; // color: #101010; //} .et2_button_icon { border: none; background: transparent; padding: 2px; } button.et2_button_text:hover, input[type=button]:hover { color: #050505; border: 1px solid gray; background-color: #D0D0EE; } button.et2_button_text:active, input[type=button]:active { background-image: url(images/gradient02.png); background-color: #D0D0E0; } button.et2_button_text:focus, input[type=button]:focus { border: 1px solid #2c3d6f; color: #202d52; outline: none; } /** * Drop down button */ .et2_dropdown button { height: 3.0ex; display: inline-block; vertical-align: middle; margin-right: -2px; padding: 0px 1ex; } .et2_dropdown button > div { vertical-align: middle; } .et2_dropdown button:last-child { padding: 0px } .et2_dropdown + ul.ui-menu { position: absolute; z-index: 2; } /** * Color picker widget */ .et2_color { padding: .5ex; height: 2ex; width: 2ex; border: 1px solid silver; } /** * Text box */ .et2_textbox { resize: none; } .et2_textbox_ro { white-space: pre-wrap; } .et2_bold { font-weight: bold; } .et2_italic { font-style: italic; } /** * Multi-select widget */ .et2_selectbox .ui-widget-header { padding: 0px 6px 0px 10px; text-align: center; } .et2_selectbox .ui-widget-header ul { float: left; margin-left: -5px; text-align: left; } .et2_selectbox .ui-widget-header li { float: left; padding-top: 0px } .et2_selectbox .ui-widget-header li>span.ui-icon { float: left; margin-top: -2px; } .et2_selectbox .ui-widget-header li>div.et2_link_entry { /* Shrink search box to same size as header */ margin-top: -2px; margin-bottom: -2px; margin-right: 1ex; } .et2_selectbox .ui-widget-header li>div.et2_link_entry input { height: 14px; } .et2_selectbox .ui-multiselect-checkboxes { overflow-y: scroll; position: relative; text-align: left; } .et2_selectbox .ui-multiselect-checkboxes li { margin: 0px; clear: both; // padding-left: 26px; // padding-right: 3px; text-decoration: none; list-style-image: none; list-style-type: none; // text-indent: -26px; // max-width: 85%; // &:hover {background-color: @egw_color_2_e;} } .et2_selectbox .ui-multiselect-checkboxes ul { margin: 0px auto; padding-left: 0px; clear:both; text-decoration: none; list-style-image: none; list-style-type: none; } .et2_selectbox .ui-multiselect-checkboxes ul>label { border-bottom: 1px solid black; } .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 input[type="checkbox"] { margin: 3px; } .et2_selectbox .ui-multiselect-checkboxes img { float: right; height: 1.8em; } .et2_selectbox .ui-multiselect-checkboxes div.ui-icon-close { visibility: hidden; padding: 0px; } .et2_selectbox .ui-multiselect-checkboxes li:hover div.ui-icon-close { visibility: visible; } /* Read-only multi-select */ ul.et2_selectbox { margin: 0px; padding: 0px; } .et2_selectbox li { text-decoration: none; list-style-image: none; list-style-type: none; } /** * Select account dialog */ /** * Date / Time widgets */ span.et2_date { min-width: 130px; } span.et2_date input.et2_date { min-width: 21.5ex; background-repeat: no-repeat; background-position: top right; background-size: contain; } span.et2_date input.et2_time { min-width: 6ex; } span.et2_date span { background-position: center; background-repeat: no-repeat; color: #101010; cursor: pointer; padding-top: 3px; padding-left: 22px; text-align: center; font-size: 9pt; } /** * Dialog widget * It uses jQueryUI, so this is just our little bits - icon on left */ .ui-dialog-content .dialog_icon { margin-right: 2ex; vertical-align: middle; } .ui-dialog-content { vertical-align: middle; } /* These change button alignment, but it seems the standard is right-aligned for action buttons, left aligned for "extra" controls .ui-dialog .ui-dialog-buttonpane { text-align: left; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog .ui-dialog-buttonpane button { float: none; } */ /** * Diff widget */ .diff thead,.author { display: none; } .diff .ui-icon { margin-top: -16px; float: right; } /** Display a loading icon **/ .loading { background-position: center; background-repeat: no-repeat; background-image: url('images/ajax-loader.gif'); } /** * File upload */ .et2_file .progress { width: 300px; max-height: 6em; overflow: auto; margin-left: 20px; } .et2_file .progress span.progressBar { height: 5px; width: 150px; max-width: 150px; display: inline; } /* Remove icon displayed when hovering */ .et2_file .progress li div.remove { display: none; cursor: pointer; margin: 0px; } .et2_file .progress li:hover div.remove { width: 16px; height: 16px; float: right; display: block; background-image: url("images/close.png"); background-position: center; background-repeat: no-repeat; } .et2_file .progress p { background-color: green; height:5px; margin: 0px; } .et2_file .progress li { } /* Hide progress bar when completed */ .et2_file .progress li.success > span.progressBar { display: none; } /** * Autocomplete - used in link widget * Restricting result size */ .ui-autocomplete { max-height: 20ex; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; } /** * Autocomplete in dialogs - fix so they go over/out of the dialog */ .ui-dialog * ul.ui-autocomplete { position: fixed; } /** * Link wiget(s) */ /* Link entry - x button*/ div.et2_link_entry { white-space: nowrap; } div.et2_link_entry:after { display: inline-block; content: "."; height: 0; visibility: hidden; margin: -20px; } /* Special layout for inside nm grid */ .et2_nextmatch div.et2_link_entry { padding-right: 4px; } .et2_nextmatch .et2_link_entry:after { margin: -12px; } div.et2_link_entry select { width: 39%; } div.et2_link_entry input.ui-autocomplete-input { width: 61%; padding-bottom: 1px; } .et2_link_entry.no_app input.ui-autocomplete-input { width: 100%; } .et2_link_entry.no_app select { display: none; } .et2_link_entry .ui-icon-close { display: inline-block; background-color: inherit; border: none; position: relative; top: 3px; left: -18px; cursor: pointer; margin-top: -3px; } /* Link to */ .et2_link_to { width: 350px; overflow-x: visible; } .et2_link_to button { display: inline; float: right; height: 5ex; } .et2_link_to span.status { background-repeat: no-repeat; background-position: 3px center; width: 22px; height: 22px; display: block; float: right; } .et2_link_to span.status.success { background-image:url(images/tick.png); } .et2_link_to span.status.error { background-image:url(images/error.png); } .et2_link_to .progress { max-height: 12em; overflow-y: scroll; } .et2_link_to .progress > .success input { width: 100%; margin-right: -20px; /* Leave room for remove icon */ } .et2_link_to .progress li { list-style: none; padding-bottom: 1px; padding-top: 0px; } .et2_link_to .progress li.success span.ui-icon-comment { display: none; float: right; cursor: pointer; margin-right: 5px; } .et2_link_to .progress li:hover.success span.ui-icon-comment { display: inline; } .et2_link_to .et2_button_icon { float: left; width: 22px; } .et2_link { cursor: pointer; color: #003075; text-decoration: none; } .et2_link:hover { text-decoration: underline; } ul.et2_link_string { list-style-type: none; display: inline; padding: 0px; } .et2_link_string li { display: inline; } .et2_link_string li:not(:last-child):after { content: ', '; } .et2_link_list { border-collapse:collapse; } .et2_link_list tr { cursor: pointer; } .et2_link_list td.remark { font-style: italic; } .et2_link_list td div.delete { visibility: hidden; background-image: url("images/close.png"); background-position: center; background-repeat: no-repeat; padding: 0px; } .et2_link_list .icon img, .et2_link_list .icon { width: 16px; height: 16px; display: inline-block; } .et2_link_list tr:hover div.delete { visibility: visible; } .egw_tooltip { position: fixed; border: 1px solid #897f51; padding: 3px; background-color: #FDF9DB; max-width: 300px; color: black; } /** * Tabs widget */ .et2_tabflag { display: inline-block; margin: 1em 3px -1px 0; padding: 4px; cursor: pointer; .border-radius(3px,0,0,3px); // .bordered (@egw_color_2_c, @egw_color_2_c, #bfbfbf, @egw_color_2_c); .background-color-25-gray; // .border_radius_button_normal; // .border_normal; -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; &:hover { .color-5-gray; // border: 1px solid gray; .background-color-25-gray; } &:active{ .background-color-0-gray; // border-width: 3px 1px 0px 0; // border-style: solid; // border-spacing: 0px; // border-color: @active_button_border_bottom; .color-0-gray; } } .et2_tabflag.active { // .background-color-50-gray !important; // border-width: 8px 7px 0px 6px; // border-style: solid; border-spacing: 0px; // border-color: @active_button_border_bottom; // .color-0-gray; background-color: white; .color-100-gray; border-width: 1px 1px 0px 1px; border-style: solid; .border-color-25-gray; &:hover { .color-100-gray; // border: 1px solid gray; background-color: white; } } .et2_tabs { border-width: 0px 1px 1px 1px; border-style: solid; .border-color-25-gray; padding: 5px; overflow-y: auto; .background-color-dialog-container; .border_radius_button_normal; } .et2_tabheader { .background-color-25-gray; background-position: bottom; background-repeat: repeat-x; padding-left: 0em; border-bottom: 1px solid #bfbfbf; margin: 0 2px; :first-child { margin-left: 0.3em; } } /** * VFS widget(s) */ ul.et2_vfs { padding-left: 0px; margin: 1px; } .et2_vfs li.vfsFilename { display: inline; } .et2_vfs li.vfsFilename:not(:last-child):after { padding: 0.25ex; } /** * Validation */ [required] { background-color: @egw_color_1_a; input{ // border-color: #FFFFD0; } } .invalid { border: 1px solid #a6261d; background-color: #faecec; } .error { -moz-border-radius: 0 4px 4px 0; -moz-box-shadow: 0 0 6px #DDDDDD; background-color: #FFFE36; border: 1px solid #E1E16D; color: #000000; display: none; font-size: 11px; height: 15px; padding: 4px 10px; } .error p { margin: 0; } /** * hrule widget */ hr { border-style: none; border-top: 1px solid silver; height: 1px; margin: 10px 0px 10px 0px; } /** * grid widget */ table.et2_grid { border-collapse: collapse; } .et2_grid td { /* border: 1px dashed silver;*/ } /** * Sortable grid */ table.et2_grid tbody.ui-sortable > tr:not(.th) { cursor: ns-resize; } /** * Create some spacing for widgets inside labels */ label input, label span, label div, label select, label textarea { margin-left: 1ex; margin-right: 1ex; } /** * Message styles */ /* Style used for a generic message (such as success messages or validation errors) */ div.message { display: block; border: 1px solid gray; padding: 3px 3px 3px 22px; margin: 5px 0px 5px 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-repeat: no-repeat; background-position: 3px center; clear: left; max-width: 500px; } div.message.floating { display: inline-block; margin: 0px 5px 0px 5px; } .message.validation_error { color: #a93030; font-style: italic; background-color: #f3d4d0; border-color: #a93030; background-image:url(images/error.png); background-repeat: no-repeat; padding-left: 20px; } .message.success { font-style: normal; background-color: #e5f3d0; color: #98a930; border-color: #9ea930; background-image:url(images/tick.png); background-repeat: no-repeat; padding-left: 20px; } .message.hint { font-style: normal; background-color: #d9e2ed; border-color: #56729a; color: #56729a; background-image:url(images/hint.png); background-repeat: no-repeat; padding-left: 20px; } /** * Nextmatch widget */ .et2_nextmatch { /* background-color: silver;*/ } /* Left & right headers*/ .et2_nextmatch > div > .header { margin-top: -20px; border: none; } .nextmatch_header .header_count { padding: 0px 20px; margin: 6px 20px 0px; border: 1px solid #E0E0E0; float:right; font-size: 150%; text-align: center } .nextmatch_header > .filters { padding-left: 5px; } .nextmatch_header > .filters select { margin-right: 2ex; } .nextmatch_header .et2_button_icon { vertical-align: middle; } .nextmatch_header > .filters .et2_button_icon { margin-top: 8px; } .et2_nextmatch .nextmatch_header { border: none; background-image: none; // background-color: transparent; margin-bottom: 3px; // margin-right: 3px; } .et2_nextmatch .nextmatch_header > .filters { border: 1px solid silver; background-color: #E0E0E0; background-image: url(../../../phpgwapi/templates/default/images/egw_action/header_overlay.png); background-position: center; background-repeat: repeat-x; margin-bottom: 3px; } /* Favorites */ .nextmatch_header div[id$=favorite_wrapper] { margin-top: 6px; vertical-align: middle; } #nm_favorites_popup_filters .filter_id, #nm_favorites_popup_filters .filter_value { width: 45%; display: inline-block; } .nextmatch_header ul.favorites { min-width: 20ex; } .nextmatch_header .favorites li .ui-menu .ui-menu-item a { text-indent: -22px; margin-left: 21px; } .nextmatch_header .favorites.ui-menu li.ui-menu-item a.ui-state-hover { margin-left: 20px; } // Favoriten .favorites { li { &:hover { div.ui-icon { display:inline-block; } } span.ui-state-active { border: none; } } input {margin-right: 1ex;} img { margin-right: 1ex; height: 16px; width: 16px; } div.ui-icon-trash { position: relative; float:right; display:none; } // .sideboxstar { // height: 9px; // display: inline-block; // padding: 0px 4px; // margin: 0px 5px; // // /* TODO: This is template specific */ // background-image: url(../../../phpgwapi/templates/idots/images/orange-ball.png); // } } // Favoriten // sidebox-favorites .sidebox-favorites { ul.favorites { width: 99%; padding: 0px; border: none; background: white; li { padding-left: 0 !important; margin-left: -10px; line-height: 1.5em; img { margin-right: 1ex; height: 13px; padding: 3px; .Complete_Button_Icon_normal; &:hover {height: 16px; .Complete_Button_Icon_hover ;} } img.sideboxstar { margin-right: 1ex; height: 16px; .Complete_Button_Icon_normal; &:hover {height: 16px; .Complete_Button_Icon_hover ;} } } } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { .bordered(1px, 1px, 1px,1px); .border-color-10-gray; background: transparent !important; font-weight: bold; .color-100-gray; } .ui-menu-icons { .ui-menu-item { a { position: relative; padding-left: 1em; padding: 0.5em 1em 0.5em 0; &:hover {.Complete_Button_Icon_hover ;} } } } ui-menu { .ui-menu-item { a { line-height: inherit; padding: 2px 0px; padding-left: 0 !important; &:hover {text-decoration: underline; .Complete_Button_Icon_hover ;} img { height: 16px; width: 16px;} } } } div.ui-icon-heart{ position: relative; float: left; display:inline-block; margin: -3px 1px 0px 1px; } div.ui-icon-trash{ margin-top: -5px; // margin-right: 2px; // background: transparent; background-image:url(images/delete.png); background-size: 16px 16px; background-position: 0 0; background-color: #e6e6e6; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5); box-shadow: 1px 1px 1px rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-right: 0.5em; padding: 0px 2px 0 2px; width: 10px; } } // sidebox-favorites .nextmatch_sortheader { color: #003075; cursor: pointer; padding-right: 10px; margin-right: 10px; background-repeat: no-repeat; background-position: right center; } .nextmatch_sortheader:hover { text-decoration: underline; } .nextmatch_sortheader.asc { font-weight: bold; background-image: url(images/up.png); } .nextmatch_sortheader.desc { font-weight: bold; background-image: url(images/down.png); } .nextmatch_resize_helper { border-right: 1px dotted gray; min-height: 100%; background-color: gray; opacity: 0.5; } /** * Grid / nextmatch Hierarchy */ /* Make sure arrow & cell content don't overlap */ .egwGridView_grid span.arrow { margin: 6px -12px 4px 4px; float: left; position:relative; } .egwGridView_grid span.arrow ~ div.innerContainer { display: inline-block; } /* Indent the sub-grid */ .egwGridView_grid .egwGridView_grid { margin-left: 10px; border-left: 1px solid silver; } /** * 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:-11px; } /* End of hierarchy */ /* Mangled link-to widget inside a nextmatch - used for DnD uploads */ .et2_nextmatch * .et2_link_to { position: fixed; left: 0px; background-color: white; border: 1px gray; padding: 5px; } .et2_clickable { cursor: pointer; } /** * et2_portlet */ div.et2_portlet { min-width: 100px; } .et2_portlet .ui-widget-header { margin: 0em; padding-bottom: 4px; padding-left: 0.2em; } .et2_portlet .ui-widget-header span.ui-icon { display: inline-block; float: right; } .et2_portlet .ui-widget-header span.ui-icon.ui-icon-gear { display: inline-block; float: left; } /** * et2_progress */ div.et2_progress { display: inline-block; border: 1px solid black; background-color: white; width: 30px; padding: 1px; margin: 2px; text-align: left; } div.et2_progress > div { background-color: #D00000; height: 5px; } .egwResizeOverlay { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 99999; cursor: ew-resize; } .egwResizeHelper { position: absolute; display: block; z-index: 99998; opacity: 0.5; background-color: #829cbc; cursor: ew-resize; } /** * Indent grid sublevels */ .et2_nextmatch .subentry.level_1 div.et2_vbox { margin-left: 2.5em; } .et2_nextmatch .subentry.level_2 div.et2_vbox { margin-left: 5em; } .et2_nextmatch .subentry.level_3 div.et2_vbox { margin-left: 7.5em; } /** * itempicker widget */ .et2_itempicker { display: block; position: relative; margin: 0; padding: 0; width: 100%; height: 256px; } .et2_itempicker_left { display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 50px; overflow: hidden; } .et2_itempicker_right { display: block; position: absolute; margin: 0; top: 0; left: 49px; right: 0; bottom: 0; border: 1px solid #b6b6b6; background-color: #f9f9f9; } .et2_itempicker_right_container { display: block; position: relative; width: 100%; height: 100%; } .et2_itempicker_app_select { list-style-type: none; padding: 0; } .et2_itempicker_app_select li { display: block; margin: 0; padding: 6px; } .et2_itempicker_app_select li.selected { border: 1px solid #b6b6b6; border-right: 1px solid transparent; background-color: #f9f9f9; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .et2_itempicker_search { display: inline-block; margin: 1em; margin-bottom: 0; margin-right: 0; width: 67%; padding: 0.2em; } .et2_itempicker_clear { position: relative; top: 3px; left: -20px; } .et2_itempicker_button_action { position: absolute; margin: 1em; top: 0; right: 0; } .et2_itempicker_itemlist { display: block; border: 1px solid #b6b6b6; margin: 1em; margin-bottom: 0; padding: 0; height: 67%; background-color: #ffffff; overflow: auto; } .et2_itempicker_itemlist ul { margin: 0; padding: 0; list-style-type: none; } .et2_itempicker_itemlist li { display: block; margin: 0; padding: 4px; color: #284d8a; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .et2_itempicker_itemlist li.row_on { background-color: #f2f9fe; } .et2_itempicker_itemlist li.selected { color: #ffffff; background-color: #3875d7; } /** * et2_dialog: EGroupware left aligns all buttons, but [Delete] */ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: left; } div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { float: left; margin-right: 1em; } .et2_prompt #message { white-space: pre-wrap; padding-bottom: 10px; } .et2_prompt #value { width: 100%; } /** * et2_taglist */ .ms-ctn,.ms-res-ctn { /* It doesn't really work smaller than this */ min-width: 150px; } .ms-ctn .loading { position: relative; margin: 0px auto -16px auto; top: 5px; } .ms-res-ctn { overflow-x: hidden; }