|
|
|
|
@ -176,7 +176,7 @@ $composition-container-height: 60px;
|
|
|
|
|
letter-spacing: 0.03em;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
margin-bottom: 3px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.react-contextmenu-wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: start;
|
|
|
|
|
@ -415,57 +415,48 @@ $composition-container-height: 60px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// z-index: 3;
|
|
|
|
|
// width: 4px;
|
|
|
|
|
// height: 5px;
|
|
|
|
|
// margin-left: 0px;
|
|
|
|
|
// top: 0px;
|
|
|
|
|
// background: #00f782;
|
|
|
|
|
// border-radius: 50px;
|
|
|
|
|
|
|
|
|
|
/* ************ */
|
|
|
|
|
/* AUDIO PLAYER */
|
|
|
|
|
/* ************ */
|
|
|
|
|
$rhap_theme-color: #212121 !default;
|
|
|
|
|
$rhap_background-color: rgba(0,0,0,0) !default;
|
|
|
|
|
$rhap_background-color: rgba(0, 0, 0, 0) !default;
|
|
|
|
|
$rhap_bar-color: #232323 !default;
|
|
|
|
|
$rhap_time-color: #DDDDDD !default;
|
|
|
|
|
$rhap_time-color: #dddddd !default;
|
|
|
|
|
$rhap_font-family: inherit !default;
|
|
|
|
|
|
|
|
|
|
.rhap_container, .rhap_container button, .rhap_progress-container {
|
|
|
|
|
.rhap_container,
|
|
|
|
|
.rhap_container button,
|
|
|
|
|
.rhap_progress-container {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-container {
|
|
|
|
|
margin: 0 0 0 calc(10px + 1%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_container {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
font-family: $rhap_font-family;
|
|
|
|
|
min-width: 220px;
|
|
|
|
|
padding: 10px 0px;
|
|
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
vertical-align: initial; // overwrite Bootstrap default
|
|
|
|
|
}
|
|
|
|
|
padding: 0px;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_current-time {
|
|
|
|
|
.rhap_total-time {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_total-time{
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
.rhap_current-time {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_play-pause-button {
|
|
|
|
|
@ -478,80 +469,15 @@ $rhap_font-family: inherit !default;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-container div[role="progressbar"] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_header {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_footer {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_main {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_stacked {
|
|
|
|
|
.rhap_controls-section {
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_horizontal {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
|
|
.rhap_controls-section {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_horizontal-reverse {
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
|
|
|
|
.rhap_controls-section {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_stacked-reverse {
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
|
|
|
|
|
.rhap_controls-section {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-section {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 3 1 auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 20px;
|
|
|
|
|
flex: 1 0 auto;
|
|
|
|
|
align-self: center;
|
|
|
|
|
margin: 0 calc(10px + 1%);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
.rhap_volume-container div[role='progressbar'] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_time {
|
|
|
|
|
color: $rhap_time-color;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-bar {
|
|
|
|
|
@ -565,15 +491,7 @@ $rhap_font-family: inherit !default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-filled {
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
background-color: $rhap_theme-color;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-bar-show-download {
|
|
|
|
|
background-color: rgba($rhap_bar-color, 0.5);
|
|
|
|
|
background-color: #00f782;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_download-progress {
|
|
|
|
|
@ -585,16 +503,15 @@ $rhap_font-family: inherit !default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_progress-indicator {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin-left: -10px;
|
|
|
|
|
top: -8px;
|
|
|
|
|
background: $session-color-green;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
box-shadow: rgba($rhap_theme-color, .5) 0 0 5px;
|
|
|
|
|
display: none;
|
|
|
|
|
// z-index: 3;
|
|
|
|
|
// width: 10px;
|
|
|
|
|
// height: 5px;
|
|
|
|
|
// margin-left: -5px;
|
|
|
|
|
// top: 0px;
|
|
|
|
|
// background: $session-color-green;
|
|
|
|
|
// box-shadow: none;
|
|
|
|
|
// box-shadow: rgba($rhap_theme-color, .5) 0 0 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_controls-section {
|
|
|
|
|
@ -604,122 +521,26 @@ $rhap_font-family: inherit !default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_additional-controls {
|
|
|
|
|
// display: flex;
|
|
|
|
|
display: none;
|
|
|
|
|
flex: 1 0 auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_repeat-button {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
width: 26px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
color: $rhap_theme-color;
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_main-controls {
|
|
|
|
|
flex: 0 1 auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_main-controls-button {
|
|
|
|
|
margin: 0 3px;
|
|
|
|
|
color: $rhap_theme-color;
|
|
|
|
|
font-size: 35px;
|
|
|
|
|
width: 25px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-controls {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1 0 auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.rhap_play-pause-button {
|
|
|
|
|
width: unset;
|
|
|
|
|
height: unset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-button {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
.rhap_controls-section {
|
|
|
|
|
flex: unset;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-button {
|
|
|
|
|
flex: 0 0 26px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 0 1 100px;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-bar-area {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-bar {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 4px;
|
|
|
|
|
background: $rhap_bar-color;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rhap_volume-indicator {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 12px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
margin-left: -6px;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: -4px;
|
|
|
|
|
background: $rhap_theme-color;
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
box-shadow: rgba($rhap_theme-color, .5) 0 0 3px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: .9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Utils */
|
|
|
|
|
.rhap_button-clear {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: .9;
|
|
|
|
|
transition-duration: .2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: .95;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* **************** */
|
|
|
|
|
/* END AUDIO PLAYER */
|
|
|
|
|
/* **************** */
|
|
|
|
|
/* **************** */
|
|
|
|
|
|
Vincent
5 years ago