.c-player {
- display: flex;
width: 100%;
align-items: center;
position: relative;
- padding: 25px 34px;
background-color: #D5ECED;
- border-radius: 5px;
+ padding: 105px 70px 25px 70px;
+
+ @include rwd($break-flow) {
+ display: flex;
+ flex-direction: row;
+ padding: 25px 34px 25px 14px;
+ }
+}
+
+.c-player__head {
+ background: #006066;
+ padding: 8px 14px;
+ border-radius: 5px 5px 0px 0px;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.02em;
+ color: #FFFFFF;
}
.c-player__btn {
}
}
}
+.jp-state-playing {
+ .c-player__btn {
+ .icon.icon-play {
+ left: 1px;
+ }
+ }
+}
-.c-player__timeline {
- max-width: 590px;
- width: calc(100% - 60px);
- margin-left: auto;
- margin-right: 0;
- position: relative;
+.c-player__btns {
+ display: flex;
+ align-items: center;
- &:before {
- content: "1×";
- font-weight: bold;
- font-size: 15px;
- line-height: 120%;
- text-align: center;
- color: #007880;
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto;
+ .play-prev {
+ position: absolute;
+ left: calc(30% - 20px);
+ top: 15px;
+ @include rwd($break-flow) {
+ position: static;
+ }
+ }
+ .jp-play {
+ position: absolute;
+ left: calc(50% - 25px);
+ top: 10px;
+ @include rwd($break-flow) {
+ position: static;
+ }
+ }
+ .play-next {
+ position: absolute;
+ left: calc(70% - 20px);
+ top: 15px;
+ @include rwd($break-flow) {
+ position: static;
+ }
+ }
+
+ button {
+ padding: 0;
display: flex;
align-items: center;
justify-content: center;
- margin-left: -70px;
+ background-color: transparent;
+ width: 40px; height: 40px;
+ border-radius: 50%;
+ cursor: pointer;
+ margin: 0 5px;
+ outline: 0;
+ border: 1px solid transparent;
+ transition: border-color $ease-out 450ms;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:hover {
+ border-color: rgba(#007880, 0.5);
+ }
+
+ &:disabled {
+ opacity: .33;
+ &:hover {
+ border-color: transparent;
+ }
+ }
+
+ &.c-player__btn--md {
+ width: 50px; height: 50px;
+ .icon-play {
+ font-size: 20px;
+ position: relative;
+ left: 2px;
+ }
+ .icon-pause {
+ font-size: 20px;
+ }
+ }
+
+ .icon {
+ color: #007880;
+ font-size: 16px;
+ }
+ }
+}
+.jp-state-playing {
+ .c-player__btns {
+ button {
+ &.c-player__btn--md {
+ .icon-play {
+ left: 0;
+ }
+ }
+ }
+ }
+}
+
+.c-player__timeline {
+ @include rwd($break-flow) {
+ position: relative;
+ width: calc(100% - 60px);
+ margin-left: auto;
+ max-width: 590px;
+ margin-right: 0;
}
& > span {
height: 10px;
width: 100%;
display: block;
- background: #FFFFFF;
+ background: #F2F2F2;
border-radius: 5px;
position: relative;
overflow: hidden;
- span {
- width: 40%;
+ span.jp-seek-bar {
height: 100%;
position: absolute;
border-radius: 5px;
- background-color: #083F4D;
+ background-color: #FFFFFF;
+ top: 0; left: 0;
+ }
+
+ span.jp-play-bar {
+ height: 100%;
+ position: absolute;
+ border-radius: 5px;
+ background-color: #006066;
top: 0; left: 0;
}
}
}
-.c-player__info {
+
+
+
+.c-player__title {
top: -27px;
- right: 0;
+ left: 0;
position: absolute;
font-style: normal;
font-weight: normal;
color: #083F4D;
}
+
+.c-player__info {
+ position: absolute;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.05em;
+ color: #083F4D;
+
+ top: 70px;
+ left: 16px;
+
+ @include rwd($break-flow) {
+ top: -27px;
+ left: 0;
+ }
+}
+
+.c-player__chapters {
+ top: 35px - 8.4px;
+ right: calc(10% - 50px);
+ width: 100px;
+ position: absolute;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.05em;
+ color: #083F4D;
+ z-index: 1;
+
+ @include rwd($break-flow) {
+ top: -27px;
+ right: 0;
+ }
+
+ &.is-active {
+ > span {
+ &:after {
+ transform: rotate(180deg);
+ }
+ }
+ ul {
+ opacity: 1;
+ transform: none;
+ pointer-events: all;
+ }
+ }
+
+ > span {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ justify-content: center;
+
+ &:after {
+ margin-left: 5px;
+ content: $icon-arrow-down;
+ font-family: '#{$icomoon-font-family}' !important;
+ transition: transform $ease-out 450ms;
+ }
+ }
+
+ ul {
+ width: 283px;
+ position: absolute;
+ background-color: #083F4D;
+ transform: translateY(-10px);
+ opacity: 0;
+ box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
+ transition: all $ease-out 450ms;
+ list-style-position: inside;
+ border-radius: 10px;
+ right: 0;
+ margin: 10px 0 0;
+ padding: 15px;
+ pointer-events: none;
+ li {
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.05em;
+ list-style-type: decimal;
+ margin: 5px 0;
+ color: white;
+ cursor: pointer;
+
+ span {
+ display: none;
+ }
+ span.title {
+ display: inline;
+ }
+ }
+ }
+}
+
+.c-player__volume {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ margin-left: 40px;
+
+ @include rwd($break-flow) {
+ display: flex;
+ }
+
+ .icon {
+ font-size: 21px;
+ color: #007880;
+ margin-right: 8px;
+ cursor: pointer;
+ }
+
+ .jp-volume-bar {
+ width: 100px;
+ border-radius: 5px;
+ height: 10px;
+ display: block;
+ background: white;
+ }
+ .jp-volume-bar-value {
+ display: block;
+ height: 10px;
+ border-radius: 5px;
+ background: #006066;
+ }
+}
+
+
.c-player__length {
- width: 100%;
- display: block;
- position: relative;
- span {
+ @include rwd($break-flow) {
+ position: relative;
+ display: block;
+ width: 100%;
+ }
+
+ > span {
position: absolute;
- padding-top: 10px;
font-style: normal;
font-weight: normal;
font-size: 12px;
letter-spacing: 0.05em;
color: #083F4D;
- &:nth-child(1) { left: 0; }
- &:nth-child(2) { right: 0; }
+ bottom: 22px;
+
+ @include rwd($break-flow) {
+ padding-top: 10px;
+ bottom: auto;
+ }
+
+ &.jp-current-time {
+ left: 16px;
+
+ @include rwd($break-flow) {
+ left: 0;
+ }
+ }
+ &.time-left {
+ right: 16px;
+ @include rwd($break-flow) {
+ right: 0;
+ }
+ }
+ &.total-time-left {
+ left: 0;
+ right: 0;
+ bottom: 5px;
+ text-align: center;
+ @include rwd($break-flow) {
+ bottom: auto;
+ }
+ }
}
}
+
+
+.project-icon {
+ max-width: 100px;
+ max-height: 50px;
+}
fnp / wolnelektury.git / blobdiff