44 lines
896 B
SCSS
44 lines
896 B
SCSS
|
// The following rules are styling the stream player
|
||
|
|
// that I'm using on top of live section pages.
|
||
|
|
// It doesn't belong to the theme, but to my website
|
||
|
|
// so it is here.
|
||
|
|
|
||
|
|
@use "@picocss/pico/scss/colors/index" as *;
|
||
|
|
|
||
|
|
.stream {
|
||
|
|
.status-player {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
audio {
|
||
|
|
border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Rules used by the off and on classes below
|
||
|
|
@mixin status {
|
||
|
|
display: flex;
|
||
|
|
border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 calc(var(--pico-spacing)/2);
|
||
|
|
margin: 0;
|
||
|
|
color: $grey-50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.off {
|
||
|
|
@include status;
|
||
|
|
background-color: $red-500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.on {
|
||
|
|
@include status;
|
||
|
|
background-color: $green-500;
|
||
|
|
}
|
||
|
|
|
||
|
|
// End of the stream section
|