Start working on theming

templates/head.jade

@@ -9,6 +9,7 @@ mixin head()
   //link(href="/css/bootstrap-theme.min.css", rel="stylesheet")
   link(href="/css/sticky-footer-navbar.css", rel="stylesheet")
   link(href="/css/cytube.css", rel="stylesheet")
+  link(href="/css/colors/default.css", rel="stylesheet")
   //[if lt IE 9]
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

www/assets/js/ui.js

@@ -608,3 +608,15 @@ $("#cs-chatfilters-import").click(function () {
 
     socket.emit("importFilters", data);
 });
+
+var toggleUserlist = function () {
+    if ($("#userlist").css("display") === "none") {
+        $("#userlist").show();
+    } else {
+        $("#userlist").hide();
+    }
+    scrollChat();
+};
+
+$("#usercount").click(toggleUserlist);
+$("#userlisttoggle").click(toggleUserlist);

www/css/colors/dark.css

@@ -0,0 +1,145 @@
+body {
+    background-color: #222222;
+    color: #cccccc;
+}
+
+#ytapiplayer {
+    background-color: #000000;
+}
+
+#userlist, #messagebuffer {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+.drink {
+    border-color: #0000cc;
+}
+
+.queue_entry {
+    background-color: #000000;
+    border-color: #aaaaaa;
+}
+
+.queue_entry > a {
+    color: #cccccc;
+}
+
+.queue_active {
+    background-color: #666666;
+}
+
+.profile-box {
+    background-color: #111111;
+}
+
+.user-dropdown {
+    background-color: #111111;
+}
+
+.dropdown-menu, .dropdown-menu > li > a {
+    color: #cccccc;
+    background-color: #222222;
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:active,
+.dropdown-menu > li > a:focus {
+    color: #cccccc;
+    background-color: #444444;
+}
+
+.form-control {
+    background-color: #000000;
+    color: #cccccc;
+}
+
+.btn, .btn:hover, .btn:active, .btn.active {
+    color: #cccccc;
+}
+
+.btn-default {
+    background-color: #000000;
+    border-color: #555555;
+}
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+    background-color: #222222;
+    border-color: #555555;
+}
+
+.btn-success {
+    background-color: #006600;
+    border-color: #009900;
+}
+
+.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
+    background-color: #008800;
+    border-color: #009900;
+}
+
+.btn-danger {
+    background-color: #660000;
+    border-color: #990000;
+}
+
+.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
+    background-color: #880000;
+    border-color: #990000;
+}
+
+.btn-primary {
+    border-color: #0000cc;
+    background-color: #000066;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
+    border-color: #0000cc;
+    background-color: #000088;
+}
+
+.btn-info {
+    border-color: #0000cc;
+    background-color: #000066;
+}
+
+.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
+    border-color: #0000cc;
+    background-color: #000088;
+}
+
+.well {
+    background-color: #222222;
+    border: 1px solid #555555;
+}
+
+footer {
+    background-color: #222222!important;
+}
+
+.modal-content {
+    background-color: #222222;
+}
+
+.modal-footer {
+    border-top-color: #aaaaaa;
+}
+
+.nav .open > li > a {
+    color: #cccccc;
+    background-color: #222222;
+}
+
+.nav > li > a {
+    color: #cccccc;
+    border-color: #aaaaaa;
+}
+
+.nav > li:hover > a {
+    background-color: #444444;
+    color: #cccccc;
+}
+
+.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus {
+    background-color: #222222;
+    color: #cccccc;
+}

www/css/colors/default.css

@@ -0,0 +1,24 @@
+body {
+    background-color: #f5f5f5;
+}
+
+#ytapiplayer {
+    background-color: #000000;
+}
+
+#chatheader, #currenttitle, #userlist, #messagebuffer, #plmeta {
+    background-color: #ffffff;
+}
+
+footer {
+    background-color: #eeeeee !important;
+}
+
+.queue_active {
+    background-color: #d9edf7;
+}
+
+.profile-box, .user-dropdown {
+    background-color: #ffffff;
+}
+

www/css/cytube.css

@@ -10,10 +10,6 @@
     margin-top: 20px;
 }
 
-#ytapiplayer {
-    background-color: #000000;
-}
-
 #videowrap.hd-video-wrap {
     height: 410px;
     margin-bottom: 10px;
@@ -23,30 +19,16 @@
     margin-top: 10px;
 }
 
-#playlistwrap {
-    border: 1px solid #000000;
-    border-radius: 5px;
-}
-
 #userlist {
     list-style: none outside none;
     padding: 0;
 }
 
-#playlist > li {
-    margin: 3px 0;
-    border: 1px solid #000000;
-    line-height: 28px;
-    height: 28px;
-}
-
 #messagebuffer {
     width: auto;
-    border: 1px solid #ff0000;
 }
 
 #userlist {
-    border: 1px solid #0000ff;
     width: 120px;
     float: left;
     border-right: 0;
@@ -86,28 +68,6 @@
     margin-top: 3px;
 }
 
-#playlistheader > button {
-    margin-top: 5px;
-}
-
-.video-buttons {
-    margin-top: 2px;
-}
-
-.video-title, .video-buttons {
-    float: left;
-    margin-left: 5px;
-}
-
-.video-time {
-    float: right;
-    margin-right: 5px;
-}
-
-.video-title, .video-time {
-    font-size: 8pt;
-}
-
 .clear {
     clear: both;
 }
@@ -137,13 +97,7 @@
     font-weight: bold;
 }
 
-#chatheader, #currenttitle {
+#chatheader > p, #currenttitle {
-    border: 1px solid #aaaaaa;
-    border-bottom: none;
-    margin: 0;
-}
-
-#chatheader > p, #currenttitle > p {
     margin: 0;
 }
 
@@ -159,7 +113,6 @@
 }
 
 #ytapiplayer {
-    background-color: #000000;
     height: 380px;
 }
 
@@ -188,14 +141,10 @@
     margin: 5px 0;
 }
 
-#playlistcontrolswrap, #playlistmanagerwrap, #searchwrap, #voteskipwrap {
+#playlistmanagerwrap {
     margin-top: 10px;
 }
 
-#channelsettingswrap-outer {
-    margin-top: 20px;
-}
-
 #library {
     padding-left: 0;
     padding-right: 0;
@@ -230,7 +179,6 @@
 
 .queue_entry {
     line-height: 22px;
-    background-color: #ffffff;
     padding: 2px;
     font-size: 8pt;
     border: 1px solid #aaaaaa;
@@ -241,11 +189,6 @@
     background-image: url(/img/stripe-diagonal.png);
 }
 
-.queue_active {
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
-
 #queue {
     padding: 0;
     margin: 0;
@@ -406,7 +349,6 @@ li.ui-sortable-helper, li.ui-sortable-placeholder + li.queue_entry {
     position: fixed;
     border: 1px solid #aaaaaa;
     border-radius: 5px;
-    background-color: #ffffff;
     max-width: 200px;
     padding: 5px;
 }
@@ -416,7 +358,6 @@ li.ui-sortable-helper, li.ui-sortable-placeholder + li.queue_entry {
     position: absolute;
     border: 1px solid #aaaaaa;
     border-radius: 5px;
-    background-color: #ffffff;
     color: #000000;
     max-width: 200px;
     padding: 5px;