/** * 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: auto; } #egw_fw_header{ width: 100%; float: left; // Logo #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 / 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_20; &:hover{.Complete_Button_hover; .color_100_gray;} &: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: 100%; width: auto; text-align: center; height: 15px; float: left; position: fixed; left: 194px; } #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; } #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{ // ######################################## // quick_add 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: 83px; top: 5px; .dimension_width_height_s; &:before {content: "+"; font-size: 2em; color: @egw_color_1; line-height: 0.6em} } 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: -5px; } } // 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; padding: 0.5em; top: 5px; position: fixed; right: 5px; &:hover {.box_shadow_standard_light_hover;} &:active {.Complete_Button_active;} &:focus {.box_shadow_standard_light_inset;} } // Print #egw_fw_print { 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; padding: 0.5em; top: 5px; right: 45px; z-index: 200; &:hover {.box_shadow_standard_light_hover;} &:active {.Complete_Button_active;} &:focus {.box_shadow_standard_light_inset;} } /*Name / Datum / angemeldete User*/ #egw_fw_topmenu_info_items { /*postion : top*/ bottom: 0px; right: 5px; padding-right: 0px; position: relative; z-index: 1000; margin-right: 20px; 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; /*postion: bottom*/ /* bottom: 3px; right: 5px; padding-right: 20px; position: fixed; 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) { } } } // Ende items /* ################################################################################################################ * Sidebar * ################################################################################################################*/ #egw_fw_sidebar { position: fixed; overflow: hidden; top: 57px; left: 0px; bottom: 20px; width: 225px; .background_color_5_gray; //Menu #egw_fw_sidemenu { position: absolute; top: 0px; bottom: 4px; left: 4px; right: 5px; overflow: hidden; z-index: 0; padding-top: 0.6em; font-size: 80%; // .background-color-0-gray; .egw_fw_ui_scrollarea_outerdiv{ .background_color_5_gray; // Alle Tabs div.ui-sortable { div { padding: 3px 0 1px 3px; cursor: pointer; } } .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; } object {background-color: @gray_0; .dimension_width_height_m;} } // aktive APP // aktiver Tab .egw_fw_ui_sidemenu_entry_header_active { // cursor: pointer; /*background-image: url("../images/header_active.png");*/ background-image: url("../images/clear.png"); background-position: 95% -3000px; background-repeat: no-repeat; /*background-image: none;*/ .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: 30px; 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 { 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; > div:nth-of-type(1) { padding: 5px 0.3em 1.5em 0.3em; margin: 0 0 10px 0; .background_color_30_gray; .border_radius (0, 0, 27px, 0); border-color: @gray_30; } /*letztes Element*/ div.egw_fw_ui_category:nth-last-of-type(-n+3) { /* color:#ff0000; background-color: yellow !important;*/ .border_radius (0, 0, 15px, 0); } // Schaltflächen // Normal .egw_fw_ui_category { margin: 10px 5px 0px 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; font-size: 9pt; background-image:url(../images/arrow_left.png); background-repeat:no-repeat; background-position:left center; } &:last-child { color:#ff0000; background-color: yellow !important; } div.egw_fw_ui_category:nth-last-of-type(-n+3) { img.egw_fw_ui_sidemenu_listitem_icon { display: block; } } } // Hover .egw_fw_ui_category:hover { .background_color_40_gray; padding: 0.5em 1em; } /*######################*/ // Active State .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); a { color: #FFF; img {.dimension_width_height_s;} } a: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; } } } /*#################################*/ // Trenner (Splitter) #egw_fw_splitter { position: absolute; // background-color: RGB(200, 200, 255); .background_color_30_gray; width: 5px; top: 36px; bottom: 3px; right: 0px; &:hover {background-color: @egw_color_1;} .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; } } // Ende Sidebar } // Menu Seite links // Submenu / Unterpunkte in der Seitenleiste .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;*/ 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; } select#calendar_filter{ margin-top: 4px; } // Favoriten anlegen und löschen .sidebox-favorites{} // ist in etemplate2.less definiert } // 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; /*.Complete_Button_Icon_normal;*/ /* background-image: url("../images/bullet.svg"); background-size: .dimension_width_height_s; background-position: center;*/ } 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){ // float: left; position: absolute; // margin-left: 72%; right: 0; top: 0; background: transparent; // .Complete_Button_Icon_normal; // margin-right: 0.5em; 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 Item &: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: auto;*/ /* background-color: RGB(240, 240, 255);*/ } .egw_fw_content_browser_div_loading { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 16px; height: 16px; background-image: url(../images/ajax-loader.gif); background-position: center; background-repeat: no-repeat; } /* ########################################################################################################################################### /*extended for calender app*/ div#calendar-container { margin-left: 0px; div.calendar{ margin-bottom: 1em; background-color: inherit; padding: 2%; table { font-size: 0.9em; color: #000; cursor: default; padding: 0.3em; .background_color_5_gray; .basefontfamily; thead { // Month .title { background-color: @egw_color_1_a; } // << today >> .headrow {} // daynames .daynames { background-color: @egw_color_2_e; } } tbody { tr.daysrow { &:hover {background-color: @egw_color_1_a;} // fields .name {} .day {} .weekend {} } // hover tr tr.rowhilite td{background-color: @egw_color_1_a;} } } // table } } /* ########################################################################################################################################### /* ########################################################################################################################################### /* ########################################################################################################################################### * Main /* ########################################################################################################################################### */ #egw_fw_main { // margin: 0; // float: left; margin: 3px 0em 0em 2em; // .background-color-0-gray; padding: 0; width: auto; // ######################################## // APPS #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: 4px 0 0 0; padding: 0px 1px 0px 1px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; height: 30px; 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 { text-align: center; padding-left: 0; padding-right: 0; position: relative; .border_radius(5px,0, 0, 5px); /*.background-color-5-gray;*/ background: transparent; display: table-cell; margin: 3px 5px 0px 0px; /*padding: 2px 10px 2px 10px;*/ cursor: pointer; border-width: 1px 1px 0 1px; border-style: solid; border-color: @gray_30;; background-repeat:repeat-x; height: 20px; &:hover {.background_color_30_gray ;} h1 { font-size: 100%; line-height: 1em; margin:0 15px 2px 3px; vertical-align: super; } // Bilder img.egw_fw_ui_tab_icon { display: inline-block; .dimension_width_height_s; margin: 5px 1px 0 1em; .img_filter_gray; } 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: 2px 1px 0 5px; .border_radius(2px,0, 0, 2px); background-color: @gray_30; } } } .egw_fw_ui_tab_close_button { right: 1px; top: 1px; display: inline-block; .dimension_width_height_s; margin-left: 0px; background-repeat: no-repeat; background-position: center; background-image: url(../images/close_button.png); background-size: 10px 10px; float: right; :hover { background-image: url(../images/close_button_hover.png); } } // Ende Tabs } // Hover .egw_fw_ui_tab_header_hover{ background-color: transparent; } // Der eigentliche Inhalt der APP // ############################################################ // # # # # # # # # # #### // # # # # # # # # # #### // ############################################################ // // Content / Inhalt // // ############################################################ .egw_fw_ui_tab_content { width: 100%; padding: 0px; margin: 0; overflow: auto; > div { width: 100%; padding: 0 0 0 0; }; } // Ende Main } // //