Support custom CSS
This commit is contained in:
parent
05fd0f26a8
commit
98b3587341
129
www/assets/css/custom/dark.css
Normal file
129
www/assets/css/custom/dark.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -85,9 +85,14 @@ function initCallbacks() {
|
||||||
$('#opt_qopen_allow_playnext').prop('checked', opts.qopen_allow_playnext);
|
$('#opt_qopen_allow_playnext').prop('checked', opts.qopen_allow_playnext);
|
||||||
$('#opt_pagetitle').attr('placeholder', opts.pagetitle);
|
$('#opt_pagetitle').attr('placeholder', opts.pagetitle);
|
||||||
document.title = opts.pagetitle;
|
document.title = opts.pagetitle;
|
||||||
$('#opt_bgimage').attr('placeholder', opts.bgimage);
|
$('#customCss').remove();
|
||||||
if(opts.bgimage != "")
|
if(opts.customcss != "") {
|
||||||
$('body').css("background", "url('" + opts.bgimage + "') no-repeat fixed");
|
$('<link/>').attr("rel", "stylesheet")
|
||||||
|
.attr("href", opts.customcss)
|
||||||
|
.attr("id", "customCss")
|
||||||
|
.insertAfter($('link[href="./assets/css/ytsync.css"]'));
|
||||||
|
}
|
||||||
|
|
||||||
CHANNELOPTS = opts;
|
CHANNELOPTS = opts;
|
||||||
if(opts.qopen_allow_qnext)
|
if(opts.qopen_allow_qnext)
|
||||||
$('#queue_next').attr('disabled', false);
|
$('#queue_next').attr('disabled', false);
|
||||||
|
|
|
||||||
|
|
@ -221,16 +221,13 @@ $('#opt_submit').click(function() {
|
||||||
var ptitle = $('#opt_pagetitle').val();
|
var ptitle = $('#opt_pagetitle').val();
|
||||||
if(ptitle == '')
|
if(ptitle == '')
|
||||||
ptitle = $('#opt_pagetitle').attr('placeholder')
|
ptitle = $('#opt_pagetitle').attr('placeholder')
|
||||||
var bgimage = $('#opt_bgimage').val();
|
|
||||||
if(bgimage == '')
|
|
||||||
bgimage = $('#opt_bgimage').attr('placeholder')
|
|
||||||
opts = {
|
opts = {
|
||||||
qopen_allow_qnext: $('#opt_qopen_allow_qnext').prop('checked'),
|
qopen_allow_qnext: $('#opt_qopen_allow_qnext').prop('checked'),
|
||||||
qopen_allow_move: $('#opt_qopen_allow_move').prop('checked'),
|
qopen_allow_move: $('#opt_qopen_allow_move').prop('checked'),
|
||||||
qopen_allow_delete: $('#opt_qopen_allow_delete').prop('checked'),
|
qopen_allow_delete: $('#opt_qopen_allow_delete').prop('checked'),
|
||||||
qopen_allow_playnext: $('#opt_qopen_allow_playnext').prop('checked'),
|
qopen_allow_playnext: $('#opt_qopen_allow_playnext').prop('checked'),
|
||||||
pagetitle: ptitle,
|
pagetitle: ptitle,
|
||||||
bgimage: $('#opt_bgimage').val()
|
customcss: $('#opt_customcss').val()
|
||||||
};
|
};
|
||||||
socket.emit('channelOpts', opts);
|
socket.emit('channelOpts', opts);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Sync</title>
|
<title>CyTube</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="Calvin 'calzoneman' Montgomery">
|
<meta name="author" content="Calvin 'calzoneman' Montgomery">
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
</button>
|
</button>
|
||||||
<a class="brand" href="#">Sync</a>
|
<a class="brand" href="#">CyTube</a>
|
||||||
<div class="nav-collapse collapse">
|
<div class="nav-collapse collapse">
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<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_next">Queue Next</button>
|
||||||
<button class="btn" id="queue_end">Queue @ End</button>
|
<button class="btn" id="queue_end">Queue @ End</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<ul id="queue" class="videolist">
|
<ul id="queue" class="videolist">
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -122,8 +122,8 @@
|
||||||
<input type="text" id="opt_pagetitle" placeholder="Sync" class="pull-right">
|
<input type="text" id="opt_pagetitle" placeholder="Sync" class="pull-right">
|
||||||
</label>
|
</label>
|
||||||
<br>
|
<br>
|
||||||
<label>Background Image<sup class="text-warning">BETA</sup>
|
<label>Custom CSS<sup class="text-warning">BETA</sup>
|
||||||
<input type="text" id="opt_bgimage" class="pull-right">
|
<input type="text" id="opt_customcss" class="pull-right">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue