Fix topmenu icons not fully shown. Additionally, some cleanup on layout raster

This commit is contained in:
Hadi Nategh 2016-04-15 13:50:26 +00:00
parent cb605e635c
commit 2c40992428
4 changed files with 251 additions and 357 deletions

View File

@ -3662,6 +3662,7 @@ td.message span.message {
/*font-size: 1.1em;*/ /*font-size: 1.1em;*/
font-size: 12px; font-size: 12px;
line-height: 1.5em; line-height: 1.5em;
display: inline-block;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
/*color: @gray_10;*/ /*color: @gray_10;*/
@ -3681,76 +3682,53 @@ td.message span.message {
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home {
margin-left: 0px; margin-left: 0px;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12px;
content: " ";
background-image: url(../images/topmenu_items/home.png); background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 20px 20px; background-size: 16px;
width: 24px; padding-left: 20px;
height: 24px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs {
margin-left: 0px; margin-left: 0px;
} background-repeat: no-repeat;
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs:before { background-size: 16px;
padding-right: 20px; padding-left: 20px;
content: "";
background-image: url(../images/topmenu_items/setup.png); background-image: url(../images/topmenu_items/setup.png);
background-repeat: no-repeat;
/* background-size: 20px 20px;*/
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
padding-right: 20px;
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
width: 12px; background-size: 16px;
height: 12px; padding-left: 20px;
background-image: url(../images/topmenu_items/access.png); background-image: url(../images/topmenu_items/access.png);
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_cats:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_cats {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/category.png); background-image: url(../images/topmenu_items/category.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_password:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_password {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/password.png); background-image: url(../images/topmenu_items/password.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_manual:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_manual {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/help.png); background-image: url(../images/topmenu_items/help.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/search.png); background-image: url(../images/topmenu_items/search.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout {
background-image: url(../images/topmenu_items/logout.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
width: 16px; background-size: 16px;
height: 16px; padding-left: 20px;
background-image: url(../images/topmenu_items/logout.png);
} }
/* ################################################### /* ###################################################
Slide Effekt Slide Effekt

View File

@ -3651,6 +3651,7 @@ td.message span.message {
/*font-size: 1.1em;*/ /*font-size: 1.1em;*/
font-size: 12px; font-size: 12px;
line-height: 1.5em; line-height: 1.5em;
display: inline-block;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
/*color: @gray_10;*/ /*color: @gray_10;*/
@ -3670,76 +3671,53 @@ td.message span.message {
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home {
margin-left: 0px; margin-left: 0px;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12px;
content: " ";
background-image: url(../images/topmenu_items/home.png); background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 20px 20px; background-size: 16px;
width: 24px; padding-left: 20px;
height: 24px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs {
margin-left: 0px; margin-left: 0px;
} background-repeat: no-repeat;
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs:before { background-size: 16px;
padding-right: 20px; padding-left: 20px;
content: "";
background-image: url(../images/topmenu_items/setup.png); background-image: url(../images/topmenu_items/setup.png);
background-repeat: no-repeat;
/* background-size: 20px 20px;*/
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
padding-right: 20px;
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
width: 12px; background-size: 16px;
height: 12px; padding-left: 20px;
background-image: url(../images/topmenu_items/access.png); background-image: url(../images/topmenu_items/access.png);
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_cats:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_cats {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/category.png); background-image: url(../images/topmenu_items/category.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_password:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_password {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/password.png); background-image: url(../images/topmenu_items/password.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_manual:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_manual {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/help.png); background-image: url(../images/topmenu_items/help.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/search.png); background-image: url(../images/topmenu_items/search.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout {
background-image: url(../images/topmenu_items/logout.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
width: 16px; background-size: 16px;
height: 16px; padding-left: 20px;
background-image: url(../images/topmenu_items/logout.png);
} }
/* ################################################### /* ###################################################
Slide Effekt Slide Effekt

View File

@ -20,32 +20,32 @@
// Header // Header
#egw_fw_header{ #egw_fw_header {
width: 100%; width: 100%;
float: left; float: left;
/* Logo EGW or Company - left top*/ /* Logo EGW or Company - left top*/
#egw_divLogo { #egw_divLogo {
float: left; float: left;
width: 255px; width: 255px;
display: block; display: block;
margin-left: -8px; margin-left: -8px;
text-align: center; text-align: center;
height: 45px; height: 45px;
/*.background_color_5_gray;*/ /*.background_color_5_gray;*/
img { img {
max-width: 209px; max-width: 209px;
border: none; border: none;
position: absolute; position: absolute;
top: 0.1em; top: 0.1em;
left: 1em; left: 1em;
height: 40px; height: 40px;
/*.background_color_5_gray;*/ /*.background_color_5_gray;*/
} }
} }
/* ########################################################################################################################################### /* ###########################################################################################################################################
@ -53,166 +53,128 @@
########################################################################################################################################### ###########################################################################################################################################
*/ */
#egw_fw_topmenu ul, #egw_fw_topmenu ul,
#egw_fw_topmenu > * > ul > li, #egw_fw_topmenu > * > ul > li,
.topmenu_info_item, .topmenu_info_item,
#egw_fw_topmenu_items, #egw_fw_topmenu_items,
#egw_fw_topmenu_info_items { #egw_fw_topmenu_info_items {
display: inline; display: inline;
} }
#egw_fw_topmenu{ #egw_fw_topmenu{
#egw_fw_topmenu_items {
float: left;
padding-top: 14px;
width: 70%;
ul {
margin: 5px 2px;
li{
color: @gray_0;
/*.Button_size_square_32;*/
padding: 8px 10px;
/*.Complete_Button_normal;*/
/*background-color: @gray_10;*/
&:hover{.Complete_Button_hover; color: @gray_0;}
&:active {.Complete_Button_active;}
.transition (0.2s, ease-out);
#egw_fw_topmenu_items { a {
float: left; color: @gray_100;
padding-top: 14px; text-decoration: none;
width: 70%; .dimension_height_l;
/*font-size: 1.1em;*/
.fontsize_l;
line-height: 1.5em;
display:inline-block;
ul { &:hover {
margin: 5px 2px; /*color: @gray_10;*/
border-color: @gray_50;
text-decoration: none !important;
}
li{ &:before {
color: @gray_0; /*.img_filter_gray;*/
/*.Button_size_square_32;*/ /*-webkit-filter: grayscale(100%) brightness(100%) contrast(100%);*/
padding: 8px 10px; /*-webkit-filter: invert(100%);*/
/*.Complete_Button_normal;*/ }
/*background-color: @gray_10;*/ }
}
/*Home*/
li:first-child{
margin-left: 10px;
:before{border: none;}
}
/*home*/
a#topmenu_home {
margin-left: 0px;
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
}
&:hover{.Complete_Button_hover; color: @gray_0;} /*Setup / Einstellungen*/
&:active {.Complete_Button_active;} a#topmenu_prefs{
.transition (0.2s, ease-out); margin-left: 0px;
background-repeat: no-repeat;
a { background-size:16px;
color: @gray_100; padding-left: 20px;
text-decoration: none; background-image: url(../images/topmenu_items/setup.png);
.dimension_height_l; }
/*font-size: 1.1em;*/
.fontsize_l;
line-height: 1.5em;
&:hover {
/*color: @gray_10;*/
border-color: @gray_50;
text-decoration: none !important;
}
&:before {
/*.img_filter_gray;*/
/*-webkit-filter: grayscale(100%) brightness(100%) contrast(100%);*/
/*-webkit-filter: invert(100%);*/
}
}
}
/*Home*/
li:first-child{
margin-left: 10px;
:before{border: none;}
}
/*home*/
a#topmenu_home {
margin-left: 0px;
&:before {
padding-right: 20px;
.fontsize_l;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
background-size: 20px 20px;
.dimension_width_height_m;
}
}
/*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;
/* background-size: 20px 20px;*/
.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_password{
&: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
/*access / Zugriff */
a#topmenu_acl{
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/access.png);
}
/*category*/
a#topmenu_cats{
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/category.png);
}
/*password*/
a#topmenu_password{
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/password.png);
}
/*help*/
a#topmenu_manual{
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/help.png);
}
/*Search*/
a#topmenu_search{
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/search.png);
}
/*logout*/
a#topmenu_logout{
background-repeat: no-repeat;
background-size:16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/logout.png);
}
} // Ende ul
} // Ende Items
} // Ende Topmenu
} // Ende Header } // Ende Header
/* ################################################### /* ###################################################
@ -221,46 +183,44 @@
#egw_fw_topmenu_slide{ #egw_fw_topmenu_slide{
width: auto; width: auto;
text-align: center; text-align: center;
height: 15px; height: 15px;
float: left; float: left;
position: fixed; position: fixed;
left: 194px; left: 194px;
} }
/*ICON List*/ /*ICON List*/
#egw_fw_topmenu_slide.slidedown{ #egw_fw_topmenu_slide.slidedown{
background-image: url("../images/list.png"); background-image: url("../images/list.png");
background-position: center center; background-position: center center;
height: 15px; height: 15px;
width: 15px; width: 15px;
display: block; display: block;
margin-left: 5px; margin-left: 5px;
margin-top: 10px; margin-top: 10px;
background-size: 15px 15px; background-size: 15px 15px;
float: left; float: left;
position: relative; position: relative;
left: -5px; left: -5px;
cursor: pointer; cursor: pointer;
} }
/*Icon ARROW UP*/ /*Icon ARROW UP*/
#egw_fw_topmenu_slide.slideup{ #egw_fw_topmenu_slide.slideup{
background-image: url("../images/slideup.png"); background-image: url("../images/slideup.png");
background-position: center center; background-position: center center;
height: 15px; height: 15px;
width: 15px; width: 15px;
display: block; display: block;
margin-top: -36px; margin-top: -36px;
margin-left: 40px; margin-left: 40px;
cursor: pointer; cursor: pointer;
} }
#slidetoggle{ #slidetoggle{
width: 20px; width: 20px;
height: 20px; height: 20px;
display: block; display: block;
} }

View File

@ -3673,6 +3673,7 @@ td.message span.message {
/*font-size: 1.1em;*/ /*font-size: 1.1em;*/
font-size: 12px; font-size: 12px;
line-height: 1.5em; line-height: 1.5em;
display: inline-block;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
/*color: @gray_10;*/ /*color: @gray_10;*/
@ -3692,76 +3693,53 @@ td.message span.message {
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home {
margin-left: 0px; margin-left: 0px;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12px;
content: " ";
background-image: url(../images/topmenu_items/home.png); background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 20px 20px; background-size: 16px;
width: 24px; padding-left: 20px;
height: 24px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs {
margin-left: 0px; margin-left: 0px;
} background-repeat: no-repeat;
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_prefs:before { background-size: 16px;
padding-right: 20px; padding-left: 20px;
content: "";
background-image: url(../images/topmenu_items/setup.png); background-image: url(../images/topmenu_items/setup.png);
background-repeat: no-repeat;
/* background-size: 20px 20px;*/
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
padding-right: 20px;
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
width: 12px; background-size: 16px;
height: 12px; padding-left: 20px;
background-image: url(../images/topmenu_items/access.png); background-image: url(../images/topmenu_items/access.png);
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_cats:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_cats {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/category.png); background-image: url(../images/topmenu_items/category.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_password:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_password {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/password.png); background-image: url(../images/topmenu_items/password.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_manual:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_manual {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/help.png); background-image: url(../images/topmenu_items/help.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search {
background-repeat: no-repeat;
background-size: 16px;
padding-left: 20px;
background-image: url(../images/topmenu_items/search.png); background-image: url(../images/topmenu_items/search.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat;
width: 12px;
height: 12px;
} }
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout:before { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout {
background-image: url(../images/topmenu_items/logout.png);
padding-right: 20px;
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
width: 16px; background-size: 16px;
height: 16px; padding-left: 20px;
background-image: url(../images/topmenu_items/logout.png);
} }
/* ################################################### /* ###################################################
Slide Effekt Slide Effekt