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> <html>
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<title>Music Player</title> <title>Music Player</title>
<link href="/icons/sound2.png" type="image/png" rel="shortcut icon"> <link href="/icons/sound2.png" type="image/png" rel="shortcut icon">
<link href="player.css" type="text/css" rel="stylesheet"/> <link href="player.css" type="text/css" rel="stylesheet"/>
@ -10,15 +11,17 @@
</head> </head>
<body onload="init();"> <body onload="init();">
<div id="player"> <div id="player">
<div> <img id="cover"/>
<div id="infos">
<h4 id="title"></h4> <h4 id="title"></h4>
<div id="controls">
<input id="back" type="button" value="|&#x25c0;&#x25c0;"/> <input id="back" type="button" value="|&#x25c0;&#x25c0;"/>
<input id="next" type="button" value="&#9654;&#9654;|"/> <input id="next" type="button" value="&#9654;&#9654;|"/><br />
Shuffle: <input id="shuffle" type="checkbox"/><br/> <label for="">Shuffle:</label> <input id="shuffle" type="checkbox"/>
Repeat: <input id="repeat" type="checkbox"/> <label for="">Repeat: </label><input id="repeat" type="checkbox"/>
</div>
<p id="error"></p> <p id="error"></p>
</div> </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> <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><br/>
<div id="playlist"></div> <div id="playlist"></div>

210
player.css
View File

@ -1,118 +1,136 @@
html,body{ html, body {
margin:0; margin: 0;
padding:0; padding: 0;
} }
body{ body {
background:#383838; background: #383838;
color:white; color: white;
font-size:16px; font-size: 1em;
font-family:'open sans' sans serif; font-family: 'open sans' sans serif;
font-weight:400; font-weight: 400;
font-variant:normal; font-variant: normal;
font-style:normal; font-style: normal;
text-align:center; text-align: center;
} }
body > div{ body > div {
border:1px solid white; border: 1px solid white;
border-radius:5px; border-radius: 5px;
display:inline-block; display: inline-block;
box-sizing : border-box;
} }
#player{ #player {
padding:10px; align-content: stretch;
text-align:right; align-items: flex-start;
margin:10px 0; display: flex;
width:300px; flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 10px;
margin: 10px auto;
width: 50%;
} }
#player > div{ #player > div {
width:195px; display: inline-block;
display:inline-block;
text-align:right;
float:right;
} }
#player #cover{ #player #cover {
width:100px; align-self: auto;
height:100px; flex: 0 1 140px;
background:white; height: 140px;
border-radius:5px; background: white;
margin-bottom:5px; border-radius: 5px;
float:left; margin-bottom: 5px;
order: 0;
width: 140px;
} }
#player #title{ #player #infos {
margin:0; align-self: auto;
display:inline-block; flex: 1 1 auto;
text-align:center; order: 0;
width:195px;
word-wrap:break-word;
} }
#player #back, #player #title {
#player #next{ margin: 0;
float:left; text-align: center;
margin:9px 5px 0 0; width: 100%;
font-family:Arial; word-wrap: break-word;
height:25px;
width:47px;
} }
#player #error{ #player #back, #player #next {
margin:0; display: inline;
font-style:italic; margin: 9px 5px 0 0;
color:red; font-family: Arial;
font-size:small; height: 25px;
text-align:center; width: 47px;
display:none;
} }
#player #error.open{ #player #error {
display:block; margin: 0;
font-style: italic;
color: red;
font-size: small;
text-align: center;
display: none;
} }
#player audio{ #player #error.open {
width:100%; display: block;
max-height:30px;
display:inline-block;
font-size:small;
text-align:center;
} }
#playlist{ #player audio {
min-height:300px; width: 100%;
overflow:auto; max-height: 30px;
text-align:left; display: inline-block;
margin-bottom:6px; font-size: small;
width:320px; text-align: center;
} }
#playlist > ul{ #playlist {
margin:9px 0 9px 9px; min-height: 300px;
overflow: auto;
text-align: left;
margin-bottom: 6px;
padding: 10px;
width: 50%;
} }
#playlist li{ #playlist > ul {
background-repeat:no-repeat; margin: 9px 0 9px 9px;
padding-left:25px;
line-height:25px;
} }
#playlist ul{ #playlist li {
list-style:none; background-repeat: no-repeat;
padding-left:0; padding-left: 25px;
line-height: 25px;
} }
#playlist > ul ul{ #playlist ul {
/* transition:height 1s linear;*/ list-style: none;
overflow:hidden; padding-left: 0;
height:0;
} }
#playlist li:hover > ul, #playlist > ul ul {
#playlist li.open > ul{ /* transition:height 1s linear;*/
height:auto; overflow: hidden;
height: 0;
} }
#playlist .folder{ #playlist li:active > ul, #playlist li.open > ul {
background-image:url(/icons/folder.png); height: auto;
} }
#playlist .folder.open{ #playlist .folder {
background-image:url(/icons/folder.open.png); background-image: url(/icons/folder.png);
} }
#playlist .song{ #playlist .folder.open {
background-image:url(/icons/sound2.png); background-image: url(/icons/folder.open.png);
cursor:pointer;
} }
#playlist li{ #playlist .song {
font-style:italic; background-image: url(/icons/sound2.png);
color:lime; cursor: pointer;
} }
#playlist li:not(.playing){ #playlist li {
font-style:normal; font-style: italic;
color:white; color: lime;
} }
#playlist li:not(.playing) {
font-style: normal;
color: white;
}
@media (max-width: 768px) {
#player {
width : 96%;
}
#playlist {
width : 96%;
}
}