/** * 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 <stefan.reinhardt@pixelegg.de> * @package pixelegg * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $ */ /* Created on : 23.07.2014, 13:25:11 Author : stefanreinhardt */ @import (reference) "definitions.less"; /* ################################################################################################################ * Sidebar * ################################################################################################################*/ // AREA UNDER LOGO #egw_fw_sidebar { position: fixed; overflow: hidden; top: 45px; left: 0px; bottom: 0px; width: 225px; //SIDE AREA #egw_fw_sidemenu { position: absolute; top: 1px; bottom: 1px; left: 0px; right: 8px; overflow: hidden; z-index: 0; font-size: 0.9em; border-right: 1px solid #bfbfbf; // 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; &:hover { background-color: @color_hover_row; } &:active {.box_shadow_standard_light_inset;} h1 { margin: 0 0 10px 0; padding-top: 0.4em; 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_0_gray; margin: 0 0 0 0; border-bottom: none; height: 33px; img {padding-left: 9px; padding-top: 7px; height: 18px;} h1 { text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: 0; line-height: 33px; height: 33px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; &:hover {padding-left: 35px;} } &:active {} &:hover { background-image: url(../images/reload.png); background-size: 18px; background-position: 9px 6px; background-repeat: no-repeat; img { display: none !important; } } &: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_bottom { border-width: 0px 1px 1px 1px; } .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; } .egw_fw_ui_sidemenu_entry_content { display: block; background-image: none; border-color: @gray_30; border-style: solid; border-width: 1px; margin: 0 0 2em 0; border-left: none; // rounded Corner on bottom &:nth-last-of-type(-n+3) { .background_color_0_gray; border-color: @gray_30; border-right: 0px; margin-bottom: 0px; border-top-color: white; padding-top: 0px; } & > div {} //################################################### // *letztes Element */ // has round corners div.egw_fw_ui_category:nth-last-of-type(-n+3) { } //################################################### // Schaltflächen - Elements // Normal .egw_fw_ui_category { margin: 4px 5px 5px 5px; padding: 2px 0 2px 0; cursor: pointer; // border-top: 7px solid; border-color: @gray_30; background-color: @gray_10; /*background-color: @egw_color_2_d;*/ h1,h2 { margin: 5px 0px 3px 5px; padding: 0px 0px 0px 24px; line-height: 1em; .fontsize_l; font-weight: normal; background-image:url(../images/arrow_right.svg); background-repeat:no-repeat; background-position:left center; background-size: 12px; } h2 { padding-bottom: 2px; } 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; } /*######################*/ // 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; .color_5_gray; h1,h2 { background-image:url(../images/arrow_down.svg); line-height: 1em; font-size: 12px; background-size: 12px; filter: brightness(3); 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);} } } } // SIDEMENU ENDE /*#################################*/ // Trenner (Splitter) #egw_fw_splitter { position: absolute; width: 8px; top: 40px; bottom: 3px; right: 0px; &:hover {border-color: @gray_10;} } // Ende Sidebar // Menu Seite links } #egw_fw_basecontainer { // Toggle menu #egw_fw_toggler { display: block; width: 51px; height: 45px; position: absolute; z-index: 1; margin-top: 0px; left: 0px; background-color: #fbfbfb; padding-left: 10px; span { background-color: transparent; &:before{ transition-duration: 0.7s; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; transform: rotate(145deg) translate(8px, -2px); -ms-transform: rotate(145deg) translate(8px, -2px); -moz-transform: rotate(145deg) translate(8px, -2px); -webkit-transform: rotate(145deg) translate(8px, -2px); background-color: #b4b4b4; } &:before, &:after { content: ""; position: absolute; left: 0px; top: 3px; width: 35px; height: 3px; background-color: #b4b4b4; backface-visibility: hidden; border-radius: 2px; } &:after { top:15px; transition-duration: 0.7s; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; transform: rotate(-145deg) translate(8px, 2px); -ms-transform: rotate(-145deg) translate(8px, 2px); -moz-transform: rotate(-145deg) translate(8px, 2px); -webkit-transform: rotate(-145deg) translate(8px, 2px); background-color: #b4b4b4; } background-color: transparent; position: relative; display: block; width: 35px; height: 3px; backface-visibility: hidden; border-radius: 2px; top: 11px; left: 10px; } &:hover { span { &:before { background-color: #606060; } &:after { background-color: #606060; } } } } } #egw_fw_basecontainer.egw_fw_sidebar_toggleOn { /* toggler button*/ #egw_fw_toggler { span { background-color: #b4b4b4; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; left:5px; &:before, &:after { transform:none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; width:35px; height:3px; background-color: #b4b4b4; } &:before { top: 10px; } &:after { top:20px; } } &:hover { span { background-color: #606060; &:before { background-color: #606060; } &:after { background-color: #606060; } } } } #egw_fw_sidemenu { top:1px; /*sidebar adjustments*/ .egw_fw_ui_sidemenu_entry_content { display: none !important; } .egw_fw_ui_sidemenu_entry_header_active { border-radius: 0 !important; width: auto !important; border:0; &:hover { background-size: 24px; background-position: 15px 8px; } } .egw_fw_ui_sidemenu_entry_header { width: 50px; height: 35px; h1 { visibility: hidden; } img { margin: 4px 13px 0px !important; padding: 0 !important; float: none !important; display: block !important; height: 24px !important; } } } } /** 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_0_gray; position: absolute; width: 5px; height: 100%; cursor: col-resize; } .egw_fw_ui_splitter.ui-draggable-dragging { background-color: #fbec88; border-left: 1px solid #B4B4B4; opacity: 1 !important; } .egw_fw_ui_splitter_hover { background-color: white; } //#################################################### // 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: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 0px; padding-top: 3px; margin-right: 0px; /*min-height: 50px;*/ // Last Element &:last-of-type{ border-color: @gray_30; margin-bottom: -2px; } 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 .egwTutorial div#list_grid_wrapper { border-bottom-left-radius: 10px; overflow-x:hidden !important; .et2_label { padding-bottom: 5px; } } } //#################################################### // 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: 9px 0px 0px 0px; margin: 0px 0 1px 0px; position: relative; min-height: 18px; background-color: @gray_0; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; // Submenu Hover Item - gelb &:hover{ .color_100_gray; background-color: @color_hover_row; } // Icon before img.egw_fw_ui_sidemenu_listitem_icon { /*display: none;*/ .dimension_width_height_xs; padding: 0px; margin: 0px 6px; 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 6px; text-decoration: none; min-width: 5em; vertical-align: bottom; .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; } } } // .egw_fw_ui_sidemenu_listitem