extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-07 16:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP framework style:

Browse Source 
- Get toggle menu to the left side and shift the logo after it
- Restyle on toggled active heder
This commit is contained in:
Hadi Nategh 2019-05-31 15:44:02 +02:00
parent dfcdc037f2
commit 7bb633f7d3
7 changed files with 66 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pixelegg/css/mobile.css
View File

@ -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);

28
pixelegg/css/monochrome.css
View File

@ -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);

39
pixelegg/css/pixelegg.css
View File

@ -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;

11
pixelegg/css/pixelegg.less
View File

@ -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;
}
}
}

9
pixelegg/less/layout_raster_header.less
View File

@ -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;*/
}
}

18
pixelegg/less/layout_raster_sidebar.less
View File

@ -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 **/

28
pixelegg/mobile/fw_mobile.css
View File

@ -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);