From 7bb633f7d36221451e4344e2d21b614d9f755c1b Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 31 May 2019 15:44:02 +0200 Subject: [PATCH] WIP framework style: - Get toggle menu to the left side and shift the logo after it - Restyle on toggled active heder --- pixelegg/css/mobile.css | 28 ++++++----------- pixelegg/css/monochrome.css | 28 ++++++----------- pixelegg/css/pixelegg.css | 39 +++++++++++------------- pixelegg/css/pixelegg.less | 11 +++++-- pixelegg/less/layout_raster_header.less | 9 +----- pixelegg/less/layout_raster_sidebar.less | 18 +++++------ pixelegg/mobile/fw_mobile.css | 28 ++++++----------- 7 files changed, 66 insertions(+), 95 deletions(-) diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index b143dabf3b..15e0a40ef6 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -3893,19 +3893,13 @@ td.message span.message { float: left; width: 255px; display: block; - margin-left: -8px; + margin-left: 63px; text-align: center; height: 45px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_divLogo img { max-width: 209px; border: none; - position: absolute; - top: 0.1em; - left: 1em; - height: 40px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_fw_topmenu ul, #egw_fw_header #egw_fw_topmenu > * > ul > li, @@ -4277,11 +4271,10 @@ td.message span.message { #egw_fw_sidebar { position: fixed; overflow: hidden; - top: 38px; + top: 45px; left: 0px; bottom: 0px; width: 225px; - /*.background_color_5_gray;*/ /*#################################*/ } #egw_fw_sidebar #egw_fw_sidemenu { @@ -4292,8 +4285,8 @@ td.message span.message { right: 8px; overflow: hidden; z-index: 0; - padding-top: 0.6em; font-size: 0.9em; + border-right: 1px solid #bfbfbf; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv { background-color: #fafafa; @@ -4334,10 +4327,6 @@ td.message span.message { background-position: 95% -3000px; background-repeat: no-repeat; background-color: #ffffff; - border-top: solid 1px #B4B4B4; - border-left: solid 1px #B4B4B4; - border-right: solid 1px #B4B4B4; - border-bottom: solid 1px #B4B4B4; margin: 0 0 0 0; border-bottom: none; height: 33px; @@ -4481,21 +4470,21 @@ td.message span.message { top: 40px; bottom: 3px; right: 0px; - border-left: 1px solid; - border-color: #B4B4B4; } #egw_fw_sidebar #egw_fw_splitter:hover { border-color: #E6E6E6; } #egw_fw_basecontainer #egw_fw_toggler { display: block; - width: 45px; + width: 52px; height: 45px; position: absolute; z-index: 1; margin-top: 0px; - left: 256px; + border-right: 1px solid #bfbfbf; + left: 0px; background-color: #fbfbfb; + padding-left: 10px; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4608,6 +4597,9 @@ td.message span.message { display: block !important; height: 24px !important; } +#egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_sidemenu .egw_fw_ui_scrollarea { + top: -4px !important; +} /** DON"T MOVE THIS **/ .egw_fw_ui_splitter_vertical { background-image: url(../images/splitter_vert.png); diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 3c8d722cb7..1f4d5d2e3d 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -3882,19 +3882,13 @@ td.message span.message { float: left; width: 255px; display: block; - margin-left: -8px; + margin-left: 63px; text-align: center; height: 45px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_divLogo img { max-width: 209px; border: none; - position: absolute; - top: 0.1em; - left: 1em; - height: 40px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_fw_topmenu ul, #egw_fw_header #egw_fw_topmenu > * > ul > li, @@ -4266,11 +4260,10 @@ td.message span.message { #egw_fw_sidebar { position: fixed; overflow: hidden; - top: 38px; + top: 45px; left: 0px; bottom: 0px; width: 225px; - /*.background_color_5_gray;*/ /*#################################*/ } #egw_fw_sidebar #egw_fw_sidemenu { @@ -4281,8 +4274,8 @@ td.message span.message { right: 8px; overflow: hidden; z-index: 0; - padding-top: 0.6em; font-size: 0.9em; + border-right: 1px solid #bfbfbf; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv { background-color: #fafafa; @@ -4323,10 +4316,6 @@ td.message span.message { background-position: 95% -3000px; background-repeat: no-repeat; background-color: #ffffff; - border-top: solid 1px #B4B4B4; - border-left: solid 1px #B4B4B4; - border-right: solid 1px #B4B4B4; - border-bottom: solid 1px #B4B4B4; margin: 0 0 0 0; border-bottom: none; height: 33px; @@ -4470,21 +4459,21 @@ td.message span.message { top: 40px; bottom: 3px; right: 0px; - border-left: 1px solid; - border-color: #B4B4B4; } #egw_fw_sidebar #egw_fw_splitter:hover { border-color: #E6E6E6; } #egw_fw_basecontainer #egw_fw_toggler { display: block; - width: 45px; + width: 52px; height: 45px; position: absolute; z-index: 1; margin-top: 0px; - left: 256px; + border-right: 1px solid #bfbfbf; + left: 0px; background-color: #fbfbfb; + padding-left: 10px; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4597,6 +4586,9 @@ td.message span.message { display: block !important; height: 24px !important; } +#egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_sidemenu .egw_fw_ui_scrollarea { + top: -4px !important; +} /** DON"T MOVE THIS **/ .egw_fw_ui_splitter_vertical { background-image: url(../images/splitter_vert.png); diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index fc69469d6b..631d56832d 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -3893,19 +3893,13 @@ td.message span.message { float: left; width: 255px; display: block; - margin-left: -8px; + margin-left: 63px; text-align: center; height: 45px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_divLogo img { max-width: 209px; border: none; - position: absolute; - top: 0.1em; - left: 1em; - height: 40px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_fw_topmenu ul, #egw_fw_header #egw_fw_topmenu > * > ul > li, @@ -4277,11 +4271,10 @@ td.message span.message { #egw_fw_sidebar { position: fixed; overflow: hidden; - top: 38px; + top: 45px; left: 0px; bottom: 0px; width: 225px; - /*.background_color_5_gray;*/ /*#################################*/ } #egw_fw_sidebar #egw_fw_sidemenu { @@ -4292,8 +4285,8 @@ td.message span.message { right: 8px; overflow: hidden; z-index: 0; - padding-top: 0.6em; font-size: 0.9em; + border-right: 1px solid #bfbfbf; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv { background-color: #fafafa; @@ -4334,10 +4327,6 @@ td.message span.message { background-position: 95% -3000px; background-repeat: no-repeat; background-color: #ffffff; - border-top: solid 1px #B4B4B4; - border-left: solid 1px #B4B4B4; - border-right: solid 1px #B4B4B4; - border-bottom: solid 1px #B4B4B4; margin: 0 0 0 0; border-bottom: none; height: 33px; @@ -4481,21 +4470,21 @@ td.message span.message { top: 40px; bottom: 3px; right: 0px; - border-left: 1px solid; - border-color: #B4B4B4; } #egw_fw_sidebar #egw_fw_splitter:hover { border-color: #E6E6E6; } #egw_fw_basecontainer #egw_fw_toggler { display: block; - width: 45px; + width: 52px; height: 45px; position: absolute; z-index: 1; margin-top: 0px; - left: 256px; + border-right: 1px solid #bfbfbf; + left: 0px; background-color: #fbfbfb; + padding-left: 10px; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4608,6 +4597,9 @@ td.message span.message { display: block !important; height: 24px !important; } +#egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_sidemenu .egw_fw_ui_scrollarea { + top: -4px !important; +} /** DON"T MOVE THIS **/ .egw_fw_ui_splitter_vertical { background-image: url(../images/splitter_vert.png); @@ -6442,13 +6434,17 @@ form[id^="ranking-"] .dialogHeadbar { } #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active { background-color: rgba(102, 0, 51, 0.3); + border-left: 4px solid #660033 !important; + border-top: 0px !important; + margin-left: 3px; + padding-top: 6px; } #infolog_sidebox_header { border-left: 4px solid #660033 !important; } #infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active { border-top: 4px solid #660033 !important; - border-left: 1px solid silver !important; + border-left: 0px !important; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active { border-top: 4px solid; @@ -6566,7 +6562,8 @@ form[id^="ranking-"] .dialogHeadbar { } #egw_fw_sidebar #egw_fw_basecontainer.egw_fw_sidebar_toggleOn .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active { margin-left: 3px; - padding-top: 3px; + padding-top: 6px; + border-top: 0px !important; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header { border-left: 4px solid #797979; @@ -6576,7 +6573,7 @@ form[id^="ranking-"] .dialogHeadbar { } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active { border-top: 4px solid #797979; - border-left: 1px solid silver !important; + border-left: 0px; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active { border-top-color: #797979; diff --git a/pixelegg/css/pixelegg.less b/pixelegg/css/pixelegg.less index cb2ff56f7e..e7427a9189 100644 --- a/pixelegg/css/pixelegg.less +++ b/pixelegg/css/pixelegg.less @@ -151,13 +151,17 @@ // Infolog #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active { background-color: fade(@infolog-color, 30%); + border-left:4px solid @infolog-color !important; + border-top: 0px !important; + margin-left: 3px; + padding-top: 6px; } #infolog_sidebox_header{ border-left:4px solid @infolog-color !important; } #infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active { border-top:4px solid @infolog-color !important; - border-left: 1px solid silver !important; + border-left: 0px !important; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active { border-top: 4px solid; @@ -276,7 +280,8 @@ .egw_fw_ui_scrollarea_outerdiv { .egw_fw_ui_sidemenu_entry_header_active { margin-left: 3px; - padding-top: 3px; + padding-top: 6px; + border-top: 0px !important; } } } @@ -290,7 +295,7 @@ } .egw_fw_ui_sidemenu_entry_header_active { border-top: 4px solid @default-color; - border-left: 1px solid silver !important; + border-left: 0px; } } } diff --git a/pixelegg/less/layout_raster_header.less b/pixelegg/less/layout_raster_header.less index 1e1e419f97..60cecfce4a 100644 --- a/pixelegg/less/layout_raster_header.less +++ b/pixelegg/less/layout_raster_header.less @@ -31,19 +31,12 @@ float: left; width: 255px; display: block; - margin-left: -8px; + margin-left: 63px; text-align: center; height: 45px; - /*.background_color_5_gray;*/ - img { max-width: 209px; border: none; - position: absolute; - top: 0.1em; - left: 1em; - height: 40px; - /*.background_color_5_gray;*/ } } diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less index 6736cce61b..ffcacf3046 100644 --- a/pixelegg/less/layout_raster_sidebar.less +++ b/pixelegg/less/layout_raster_sidebar.less @@ -26,11 +26,10 @@ #egw_fw_sidebar { position: fixed; overflow: hidden; - top: 38px; + top: 45px; left: 0px; bottom: 0px; width: 225px; - /*.background_color_5_gray;*/ //SIDE AREA #egw_fw_sidemenu { @@ -41,9 +40,8 @@ right: 8px; overflow: hidden; z-index: 0; - padding-top: 0.6em; font-size: 0.9em; - + border-right: 1px solid #bfbfbf; // SIDE AREA .egw_fw_ui_scrollarea_outerdiv{ .background_color_5_gray; @@ -94,7 +92,6 @@ background-position: 95% -3000px; background-repeat: no-repeat; .background_color_0_gray; - .bordered (@gray_30, @gray_30, @gray_30, @gray_30); margin: 0 0 0 0; border-bottom: none; height: 33px; @@ -285,8 +282,6 @@ top: 40px; bottom: 3px; right: 0px; - border-left: 1px solid; - border-color:@gray_30; &:hover {border-color: @gray_10;} } @@ -300,13 +295,15 @@ // Toggle menu #egw_fw_toggler { display: block; - width: 45px; + width: 52px; height: 45px; position: absolute; z-index: 1; margin-top: 0px; - left: 256px; + border-right: 1px solid #bfbfbf; + left: 0px; background-color: #fbfbfb; + padding-left: 10px; span { background-color: transparent; &:before{ @@ -430,6 +427,9 @@ height: 24px !important; } } + .egw_fw_ui_scrollarea { + top: -4px !important; + } } } /** DON"T MOVE THIS **/ diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 63969cbec9..892788fe5f 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -3904,19 +3904,13 @@ td.message span.message { float: left; width: 255px; display: block; - margin-left: -8px; + margin-left: 63px; text-align: center; height: 45px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_divLogo img { max-width: 209px; border: none; - position: absolute; - top: 0.1em; - left: 1em; - height: 40px; - /*.background_color_5_gray;*/ } #egw_fw_header #egw_fw_topmenu ul, #egw_fw_header #egw_fw_topmenu > * > ul > li, @@ -4288,11 +4282,10 @@ td.message span.message { #egw_fw_sidebar { position: fixed; overflow: hidden; - top: 38px; + top: 45px; left: 0px; bottom: 0px; width: 225px; - /*.background_color_5_gray;*/ /*#################################*/ } #egw_fw_sidebar #egw_fw_sidemenu { @@ -4303,8 +4296,8 @@ td.message span.message { right: 8px; overflow: hidden; z-index: 0; - padding-top: 0.6em; font-size: 0.9em; + border-right: 1px solid #bfbfbf; } #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv { background-color: #fafafa; @@ -4345,10 +4338,6 @@ td.message span.message { background-position: 95% -3000px; background-repeat: no-repeat; background-color: #ffffff; - border-top: solid 1px #B4B4B4; - border-left: solid 1px #B4B4B4; - border-right: solid 1px #B4B4B4; - border-bottom: solid 1px #B4B4B4; margin: 0 0 0 0; border-bottom: none; height: 33px; @@ -4492,21 +4481,21 @@ td.message span.message { top: 40px; bottom: 3px; right: 0px; - border-left: 1px solid; - border-color: #B4B4B4; } #egw_fw_sidebar #egw_fw_splitter:hover { border-color: #E6E6E6; } #egw_fw_basecontainer #egw_fw_toggler { display: block; - width: 45px; + width: 52px; height: 45px; position: absolute; z-index: 1; margin-top: 0px; - left: 256px; + border-right: 1px solid #bfbfbf; + left: 0px; background-color: #fbfbfb; + padding-left: 10px; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4619,6 +4608,9 @@ td.message span.message { display: block !important; height: 24px !important; } +#egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_sidemenu .egw_fw_ui_scrollarea { + top: -4px !important; +} /** DON"T MOVE THIS **/ .egw_fw_ui_splitter_vertical { background-image: url(../images/splitter_vert.png);