File manager

File manager - Edit - /home/nandedex/public_html/s.nandedexpress.com/wp-content/plugins/better-playlist/css/better-playlist.css

Back
/** Better Studio PlayList Table of Contents: =>PlayList -> global -> Player -> Videos List todo refactor style and add minfied style also todo change scroolbar style to be crossbrowser / .bsp-wrapper{ margin-bottom: 30px; } /* Videos List ScrollBar Style / .bsp-videos-items::-webkit-scrollbar { width: 6px; } .bsp-videos-items::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.4); } .bsp-videos-items::-webkit-scrollbar-thumb { background-color: #727272; background-color: rgba(255, 255, 255, 0.4); border-radius: 8px } /* =>PlayList -> global / .bsp-style-1.bsp-wrapper { color: #fff; font-family: 'Open Sans' /rtl:inherit/; font-weight: 600; } .bsp-style-1.bsp-wrapper .bsp-item { color: #fff; text-decoration: none; } .bsp-style-1.bsp-wrapper:after { content: ' '; display: table; clear: both; } .bsp-style-1 .bsp-videos, .bsp-style-1 .bsp-player-wrapper { float: left; height: 435px; overflow: hidden; position: relative; } .bsp-style-1 .bsp-small { font-size: 10px; font-family: sans-serif /rtl:inherit/; font-style: normal; font-weight: 400; line-height: 10px; } /* =>PlayList -> Player / .bsp-style-1 .bsp-player-wrapper { width: 68%; } .bsp-style-1 .bsp-player { height: 435px; background: #000; } /* =>PlayList ->Videos List / .bsp-style-1 .bsp-videos { width: 32%; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.61; background: #26272E; } .bsp-style-1 .bsp-playlist-info { color: #fff; padding: 24px 22px 24px 53px; position: absolute; top: 0; left: 0; width: 100%; height: 88px; line-height: 0; } .bsp-style-1 .bsp-playlist-info:after{ content: ''; height: 8px; position: absolute; bottom: -8px; left: 0; right: 0; z-index: 1; background: -moz-linear-gradient(top, rgba(27, 27, 27, 0) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(27, 27, 27, 0) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(27, 27, 27, 0) 0%,rgba(0,0,0,0) 100%); } .bsp-style-1 .bsp-playlist-info .bsp-video-name { height: 23px; overflow: hidden; line-height: 20px; font-size: 16px; color: #fff; } .bsp-style-1 .bsp-playlist-info .bsp-video-name .fa{ font-size: 28px; position: absolute; left: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; /* display: none; / color: rgb(255, 255, 255); z-index: 0; } .bsp-style-1 .bsp-video-by, .bsp-style-1 .bsp-video-position { display: inline-block; margin-right: 8px; margin-top: 7px; color: rgba(255, 255, 255, 0.51); } .bsp-style-1 .bsp-videos-items { overflow-x: hidden; overflow-y: auto; padding: 5px 0; position: absolute; top: 90px; left: 0; right: 10px; bottom: 0; } .bsp-style-1 .bsp-videos-items ul, .bsp-style-1 .bsp-videos-items ol { list-style-type: none; margin: 0; padding: 0; } .bsp-style-1 .bsp-item .bsp-video-thumbnail { float: left; display: inline-block; width: 72px; height: 50px; overflow: hidden; margin-right: 13px; position: relative; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.58); } .bsp-style-1 .bsp-video-thumbnail img { max-height: 54px; max-width: 76px; display: inline-block; position: absolute; top: 50%; margin-top: -27px; } .bsp-style-1 .bsp-videos-items li { padding: 13px 16px 16px 44px; position: relative; line-height: 0; height: 78px; margin-bottom: 0; } .bsp-style-1 .bsp-videos-items .bsp-videos-item:hover, .bsp-style-1 .bsp-videos-items .bsp-current-item { background: rgba(255, 255, 255, 0.03); } .bsp-style-1 .bsp-videos-items li li { display: none; display: none; } .bsp-style-1 .bsp-videos-items li a { display: block; } .bsp-style-1 .bsp-video-index { position: absolute; top: 50%; left: 11px; font-family: sans-serif /rtl:inherit/; font-style: normal; font-weight: 600; color: rgba(255, 255, 255, 0.34); font-size: 10px; line-height: 14px; margin-top: -7px; width: 20px; text-align: center; } .bsp-style-1 .bsp-videos-items .bsp-video-name { display: block; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; padding-top: 3px; margin-bottom: 4px; max-height: 33px; overflow: hidden; color: #fff; } .bsp-style-1 .bsp-videos-items .bsp-small { color: rgba(255, 255, 255, 0.34); } .bsp-style-1 .bsp-video-icon { opacity: 0; transition: opacity .3s ease; content: ' '; display: block; } .bsp-style-1 li.bsp-current-item .bsp-video-index { text-indent: -9999px; } .bsp-style-1 li.bsp-current-item .bsp-video-index::before { border: 2px solid #ffffff; position: absolute; top: 50%; margin-top: -12px; left: 0px; opacity: 1; content: ''; display: block; width: 22px; height: 22px; border-radius: 50%; } .bsp-style-1 li.bsp-current-item .bsp-video-index::after { border: 5px solid transparent; /rtl:ignore/ border-left-color: #ffffff; position: absolute; top: 50%; margin-top: -6px; left: 9px /rtl:7px/; opacity: 1; content: ''; display: block; width: 10px; height: 10px; } .bsp-style-1.playlist-title-hide .bsp-videos-items { top: 0; padding-top: 0; } / Responsive / .bsp-wrapper.bsp-style-1.layout-1-column .bsp-videos, .bsp-wrapper.bsp-style-1.layout-1-column .bsp-player-wrapper{ width: 100%; float: none; height: auto; } .bsp-wrapper.bsp-style-1.layout-1-column .bsp-player-wrapper .bsp-player, .bsp-wrapper.bsp-style-1.layout-1-column .bsp-player-wrapper { height: 250px; } .bsp-wrapper.bsp-style-1.layout-1-column.long .bsp-player-wrapper .bsp-player, .bsp-wrapper.bsp-style-1.layout-1-column.long .bsp-player-wrapper { height: 400px; } .bsp-wrapper.bsp-style-1.layout-1-column .bsp-videos{ height: 378px; } @media only screen and (max-width: 680px) { .bsp-wrapper.bsp-style-1 .bsp-videos, .bsp-wrapper.bsp-style-1 .bsp-player-wrapper{ width: 100% !important; float: none !important; height: auto !important; } .bsp-wrapper.bsp-style-1 .bsp-player-wrapper .bsp-player, .bsp-wrapper.bsp-style-1 .bsp-player-wrapper { height: 250px !important; } .bsp-wrapper.bsp-style-1 .bsp-videos{ height: 378px !important; } } /* Playlist Style-2 / .bsp-style-2 .bsp-videos, .bsp-style-2 .bsp-player-wrapper, .bsp-style-2 .bsp-playlist-info{ background: #1d1d1d; text-align: center; } /* playlist info / .bsp-style-2 .bsp-player{ height: 560px; } .bsp-style-2 .bsp-playlist-info { color: #fff; padding: 30px 15px; width: 100%; } .bsp-style-2 .bsp-playlist-info .bsp-video-name{ font-weight: bolder; font-size: 28px; margin-bottom: 4px; color: #fff; } .bsp-style-2 .bsp-playlist-info .bsp-small{ display: inline-block; margin: 0 6px; font-size: 12px; font-family: sans-serif /rtl:inherit/; color: #fff; } / playlist player / .bsp-style-2 .bsp-player-wrapper{ background: #1d1d1d; } / playlist videos / .bsp-style-2 .bsp-videos { height: auto; padding: 0px 5px 10px; } .bsp-style-2 .bsp-videos-items { overflow-y: hidden; overflow-x: auto; } .bsp-style-2 .bsp-videos-items ol{ margin: 0; padding: 0; white-space: nowrap; list-style: none; } .bsp-style-2 .bsp-videos-items::-webkit-scrollbar { height: 6px; } / playlist videos item / .bsp-style-2 .bsp-videos-item { text-align: center; margin-right: -3px; padding: 30px 5px 16px; width: 140px; display: inline-block; position: relative; } .bsp-style-2 .bsp-current-item, .bsp-style-2 .bsp-videos-item:hover{ background: rgba(255, 255, 255, 0.05); } .bsp-style-2 .bsp-video-index { top: 12px; left: 0; position: absolute; right: 0; font-size: 12px; font-family: sans-serif /rtl:inherit/; line-height: 12px; color: rgba(255, 255, 255, 0.34); } .bsp-style-2 .bsp-videos-item .bsp-item { text-decoration: none; } .bsp-style-2 .bsp-video-icon-wrapper { / todo / transition: opacity .3s ease; opacity: 0; } .bsp-style-2 .bsp-current-item .bsp-video-icon-wrapper { position: absolute; top: 30px; left: 14px; background: #e62929; width: 24px; height: 24px; line-height: 24px; overflow: hidden; opacity: 1; z-index: 1; text-align: center; } .bsp-style-2 .bsp-current-item .bsp-video-icon { border: 6px solid transparent; /rtl:ignore/ border-left-color: #fff; top: 0; left: 4px /rtl:3px/; position: relative; opacity: 1; display: inline-block; } .bsp-style-2 .bsp-video-thumbnail{ position: relative; width: 112px; height: 70px; display: inline-block; overflow: hidden; border: 3px solid transparent; transition: border-color 0.3s ease; } .bsp-style-2 .bsp-video-thumbnail img { width: 112px; margin-top: -7px; max-height: 70px; } .bsp-style-2 .bsp-current-item .bsp-video-thumbnail{ border-color: #e62929; } .bsp-style-2 .bsp-video-info{ display: block; } .bsp-style-2 .bsp-videos-item .bsp-video-name { white-space: normal; font-family: 'Open Sans' /rtl:inherit/; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; height: 30px; overflow: hidden; margin-top: 6px; display: inline-block; color: #fff; } .bsp-style-2 .bsp-videos-item .bsp-video-duration{ display: block; font-size: 10px; font-family: sans-serif /rtl:inherit/; font-style: normal; font-weight: 400; line-height: 10px; color: rgba(255, 255, 255, 0.34); } .bsp-style-2.tall .bsp-player{ height: 400px; } .bsp-style-2.very-tall .bsp-player{ height: 240px; } @media only screen and (max-width: 780px) { .bsp-style-2 .bsp-player{ height: 400px !important; } } @media only screen and (max-width: 480px) { .bsp-style-2 .bsp-player{ height: 240px !important; } } / VC Filled row compatibility */ .vc_row-has-fill > .wpb_column > .vc_column-inner > .wpb_wrapper > .bsp-wrapper, .vc_row-has-fill > .wpb_column > .vc_column-inner > .wpb_wrapper > .bsp-wrapper > .bsp-player-wrapper, .vc_row-has-fill > .wpb_column > .vc_column-inner > .wpb_wrapper > .bsp-wrapper > .bsp-playlist-info{ background: 0 0; } .vc_row-has-fill > .wpb_column > .vc_column-inner > .wpb_wrapper > .bsp-wrapper > .bsp-videos{ background: rgba(255, 255, 255, 0.05); } .bs-aparat-playlist-1.bsp-style-1 .bsp-video-thumbnail img { margin-top: -25px; height: 100%; } .bs-aparat-playlist-2.bsp-style-2 .bsp-video-thumbnail { height: 100%; }

| ver. 1.4 | Github | . | PHP 8.1.33 | Generation time: 0.07 | proxy | phpinfo | Settings