Update css
This commit is contained in:
Knah Tsaeb
parent
bc565f845f
commit
5a6ba37989
13
index.html
13
index.html
|
|
@ -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="|◀◀"/>
|
||||
<input id="next" type="button" value="▶▶|"/>
|
||||
Shuffle: <input id="shuffle" type="checkbox"/><br/>
|
||||
Repeat: <input id="repeat" type="checkbox"/>
|
||||
<input id="next" type="button" value="▶▶|"/><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>
|
||||
|
|
|
|||
210
player.css
210
player.css
|
|
@ -1,118 +1,136 @@
|
|||
html,body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
background:#383838;
|
||||
color:white;
|
||||
font-size:16px;
|
||||
font-family:'open sans' sans serif;
|
||||
font-weight:400;
|
||||
font-variant:normal;
|
||||
font-style:normal;
|
||||
text-align:center;
|
||||
body {
|
||||
background: #383838;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
font-family: 'open sans' sans serif;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
body > div{
|
||||
border:1px solid white;
|
||||
border-radius:5px;
|
||||
display:inline-block;
|
||||
body > div {
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
box-sizing : border-box;
|
||||
}
|
||||
#player{
|
||||
padding:10px;
|
||||
text-align:right;
|
||||
margin:10px 0;
|
||||
width:300px;
|
||||
#player {
|
||||
align-content: stretch;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
width: 50%;
|
||||
}
|
||||
#player > div{
|
||||
width:195px;
|
||||
display:inline-block;
|
||||
text-align:right;
|
||||
float:right;
|
||||
#player > div {
|
||||
display: inline-block;
|
||||
}
|
||||
#player #cover{
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:white;
|
||||
border-radius:5px;
|
||||
margin-bottom:5px;
|
||||
float:left;
|
||||
#player #cover {
|
||||
align-self: auto;
|
||||
flex: 0 1 140px;
|
||||
height: 140px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
order: 0;
|
||||
width: 140px;
|
||||
}
|
||||
#player #title{
|
||||
margin:0;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
width:195px;
|
||||
word-wrap:break-word;
|
||||
#player #infos {
|
||||
align-self: auto;
|
||||
flex: 1 1 auto;
|
||||
order: 0;
|
||||
}
|
||||
#player #back,
|
||||
#player #next{
|
||||
float:left;
|
||||
margin:9px 5px 0 0;
|
||||
font-family:Arial;
|
||||
height:25px;
|
||||
width:47px;
|
||||
#player #title {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#player #error{
|
||||
margin:0;
|
||||
font-style:italic;
|
||||
color:red;
|
||||
font-size:small;
|
||||
text-align:center;
|
||||
display:none;
|
||||
#player #back, #player #next {
|
||||
display: inline;
|
||||
margin: 9px 5px 0 0;
|
||||
font-family: Arial;
|
||||
height: 25px;
|
||||
width: 47px;
|
||||
}
|
||||
#player #error.open{
|
||||
display:block;
|
||||
#player #error {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
color: red;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
#player audio{
|
||||
width:100%;
|
||||
max-height:30px;
|
||||
display:inline-block;
|
||||
font-size:small;
|
||||
text-align:center;
|
||||
#player #error.open {
|
||||
display: block;
|
||||
}
|
||||
#playlist{
|
||||
min-height:300px;
|
||||
overflow:auto;
|
||||
text-align:left;
|
||||
margin-bottom:6px;
|
||||
width:320px;
|
||||
#player audio {
|
||||
width: 100%;
|
||||
max-height: 30px;
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
}
|
||||
#playlist > ul{
|
||||
margin:9px 0 9px 9px;
|
||||
#playlist {
|
||||
min-height: 300px;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
#playlist li{
|
||||
background-repeat:no-repeat;
|
||||
padding-left:25px;
|
||||
line-height:25px;
|
||||
#playlist > ul {
|
||||
margin: 9px 0 9px 9px;
|
||||
}
|
||||
#playlist ul{
|
||||
list-style:none;
|
||||
padding-left:0;
|
||||
#playlist li {
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
#playlist > ul ul{
|
||||
/* transition:height 1s linear;*/
|
||||
overflow:hidden;
|
||||
height:0;
|
||||
#playlist ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
#playlist li:hover > ul,
|
||||
#playlist li.open > ul{
|
||||
height:auto;
|
||||
#playlist > ul ul {
|
||||
/* transition:height 1s linear;*/
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
#playlist .folder{
|
||||
background-image:url(/icons/folder.png);
|
||||
#playlist li:active > ul, #playlist li.open > ul {
|
||||
height: auto;
|
||||
}
|
||||
#playlist .folder.open{
|
||||
background-image:url(/icons/folder.open.png);
|
||||
#playlist .folder {
|
||||
background-image: url(/icons/folder.png);
|
||||
}
|
||||
#playlist .song{
|
||||
background-image:url(/icons/sound2.png);
|
||||
cursor:pointer;
|
||||
#playlist .folder.open {
|
||||
background-image: url(/icons/folder.open.png);
|
||||
}
|
||||
#playlist li{
|
||||
font-style:italic;
|
||||
color:lime;
|
||||
#playlist .song {
|
||||
background-image: url(/icons/sound2.png);
|
||||
cursor: pointer;
|
||||
}
|
||||
#playlist li:not(.playing){
|
||||
font-style:normal;
|
||||
color:white;
|
||||
#playlist li {
|
||||
font-style: italic;
|
||||
color: lime;
|
||||
}
|
||||
#playlist li:not(.playing) {
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#player {
|
||||
width : 96%;
|
||||
}
|
||||
#playlist {
|
||||
width : 96%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue