/** * EGroupware: Stylite Pixelegg template * * Definitions for layout and raster * * Please do NOT change css-files directly, instead change less-files and compile them! * * @link http://www.egroupware.org * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @author Stefan Reinhardt * @package pixelegg * @version $Id$ */ @import (reference) "def_buttons.less"; //############## Layout ######################################################################################## // Allgemeines /* ################################################# * Basecontainer * ################################################# */ //IFRAME .egw_fw_content_browser_iframe, #divMainView { // .background-color-0-gray; margin: 0; body {.background_color_0_gray; } } .egwGridView_scrollarea { width: 100%; overflow-y: auto; overflow-x: hidden; } #egw_fw_header{ width: 100%; float: left; /* Logo EGW or Company - left top*/ #egw_divLogo { float: left; width: 255px; display: block; margin-left: -8px; text-align: center; height: 45px; .background_color_5_gray; img { width: 209px; border: none; position: absolute; top: 0.41em; left: 1em; .background_color_5_gray; } } /* ########################################################################################################################################### Topmenu / Home / Einstellungen / Zugriff / Kategorien usw.. ########################################################################################################################################### */ #egw_fw_topmenu ul, #egw_fw_topmenu > * > ul > li, .topmenu_info_item, #egw_fw_topmenu_items, #egw_fw_topmenu_info_items { display: inline; } #egw_fw_topmenu{ #egw_fw_topmenu_items { float: left; padding-top: 10px; width: 70%; ul { li{ .color_100_gray; /*.Button_size_square_32;*/ padding: 0.3em 0.4em; .Complete_Button_normal; background-color: @gray_10; &:hover{.Complete_Button_hover; color: @gray_100;} &:active {.Complete_Button_active;} .transition (0.2s, ease-out); a { .color_100_gray; text-decoration: none; .dimension_height_s; /*font-size: 1.1em;*/ &:hover { .color_50_gray; border-color: @gray_50; text-decoration: none !important; } } } /*Home*/ li:first-child{ margin-left: 10px; :before{border: none;} } /*home*/ a#topmenu_home { margin-left: 0px; &:before { padding-right: 20px; content: " "; background-image: url(../images/topmenu_items/home.png); background-repeat: no-repeat; .dimension_width_height_xs; } } /*Setup / Einstellungen*/ a#topmenu_prefs{ margin-left: 0px; &:before { padding-right: 20px; content: ""; background-image: url(../images/topmenu_items/setup.png); background-repeat: no-repeat; .dimension_width_height_xs; } } /*access / Zugriff */ a#topmenu_acl{ &:before { padding-right: 20px; content: ""; background-repeat: no-repeat; .dimension_width_height_xs; background-image: url(../images/topmenu_items/access.png); } } /*category*/ a#topmenu_cats{ &:before { background-image: url(../images/topmenu_items/category.png); padding-right: 20px; content: ""; background-repeat: no-repeat; .dimension_width_height_xs; } } /*password*/ a#topmenu_preferences{ &:before { background-image: url(../images/topmenu_items/password.png); padding-right: 20px; content: ""; background-repeat: no-repeat; .dimension_width_height_xs; } } /*help*/ a#topmenu_manual{ &:before { background-image: url(../images/topmenu_items/help.png); padding-right: 20px; content: ""; background-repeat: no-repeat; .dimension_width_height_xs; } } /*Search*/ a#topmenu_search{ &:before { background-image: url(../images/topmenu_items/search.png); padding-right: 20px; content: ""; background-repeat: no-repeat; .dimension_width_height_xs; } } /*logout*/ a#topmenu_logout{ &:before { background-image: url(../images/topmenu_items/logout.png); padding-right: 20px; content: ""; background-repeat: no-repeat; .dimension_width_height_s; } } } // Ende ul } // Ende Items } // Ende Topmenu } // Ende Header /* ################################################### Slide Effekt ###################################################*/ #egw_fw_topmenu_slide{ width: auto; text-align: center; height: 15px; float: left; position: fixed; left: 194px; } /*ICON List*/ #egw_fw_topmenu_slide.slidedown{ background-image: url("../images/list.png"); background-position: center center; height: 15px; width: 15px; display: block; margin-left: 5px; margin-top: 10px; background-size: 15px 15px; float: left; position: relative; left: -5px; } /*Icon ARROW UP*/ #egw_fw_topmenu_slide.slideup{ background-image: url("../images/slideup.png"); background-position: center center; height: 15px; width: 15px; display: block; margin-top: -36px; margin-left: 40px; } #slidetoggle{ width: 20px; height: 20px; display: block; } /*################################################# Add / Print / Logout / - Name / Date ###################################################*/ /*#egw_fw_topmenu_addons{}*/ // Button Logout #egw_fw_logout { background-image: url(../images/logout.png); background-size: 16px 16px; background-position: center center; background-repeat: no-repeat; cursor: pointer; display: inline-block; float: right; margin-right: 1em; margin-top: 0px; z-index: 200; .Button_size_square_16; .border_normal; .box_shadow_standard_light; .border_radius_button_normal; padding: 0.5em; top: 5px; position: fixed; right: 0px; &:hover {.box_shadow_standard_light_hover;} &:active {.Complete_Button_active;} &:focus {.box_shadow_standard_light_inset;} } // Button Print #egw_fw_print { display: none; /* background-image: url(../images/print.png); background-size: 16px 16px; background-position: center center; background-repeat: no-repeat; cursor: pointer; display: inline-block; float: right; margin-right: 5px; margin-top: 0px; position: fixed; .Button_size_square_16; .border_normal; .box_shadow_standard_light; .border_radius_button_normal; padding: 0.5em; top: 5px; right: 40px; z-index: 200; &:hover {.box_shadow_standard_light_hover;} &:active {.Complete_Button_active;} &:focus {.box_shadow_standard_light_inset;}*/ } /*################################################# /* Second Line /* e.g. Name / Datum / angemeldete User ###################################################*/ #egw_fw_topmenu_info_items { bottom: 0px; right: 0px; padding-right: 0px; position: relative; z-index: 1000; margin-right: 4px; float: right; display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; flex-direction: row; justify-content: flex-start; -webkit-flex-direction: row; -webkit-justify-content: flex-start; -ms-flex-direction: row; -ms-justify-content: flex-start; // move to bottom of the page /* bottom: 3px; display: flex; float: right; height: 0; margin-right: 20px; padding-right: 20px; position: fixed; right: 5px; z-index: 1000;*/ .topmenu_info_item { overflow: visible; // Info Bell &:nth-child(1) { } // Name &:nth-child(2) { /*float: right;*/ margin-top: 0; font-size: 1em; padding-right: 5px; } // angemeldete User &:nth-child(3) { position: relative; top: 0px; display: inline-block; &:hover {.box_shadow_standard_light_hover;} &:focus {.box_shadow_standard_light_inset;} /*&:before {content: "";font-size: 1em;color: @egw_color_2_a;}*/ } // Add &:nth-child(4) { } } /*Notification*/ #topmenu_info_notifications {} /*user info*/ #topmenu_info_user_info {} /*current user info*/ #topmenu_info_current_users {} /*current user info*/ #topmenu_info_current_users {} /*time zone*/ form { height: 0px; select {padding: 0px;} } /*quick*/ #topmenu_info_quick_add { // ############################################################################## // quick_add // Fist you see an ADD Icon, via Mouseover it expand right, to an select field span#quick_add { border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); float: right; padding: 0.5em; position: fixed; right: 45px; top: 5px; background-image: url(../images/add.png); background-repeat: no-repeat; background-size: 20px 20px; background-position: 4px 4px; .border_radius_button_normal; .dimension_width_height_s; &:before { content: " "; font-size: 2em; color: @egw_color_2_a; line-height: 0.6em; background-color: white; } &:hover {.box_shadow_standard_light_hover;} &:focus {.box_shadow_standard_light_inset;} } // ############################################################################## // quick_add selectbox // ADD different APPs select#quick_add_selectbox { visibility: hidden; border: medium none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); position: relative !important; right: 1px !important; top: -3px; left: 35px; } } // ############################################################################## // JS ERROR BUTTON // blinking red IMG img#topmenu_info_error{ .dimension_width_height_s; position: fixed; /*.Button_size_square_16;*/ .border_normal; .box_shadow_standard_light; padding: 5px; top: 6px; right: 88px; z-index: 200; &:hover {.box_shadow_standard_light_hover;} &:active {.Complete_Button_active;} &:focus {.box_shadow_standard_light_inset;} background-color: @color_warning; //blinking -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; transition:all 1s ease-in-out; /* order: name, direction, duration, iteration-count, timing-function */ -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */ -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */ -ms-animation:blink normal 2s infinite ease-in-out; /* IE */ animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */ } @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */ @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */ @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */ @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */ } // Ende items /* ################################################################################################################ * Sidebar * ################################################################################################################*/ // AREA UNDER LOGO #egw_fw_sidebar { position: fixed; overflow: hidden; top: 57px; left: 0px; bottom: 20px; width: 225px; .background_color_5_gray; //SIDE AREA #egw_fw_sidemenu { position: absolute; top: 0px; bottom: 4px; left: 4px; right: 5px; overflow: hidden; z-index: 0; padding-top: 0.6em; font-size: 0.9em; // SIDE AREA .egw_fw_ui_scrollarea_outerdiv{ .background_color_5_gray; //#################################################### // AREA for // DRAG AND DROP div.ui-sortable { div { padding: 3px 0 1px 3px; cursor: pointer; } } //#################################################### // All Tabs // DRAG AND DROP .egw_fw_ui_sidemenu_entry_header { display: block; margin: 0 0; /*padding: 0px 5px 5px 10px;*/ &:hover { .background_color_15_gray; .rounded(5px); } &:active {.box_shadow_standard_light_inset;} h1 { margin: 0 0 10px 0; padding-top: 0.31em; padding-left: 3em; .color_40_gray; /*font-size: 12px;*/ .fontsize_l; line-height: 17px; } object {background-color: @gray_0; .dimension_width_height_m;} } // #################################### // #### # // ### IMG | ADD NAME # // ### # // ### # //########################################### // aktive APP // aktiver Tab // rounded Corner Left Top .egw_fw_ui_sidemenu_entry_header_active { // cursor: pointer; background-image: url("../images/clear.png"); background-position: 95% -3000px; background-repeat: no-repeat; .background_color_10_gray; .border_radius ( 5px, 0px, 0px, 27px ); .bordered (@gray_30, @gray_30, @gray_30, @gray_30); margin: 0 0 0 0; border-bottom: none; height: 33px; img {padding-left: 9px; padding-top: 6px; height: 18px;} h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;} &:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );} &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );} &:focus { background-image: url("../images/ajax-loader.gif"); background-repeat: no-repeat; background-position: 90% 50%; .Complete_Button_active; .background_color_25_gray; } object { margin-left: 14px; margin-top: 8px; .rounded (3px;); .dimension_width_height_s; } .egw_fw_ui_ajaxloader {margin-top: -26px;} } //#################################################### // Rahmen um APP Einstellungen // egw_fw_ui_sidemenu_entry_content // ######################################## // ## ## // ## ## // ######################################## // ######################################## // ## ## // ## ## // ######################################## // ######################################## // ## ## // ## ## // ######################################## // ######################################## // ## div.egw_fw_ui_category ## // ## &:nth-last-of-type(-n+3) ## // ##################################### .egw_fw_ui_sidemenu_entry_content { display: block; background-image: none; .border_radius (0, 0, 27px, 0); border-color: @gray_30; border-style: solid; border-width: 0px; margin: 0 0 2em 0; // rounded Corner on bottom &:nth-last-of-type(-n+3) { padding: 5px 0.3em 1.5em 0.3em; margin: 0 0 10px 0; .background_color_30_gray; .border_radius (0, 0, 24px, 0); border-color: @gray_30; } //################################################### // *letztes Element */ // has round corners div.egw_fw_ui_category:nth-last-of-type(-n+3) { .border_radius (0, 0, 15px, 0); } //################################################### // Schaltflächen - Elements // Normal .egw_fw_ui_category { margin: 4px 5px 5px 5px; padding: 0.5em 1em; cursor: pointer; // border-top: 7px solid; border-color: @gray_30; background-color: @gray_10; /*background-color: @egw_color_2_d;*/ .border_radius(3px,3px,3px,3px); h1 { margin: 5px 0px 3px 5px; padding: 0px 0px 0px 15px; line-height: 1em; .fontsize_l; background-image:url(../images/arrow_left.png); background-repeat:no-repeat; background-position:left center; } div.egw_fw_ui_category:nth-last-of-type(-n+3) { img.egw_fw_ui_sidemenu_listitem_icon { display: block; } } } //################################# // Hover // on Mouse over change color .egw_fw_ui_category:hover { .background_color_40_gray; padding: 0.5em 1em; } /*######################*/ // Active State // change Background color in Blue // See all Elements .egw_fw_ui_category_active { border-bottom-width: 0px; margin-top: 4px; background-color: @egw_color_2_a; /*.background-color-50-gray;*/ .color_5_gray; .border_radius(3px,3px,3px,3px) !important; h1 { background-image:url(../images/arrow_down.png); line-height: 1em; font-size: 12px; a { color: #FFF; img {.dimension_width_height_s;} &:hover { padding: 5px 30px 5px 0px; width: 200px; .background_color_10_gray; .color_50_gray; .Complete_Button_hover; } } } &:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);} } } .egw_fw_ui_sidemenu_entry_content_bottom { border-width: 0px 1px 1px 1px; } .egw_fw_ui_sidemenu_entry_header_bottom { border-width: 0px; border-color: @gray_0; } .egw_fw_ui_sidemenu_entry_icon { display: inline-block; .dimension_height_m; padding-left: 0; padding-right: 0px; float: left; /*filter grey*/ .img_filter_gray; } } } // SIDEMENU ENDE /*#################################*/ // Trenner (Splitter) #egw_fw_splitter { position: absolute; .background_color_30_gray; width: 5px; top: 40px; bottom: 3px; right: 0px; &:hover {background-color: @egw_color_1;} } // Ende Sidebar // Menu Seite links } /** DON"T MOVE THIS **/ .egw_fw_ui_splitter_vertical { background-image: url(../images/splitter_vert.png); background-position: center; background-repeat: no-repeat; .background_color_30_gray; position: absolute; width: 5px; height: 100%; cursor: col-resize; } //#################################################### // Submenu / Unterpunkte in der Seitenleiste // ######################################## // ## ## // ## ## // ## ############################# ## // ## #.egw_fw_ui_category_content# ## // ## ############################# ## // ## ## // ######################################## // ######################################## // ## ## // ## ## // ######################################## // ######################################## // ## ## // ## ## // ######################################## .egw_fw_ui_category_content { .background_color_0_gray; border-top-width: 0; border-left: 0px solid; border-bottom: 0px solid; margin-left: 4px; margin-top: 0px; padding-bottom: 5px; padding-left: 0px; padding-top: 14px; margin-right: 5px; /*min-height: 50px;*/ // Last Element rounded &:last-of-type{ .border_radius (0, 0, 10px, 0); border-color: @gray_30; } img { .dimension_height_s; vertical-align: middle;} &:hover { .background_color_0_gray; border-color: @gray_50; } input#uical_select_owner_multiple{ .dimension_height_s; vertical-align: middle; } // Favoriten anlegen und löschen .sidebox-favorites{} // ist in etemplate2.less definiert } //#################################################### // Submenu / Unterpunkte in der Seitenleiste // ######################################## // ## ## // ## ## // ## ############################# ## // ## #.egw_fw_ui_category_content# ## // ## ############################# ## // ## # # ## // ## # .egw_fw_ui_sidemenu_listitem ## // ## # # ## // ## ############################# ## // ## ## // ######################################## // ######################################## // ## ## // ## ## // ######################################## // ######################################## // ## ## // ## ## // ######################################## // Sub Sub Menu Item .egw_fw_ui_sidemenu_listitem { padding: 0.5em 0; margin: 0px 0 5px 0px; position: relative; min-height: 16px; background-color: @gray_0; // Icon before img.egw_fw_ui_sidemenu_listitem_icon { /*display: none;*/ .dimension_width_height_xs; padding: 0px; margin: 0px 5px; float: left; } input { height: 16px; width: 81% !important; } input[type="image"] { height: 10px; width: 10px !important; margin-left: 1px; } // mehrere Benutzer auswählen select { max-width: 85% !important; } // Icon rechts der Liste - Auswahl Button img { height: 9px; width: 9px; padding: 0px; float: right; } // normale Links a { // .Complete_Button_text; padding: 5px 0px 5px 5px; text-decoration: none; min-width: 5em; &:hover{ .color_100_gray; } &:active { .box_shadow_standard_light_inset; } } div { a:first-child{ .Complete_Button_text; // padding: 2px; // padding: 5px 30px 5px 0px; width: 72% !important; // background-color: red; } a:first-child:hover { // .Complete_Button_text_hover; // .background-color-30-gray; // padding: 5px 30px 5px 0px; // width: 200px; } //löschen a:nth-child(2){ position: absolute; right: 0; top: 0; background: transparent; padding: 0px 2px 0 2px; width: 10px; min-width: 5px; img { margin: 0 0 0 0; padding: 0em 0em 0 0em; height: 10px; width: 10px; } } a:nth-child(2):hover { background-color: @color_warning; .Complete_Button_Icon_hover ; .color_0_gray; // width: auto; } } // Submenu Hover Item - gelb &:hover{ .color_100_gray; background-color: @egw_color_1_e; padding: 0.5em 0; } } // .egw_fw_ui_sidemenu_listitem // ############################################################## // ## ## // ## ## // Scrollarea .egw_fw_ui_scrollarea { overflow: hidden; z-index: 0; } .egw_fw_ui_scrollarea_button { position: absolute; display: block; width: 100%; height: 12px; z-index: 2; } .egw_fw_ui_scrollarea_button_up.egw_fw_ui_scrollarea_button_hover, .egw_fw_ui_scrollarea_button_down.egw_fw_ui_scrollarea_button_hover { background-image:url(../images/scroll_hover.png); } .egw_fw_ui_scrollarea_button_disabled { display: none !important; } .egw_fw_ui_scrollarea_button_up, .egw_fw_ui_scrollarea_button_down { height: 14px; background-image:url(../images/scroll.png); background-color: white; background-repeat: no-repeat; background-position: center; } .egw_fw_ui_scrollarea_button_up { top: 0px; } .egw_fw_ui_scrollarea_button_down { bottom: 0px; } .egw_fw_ui_scrollarea_outerdiv { height: 100%; } .egw_fw_content_browser_div { display: block; overflow-x: hidden; overflow-y: auto; /* background-color: RGB(240, 240, 255);*/ } .egw_fw_content_browser_div_loading { position: absolute; z-index: 1000; top: 0px; left: 0px; .dimension_width_height_s; background-image: url(../images/ajax-loader.gif); background-position: center; background-repeat: no-repeat; } /* ################################################################################################## * Main // ################################################################################## // ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # // ## ## # // ################################################################################## // ## ## # // ## ## # // ## ## # // ## ## # // ## ## # // ## SIDEBAR ## MAIN # // ## ## #egw_fw_main # // ## ## # // ## ## # // ## ## # /* ##################################################################################################### */ #egw_fw_main { padding: 0; width: auto; // ######################################## // APPS // CHrome hack @media screen and (-webkit-min-device-pixel-ratio:0) { #egw_fw_tabs { /*Chrome needs margin-top*/ margin-top: 3px; } } // ####################################### // AREA for Content #egw_fw_tabs{ position: relative; background-color: transparent; float: left; width: 100%; // ############################################################ // Tabnavigation // Statusmeldung // definiert in layout_messages.less // .egw_fw_ui_app_header_container { } // ######################tabs header ########################## // # # # # # # # # # #### // # # # # # # # # # #### // # tab header # # # # # # # #### // # # # # # # # # # #### // ############################################################ // Div um Tabs .egw_fw_ui_tabs_header { margin: 0px 0 0 0; padding: 1px 1px 0px 0px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; height: 34px; h1 { /*float: left;*/ display: inline; width: 100%; text-align: center; -webkit-margin-before: 0; -webkit-margin-after: 0; } img{ text-align:center; float: none; margin: 0 auto; .dimension_width_height_s; } // Tab // ########## // # # // # # // ########## // inaktive .egw_fw_ui_tab_header { padding-left: 0; position: relative; .border_radius(5px,0, 0, 5px); background: transparent; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0px 5px 0px 0px; padding: 2px 5px 7px 2px; cursor: pointer; border-width: 1px 1px 0 1px; border-style: solid; border-color: @gray_30;; background-repeat:repeat-x; height: 24px; &:hover { /*.background_color_20_gray ;*/ background-color: @egw_color_1_e; } // APP Name h1 { /*font-size: 100%;*/ .fontsize_m; line-height: 1em; margin:0 15px 2px 2px; vertical-align: super; } // Images img.egw_fw_ui_tab_icon { display: inline-block; .dimension_width_height_s; margin: 5px 1px 0 1em; .img_filter_gray; } // FOR SVG IMG object { .dimension_width_height_s; /*background-color: @gray_0;*/ margin: 8px 1px 0 5px; .border_radius(5px,0, 0, 5px); } } // ########## // # # // # # // ########## /*aktive Tabs*/ .egw_fw_ui_tab_header_active { border-width: 1px 1px 0px 1px !important; /*padding: 0 0 5px !important;*/ .background_color_30_gray ; background-image:none !important; &:hover {.background_color_25_gray ;} // aktive Bilder img.egw_fw_ui_tab_icon { display: inline-block; .dimension_width_height_s; } /*aktive Objekte*/ object { .dimension_width_height_m; margin: 0px 1px 0 5px; .border_radius(2px,0, 0, 2px); background-color: @gray_30; } } } // ################# // # close x # // # # // ################# .egw_fw_ui_tab_close_button { right: 3px; top: 1px; display: inline-block; .dimension_width_height_xs; margin-left: 0px; background-repeat: no-repeat; background-position: center; background-image: url(../images/close_button.png); background-size: 10px 10px; position: absolute; :hover { background-image: url(../images/close_button_hover.png); } } // Ende Tabs } // ################################ // Hover // no effect ? .egw_fw_ui_tab_header_hover{ background-color: @egw_color_1_e; } // Der eigentliche Inhalt der APP // ############################################################ // # # # # # # # # # #### // # # # # # # # # # #### // ############################################################ // // Content / Inhalt // // ############################################################ .egw_fw_ui_tab_content { width: 100%; padding: 0px; margin: 0; overflow-x: hidden; overflow-y: hidden; > div { width: 100%; padding: 0 0 0 0; }; } // Ende Main } /* ################################################################## * ADMIN INDEX Tree /* ################################################################## */ .standartTreeImage { .img_filter_gray; .dimension_width_height_s; } // old image (only) buttons, which should only display an image, no button button.image_button { background: none; border: none; } //