New sidebar design

This commit is contained in:
Mattias Erming 2014-08-12 16:04:24 -07:00
parent 78d7034f50
commit dfe9ec3b82
2 changed files with 41 additions and 23 deletions

View File

@ -11,6 +11,7 @@ body {
} }
body { body {
background: #fff; background: #fff;
background: #505d70;
color: #222; color: #222;
font: 16px Lato, sans-serif; font: 16px Lato, sans-serif;
margin: 0; margin: 0;
@ -106,9 +107,7 @@ button {
perspective: 1000; perspective: 1000;
} }
#sidebar { #sidebar {
background: #262c36;
bottom: 0; bottom: 0;
color: #fff;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
@ -122,19 +121,14 @@ button {
#sidebar .sign-out { #sidebar .sign-out {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
color: #818b9e; color: #bcc4d3;
font-size: 14px; font-size: 14px;
} }
#sidebar button:hover, #sidebar button:hover,
#sidebar .active { #sidebar .active {
background: #818b9e; color: #fff;
background: rgba(129, 139, 158, .05);
border-color: rgba(129, 139, 158, .03);
} }
#sidebar button.active { #sidebar button.active {
background: #818b9e;
background: rgba(129, 139, 158, .1);
border-color: rgba(129, 139, 158, .06);
color: #fff; color: #fff;
} }
#sidebar .networks { #sidebar .networks {
@ -164,15 +158,19 @@ button {
width: 160px; width: 160px;
} }
#sidebar .chan:first-child { #sidebar .chan:first-child {
color: #84d1ff; color: #84ce88;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
#sidebar .chan:first-child:hover,
#sidebar .chan:first-child.active {
color: #c0f8c3;
}
#sidebar .chan:hover .badge { #sidebar .chan:hover .badge {
opacity: 0; opacity: 0;
} }
#sidebar .chan:hover .close { #sidebar .chan:hover .close {
opacity: .1; opacity: .2;
} }
#sidebar .badge { #sidebar .badge {
background: rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .06);
@ -211,12 +209,19 @@ button {
opacity: .7 !important; opacity: .7 !important;
} }
#footer { #footer {
height: 80px; height: 70px;
line-height: 80px; line-height: 70px;
margin-top: -80px; margin-top: -70px;
padding: 0 8px;
text-align: center; text-align: center;
width: 220px; width: 220px;
} }
#footer button {
border: 0;
}
#footer button.active {
background: none;
}
#footer .icon { #footer .icon {
color: #818b9e; color: #818b9e;
display: inline-block; display: inline-block;
@ -251,11 +256,13 @@ button {
content: "\f032"; content: "\f032";
} }
#main { #main {
bottom: 0; border-radius: 2px;
bottom: 4px;
left: 220px; left: 220px;
overflow: hidden;
position: absolute; position: absolute;
right: 0; right: 5px;
top: 0; top: 4px;
} }
#header { #header {
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
@ -301,7 +308,7 @@ button {
content: "\f037"; content: "\f037";
} }
#windows { #windows {
bottom: 40px; bottom: 48px;
position: absolute; position: absolute;
top: 0px; top: 0px;
width: 100%; width: 100%;
@ -593,23 +600,32 @@ button {
line-height: 1.8; line-height: 1.8;
} }
#form { #form {
background: #e4eaee;
border-top: 1px solid #cfdae1;
bottom: 0; bottom: 0;
height: 40px; height: 48px;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0px; right: 0px;
z-index: 1; z-index: 1;
} }
#form input { #form input {
border: 0; border: 1px solid #cfdae1;
border-top: 1px solid #e9ecef;
font: 13px Consolas, monospace; font: 13px Consolas, monospace;
border-radius: 2px;
height: 100%; height: 100%;
outline: none; outline: none;
padding: 0 12px; padding: 0 12px;
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
} }
#form .inner {
bottom: 7px;
left: 7px;
position: absolute;
right: 7px;
top: 6px;
}
#form #submit { #form #submit {
height: 0; height: 0;
margin-left: -9999px; margin-left: -9999px;

View File

@ -181,8 +181,10 @@
</div> </div>
</div> </div>
<form id="form" action=""> <form id="form" action="">
<input id="submit" tabindex="-1" type="submit"> <div class="inner">
<input id="input" class="mousetrap"> <input id="submit" tabindex="-1" type="submit">
<input id="input" class="mousetrap">
</div>
</form> </form>
</div> </div>
</div> </div>