Knah-Tsaeb
/
html5-music-player
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update css

This commit is contained in:
Knah Tsaeb 2015-09-22 16:33:21 +02:00
parent bc565f845f
commit 5a6ba37989
2 changed files with 122 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<title>Music Player</title>
<link href="/icons/sound2.png" type="image/png" rel="shortcut icon">
<link href="player.css" type="text/css" rel="stylesheet"/>
@ -10,15 +11,17 @@
</head>
<body onload="init();">
<div id="player">
<div>
<img id="cover"/>
<div id="infos">
<h4 id="title"></h4>
<div id="controls">
<input id="back" type="button" value="|&#x25c0;&#x25c0;"/>
<input id="next" type="button" value="&#9654;&#9654;|"/>
Shuffle: <input id="shuffle" type="checkbox"/><br/>
Repeat: <input id="repeat" type="checkbox"/>
<input id="next" type="button" value="&#9654;&#9654;|"/><br />
<label for="">Shuffle:</label> <input id="shuffle" type="checkbox"/>
<label for="">Repeat: </label><input id="repeat" type="checkbox"/>
</div>
<p id="error"></p>
</div>
<img id="cover"/><br/>
<audio id="audio" controls>This is your browser speaking, I don't support HTML5 cause I am too old to learn new tricks.</audio>
</div><br/>
<div id="playlist"></div>

54
player.css
View File

@ -5,7 +5,7 @@ html,body{
body {
background: #383838;
color: white;
font-size:16px;
font-size: 1em;
font-family: 'open sans' sans serif;
font-weight: 400;
font-variant: normal;
@ -16,37 +16,45 @@ body > div{
border: 1px solid white;
border-radius: 5px;
display: inline-block;
box-sizing : border-box;
}
#player {
align-content: stretch;
align-items: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 10px;
text-align:right;
margin:10px 0;
width:300px;
margin: 10px auto;
width: 50%;
}
#player > div {
width:195px;
display: inline-block;
text-align:right;
float:right;
}
#player #cover {
width:100px;
height:100px;
align-self: auto;
flex: 0 1 140px;
height: 140px;
background: white;
border-radius: 5px;
margin-bottom: 5px;
float:left;
order: 0;
width: 140px;
}
#player #infos {
align-self: auto;
flex: 1 1 auto;
order: 0;
}
#player #title {
margin: 0;
display:inline-block;
text-align: center;
width:195px;
width: 100%;
word-wrap: break-word;
}
#player #back,
#player #next{
float:left;
#player #back, #player #next {
display: inline;
margin: 9px 5px 0 0;
font-family: Arial;
height: 25px;
@ -75,7 +83,8 @@ body > div{
overflow: auto;
text-align: left;
margin-bottom: 6px;
width:320px;
padding: 10px;
width: 50%;
}
#playlist > ul {
margin: 9px 0 9px 9px;
@ -94,8 +103,7 @@ body > div{
overflow: hidden;
height: 0;
}
#playlist li:hover > ul,
#playlist li.open > ul{
#playlist li:active > ul, #playlist li.open > ul {
height: auto;
}
#playlist .folder {
@ -116,3 +124,13 @@ body > div{
font-style: normal;
color: white;
}
@media (max-width: 768px) {
#player {
width : 96%;
}
#playlist {
width : 96%;
}
}