c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some styling

Browse source
This commit is contained in:
Henri Bergius 2017-12-04 17:38:46 +01:00
parent 603c06ef2e
commit 8ec2795057
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
elements/mpd.js
View file

@ -67,6 +67,24 @@ class MPD extends Component {
root.removeChild(root.firstChild); root.removeChild(root.firstChild);
} }
root.appendChild(render()); root.appendChild(render());
const styles = document.createElement('style');
styles.appendChild(document.createTextNode(`
.artist, .song {
color: #fff;
}
progress {
-webkit-appearance: none;
appearance: none;
width: 40%;
}
progress::-webkit-progress-bar {
background-color: #2e3436;
}
progress[value]::-webkit-progress-value {
background-color: hsl(35, 98%, 46%);
}
`));
root.appendChild(styles);
} }
render({ data }) { render({ data }) {
@ -91,10 +109,10 @@ class MPD extends Component {
volume = 0; volume = 0;
} }
el.innerHTML = ` el.innerHTML = `
<div>${artist}</div> <div class="artist">${artist}</div>
<div>${data.current_song.title}</div> <div class="song">${data.current_song.title}</div>
<div>${status}</div> <div>${status}</div>
<div><progress min="0" max="100" value="${volume}"></progress> &#128264; ${volume}</div> <div><progress min="0" max="100" value="${volume}"></progress> volume ${volume}</div>
`; `;
return el; return el;
} }

14
elements/userlist.js
View file

@ -53,6 +53,12 @@ class UserList extends Component {
-webkit-animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate; -webkit-animation-direction: alternate;
} }
span.output {
color: #fff;
}
span.prompt {
color: #a0a0a0;
}
`)); `));
root.appendChild(styles); root.appendChild(styles);
} }
@ -61,10 +67,10 @@ class UserList extends Component {
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'terminal'; el.className = 'terminal';
el.innerHTML = ` el.innerHTML = `
<div>user@c-beam&gt; #who</div> <div><span class="prompt">user@c-beam&gt;</span> #who</div>
<div>${data.join(', ')}</div> <div><span class="output">${data.join(', ')}</span></div>
<div>total: ${data.length}</div> <div>total: <span class="output">${data.length}</span></div>
<div>user@c-beam&gt; <blink>_</blink></div> <div><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div>
`; `;
return el; return el;
} }