I’m trying to figure out how to remove z-index from the play/pause buttons.
.playd,
.paused {
position: absolute;
top: -4px;
right: 0;
bottom: 0;
left: 4px;
margin: auto;
fill: #0059dd;
z-index: 2;
}
I just figured out how to do it.
.image::before,
.image::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: url("https://i.imgur.com/ZmbeHHW.png") no-repeat center;
border-radius: 50%;
width: 170px;
height: 170px;
}
.image::after {
background: url("https://i.imgur.com/4HJbzEq.png") no-repeat;
width: 180px;
height: 180px;
}
<div class="playButtond" data-audio="http://hi5.1980s.fm/;">
<div class="image"></div>
1.)
And here I managed to remove all of the z-indexes:
https://jsfiddle.net/hk8q4ugw/5/
.playButtond {
position: relative;
width: 266px;
height: 200px;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.image::before,
.image::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: url("https://i.imgur.com/ZmbeHHW.png") no-repeat center;
border-radius: 50%;
width: 170px;
height: 170px;
}
.image::after {
background: url("https://i.imgur.com/4HJbzEq.png") no-repeat;
width: 180px;
height: 180px;
}
.playd,
.paused {
position: absolute;
top: -4px;
right: 0;
bottom: 0;
left: 4px;
margin: auto;
fill: #0059dd;
}
.paused {
left: 0;
}
.linesd::before,
.linesd::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesd::after {
left: 174px;
}
.hided {
display: none;
}
2.)
The one with the border now only needs 1 z-index:
https://jsfiddle.net/hk8q4ugw/46/
.playd,
.paused {
position: absolute;
top: -4px;
right: 0;
bottom: 0;
left: 4px;
z-index: 1;
margin: auto;
fill: #0059dd;
}
3.)
Tooltips now works on hover:
https://jsfiddle.net/hk8q4ugw/50/
.playButtond {
position: relative;
width: 266px;
height: 200px;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.image::before,
.image::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: url("https://i.imgur.com/ZmbeHHW.png") no-repeat center;
border-radius: 50%;
width: 170px;
height: 170px;
}
.image::after {
background: url("https://i.imgur.com/4HJbzEq.png") no-repeat;
width: 180px;
height: 180px;
}
.stack {
position: relative;
stroke-width: 2;
stroke: green;
fill: transparent;
}
.playButtond:hover .stack {
stroke: red;
}
.playd,
.paused {
position: absolute;
top: -4px;
right: 0;
bottom: 0;
left: 4px;
z-index:1;
margin: auto;
fill: #0059dd;
}
.paused {
left: 0;
}
.linesd::before,
.linesd::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.linesd::after {
left: 174px;
}
.hided {
display: none;
}
4.)
I just completely removed z-index from the safe code.
https://jsfiddle.net/v19fmpy8/17/
.image {
position: relative;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
width: 266px;
height: 251px;
background: url("https://i.imgur.com/qaEvk4G.png") no-repeat;
}
.lines::before,
.lines::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
.lines::after {
left: 174px;
}
.stack {
position: relative;
stroke-width: 6;
stroke: #89cff0;
}
.playf,
.pausef {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 14px;
margin: auto;
fill: #0059dd;
}
.pausef {
left: 10px;
}
.hidef {
display: none;
}
5.)
I just removed z-index from the 2 lines from this code.
https://jsfiddle.net/27txbnj0/4/
6.)
I just realized soon after I can simplify it even more.
By doing this.
<div class="playButtonf image" data-audio="http://hi5.1980s.fm/;">
https://jsfiddle.net/v19fmpy8/23/
Are there any other optimizations I should do?