blet blet first
This commit is contained in:
commit
ddccba2bb3
7 changed files with 485 additions and 0 deletions
1
icons/15_sec_dopo.svg
Normal file
1
icons/15_sec_dopo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.01 26.43"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px;}</style></defs><title>15 sec dopo</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><path class="cls-1" d="M9.91,12.29h0l-1.75.83-.35-1.61,2.42-1.13H12v9.16H9.91Z"/><path class="cls-1" d="M20.06,12.15H16.51l-.2,1.41a4,4,0,0,1,.59,0,4.19,4.19,0,0,1,2.41.66,2.61,2.61,0,0,1,1.11,2.3c0,1.71-1.47,3.21-3.93,3.21a5.82,5.82,0,0,1-2.55-.52l.38-1.61a5.27,5.27,0,0,0,2.07.45c.89,0,1.83-.42,1.83-1.4s-.75-1.52-2.58-1.52a7.9,7.9,0,0,0-1.24.08L15,10.38h5Z"/><path class="cls-2" d="M20.89,25.18h-9.7a9.94,9.94,0,0,1-9.94-9.94h0a9.94,9.94,0,0,1,9.94-9.94H25.74"/><line class="cls-2" x1="21.72" y1="1.25" x2="25.76" y2="5.29"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 854 B |
1
icons/15_sec_prima.svg
Normal file
1
icons/15_sec_prima.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.01 26.43"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px;}</style></defs><title>15sec prima</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><path class="cls-1" d="M8.47,12.29h0l-1.75.83-.35-1.61,2.42-1.13h1.78v9.16H8.47Z"/><path class="cls-1" d="M18.62,12.15H15.07l-.2,1.41a4,4,0,0,1,.59,0,4.19,4.19,0,0,1,2.41.66A2.61,2.61,0,0,1,19,16.49c0,1.71-1.47,3.21-3.93,3.21a5.82,5.82,0,0,1-2.55-.52l.38-1.61A5.27,5.27,0,0,0,15,18c.89,0,1.83-.42,1.83-1.4S16,15.1,14.21,15.1a7.9,7.9,0,0,0-1.24.08l.61-4.81h5Z"/><path class="cls-2" d="M6.12,25.18h9.7a9.94,9.94,0,0,0,9.94-9.94h0a9.94,9.94,0,0,0-9.94-9.94H1.27"/><line class="cls-2" x1="5.29" y1="1.25" x2="1.25" y2="5.29"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 848 B |
BIN
icons/ico-arrow.png
Normal file
BIN
icons/ico-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
10
icons/playIcon.svg
Normal file
10
icons/playIcon.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
|
||||
<path fill="#FFFFFF" d="M176.5,377.5"/>
|
||||
<path fill="#FFFFFF" d="M497.528,389.599c0,0,3.467,13.869-21.573,32.36L230.549,587.617c0,0-35.892,27.428-59.423-4.38
|
||||
c-1.569-2.121-3.758-5.251-4.529-11.029V207.761c0,0,1.643-11.05,4.622-14.833c5.009-6.355,15.025-22.536,59.33,6.55l245.405,158.53
|
||||
C475.954,358.008,497.143,371.107,497.528,389.599z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 829 B |
43
icons/volume.svg
Normal file
43
icons/volume.svg
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Livello_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<g>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M82.9,21.8c6.6,6.6,10.7,15.7,10.7,25.8s-4.1,19.2-10.7,25.8"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M71.1,64.8c4.4-4.4,7.2-10.5,7.2-17.2s-2.8-12.8-7.2-17.2"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M59.4,56.2C61.6,54,63,51,63,47.7s-1.3-6.4-3.6-8.6"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M68.1,30.4"/>
|
||||
|
||||
<path display="none" fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M78.6,21.8"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M20.7,38.3H7.4c-0.3,0-0.7,0.3-0.7,0.7v22.1c0,0.3,0.3,0.7,0.7,0.7h13.4l23.8,19.4c0.4,0.3,1.1,0.1,1.1-0.5V19.5
|
||||
c0-0.5-0.6-0.8-1.1-0.5L20.7,38.3z"/>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M83.3,22.8C89.9,29.4,94,38.5,94,48.6s-4.1,19.2-10.7,25.8"/>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M71.5,65.8c4.4-4.4,7.2-10.5,7.2-17.2s-2.8-12.8-7.2-17.2"/>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M59.8,57.2c2.2-2.2,3.6-5.2,3.6-8.5s-1.3-6.4-3.6-8.6"/>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M68.5,31.4"/>
|
||||
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="8.9597" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
|
||||
M79,22.8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
222
index.html
Normal file
222
index.html
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<title>Test player</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="/player.css">
|
||||
</head>
|
||||
<body>
|
||||
<audio id="radio"></audio>
|
||||
<div id="player">
|
||||
<div id="contents" hidden>
|
||||
<div id="altreRadio" class="tags">
|
||||
</div>
|
||||
<div id="programmi">
|
||||
<div class="show-list">
|
||||
<img id="prev-show" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png" />
|
||||
<div id="programmi-lista"></div>
|
||||
<img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" />
|
||||
</div>
|
||||
<div class="show-content">
|
||||
<img id="prev-show-card" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/>
|
||||
<div id="programmi-content"></div>
|
||||
<img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="controls" class="controls">
|
||||
<div class="controlBlock controlLeft">
|
||||
<div class="info-content">
|
||||
<span id="radio-name">Radio Spore</span>
|
||||
<br/>
|
||||
<span id="program-name">Un programma a caso</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controlBlock controlCenter">
|
||||
<span id="prev" class="prev-step control">
|
||||
<img alt="Indietro di 15 secondi" src="/icons/15_sec_prima.svg">
|
||||
</span>
|
||||
<span id="play" class="play-pause control" label="Premi per iniziare la riproduzione del player">
|
||||
<img alt="Ascolta la diretta" src="/icons/playIcon.svg">
|
||||
</span>
|
||||
<span id="next" class="prev-step control">
|
||||
<img alt="Avanti di 15 secondi" src="/icons/15_sec_dopo.svg">
|
||||
</span>
|
||||
</div>
|
||||
<div class="controlBlock controlRight">
|
||||
<div>
|
||||
<span class="live">· LIVE</span>
|
||||
<span class="live">TORNA AL LIVE</span>
|
||||
<img id="volume-button" src="/icons/volume.svg" />
|
||||
<input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
|
||||
<img id="contents-button" class="arrow-up" alt="Apri il player" src="/icons/ico-arrow.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const leRadio = [
|
||||
{ "name": "Radio Spore", "stream": "https://stream.radiospore.oziosi.org:8003/spore.ogg" },
|
||||
{ "name": "Radio Wombat", "stream": "https://s.streampunk.cc/wombat.ogg"},
|
||||
{ "name": "RadioGramma", "stream": "https://stream.radiospore.oziosi.org:8003/radiogramma.ogg"},
|
||||
{ "name": "RadioForte", "stream": "http://stream.s.streampunk.cc/player/RadioForte.ogg"},
|
||||
{ "name": "RadioEustachio", "stream": "https://stream.radiospore.oziosi.org:8003/radioeustachio.ogg"}]
|
||||
let playlist = {}
|
||||
let radio = document.getElementById("radio");
|
||||
radio.src = leRadio[0]["stream"] + "?" + Math.floor((Math.random() * 10000) + 1) ;
|
||||
const playButton = document.getElementById("play")
|
||||
const nextButton = document.getElementById("next")
|
||||
const prevButton = document.getElementById("prev")
|
||||
const contents = document.getElementById("contents")
|
||||
const contentsButton = document.getElementById("contents-button")
|
||||
const showContentsEl = document.getElementById("programmi-content")
|
||||
const showListEl = document.getElementById("programmi-lista")
|
||||
let currentStatus
|
||||
async function playPauseRadio() {
|
||||
try {
|
||||
if(radio.paused) {
|
||||
await radio.play();
|
||||
}
|
||||
else {
|
||||
await radio.pause();
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
function onVolumeChange(e) {
|
||||
console.log(e.target)
|
||||
radio.volume = e.target.value;
|
||||
}
|
||||
function setupPlayer() {
|
||||
playButton.addEventListener("click", playPauseRadio, false);
|
||||
prevButton.addEventListener("click",(e) => {
|
||||
radio.setCurrentTicurrentTime -= 15;
|
||||
}, false)
|
||||
nextButton.addEventListener("click",(e) => {
|
||||
radio.setCurrentTicurrentTime += 15;
|
||||
}, false)
|
||||
volume.addEventListener('change', onVolumeChange);
|
||||
contentsButton.addEventListener("click", (e) => {
|
||||
contents.hidden = !contents.hidden;
|
||||
e.target.classList.toggle("arrow-up");
|
||||
})
|
||||
}
|
||||
function setupRadios() {
|
||||
for(r of leRadio) {
|
||||
let el = document.createElement("span")
|
||||
el.innerHTML = r.name;
|
||||
document.getElementById("altreRadio").appendChild(el)
|
||||
}
|
||||
}
|
||||
function setupShowButtons() {
|
||||
let scrollFwd = (el) => {
|
||||
let scrollAmount = 0;
|
||||
let timer = setInterval( () => {
|
||||
el.scrollLeft += 10;
|
||||
scrollAmount += 10;
|
||||
if(scrollAmount >= 100){
|
||||
window.clearInterval(timer);
|
||||
}
|
||||
}, 25);
|
||||
|
||||
}
|
||||
let scrollBack = (el) => {
|
||||
let scrollAmount = 0;
|
||||
let timer = setInterval( () => {
|
||||
el.scrollLeft -= 10;
|
||||
scrollAmount -= 10;
|
||||
if(scrollAmount <= -100){
|
||||
window.clearInterval(timer);
|
||||
}
|
||||
}, 25);
|
||||
}
|
||||
document.getElementById("prev-show").addEventListener("click", (e) => {
|
||||
scrollBack(showListEl)
|
||||
})
|
||||
document.getElementById("next-show").addEventListener("click", (e) => {
|
||||
scrollFwd(showListEl)
|
||||
})
|
||||
document.getElementById("next-show-card").addEventListener("click", (e) => {
|
||||
scrollFwd(showContentsEl.querySelector("div.content-box:not(.hidden)"))
|
||||
})
|
||||
document.getElementById("prev-show-card").addEventListener("click", (e) => {
|
||||
scrollBack(showContentsEl.querySelector("div.content-box:not(.hidden)"))
|
||||
})
|
||||
|
||||
}
|
||||
async function setupProgrammi() {
|
||||
const res = await fetch("https://www.arkiwi.org/path64/cmFkaW9zcG9yZQ/shows");
|
||||
const shows = Array.from(await new window.DOMParser().parseFromString(await res.text(), "text/xml").getElementsByTagName("show"));
|
||||
programmi = shows.map(show => Array.from(show.childNodes).reduce((data, node) => {
|
||||
if(node.localName) {
|
||||
data[node.localName] = node.textContent // + ( node.localName == 'feed' ? '?limit=6' : '')
|
||||
}
|
||||
return data;
|
||||
}, {}))
|
||||
|
||||
for(let p of programmi) {
|
||||
let el = document.createElement("span")
|
||||
el.innerHTML = p.name;
|
||||
el.addEventListener('click', (e) => {
|
||||
const id = p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ','-');
|
||||
for(let box of document.getElementById("programmi-content").getElementsByClassName("content-box")) {
|
||||
if(box.id != id) {
|
||||
box.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
document.getElementById(id).classList.toggle("hidden");
|
||||
})
|
||||
showListEl.appendChild(el)
|
||||
fetch(p.feed)
|
||||
.then(res => res.text())
|
||||
.then(res => new window.DOMParser().parseFromString(res, "text/xml"))
|
||||
.then(xml => {
|
||||
let data = Array.from(xml.getElementsByTagName("item")).
|
||||
map(item => Array.from(item.childNodes)
|
||||
.reduce((data, node) => {
|
||||
if(node.localName) {
|
||||
if(node.prefix){
|
||||
if(!data[node.prefix]) {
|
||||
data[node.prefix] = {}
|
||||
}
|
||||
data[node.prefix][node.localName] = node.textContent
|
||||
}
|
||||
else {
|
||||
data[node.localName] = node.textContent
|
||||
// if(localName == "pubDate") {
|
||||
// data[node.localName] = new Date(data[node.localName])
|
||||
// }
|
||||
}}
|
||||
return data;
|
||||
}, {}))
|
||||
let programma = document.createElement("div")
|
||||
programma.setAttribute("id", p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ', '-'));
|
||||
programma.classList.add("content-box");
|
||||
programma.classList.add("hidden");
|
||||
document.getElementById("programmi-content").append(programma);
|
||||
for( a in data) {
|
||||
let puntata = document.createElement("div")
|
||||
let playPause = document.createElement("img")
|
||||
playPause.src = '/icons/playIcon.svg'
|
||||
playPause.classList.add("play-pause")
|
||||
let keywords = ''
|
||||
if(data[a]['itunes'] && data[a].itunes.keywords) {
|
||||
data[a]['itunes']['keywords'].split(',').map((k) => `<span>${k}</span>`).join('')
|
||||
}
|
||||
puntata.innerHTML = `<span><b>${data[a].title}</b></span> <div class="small-tags">${keywords}</div> <br/> <br/><div>${data[a].description}</div>`;
|
||||
puntata.appendChild(playPause)
|
||||
programma.appendChild(puntata)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
setupPlayer();
|
||||
setupRadios();
|
||||
setupShowButtons();
|
||||
setupProgrammi();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
208
player.css
Normal file
208
player.css
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
#player {
|
||||
background-color: #0c0c0d;
|
||||
border-radius: 6px;
|
||||
padding-top:0px;
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;;
|
||||
}
|
||||
.show-list > .arrow {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.show-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#programmi-lista {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#programmi-lista > span{
|
||||
border-radius: 5px 15px;
|
||||
/* background: #38383d; */
|
||||
border: solid 1px #fff;
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#programmi-lista > span:hover {
|
||||
background: #4a4a4f;
|
||||
}
|
||||
|
||||
#programmi-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.show-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show-content > .arrow{
|
||||
height: 50;
|
||||
width: 50;
|
||||
}
|
||||
|
||||
.play-pause {
|
||||
border: 2px solid beige;
|
||||
border-radius: 100%;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
text-align: center
|
||||
}
|
||||
.prev-step {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 35px;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
}
|
||||
.control > img {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.controlBlock {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.controlCenter {
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 16;
|
||||
}
|
||||
#player.after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.content-box> div {
|
||||
/* background: #38383d; */
|
||||
border: solid 1px #fff;
|
||||
color: #fff;
|
||||
border-radius: 5% 2%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
word-wrap: break-word;
|
||||
font-size: 9pt;
|
||||
margin-left: 20px;
|
||||
padding: 5px;
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
margin-top: 20px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#contents > div {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.controlBlock > div {
|
||||
display: inline-block;
|
||||
margin-top: 22;
|
||||
}
|
||||
|
||||
.controlBlock > div > img, input {
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.tags > span {
|
||||
border-radius: 15px;
|
||||
/* background: #38383d; */
|
||||
border: solid 1px #fff;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-top: 30px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.controls {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
height:87px;
|
||||
}
|
||||
|
||||
#volume-button {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#contents {
|
||||
margin-top: -1px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
#contents-button {
|
||||
with: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px
|
||||
}
|
||||
|
||||
.live {
|
||||
border: 2px solid #fff;
|
||||
border-radius: 4px;
|
||||
padding: 2px 7px;
|
||||
font-size: 10px;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-out;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.controlCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.controlLeft {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.controlRight {
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#volume {
|
||||
/* -webkit-appearance: none; */
|
||||
/* appearance: none; */
|
||||
/* background: #d3d3d3; */
|
||||
/* outline: none; /\* Remove outline *\/ */
|
||||
/* opacity: 0.7; /\* Set transparency (for mouse-over effects on hover) *\/ */
|
||||
/* -webkit-transition: .2s; /\* 0.2 seconds transition on hover *\/ */
|
||||
/* transition: opacity .2s; */
|
||||
}
|
||||
Loading…
Reference in a new issue