72 lines
1.4 KiB
C
72 lines
1.4 KiB
C
const char css[] PROGMEM = R"rawliteral(
|
|
body {
|
|
font-family: Arial;
|
|
margin: 5px auto;
|
|
padding: 30px;
|
|
}
|
|
|
|
li {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.play-button {
|
|
border: 0;
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
width: 0;
|
|
margin: 5%;
|
|
height: 74px;
|
|
border-color: transparent transparent transparent grey;
|
|
transition: 100ms all ease;
|
|
cursor: pointer;
|
|
border-style: solid;
|
|
border-width: 37px 0 37px 60px;
|
|
margin-right: 10%;
|
|
margin-left: 10%;
|
|
margin-top: 5%;
|
|
margin-bottom: 5%;
|
|
}
|
|
.play-button.paused {
|
|
border-style: double;
|
|
border-width: 0px 0 0px 60px;
|
|
height: 74px;
|
|
}
|
|
.play-button:hover {
|
|
border-color: transparent transparent transparent darkgrey;
|
|
}
|
|
|
|
.next-button {
|
|
background: transparent;
|
|
padding: 0;
|
|
margin: -6px;
|
|
border-style: solid;
|
|
border-width: 18px 0 18px 30px;
|
|
border-color: transparent grey transparent grey;
|
|
box-shadow: 10px 0 0 0 grey;
|
|
}
|
|
|
|
.next-button:hover {
|
|
border-color: transparent darkgrey transparent darkgrey;
|
|
box-shadow: 10px 0 0 0 darkgrey;
|
|
}
|
|
|
|
.prev-button {
|
|
background: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-style: solid;
|
|
border-width: 18px 30px 18px 0;
|
|
border-color: transparent grey transparent grey;
|
|
box-shadow: -10px 0 0 0 grey;
|
|
}
|
|
|
|
.prev-button:hover {
|
|
border-color: transparent darkgrey transparent darkgrey;
|
|
box-shadow: -10px 0 0 0 darkgrey;
|
|
}
|
|
|
|
.slider {
|
|
width: 80%;
|
|
}
|
|
|
|
)rawliteral"; |