File manager - Edit - /home/verseaumee/TF89388/wp-content/plugins/noisa-toolkit/assets/css/scamp.player.css
Back
/* ---------------------------------------------------------------------- Scamp Player Stylesheet ---------------------------------------------------------------------- */ /* Import fonts */ @import url(../fonts/Scamp-Player.css); /* Global settings */ #scamp_player * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } #scamp_player { font:12px/1.4 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif; } /* Main styles ------------------------------- */ #scamp_player { width: 100%; clear: both; position: fixed; left: 0; bottom: 0; bottom: -100%; z-index: 999999; } #scamp_player > a { display: none; } #scamp_player, .sp-buttons-container a { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #scamp_player.sp-show { bottom: 0px; } /* Toggle */ #sp-toggle-wrap { overflow: hidden; } #sp-toggle { float: right; width: 30px; height: 20px; z-index: 10; cursor: pointer; text-align: center; font-size: 26px; font-weight: normal; line-height: 20px; z-index:2; position:relative; } #sp-toggle:after { display: inline-block; } #scamp_player.sp-show-player #sp-toggle:after { display: inline-block; } /* Show player */ .sp-main-container { position: relative; display: none; } #scamp_player.sp-show-player .sp-main-container { display: block; } #scamp_player.sp-show-player.sp-show-list .sp-main-container { } /* Player Container -------------------------------------------- */ .sp-player-container { width: 100%; z-index: 2; padding: 0 20px; height: 58px; position: relative; } .sp-show-list .sp-player-container:before { content: ''; width: 100%; height: 20px; position: absolute; left: 0; top: -20px; border-bottom: 1px solid; } /* Buttons ------------------------------------ */ .sp-buttons-container { width: 23.94366%; float: left; margin-right: 1.40845%; height: 58px;; position: relative; line-height: normal; padding-top: 10px; } .sp-buttons-container .sp-controls { display: inline-block; text-align: left; } .sp-buttons-container a { display: inline-block; cursor: pointer; margin-right: 5px; font-size: 28px; vertical-align: middle; text-align: left; } .sp-buttons-container a:hover {} .sp-buttons-container a:before { font-family: 'Scamp-Player'; } .sp-buttons-container a.sp-play-button:before { font-size: 42px; } #scamp_player.playing .sp-buttons-container a.sp-play-button:before { font-size: 42px; } #scamp_player.loading .sp-buttons-container a.sp-play-button:before { font-size: 42px; display: inline-block; -webkit-animation:spin 2s linear infinite; -moz-animation:spin 2s linear infinite; animation:spin 2s linear infinite; } .sp-buttons-container a.sp-next-button:before { } .sp-buttons-container a.sp-prev-button:before { } /* Volume ------------------------------------ */ .sp-volume-container { position: relative; display: inline-block; } .sp-buttons-container a.sp-volume-button:before {} .sp-buttons-container a.sp-volume-button.sp-vol-max:before { } .sp-buttons-container a.sp-volume-button.sp-vol-medium:before { } .sp-buttons-container a.sp-volume-button.sp-vol-off:before { } .sp-volume-bar-container { width: 120px; position: absolute; top: -69px; left: -45px; height: 40px; display: none; } .sp-volume-bar-container:after { content: ""; width: 20px; height: 20px; position: absolute; bottom: -10px; left:50%; margin-left: -10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .sp-volume-slider { height: 8px; width: 100px; position: relative; margin-left: 10px; margin-top: 16px; z-index: 1; cursor:ew-resize; cursor:-moz-grab; cursor:grab; } .sp-volume-position { position: absolute; left: 0; top: 0; width: 40px; height: 8px; max-width: 100px; z-index: 1; } /* Queue button */ .sp-buttons-container .sp-queue-button-container { float: right; position: relative; } .sp-buttons-container a.sp-queue-button:before { font-size: 42px; } #scamp_player.sp-show-list .sp-buttons-container a.sp-queue-button:before { font-size: 42px; } #scamp_player.sp-queue-loading .sp-buttons-container a.sp-queue-button:before { font-size: 42px; display: inline-block; -webkit-animation:spin 2s linear infinite; -moz-animation:spin 2s linear infinite; animation:spin 2s linear infinite; } /* Queue Notifications */ .sp-badge { position: absolute; left: -6px; top: -8px; display: inline-block; min-width: 10px; padding: 3px 5px; font-size: 12px; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 10px; opacity: 0; } .sp-show-badge { opacity: 1; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* Progress bars and time ------------------------------------ */ .sp-progress-container { width: 49.29577%; float: left; margin-right: 1.40845%; position: relative; } .sp-progress { height: 8px; width: 100%; position: relative; margin-top: 26px; z-index: 1; cursor:ew-resize; cursor:-moz-grab; cursor:grab; } .sp-progress:before { border-left: 1px solid; left: -1px; } .sp-progress:after { border-right: 1px solid; right: -1px; } .sp-progress:before, .sp-progress:after { content: ""; height: 40px; top: -16px; position: absolute; } .sp-progress .sp-loading { position: absolute; left: 0; top: 0; height: 8px; z-index: 2; } .sp-progress .sp-position { position: absolute; left: 0; top: 0; height: 8px; z-index: 3; } #scamp_player.paused .sp-position {} /* Time */ .sp-time-elapsed, .sp-time-total { position: absolute; top: 10px; font-size: 11px; } .sp-time-elapsed { left: 4px; } .sp-time-total { right: 4px; } /* Current track ------------------------------------ */ .sp-track-container { width: 23.94366%; float: right; position: relative; margin-top:6px; } .sp-track-cover { } .sp-track-cover .sp-track-artwork { float: left; max-width: 46px; max-height:46px; height: 100%; margin-right: 12px; } .sp-track-details { float: left; height: 50px; width: 100%; overflow: hidden; position: relative; } .sp-track-title, .sp-track-artist { display: block; font-size: 12px; width: 100%; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; margin: 2px 0; width:100%; position: absolute; left: 0px; padding-left: 60px; } .sp-track-title, .sp-track-title:hover { } .sp-track-artist, .sp-track-artist:hover { top:22px; } .sp-marquee-container { position: absolute; left: 0; top: 12px; overflow: hidden; font-size: 13px; margin: 0 auto; white-space: nowrap; display: none; width: 100%; } .sp-marquee { display: inline-block; padding-left: 100%; -webkit-animation:marquee 10s linear infinite; -moz-animation:marquee 10s linear infinite; animation:marquee 10s linear infinite; } @-moz-keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } @-webkit-keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } /* Player Queue -------------------------------------------- */ .sp-queue-container { padding: 0 20px; display: none; } /* Mobile progress bar */ .sp-progress-mobile { width: 100%; height: 20px; position: relative; display: none; } .sp-progress-mobile:before { content: ''; width: 100%; height: 20px; position: absolute; left: 0; top: -43px; z-index: 2; } .sp-progress-mobile .sp-progress { margin-top: 24px; } /* Queue - Table */ #scamp_player.sp-show-list .sp-queue-container { padding: 60px 6px 60px 6px; height: 100vh; display:block; } .sp-queue { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; width: calc(100% + 60px); margin-left: -30px; } .sp-queue:before { content: ''; width: 100%; height: 20px; background-color: red; } .sp-queue .sp-icon:before { font-family: 'Scamp-Player'; font-size: 42px; line-height: normal; font-weight: normal; } .sp-track.playing .sp-icon:before, .sp-track.paused .sp-icon:before, .sp-track.loading .sp-icon:before { } #sp-scroller { } #sp-queue-scroll { padding: 20px 0; border-collapse: collapse; border-spacing: 0; width: 1200px; max-width: 100%; margin: 0 auto; background-color: transparent; } .sp-queue-container { padding: 16px 10px 6px 10px; vertical-align: bottom; text-align: left; border: none; background-color: transparent; } #sp-queue-scroll th.sp-th-cart { text-align: center; } #sp-queue-scroll th.sp-th-remove { text-align: right; } #sp-queue-scroll th { border:none; background-color: transparent} #sp-queue-scroll td { padding: 6px; vertical-align: top; border: none; } .sp-track.playing, .sp-track.paused, .sp-track.loading {} .sp-track:hover {} #sp-queue-scroll tr { border-bottom:1px solid; } #sp-queue-scroll tr:last-child { border-bottom:none; } /* Track control */ .sp-track-control { display: inline-block; cursor: pointer; max-width: 42px; } .sp-track-control:before { } .sp-track.playing .sp-track-control:before { } /* Artwork */ .sp-cover-artwork img { width: 48px; height: 48px; margin-bottom: 0; vertical-align: middle; } /* Title */ .sp-title a { display: block; font-size: 12px; } .sp-title a.sp-title-button { font-size: 14px; } .sp-title a.sp-artist-button { } /* Cart */ .sp-cart { text-align: center; } .sp-cart-button:before { } .sp-cart-button.sp-download-button:before { } /* Remove */ .sp-remove { text-align: right; } .sp-remove-button { cursor: pointer; margin-right: 10px; } .sp-queue .sp-remove-button:before { } /* Hover state */ .sp-queue .sp-icon:hover {} .sp-queue .sp-icon:hover:before { } #sp-queue-scroll th.sp-list-controls { width:100%; padding: 10px; text-align: right; } /* Scroll styles */ #sp-scroller .iScrollVerticalScrollbar { position: absolute; z-index: 10; width: 4px; bottom: 2px; top: 2px; right: 0px; overflow: hidden; } #sp-scroller .iScrollVerticalScrollbar.iScrollBothScrollbars { bottom: 18px; } #sp-scroller .iScrollIndicator { position: absolute; border-radius: 2px; opacity: 0.05; cursor: pointer; } #sp-scroller:hover .iScrollIndicator { opacity: 0.4; } #sp-scroller .iScrollVerticalScrollbar .iScrollIndicator { width: 100%; } /* Mobile init click */ #scamp-mobile-init { opacity: 0; position:fixed; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:100000; display: block; } /* ---------------------------------------------------------------------- MEDIA QUERIES /* ---------------------------------------------------------------------- */ /* Large Displays */ @media only screen and (max-width: 1640px) and (min-width:1150px) { /* Container */ #sp-queue-scroll { width: 1170px; } } /* Large Displays */ @media only screen and (max-width: 1560px) and (min-width:1150px) { /* Container */ #sp-queue-scroll { width: 1150px; } } /* ---------------------------------------------------------------------- For Small Desktop Devices [ 960px ] /* ---------------------------------------------------------------------- */ @media only screen and (max-width: 1240px) { .sp-buttons-container { width: 23.94366%; margin-right: 1.40845%; } .sp-progress-container { width: 40.84507%; margin-right: 1.40845%; } .sp-track-container { width: 32.39437%; } #sp-queue-scroll { width: 960px; } .sp-track-title, .sp-track-artist { max-width: 400px; } } /* ---------------------------------------------------------------------- For Tablet and Mobile devices /* ---------------------------------------------------------------------- */ @media only screen and (max-width: 1020px) { #sp-queue-scroll { width: 100%; padding: 0 30px; } #sp-scroller { padding:0 40px; } } /* ---------------------------------------------------------------------- For Tablet Devices [ 748px ] /* ---------------------------------------------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 959px) { .sp-buttons-container { width: 23.94366%; margin-right: 1.40845%; } .sp-progress-container { width: 40.84507%; margin-right: 1.40845%; } .sp-track-container { width: 32.39437%; } .sp-volume-container { display: none; } } /* ---------------------------------------------------------------------- For Mobile Devices [ 300px ] /* ---------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .sp-player-container { height: 58px; padding-top: 0px; } .sp-buttons-container { width: 59.29577%; margin-right: 1.40845%; } .sp-progress-container { display: none; } .sp-track-container { width: 39.29577%; } .sp-track-title, .sp-track-artist { display: none; } .sp-volume-container {display: none;} .sp-track-cover { display:none; } .sp-marquee-container { display: block; } .sp-progress-mobile { display: block; } .sp-queue .sp-small-screen { display: none; } .sp-title a.sp-title-button { font-size: 12px; } .sp-cover-artwork img { width: 32px; height: 32px; } } /* ---------------------------------------------------------------------- For Mobile Devices [ 420px ] [ Horizontal ] /* ---------------------------------------------------------------------- */ @media only screen and (min-width: 480px) and (max-width: 767px) { .sp-player-container { height: 58px; padding-top: 0px; } .sp-buttons-container { width: 39.29577%; margin-right: 1.40845%; } .sp-progress-container { display: none; } .sp-track-container { width: 59.29577%; } .sp-track-title, .sp-track-artist { display: block; } .sp-volume-container {display: none;} .sp-track-cover { display:block; } .sp-marquee-container { display: none; } .sp-queue .sp-medium-screen { display: block; } } /* Play anim */ #scamp_player.sp-show.playing #sp-toggle-wrap:after { content: ''; position: absolute; right:-15px; top:-30px; width: 80px; height: 80px; background-color: #eee; border-radius: 100%; -webkit-animation: play_anim 2.0s infinite ease-in-out; animation: play_anim 2.0s infinite ease-in-out; z-index:1; } #scamp_player.sp-show-player #sp-toggle-wrap:after { display:none } @-webkit-keyframes play_anim { 0% { -webkit-transform: scale(0); } 2% { -webkit-transform: scale(0); transform: scale(0); } 4% { -webkit-transform: scale(0); transform: scale(0); } 6% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes play_anim { 0% { -webkit-transform: scale(0); transform: scale(0); } 8% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } /* Shoutcast */ #scamp_player.is-shoutcast .sp-progress { cursor: default; } #scamp_player.is-shoutcast .sp-loading, #scamp_player.is-shoutcast .sp-position, #scamp_player.is-shoutcast .sp-progress:before, #scamp_player.is-shoutcast .sp-progress:after { opacity: 0 } #scamp_player.is-shoutcast .sp-progress-container:after { display: none; } #scamp_player.is-shoutcast .sp-time-total { opacity: 0 } #scamp_player.is-shoutcast .sp-progress { background: transparent; } #scamp_player.is-shoutcast .sp-time-elapsed { font-size: 28px; width: 100%; position: relative; text-align: center; display: block; top: -19px; } @media only screen and (max-width: 767px) { #scamp_player.is-shoutcast.sp-show-list .sp-time-elapsed { display:none } }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings