From 98b3587341d48fc7730e8d61e824ba7aaad61d82 Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Sat, 23 Mar 2013 17:15:19 -0500
Subject: [PATCH] Support custom CSS

---
 www/assets/css/custom/dark.css | 129 +++++++++++++++++++++++++++++++++
 www/assets/js/callbacks.js     |  11 ++-
 www/assets/js/client.js        |   5 +-
 www/index.html                 |  10 +--
 4 files changed, 143 insertions(+), 12 deletions(-)
 create mode 100644 www/assets/css/custom/dark.css

diff --git a/www/assets/css/custom/dark.css b/www/assets/css/custom/dark.css
new file mode 100644
index 00000000..e644ac72
--- /dev/null
+++ b/www/assets/css/custom/dark.css
@@ -0,0 +1,129 @@
+body {
+    background-color: #333333;
+}
+
+.well, .dropdown, .dropdown-menu,
+.dropdown-menu li, .dropdown-menu li a {
+    background-color: #222222;
+    color: #ffffff;
+}
+
+input[type="text"] {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+legend {
+    color: #ffffff;
+}
+
+.dropdown-menu {
+    border: 1px solid #ffffff;
+}
+
+.close {
+    color: #ffffff;
+}
+
+.alert {
+    background-color: #000066;
+    color: #ffffff;
+}
+
+.alert-error {
+    background-color: #660000;
+    color: #ffffff;
+}
+
+.videolist li {
+    color: #ffffff;
+    background-color: #000000;
+    border: 1px solid #ffffff;
+}
+
+.videolist li.alert-info {
+    background-color: #000055;
+    border: 1px solid #0000ff;
+}
+
+.qe_btn {
+    height: 20px;
+    font-family: Monospace;
+    padding: 0 5px;
+    margin: auto;
+    overflow: hidden;
+}
+
+.qe_buttons {
+    float: left;
+}
+
+.qe_title {
+    float: left;
+}
+
+.qe_time {
+    float: right;
+}
+
+.qe_clear {
+    clear: both;
+}
+
+#library {
+    width: 640px;
+}
+
+#userlist {
+    background-color: #000000;
+    color: #ffffff
+}
+
+#messagebuffer {
+    background-color: #000000;
+    color: #ffffff
+}
+
+#chatline {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+.userlist_siteadmin {
+    color: #cc0000;
+    font-weight: bold;
+}
+
+.userlist_owner {
+    color: #0000cc;
+    font-weight: bold;
+}
+
+.userlist_op {
+    color: #00aa00;
+}
+
+.action {
+    color: #dddddd;
+}
+
+.spoiler {
+    color: #ffffff;
+    background-color: #ffffff;
+}
+
+.spoiler:hover {
+    color: #000000;
+}
+
+.greentext {
+    color: #789922; /* Color value directly from 4chan */
+}
+
+.poll-notify {
+    color: #5555ff;
+}
+
+.nick-highlight {
+    background-color: #446666;
+}
diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js
index 6c9b1057..54889014 100644
--- a/www/assets/js/callbacks.js
+++ b/www/assets/js/callbacks.js
@@ -85,9 +85,14 @@ function initCallbacks() {
         $('#opt_qopen_allow_playnext').prop('checked', opts.qopen_allow_playnext);
         $('#opt_pagetitle').attr('placeholder', opts.pagetitle);
         document.title = opts.pagetitle;
-        $('#opt_bgimage').attr('placeholder', opts.bgimage);
-        if(opts.bgimage != "")
-            $('body').css("background", "url('" + opts.bgimage + "') no-repeat fixed");
+        $('#customCss').remove();
+        if(opts.customcss != "") {
+            $('<link/>').attr("rel", "stylesheet")
+                       .attr("href", opts.customcss)
+                       .attr("id", "customCss")
+                       .insertAfter($('link[href="./assets/css/ytsync.css"]'));
+        }
+
         CHANNELOPTS = opts;
         if(opts.qopen_allow_qnext)
             $('#queue_next').attr('disabled', false);
diff --git a/www/assets/js/client.js b/www/assets/js/client.js
index 7af06e9c..aacff2fe 100644
--- a/www/assets/js/client.js
+++ b/www/assets/js/client.js
@@ -221,16 +221,13 @@ $('#opt_submit').click(function() {
     var ptitle = $('#opt_pagetitle').val();
     if(ptitle == '')
         ptitle = $('#opt_pagetitle').attr('placeholder')
-    var bgimage = $('#opt_bgimage').val();
-    if(bgimage == '')
-        bgimage = $('#opt_bgimage').attr('placeholder')
     opts = {
         qopen_allow_qnext: $('#opt_qopen_allow_qnext').prop('checked'),
         qopen_allow_move: $('#opt_qopen_allow_move').prop('checked'),
         qopen_allow_delete: $('#opt_qopen_allow_delete').prop('checked'),
         qopen_allow_playnext: $('#opt_qopen_allow_playnext').prop('checked'),
         pagetitle: ptitle,
-        bgimage: $('#opt_bgimage').val()
+        customcss: $('#opt_customcss').val()
     };
     socket.emit('channelOpts', opts);
 });
diff --git a/www/index.html b/www/index.html
index 14677710..f6bd7ded 100644
--- a/www/index.html
+++ b/www/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Sync</title>
+    <title>CyTube</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="Calvin 'calzoneman' Montgomery">
@@ -27,7 +27,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="brand" href="#">Sync</a>
+          <a class="brand" href="#">CyTube</a>
           <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="active"><a href="#">Home</a></li>
@@ -80,7 +80,7 @@
                         <button class="btn" id="queue_next">Queue Next</button>
                         <button class="btn" id="queue_end">Queue @ End</button>
                     </div>
-                    <button class="btn btn-inverse" id="play_next">Play Next</button>
+                    <button class="btn btn-primary pull-right" id="play_next">Play Next</button>
                 </div>
                 <ul id="queue" class="videolist">
                 </ul>
@@ -122,8 +122,8 @@
                                 <input type="text" id="opt_pagetitle" placeholder="Sync" class="pull-right">
                             </label>
                             <br>
-                            <label>Background Image<sup class="text-warning">BETA</sup>
-                                <input type="text" id="opt_bgimage" class="pull-right">
+                            <label>Custom CSS<sup class="text-warning">BETA</sup>
+                                <input type="text" id="opt_customcss" class="pull-right">
                             </label>
                         </div>