frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Restyle sidebar menu

Browse Source
This commit is contained in:
Nick O'Leary 2015-01-15 10:27:18 +00:00
parent 687a66344e
commit b0ffc12142
2 changed files with 67 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/index.html
View File

@ -31,15 +31,13 @@
<body spellcheck="false"> <body spellcheck="false">
<div id="header"> <div id="header">
<span class="logo"><img src="node-red.png"> <span>Node-RED</span></span> <span class="logo"><img src="node-red.png"> <span>Node-RED</span></span>
<div class="pull-right"> <ul class="header-toolbar">
<ul class="header-toolbar"> <li><span class="deploy-button-group button-group">
<li><span class="deploy-button-group button-group"> <a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a>
<a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a> <a id="btn-deploy-options" data-toggle="dropdown" class="" href="#"><i class="fa fa-caret-down"></i></a>
<a id="btn-deploy-options" data-toggle="dropdown" class="" href="#"><i class="fa fa-caret-down"></i></a> </span></li>
</span></li> <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
<li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li> <ul>
<ul>
</div>
</div> </div>
<div id="main-container" class="sidebar-closed"> <div id="main-container" class="sidebar-closed">
<div id="palette"> <div id="palette">

135
public/style.css
View File

@ -28,7 +28,7 @@ body {
height: 40px; height: 40px;
background: #000; background: #000;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 0px 5px 20px; padding: 0px 0px 0px 20px;
} }
#dropTarget { #dropTarget {
@ -52,7 +52,7 @@ body {
font-size: 80px; font-size: 80px;
} }
div.btn-group, a.btn { div.btn-group, a.btn {
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -62,6 +62,7 @@ div.btn-group, a.btn {
span.logo { span.logo {
pointer-events: none; pointer-events: none;
float: left; float: left;
margin-top: 5px;
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
text-decoration: none; text-decoration: none;
@ -78,6 +79,7 @@ span.logo img {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
float: right;
} }
#header ul.header-toolbar > li { #header ul.header-toolbar > li {
@ -98,36 +100,40 @@ span.logo img {
#header .button { #header .button {
min-width: 20px; min-width: 20px;
text-align: center; text-align: center;
line-height: 22px; line-height: 40px;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
padding: 4px 12px; padding: 0px 12px;
text-decoration: none; text-decoration: none;
border-radius: 3px;
color: #ccc; color: #ccc;
margin: auto 5px; margin: auto 5px;
vertical-align: middle; vertical-align: middle;
border-left: 2px solid #000;
border-right: 2px solid #000;
} }
#header .button:not(.disabled):hover { #header .button:not(.disabled):hover {
box-shadow: 0 0 2px #fff; border-color: #323232;
} }
#btn-deploy { #btn-deploy {
background: #8C101C; /*#d24741;*/ background: #8C101C; /*#d24741;*/
color: #fff !important; color: #eee !important;
} }
#btn-deploy + a { #btn-deploy + a {
background: #8C101C; /*#BA403B;*/ background: #8C101C; /*#BA403B;*/
color: #fff; color: #eee;
} }
#btn-deploy + a:hover { #btn-deploy + a:hover {
background: #6E0A1E; /*#AD3C38;*/ background: #6E0A1E; /*#AD3C38;*/
color: #fff; color: #eee;
} }
#btn-deploy + a:active { #btn-deploy + a:active {
background: #4C0A17; /*#aa1f19;*/ background: #4C0A17; /*#aa1f19;*/
color: #ccc; color: #ccc;
} }
span.deploy-button-group.open > #btn-deploy + a {
background: #323232 !important;
}
#btn-deploy:not(.disabled):hover { #btn-deploy:not(.disabled):hover {
background: #6E0A1E; /*#ca3f39;*/ background: #6E0A1E; /*#ca3f39;*/
@ -159,6 +165,10 @@ span.logo img {
background: #444; background: #444;
color: #ddd; color: #ddd;
} }
span.deploy-button-group.open > #btn-deploy.disabled + a {
background: #323232 !important;
}
#btn-deploy img { #btn-deploy img {
margin-right: 8px; margin-right: 8px;
@ -169,12 +179,9 @@ span.logo img {
.button-group { .button-group {
display: inline-block; display: inline-block;
border-radius: 3px;
margin: auto 10px; margin: auto 10px;
vertical-align: middle; vertical-align: middle;
background: #555; background: #555;
overflow: hidden;
box-shadow: 0 0 2px #fff;
clear: both; clear: both;
} }
.button-group > a { .button-group > a {
@ -194,13 +201,14 @@ span.logo img {
font-size: 20px !important; font-size: 20px !important;
} }
#btn-sidemenu:active, #btn-sidemenu.active { #btn-sidemenu:active, #btn-sidemenu.active {
background: #333 ; background: #323232;
} }
#header .button:focus { #header .button:focus {
outline: none; outline: none;
} }
li.open #btn-sidemenu { li.open #btn-sidemenu {
background: #666 ; background: #323232 ;
border-color: #323232;
} }
@ -851,8 +859,32 @@ div.node-info {
white-space: normal !important; white-space: normal !important;
} }
.popover-title { display: none; } .dropdown-submenu>a:after {
display: none;
}
.dropdown-submenu>a:before {
display: block;
float: left;
width: 0;
height: 0;
margin-top: 5px;
margin-left: -35px;
border-color: transparent;
border-right-color: #ccc;
border-style: solid;
border-width: 5px 5px 5px 0;
content: " ";
}
.dropdown-submenu.disabled > a:before {
border-right-color: #444;
}
.dropdown-submenu.pull-left>.dropdown-menu {
border-radius: 0;
}
.popover-title { display: none; }
.leftButton { .leftButton {
margin-right: 200px !important; margin-right: 200px !important;
@ -1129,54 +1161,10 @@ i.spinner {
display: none; display: none;
} }
/*
ul#btn-deploy-options-submenu {
background: black;
border-radius: 0;
width: 300px !important;
}
ul#btn-deploy-options-submenu li a {
padding: 10px 30px;
color: white;
}
ul#btn-deploy-options-submenu li a img {
margin-right: 10px;
padding: 4px;
border: 3px solid rgba(0,0,0,0);
}
ul#btn-deploy-options-submenu li a.active img {
border: 3px solid #777677;
}
ul#btn-deploy-options-submenu li a span.menu-label-container {
width: 180px;
vertical-align: top;
display: inline-block;
text-indent: 0px;
}
ul#btn-deploy-options-submenu li a span.menu-label {
font-size: 16px;
display: inline-block;
text-indent: 0px;
}
ul#btn-deploy-options-submenu li a span.menu-sublabel {
color: #aeaeae;
font-size: 13px;
display: inline-block;
text-indent: 0px;
}
ul#btn-deploy-options-submenu li a:hover {
background: #323232;
}
*/
#header ul.dropdown-menu { #header ul.dropdown-menu {
background: black; background: #000;
width: 300px !important; width: 250px !important;
margin-top: 0;
} }
#header ul.dropdown-menu li a { #header ul.dropdown-menu li a {
@ -1220,8 +1208,14 @@ ul#btn-deploy-options-submenu li a:hover {
background: #5A5A5A; background: #5A5A5A;
border-bottom-color: #464646; border-bottom-color: #464646;
} }
#header ul.dropdown-menu li.disabled a {
color: #666;
}
/* Deploy menu customisations */ /* Deploy menu customisations */
#header ul#btn-deploy-options-submenu {
width: 300px !important;
}
#header ul#btn-deploy-options-submenu li a span.menu-label { #header ul#btn-deploy-options-submenu li a span.menu-label {
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
@ -1231,19 +1225,8 @@ ul#btn-deploy-options-submenu li a:hover {
padding: 10px 30px; padding: 10px 30px;
color: white; color: white;
} }
.dropdown-submenu>a:after { #header ul#btn-deploy-options-submenu li a.active > .fa-check {
display: none; display: none;
} }
.dropdown-submenu>a:before {
display: block;
float: left;
width: 0;
height: 0;
margin-top: 5px;
margin-left: -35px;
border-color: transparent;
border-right-color: #ccc;
border-style: solid;
border-width: 5px 5px 5px 0;
content: " ";
}