From e70be5df42b9399d4d21586e17b9880b4db5a0d0 Mon Sep 17 00:00:00 2001 From: calzoneman Date: Sat, 25 Jan 2014 13:49:34 -0600 Subject: [PATCH] Start working on theming --- templates/head.jade | 1 + www/assets/js/callbacks.js | 2 +- www/assets/js/ui.js | 12 +++ www/css/colors/dark.css | 145 +++++++++++++++++++++++++++++++++++++ www/css/colors/default.css | 24 ++++++ www/css/cytube.css | 63 +--------------- 6 files changed, 185 insertions(+), 62 deletions(-) create mode 100644 www/css/colors/dark.css create mode 100644 www/css/colors/default.css diff --git a/templates/head.jade b/templates/head.jade index 16f3b00b..57a1061e 100644 --- a/templates/head.jade +++ b/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] diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js index c555a92f..0c30bd2a 100644 --- a/www/assets/js/callbacks.js +++ b/www/assets/js/callbacks.js @@ -1032,7 +1032,7 @@ setupCallbacks = function() { for(var key in Callbacks) { (function(key) { socket.on(key, function(data) { - if(SOCKET_DEBUG) + if (SOCKET_DEBUG) console.log(key, data); Callbacks[key](data); }); diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js index 3b826a55..01b2e9ab 100644 --- a/www/assets/js/ui.js +++ b/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); diff --git a/www/css/colors/dark.css b/www/css/colors/dark.css new file mode 100644 index 00000000..5b4c6c81 --- /dev/null +++ b/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; +} diff --git a/www/css/colors/default.css b/www/css/colors/default.css new file mode 100644 index 00000000..0aa8b047 --- /dev/null +++ b/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; +} + diff --git a/www/css/cytube.css b/www/css/cytube.css index ac5f556f..0fdc55e8 100644 --- a/www/css/cytube.css +++ b/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 { - border: 1px solid #aaaaaa; - border-bottom: none; - margin: 0; -} - -#chatheader > p, #currenttitle > p { +#chatheader > p, #currenttitle { 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;