ravnur-player-public 3.4.3 → 3.4.4

package/src/styles/bplaylist.css.js

@@ -0,0 +1,124 @@
+
+export default function getStyles(styles, rect) {
+   let innerHeightWBPl = 'calc(100% - 152px)';
+
+   if (rect) {
+      innerHeightWBPl = rect.bottom - rect.top - 152 + 'px';
+   }
+
+   return `
+
+
+.rplayer--fullscreen .rplayer--bottom-playlist .rplayer__playlist-wrapper {
+   height: 0;
+   width: 0;
+}
+
+.rplayer--bottom-playlist .rplayer__inner {
+   height: ${innerHeightWBPl};
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-wrapper {
+   height: 152px
+}
+
+.rplayer--bottom-playlist .rplayer__playlist {
+   margin-top: 6px;
+   position: absolute;
+   bottom: 0
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-header {
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   height: 30px;
+   position: absolute;
+   left: 0;
+   right: 65px;
+   top: 0;
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-of {
+   top: 12px;
+   right: 8px;
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-current-title {
+   display: block;
+   position: absolute;
+   left: 8px;
+   top: 40px;
+   color: ${styles.mainColor};
+   font-size: 12px;
+   right: 8px;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-item {
+   margin-right: 10px;
+   float: left
+}
+
+.rplayer__playlist-left-btn, .rplayer__playlist-right-btn {
+   position: absolute;
+   bottom: 1px;
+   z-index: 10;
+   background-color: rgba(0,0,0,.75);
+   border: 0;
+   cursor: pointer;
+   height: 92px
+}
+
+.rplayer__playlist-left-btn svg, .rplayer__playlist-right-btn svg {
+   fill: ${styles.mainColor}
+}
+
+.rplayer__playlist-left-btn {
+   left: 0;
+}
+
+.rplayer__playlist-right-btn {
+   right: 0;
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-item-thumb {
+   width: 160px;
+   height: 90px;
+   float: left;
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-item--current .rplayer__playlist-item-thumb:before {
+   font-size: 36px;
+   line-height: 90px;
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-item .rplayer__playlist-item-title {
+   position: absolute;
+   bottom: 0;
+   left: 0;
+   right: 0;
+   width: 100%;
+
+   font-size: 11px;
+   padding: 6px;
+   line-height: 1.1;
+   background-color: rgba(31,31,31,0.625);
+   display: block;
+
+   height: 32px;
+   overflow: hidden;
+   display: -webkit-box;
+   -webkit-box-orient: vertical;
+   text-overflow: ellipsis;
+   -webkit-line-clamp: 2;
+}
+
+.rplayer--bottom-playlist .rplayer__playlist-item--current .rplayer__playlist-item-title {
+   display: none;
+}
+
+   `;
+}