/* Default vars, might be overwritten in ssp-dynamic-style.css */ :root { --ssp-dark-mode-text-color: #fff; --ssp-dark-mode-bg1-color: #24212c; --ssp-dark-mode-bg2-color: #383344; --ssp-dark-mode-player-panel-bg: #2e2a37; --ssp-dark-mode-player-panel-input-bg: #423d4c; --ssp-light-mode-text-color: #4b4659; --ssp-light-mode-bg1-color: #f0f0f0; --ssp-light-mode-bg2-color: #dddddd; --ssp-light-mode-player-panel-bg: #fff; --ssp-light-mode-player-panel-input-bg: #f1f1f1; --ssp-progress-bar-color: #df4e4f; --ssp-play-btn-color: #dd4142; --ssp-player-btns-opacity: .5; } /* Fonts */ /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-cirillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-cirillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-greek.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-cyrillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-greek.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Defaults */ .castos-player { font-family: 'Roboto', sans-serif; line-height: 1; position: relative; overflow: hidden; } .castos-player button { outline: none; border: none; } /* Player */ .castos-player .player { width: 100%; height: 150px; background: linear-gradient(359.68deg, #24212c 1.03%, #383344 77.9%); border-radius: 4px; overflow: hidden; } .castos-player .player__podcast-title { font-weight: 700; } .castos-player .player__main { display: grid; grid-template-columns: 150px 1fr; grid-gap: 15px; position: relative; } .castos-player .player__artwork { line-height: 0; z-index: 0; height: 150px; width: 150px; } .castos-player .player__artwork:hover { cursor: pointer; } .castos-player .player__artwork img { height: 150px; width: 150px } .castos-player .player__body { display: grid; grid-template-rows: auto auto 1fr; padding: 13px 13px 10px 0; } .castos-player .powered-by { position: absolute; bottom: 15px; right: 15px; background-position: top left; background-repeat: no-repeat; opacity: 0.4; background: url('player/images/castos-logo-light.svg'); } .castos-player .powered-by a { width: 59px; display: block; height: 20px; } /* Panels */ .castos-player .player-panels .player-panel { position: absolute; left: 12px; right: 12px; top: 12px; bottom: 0%; background: #2e2a37; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05); border-radius: 3px 3px 0px 0px; z-index: 2; transform: translateY(110%); transition: all 250ms ease-in-out; } .castos-player .player-panels .player-panel.open { transform: translateY(0); } .castos-player .close-btn { z-index: 3; position: absolute; top: -7px; right: -7px; background-color: #fff; border-radius: 50%; display: inline-block; width: 21px; height: 21px; } .castos-player .close-btn span { display: inline-block; width: 13px; height: 2px; background-color: #df4e4f; position: absolute; left: 4px; top: 9px; transition: all 100ms ease-in-out; } .castos-player .close-btn span:nth-child(1) { transform: rotate(45deg); } .castos-player .close-btn span:nth-child(2) { transform: rotate(-45deg); } .castos-player .close-btn:hover { cursor: pointer; } .castos-player .close-btn:hover span:nth-child(1) { transform: rotate(135deg); } .castos-player .close-btn:hover span:nth-child(2) { transform: rotate(45deg); } .castos-player .player-panel { padding: 12px 7px 10px 15px; } .castos-player .player-panel h3 { font-family: 'Poppins', sans-serif; font-weight: 500; color: #fff; margin: 0 0 5px 0; } .castos-player .player-panel .player-panel-row { display: grid; grid-template-columns: 70px 1fr 30px; margin-bottom: 10px; align-items: center; } .castos-player .player-panel .player-panel-row .title { color: #fff; text-transform: uppercase; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; } .castos-player .player-panel .player-panel-row button { justify-self: flex-end; padding: 16px 13px 15px 14px; border-radius: 0 4px 4px 0; transition: all 200ms ease-in-out; display: block; mask-image: url('player/images/icon-copy.svg'); mask-repeat: no-repeat; mask-position: center center; -webkit-mask-image: url('player/images/icon-copy.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; border: none; background-color: #f8f6f6; } .castos-player .player-panel .player-panel-row button:hover { cursor: pointer; background-color: #df4e4f !important; } .castos-player .icons-holder { display: grid; grid-template-columns: auto auto 1fr; } .castos-player .share-icon { width: 30px; height: 30px; display: grid; align-items: center; justify-content: center; margin-right: 10px; border-radius: 50%; transition: all 200ms ease-in-out; background-color: #423d4c; } .castos-player .share-icon span { mask-repeat: no-repeat; mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; width: 14px; height: 15px; background-color: #fff; } .castos-player .share-icon.facebook span { mask-image: url('player/images/brands/icon-brand-facebook.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-facebook.svg'); } .castos-player .share-icon.twitter span { mask-image: url('player/images/brands/icon-brand-twitter.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-twitter.svg'); } .castos-player .share-icon.download span { mask-image: url('player/images/icon-download.svg'); -webkit-mask-image: url('player/images/icon-download.svg'); } .castos-player .share-icon:hover { background-color: #df4e4f !important; } .castos-player .player-panel .player-panel-row input { border: none; padding: 7px; margin: 0; color: #d4c9c9; background-color: #423d4c; font-size: 14px; width: calc(100% - 14px); border-radius: 2px; text-overflow: ellipsis; } .castos-player .subscribe-icons { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px 15px; align-items: center; justify-content: start; margin: 5px 0 15px 0; } .castos-player .subscribe-icons a { color: #fff; text-decoration: none; font-size: 11px; display: grid; grid-template-columns: auto 1fr; align-items: center; grid-gap: 5px; opacity: 0.8; margin: 0; float: none; } .castos-player .subscribe-icons a:hover { opacity: 1; cursor: pointer; color: #fff; } .castos-player .subscribe-icons span { mask-repeat: no-repeat; mask-position: left center; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; width: 20px; height: 20px; background-color: #fff; } .castos-player .subscribe-icons .audible span { mask-image: url('player/images/brands/icon-brand-audible.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-audible.svg'); } .castos-player .subscribe-icons .apple_podcasts span, .castos-player .subscribe-icons .itunes span { mask-image: url('player/images/brands/icon-brand-apple-podcasts.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-apple-podcasts.svg'); } .castos-player .subscribe-icons .sticher span, .castos-player .subscribe-icons .stitcher span { mask-image: url('player/images/brands/icon-brand-sticher.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-sticher.svg'); } .castos-player .subscribe-icons .overcast span { mask-image: url('player/images/brands/icon-brand-overcast.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-overcast.svg'); } .castos-player .subscribe-icons .pocketcasts span { mask-image: url('player/images/brands/icon-brand-pocketcasts.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-pocketcasts.svg'); } .castos-player .subscribe-icons .spotify span { mask-image: url('player/images/brands/icon-brand-spotify.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-spotify.svg'); } .castos-player .subscribe-icons .castro span { mask-image: url('player/images/brands/icon-brand-castro.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-castro.svg'); } .castos-player .subscribe-icons .google_play span { mask-image: url('player/images/brands/icon-brand-google-play.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-google-play.svg'); } .castos-player .subscribe-icons .deezer span { mask-image: url('player/images/brands/deezer.svg'); -webkit-mask-image: url('player/images/brands/deezer.svg'); } .castos-player .subscribe-icons .tunein span { mask-image: url('player/images/brands/icon-brand-tunein.svg'); -webkit-mask-image: url('player/images/brands/icon-brand-tunein.svg'); } .castos-player .subscribe-icons .castbox span { mask-image: url('player/images/brands/castbox.svg'); -webkit-mask-image: url('player/images/brands/castbox.svg'); } .castos-player .subscribe-icons .acast span { mask-image: url('player/images/brands/acast.svg'); -webkit-mask-image: url('player/images/brands/acast.svg'); } .castos-player .subscribe-icons .amazon span { mask-image: url('player/images/brands/amazon.svg'); -webkit-mask-image: url('player/images/brands/amazon.svg'); } .castos-player .subscribe-icons .anchor span { mask-image: url('player/images/brands/anchor.svg'); -webkit-mask-image: url('player/images/brands/anchor.svg'); } .castos-player .subscribe-icons .blubrry span { mask-image: url('player/images/brands/blubrry.svg'); -webkit-mask-image: url('player/images/brands/blubrry.svg'); } .castos-player .subscribe-icons .breaker span { mask-image: url('player/images/brands/breaker.svg'); -webkit-mask-image: url('player/images/brands/breaker.svg'); } .castos-player .subscribe-icons .bullhorn span { mask-image: url('player/images/brands/bullhorn.svg'); -webkit-mask-image: url('player/images/brands/bullhorn.svg'); } .castos-player .subscribe-icons .clammr span { mask-image: url('player/images/brands/clammr.svg'); -webkit-mask-image: url('player/images/brands/clammr.svg'); } .castos-player .subscribe-icons .downcast span { mask-image: url('player/images/brands/downcast.svg'); -webkit-mask-image: url('player/images/brands/downcast.svg'); } .castos-player .subscribe-icons .google_podcasts span { mask-image: url('player/images/brands/google-podcasts.svg'); -webkit-mask-image: url('player/images/brands/google-podcasts.svg'); } .castos-player .subscribe-icons .himalaya_com span { mask-image: url('player/images/brands/himalaya-com.svg'); -webkit-mask-image: url('player/images/brands/himalaya-com.svg'); } .castos-player .subscribe-icons .libsyn span { mask-image: url('player/images/brands/libsyn.svg'); -webkit-mask-image: url('player/images/brands/libsyn.svg'); } .castos-player .subscribe-icons .miro span { mask-image: url('player/images/brands/miro.svg'); -webkit-mask-image: url('player/images/brands/miro.svg'); } .castos-player .subscribe-icons .mixcloud span { mask-image: url('player/images/brands/mixcloud.svg'); -webkit-mask-image: url('player/images/brands/mixcloud.svg'); } .castos-player .subscribe-icons .pandora span { mask-image: url('player/images/brands/pandora.svg'); -webkit-mask-image: url('player/images/brands/pandora.svg'); } .castos-player .subscribe-icons .patreon span { mask-image: url('player/images/brands/patreon.svg'); -webkit-mask-image: url('player/images/brands/patreon.svg'); } .castos-player .subscribe-icons .player_fm span { mask-image: url('player/images/brands/player-fm.svg'); -webkit-mask-image: url('player/images/brands/player-fm.svg'); } .castos-player .subscribe-icons .plex span { mask-image: url('player/images/brands/plex.svg'); -webkit-mask-image: url('player/images/brands/plex.svg'); } .castos-player .subscribe-icons .podbay span { mask-image: url('player/images/brands/podbay.svg'); -webkit-mask-image: url('player/images/brands/podbay.svg'); } .castos-player .subscribe-icons .podbean span { mask-image: url('player/images/brands/podbean.svg'); -webkit-mask-image: url('player/images/brands/podbean.svg'); } .castos-player .subscribe-icons .podcast_addict span { mask-image: url('player/images/brands/podcast-addict.svg'); -webkit-mask-image: url('player/images/brands/podcast-addict.svg'); } .castos-player .subscribe-icons .podchaser span { mask-image: url('player/images/brands/podchaser.svg'); -webkit-mask-image: url('player/images/brands/podchaser.svg'); } .castos-player .subscribe-icons .podfan span { mask-image: url('player/images/brands/podfan.svg'); -webkit-mask-image: url('player/images/brands/podfan.svg'); } .castos-player .subscribe-icons .podkicker span { mask-image: url('player/images/brands/podkicker.svg'); -webkit-mask-image: url('player/images/brands/podkicker.svg'); } .castos-player .subscribe-icons .podknife span { mask-image: url('player/images/brands/podknife.svg'); -webkit-mask-image: url('player/images/brands/podknife.svg'); } .castos-player .subscribe-icons .podtail span { mask-image: url('player/images/brands/podtail.svg'); -webkit-mask-image: url('player/images/brands/podtail.svg'); } .castos-player .subscribe-icons .rss span { mask-image: url('player/images/brands/rss.svg'); -webkit-mask-image: url('player/images/brands/rss.svg'); } .castos-player .subscribe-icons .rssradio span { mask-image: url('player/images/brands/rssradio.svg'); -webkit-mask-image: url('player/images/brands/rssradio.svg'); } .castos-player .subscribe-icons .radio_public span { mask-image: url('player/images/brands/radio-public.svg'); -webkit-mask-image: url('player/images/brands/radio-public.svg'); } .castos-player .subscribe-icons .radio_com span { mask-image: url('player/images/brands/radio-com.svg'); -webkit-mask-image: url('player/images/brands/radio-com.svg'); } .castos-player .subscribe-icons .redcircle span { mask-image: url('player/images/brands/redcircle.svg'); -webkit-mask-image: url('player/images/brands/redcircle.svg'); } .castos-player .subscribe-icons .soundcloud span { mask-image: url('player/images/brands/soundcloud.svg'); -webkit-mask-image: url('player/images/brands/soundcloud.svg'); } .castos-player .subscribe-icons .spreaker span { mask-image: url('player/images/brands/spreaker.svg'); -webkit-mask-image: url('player/images/brands/spreaker.svg'); } .castos-player .subscribe-icons .the_podcast_app span { mask-image: url('player/images/brands/the-podcast-app.svg'); -webkit-mask-image: url('player/images/brands/the-podcast-app.svg'); } .castos-player .subscribe-icons .vkontakte span { mask-image: url('player/images/brands/vkontakte.svg'); -webkit-mask-image: url('player/images/brands/vkontakte.svg'); } .castos-player .subscribe-icons .we_fo span { mask-image: url('player/images/brands/we-fo.svg'); -webkit-mask-image: url('player/images/brands/we-fo.svg'); } .castos-player .subscribe-icons .yandex span { mask-image: url('player/images/brands/yandex.svg'); -webkit-mask-image: url('player/images/brands/yandex.svg'); } .castos-player .subscribe-icons .youtube span { mask-image: url('player/images/brands/youtube.svg'); -webkit-mask-image: url('player/images/brands/youtube.svg'); } .castos-player .subscribe-icons .fyyd_de span { mask-image: url('player/images/brands/fyyd-de.svg'); -webkit-mask-image: url('player/images/brands/fyyd-de.svg'); } .castos-player .subscribe-icons .iheartradio span { mask-image: url('player/images/brands/iheartradio.svg'); -webkit-mask-image: url('player/images/brands/iheartradio.svg'); } .castos-player .subscribe-icons .itunes span { mask-image: url('player/images/brands/itunes.svg'); -webkit-mask-image: url('player/images/brands/itunes.svg'); } .castos-player .subscribe-icons .ivoox span { mask-image: url('player/images/brands/ivoox.svg'); -webkit-mask-image: url('player/images/brands/ivoox.svg'); } .castos-player .subscribe-icons .mytuner_radio span { mask-image: url('player/images/brands/mytuner-radio.svg'); -webkit-mask-image: url('player/images/brands/mytuner-radio.svg'); } .castos-player .subscribe-icons .laughable span, .castos-player .subscribe-icons .listen_notes span, .castos-player .subscribe-icons .owltail span, .castos-player .subscribe-icons .podcast_republic span, .castos-player .subscribe-icons .podcast_de span, .castos-player .subscribe-icons .podcoin span, .castos-player .subscribe-icons .custom span { mask-image: url('player/images/brands/share.svg'); -webkit-mask-image: url('player/images/brands/share.svg'); } /* Currently Playing */ .castos-player .currently-playing { overflow: hidden; width: 100%; } .castos-player .currently-playing .show { color: #fff; opacity: 0.6; font-size: 14px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .castos-player .currently-playing .show strong { padding-right: 2px; } .castos-player .currently-playing .show span { padding-left: 3px; white-space: nowrap; } .castos-player .episode-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 16px; margin: 7px 0 4px 0; line-height: 1.2; height: 25px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; } .castos-player .play-progress { display: grid; grid-template-columns: 45px 1fr; grid-gap: 15px; } .castos-player .play-pause-controls { background: #fff; position: relative; width: 44px; height: 44px; display: block; border-radius: 50%; } .castos-player .play-pause-controls button { position: absolute; } .castos-player .play-progress .play-pause-controls .play-btn { background: var(--ssp-play-btn-color) no-repeat 14px 11px; mask-image: url('player/images/icon-play.svg'); -webkit-mask-image: url('player/images/icon-play.svg'); mask-position: 14px 11px; -webkit-mask-position: 14px 11px; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; border: none; padding: 22px; z-index: 2; border-radius: 50%; width: 44px; height: 44px; } /* For IE */ @media screen\0 { .castos-player .play-progress .play-pause-controls .play-btn { background: url('player/images/icon-play.svg') no-repeat 14px 11px; } } .castos-player .play-progress .play-pause-controls .play-btn:hover { cursor: pointer; transform: scale(1.1); transition: .3s; } .castos-player .play-progress .play-pause-controls .pause-btn { background: url('player/images/icon-pause.svg'); background-color: #fff; background-repeat: no-repeat; background-position: 13px 13px; border: none; padding: 22px; z-index: 2; border-radius: 50%; width: 44px; height: 44px; } .castos-player .play-pause-controls .pause-btn:hover { cursor: pointer; transform: scale(1.1); } .castos-player .play-pause-controls .hide { display: none; } .castos-player .play-pause-controls .loader { padding: 4px 3px 4px 3px; animation-name: spin; animation-duration: 3000ms; animation-iteration-count: infinite; animation-timing-function: linear; z-index: 1; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .castos-player .progress, .castos-player .ssp-progress { flex: 10; position: relative; display: flex; flex-basis: 100%; width: 100%; height: 8px; border-radius: 10px; margin: 4px 0; cursor: ew-resize; background-color: #4c4659; } .castos-player .progress__filled { width: 0; flex: 0; flex-basis: 0; border-radius: 10px; background-color: #df4e4f; background-color: var(--ssp-progress-bar-color); } .castos-player .play-pause-controls .icon { position: absolute; top: 15px; } /* Audio Player */ .castos-player .playback { display: grid; grid-template-columns: 1fr auto; justify-items: flex-start; padding: 5px 0; } .castos-player .playback__controls { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; align-items: center; grid-gap: 10px; } .castos-player .playback__timers { color: #fff; opacity: .4; opacity: var(--ssp-player-btns-opacity); font-size: 12px; letter-spacing: normal; transition: all 200ms ease-in-out; } .castos-player .playback__timers span { opacity: 0.6; } .castos-player .playback__controls button { opacity: .4; opacity: var(--ssp-player-btns-opacity); transition: all 200ms ease-in-out; } .castos-player .player:hover .playback__controls button, .castos-player .player:hover .playback__timers, .castos-player .player:hover .player-panels-nav button { opacity: 0.65; } .castos-player .player:hover .playback__controls button:hover { opacity: 1; cursor: pointer; } .castos-player .player-btn__volume, .castos-player .player-btn__rwd, .castos-player .player-btn__fwd { mask-repeat: no-repeat; mask-position: left center; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; } .castos-player .player-btn__volume { mask-image: url('player/images/icon-volume-on.svg'); -webkit-mask-image: url('player/images/icon-volume-on.svg'); border: none; width: 20px; height: 18px; } .castos-player .player-btn__volume.off { mask-image: url('player/images/icon-volume-off.svg'); -webkit-mask-image: url('player/images/icon-volume-off.svg'); border: none; width: 20px; height: 18px; background-color: #dd4142 !important; } .castos-player .player-btn__rwd { mask-image: url('player/images/icon-rwd.svg'); -webkit-mask-image: url('player/images/icon-rwd.svg'); border: none; width: 20px; height: 20px; background-color: #fff; padding-right: 0; } .castos-player .player-btn__fwd { mask-image: url('player/images/icon-fwd.svg'); -webkit-mask-image: url('player/images/icon-fwd.svg'); border: none; width: 20px; height: 20px; background-color: #fff; } .castos-player .player-btn__speed { font-size: 12px; border-radius: 4px; background: none; padding: 1px 4px; width: 33px; text-align: center; color: #fff; border: 1px solid #fff; } .castos-player .player-panels-nav { margin-left: 52px; align-self: flex-end; line-height: normal; } .castos-player .player-panels-nav button { border: none; padding: 3px 10px; font-size: 12px; font-family: 'Poppins', sans-serif; border-radius: 4px; text-transform: uppercase; opacity: var(--ssp-player-btns-opacity); transition: all 200ms ease-in-out; color: #fff; background-color: rgba(255, 255, 255, 0); } .castos-player .player:hover .player-panels-nav button:hover { opacity: 1; cursor: pointer; background-color: rgba(255, 255, 255, 0.1); } /* ///////////////////////////////////////////////////////////////////////// */ /* LIGHT MODE */ /* ///////////////////////////////////////////////////////////////////////// */ .castos-player.light-mode .player { background: linear-gradient(359.68deg, #dddddd 1.03%, #f0f0f0 77.9%); background: linear-gradient(359.68deg, var(--ssp-light-mode-bg2-color) 1.03%, var(--ssp-light-mode-bg1-color) 77.9%); } .castos-player.light-mode .powered-by { background: url('player/images/castos-logo-dark.svg'); } .castos-player.light-mode .player-panels .player-panel { background: #fff; background: var(--ssp-light-mode-player-panel-bg); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05); } .castos-player.light-mode .close-btn { background-color: #423d4c; } .castos-player.light-mode .close-btn span { background-color: #fff; } .castos-player.light-mode .episode-title, .castos-player.light-mode .currently-playing .show, .castos-player.light-mode .subscribe-icons a, .castos-player.light-mode .player-panel h3, .castos-player.light-mode .player-panel .player-panel-row .title, .castos-player.light-mode .playback__timers { color: #4b4659; color: var(--ssp-light-mode-text-color); } .castos-player.light-mode .share-icon, .castos-player.light-mode .player-panel .player-panel-row input { background-color: #f1f1f1; background-color: var(--ssp-light-mode-player-panel-input-bg); } .castos-player.light-mode .player-panel .player-panel-row input { color: #5f596e; } .castos-player.light-mode .player-panels-nav button { color: #2e2a37; color: var(--ssp-light-mode-text-color); background-color: rgba(0, 0, 0, 0); } .castos-player.light-mode .player:hover .player-panels-nav button:hover { background-color: rgba(0, 0, 0, 0.05); } .castos-player.light-mode .player-btn__speed { color: #4b4659; color: var(--ssp-light-mode-text-color); border: 1px solid #4b4659; border: 1px solid var(--ssp-light-mode-text-color); } .castos-player.light-mode .ssp-progress { background-color: #d3d3d3; } .castos-player.light-mode .player-panel .player-panel-row button { background-color: #5f596e; } .castos-player.light-mode .subscribe-icons span, .castos-player.light-mode .share-icon span, .castos-player.light-mode .player-btn__volume, .castos-player.light-mode .player-btn__rwd, .castos-player.light-mode .player-btn__fwd { background-color: #4c4659; background-color: var(--ssp-light-mode-text-color); } /* ///////////////////////////////////////////////////////////////////////// */ /* AUTO DETECT LIGHT MODE */ /* ///////////////////////////////////////////////////////////////////////// */ @media (prefers-color-scheme: light) { .castos-player .player { background: linear-gradient(359.68deg, #dddddd 1.03%, #f0f0f0 77.9%); } .castos-player .powered-by { background: url('player/images/castos-logo-dark.svg'); } .castos-player .player-panels .player-panel { background: #fff; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05); } .castos-player .close-btn { background-color: #423d4c; } .castos-player .close-btn span { background-color: #fff; } .castos-player .episode-title, .castos-player .currently-playing .show, .castos-player .subscribe-icons a, .castos-player .player-panel h3, .castos-player .player-panel .player-panel-row .title, .castos-player .playback__timers { color: #4b4659; } .castos-player .share-icon, .castos-player .player-panel .player-panel-row input { background-color: #f1f1f1; } .castos-player .player-panel .player-panel-row input { color: #5f596e; } .castos-player .player-panels-nav button { color: #2e2a37; background-color: rgba(0, 0, 0, 0); } .castos-player .player:hover .player-panels-nav button:hover { background-color: rgba(0, 0, 0, 0.05); } .castos-player .player-btn__speed { color: #4b4659; border: 1px solid #4b4659; } .castos-player .progress, .castos-player .ssp-progress { background-color: #d3d3d3; } .castos-player .player-panel .player-panel-row button { background-color: #5f596e; } .castos-player .subscribe-icons span, .castos-player .share-icon span, .castos-player .player-btn__volume, .castos-player .player-btn__rwd, .castos-player .player-btn__fwd { background-color: #4c4659; } } /* Playlist ---------------------------------------------------------------- */ .castos-player .playlist__wrapper { height: 330px; color: #fff; background: #25222d; border-radius: 0 0 4px 4px; overflow: scroll; } .castos-player .playlist__wrapper ul { list-style-type: none; margin: 0; padding: 0; } .castos-player .playlist__item { display: grid; grid-template-columns: 75px 1fr; background-color: #393445; margin: 10px; border-radius: 4px; overflow: hidden; } .playlist__item img { max-width: 100%; } .castos-player .playlist__item:hover { cursor: pointer; background-color: #4b4657; } .castos-player .playlist__item:hover .playlist__item__details h2, .castos-player .playlist__item:hover .playlist__item__details p, .castos-player .playlist__item:hover .playlist__item_meta { opacity: 1; } .playlist__item__cover { line-height: 0; } .castos-player .playlist__item__details { padding: 10px; overflow: hidden; } .castos-player .playlist__item__details h2 { margin: 0; font-size: 16px; font-family: 'Poppins', sans-serif; font-weight: 400; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 20px); position: relative; opacity: 0.9; } .castos-player .playlist__item.active h2 { padding-left: 16px; color: #e85555; } .castos-player .playlist__item.active h2:before { content: ''; background-image: url('player/images/active-indicator.svg'); background-repeat: no-repeat; position: absolute; left: 0px; top: 2px; width: 12px; height: 12px; } .castos-player .playlist__wrapper .playlist__item.active .playlist__item__details { background-color: #f4f4f4; } .castos-player .playlist__item__details p { font-size: 11px; padding: 0 10px 0 10px; margin: 5px 0 0 0; opacity: 0.7; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .castos-player .playlist__item_meta { opacity: 0.7; background-color: rgba(0, 0, 0, 0.13); padding: 10px; font-size: 11px; text-align: right; display: grid; grid-template-columns: 1; grid-template-rows: 1fr 1fr; align-items: flex-start; grid-gap: 10px; } .castos-player .playlist__item_meta span:first-child { align-self: flex-end; } @media (max-width: 480px) { .castos-player .playlist__item__details h2 { white-space: pre-wrap; line-height: 1.3; } .castos-player .playlist__item { grid-template-columns: 1fr; } .castos-player .playlist__item_meta { padding: 10px 15px; grid-template-columns: auto 1fr; grid-template-rows: 1fr; } .castos-player .playlist__item_meta span:first-child { grid-column: 2; grid-row: 1; } .castos-player .playlist__item_meta span:last-child { grid-column: 1; grid-row: 1; } } /* Playlist */ .castos-player.light-mode .playlist__wrapper { color: #383344; background: #dfdfdf; } .castos-player.light-mode .playlist__item { background-color: #d3d3d3; } .castos-player.light-mode .playlist__item:hover { background-color: #f4f4f4; } .castos-player.light-mode .playlist__item_meta { background-color: #cccccc; } .castos-player.light-mode .playlist__item:hover .playlist__item_meta { background-color: #ededed; } .castos-player.light-mode .playlist__item.active h2 { color: #d73738; } /* Playlist */ .castos-player.dark-mode .playlist__wrapper { color: #fff; background: #25222d; } .castos-player.dark-mode .playlist__item { background-color: #393445; } .castos-player.dark-mode .playlist__item:hover { background-color: #4b4657; } .castos-player.dark-mode .playlist__item_meta, .castos-player.dark-mode .playlist__item:hover .playlist__item_meta { background-color: rgba(0, 0, 0, 0.13); } .castos-player.dark-mode .playlist__item.active h2 { color: #e85555; } .dark-mode .playlist__item .playlist__item__details h2, .dark-mode .playlist__item .playlist__item__details p { color: #fff; } .loader { border: 2px solid #d75253; border-top: 2px solid #f3f3f3; border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; position: absolute; margin-left: 45%; margin-top: 150px; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Compact player dark mode */ .wp-playlist-dark .wp-playlist-item a { color: #fff; } /* ///////////////////////////////////////////////////////////////////////// */ /* DARK MODE */ /* ///////////////////////////////////////////////////////////////////////// */ .castos-player.dark-mode .player { background: linear-gradient(359.68deg, var(--ssp-dark-mode-bg2-color) 1.03%, var(--ssp-dark-mode-bg1-color) 77.9%); } .castos-player.dark-mode .powered-by { background: url('player/images/castos-logo-light.svg'); } .castos-player.dark-mode .player-panels .player-panel { background: #2e2a37; background: var(--ssp-dark-mode-player-panel-bg); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05); } .castos-player.dark-mode .close-btn { background-color: #fff; } .castos-player.dark-mode .close-btn span { background-color: #df4e4f; } .castos-player.dark-mode .episode-title, .castos-player.dark-mode .currently-playing .show, .castos-player.dark-mode .subscribe-icons a, .castos-player.dark-mode .player-panel h3, .castos-player.dark-mode .player-panel .player-panel-row .title, .castos-player.dark-mode .playback__timers { color: #fff; color: var(--ssp-dark-mode-text-color); } .castos-player.dark-mode .share-icon, .castos-player.dark-mode .player-panel .player-panel-row input { color: #d4c9c9; background-color: #423d4c; background-color: var(--ssp-dark-mode-player-panel-input-bg); } .castos-player.dark-mode .player-panels-nav button { color: #fff; color: var(--ssp-dark-mode-text-color); background-color: rgba(255, 255, 255, 0); } .castos-player.dark-mode .player:hover .player-panels-nav button:hover { background-color: rgba(255, 255, 255, 0.1); } .castos-player.dark-mode .player-btn__speed { color: #fff; color: var(--ssp-dark-mode-text-color); border: 1px solid #fff; border: 1px solid var(--ssp-dark-mode-text-color); } .castos-player.dark-mode .progress, .castos-player.dark-mode .ssp-progress { background-color: #4c4659; } .castos-player.dark-mode .player-panel .player-panel-row button { background-color: #f8f6f6; } .castos-player.dark-mode .subscribe-icons span, .castos-player.dark-mode .share-icon span { background-color: #fff; } .castos-player.dark-mode .subscribe-icons span, .castos-player.dark-mode .share-icon span, .castos-player.dark-mode .playback__controls .player-btn__volume, .castos-player.dark-mode .playback__controls .player-btn__rwd, .castos-player.dark-mode .playback__controls .player-btn__fwd { background-color: #fff; background-color: var(--ssp-dark-mode-text-color); } .castos-player.dark-mode .playlist__wrapper .playlist__item.active .playlist__item__details { background-color: #4b4657; } /* ///////////////////////////////////////////////////////////////////////// */ /* RWD */ /* ///////////////////////////////////////////////////////////////////////// */ @media (max-width: 768px) { .castos-player .player__main { grid-template-columns: 60px 1fr; grid-gap: 0; height: 150px; } .castos-player .player__artwork img { width: 45px; height: 45px; margin: 12px; border-radius: 4px; } .castos-player .player__body { padding: 12px 12px 4px 12px; } .castos-player .player-panels .player-panel { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; } .castos-player .player-panel .row input { font-size: 16px; } .castos-player .play-progress { grid-gap: 18px; margin-left: -60px; margin-top: 4px; } .castos-player .play-pause-controls { width: 45px; height: 45px; } .castos-player .playback { align-items: center; padding: 5px 0 0 0; } .castos-player .panel__inner { height: 140px; overflow-y: scroll; } .castos-player .close-btn { top: 0; right: 0; width: 26px; height: 26px; border-radius: 0 0 0 4px; } .castos-player .close-btn span { width: 16px; height: 3px; left: 5px; top: 11px; } .castos-player .player-panels-nav button { padding: 5px 10px; } .castos-player .powered-by { bottom: 5px; left: 8px; right: auto; } .castos-player .player-btn__volume { display: none; } .castos-player .player-btn__rwd { width: 22px; height: 22px; mask-size: contain; -webkit-mask-size: contain; } .castos-player .player-btn__speed { width: 35px; padding: 3px 4px; mask-size: cover; -webkit-mask-size: cover; border-width: 1px; } .castos-player .player-btn__fwd { width: 22px; height: 22px; mask-size: contain; -webkit-mask-size: contain; } .castos-player .playback .playback__controls { grid-template-columns: repeat(3, auto); grid-gap: 8px; justify-content: flex-start; } .castos-player .player-panels-nav { margin: 3px -8px 0 0; justify-self: flex-end; } .castos-player .subscribe-icons { grid-template-columns: 1fr 1fr; grid-gap: 10px; margin: 5px 0 8px 0; } .castos-player .playback__timers { margin-right: 2px; } .castos-player .episode-title { width: calc(100vw - 100px); } .castos-player .show { width: calc(100vw - 100px); } } .castos-player .podcast-meta-itunes, .castos-player .podcast-meta-itunes:hover, .castos-player .podcast-meta-itunes:visited { text-decoration: none !important; color: #000000; } .castos-player .podcast-meta-itunes:active, .castos-player .podcast-meta-itunes:focus, .castos-player .play-btn:active, .castos-player .play-btn:focus, .castos-player .pause-btn:focus, .castos-player .pause-btn:focus, .castos-player .player-btn__volume:active, .castos-player .player-btn__volume:focus, .castos-player .share-btn:active, .castos-player .share-btn:focus, .castos-player .subscribe-btn:active, .castos-player .subscribe-btn:focus, .castos-player .share-icon:active, .castos-player .share-icon:focus, .castos-player .apple_podcasts:active, .castos-player .apple_podcasts:focus, .castos-player .sticher:active, .castos-player .sticher:focus, .castos-player .spotify:active, .castos-player .spotify:focus, .castos-player .google_play:active, .castos-player .google_play:focus { outline: 0; border: none; -moz-outline-style: none; } /** * Added support for the screen-reader-text class * Makes the Castos Player accessible to screen readers * Added due to the fact that some themes don't support these classes * See https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/ */ .castos-player .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .castos-player .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }