/** * Styles for etemplate2 widgets * * @version: $Id$ */ /** * Magic suggest / tag list widget */ /* These imports processed by framework */ /*@import url("../../../phpgwapi/js/jquery/magicsuggest/magicsuggest.css");*/ /*@import url("../../../phpgwapi/js/jquery/blueimp/css/blueimp-gallery.min.css");*/ /** * Top level */ .et2_container { /*margin: 10px; border: 1px solid gray;*/ padding: 0px; background-color: white; height: 99%; } .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; white-space: normal; padding-right: 5px; display: inline-block; } div.et2_hbox > *:empty { padding-right: 0; } 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; } /* These need to be applied to tame the sizing before printing */ .et2_split.print, .et2_split.print > .splitter-pane { height: auto !important; width: auto !important; } .et2_split.print > * { position: relative !important; } /** * Label widget, and labels for other widgets */ .et2_label { color: #101050; white-space: pre-wrap; } #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); } .et2_url_email_contactPlus >img { width: 16px; height: 16px; } .et2_email_popup { border:0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; } /** * Button widget - text only, and icon */ .et2_button { text-align: center; font-size: 9pt; text-shadow: 1px 1px #E0E0E0; white-space: nowrap; } .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-color: transparent; padding: 0px; } button.et2_button_text:hover, .et2_file_spanHover, span.et2_button_text:hover, input[type=button]:hover { color: #050505; border: 1px solid gray; background-color: #D0D0EE; } button.et2_button_text:active, span.et2_button_text:active, input[type=button]:active { background-image: url(images/gradient02.png); background-color: #D0D0E0; } button.et2_button_text:focus, span.et2_button_text:focus, .et2_file_spanActive, input[type=button]:focus { border: 1px solid #2c3d6f; color: #202d52; outline: none; } button.et2_button_with_image { padding-left: 20px; background-repeat: no-repeat; background-position: 4px center; background-size: 16px; height: 24px; } /* et2_box_widget ###*/ button[id="cancel"], button#cancel { padding-left: 6px; background-repeat: no-repeat; background-position: left; } .ui-dialog-buttonset button { padding-left: 6px !important; background-position: left !important; background-repeat: no-repeat !important; } /** * 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 { height: auto; } .et2_textbox_ro { white-space: pre-wrap; } /*Switch of FF red border validation*/ .et2_textbox:invalid{ box-shadow: none; } .et2_bold { font-weight: bold; } .et2_italic { font-style: italic; } /** * Multi-select widget */ button.et2_selectbox_expand { width: 16px; display: inline-block; } .et2_selectbox .ui-widget-header { padding: 0px 6px 0px 6px; 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 label:hover{ font-weight: normal; } .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: -20px; } .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: 1px solid transparent; } .et2_selectbox input[type="checkbox"] { margin: 3px; } .et2_selectbox .ui-multiselect-checkboxes img, .et2_selectbox .ui-multiselect-checkboxes div { float: right; height: 1.8em; width: 1.8em; background-size: contain; background-repeat: no-repeat; } .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; display: inline-block; } /* padding between selectbox/textbox and it's label */ label.et2_label > .et2_selectbox, label.et2_label > .et2_textbox, label.et2_label > .et2_textbox_ro { padding-left: 5px; } label.et2_label_empty > .et2_textbox_ro{ padding-left: 0; } .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: 16.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; } span.et2_date_duration input.et2_date_duration{ width: 5em; } /** * 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; } .ui-dialog-content > div { white-space: pre-wrap; display: inline-block; 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; } */ /** * Custom field list */ .et2_customfield_list { width: 100%; } .et2_customfield_list input, .et2_customfield_list textarea { max-width: 100ex; } /* Custom field list inside nextmatch rows gets an icon for each row */ .et2_nextmatch .egwGridView_grid .et2_customfield_list > tbody > tr { background-image: url('images/hint.png'); background-repeat: no-repeat; background-size: 1em; } .et2_nextmatch .egwGridView_grid .et2_customfield_list > tbody > tr > td:first-child { padding-left: 1.2em; } /*stops a tags inside next match extends to their parents width, which caused click on free space infront of a tag stops nm row selection*/ .et2_nextmatch .egwGridView_grid tr td div.et2_vbox a { display: table-row; } /* These are set via javascript before printing to help tame nextmatch's layout for printing */ .et2_nextmatch.print .egwGridView_scrollarea { width: auto !important; } .et2_nextmatch.print > div { height: auto !important; } .et2_nextmatch.print { /* This is fairly arbitrary, but makes it fit in Chrome and Firefox*/ max-width: 700pt !important; } /** * 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 */ div.et2_file { display: inline-block; position: relative; vertical-align: middle; margin-left: 8px; margin-top: 0; } .et2_file .progress_dropDown_fileList { background: white; position: absolute; border: 1px solid gray; border-top: 0; margin-top: 6px !important; margin-left: 0 !important; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; max-height: 300px; width: 181px !important; z-index: 201 !important; box-shadow: 6px 6px 9px gray; } .et2_file .progress_dropDown_fileList > li { border-bottom: 1px solid lightgray; } .et2_file .totalProgress_loader { background-repeat: no-repeat; background-image: url('images/ajax-loader.gif'); } .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: inline; cursor: pointer; margin: 0px; width: 16px; height: 16px; padding: 0; border-radius: 0; } .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; width: 0px; } /* Hide progress bar when completed */ .et2_file .progress li.success > span.progressBar { display: none; } /* Customize file upload styling */ span.et2_file_span{ display: block; background-position: 2px; background-image: url(../../../phpgwapi/templates/default/images/upload.png); background-repeat: no-repeat; background-size: 16px; cursor: pointer; height: 15px; text-align: left; text-indent: 18px; white-space: nowrap; margin-top:0; } div.et2_file input.et2_file_upload{ position: absolute; top: 4px; cursor: pointer; width: 98%; opacity: 0; } /** * 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 { width: 99%; 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: 40%; margin-right: 10px; } div.et2_link_entry input.ui-autocomplete-input { width: 40%; 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: -26px; cursor: pointer; margin-top: -3px; } /* Link to */ .et2_link_to { overflow-x: visible; } .et2_link_to button { display: inline; float: right; } .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: auto; } .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_to button.et2_vfs_btn{ float: left; margin: 0; text-align: left; height: 24px !important; padding-left: 30px !important; background-repeat: no-repeat; background-position: 4px center; background-size: 20px auto; width: 35%; } .et2_link_to div.et2_file{ display: inline-block; position: relative; vertical-align: middle; width: 37%; margin-left: 8px; margin-top: 0; } .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; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: normal; } .et2_link_list tr { cursor: pointer; } .et2_link_list td.remark { font-style: italic; } .et2_link_list td div.delete, .et2_vfs 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, .et2_vfs .icon img, .et2_vfs .icon { width: 16px; height: 16px; display: inline-block; } .et2_link_list tr:hover div.delete, .et2_vfs tr:hover div.delete { visibility: visible; } .egw_tooltip { position: fixed; border: 1px solid #897f51; background-color: #FDF9DB; max-width: 300px; color: black; z-index: 100; -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); } /** * Tabs widget */ .et2_tabflag { display: inline-block; margin-right: 5px; padding: 5px; min-width: 60px; cursor: pointer; border: 1px solid silver; background-color: #E0E0E0; background-image: url(images/gradient01.png); background-position: center; background-repeat: repeat-x; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .et2_tabflag:hover { color: #050505; border: 1px solid gray; background-color: #D0D0EE; } .et2_tabflag:active { background-image: url(images/gradient02.png); background-color: #D0D0E0; } .et2_tabs { border-width: 0px 1px 1px 1px; border-style: solid; border-color: silver; padding: 5px; overflow-y: auto; } .et2_tabflag.active { border-bottom: 1px solid white; background-color: white; background-image: none; } .et2_tabheader { background-image: url(images/tab_header_bg.png); background-position: bottom; background-repeat: repeat-x; white-space: nowrap; } .et2_taglist_ro ul { margin: 0px; padding: 0px; } .et2_taglist .mailinglist { width: 100%; background-image: url(images/email.png); padding-right: 20px; background-position: right; background-repeat: no-repeat; font-weight: bold; } /* min-height to fix calculations done while hidden */ .et2_taglist > div { min-height: 2em; } /** * 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; } .et2_vfs table { width: 100%; max-height: 6em; overflow: auto; } .et2_vfs td.icon { width: 16px; max-width: 16px; } button.et2_vfs_btn { margin: 0; text-align: left; height: 24px !important; padding-left: 30px !important; background-repeat: no-repeat; background-position: 4px center; background-size: 20px auto; } img.vfsMimeIcon, #filemanager-select img.vfsMimeIcon { max-height: 16px; height: auto; } img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] { max-height: none; } /** * Validation */ .et2_required, [required] { background-color: #ffffd0; } td.et2_required { background-color: transparent; } .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; font-size: 11px; min-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:not(.ui-sortable-disabled) > tr:not(.th) { cursor: ns-resize; } .et2_scrollable_tbody { display: flex; flex-flow: column; height: 100%; width: 100%; } .et2_scrollable_tbody thead { flex: 0 0 auto; width: calc(100% - 0.9em); display: table; table-layout: fixed; } .et2_scrollable_tbody tbody > tr{ width: 100%; display: table; table-layout: fixed; } .et2_scrollable_tbody tbody { flex: 1 1 auto; display: block; overflow-y: scroll; } /** * irame & loader */ .et2_iframe.loading { position: absolute; width: 100%; height: 100%; } /** * 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; white-space: nowrap; } .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: 0px 6px 0px; border: 1px solid #E0E0E0; font-size: 150%; text-align: center; } .nextmatch_header .search { padding-left: 1ex; } .nextmatch_header_row > select,.nextmatch_header_row > label > select { max-width: 14%; margin-right: 2ex; } .nextmatch_header_row > .header_row_right { float: right; padding-right: 1ex; } .nextmatch_header_row > .header_row_right > * { display: inline-block; } .et2_nextmatch .nextmatch_header { border: none; background-image: none; background-color: transparent; } .et2_nextmatch .nextmatch_header_row > div { display: inline-block; } /* Firefox only search clear button */ .et2_nextmatch .nextmatch_header_row input[type="search"] + span { position: relative; display: inline-block; top: 4px; margin-left: -16px; /* Clear icon (x) ui-icon-clear */ background-position: -80px -128px; } /* Favorites */ .nextmatch_header div[id$=favorite_wrapper] { margin-top: 6px; position: relative; } #nm_favorites_popup_filters .filter_id, #nm_favorites_popup_filters .filter_value { width: 45%; display: inline-block; } .nextmatch_header ul.favorites { min-width: 20ex; } .ui-fav-sortable-placeholder { height: 24px; border: 1px dashed silver; border-radius: 2px; margin: 0px; padding: 2px 5px; } .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; } .favorites li span.ui-state-active { border: none; } .favorites input, .favorites img { margin-right: 1ex; } .favorites div.ui-icon-trash { position: relative; float: right; display: none; } .favorites li:hover div.ui-icon { display: inline-block; } .favorites .sideboxstar { height: 9px; display: inline-block; padding: 0px 4px; margin: 0px 5px; /* TODO: This is template specific */ background-image: url(../../../phpgwapi/templates/default/images/bullet.png); } .sidebox-favorites ul.favorites { width: 99%; padding: 0px; border: none; background: white; } .sidebox-favorites .ui-menu .ui-menu-item a { line-height: inherit; padding: 2px 0px; } .sidebox-favorites .ui-menu .ui-menu-item a:hover { text-decoration: underline; } .sidebox-favorites .favorites div.ui-icon-heart { position: relative; float: left; display: inline-block; margin: -3px 1px 0px 1px; } .sidebox-favorites .favorites div.ui-icon-trash { margin-top: -5px; margin-right: 2px; } ul[id$='favorites_popup_state'] span.filter_value { position: absolute; left: 50%; white-space: nowrap; } .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; } @media print { /** Keeps rows from breaking */ .et2_nextmatch .egwGridView_grid > tbody > tr { display: block; } .et2_nextmatch .egwGridView_spacer { display:none; } .et2_nextmatch .nextmatch_header { display: none !important; } .egwGridView_outer > thead { border-bottom: 1px solid; } .egwGridView_outer > thead select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } .egwGridView_grid > tbody > tr { page-break-inside: avoid; -webkit-region-break-inside: avoid; } .et2_nextmatch > div { width: auto !important; height: auto !important; } .et2_nextmatch table.egwGridView_outer thead tr th div.innerContainer { max-height: inherit; } #cke_1_top.cke_top { display: none; border:none; } .et2_split, .et2_split > .splitter-pane { height: auto !important; width: auto !important; } } /** * Grid / nextmatch Hierarchy */ /* Make sure arrow & cell content don't overlap */ .et2_nextmatch .egwGridView_grid span.arrow { margin: 6px -12px 4px 4px; float: left; position: relative; } /* Indent the sub-grid */ .egwGridView_grid .egwGridView_grid { margin-left: 10px; border-left: 1px solid silver; } /** Initial height used for calculating average heights, before content is loaded */ .egwGridView_grid > tbody > tr > td > .loading{ min-height: 1.6em; } /** * 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 */ /* Nextmatch tiled view */ .et2_nextmatch .egwGridView_grid tr.tile { display: inline-block; width: 240px; float: left; padding: 2px; } .et2_nextmatch .egwGridView_grid tr.tile > td > div > *:first-child { text-align: center; } /* 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 */ .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: 100%; min-height: 5px; } /** * For resizing (nextmatch columns) */ table.egwGridView_outer.egwResizing .fixedWidth { opacity: 0.5; } .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%; } .long_task .message { height: inherit; } /** * et2_taglist */ .ms-ctn, .ms-res-ctn { /* It doesn't really work smaller than this */ min-width: 150px; border: solid 1px #bbbbbb; } .ms-ctn .loading { position: relative; margin: 0px auto -16px auto; top: 5px; } .ms-res-ctn { position:absolute; background: #FFF; overflow-y: auto; z-index: 9999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #CCC; left: -1px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } div.ms-sel-ctn { padding-right: 0px; } div.ms-sel-ctn .ms-sel-item { word-break: break-all; } .ms-ctn input:focus { min-width: 10em; } /** * et2_toolbar */ .et2_toolbar { border: none; background: none; margin: 0 !important; padding: 0 !important; } .et2_toolbar button { margin:1px; margin-right: 3px; height: 24px; } .et2_toolbar button.toolbar_toggled { background-color: white; box-shadow: inset 1px 1px 1px 1px gray !important; } .et2_toolbar-dropdown{ margin: 1px; display: inline-block; direction: ltr; background: #E0E0E0 !important; background-color: #E0E0E0 !important; border: 1px solid silver; text-align: left; font-weight: normal !important; font-size: 9pt !important; vertical-align: bottom !important; padding: 1px !important; } .et2_toolbar-dropdown > div{ direction: ltr; display: inline; background: #E0E0E0 !important; background-color: #E0E0E0 !important; vertical-align: bottom !important; padding: 0 !important; margin: 0 !important; } .et2_toolbar-dropdown img{ padding-left: 7px; background-repeat: no-repeat; background-position: 5% center; background-size: 16px; } .et2_toolbar-dropdown button:hover{ color: none !important; border: none !important; background-color: none !important; vertical-align: bottom !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: 0 !important; margin: 0 !important; min-height: 19px; } .et2_toolbar-dropdown ul> li{ width: 100% } .et2_toolbar-dropdown-menulist button{ height: 100% !important; border: none; background: #E0E0E0 !important; background-color: #E0E0E0 !important; } .et2_toolbar-dropdown-menulist button:nth-child(2){ float: right; padding: 0; } .et2_toolbar-dropdown ul{ z-index: 1000 !important; position: absolute; } .et2_toolbar-dropdown ul >li{ } .et2_toolbar-dropdown-menulist ul{ position: relative !important; } div.ui-toolbar-menulist{ position: absolute; height: inherit !important; z-index: 999 !important; overflow: hidden !important; border: solid black 1px; padding: 0 !important; margin-top: 3px !important; min-width: 150px; } .ui-toolbar-menulist > h { padding-bottom: 7px; margin: 0; } .ui-toolbar-menulist > button { margin: 0 !important; text-align: left; border-radius: 0 !important; width: 100% !important; white-space: nowrap; } .ui-toolbar-menulist > div{ margin: 0 !important; text-align: left; border-radius: 0 !important; width: 100% !important; white-space: nowrap; background-color: #E0E0E0 !important; border: 1px solid silver; } .ui-toolbar-menulistHeader{ font-size: xx-small; height:100%; margin-top: 2px; direction: ltr; } .et2_toolbar_activeList{ position: relative; float:right; direction: rtl; } div.et2_toolbar_activeList .ui-accordion-header-active { font-weight: normal; color:black; } div.et2_toolbar_activeList h.ui-accordion-header { padding:4px 14px 6px 25px !important; margin:1px; } .et2_toolbar_actionlist{ float:left; height:24px; white-space: nowrap; } .et2_toolbarDropArea{ border: 1px dashed lightgray; } .et2_label > input.et2_checkbox { margin-right: 5px; } /*slide switch representing checkbox*/ span.et2_checkbox_slideSwitch { position: relative; display: inline-block; vertical-align: middle; } span.et2_checkbox_slideSwitch > span.slideSwitch_container { width: 100%; min-width:12px; height: 12px; display: block; position: relative; background-color: #B4B4B4; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; padding: 3px; margin: 1px; } span.et2_checkbox_slideSwitch > span.slideSwitch_container > span:first-child { width: 50%; display: inline-block; text-align: center; text-align: -webkit-center; text-align: -moz-center; position: absolute; left:0; z-index: 6; font-weight: bold; color:#5A5A5A; } span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container > span:first-child { color:white; } span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container> span:nth-child(2) { color:#5A5A5A; } span.et2_checkbox_slideSwitch > span.slideSwitch_container> span:nth-child(2) { width: 50%; display: inline-block; text-align: center; text-align: -webkit-center; text-align: -moz-center; position: absolute; z-index: 6; left:50%; font-weight: bold; color:white; } span.et2_checkbox_slideSwitch > span.slideSwitch_container a { position: absolute; right: 0%; top: -1px; z-index: 4; display: block; width: 48%; height: 99%; padding-bottom: 0px; background-color: #0c5da5; border-radius: 3px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.15); } span.et2_checkbox_slideSwitch > input { opacity: 0; position: absolute; z-index: 7; width: 100%; height: 100%; } span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a { right:50%; } .et2_radiobox { margin-right: 5px; } .et2_gantt, .et2_gantt .gantt_container { width: 100%; min-height: 300px; overflow: hidden; } .et2_gantt .gantt_tree_icon { background-size: 18px; } .et2_gantt .gantt_side_content { overflow: visible; } /* Style the gantt grid (left side) allowing 2 lines */ .et2_gantt .gantt_grid_scale :not(.gantt_grid_head_add) { white-space: normal; line-height: 16px; height: auto; } /* Column selector */ .et2_gantt .gantt_grid_scale .gantt_grid_head_add { background-image: url(images/selectcols.png); padding: 0px; margin: 0px; } .et2_gantt .gantt_grid_data .gantt_add { display: none; padding: 0px; margin: 0px; } /* Display inline, since there's only 1 line*/ .et2_gantt .gantt_grid_data li { display: inline-block; padding-right: 0.5ex; } .et2_gantt .gantt_task_progress { text-align: left; color: white; overflow: hidden; text-overflow: clip; white-space: nowrap; } .et2_gantt .gantt_task_progress > span { font-weight: bold; margin: 0 1ex; } .et2_gantt .weekend { background-color: #f4f7f4; } .et2_gantt .gantt_selected .weekend { background-color: #f7eb91; } .et2_gantt .gantt_task_link.invalid_constraint .gantt_line_wrapper div { background-color: red; } .et2_gantt .gantt_task_link.invalid_constraint .gantt_link_arrow_left { border-right-color: red; } .et2_gantt .gantt_task_link.invalid_constraint .gantt_link_arrow_right { border-left-color: red; } .et2_gantt .gantt_task_planned { height: 10px; position: absolute; opacity: 0.3; border-style: outset; border-width: 2px; border-top: none; border-bottom: none; width: 2px; } .et2_gantt .gantt_task_planned:hover span { display:inline; } .et2_gantt .gantt_task_planned span { z-index: 10; display: none; background: white; position: relative; top: 2em; } .et2_gantt .gantt_left .gantt_task_planned { border-right: none; } .et2_gantt .gantt_right .gantt_task_planned { border-left: none; top: 25px; } /** * 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; } /** * Some general styles usable for all apps (and widgets) */ .et2_fullWidth, .et2_fullWidth input, .et2_fullWidth select,et2_fullWidth.et2_file .et2_fullWidth textarea , .et2_fullWidth input.et2_link_entry { width: 99%; } /* position icons behind input */ .et2_fullWidth, .et2_fullWidth span.et2_url_span { position: relative; } .et2_fullWidth a.et2_url { position: absolute; height: 16px; right: -16px; top: 8px; } .et2_fullWidth input.et2_date_duration { float: left; } .et2_fullWidth select.et2_date_duration { width: 70%; float: right; } /*et2_image_widget*/ div.et2_image_tooltipPopup { background: white; color: black; border: 1px solid gray; padding: 0; opacity: 1; max-width: 600px; max-height: 480px; box-shadow: 5px 5px 11px gray; overflow:auto; } /*egw_action_ddHelper*/ div.et2_egw_action_ddHelper { z-index: 100; } /* The last div which shows Ctrl tip to user*/ div.et2_egw_action_ddHelper_tip { position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; float: left; background-color: rgba(0, 0, 0, 0.70); box-shadow: 6px 6px 8px gray; border: 1px solid black; border-top: none; color: white; } div.et2_egw_action_ddHelper table.et2_egw_action_ddHelper_row { background-color: rgba(255, 194, 0, 0.70); box-shadow: 6px 6px 8px gray; border: 1px solid black; } table.et2_egw_action_ddHelper_row tr { background: none; max-height: 20px; } /* Apply to all displaied rows in order to get same result*/ table.et2_egw_action_ddHelper_row * { white-space: nowrap !important; max-height: 15px; overflow:hidden; text-overflow: ellipsis; max-width: 400px; } table.et2_egw_action_ddHelper_row img { width: 15px !important; height: 15px !important; } /* Last row of items which shows the number of more items*/ tr.et2_egw_action_ddHelper_moreRow{ } /* The big total item counter*/ span.et2_egw_action_ddHelper_itemsCnt { background: transparent; position: absolute; left: 20px; top: 8%; font-size: 367%; color: rgba(255, 255, 255, 1); text-align: center; font-weight: bold; } /** * Etemplate exposé CSS */ /* Paginating with nextmatch */ .blueimp-gallery-controls > .indicator.paginating { border-bottom: 2px solid rgba(255, 255, 255, 0.5); border-top: 2px solid rgba(255, 255, 255, 0.5); left: 0px; right: auto; white-space: nowrap; bottom:0; } /*Carousel thumbnails*/ .blueimp-gallery>.indicator>li { display: inline-block; width: auto; height: 100px; margin: 0; background: transparent; opacity: 1; cursor: pointer; border-radius: 0; border:0; } .blueimp-gallery > .indicator > li > img { display: inline-block; width: auto; height: 100px; margin:0; cursor: pointer; z-index: -1; position: relative; } /*Make indicator visible all the time to be able accuratley estimate current active slide position in thubmnal bar*/ .blueimp-gallery>.indicator { opacity:0; /* Hide it through opacity*/ white-space: nowrap; display: inline-block; /* Very important to keep gallery indicator always with display inline-block*/ } /*Thumbnail border on hover*/ .blueimp-gallery>.indicator>li:hover { -webkit-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1); -moz-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1); box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1); background: transparent; } /*Active thumbnail border*/ .blueimp-gallery>.indicator>.active { -webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5; -moz-box-shadow: inset 0px 0px 0px 4px #0c5da5; box-shadow: inset 0px 0px 0px 4px #0c5da5; background: transparent; } /*Slideshow Play/Pause button*/ body:last-child .blueimp-gallery>.play-pause, .blueimp-gallery>.play-pause{ right: 50px; top: 20px; background-size: 44px 24px; width:24px; height:24px; } /*fullScreen button*/ .blueimp-gallery>.fullscreen{ right: 85px; top: 20px; background-size: 24px; width:24px; height:24px; } /* download button*/ .blueimp-gallery>.download{ right: 120px; top: 20px; background: url(images/download.png) 0 0 no-repeat; background-size: 24px; height:24px; width:24px; } /*close button*/ .blueimp-gallery>.close{ font-size: 40px; } /*Give room to Carousel indicator when the gallery controls is on*/ .blueimp-gallery-controls>.slides { height:85%; } /*indicator bar with controls*/ .blueimp-gallery-controls>.indicator { white-space: nowrap; opacity:1; /* When the controls panel is on then we need to show back the indicators*/ } /*Generic class for text overflow ellipsis*/ .et2_ellipsis { text-overflow: ellipsis; overflow: hidden; }