From d1ae03e45c1e317ae9b18cc2414d4a0d6829a9a5 Mon Sep 17 00:00:00 2001 From: Stefan Reinhardt Date: Mon, 24 Feb 2014 17:18:34 +0000 Subject: [PATCH] documentation update and cleanup --- pixelegg/css/pixelegg.css | 160 +++--- .../def_design_pattern_color_font_shadow.less | 18 +- pixelegg/less/etemplate2.less | 148 +++--- pixelegg/less/layout_dialog.less | 2 +- pixelegg/less/layout_raster.less | 454 +++++++++++------- 5 files changed, 442 insertions(+), 340 deletions(-) diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index cfae2993ad..97c1befaca 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -228,16 +228,6 @@ border-radius: 5px; margin-top: 1em; padding-top: 0.2em; - /* &:before { - content: "+ "; - font-size: 2em; - color: @egw_color_1_a; - line-height: 0.6em; - padding-left: 0.1em; - padding-right: 0em; - background-color: @egw_color_2_a; - .border_radius_button_lefttop; - }*/ } .et2_link_to .et2_file input { border: none; @@ -331,12 +321,8 @@ * Tabs widget */ .et2_tabflag { - /*display: inline-block;*/ margin: 1em 3px -1px 0; padding: 4px; - /*cursor: pointer;*/ - /*font-size: 0.8em;*/ - /*.border_radius(3px,0,0,3px);*/ background-color: #bfbfbf; -webkit-box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5); @@ -454,13 +440,12 @@ background-color: transparent; padding-left: 3px; } - /* ################################################################ + /* ################################################################################## * Nextmatch widget - * ################################################################*/ + * ##################################################################################*/ .et2_nextmatch { background-color: #f0f0f0; } - /* images*/ .et2_nextmatch > img { width: 16px; height: 16px; @@ -531,7 +516,7 @@ width: 50% !important; } .nextmatch_header > .filters > select > option { - font-size: 0.9em; + font-size: 11px; } .nextmatch_header > .search { padding: 0 0 0 3px; @@ -549,8 +534,7 @@ /*background-color: @gray_0;*/ border: none; font-size: 11px; - color: #000; - /*margin: 0 2px;*/ + color: #000000; } .nextmatch_header > .search input::-webkit-input-placeholder { /* WebKit browsers */ @@ -575,16 +559,12 @@ -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); width: 45px; - /*height: 1.6em;*/ -webkit-border-radius: 3px; -webkit-border-top-right-radius: 20px; -moz-border-radius: 3px; -moz-border-radius-topright: 20px; border-radius: 3px; border-top-right-radius: 20px; - /*.background_color_search;*/ - color: #ffd44d; - text-decoration: none; /*cursor: pointer; 14022014 entfernt*/ padding: 0px; margin: 8px 10px; @@ -702,23 +682,39 @@ * Kategorien * ################################################################*/ - /*ADD Button*/ - #admin-categories-index_add { - width: 32px; - height: 32px; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); - padding: 0.5em; + div#admin-categories-index { + padding: 0px; } - #admin-categories-index_add:before { - content: "+"; + div#admin-categories-index div.ui-helper-clearfix { + height: 0px; + } + div#admin-categories-index div.et2_hbox_right { + margin-right: 0; + padding: 0; + } + /*ADD Button*/ + button#admin-categories-index_add { + width: 32px; + border: 1px solid #0C5DA5; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); + padding: -0.5em; + background-color: #e6e6e6 !important; + background-size: 16px 16px; + height: 24px; + margin: 6px 2px; + } + button#admin-categories-index_add:before { + content: ""; font-size: 2em; - color: #ffc200; + color: #0c5da5; line-height: 0.6em; padding-left: 0.1em; padding-right: 4em; } - #admin-categories-index_add:hover { + button#admin-categories-index_add:active { + background-color: #1aa200; + } + button#admin-categories-index_add:hover { background-color: #66a1d2 !important; color: #ffc200; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); @@ -731,6 +727,9 @@ border-radius: 3px; border-top-left-radius: 10px; } + button#admin-categories-index_add:active { + background-color: #1aa200 !important; + } #admin-categories-index_filter { top: 8px; } @@ -3817,10 +3816,11 @@ table.nextmatch_header img { #egw_fw_header { width: 100%; float: left; + /* Logo EGW or Company - left top*/ /* ########################################################################################################################################### - Topmenu / Home / Einstellungen / usw.. - ########################################################################################################################################### - */ + Topmenu / Home / Einstellungen / Zugriff / Kategorien usw.. + ########################################################################################################################################### +*/ } #egw_fw_header #egw_divLogo { float: left; @@ -3990,10 +3990,9 @@ table.nextmatch_header img { width: 16px; height: 16px; } -/*################################################# -################################################### - Slide Effekt -###################################################*/ +/* ################################################### + Slide Effekt + ###################################################*/ #egw_fw_topmenu_slide { width: auto; text-align: center; @@ -4002,6 +4001,7 @@ table.nextmatch_header img { position: fixed; left: 194px; } +/*ICON List*/ #egw_fw_topmenu_slide.slidedown { background-image: url("../images/list.png"); background-position: center center; @@ -4015,6 +4015,7 @@ table.nextmatch_header img { position: relative; left: -5px; } +/*Icon ARROW UP*/ #egw_fw_topmenu_slide.slideup { background-image: url("../images/slideup.png"); background-position: center center; @@ -4030,10 +4031,10 @@ table.nextmatch_header img { display: block; } /*################################################# -################################################### - Add / Print / Logout / + Add / Print / Logout / - Name / Date ###################################################*/ +/*#egw_fw_topmenu_addons{}*/ #egw_fw_logout { background-image: url(../images/logout.png); background-size: 16px 16px; @@ -4051,6 +4052,9 @@ table.nextmatch_header img { -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); -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; + -moz-border-radius: 3px; + border-radius: 3px; padding: 0.5em; top: 5px; position: fixed; @@ -4088,6 +4092,9 @@ table.nextmatch_header img { -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); -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; + -moz-border-radius: 3px; + border-radius: 3px; padding: 0.5em; top: 5px; right: 40px; @@ -4108,15 +4115,17 @@ table.nextmatch_header img { -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); } -/*Name / Datum / angemeldete User*/ +/*################################################# +/* Second Line +/* e.g. Name / Datum / angemeldete User +###################################################*/ #egw_fw_topmenu_info_items { - /*postion : top*/ bottom: 0px; - right: 5px; + right: 0px; padding-right: 0px; position: relative; z-index: 1000; - margin-right: 20px; + margin-right: 4px; float: right; display: flex; display: -webkit-box; @@ -4182,6 +4191,9 @@ table.nextmatch_header img { background-repeat: no-repeat; background-size: 20px 20px; background-position: 4px 4px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; width: 16px; height: 16px; } @@ -4351,7 +4363,8 @@ table.nextmatch_header img { padding-top: 0.31em; padding-left: 3em; color: #999999; - font-size: 12px; + /*font-size: 12px;*/ + font-size: 12.100000000000001px; line-height: 17px; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object { @@ -4361,11 +4374,9 @@ table.nextmatch_header img { } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .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: #f0f0f0; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; @@ -4476,7 +4487,6 @@ table.nextmatch_header img { border-style: solid; border-width: 0px; margin: 0 0 2em 0; - /*letztes Element*/ /*######################*/ } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) { @@ -4499,8 +4509,6 @@ table.nextmatch_header img { border-color: #b4b4b4; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category:nth-last-of-type(-n+3) { - /* color:#ff0000; - background-color: yellow !important;*/ -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 15px; @@ -4540,15 +4548,11 @@ table.nextmatch_header img { margin: 5px 0px 3px 5px; padding: 0px 0px 0px 15px; line-height: 1em; - font-size: 12px; + font-size: 12.100000000000001px; background-image: url(../images/arrow_left.png); background-repeat: no-repeat; background-position: left center; } -#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category:last-child { - color: #ff0000; - background-color: yellow !important; -} #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category div.egw_fw_ui_category:nth-last-of-type(-n+3) img.egw_fw_ui_sidemenu_listitem_icon { display: block; } @@ -4835,13 +4839,25 @@ table.nextmatch_header img { background-position: center; background-repeat: no-repeat; } -/* ########################################################################################################################################### -/* ########################################################################################################################################### -* Main -/* ########################################################################################################################################### +/* ################################################################################################## +* Main +// ################################################################################## +// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # +// ## ## # +// ################################################################################## +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## SIDEBAR ## MAIN # +// ## ## #egw_fw_main # +// ## ## # +// ## ## # +// ## ## # +/* ##################################################################################################### */ #egw_fw_main { - margin: 3px 0em 0em 2em; padding: 0; width: auto; } @@ -4856,9 +4872,6 @@ table.nextmatch_header img { background-color: transparent; float: left; width: 100%; - /*margin-top: 3px;*/ - /*position: absolute;*/ - /*top: 65px;*/ } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { margin: 0px 0 0 0; @@ -4902,7 +4915,6 @@ table.nextmatch_header img { border-bottom-left-radius: 0; border-top-left-radius: 5px; /*.background-clip(padding-box);*/ - /*.background-color-5-gray;*/ background: transparent; display: inline-table; margin: 0px 5px 0px 0px; @@ -4915,10 +4927,12 @@ table.nextmatch_header img { height: 24px; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover { - background-color: #cccccc; + /*.background_color_20_gray ;*/ + background-color: #ffdd73; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { - font-size: 100%; + /*font-size: 100%;*/ + font-size: 11px; line-height: 1em; margin: 0 1px 2px 2px; vertical-align: super; @@ -5009,7 +5023,7 @@ table.nextmatch_header img { background-image: url(../images/close_button_hover.png); } #egw_fw_main .egw_fw_ui_tab_header_hover { - background-color: transparent; + background-color: #ffdd73; } #egw_fw_main .egw_fw_ui_tab_content { width: 100%; @@ -5022,9 +5036,9 @@ table.nextmatch_header img { width: 100%; padding: 0 0 0 0; } -/* ########################################################################################################################################### +/* ################################################################## * ADMIN INDEX Tree -/* ########################################################################################################################################### +/* ################################################################## */ .standartTreeImage { /*filter grey*/ diff --git a/pixelegg/less/def_design_pattern_color_font_shadow.less b/pixelegg/less/def_design_pattern_color_font_shadow.less index 2e5216305a..11f005a9e2 100755 --- a/pixelegg/less/def_design_pattern_color_font_shadow.less +++ b/pixelegg/less/def_design_pattern_color_font_shadow.less @@ -198,6 +198,17 @@ } +@basefontsize : 11px; + +.fontsize_normal {font-size: @basefontsize;} + +.fontsize_xs {font-size: @basefontsize*0.25;} // h5 +.fontsize_s {font-size: @basefontsize*0.5;} // h4 +.fontsize_m {font-size: @basefontsize*1;} // p +.fontsize_l {font-size: @basefontsize*1.1;} // h3 + SIDEBAR APPS H1 +.fontsize_xl {font-size: @basefontsize*1.3;} // h2 +.fontsize_xxl {font-size: @basefontsize*1.8;} // h1 + /*#####################################################################*/ /* Radius*/ @@ -234,9 +245,6 @@ box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); } - - - // auf hellem Hintergrund .box_shadow_standard_light { @@ -245,16 +253,12 @@ box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); } - // wird dunkler .box_shadow_standard_light_hover { -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); - // -webkit-box-shadow: none; - // -moz-box-shadow: none; - // box-shadow:none; } diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index 7edb18358a..69c50a884c 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -159,16 +159,7 @@ span.et2_date span { padding: 1em; } - /* &:before { - content: "+ "; - font-size: 2em; - color: @egw_color_1_a; - line-height: 0.6em; - padding-left: 0.1em; - padding-right: 0em; - background-color: @egw_color_2_a; - .border_radius_button_lefttop; - }*/ + &:hover {background-color: @color_positive_action_active !important;} &:active {background-color: @color_positive_action_active !important;} } @@ -236,13 +227,8 @@ div.et2_link_entry{ */ .et2_tabflag { - /*display: inline-block;*/ margin: 1em 3px -1px 0; padding: 4px; - /*cursor: pointer;*/ - /*font-size: 0.8em;*/ - /*.border_radius(3px,0,0,3px);*/ - .background_color_25_gray; .inner_shadow(1px, 0px, 0px, 0.5); -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); @@ -334,13 +320,22 @@ hr { span.et2_label {background-color: transparent;padding-left: 3px;} } } -/* ################################################################ + + + + + +/* ################################################################################## * Nextmatch widget - * ################################################################*/ + * ##################################################################################*/ +// +// SEARCH FIELD | SEARCH BUTTON ###### FILTER ##### EXPORT IMG ### FAVORITES ### COUNT + +// AREA AROUND CONTENT .et2_nextmatch { .background_color_10_gray; } -/* images*/ +// ALL images .et2_nextmatch > img {.dimension_width_height_s;} @@ -349,14 +344,14 @@ hr { // count .nextmatch_header .header_count { - font-size: 11px; + .fontsize_normal; position: relative; top: 3px; height: 22px; - // count + // count number span { - font-size: 11px; + .fontsize_normal; top: 4px; position: relative; } @@ -408,10 +403,14 @@ hr { // Select -> Option -.nextmatch_header > .filters > select > option {font-size: 0.9em;} +.nextmatch_header > .filters > select > option {.fontsize_normal;} + +// #################################################### // Search Field +// +// .nextmatch_header > .search{ padding: 0 0 0 3px; @@ -424,28 +423,28 @@ hr { /*.background_color_search;*/ /*background-color: @gray_0;*/ border: none; - font-size: 11px; - color: #000; - - /*margin: 0 2px;*/ + .fontsize_normal; + color: @gray_100; } - input::-webkit-input-placeholder { + + input::-webkit-input-placeholder { /* WebKit browsers */ color: @gray_60; } - input:-moz-placeholder { + input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: @gray_60; + color: @gray_60; } - input::-moz-placeholder { + input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: @gray_60; } - input:-ms-input-placeholder { + input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: @gray_60; } + // SEARCH BUTTON button.et2_button { .border_normal; @@ -455,19 +454,11 @@ hr { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); width: 45px; - /*height: 1.6em;*/ - .border_radius_button_righttop; - /*.background_color_search;*/ - - color: lighten(@egw_color_1, 15%); - text-decoration: none; - /*cursor: pointer; 14022014 entfernt*/ padding: 0px; margin: 8px 10px; margin-left: 0px; - background-image: url("../images/search.png"); background-position: center 0; background-size: contain; @@ -476,22 +467,22 @@ hr { white-space: nowrap; overflow: hidden; - &:hover{ - .box_shadow_standard_light_hover; - background-color: @egw_color_2_e !important; - /*hide arrow*/ - color: @egw_color_2_e !important; - } + &:hover{ + .box_shadow_standard_light_hover; + background-color: @egw_color_2_e !important; + /*hide arrow*/ + color: @egw_color_2_e !important; + } - &:active { - /*.background_verlauf_diagonal_gray;*/ - background-color: @color_positive_action_active !important; - } + &:active { + /*.background_verlauf_diagonal_gray;*/ + background-color: @color_positive_action_active !important; + } - &:focus { - .Complete_Button_input_focus; - /*background-color: @color_positive_action_active !important;*/ - } + &:focus { + .Complete_Button_input_focus; + /*background-color: @color_positive_action_active !important;*/ + } } @@ -508,9 +499,7 @@ hr { } -.nextmatch_header .et2_button_icon { - -} +.nextmatch_header .et2_button_icon {} // Export Button .nextmatch_header > .filters .et2_button_icon { @@ -550,26 +539,31 @@ hr { * ################################################################*/ + + +div#admin-categories-index{ + + padding: 0px; + + // save space above nextmatch + // set height to zero + div.ui-helper-clearfix { height: 0px;} + + // move add button + div.et2_hbox_right { + margin-right: 0; + padding: 0; + } + +} + /*ADD Button*/ -#admin-categories-index_add { - - .dimension_width_height_l; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); - padding: 0.5em; - - - &:before { - content: "+"; - font-size: 2em; - color: @egw_color_1; - line-height: 0.6em; - padding-left: 0.1em; - padding-right: 4em; - } - - &:hover {.Complete_Button_add_hover}; - +button#admin-categories-index_add { + .Complete_Button_add_only_plus; + .dimension_height_m; + margin: 6px 2px; + &:hover {.Complete_Button_add_only_plus_hover;} + &:active {background-color: @color_positive_action_active !important;} } #admin-categories-index_filter {top: 8px;} @@ -762,11 +756,11 @@ div.et2_progress > div { * et2_toolbar */ .ui-toolbar_dropShadow { - min-height: 30px; + min-height: 30px; border: dashed; border-width: 1px; border-color: gray; - opacity:0.7; + opacity:0.7; } /** diff --git a/pixelegg/less/layout_dialog.less b/pixelegg/less/layout_dialog.less index 7395b51757..7ce9da01f0 100755 --- a/pixelegg/less/layout_dialog.less +++ b/pixelegg/less/layout_dialog.less @@ -18,7 +18,7 @@ @import (reference) "def_buttons.less"; /*@import (reference) "def_content_elements.less";*/ @import (reference) "def_design_pattern_color_font_shadow.less"; -@import (reference) "def_messages.less"; + // Dialoge Allgemeine Definition diff --git a/pixelegg/less/layout_raster.less b/pixelegg/less/layout_raster.less index 9bb71cc387..386d16f5b8 100644 --- a/pixelegg/less/layout_raster.less +++ b/pixelegg/less/layout_raster.less @@ -36,40 +36,39 @@ .egwGridView_scrollarea { width: 100%; overflow-y: auto; - overflow-x: hidden; + overflow-x: hidden; } #egw_fw_header{ width: 100%; float: left; - // Logo - + /* 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; + 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; - } + img { + width: 209px; + border: none; + position: absolute; + top: 0.41em; + left: 1em; + .background_color_5_gray; + } - } + } - /* ########################################################################################################################################### - Topmenu / Home / Einstellungen / usw.. - ########################################################################################################################################### - */ +/* ########################################################################################################################################### + Topmenu / Home / Einstellungen / Zugriff / Kategorien usw.. + ########################################################################################################################################### +*/ #egw_fw_topmenu ul, #egw_fw_topmenu > * > ul > li, @@ -217,15 +216,12 @@ } // Ende Header - -/*################################################# -################################################### - Slide Effekt -###################################################*/ +/* ################################################### + Slide Effekt + ###################################################*/ #egw_fw_topmenu_slide{ - // width: 100%; width: auto; text-align: center; height: 15px; @@ -234,6 +230,8 @@ left: 194px; } + + /*ICON List*/ #egw_fw_topmenu_slide.slidedown{ background-image: url("../images/list.png"); background-position: center center; @@ -247,6 +245,8 @@ position: relative; left: -5px; } + +/*Icon ARROW UP*/ #egw_fw_topmenu_slide.slideup{ background-image: url("../images/slideup.png"); background-position: center center; @@ -257,6 +257,7 @@ margin-left: 40px; } + #slidetoggle{ width: 20px; height: 20px; @@ -266,18 +267,14 @@ /*################################################# -################################################### - Add / Print / Logout / + Add / Print / Logout / - Name / Date ###################################################*/ -#egw_fw_topmenu_addons{ - - -} +/*#egw_fw_topmenu_addons{}*/ -// Logout +// Button Logout #egw_fw_logout { background-image: url(../images/logout.png); background-size: 16px 16px; @@ -292,6 +289,7 @@ .Button_size_square_16; .border_normal; .box_shadow_standard_light; + .border_radius_button_normal; padding: 0.5em; top: 5px; position: fixed; @@ -305,7 +303,7 @@ -// Print +// Button Print #egw_fw_print { background-image: url(../images/print.png); @@ -321,6 +319,7 @@ .Button_size_square_16; .border_normal; .box_shadow_standard_light; + .border_radius_button_normal; padding: 0.5em; top: 5px; right: 40px; @@ -332,18 +331,20 @@ } +/*################################################# +/* Second Line +/* e.g. Name / Datum / angemeldete User +###################################################*/ -/*Name / Datum / angemeldete User*/ #egw_fw_topmenu_info_items { - /*postion : top*/ bottom: 0px; - right: 5px; + right: 0px; padding-right: 0px; position: relative; z-index: 1000; - margin-right: 20px; + margin-right: 4px; float: right; @@ -418,8 +419,9 @@ /*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); @@ -435,7 +437,7 @@ background-size: 20px 20px; background-position: 4px 4px; - + .border_radius_button_normal; .dimension_width_height_s; &:before { @@ -450,7 +452,9 @@ &:focus {.box_shadow_standard_light_inset;} } - // Country switch + // ############################################################################## + // quick_add selectbox + // ADD different APPs select#quick_add_selectbox { visibility: hidden; @@ -465,8 +469,9 @@ } - - // JS ERROR + // ############################################################################## + // JS ERROR BUTTON + // blinking red IMG img#topmenu_info_error{ .dimension_width_height_s; position: fixed; @@ -518,7 +523,7 @@ * Sidebar * ################################################################################################################*/ - +// AREA UNDER LOGO #egw_fw_sidebar { position: fixed; overflow: hidden; @@ -528,7 +533,7 @@ width: 225px; .background_color_5_gray; - //Menu + //SIDE AREA #egw_fw_sidemenu { position: absolute; top: 0px; @@ -539,13 +544,15 @@ z-index: 0; padding-top: 0.6em; font-size: 0.9em; - // .background-color-0-gray; - + + // SIDE AREA .egw_fw_ui_scrollarea_outerdiv{ .background_color_5_gray; - // Alle Tabs + //#################################################### + // AREA for + // DRAG AND DROP div.ui-sortable { div { @@ -554,44 +561,54 @@ } } + + //#################################################### + // All Tabs + // DRAG AND DROP .egw_fw_ui_sidemenu_entry_header { - display: block; - margin: 0 0; - /*padding: 0px 5px 5px 10px;*/ + display: block; + margin: 0 0; + /*padding: 0px 5px 5px 10px;*/ - &:hover { - .background_color_15_gray; - .rounded(5px); - } + &:hover { + .background_color_15_gray; + .rounded(5px); + } - &:active {.box_shadow_standard_light_inset;} + &: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; - line-height: 17px; - } + 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;} + 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/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 ); @@ -629,8 +646,33 @@ } - + //#################################################### // 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; @@ -640,6 +682,8 @@ 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; @@ -648,14 +692,17 @@ border-color: @gray_30; } - /*letztes Element*/ + + + //################################################### + // *letztes Element */ + // has round corners 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 + //################################################### + // Schaltflächen - Elements // Normal .egw_fw_ui_category { margin: 10px 5px 0px 5px; @@ -673,26 +720,23 @@ margin: 5px 0px 3px 5px; padding: 0px 0px 0px 15px; line-height: 1em; - font-size: 12px; + .fontsize_l; 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; + } } - div.egw_fw_ui_category:nth-last-of-type(-n+3) { - img.egw_fw_ui_sidemenu_listitem_icon { - display: block; - } - } - } - // Hover + //################################# + // Hover + // on Mouse over change color .egw_fw_ui_category:hover { .background_color_40_gray; padding: 0.5em 1em; @@ -702,6 +746,8 @@ /*######################*/ // Active State + // change Background color in Blue + // See all Elements .egw_fw_ui_category_active { border-bottom-width: 0px; margin-top: 4px; @@ -717,21 +763,22 @@ line-height: 1em; font-size: 12px; - a { + 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 { + 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);} } @@ -751,29 +798,26 @@ } .egw_fw_ui_sidemenu_entry_icon { - display: inline-block; - .dimension_height_m; + display: inline-block; + .dimension_height_m; - padding-left: 0; - padding-right: 0px; - float: left; + padding-left: 0; + padding-right: 0px; + float: left; - /*filter grey*/ - .img_filter_gray; - - - } + /*filter grey*/ + .img_filter_gray; + } } - } + } // SIDEMENU ENDE /*#################################*/ // Trenner (Splitter) #egw_fw_splitter { position: absolute; - // background-color: RGB(200, 200, 255); .background_color_30_gray; width: 5px; top: 40px; @@ -786,6 +830,8 @@ // Menu Seite links } + + /** DON"T MOVE THIS **/ .egw_fw_ui_splitter_vertical { background-image: url(../images/splitter_vert.png); @@ -801,9 +847,29 @@ + //#################################################### + // Submenu / Unterpunkte in der Seitenleiste + // ######################################## + // ## ## + // ## ## + // ## ############################# ## + // ## #.egw_fw_ui_category_content# ## + // ## ############################# ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## -// Submenu / Unterpunkte in der Seitenleiste + .egw_fw_ui_category_content { .background_color_0_gray; @@ -818,18 +884,18 @@ margin-right: 5px; /*min-height: 50px;*/ - // Last Element rounded - &:last-of-type{ + // Last Element rounded + &:last-of-type{ .border_radius (0, 0, 10px, 0); border-color: @gray_30; } - img { .dimension_height_s; vertical-align: middle;} + img { .dimension_height_s; vertical-align: middle;} - &:hover { - .background_color_0_gray; - border-color: @gray_50; - } + &:hover { + .background_color_0_gray; + border-color: @gray_50; + } input#uical_select_owner_multiple{ .dimension_height_s; @@ -845,7 +911,33 @@ } + //#################################################### + // Submenu / Unterpunkte in der Seitenleiste + // ######################################## + // ## ## + // ## ## + // ## ############################# ## + // ## #.egw_fw_ui_category_content# ## + // ## ############################# ## + // ## # # ## + // ## # .egw_fw_ui_sidemenu_listitem ## + // ## # # ## + // ## ############################# ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // ######################################## + // ## ## + // ## ## + // ######################################## + + // Sub Sub Menu Item @@ -951,7 +1043,7 @@ - // Submenu Item - gelb + // Submenu Hover Item - gelb &:hover{ .color_100_gray; background-color: @egw_color_1_e; @@ -965,7 +1057,9 @@ - +// ############################################################## +// ## ## +// ## ## // Scrollarea .egw_fw_ui_scrollarea @@ -1034,8 +1128,7 @@ z-index: 1000; top: 0px; left: 0px; - width: 16px; - height: 16px; + .dimension_width_height_s; background-image: url(../images/ajax-loader.gif); background-position: center; background-repeat: no-repeat; @@ -1045,24 +1138,29 @@ -/* ########################################################################################################################################### -/* ########################################################################################################################################### -* Main -/* ########################################################################################################################################### +/* ################################################################################################## +* Main +// ################################################################################## +// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu # +// ## ## # +// ################################################################################## +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## ## # +// ## SIDEBAR ## MAIN # +// ## ## #egw_fw_main # +// ## ## # +// ## ## # +// ## ## # +/* ##################################################################################################### */ #egw_fw_main { - // margin: 0; - // float: left; - margin: 3px 0em 0em 2em; - // .background-color-0-gray; padding: 0; width: auto; - - - - // ######################################## // APPS // CHrome hack @@ -1073,16 +1171,14 @@ } } - + // ####################################### + // AREA for Content #egw_fw_tabs{ - position: relative; background-color: transparent; float: left; width: 100%; - /*margin-top: 3px;*/ - /*position: absolute;*/ - /*top: 65px;*/ + // ############################################################ // Tabnavigation @@ -1101,35 +1197,30 @@ // Div um Tabs .egw_fw_ui_tabs_header { - margin: 0px 0 0 0; - padding: 0px 1px 0px 1px; - 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; - } + 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 + img{ + text-align:center; + float: none; + margin: 0 auto; + .dimension_width_height_s; + } + // Tab // ########## // # # // # # @@ -1141,13 +1232,8 @@ padding-left: 0; padding-right: 0; position: relative; - .border_radius(5px,0, 0, 5px); - - - /*.background-color-5-gray;*/ background: transparent; - display: inline-table; margin: 0px 5px 0px 0px; padding: 2px 2px 5px 2px; @@ -1155,21 +1241,24 @@ border-width: 1px 1px 0 1px; border-style: solid; border-color: @gray_30;; - background-repeat:repeat-x; - height: 24px; - &:hover {.background_color_20_gray ;} + &:hover { + /*.background_color_20_gray ;*/ + background-color: @egw_color_1_e; + } + // APP Name h1 { - font-size: 100%; + /*font-size: 100%;*/ + .fontsize_m; line-height: 1em; margin:0 1px 2px 2px; vertical-align: super; } - // Bilder + // Images img.egw_fw_ui_tab_icon { display: inline-block; .dimension_width_height_s; @@ -1177,7 +1266,8 @@ .img_filter_gray; } - + + // FOR SVG IMG object { .dimension_width_height_s; /*background-color: @gray_0;*/ @@ -1194,7 +1284,6 @@ // # # // # # // ########## - /*aktive Tabs*/ .egw_fw_ui_tab_header_active { border-width: 1px 1px 0px 1px !important; @@ -1221,6 +1310,10 @@ } } + // ################# + // # close x # + // # # + // ################# .egw_fw_ui_tab_close_button { right: 1px; top: 1px; @@ -1237,19 +1330,16 @@ :hover { background-image: url(../images/close_button_hover.png); } - } - - // Ende Tabs } - - - + + + // ################################ // Hover - + // no effect ? .egw_fw_ui_tab_header_hover{ - background-color: transparent; + background-color: @egw_color_1_e; } // Der eigentliche Inhalt der APP @@ -1269,7 +1359,7 @@ padding: 0px; margin: 0; overflow-x: hidden; - overflow-y: hidden; + overflow-y: hidden; > div { @@ -1280,9 +1370,9 @@ // Ende Main } -/* ########################################################################################################################################### +/* ################################################################## * ADMIN INDEX Tree -/* ########################################################################################################################################### +/* ################################################################## */