iot/yoradio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code upload

Browse Source
This commit is contained in:
e2002
2022-02-04 17:30:12 +03:00
parent fe3f0a261e
commit 3565d2fa17
44 changed files with 25103 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
yoRadio/data/data/wifi.csv Normal file
View File

40
yoRadio/data/www/dragpl.js Normal file
View File

@@ -0,0 +1,40 @@
let dragged;
let id;
let index;
let indexDrop;
let list;
document.addEventListener("dragstart", ({target}) => {
dragged = target.parentNode;
id = target.parentNode.id;
list = target.parentNode.parentNode.children;
for(let i = 0; i < list.length; i += 1) {
if(list[i] === dragged){
index = i;
}
}
});
document.addEventListener("dragover", (event) => {
event.preventDefault();
});
document.addEventListener("drop", ({target}) => {
if(target.parentNode.className == "pleitem" && target.parentNode.id !== id) {
dragged.remove( dragged );
for(let i = 0; i < list.length; i += 1) {
if(list[i] === target.parentNode){
indexDrop = i;
}
}
if(index > indexDrop) {
target.parentNode.before( dragged );
} else {
target.parentNode.after( dragged );
}
let items=document.getElementById('pleditorcontent').getElementsByTagName('li');
for (let i = 0; i <= items.length-1; i++) {
items[i].getElementsByTagName('span')[0].innerText=("00"+(i+1)).slice(-3);
}
}
});

BIN
yoRadio/data/www/elogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
yoRadio/data/www/elogo100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

130
yoRadio/data/www/index.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=0.25">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" type="image/png" href="elogo.png">
<link rel="icon" type="image/png" href="elogo.png">
<link rel="stylesheet" title="base" href="/style.css" type="text/css">
<title>ёRadio</title>
<style> </style>
</head>
<body>
<div class="content">
<div class="logo"></div>
<div id="navbar"%APMODE%>
<div class="playerbytton navbutton" id="playlistbutton" onclick="showEditor()"></div>
<div class="playerbytton navbutton" id="settingsbutton" onclick="showSettings()"></div>
</div>
<div class="playerwrap">
<div class="player">
<div id="nameset">&nbsp;</div>
<div id="meta">&nbsp;</div>
<div class="playerbyttonwrap">
<div class="playerbytton" id="prevbutton"></div>
<div class="stopped" id="playbutton"></div>
<div class="playerbytton" id="nextbutton"></div>
<div class="playerbytton" id="volmbutton"></div>
<div class="playerbytton" id="volpbutton"></div>
<div class="playerbytton" id="eqbutton" onclick="showEqualizer(true)"></div>
</div>
<div id="equalizerwrap">
<div id="equalizerbg" class="hidden">
<ul id="equalizer">
<li>
<li>
balance<span class="eqinfo" id="eqbalinfo">0</span>
<input type="range" id="eqbal" class="slider" data-slaveid="eqbalinfo" onchange="onRangeBalChange(this)" name="lovpass" min="-16" max="16" value="0">
</li>
<li>
<li>
treble<span class="eqinfo" id="eqtrebleinfo">0</span>
<input type="range" id="eqtreble" class="slider" data-slaveid="eqtrebleinfo" onchange="onRangeEqChange(this)" name="lovpass" min="-16" max="16" value="0">
</li>
<li>
middle<span class="eqinfo" id="eqmiddleinfo">0</span>
<input type="range" id="eqmiddle" class="slider" data-slaveid="eqmiddleinfo" onchange="onRangeEqChange(this)" name="bandpass" min="-16" max="16" value="0">
</li>
<li>
bass<span class="eqinfo" id="eqbassinfo">0</span>
<input type="range" id="eqbass" class="slider" data-slaveid="eqbassinfo" onchange="onRangeEqChange(this)" name="highpass" min="-16" max="16" value="0">
</li>
<li class="formbuttons">
<div class="button" id="accept_button" onclick="showEqualizer(false)">Acceptable...</div>
</li>
</ul>
</div>
<input type="range" id="volrange" class="slider" name="vol" data-slaveid="volinfo" onchange="onRangeVolChange(this.value)" min="0" max="254" value="0">
<div class="infowrap">
<div class="infoitem">volume: <span id="volinfo">0</span></div>
<div class="infoitem" id="bitinfo">bitrate: 0kBit</div>
<div class="infoitem" id="rsiinfo">rssi: 0dBm</div>
</div>
<ul id="playlist">
</ul>
</div><!--equalizerwrap-->
</div><!--player-->
<div id="settings"%NOTAPMODE%>
<h2>WiFi Settings</h2>
<ul id="credentialwrap">
<li class="credentialitem">
<span>1.</span>
<div class="textinput"><label for="ssid0">SSID</label><input name="ssid" id="ssid0" type="text" value="%SSID%" maxlength="20"/ ></div>
<div class="textinput"><label for"pass0">Password</label><input name="pass" id="pass0" type="password" value="%PASS%" maxlength="40" /></div>
</li>
<li class="credentialitem">
<span>2.</span>
<div class="textinput"><label for="ssid1">SSID</label><input name="ssid" id="ssid1" type="text" value="%SSID%" maxlength="20" /></div>
<div class="textinput"><label for"pass1">Password</label><input name="pass" id="pass1" type="password" value="%PASS%" maxlength="40" /></div>
</li>
<li class="credentialitem">
<span>3.</span>
<div class="textinput"><label for="ssid2">SSID</label><input name="ssid" id="ssid2" type="text" value="%SSID%" maxlength="20" /></div>
<div class="textinput"><label for"pass2">Password</label><input name="pass" id="pass2" type="password" value="%PASS%" maxlength="40" /></div>
</li>
<li class="credentialitem">
<span>4.</span>
<div class="textinput"><label for="ssid3">SSID</label><input name="ssid" id="ssid3" type="text" value="%SSID%" maxlength="20" /></div>
<div class="textinput"><label for"pass3">Password</label><input name="pass" id="pass3" type="password" value="%PASS%" maxlength="40" /></div>
</li>
<li class="credentialitem">
<span>5.</span>
<div class="textinput"><label for="ssid4">SSID</label><input name="ssid" id="ssid4" type="text" value="%SSID%" maxlength="20" /></div>
<div class="textinput"><label for"pass4">Password</label><input name="pass" id="pass4" type="password" value="%PASS%" maxlength="40" /></div>
</li>
</ul>
<div class="formbuttons">
<div class="button" id="cancel_button" onclick="doCancel()"%APMODE%>Cancel</div>
<div class="button" id="save_button" onclick="submitWiFi()">Save</div>
</div>
</div><!--settings-->
<div id="pleditorwrap" hidden>
<div id="pleditor">
<h2>Playlist Editor<span onclick="doCancel()"></span></h2>
<div id="pleheader"><span class="space"></span><span class="plename">Name</span><span class="pleurl">URL</span><span class="pleovol">Ovol</span></div>
<ol id="pleditorcontent">
<li class="pleitem">
<span>1.</span>
<input class="pleinput plename" type="text" value="" maxlength="140" />
<input class="pleinput pleurl" type="text" value="" maxlength="140" />
<input class="pleinput pleovol" type="number" min="-30" max="30" step="1" value="0" />
</li>
</ol><!--pleditorcontent-->
<div class="formbuttons">
<label for="file-upload" class="button">Import</label><input id="file-upload" type="file" accept=".txt, .csv" onchange="doUpload(this)" hidden/>
<div class="button" onclick="doExport()">Export</div>
<div class="button" onclick="doAdd()">Add</div>
<div class="button" onclick="doRemove()">Remove</div>
<!--<div class="button" onclick="doCancel()">Cancel</div>-->
<div class="button" onclick="submitPlaylist()">Save</div>
</div>
</div><!--pleditor-->
</div><!--pleditorwrap-->
</div><!--playerwrap-->
<div id="copy">powered by <a target="_blank" href="https://github.com/e2002/yoradio/">ёRadio</a> | v%VERSION%</div>
</div>
<script src="script.js"></script>
<script src="dragpl.js"></script>
</body>
</html>

347
yoRadio/data/www/script.js Normal file
View File

@@ -0,0 +1,347 @@
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
var currentItem = 0;
window.addEventListener('load', onLoad);
function initWebSocket() {
console.log('Trying to open a WebSocket connection...');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
function onOpen(event) {
console.log('Connection opened');
}
function onClose(event) {
console.log('Connection closed');
document.getElementById('playbutton').setAttribute("class", "stopped");
setTimeout(initWebSocket, 2000);
}
function cleanString(input) {
var output = "";
for (var i=0; i<input.length; i++) {
if (input.charCodeAt(i) <= 127 || input.charCodeAt(i) >= 160 && input.charCodeAt(i) <= 255) {
output += input.charAt(i);
}
}
return output;
}
function onMessage(event) {
var data = JSON.parse(event.data);
if(data.nameset) document.getElementById('nameset').innerHTML = data.nameset;
if(data.meta) document.getElementById('meta').innerHTML = cleanString(data.meta);
if(data.vol) {
setVolRangeValue(document.getElementById('volrange'),data.vol);
}
if(data.current) setCurrentItem(data.current);
if(data.file) generatePlaylist(data.file);
if(data.bitrate) document.getElementById('bitinfo').innerText = 'bitrate: '+data.bitrate+'kBits';
if(data.rssi) document.getElementById('rsiinfo').innerText = 'rssi: '+data.rssi+'dBm';
if(data.mode) {
document.getElementById('playbutton').setAttribute("class",data.mode);
}
if(data.bass) {
setVolRangeValue(document.getElementById('eqbass'),data.bass);
setVolRangeValue(document.getElementById('eqmiddle'),data.middle);
setVolRangeValue(document.getElementById('eqtreble'),data.trebble);
}
if(data.balance) {
setVolRangeValue(document.getElementById('eqbal'),data.balance);
}
}
function scrollToCurrent(){
var pl = document.getElementById('playlist');
var lis = pl.getElementsByTagName('li');
var plh = pl.offsetHeight;
var plt = pl.offsetTop;
var topPos = 0;
var lih = 0;
for (var i = 0; i <= lis.length - 1; i++) {
if(i+1==currentItem) {
topPos = lis[i].offsetTop;
lih = lis[i].offsetHeight;
}
}
pl.scrollTo({
top: topPos-plt-plh/2+lih/2,
left: 0,
behavior: 'smooth'
});
}
function setCurrentItem(item){
currentItem=item;
var pl = document.getElementById('playlist');
var lis = pl.getElementsByTagName('li');
for (var i = 0; i <= lis.length - 1; i++) {
lis[i].removeAttribute('class');
if(i+1==currentItem) {
lis[i].setAttribute("class","active");
}
}
scrollToCurrent();
}
function generatePlaylist(lines){
var ul = document.getElementById('playlist');
ul.innerHTML="";
lines.forEach((line, index) => {
li = document.createElement('li');
li.setAttribute('onclick','playStation(this);');
li.setAttribute('attr-id', index+1);
li.setAttribute('attr-name', line.name);
li.setAttribute('attr-url', line.url);
li.setAttribute('attr-ovol', line.ovol);
if(index+1==currentItem){
li.setAttribute("class","active");
}
var span = document.createElement('span');
span.innerHTML = index+1;
li.appendChild(document.createTextNode(line.name));
li.appendChild(span);
ul.appendChild(li);
initPLEditor();
});
scrollToCurrent();
}
function initPLEditor(){
ple= document.getElementById('pleditorcontent');
ple.innerHTML="";
pllines = document.getElementById('playlist').getElementsByTagName('li');
for (let i = 0; i <= pllines.length - 1; i++) {
plitem = document.createElement('li');
plitem.setAttribute('class', 'pleitem');
plitem.setAttribute('id', 'plitem'+i);
let pName = pllines[i].getAttribute('attr-name');
let pUrl = pllines[i].getAttribute('attr-url');
let pOvol = pllines[i].getAttribute('attr-ovol');
plitem.innerHTML = '<span class="grabbable" draggable="true">'+("00"+(i+1)).slice(-3)+'</span>\
<span class="pleinput plecheck"><input type="checkbox" /></span>\
<input class="pleinput plename" type="text" value="'+pName+'" maxlength="140" />\
<input class="pleinput pleurl" type="text" value="'+pUrl+'" maxlength="140" />\
<input class="pleinput pleovol" type="number" min="-30" max="30" step="1" value="'+pOvol+'" />';
ple.appendChild(plitem);
}
}
function playStation(el){
let lis = document.getElementById('playlist').getElementsByTagName('li');
for (let i = 0; i <= lis.length - 1; i++) {
lis[i].removeAttribute('class');
}
el.setAttribute("class","active");
id=el.getAttribute('attr-id');
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("playstation="+id);
}
function setVolRangeValue(el, val=null){
let slave = el.getAttribute('data-slaveid');
if(val){
el.value = val;
document.getElementById(slave).innerText=val;
}
document.getElementById(slave).innerText=el.value;
var value = (el.value-el.min)/(el.max-el.min)*100;
el.style.background = 'linear-gradient(to right, #bfa73e 0%, #bfa73e ' + value + '%, #272727 ' + value + '%, #272727 100%)';
}
function onRangeVolChange(value) {
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("vol=" + value+"&");
}
function onRangeEqChange(el){
let trebble = document.getElementById('eqtreble').value;
let middle = document.getElementById('eqmiddle').value;
let bass = document.getElementById('eqbass').value;
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("trebble=" + trebble + "&middle=" + middle + "&bass=" + bass + "&");
}
function onRangeBalChange(el){
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("ballance=" + el.value+"&");
}
function showSettings(){
document.getElementById('pleditorwrap').hidden=true;
document.getElementById('settings').hidden=false;
}
function showEditor(){
document.getElementById('settings').hidden=true;
initPLEditor();
document.getElementById('pleditorwrap').hidden=false;
}
function doCancel() {
document.getElementById('settings').hidden=true;
document.getElementById('pleditorwrap').hidden=true;
}
function doExport() {
window.open("/data/playlist.csv");
}
function doUpload(finput) {
var formData = new FormData();
formData.append("plfile", finput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST","/upload",true);
xhr.send(formData);
}
function doAdd(){
let ple=document.getElementById('pleditorcontent');
let plitem = document.createElement('li');
let cnt=ple.getElementsByTagName('li');
plitem.setAttribute('class', 'pleitem');
plitem.setAttribute('id', 'plitem'+(cnt.length));
plitem.innerHTML = '<span class="grabbable" draggable="true">'+("00"+(cnt.length+1)).slice(-3)+'</span>\
<span class="pleinput plecheck"><input type="checkbox" /></span>\
<input class="pleinput plename" type="text" value="" maxlength="140" />\
<input class="pleinput pleurl" type="text" value="" maxlength="140" />\
<input class="pleinput pleovol" type="number" min="-30" max="30" step="1" value="0" />';
ple.appendChild(plitem);
ple.scrollTo({
top: ple.scrollHeight,
left: 0,
behavior: 'smooth'
});
}
function doRemove(){
let items=document.getElementById('pleditorcontent').getElementsByTagName('li');
let pass=[];
for (let i = 0; i <= items.length - 1; i++) {
if(items[i].getElementsByTagName('span')[1].getElementsByTagName('input')[0].checked) {
pass.push(items[i]);
}
}
if(pass.length==0) {
alert('Choose something first');
return;
}
for (var i = 0; i < pass.length; i++)
{
pass[i].remove();
}
items=document.getElementById('pleditorcontent').getElementsByTagName('li');
for (let i = 0; i <= items.length-1; i++) {
items[i].getElementsByTagName('span')[0].innerText=("00"+(i+1)).slice(-3);
}
}
function showEqualizer(isshowing){
document.getElementById('equalizerbg').classList.toggle('hidden');
}
function submitWiFi(){
var items=document.getElementById("credentialwrap").getElementsByTagName("li");
var output="";
for (var i = 0; i <= items.length - 1; i++) {
inputs=items[i].getElementsByTagName("input");
if(inputs[0].value == "") continue;
output+=inputs[0].value+"\t"+inputs[1].value+"\n";
}
if(output!=""){ // Well, let's say, quack.
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("wifisettings="+output);
document.getElementById("settings").innerHTML="<h2>Settings saved. Rebooting...</h2>";
setTimeout(function(){ window.location.reload(); }, 10000);
}
}
function submitPlaylist(){
var items=document.getElementById("pleditorcontent").getElementsByTagName("li");
var output="";
for (var i = 0; i <= items.length - 1; i++) {
inputs=items[i].getElementsByTagName("input");
if(inputs[1].value == "" || inputs[2].value == "") continue;
let ovol = inputs[3].value;
if(ovol < -30) ovol = -30;
if(ovol > 30) ovol = 30;
output+=inputs[1].value+"\t"+inputs[2].value+"\t"+inputs[3].value+"\n";
}
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("playlist="+output.slice(0, -1));
document.getElementById('pleditorwrap').hidden=true;
}
function initSliers(){
var sliders = document.getElementsByClassName('slider');
for (var i = 0; i <= sliders.length - 1; i++) {
sliders[i].oninput = function() {
setVolRangeValue(this);
};
setVolRangeValue(sliders[i], 0);
}
return;
var volslider = document.getElementById("volrange");
var eqvolslider = document.getElementById("eqvol");
var balslider = document.getElementById("eqbal");
volslider.oninput = function() {
setVolRangeValue(this);
};
eqvolslider.oninput = function() {
setVolRangeValue(this);
};
balslider.oninput = function() {
setVolRangeValue(this);
};
setVolRangeValue(volslider, 0);
setVolRangeValue(eqvolslider, 0);
setVolRangeValue(balslider, 0);
}
function onLoad(event) {
initWebSocket();
initButton();
initSliers();
document.getElementById("volrange").addEventListener("wheel", function(e){
if (e.deltaY < 0){
this.valueAsNumber += 1;
}else{
this.value -= 1;
}
websocket.send('volume='+this.value);
e.preventDefault();
e.stopPropagation();
}, {passive: false});
}
function initButton() {
document.getElementById('playbutton').addEventListener('click', playbutton);
document.getElementById('prevbutton').addEventListener('click', prevbutton);
document.getElementById('nextbutton').addEventListener('click', nextbutton);
document.getElementById('volmbutton').addEventListener('click', volmbutton);
document.getElementById('volpbutton').addEventListener('click', volpbutton);
}
function playercommand(cmd){
xhr = new XMLHttpRequest();
xhr.open("POST","/",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(cmd+"=1");
}
function playbutton(){
var btn=document.getElementById('playbutton');
if(btn.getAttribute("class")=="stopped") {
btn.setAttribute("class", "playing");
playercommand("start");
return;
}
if(btn.getAttribute("class")=="playing") {
btn.setAttribute("class", "stopped");
playercommand("stop");
}
}
function prevbutton(){
playercommand("prev");
}
function nextbutton(){
playercommand("next");
}
function volmbutton(){
playercommand("volm");
}
function volpbutton(){
playercommand("volp");
}

505
yoRadio/data/www/style.css Normal file
View File

@@ -0,0 +1,505 @@
html, body {margin: 0; padding: 0; height: 100%; }
body {
background-color: #000;
color: #fff;
font-family: Times, "Times New Roman", serif;
}
a { color: #e3d25f; text-decoration: none; font-weight: bold }
a:hover { text-decoration: underline }
.logo {
display: block;
width: 155px;
height: 100px;
background-color: transparent;
background-image: url(elogo100.png);
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
text-indent: -2022px;
z-index: 2;
position: relative;
}
#nameset {
text-transform: uppercase;
font-weight: bold;
font-size: 22px;
color: #e3d25f;
margin: 20px 0 8px 0;
}
#meta {
text-transform: uppercase;
font-size: 16px;
margin-bottom: 14px;
text-align: center;
}
.content {
display: flex;
max-width: 960px;
margin: 0 auto;
flex-direction: column;
align-items: center;
padding: 30px;
height: 100%;
box-sizing: border-box;
position: relative;
}
.playerwrap {
width: 100%;
flex: 1;
display: flex;
position: relative;
}
.player {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 480px;
margin: 0 auto;
}
#equalizerwrap {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
#equalizerbg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 2px;
background: rgba(0, 0, 0, 0.3);
z-index: 7;
}
#equalizerbg.hidden {
display: none;
}
#equalizer {
padding: 20px;
background: #000;
box-shadow: #000 0 10px 20px;
list-style-type: none;
margin: 0;
}
#equalizer li {
margin-bottom: 10px;
color: #ccc;
}
#equalizer li input {
width: 100%;
height: 25px!important;
border-radius: 13px;
}
.eqinfo {
float: right;
}
#settings, #pleditorwrap {
position: absolute;
background: rgba(0,0,0,1);
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 30px 10px 20px 0;
overflow-y: auto;
box-sizing: border-box;
}
#credentialwrap {
max-width: 520px;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#settings h2, #pleditor h2{
text-align: center;
padding-top: 40px 0;
text-transform: uppercase;
font-weight: bold;
font-size: 26px;
color: #e3d25f;
overflow-y: auto;
}
#pleditor h2 {
line-height: 48px;
margin: 5px 0;
padding-left: 48px;
}
#pleditor h2 span {
display: block;
float: right;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA2FBMVEUAAAC+pDnm12HXxVHk1l65mjLJskO9oTjo3GPEqD3cylWyljDfz1rOuknBpjq+oDbt4Gjz6W6zli/17HC1mTLw5Wupjyq8nTOuky3Tv07p22PGq0G1mDDx5Wzw42vj1l7ez1nFqUHCpz64mjKzljDx5WzHq0G1lzHby1a2mTHbyla7nTTXxVHUwU/LtEXIr0HFqj3DpzrApDm9nzW5mzKyli/063Dz6G7v5Wvi013g0FvdzVfZx1POuUi+ojjs4Gbo22PVwk/RvkzQu0qvky2skSyqjyvl119lX1m8AAAAKXRSTlMAAgKgoaCfo6KioaGgn5+fLaSko6OioqGhoEItLfX19fX19fX1pEJCLVUTdPcAAAEKSURBVDjL1ZLZdoJADEDJoKCiqHVt7b7DgOybIO72//+o9FSdSeWhr+YtuXdyMjkRLik6BOdwi/Obuy5BfPTygd7fx1GPcFym2ivfg7xFYTggJ656vnYFAm90wyiukQOv5/TImdGLF8sK+eWO5/ePnBmDxTJpkoJLdk6rjDOj9pWkIgHJcjzGkVGZ6cZ1y7LdEePYaOqrzdRy2jzHhmjOp7bK+Lmw/kcDlx8R84axnkuqSzUFynlmbiSAtq8FYyj9gmG2CgDVINgO4XwJabb64YWhbPc7BcqWdCjCeL/TZMBrTtJMPJVgGPh5nTc6DzNd5A+mT92nCTq5xwY+Ofn5HQ/x+fdoJ8IFxTeZ6Bp9c7k3QwAAAABJRU5ErkJggg==');
width: 48px;
height: 48px;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-radius: 24px;
}
#pleditor h2 span:hover {
background-color: #272727;
}
#pleheader {
display: flex;
}
#pleheader span {
padding: 8px;
font-weight: bold;
box-sizing: border-box;
color: #e3d25f!important;
}
#pleheader .space {
width: 70px;
}
#pleditor {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 900px;
height: 100%;
}
#settings::-webkit-scrollbar, #pleditorcontent::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #000;
}
#settings::-webkit-scrollbar-thumb, #pleditorcontent::-webkit-scrollbar-thumb {
background: #e3d25f;
}
#pleditorcontent {
flex: 1 1 auto;
overflow-y: scroll;
height: 0px;
margin: 0;
padding: 0 0px 0 0;
list-style-type: none;
border: #e3d25f 2px solid;
box-sizing: border-box;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAABAAgMAAACrYYWUAAAACVBMVEUnJycAAAAtLS3JOrneAAAAGElEQVQI12NYtYKBZgBoOAiFhtAIAQ0HALK+GReOr3bpAAAAAElFTkSuQmCC');
}
.grabbable {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.pleitem {
display: flex;
justify-content: space-between;
background: #000;
}
.pleitem span {
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
color: #d7d7d7;
width: 40px;
padding: 0 8px;
box-sizing: border-box;
font-size: 14px;
border: #2d2d2d 1px solid;
}
.pleitem input {
font-family: Times, "Times New Roman", serif;
background: #000;
color: #e3d25f;
height: 32px;
line-height: 32px;
text-indent: 8px;
font-size: 18px;
border: #2d2d2d 1px solid;
font-weight: normal;
box-sizing: border-box;
margin-top: 4px;
border-radius: 0px;
outline: none;
margin: 0;
}
#pleditorcontent li:nth-child(odd) input, #pleditorcontent li:nth-child(odd) span {
background: #272727;
}
.plecheck {
width: 30px!important;
}
.plecheck input {
line-height: 10px;
height: auto;
}
.plename {
width: 300px;
}
.pleurl {
flex: 1;
color: #d7d7d7!important;
}
.pleovol {
width: 53px;
font-size: 16px!important;
}
#pleheader .pleovol {
width: 62px;
}
.credentialitem {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 14px;
}
.credentialitem span {
display: flex;
flex-direction: column;
justify-content: center;
font-weight: bold;
}
.credentialitem .textinput {
width: 47%;
}
.credentialitem input {
width: 100%;
box-sizing: border-box;
background: #272727;
color: #e3d25f;
padding: 6px 12px;
font-size: 20px;
border: #2d2d2d 1px solid;
font-weight: normal;
box-sizing: border-box;
margin-top: 4px;
border-radius: 0px;
}
.credentialitem label {
text-transform: uppercase;
color: #ccc;
}
.credentialitem input:focus {
outline: none;
}
.formbuttons {
display: flex;
justify-content: space-around;
max-width: 280px;
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
#pleditor .formbuttons {
max-width: 100%;
}
.button {
padding: 8px 22px;
font-size: 18px;
border: #e3d25f 2px solid;
font-weight: normal;
box-sizing: border-box;
border-radius: 20px;
cursor: pointer;
text-align: center;
min-width: 120px;
margin-left: 20px;
text-transform: uppercase;
color: #e3d25f;
background: #272727;
}
.button:hover {
background: #e3d25f;
color: #000;
}
.button:active {
position: relative;
top: 2px;
}
#save_button {
background: #e3d25f;
color: #000;
}
#navbar {
display: flex;
width: 400px;
justify-content: space-between;
position: absolute;
top: 0;
padding: 30px 0 0;
box-sizing: border-box;
}
.playerbyttonwrap {
display: flex;
width: 400px;
justify-content: space-between;
margin-top: 14px;
}
.playerbytton, .stopped, .playing {
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
width: 48px;
height: 48px;
cursor: pointer;
border: #e3d25f 2px solid;
border-radius: 26px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.navbutton {
border-color: transparent;
}
.navbutton:hover {
border-color: #e3d25f;
}
.playerbytton:hover, .stopped:hover, .playing:hover {
background-color: #272727;
}
.playerbytton:active, .stopped:active, .playing:active {
position: relative;
top: 2px;
}
.stopped {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAvVBMVEUAAADg0Vvez1fYx1Lr4V/q3l7l2F3o3F/h01nw52rr4WDx53Dez1nZyVL69o707Xju5Gbt42X38oXx6XP584n17X3t42v584fw6HX27nzs4Wzdz1Tx6HTw523h0lvez1naylXl11/m2GHj1V7f0FrdzVjq3WTn2mLZx1L38IDv5Wjo3GPi01zczFfcy1bz6m/s4Wf7+JP69o317nnt4mju42Pu5W7x6Gzw5Wvr32Xl2F/59If07HP38oTj1lmRTpVfAAAAHnRSTlMAEkkE/taStm377SkpKe3t7e3W1ra2tpKSbW1tSQQSPakHAAAA9klEQVQ4y82R2XaCMBRFtdLaWjvXWRMCQkhQQcIkDv//WSaRpWI0vnpe9+aek0XtgfL/fkdYLnt1vUCiz8FEJwQBiX7HOiHLA7Lu3JwSZTmN45SQfv2GkOdxGLpuyr6GjasCjcOV6/sWTtnf0xVhLTm2LGRb6abbVoUjn4Epom8vl1O2kheSw/kC0Z/XRlUQXGAAOTc9EyXPlSnEx4fPp5J73s64EMp66MxNzoHRGlUrGDrj0DCUkcy2geD8/AInzQ/lmWxWcrMQ69RsyvN20pLvUwXJQZiU5UoCfh669FiuCo6D6alcTVbQb16uEcTv0aXZrj1u9gzXJnV9YpvtAAAAAElFTkSuQmCC');
}
.playing {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAP1BMVEUAAADv42vy52369Ivu4Wnz6W7x5Wv162/79o/7+JLt32js3Gb48YP584j484Xn12L17Xv17XHq2mXz6XTk0mCFQY+JAAAAAXRSTlMAQObYZgAAALFJREFUOMvlz90OgyAMhmH+CqJQcXr/17p+3cySsjuwRyTvQ5O6Z815nmOM1pxrzD3KWHBd+/7aBPCaUvLegqEdoGufgfaNAdDzYoH2tTsXPfoEmvYb5BAmgPwFWXqoFqCnFAUgB5qAdgXIVCxgdO8VkPQJ/K5fAvoxA/QMgG433NfjuIr/hRYL0D+gHNJDtAA5KDiK9PwfUMUGku67BchUAChIT2zAgqm16itG5uYeNW/M9AgMwr5N0gAAAABJRU5ErkJggg==');
}
#prevbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABR1BMVEUAAADRu03Zxz7g0Fbn2lvx6Hbp22jXxFC/qTvo2WS2nTXFrkPt4WfbyUHl11rk1Vfs4Wbn11jj1FPYxT/27X/x53LVwj3TwDro2F3Wwz/byUnRvTzp3WbSvz/k1Fvq3GbezVTNuDvOu0DItDnh0FvJszzTv0rErjjezFrWwk7Xw1K/qDjbyVi7pDi3nzbZxVXTvlDBqUHKs0jezETcyUC9pT3t4GPq3FzWwVLj1E7FrUO/pz7u4mbi0F3o2VzcyFjUv1HOt0vIsEa7ojvTvjPNtyv17nzz6XTw5Wvi0l3ey1rax1Xl1VLXw1LSvU/Qu03h0Urgz0jDrEDVwjj38ILz6Xbx5m/q3Wnr3l/fzFvi0ljl1lbZxlLVwkDPu0DXxDvQuy7LtCrl1GHm1mDl1VrYxkzbyUfJs0XIsj/KtT3ItDvBqzvKsin8qlL8AAAAL3RSTlMAFv6t66tWVi0VCwX19e3t7Ozs7Ovr4uLU1MXFsbGvrZ6ejIx2dmRkWVk9PR4eFHLHxygAAAE0SURBVDjL7ZHndoJAFISVJCYxvffeKx0FxIYlKAhI1CT29Pb+v13KXV/C+QFzznyzZ+/d0EhD/feH/m4P2/AYuH4e3MzZHAt+cvwJbB6Amy22Y0M9pgkY6Hm/+yOuXeWtoJ4sUxjo5dzvxQrxrcq06NdfKCqdACCHgKkdrsPzMl1FwNVSslWh4sYDBpzoCdH+U91c0r16JR03SAw4zgbxq6o8TUtSVl9ItkyUk2SqDkC3u8798LJMS9ks05xH10N5OVUqAkBw0WP28wvlDJOJhfeFNxL1S88Y4Dh0yW3xg0F5Bm3ncjGhoFypAcB62ztfbhoZ0xTcMQ/qDUXRChiw/eUdxt7jlD98ZK3YeMWAbQXmelPQgu1MTxRqjwBYIn6s01k8fGQVA6IewrrdBYcOCY0EGgATKDjicNrzUgAAAABJRU5ErkJggg==');
}
#nextbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABCFBMVEUAAAC+ojXKsDi0mC/awzndxjvXwTTgzUjRuTTUvDjj1VbUvDrHrjHEqjLXxEu6ny/Sv0vWwTXhzkXUvjXq3lzl1lDRujPQujLbxj7RujTcyEfMtTPXwT7byUjRuDnJsTLSukDEqzHHqzm5oC/JsD+1mjDbxDfVwDS0ly+7nDO1mDDYwjW4mjLizULEqTzBpTnAozjUvTG3mTHFqz7fyTzKsDnUvjTSvDDq3Vjl1Evj0UbHrkDdxjvCpzq8njTIsEHgyz7awza/oTbQuTTs4V3k1lPn2VDMt0bQuUXLtUXKskPVvz7VvTvJsTO7oDDXxUzYwkDYwTzDpjrFqjjErDPDqzK/ozLCqTEl328YAAAAJnRSTlMAFVgI7ez7+sWuq6uMY1ctFfXs7Ovr4uLU1LGxr62ennZ2PT0eHggzQnUAAAEdSURBVDjL7ZFncsIwFITtQEJ6771KNrIt4QoOdmwTAoSQXu5/kzwZJE1mcgT215u3366kkTaV1OK6HA+v1RohMd1vr4oxrp1X/gG6TVESD+39SwHkAmj2X7o74xKbfbz5p3o550QCvUGv1jrROVAUaYCqK3xNFDB4vLvtx5szmpalqWmmHTS/BgAWwAP4nuO92se6b5qmZbnf4dxyBSuA+w5lQbuKSr9eNz7xbiiBFvgJZQUHwAfbML7wXqMhAc95p4w++Qt623Jd8J87cESoAMhD/yxcEvF6d4T5JVVDnNCEx2FEEP8Jt8pnRpEAbBb4PM4BaCdngP4FhtmSPh7zET64mqwjeUQG8YnIxoX8LPVMiAsd3WhSmGhTSf0Cx6gshxH98P4AAAAASUVORK5CYII=');
}
#volpbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABp1BMVEUAAADTv03byVXSvkzax1PYxEvbyVLWw07Svkrj0Ufr31vt4WPr317q3V7m2lvj1Vjm2mHdzE3cy1DRu0PbylHXxEzYxlHWw0/u5Gbs4V7r31nu5Gft4mPq3Vnq31/n2lfm2Fjn21zl11fo3WDk1lbj1VXl2FrdzErh0VPg0VPYxEXfz1Lcykzf0FTayEzWwUfcy0/ezlbfz1nUwEvPuUXXxVLGqjvNt0Xv52rs4V3s313k0kjs4V/o2lTm1lDp21fq3Vvu5Gnn2FPr3l3k003s4mfq317q3mHs4mbk1FHbx0Hp3mHo21/cx0Lfz0zdy0jo22Hfz07h0VDj1Vfezk7h01fk2F/YxEfj1Fvh0Vbj1F3g0FjQuD7h1FzZxk7g0lvdzVfez1nTv0nNt0XGrTzaylbYyFTYx1PXxVHt42XayVXv5Wjs4mbu42Ps4WHs4Fzez1np3Fjn2VXn22Dcy1fi0lDgz03w52ru5Wjq3mLk1l3o21rdzlbk1VTayFTo2VDWxFDk1U/dyknv5WXu42Dg0Vvs4Frq3lfk1lfg0Vbp21TUwU3gzUTlFyGcAAAAZXRSTlMAASgEEVk8JhX+9O7k1LaWjo1kTElFGQ78/Pzv5+XX0sm7uLe0sKWjmJCPiYV9cmppT0AtHRQUCPr69vby7+/t6+rq6OXf39zYzMrJwry4tLGxqpqaj4iGhXdsbGZeXllVNDQkGQe+VJQAAAGqSURBVDjLzdJlc9tAEIDh15Jsx2zHThxsqGkDDadJmZmZuZVkmSkOYxl+dCVZmlEyU3/s5Pm2s7d7t3fHvuN656URbygXEBrkj15drmSj/JN4Kx9423lexNbEbs9ylSjRxfd27Lko4TTdtpKdYnrpNZaHhWYcmrqW0xkBKfME0wyJQr9zwIFstXhMxNV2z4yfB5n3d9ineJnTtMxXuXgN6LqJIVwQGCwlqAuspBRFlouXkxA6ALTyeLWZ0XXrEJK2oaZlOV3VBqAvCJEIkz/GGF84gknQ9HJZUdSi1sqhU3DiIC3lIdwLh62Bs3q5nk+l8gki7XCuF6H8gJbaHavDkp5X9fzaF72DH/xGh0e4a1YHabGqGAuUfBj6umF4iEl9//Gdp9R1Voz6rY0rSegJma8Q255gZGeCuheZz1pubUs1JuzuxXB/c4a7vrjjJsP5lHpcxNUxaMbuS675k74552cIrv4ueJG+j2KaJe67jZOn/WdpCk/pDZaRP6/YZezb+jCxXx/s+NONuT0/tr901n36gohNZI9kT7m2HaOB2eubZ7w0FP/I//cX2VZVBFBJqXUAAAAASUVORK5CYII=');
}
#volmbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABd1BMVEUAAAC4njLo11PYxDrm00/hzlDaxEnIrUDHrUG9ojnk0Uvn1lHk0U3SvTPWwTfp2lnj0E3gzUniz0/dyEXj0VHgzU/bxkbaxUjfzVLey1HHsDTaxlHFrTq7ojLTu0i9ozXUvUyxlyyulSzNtEXGrECzmTDTvjLeykLq3Vzp2lnaxT7QujHm01HRuzPm1FPdyELYxEDNuC/WwTvLtS/l1Vfjz1Dm1ljaxkTJszDaxUbKtDLWwULVwELfzFLKszjey1LOuD7AqS/Zw0zKtDy7oyzHsDu+pjK5oC7Wv0zayFTXwk7XxFHTvU3TvU2pjyu9ojq6nze1mzO0mTLKr0LApDy2nDXUvzSxljHp2Vbhz0jgy0PMs0HaxTy+ozu8oDi4nTbQujLTvTGymDDr3Vvo2FnfzE7gzEbcyUDSvDbVwTXi0VXaxEzFrD/EqD/IsD7Cpj7OuD2+pTm6oDm+pDe7ozbMtzW5oTTKtDPIsTO+pTPCqjLFrjGuky/WrPCGAAAAT3RSTlMAJ/7+/bOWGQ4E/vby7u3s5OLX1Mm5tqWQjo5bS0A9NyUlFRQSEf377+/u7uvn5ubf3NjV09HMycK7uLaxl46IiIV7bGxeWVVPTTQoHgUEcf+/bgAAAS1JREFUOMvNzkV3wkAYheGLS4sVKS4F6u7ubgQCQQtJ8Lr7jy90l55Mlj082/fOdwad5yAkmUMznEEGsr4p9p11k/v5ImvYNxp1INni3txYLwRI3df/2fDCV9gjfWDshVfIEKlvEgbLTPxVoQMGVkXiLsc0mx+J52kAEwsig5Gv73Q6EX+a1AJWKwCNsEcZPs0nUqWH+gqwZAHUagjImNbzVIkq3tY06O0GulQQCDR+eyyWzHmh1gOjtj8XFPEU9Ri7SOb14heiBYoqtvp11gHYzYBzDULD9+1+R1u0wFwPgDCEdnK5WjZ/Q7fbuA3iHFk6r9QBchVhEDZXaXkQkcwGCPzKK+Uh/BkPSLblVRdc5WMQ2TMmz5DpDETa2cplxQkJp/PlwRNIOgri//0AbVY1/4adyuMAAAAASUVORK5CYII=');
}
#playlistbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABTVBMVEUAAADr4GLo3GTSvUrn2mLVwlDh0lLq32Xm2l/f0Ffi013o3Gbs4Wrg0VvXxlDf0Frz7Hncx0Dz63jfzUjm2Vjo3F3x6HPq4GTfzkrbyUXk2Fnx6XXu5W7y63fo3WLk11rw6HPVvTvr4Wnr4Gnf0VTv5nLUvUDZyEzs4m3v5XHo3GbMsjri1Fzl2WLUwEnHrDjaylPdzlfQukbXx1DGqjnWxE/r3mjYxlPPukjy6nTx6HHn2mPm2GHj1F3ez1nayFPfzUj07Xrw527u5W3u5Gns4mbg0Frdzljl1lPRvUnJsELGrT/s4mvq3mHk1l/h0lzm2VjczFfh0lLk1VDWxE/i0k7Tv03i0Uzgz0rNt0TKs0PdyULcxj/Eqj3Dpzvz63fr4Gfq3mfo3GPn22Dm2Vbby1XYyFHfy0Xbx0Tv5W3Tv0nZxEPTvT7Ruj7Irjt5kAYfAAAAOXRSTlMA+40mCQPLurZ0V01CPjYW/Pz6+Pf27+7r5uPi3t3Z0cnGw62roqGVhHt3dmtkXVNNREQ6MiwiHhGFwXcaAAABNUlEQVQ4y83SR3OCUBQFYHuNMb333nujWlCBBJQmgiHGrqn/f5mXZCZA5rr3bjjM+ebCm3me4Z2g/yw6oEomjn2RFa8oSUC5v702gzN1gmJTut4GQIZpEBTNdrqapvMcBMgiVaDlFJquBgOSJIimKE6vbnEqAJ4xfCnsOzq/RZkrgyDwl9UKADDMzmUQ4A5gQCBr50oaALgDGBDIvtg53YMA4wCPAGByv0//yYW/B4HcD7gOqUa63/8HAnHfQSyXR+lySuHvH55qlqsfWcSEeqOJQHBBMasIfFqufgwnSwW2g8CoxJvfC97XnWAZL1IlWi54EWjzaEHtwzp19DcZAl0EVm5F0CdCymvVfBs/dP3hhIAW0C1vAr3c7c5Nzu9cuc+whwkkkZ+NeQZOfHMjHE16hnS+AIiQOxEJiBv0AAAAAElFTkSuQmCC');
}
#eqbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAwFBMVEUAAAD27X/QvErn2WH27oH0633v43Hj01vcyk7w5XDj02HbyVf28IPx53Xu4m7s4Gni0ljgz1TayUvq3Wfo2mPy53Tt4G7s3Wrt4Gn27oDx5nP48of274Li0lT38YT17H306nru4mv59Irz6Hbr32bq3GTl1ljfz07v5G3p2mHo2l7gzl3m2Fvgz1LOuEzXxEDeylrczEvLtEjbykfZx0TVwj7SvznQuzXKtS7j02HcyVHSvVDZx07dzEzNuDTMtzDLJSoKAAAAGHRSTlMA4Uvh0tLS0tJLS0vh4eHh4eHh0tJLS0sGkbICAAAA4klEQVQ4y83Sx9KCMBSG4SN2/XtNCCGEKgjYe7v/uzJRR8YZOePSd5l5FpkvgSet+/PdQUE1Dt5Q4A/7Jty0PCzms8F0EmU8TOMzcCi1CrDXYDKKeBgmARANhAYlyf7KA6x3Il9R0Gk0/u8cG62WAVhf2/UHCqJxHkJJc7WBBikEPumZniOoZdk2uwI10giycZ5AQKQGtABFPN/EgPWZ8SoKjGazC4/1V6+3UVBxnAoKKJE23KTemadJ7BNpmp5QgNjAmOtewU5/lOQy0gkwYK4CJVmyx/BLCvGCgnat9gvP1BGHfhnUEswA0wAAAABJRU5ErkJggg==');
}
#settingsbutton {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAB8lBMVEUAAACDbR+QdyKgkjzEqirCrDWReCCyp0WJciCJcyKYhzChkzqTgS3Vw0G6oSe6oSjRw0q1nCm8oy3TyFO4nyrIuEKxlyfHu0qiiSKegyGijCyRdyKmlziomjqklTexqEmvpkmKdiXFrCzJry7n3mLf0lLXxUPHrS7cz0/KrzDZy0rPuDfBpyrn32jSwEDKsjTEqi3BqCzIsDTp4264nynPv0Pj3GfWyU/c01yzmybh2mSulSS+pi/Zz1rBrDazmSiqkCXFt0Pa1GOliiOtkynNxFTZ0mOpkCrBtUmqkivIv1OpkyybgSK+s0rJwlqplzKUeyGQdx++tU6ypUHCu1WWfSOnmDjCvFexpkSahCqNdSGHcB+XgimonECAax7OtDDLsC7Hrivt42js4mXq3l3h0Uy8oC/38Xv07XPv5Wvt5GPs4mHn21jez1fm2FLXxVDUwUneyULLtEHbxT7JrzzFqDS/oDTUuTPDpjH59ILz63Hp3GLi1Vzf0Frh0lbby1DUwk/ezUfSvUPQu0PNszvBpTrZwDjVvDfKsDa7nTPVujLRtjHPtDG2mS+xlS7Jry3Eqiz27nfx6W/k12Dq4F7bylXYx07j1E3Qu0rhz0fMtkTJsUHcxz/Vvj/Otj/Eqj7NsTTRtjPHqjO+oDLApDC+pCyMAG9RAAAAX3RSTlMADUYD/NtgQy4hFxQK+fTt49/e1tTT0bizqGVOSEE8Jg8G/vz6+vr49/f29vX09PTz8vHv6efm5uXl4eDf2NXRysbCu7i1s6Keko+Li31zcXFwal9dWU9NS0s+OjcbEJmukO4AAAFySURBVDjLYhiCIJZdlguXnLyXrUpWdkpOXiqvnTcnhnSIVUZVUnXt1PyGGc3Nc9vahUJRpMON06uSJtfU5ubWTysomt9aVhrfzc8El2Z2q0zPrE5OTs5OURUwVSssbl9Q2pvWnygJU+BXOTEpc1KmsEcwN0+YjCKXlLtgfEJa39JENpgKp/SMDAv2CHEBjbzpM+do27gwSZskTEiUQNhhphskLzwlpa6+YNbskpKOhfFinAF81kiOVFBwTc6qyW/IL2ia11La2VkRryTByIjsDfak7Nw6YBDosbLql3f1LOmbwBKNGg6+WSk5orLMXFKRPMxMYgn9iYHoIQWYuLmMnChvYXFbl7o9B5OlJGZQczumNjaVtJaVVcQnOscxYFGglVpU1NKxqCKtN4GPEVtsyTUWFhuJiBjGJ7BwYI9Pf9YYBkYehihBNpzJwVOzvFvHB096ESpfnBbvgEcBo0FPPL8iviTHoczCiT9RskkzDEcAAG+FX5nDaQtoAAAAAElFTkSuQmCC');
}
.infowrap {
display: flex;
width: 400px;
justify-content: space-around;
font-size: 14px;
margin: 16px 0;
}
#volrange, .slider {
overflow: hidden;
width: 432px;
margin-top: 34px;
background: linear-gradient(to right, #bfa73e 0%, #bfa73e 0%, #272727 0%, #272727 100%);
border: solid 2px #e3d25f;
border-radius: 13px;
height: 25px!important;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
box-sizing: border-box;
}
#volrange::-webkit-slider-thumb, .slider::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;Раменское
height: 10px;
cursor: ew-resize;
}
.slider {
width: 400px;
margin-top: 4px;
}
#playlist {
width: 400px;
scroll-behavior: smooth;
overflow: auto;
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
border: solid 1px #e3d25f;
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
box-sizing: border-box;
}
#playlist::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #000;
}
#playlist::-webkit-scrollbar-thumb {
background: #e3d25f;
}
#playlist li {
text-transform: uppercase;
font-size: 20px;
padding: 8px 16px;
color: #bfa73e;
cursor: pointer;
position: relative;
}
#playlist li span {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
right: 0;
top: 0;
bottom: 0;
padding: 0 10px;
background: #000;
width: 44px;
box-sizing: border-box;
text-align: right;
font-size: 14px;
vertical-align: middle;
}
#playlist li:nth-child(odd), #playlist li:nth-child(odd) span {
background: #272727;
}
#playlist li:hover, #playlist li:hover span {
color: #fff;
background: #323232;
}
#playlist li.active, #playlist li.active span {
background: #bfa73e;
color: #000;
}
#copy {
padding-top: 14px;
font-size: 14px;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media screen and (max-width: 480px) {
.content { padding: 20px; }
#playlist { width: 100%; }
#playlist li { font-size: 16px; }
#volrange { width: 100%; margin-top: 24px;}
.playerbyttonwrap { width: 100%; margin-top: 8px; }
#navbar { width: 100%; padding: 20px 20px 0 20px; }
#meta { margin-bottom: 8px; }
.infowrap {width: 100%; padding: 0 10px;}
.logo { width: 100px; height: 65px; background-size: cover; }
#copy { font-size: 10px; padding-top: 10px; }
}
@media screen and (max-width: 480px) {
.playerbytton, #playbutton {
width: 42px;
height: 42px;
background-size: 75%;
}
}