Skip to content

Commit

Permalink
Design changes to match openHAB (openhab#90)
Browse files Browse the repository at this point in the history 
* Design changes to match openHAB

This is the try to get the design a bit more aligned with
openHAB. The new design parts are oriented on the designs of
openHAB2, however, they're not the same. Mostly the header and footer,
as well as the navbar, has changed in this commit. The rounded
elements are replaced by angular ones.

Signed-off-by: Florian Schmidt <[email protected]>

* Implement review comments and fix section

Implemented suggestions and comments from Kai Kreuzer and fixed the
handling of the section ejs variable for submenu entries.

Signed-off-by: Florian Schmidt <[email protected]>

* Make the navbar closer to the body
  • Loading branch information
@FlorianSW @marziman
FlorianSW authored and marziman committed May 13, 2017
1 parent cf89e67 commit 50e5d3c
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 248 deletions.
155 changes: 52 additions & 103 deletions public/css/colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,33 @@ a {
a:hover, .scrollspyNav .active a {
color:#ff6600;
}
.btn {
border: 0;
box-shadow: none;
background-image: none;
background-color: #e6e6e6;
border-radius: 0;
font-weight: bold;
padding: 10px 15px;
text-shadow: none;
}

.btn:hover {
background-color: #d1d1d1;
}

.btn:active {
box-shadow: none;
}

.btn-danger {
background-color: #da4f49;
}

.btn-danger:hover {
background-color: #bd362f;
}

a.btn-3d, a.iconBtn {
-moz-box-shadow: 0px 1px 0px 0px #9c9c9c, 0px 2px 4px rgba(10, 10, 10, 0.4);
-webkit-box-shadow: 0px 1px 0px 0px #9c9c9c, 0px 2px 4px rgba(10, 10, 10, 0.4);
Expand Down Expand Up @@ -162,8 +189,8 @@ a.iconWrapper:hover{
.navbar {
border-bottom:1px solid #111
}
#mainMenu ul li a {
color:#ededed;
#mainMenu a {
color: black;
}

/*white menu*/
Expand All @@ -173,65 +200,35 @@ a.iconWrapper:hover{
.navbar {
border-bottom:1px solid #ddd
}
#mainMenu ul li a {
color:#999;
}


#mainMenu ul ul, #mainMenu ul li ul li.hover a {
background-color:#454545;
}
#mainMenu ul ul {
border:1px solid #454545;
}

#mainMenu ul li .active, #mainMenu ul li.hover>a, #mainMenu ul li.hover>a.hasSubMenu, #mainMenu ul li.Shover>a{
color:white!important;
background: #fc9700; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjOTcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
background: -moz-linear-gradient(top, #fc9700 0%, #ff6600 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc9700), color-stop(100%,#ff6600)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fc9700 0%,#ff6600 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fc9700 0%,#ff6600 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fc9700 0%,#ff6600 100%); /* IE10+ */
background: linear-gradient(to bottom, #fc9700 0%,#ff6600 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc9700', endColorstr='#ff6600',GradientType=0 ); /* IE6-8 */
}
#mainMenu ul ul a {
color:#B4B4B4;
}
#mainMenu ul ul li.Shover a {
color:white !important;
background-color:#ff6600;
color: black;
background-color: white;
}
#mainMenu .hasSubMenu {
background-image:url('../img/icons/main-nav-normalstate.png');
background-repeat:no-repeat;
background-position:90% center;

.openhab-online, .openhab-online:hover {
background: #e0f0d5;
}
#mainMenu ul ul li.hover>a, #mainMenu ul ul li.Shover>a {
background-image:url('../img/icons/main-nav-hoverstate.png') !important;
background-repeat:no-repeat !important;
background-position:90% center !important;
color:white !important;
background-color:#ff6600 !important;

.openhab-offline, .openhab-offline:hover {
background: #f1dede;
}

#mainMenu ul ul li.Shover>a {
background-image:none !important;
#mainMenu ul li .active,
#mainMenu ul li.hover>a,
#mainMenu ul li.hover>a.hasSubMenu,
#mainMenu ul li.Shover:not(.openhab-offline):not(.openhab-online)>a {
color: black;
background: #e0e0e0;
}

/*********************** END MAIN MENU ***********************/


/*********************** FOOTER ***********************/
.footer1 {
color:#777;
background:url(../img/textures/bg-footer.png) #252525;
}
.footer2 {
background:url(../img/textures/bg-texture-orange.png) #EDEDED center top; color: #fff;
color: #FFF;
background:#ff6600;
}
#footer h2 {
color:#BBBBBB;
Expand Down Expand Up @@ -370,17 +367,14 @@ ul.entry-meta {
/*********************** PAGES ***********************/
#content{border-top: 1px solid #E1E1E1;}
/* NAV TRAIL */
#navTrail {
color: black;
}
#navTrail a:link, #navTrail a:visited {
color:#444;
color: white;
}
#navTrail span {
color:#444;
}
#navTrail .current {
color:#5e5e5e;
}
#navTrail a:hover {
color:#4F6266;
color: white;
}

/*sidebar*/
Expand Down Expand Up @@ -476,7 +470,7 @@ nav.navigate a:hover {
/*********************** MISCELANIOUS ***********************/
.headerPage, .bgNoSlider, .bgSlider, #sliderWrapperRS, #blogHeader {

background:url(../img/textures/bg-texture-orange.png) #EDEDED center top;
background:#ff6600;
}
#videoSliceWrapper{background:url(../img/textures/bg-texture-video.png) no-repeat #222;}
.focus {
Expand Down Expand Up @@ -652,50 +646,5 @@ a#to-top:hover {
#to-top {
background-color: #777;
}
/*FORM*/
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
border: 1px solid #aaa;
color: #444;
}

/*********************** END MISCELANIOUS ***********************/



/*DARK STYLES */
/*
#mainHeader .navbar-inner{background:#242424;}
.navbar {
border-bottom: 1px solid #4D4D4D;
}
.pagination{
border-top:1px solid #333;
}
body{background:#242424;color:#B9B9B9;}
.topBox,.projectInfo, .callToActionBoxed, .focus{
background-color: #2E2E2E;
}
table.pricingBloc .line1 {background-color:#333333;}
table.pricingBloc td.cost{background-color:#454545;}
table.pricingBloc th, .sign{background-color:#292929;}
table.pricingBloc{border-color:#292929;}
.divider {
background-color: #3A3A3A;
}
.boxWrapper {
background-color: #313131;
}
.boxWrapper h2, .boxWrapper h3{background-color: #434343}
.footer1 {
background:#2B2B2B;
}
#widgetArea .widget {
background-color: #303030;
}
ul.entry-meta {border-top:1px solid #444; border-bottom:1px solid #444;}
.pagination ul > li > a:hover, .pagination ul > .active > span:hover{border-top:2px solid #333}

*/
/*********************** END MISCELANIOUS ***********************/
Loading

0 comments on commit 50e5d3c

Please sign in to comment.