521 lines
20 KiB
CSS
521 lines
20 KiB
CSS
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, #pleditorcontent {
|
|
scrollbar-color: #e3d25f #000;
|
|
scrollbar-width: thin;
|
|
}
|
|
#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;
|
|
-moz-appearance: none;
|
|
box-sizing: border-box;
|
|
}
|
|
#volrange::-webkit-slider-thumb, .slider::-webkit-slider-thumb, #volrange::-moz-range-thumb, .slider::-moz-range-thumb {
|
|
width: 10px;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
height: 10px;
|
|
cursor: ew-resize;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
input[type=range]::-moz-range-track {
|
|
background-color: transparent;
|
|
}
|
|
.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;
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABOAQMAAAAw4lVwAAAABlBMVEUnJycAAADxyujSAAAADklEQVQI12OgLjhATQgAdZgdQbNqrBUAAAAASUVORK5CYII=');
|
|
scrollbar-color: #e3d25f #000;
|
|
scrollbar-width: thin;
|
|
}
|
|
#playlist::-webkit-scrollbarr {
|
|
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;
|
|
background: #000;
|
|
}
|
|
#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%;
|
|
}
|
|
}
|
|
|