Merge pull request #590 from glowing-bear/thdesign

[WIP] Improve footer, more monochrome dark design

css/glowingbear.css

@@ -54,9 +54,18 @@ td.message {
 
 #sendMessage {
     width: 100%;
-    height: 36px;
+    height: 35px;
     resize: none;
 }
+
+#sendMessage:focus, #sendMessage:active {
+    border-bottom: 2px solid #555;
+}
+
+.input-group-addon, .input-group-btn {
+    vertical-align: top;
+}
+
 .footer button {
     border-radius: 0;
 }

css/themes/dark.css

@@ -20,8 +20,12 @@ html {
     color: #333;
 }
 
+.nav-pills > li.active > a {
+    background-color: #555;
+}
+
 /* 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, .nav-pills > li.active > a:hover {
     background-color: #eee;
     color: #222;
 }
@@ -39,6 +43,15 @@ tr.bufferline:hover {
     color: black;
 }
 
+.btn-default {
+    background-color: #555;
+    border-color: #444;
+}
+.btn-default:hover {
+    background-color: #666;
+    border-color: #555;
+}
+
 li.notification {
     color: green;
 }
@@ -56,11 +69,19 @@ li.notification {
 }
 
 input[type=text], input[type=password], #sendMessage, .badge {
-    color: #ccc;
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
+}
+
+input[type=text], input[type=password], #sendMessage, .badge, .btn-send {
+    color: #ccc;
     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 {
     color: #aaa;
 }
@@ -87,6 +108,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
 
 #topbar .actions {
     background: #282828;
+    color: #666;
 }
 
 #topbar, #sidebar, .panel, .dropdown-menu, .modal-content {

css/themes/light.css

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

directives/input.html

@@ -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>
     <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>
   </div>
 </form>

directives/plugin.html

@@ -1,5 +1,5 @@
 <div ng-show="plugin.visible">
-  <button class="btn btn-primary btn-sm pull-right unselectable"
+  <button class="btn btn-default btn-sm pull-right unselectable"
           ng-click="hideContent()">
     Hide {{ ::plugin.name }}
   </button>
@@ -8,7 +8,7 @@
 </div>
 
 <div ng-hide="plugin.visible">
-  <button class="btn btn-sm pull-right unselectable"
+  <button class="btn btn-default btn-sm pull-right unselectable"
           ng-class="::{
                     'btn-warning': plugin.nsfw,
                     'btn-primary': !plugin.nsfw}"