Skip to content

Commit

Permalink
improved design of audio player module
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronpinero
aaronpinero committed Jun 12, 2021
1 parent 7029ee0 commit 8b89c25
Show file tree
Hide file tree
Showing 7 changed files with 246 additions and 102 deletions.
2 changes: 1 addition & 1 deletion dist/style/tyfy.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/style/tyfy.css.map
View file

Large diffs are not rendered by default.

83 changes: 69 additions & 14 deletions docs/resources/style/tyfy-docs.css
View file

Large diffs are not rendered by default.

125 changes: 86 additions & 39 deletions source/scss/extras/_audio.scss
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,110 @@
figure.tyfy-audio-player {
margin-left:0;
margin-right:0;
position:relative;
margin-left: 0;
margin-right: 0;
position: relative;
audio.hidden {
height:1px;
position:absolute;
visibility:hidden;
width:1px;
z-index:0;
height: 1px;
margin: -1px;
position: absolute;
visibility: hidden;
width: 1px;
z-index: 0;
}
form.player-ui {
align-items:center;
background-color:var(--tycolor-shade);
border-radius:$tyradius-border;
display:flex;
align-items: center;
background-color: var(--tycolor-shade);
border: 1px var(--tycolor-border) solid;
border-radius: $tyradius-border;
display: flex;
span.current,
span.duration,
span.loading {
flex-shrink:0;
font-family:$tyfont-table;
font-size:tyscale(-1);
line-height:tylead(tyscale(-1));
margin-left:tygrid();
margin-right:tygrid();
white-space:nowrap;
flex-shrink: 0;
font-family: $tyfont-table;
font-size: tyscale(-2);
line-height: tylead(tyscale(-2));
text-align: center;
white-space: nowrap;
width: 7ch;
}
input.volume {
flex-shrink:0;
margin-left:tygrid();
margin-right:tygrid();
width:tygrid(5);
flex-shrink: 0;
margin-left: tygrid(0.5);
margin-right: tygrid();
width: tygrid(5);
}
button {
flex-shrink:0;
height:tygrid(3);
overflow:hidden;
padding:0;
white-space:nowrap;
width:tygrid(3);
background-color: transparent;
flex-shrink: 0;
height: tygrid(2.5);
margin: tygrid(0.5) 0 tygrid(0.5) tygrid(0.5);
overflow: hidden;
padding: 0;
white-space: nowrap;
width: tygrid(2.5);
&::before {
background-position:center center;
background-repeat:no-repeat;
background-size:tygrid(3) auto;
background-position: center center;
background-repeat: no-repeat;
background-size: tygrid(2.5) auto;
content: "";
display:block;
height:tygrid(3);
width:tygrid(3);
display: block;
height: tygrid(2.5);
width: tygrid(2.5);
}
&:hover,
&:active {
background-color: var(--tycolor-link-active);
}
&.play-pause.paused::before {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2224%2016%2010%2025%2010%207%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%20points%3D%2224%2016%2010%2025%2010%207%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}
&.play-pause.paused:hover::before {
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2224%2016%2010%2025%2010%207%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}
&.play-pause.playing::before {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2216%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Frect%3E%3Crect%20x%3D%2218%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2216%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2216%22%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%3E%3C%2Frect%3E%3Crect%20x%3D%2218%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2216%22%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
}
&.play-pause.playing:hover::before {
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2216%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Frect%3E%3Crect%20x%3D%2218%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2216%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
}
&.audio.sound::before {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2215.5%207.98650208%2016.5%207.98650208%2016.5%2023.9852814%2015.5%2023.9852814%2011.5%2019.9852814%206.5%2019.9852814%206.5%2011.9852814%2011.5%2011.9852814%22%3E%3C%2Fpolygon%3E%3Cpath%20d%3D%22M21.5%2C15.9852814%20C21.5%2C17.0898509%2021.0522847%2C18.0898509%2020.3284271%2C18.8137085%20L18.9142136%2C17.3994949%20C19.2761424%2C17.0375661%2019.5%2C16.5375661%2019.5%2C15.9852814%20C19.5%2C15.4329966%2019.2761424%2C14.9329966%2018.9142136%2C14.5710678%20L20.3284271%2C13.1568542%20C21.0522847%2C13.8807119%2021.5%2C14.8807119%2021.5%2C15.9852814%20Z%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M25.5%2C15.9852814%20C25.5%2C18.1939121%2024.6049815%2C20.1935%2023.1578535%2C21.6411362%20L21.7426407%2C20.2279221%20C22.8284271%2C19.1421356%2023.5%2C17.6421356%2023.5%2C15.9852814%20C23.5%2C14.3284271%2022.8284271%2C12.8284271%2021.7426407%2C11.7426407%20L23.1578535%2C10.3294266%20C24.6049815%2C11.7770628%2025.5%2C13.7766507%2025.5%2C15.9852814%20Z%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%20points%3D%2215.5%207.98650208%2016.5%207.98650208%2016.5%2023.9852814%2015.5%2023.9852814%2011.5%2019.9852814%206.5%2019.9852814%206.5%2011.9852814%2011.5%2011.9852814%22%3E%3C%2Fpolygon%3E%3Cpath%20d%3D%22M21.5%2C15.9852814%20C21.5%2C17.0898509%2021.0522847%2C18.0898509%2020.3284271%2C18.8137085%20L18.9142136%2C17.3994949%20C19.2761424%2C17.0375661%2019.5%2C16.5375661%2019.5%2C15.9852814%20C19.5%2C15.4329966%2019.2761424%2C14.9329966%2018.9142136%2C14.5710678%20L20.3284271%2C13.1568542%20C21.0522847%2C13.8807119%2021.5%2C14.8807119%2021.5%2C15.9852814%20Z%22%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M25.5%2C15.9852814%20C25.5%2C18.1939121%2024.6049815%2C20.1935%2023.1578535%2C21.6411362%20L21.7426407%2C20.2279221%20C22.8284271%2C19.1421356%2023.5%2C17.6421356%2023.5%2C15.9852814%20C23.5%2C14.3284271%2022.8284271%2C12.8284271%2021.7426407%2C11.7426407%20L23.1578535%2C10.3294266%20C24.6049815%2C11.7770628%2025.5%2C13.7766507%2025.5%2C15.9852814%20Z%22%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
&.audio.sound:hover::before {
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2215.5%207.98650208%2016.5%207.98650208%2016.5%2023.9852814%2015.5%2023.9852814%2011.5%2019.9852814%206.5%2019.9852814%206.5%2011.9852814%2011.5%2011.9852814%22%3E%3C%2Fpolygon%3E%3Cpath%20d%3D%22M21.5%2C15.9852814%20C21.5%2C17.0898509%2021.0522847%2C18.0898509%2020.3284271%2C18.8137085%20L18.9142136%2C17.3994949%20C19.2761424%2C17.0375661%2019.5%2C16.5375661%2019.5%2C15.9852814%20C19.5%2C15.4329966%2019.2761424%2C14.9329966%2018.9142136%2C14.5710678%20L20.3284271%2C13.1568542%20C21.0522847%2C13.8807119%2021.5%2C14.8807119%2021.5%2C15.9852814%20Z%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M25.5%2C15.9852814%20C25.5%2C18.1939121%2024.6049815%2C20.1935%2023.1578535%2C21.6411362%20L21.7426407%2C20.2279221%20C22.8284271%2C19.1421356%2023.5%2C17.6421356%2023.5%2C15.9852814%20C23.5%2C14.3284271%2022.8284271%2C12.8284271%2021.7426407%2C11.7426407%20L23.1578535%2C10.3294266%20C24.6049815%2C11.7770628%2025.5%2C13.7766507%2025.5%2C15.9852814%20Z%22%20fill%3D%22#{encodecolor($tycolor-bg)}%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
&.audio.muted::before {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2215.5%207.98650208%2016.5%207.98650208%2016.5%2023.9852814%2015.5%2023.9852814%2011.5%2019.9852814%206.5%2019.9852814%206.5%2011.9852814%2011.5%2011.9852814%22%3E%3C%2Fpolygon%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2225.5%2013.9%2023.4%2016%2025.5%2018.1%2024.1%2019.5%2022%2017.4%2019.9%2019.5%2018.5%2018.1%2020.6%2016%2018.5%2013.9%2019.9%2012.5%2022%2014.6%2024.1%2012.5%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%20points%3D%2215.5%207.98650208%2016.5%207.98650208%2016.5%2023.9852814%2015.5%2023.9852814%2011.5%2019.9852814%206.5%2019.9852814%206.5%2011.9852814%2011.5%2011.9852814%22%3E%3C%2Fpolygon%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-link-default)}%22%20points%3D%2225.5%2013.9%2023.4%2016%2025.5%2018.1%2024.1%2019.5%2022%2017.4%2019.9%2019.5%2018.5%2018.1%2020.6%2016%2018.5%2013.9%2019.9%2012.5%2022%2014.6%2024.1%2012.5%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}
&.audio.muted:hover::before {
background-image: url("data: image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2215.5%207.98650208%2016.5%207.98650208%2016.5%2023.9852814%2015.5%2023.9852814%2011.5%2019.9852814%206.5%2019.9852814%206.5%2011.9852814%2011.5%2011.9852814%22%3E%3C%2Fpolygon%3E%3Cpolygon%20fill%3D%22#{encodecolor($tycolor-bg)}%22%20points%3D%2225.5%2013.9%2023.4%2016%2025.5%2018.1%2024.1%2019.5%2022%2017.4%2019.9%2019.5%2018.5%2018.1%2020.6%2016%2018.5%2013.9%2019.9%2012.5%2022%2014.6%2024.1%2012.5%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
}
}
// range input
input[type="range"] {
&::-webkit-slider-thumb {
border: 4px var(--tycolor-link-default) solid;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,0.25);
cursor: pointer;
height:tygrid(1.5);
transition: border-color tyduration(hover);
width:tygrid(1.5);
}
&::-webkit-slider-thumb:hover {
border: 4px var(--tycolor-link-active) solid;
}
&::-moz-range-thumb {
border:4px var(--tycolor-link-default) solid;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,0.25);
cursor: pointer;
height:tygrid(1.5);
transition: border-color tyduration(hover);
width:tygrid(1.5);
}
&::-moz-range-thumb:hover {
border:4px var(--tycolor-link-active) solid;
}
}
}
Expand Down
Loading

0 comments on commit 8b89c25

Please sign in to comment.