Improve footer, more monochrome dark design

This commit is contained in:
Tor Hveem 2015-03-29 14:04:12 +02:00
parent 7be9dab1e8
commit 210165daf7
4 changed files with 34 additions and 3 deletions

View file

@ -50,9 +50,14 @@ td.message {
#sendMessage { #sendMessage {
width: 100%; width: 100%;
height: 36px; height: 35px;
resize: none; resize: none;
} }
#sendMessage:focus, #sendMessage:active {
border-bottom: 2px solid #555;
}
.footer button { .footer button {
border-radius: 0; border-radius: 0;
} }

View file

@ -20,6 +20,10 @@ html {
color: #333; color: #333;
} }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
background-color: #555;
}
/* fix for mobile firefox which ignores :hover */ /* fix for mobile firefox which ignores :hover */
.nav-pills > li > a:active, .nav-pills > li > a:active span { .nav-pills > li > a:active, .nav-pills > li > a:active span {
background-color: #eee; background-color: #eee;
@ -39,6 +43,15 @@ tr.bufferline:hover {
color: black; color: black;
} }
.btn-primary {
background-color: #555;
border-color: #444;
}
.btn-primary:hover {
background-color: #666;
border-color: #555;
}
li.notification { li.notification {
color: green; color: green;
} }
@ -55,12 +68,17 @@ li.notification {
background-color:rgba(0, 0, 0, 0.5) background-color:rgba(0, 0, 0, 0.5)
} }
input[type=text], input[type=password], #sendMessage, .badge { input[type=text], input[type=password], #sendMessage, .badge, .btn-send {
color: #ccc; color: #ccc;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
} }
.btn-send:hover, .btn-send:focus {
background-color: #555;
color: white;
}
#connection-infos { #connection-infos {
color: #aaa; color: #aaa;
} }
@ -88,6 +106,9 @@ input[type=text], input[type=password], #sendMessage, .badge {
#topbar .actions { #topbar .actions {
background: #282828; background: #282828;
} }
#topbar a {
color: #666;
}
#topbar, #sidebar, .panel, .dropdown-menu, .modal-content { #topbar, #sidebar, .panel, .dropdown-menu, .modal-content {
background: #282828; background: #282828;

View file

@ -22,6 +22,11 @@ html {
background-color: #222; background-color: #222;
} }
.btn-send {
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.3);
color: #428BCA;
}
tr.bufferline:hover { tr.bufferline:hover {
background-color: #efefef; background-color: #efefef;
} }

View file

@ -3,7 +3,7 @@
<textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()"> <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
</textarea> </textarea>
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default btn-primary unselectable">Send</button> <button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button>
</span> </span>
</div> </div>
</form> </form>