diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 82d3186528..d958e1cf28 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -37,1151 +37,7 @@ * @version: 1 * Stefan Reinhardt */ -/** - * Styles for etemplate2 widgets - * - * @version: $Id$ - */ -/** - * 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; -} -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; -} -.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: 0px; -} -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; -} -button.et2_button_with_image { - padding-left: 20px; - background-repeat: no-repeat; - background-position: 5% center; - background-size: 16px; -} -/** - * 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 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 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; -} -.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 { - 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: 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; -} -/** - * 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; -} -/* 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: show; -} -.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-right: 5px; - padding: 5px; - 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; -} -.et2_taglist_ro ul { - margin: 0px; - padding: 0px; -} -/** - * 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: #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; -} -.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; -} -.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; -} -.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; -} -/** 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 */ -/* 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; -} +/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/ @media all { /** * Top level @@ -4295,6 +3151,21 @@ a.textSidebox { text-align: center; width: 99%; } +.pageGenTime, +#divPoweredBy { + font-size: 80%; + color: #ff0000; + text-align: center; +} +.pageGenTime { + margin-top: 1em; +} +.pageGenTime > span:after { + content: ", "; +} +.pageGenTime > span:last-child:after { + content: ""; +} /*########################### # # # # @@ -4969,9 +3840,24 @@ table.customfields td span > div { #loginMainDiv #divAppIconBar #divLogo { margin-left: auto; margin-right: auto; + margin-bottom: 2em; position: relative; top: 1px; } +#loginMainDiv #divAppIconBar #divLogo img { + width: 100%; +} +#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { + background-color: #679fd2; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #679fd2, #679fd2); + background-image: -ms-linear-gradient(top, #679fd2, #679fd2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); + background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); + background-image: -o-linear-gradient(top, #679fd2, #679fd2); + background-image: linear-gradient(top, #679fd2, #679fd2); + background-repeat: repeat-x; +} #loginMainDiv div#centerBox { margin: 0 auto; width: 444px; @@ -5091,86 +3977,147 @@ table.customfields td span > div { -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); } -/*Supersized*/ #wrap { - background-color: white !important; + z-index: -1; + margin: 0 auto; + background-color: transparent; } -* { - margin: 0; - padding: 0; -} -img { - border: medium none; -} -#supersized-loader { - background: url("../images/progress.gif") no-repeat scroll center center rgba(0, 0, 0, 0); - height: 60px; - left: 50%; - margin: -30px 0 0 -30px; +#wrap img.bgfade { position: absolute; - text-indent: -999em; - top: 50%; - width: 60px; - z-index: 0; + top: -22%; + left: 0%; + /*display:block;*/ + z-index: -1; + width: 20%; } -#supersized { - display: block; - height: 100%; - left: 0; +#wrap div.animation_login { + background-image: url(../../images/about.svg), url(../../images/accounts.svg), url(../../images/alarm.svg); + background-position: 20px -90px, 30px 80px, 0px 0px; + background-repeat: no-repeat, no-repeat, repeat-x; + animation: animatedLogin 4s linear infinite; + height: 190px; overflow: hidden; + width: 560px; +} +@keyframes animatedLogin { + from { + background-position: 20px 20px, 30px 80px, 0 0; + } + to { + background-position: 300px -90px, 30px 20px, 100% 0; + } +} +#wrap img[src$="svg"], +#wrap background-image[url$="svg"] { + background-color: #679fd2; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #679fd2, #679fd2); + background-image: -ms-linear-gradient(top, #679fd2, #679fd2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); + background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); + background-image: -o-linear-gradient(top, #679fd2, #679fd2); + background-image: linear-gradient(top, #679fd2, #679fd2); + background-repeat: repeat-x; +} +#img1, +#img2, +#img3, +#img4 { + width: 100%; + height: 100%; position: fixed; top: 0; - width: 100%; - z-index: -999; + z-index: -1; + animation-name: test; + animation-duration: 5s; + opacity: 0; } -#supersized img { - border: medium none; - display: none; - height: auto; - outline: medium none; - position: relative; - width: auto; +#img2 { + animation-delay: 5s; + -webkit-animation-delay: 5s; } -#supersized.speed img { - image-rendering: -moz-crisp-edges; +#img3 { + animation-delay: 10s; + -webkit-animation-delay: 10s; } -#supersized.quality img { - image-rendering: optimizequality; +#img4 { + animation-delay: 15s; + -webkit-animation-delay: 15s; } -#supersized li { - background: none repeat scroll 0 0 #111111; - display: block; - height: 100%; - left: 0; - list-style: none outside none; - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - z-index: -30; +.animated { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 3s; + -moz-animation-duration: 3s; + -ms-animation-duration: 3s; + -o-animation-duration: 3s; + animation-duration: 3s; } -#supersized a { - display: block; - height: 100%; - width: 100%; +.animated.hinge { + -webkit-animation-duration: 2s; + -moz-animation-duration: 2s; + -ms-animation-duration: 2s; + -o-animation-duration: 2s; + animation-duration: 2s; } -#supersized li.prevslide { - z-index: -20; +@-webkit-keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } } -#supersized li.activeslide { - z-index: -10; +@keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } } -#supersized li.image-loading { - background: url("../images/progress.gif") no-repeat scroll center center #111111; - height: 100%; - width: 100%; +@-webkit-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } } -#supersized li.image-loading img { - visibility: hidden; +@-moz-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } } -#supersized li.prevslide img, -#supersized li.activeslide img { - display: inline; +@-ms-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } +} +@-o-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } +} +@keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } } /** * EGroupware: Stylite Pixelegg template @@ -5926,6 +4873,7 @@ img { padding-right: 10px; float: left; /*filter grey*/ + /*filter grey*/ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ -webkit-filter: grayscale(100%); @@ -6247,6 +5195,17 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { width: 16px; height: 16px; margin: 5px 1px 0 1em; + /*filter grey*/ + filter: url("data:image/svg+xml;utf8,#grayscale"); + /* Firefox 10+, Firefox on Android */ + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + /*filter: url(grayscale.svg); Firefox 4+ */ + filter: gray; + /* IE 6-9 */ } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active { border-width: 1px 1px 0px 1px !important; diff --git a/pixelegg/images/apply.svg b/pixelegg/images/apply.svg new file mode 100755 index 0000000000..24c309deef --- /dev/null +++ b/pixelegg/images/apply.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/pixelegg/images/archive.svg b/pixelegg/images/archive.svg new file mode 100755 index 0000000000..df6d83e635 --- /dev/null +++ b/pixelegg/images/archive.svg @@ -0,0 +1,20 @@ + + + + + + + + + + diff --git a/pixelegg/images/attach.svg b/pixelegg/images/attach.svg new file mode 100755 index 0000000000..aef3dfc4f4 --- /dev/null +++ b/pixelegg/images/attach.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/pixelegg/images/back.svg b/pixelegg/images/back.svg new file mode 100755 index 0000000000..6e4dc44ec1 --- /dev/null +++ b/pixelegg/images/back.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/pixelegg/images/cake.svg b/pixelegg/images/cake.svg new file mode 100755 index 0000000000..362fdfd9ce --- /dev/null +++ b/pixelegg/images/cake.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/pixelegg/images/calendar.svg b/pixelegg/images/calendar.svg new file mode 100755 index 0000000000..2fe1ade1be --- /dev/null +++ b/pixelegg/images/calendar.svg @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/pixelegg/images/calicon.svg b/pixelegg/images/calicon.svg new file mode 100755 index 0000000000..ab7c8e2575 --- /dev/null +++ b/pixelegg/images/calicon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + diff --git a/pixelegg/images/call.svg b/pixelegg/images/call.svg new file mode 100755 index 0000000000..7d2f89c0b7 --- /dev/null +++ b/pixelegg/images/call.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/pixelegg/images/done.svg b/pixelegg/images/done.svg new file mode 100755 index 0000000000..310c7eab2b --- /dev/null +++ b/pixelegg/images/done.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/pixelegg/images/done_all.svg b/pixelegg/images/done_all.svg new file mode 100755 index 0000000000..03d98754da --- /dev/null +++ b/pixelegg/images/done_all.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/pixelegg/images/edit.svg b/pixelegg/images/edit.svg new file mode 100755 index 0000000000..440ac71310 --- /dev/null +++ b/pixelegg/images/edit.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/pixelegg/images/editcopy.svg b/pixelegg/images/editcopy.svg new file mode 100755 index 0000000000..3d06b18e49 --- /dev/null +++ b/pixelegg/images/editcopy.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/pixelegg/images/editcut.svg b/pixelegg/images/editcut.svg new file mode 100755 index 0000000000..5346f7666d --- /dev/null +++ b/pixelegg/images/editcut.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/pixelegg/images/month.svg b/pixelegg/images/month.svg new file mode 100755 index 0000000000..93138245ba --- /dev/null +++ b/pixelegg/images/month.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/pixelegg/images/multiweek.svg b/pixelegg/images/multiweek.svg new file mode 100755 index 0000000000..8c1d393df6 --- /dev/null +++ b/pixelegg/images/multiweek.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/pixelegg/images/setup.svg b/pixelegg/images/setup.svg new file mode 100755 index 0000000000..e69de29bb2 diff --git a/pixelegg/images/tentative.svg b/pixelegg/images/tentative.svg new file mode 100755 index 0000000000..2a372a0f44 --- /dev/null +++ b/pixelegg/images/tentative.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/pixelegg/images/timesheet.svg b/pixelegg/images/timesheet.svg new file mode 100755 index 0000000000..998e8a668f --- /dev/null +++ b/pixelegg/images/timesheet.svg @@ -0,0 +1,19 @@ + + + + + + + + + diff --git a/pixelegg/images/today.svg b/pixelegg/images/today.svg new file mode 100755 index 0000000000..1a838dc679 --- /dev/null +++ b/pixelegg/images/today.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/pixelegg/images/week.svg b/pixelegg/images/week.svg new file mode 100755 index 0000000000..1eb0c2adb0 --- /dev/null +++ b/pixelegg/images/week.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/pixelegg/js/login.js b/pixelegg/js/login.js index 3a594f4bb1..1711af1b43 100755 --- a/pixelegg/js/login.js +++ b/pixelegg/js/login.js @@ -5,19 +5,20 @@ */ -egw_LAB.wait(function() { - $j(document).ready(function() { - $j('img.bgfade').hide(); -var dg_H = $j(window).height(); -var dg_W = $j(window).width(); -$j('#wrap').css({'height':dg_H,'width':dg_W}); - function anim() { - $j("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(3500); - $j("#wrap img").first().fadeIn(3500); - setTimeout(anim, 7000); - } -anim(); -$j(window).resize(function(){window.location.href=window.location.href}); - }); - -}); \ No newline at end of file +//egw_LAB.wait(function() { +// $j(document).ready(function() { +// $j('img.bgfade').hide(); +//// var dg_H = $j(window).height(); +//// var dg_W = $j(window).width(); +//// $j('#wrap').css({'height':dg_H,'width':dg_W}); +// +// function anim() { +// $j("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(3500); +// $j("#wrap img").first().fadeIn(3500); +// setTimeout(anim, 7000); +// } +//anim(); +//$j(window).resize(function(){window.location.href=window.location.href}); +// }); +// +//}); \ No newline at end of file diff --git a/pixelegg/less/def_design_pattern_color_font_shadow.less b/pixelegg/less/def_design_pattern_color_font_shadow.less index d14be7177a..0ef3cdce63 100755 --- a/pixelegg/less/def_design_pattern_color_font_shadow.less +++ b/pixelegg/less/def_design_pattern_color_font_shadow.less @@ -331,6 +331,23 @@ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); } + + + +.img_filter_gray{ + + /*filter grey*/ + filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ + + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + /*filter: url(grayscale.svg); Firefox 4+ */ + filter: gray; /* IE 6-9 */ + +} // ############################# // Transparenz @@ -644,4 +661,4 @@ background-repeat: repeat-x; // -// \ No newline at end of file +// \ No newline at end of file diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index d50bbf112c..277b549d3d 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -8,7 +8,7 @@ @import (reference) "./def_design_pattern_color_font_shadow.less"; @import (reference) "./def_buttons.less"; -@import (less) "../../etemplate/templates/default/etemplate2.css"; +/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/ diff --git a/pixelegg/less/layout_content_elements.less b/pixelegg/less/layout_content_elements.less index 30d981b102..756649a411 100755 --- a/pixelegg/less/layout_content_elements.less +++ b/pixelegg/less/layout_content_elements.less @@ -830,6 +830,26 @@ a.textSidebox width:99%; } +.pageGenTime,#divPoweredBy + { + font-size: 80%; + color: #ff0000; + text-align: center; + } + + .pageGenTime { + margin-top: 1em; + } + + .pageGenTime > span:after { + content: ", "; + } + + .pageGenTime > span:last-child:after { + content: ""; + } + + // Button global for all and everything: /*########################### diff --git a/pixelegg/less/layout_loginPage.css b/pixelegg/less/layout_loginPage.css index ad80b7e059..26d11d9bc1 100644 --- a/pixelegg/less/layout_loginPage.css +++ b/pixelegg/less/layout_loginPage.css @@ -33,9 +33,24 @@ #loginMainDiv #divAppIconBar #divLogo { margin-left: auto; margin-right: auto; + margin-bottom: 2em; position: relative; top: 1px; } +#loginMainDiv #divAppIconBar #divLogo img { + width: 100%; +} +#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { + background-color: #679fd2; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #679fd2, #679fd2); + background-image: -ms-linear-gradient(top, #679fd2, #679fd2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); + background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); + background-image: -o-linear-gradient(top, #679fd2, #679fd2); + background-image: linear-gradient(top, #679fd2, #679fd2); + background-repeat: repeat-x; +} #loginMainDiv div#centerBox { margin: 0 auto; width: 444px; @@ -65,18 +80,18 @@ #loginMainDiv div#centerBox #loginCdMessage { margin: 1em; -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 20px; + -webkit-border-top-left-radius: 10px; -moz-border-radius: 3px; - -moz-border-radius-topleft: 20px; + -moz-border-radius-topleft: 10px; border-radius: 3px; - border-top-left-radius: 20px; + border-top-left-radius: 10px; color: red; text-align: center; } #loginMainDiv div#centerBox #loginCdMessage span { padding: 0.5em; font-size: 1.2em; - color: #ffc200; + color: #679fd2; text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050; width: 100%; } @@ -88,11 +103,11 @@ -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 20px; + -webkit-border-top-left-radius: 10px; -moz-border-radius: 3px; - -moz-border-radius-topleft: 20px; + -moz-border-radius-topleft: 10px; border-radius: 3px; - border-top-left-radius: 20px; + border-top-left-radius: 10px; } #loginMainDiv div#centerBox form table.divLoginbox td { padding: 0.5em; @@ -112,9 +127,9 @@ cursor: pointer; } #loginMainDiv div#centerBox form table.divLoginbox select:hover { - -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); - -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); - box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } #loginMainDiv div#centerBox form table.divLoginbox input { border: 1px solid rgba(0, 0, 0, 0.15); @@ -129,9 +144,9 @@ border-radius: 3px; } #loginMainDiv div#centerBox form table.divLoginbox input:hover { - -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); - -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); - box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } #loginMainDiv div#centerBox form table.divLoginbox input:focus { outline: 0; @@ -155,84 +170,145 @@ -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); } -/*Supersized*/ #wrap { - background-color: white !important; + z-index: -1; + margin: 0 auto; + background-color: transparent; } -* { - margin: 0; - padding: 0; -} -img { - border: medium none; -} -#supersized-loader { - background: url("../images/progress.gif") no-repeat scroll center center rgba(0, 0, 0, 0); - height: 60px; - left: 50%; - margin: -30px 0 0 -30px; +#wrap img.bgfade { position: absolute; - text-indent: -999em; - top: 50%; - width: 60px; - z-index: 0; + top: -22%; + left: 0%; + /*display:block;*/ + z-index: -1; + width: 20%; } -#supersized { - display: block; - height: 100%; - left: 0; +#wrap div.animation_login { + background-image: url(../../images/about.svg), url(../../images/accounts.svg), url(../../images/alarm.svg); + background-position: 20px -90px, 30px 80px, 0px 0px; + background-repeat: no-repeat, no-repeat, repeat-x; + animation: animatedLogin 4s linear infinite; + height: 190px; overflow: hidden; + width: 560px; +} +@keyframes animatedLogin { + from { + background-position: 20px 20px, 30px 80px, 0 0; + } + to { + background-position: 300px -90px, 30px 20px, 100% 0; + } +} +#wrap img[src$="svg"], +#wrap background-image[url$="svg"] { + background-color: #679fd2; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #679fd2, #679fd2); + background-image: -ms-linear-gradient(top, #679fd2, #679fd2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2)); + background-image: -webkit-linear-gradient(top, #679fd2, #679fd2); + background-image: -o-linear-gradient(top, #679fd2, #679fd2); + background-image: linear-gradient(top, #679fd2, #679fd2); + background-repeat: repeat-x; +} +#img1, +#img2, +#img3, +#img4 { + width: 100%; + height: 100%; position: fixed; top: 0; - width: 100%; - z-index: -999; + z-index: -1; + animation-name: test; + animation-duration: 5s; + opacity: 0; } -#supersized img { - border: medium none; - display: none; - height: auto; - outline: medium none; - position: relative; - width: auto; +#img2 { + animation-delay: 5s; + -webkit-animation-delay: 5s; } -#supersized.speed img { - image-rendering: -moz-crisp-edges; +#img3 { + animation-delay: 10s; + -webkit-animation-delay: 10s; } -#supersized.quality img { - image-rendering: optimizequality; +#img4 { + animation-delay: 15s; + -webkit-animation-delay: 15s; } -#supersized li { - background: none repeat scroll 0 0 #111111; - display: block; - height: 100%; - left: 0; - list-style: none outside none; - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - z-index: -30; +.animated { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 3s; + -moz-animation-duration: 3s; + -ms-animation-duration: 3s; + -o-animation-duration: 3s; + animation-duration: 3s; } -#supersized a { - display: block; - height: 100%; - width: 100%; +.animated.hinge { + -webkit-animation-duration: 2s; + -moz-animation-duration: 2s; + -ms-animation-duration: 2s; + -o-animation-duration: 2s; + animation-duration: 2s; } -#supersized li.prevslide { - z-index: -20; +@-webkit-keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } } -#supersized li.activeslide { - z-index: -10; +@keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } } -#supersized li.image-loading { - background: url("../images/progress.gif") no-repeat scroll center center #111111; - height: 100%; - width: 100%; +@-webkit-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } } -#supersized li.image-loading img { - visibility: hidden; +@-moz-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } } -#supersized li.prevslide img, -#supersized li.activeslide img { - display: inline; +@-ms-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } +} +@-o-keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } +} +@keyframes some-animation { + from { + width: 254px; + } + to { + width: 512px; + } } diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index 3237029690..7cc09f45a7 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -45,8 +45,14 @@ #divLogo { margin-left:auto; margin-right:auto; + margin-bottom: 2em; position: relative; top: 1px; + + img {width: 100%; } + img[src$="svg"]{ + .gradient_vertical (@egw_color_2_e, @egw_color_2_e); +} } } @@ -148,90 +154,130 @@ // Ende Login / Start ################################################# -/*Supersized*/ -#wrap { + #wrap{ + z-index: -1; + margin: 0 auto; + background-color:transparent; + - background-color: white !important; + img.bgfade{ + position:absolute; + top:-22%; + left: 0%; + /*display:block;*/ + z-index:-1; + width: 20%; -} -* { - margin: 0; - padding: 0; -} + + } + + + + div.animation_login{ + + background-image: url(../../images/about.svg), url(../../images/accounts.svg), url(../../images/alarm.svg); + background-position: 20px -90px, 30px 80px, 0px 0px; + background-repeat: no-repeat, no-repeat, repeat-x; -img { - border: medium none; + animation: animatedLogin 4s linear infinite; + + + height: 190px; + overflow: hidden; + width: 560px; + + } + + @keyframes animatedLogin { + from { background-position: 20px 20px, 30px 80px, 0 0; } + to { background-position: 300px -90px, 30px 20px, 100% 0; } } -#supersized-loader { - background: url("../images/progress.gif") no-repeat scroll center center rgba(0, 0, 0, 0); - height: 60px; - left: 50%; - margin: -30px 0 0 -30px; - position: absolute; - text-indent: -999em; - top: 50%; - width: 60px; - z-index: 0; -} -#supersized { - display: block; - height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - z-index: -999; -} -#supersized img { - border: medium none; - display: none; - height: auto; - outline: medium none; - position: relative; - width: auto; -} -#supersized.speed img { - image-rendering: -moz-crisp-edges; -} -#supersized.quality img { - image-rendering: optimizequality; -} -#supersized li { - background: none repeat scroll 0 0 #111111; - display: block; - height: 100%; - left: 0; - list-style: none outside none; - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - z-index: -30; -} -#supersized a { - display: block; - height: 100%; - width: 100%; -} -#supersized li.prevslide { - z-index: -20; -} -#supersized li.activeslide { - z-index: -10; -} -#supersized li.image-loading { - background: url("../images/progress.gif") no-repeat scroll center center #111111; - height: 100%; - width: 100%; -} -#supersized li.image-loading img { - visibility: hidden; -} -#supersized li.prevslide img, #supersized li.activeslide img { - display: inline; + + + img[src$="svg"], + background-image[url$="svg"]{ + .gradient_vertical (@egw_color_2_e, @egw_color_2_e); + } + + } + + + + #img1, #img2, #img3, #img4 { + width:100%; + height:100%; + position:fixed; + top: 0; + z-index:-1; + animation-name: test; + animation-duration: 5s; + opacity:0; + } + #img2 { + animation-delay:5s; + -webkit-animation-delay:5s + } + #img3 { + animation-delay:10s; + -webkit-animation-delay:10s + } + #img4 { + animation-delay:15s; + -webkit-animation-delay:15s + } + .animated { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 3s; + -moz-animation-duration: 3s; + -ms-animation-duration: 3s; + -o-animation-duration: 3s; + animation-duration: 3s; + } + .animated.hinge { + -webkit-animation-duration: 2s; + -moz-animation-duration: 2s; + -ms-animation-duration: 2s; + -o-animation-duration: 2s; + animation-duration: 2s; + } + @-webkit-keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + } + } + @keyframes test { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + } + } + + .mixi-frames () { + from {width: 254px;} + to {width: 512px;} } + @-webkit-keyframes some-animation {.mixi-frames;} + @-moz-keyframes some-animation {.mixi-frames;} + @-ms-keyframes some-animation {.mixi-frames;} + @-o-keyframes some-animation {.mixi-frames;} + @keyframes some-animation {.mixi-frames;} + + + // \ No newline at end of file diff --git a/pixelegg/less/layout_raster.less b/pixelegg/less/layout_raster.less index b4332f3961..1e1efe77d3 100644 --- a/pixelegg/less/layout_raster.less +++ b/pixelegg/less/layout_raster.less @@ -720,15 +720,7 @@ float: left; /*filter grey*/ - filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ - - -webkit-filter: grayscale(100%); - -moz-filter: grayscale(100%); - -ms-filter: grayscale(100%); - -o-filter: grayscale(100%); - filter: grayscale(100%); - /*filter: url(grayscale.svg); Firefox 4+ */ - filter: gray; /* IE 6-9 */ + .img_filter_gray } } @@ -1202,6 +1194,9 @@ div#calendar-container { display: inline-block; .dimension_width_height_s; margin: 5px 1px 0 1em; + + .img_filter_gray; + } diff --git a/pixelegg/less/traditional.less b/pixelegg/less/traditional.less index 288a8e3b51..e02292ef9e 100755 --- a/pixelegg/less/traditional.less +++ b/pixelegg/less/traditional.less @@ -58,24 +58,7 @@ a:hover,a:active line-height:40px; } -.pageGenTime,#divPoweredBy - { - font-size: 80%; font-size: 80%; - color: #ff0000; color: #ff0000; - text-align: center; - } - - .pageGenTime { - margin-top: 1em; - } - - .pageGenTime > span:after { - content: ", "; - } - - .pageGenTime > span:last-child:after { - content: ""; - } + @@ -904,3 +887,4 @@ td.lettersearch { border-bottom: 1px solid silver; } +// \ No newline at end of file diff --git a/pixelegg/templates/pixelegg/login.tpl b/pixelegg/templates/pixelegg/login.tpl index 336fc9255d..5a5ff1141c 100644 --- a/pixelegg/templates/pixelegg/login.tpl +++ b/pixelegg/templates/pixelegg/login.tpl @@ -1,21 +1,5 @@ - +
@@ -86,20 +70,10 @@
-STYLITE -EGROUPWARE -EGROUPWARE -EGROUPWARE -EGROUPWARE -EGROUPWARE -EGROUPWARE + +
+ +STYLITE +EGROUPWARE +EGROUPWARE
- - - -