211 lines
6.7 KiB
CSS
211 lines
6.7 KiB
CSS
.music-wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
width: 400px;
|
|
height: 400px;
|
|
user-select: none; }
|
|
.music-wrapper .left, .music-wrapper .right {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
perspective-origin: 50% 50%;
|
|
perspective: 1200px; }
|
|
.music-wrapper .left .flip-card,
|
|
.music-wrapper .left .static-card, .music-wrapper .right .flip-card,
|
|
.music-wrapper .right .static-card {
|
|
background: white;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border: 7px solid #dedede; }
|
|
.music-wrapper .left .flip-card img,
|
|
.music-wrapper .left .static-card img, .music-wrapper .right .flip-card img,
|
|
.music-wrapper .right .static-card img {
|
|
width: calc(100% * 2); }
|
|
.music-wrapper .left .static-card, .music-wrapper .right .static-card {
|
|
border-right: none; }
|
|
.music-wrapper .left .flip-card, .music-wrapper .right .flip-card {
|
|
border-left: none;
|
|
transform-origin: 0% 50%;
|
|
transition: transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
|
|
transform: rotateY(0); }
|
|
.music-wrapper .left .flip-card:before, .music-wrapper .right .flip-card:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
right: -20px;
|
|
box-shadow: 29px 0px 52px 6px #bababa; }
|
|
.music-wrapper .left .flip-card img, .music-wrapper .right .flip-card img {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
right: 0; }
|
|
.music-wrapper .left {
|
|
left: 0; }
|
|
.music-wrapper .right {
|
|
right: 0; }
|
|
.music-wrapper .right:hover .flip-card {
|
|
transform: rotateY(-60deg); }
|
|
.music-wrapper .controls {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
cursor: pointer; }
|
|
.music-wrapper .controls:after {
|
|
position: absolute;
|
|
content: '';
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: inset 20px 0px 37px -10px rgba(0, 0, 0, 0.75);
|
|
pointer-events: none;
|
|
transition: width 0.5s cubic-bezier(0.45, 0, 0.55, 1); }
|
|
.music-wrapper .controls input[type="radio"] {
|
|
position: absolute;
|
|
left: -1000px; }
|
|
.music-wrapper .controls label {
|
|
flex-grow: 1;
|
|
display: block;
|
|
width: 100%;
|
|
border-top: 1px #e6e6e6 solid;
|
|
border-bottom: 1px #9c9c9c solid;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
background-color: #dcdcdc; }
|
|
.music-wrapper .controls label span {
|
|
background: no-repeat 16px 42px;
|
|
width: 80px;
|
|
height: 125px;
|
|
display: block;
|
|
pointer-events: none; }
|
|
.music-wrapper .controls input:checked + label,
|
|
.music-wrapper .controls label:active {
|
|
background-color: #BCBCBC;
|
|
box-shadow: inset 0px 0px 10px 5px rgba(120, 120, 120, 0.2);
|
|
border: 1px solid #fff; }
|
|
.music-wrapper .controls .btn-forward span {
|
|
background-size: calc(42px * 2) calc(42px * 2);
|
|
margin-left: 10px;
|
|
background: url("../../img/music/forward.svg") no-repeat center; }
|
|
.music-wrapper .controls .btn-rewind span {
|
|
background-size: calc(42px * 2) calc(42px * 2);
|
|
margin-left: 10px;
|
|
background: url("../../img/music/rewind.svg") no-repeat center; }
|
|
.music-wrapper .controls .btn-settings span {
|
|
background-size: calc(42px * 2) calc(42px * 2);
|
|
margin-left: 10px;
|
|
background: url("../../img/music/playlist.svg") no-repeat center; }
|
|
.music-wrapper .controls-overlay {
|
|
position: absolute;
|
|
display: block;
|
|
top: calc(100% - 60px);
|
|
width: 100%;
|
|
height: 60px;
|
|
z-index: 100;
|
|
overflow-x: hidden;
|
|
transition: width 0.5s cubic-bezier(0.45, 0, 0.55, 1); }
|
|
.music-wrapper .controls-overlay .song {
|
|
margin-top: 5px;
|
|
margin-left: 20px;
|
|
height: 15px;
|
|
width: 360px;
|
|
font-family: "DejaVu Serif", serif; }
|
|
.music-wrapper .controls-overlay .timer {
|
|
margin-left: 20px;
|
|
height: 15px;
|
|
z-index: 200;
|
|
width: 360px;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
vertical-align: center; }
|
|
.music-wrapper .controls-overlay .timer .button {
|
|
width: 10px;
|
|
height: 12px;
|
|
margin-left: 2px;
|
|
fill: none;
|
|
stroke: #4c4c4c;
|
|
stroke-width: 0.5;
|
|
stroke-miterlimit: 10;
|
|
cursor: pointer;
|
|
color: white;
|
|
mix-blend-mode: difference; }
|
|
.music-wrapper .controls-overlay .timer .button.active {
|
|
animation: bounce 500ms alternate;
|
|
transform: scale(1.3);
|
|
transition: transform 150ms; }
|
|
.music-wrapper .controls-overlay .timer .button:hover {
|
|
animation: bounce 500ms alternate;
|
|
transform: scale(1.1);
|
|
transition: transform 150ms; }
|
|
.music-wrapper .controls-overlay .timer .button.active:hover {
|
|
animation: bounce 500ms alternate;
|
|
transform: scale(1.5);
|
|
transition: transform 150ms; }
|
|
.music-wrapper .controls-overlay .timer .timeline * {
|
|
border: gray 0;
|
|
border-radius: 8px; }
|
|
.music-wrapper .controls-overlay .timer .timeline {
|
|
width: calc(100% - 100px);
|
|
height: 4px;
|
|
float: left;
|
|
background: #DBE3E3;
|
|
position: relative;
|
|
align-self: center;
|
|
border: gray 0;
|
|
border-radius: 8px; }
|
|
.music-wrapper .controls-overlay .timer .timeline .buffered {
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 100%;
|
|
background: #a0a0a0; }
|
|
.music-wrapper .controls-overlay .timer .timeline .played {
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 100%;
|
|
background: #1fe2e3; }
|
|
.music-wrapper .controls-overlay .timer .timeline .slider {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 12px;
|
|
top: -4px;
|
|
background: #303030;
|
|
cursor: pointer; }
|
|
.music-wrapper .controls-overlay .timer .time {
|
|
min-width: 38px;
|
|
margin-left: 5px;
|
|
position: relative;
|
|
align-self: center;
|
|
font-family: "fantasy"; }
|
|
.music-wrapper .controls-overlay.flipped {
|
|
width: calc(50% + 7px); }
|
|
|
|
.music-wrapper.empty {
|
|
border: 7px solid #dedede;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: white; }
|
|
|
|
.music-wrapper.empty img {
|
|
margin: 5px;
|
|
-webkit-animation: rotation 5s infinite linear; }
|
|
|
|
@-webkit-keyframes rotation {
|
|
from {
|
|
-webkit-transform: rotate(0deg); }
|
|
to {
|
|
-webkit-transform: rotate(359deg); } }
|
|
.music-wrapper.empty a {
|
|
text-align: center;
|
|
margin: 5px;
|
|
margin-top: 20px;
|
|
font-size: 20px;
|
|
font-family: Arial; }
|
|
|
|
/*# sourceMappingURL=info_plate.css.map */
|