/* Style the tab - horizontal scrolling on mobile */ .pp-tab { font-size: var(--pp-font-size-md, 16px); display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; background-color: var(--pp-color-white, #fff); border-bottom: 1px solid var(--pp-color-gray-300, #ddd); box-shadow: 0 1px 0 0 #EAEDF3, 0 1px 3px 0 rgba(0,0,0,0.05); width: 100%; padding: 0; } .pp-tab::-webkit-scrollbar { display: none; } /* Style the buttons that are used to open the tab content */ .pp-tab button { background-color: inherit; flex-shrink: 0; border: none; outline: none; cursor: pointer; padding: 1.5vh 2%; transition: 0.3s; width: auto; white-space: nowrap; } /* Change background color of buttons on hover */ .pp-tab button:hover { background-color: var(--pp-color-gray-300, #ddd); } /* Create an active/current tablink class */ .pp-tab button.active { border-bottom: 3px solid var(--pp-color-accent, #1a6deb); font-weight: bold; } /* Style the tab content */ .pp-tabcontent { background-color: #ffffff; display: none; border-top: none; padding: 0 40px 0 0; height: 100%; } .pp-tabcontent.active { display: flex; } #welcome-title { display: inline-block; margin-top: 1ch; font-size: 22px; width: 70%; } #welcome-tab-new-post { display: inline-block; text-decoration: none; color: #1976d2; font-family: Roboto, sans-serif; font-size: 14px; } #welcome-tab-new-post div { padding: 1ch; border: 2px solid #1976d2; border-radius: 4px; } #welcome-tab-new-post div:hover { background-color: #1976d2; color: white; } #pp-welcome-artwork-link:hover, #pp-welcome-applesubmit-link:hover { cursor: pointer; text-decoration: underline; } #pp-welcome-artwork-link, #pp-welcome-applesubmit-link, p[class="pp-settings-status-text"] { margin-top: 0; margin-bottom: 1em; font-family: Roboto, sans-serif; font-size: 14px; width: 100%; } #advanced-tab-seo-link { cursor: pointer; } .submit { font-family: Roboto, sans-serif; font-size: 14px; letter-spacing: 0; line-height: 21px; } .powerpress_save_button { border-width: 1px; } .powerpress_save_button:hover { cursor: pointer; } /* news widget styles moved to css/components/news-widget.css */ .pp-settings-program-summary { margin-bottom: 4em; } .prog-sum-head { display: inline-block; vertical-align: middle; width: 100%; } .pp-settings-num-episodes { display: inline-block; vertical-align: top; width: 16%; margin-left: 3em; } #welcome-preview-image { width: 30%; height: auto; display: inline-block; } .directory-summary-head { vertical-align: middle; } .destinations-side-icon { background-image: url('../images/modern_icon_sprite_2024_2.svg'); margin-right: 15px; display: inline-block; width: 36px; height: 36px; border: 0; background-repeat: no-repeat; background-size: 50px; vertical-align: middle; } .subscribe-icons-larger{ vertical-align: text-bottom; width: 54px; height: 54px; border: 0; display: inline-block; margin-right: 8px; background-image: url("../images/modern_icon_sprite_2024_2.svg"); /* extra folder back because of routing url */ background-repeat: no-repeat; background-size: 70px; } .subscribe-icons-larger.grey-icon { background-image: url("../images/grey_icon_sprite_2024_2.svg"); } .destinations-icon-links small { font-weight: bold; } .destinations-link { cursor: pointer; flex: 0 0 calc(100% / 8 - 10px); /* Ensure 8 items per row */ max-width: calc(100% / 8 - 10px); /* Matches flex rule */ margin-bottom: 1rem; /* Spacing between rows */ text-align: center; /* Center-align text and icons */ box-sizing: border-box; /* Ensure padding and borders don’t affect width */ display: flex; /* Flex layout for vertical alignment */ flex-direction: column; /* Stack icon and text vertically */ align-items: center; /* Horizontally center children */ justify-content: center; /* Vertically center children */ } .destinations-icon-links { border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; justify-content: space-between; /* Adjust if needed */ } .destinations-icon-links .active { background-color: #E8F4FF; } .subscribe-icons-larger.apple-podcast{ background-position: -5px -10px; } .subscribe-icons-larger.android { background-position: -5px -80px; } .subscribe-icons-larger.email { background-position: -5px -151px; } .subscribe-icons-larger.google{ background-position: -5px -220px; } .subscribe-icons-larger.stitcher{ background-position: -7px -290px; } .subscribe-icons-larger.tunein{ background-position: -7px -358px; } .subscribe-icons-larger.spotify{ background-position: -5px -430px; } .subscribe-icons-larger.rss{ background-position: -5px -500px; } .subscribe-icons-larger.iheartradio{ background-position: -5px -640px; } .subscribe-icons-larger.deezer{ background-position: -5px -710px; } .subscribe-icons-larger.pandora{ background-position: -5px -780px; } .subscribe-icons-larger.blubrry{ background-position: -5px -850px; } .subscribe-icons-larger.amazon_music { background-position: -5px -1410px; } .subscribe-icons-larger.pcindex { background-position: -5px -1480px; } .subscribe-icons-larger.jiosaavn { background-position: -5px -1550px; } .subscribe-icons-larger.gaana { background-position: -5px -1690px; } .subscribe-icons-larger.podchaser { background-position: -5px -1620px; } .subscribe-icons-larger.anghami { background-position: -5px -1760px; } .subscribe-icons-larger.youtube { background-position: -5px -1830px; width: 58px; } .destinations-icon-links small { font-style: normal; } div[id^=destinations] .powerpress_save_button { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: 0.375rem 0.75rem; text-align: center; vertical-align: middle; background-color: #1976d2; line-height: 1.5; border-radius: 0.4rem; color: white; border-color: #1972d2; font-weight: normal; } div[id^=destinations].pp-sidenav-tab { max-width: 930px; width: 100%; } .mr-4 { margin-right: 1.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mt-3 { margin-top: 1rem; } .mr-2 { margin-right: 0.5rem; } .text-center { text-align: center; } .align-top { vertical-align: top; } .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .justify-content-between { justify-content: space-between; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .pp-sidenav .destinations-side-icon { background-image: url('../images/modern_icon_sprite_2024_2.svg'); } } /*Sprite background positions for modern buttons*/ span[id^="apple-icon"] { background-position: -5px -10px; } span[id^="android-icon"] { background-position: -5px -60px; } span[id^="email-icon"] { background-position: -5px -111px; } span[id^="google-icon"] { background-position: -5px -160px; } span[id^="stitcher-icon"] { background-position: -7px -210px; } span[id^="tunein-icon"] { background-position: -7px -260px; } span[id^="spotify-icon"] { background-position: -5px -312px; } span[id^="iheart-icon"] { background-position: -5px -461px; } span[id^="deezer-icon"] { background-position: -5px -512px; } span[id^="anghami-icon"] { background-position: -5px -1260px; } span[id^="pandora-icon"] { background-position: -5px -560px; } span[id^="amazon-icon"] { background-position: -5px -1010px; } span[id^="pcindex-icon"] { background-position: -5px -1060px; } span[id^="jiosaavn-icon"] { background-position: -5px -1110px; } span[id^="podchaser-icon"] { background-position: -5px -1160px; } span[id^="gaana-icon"] { background-position: -5px -1210px; } span[id^="all-icon"] { background-position: -5px -360px; } span[id^="youtube-icon"] { background-position: -5px -1306px; width: 40px; } .pp-settings-footer { border-top: 1px solid #EFF0F5; margin: 3ch; padding-top: 2ch; } .pp-save-button-container { display: inline-block; } .pp-save-button-container.pp-save-button-container-right { float: right; } .pp-sidebar-notification { padding: 1.5ch; margin: 30px 10px 10px 10px; text-align: center; border: 1px solid #D0D3DB; border-radius: 2px; display: inline-block; } #connect-blubrry-services .button-blubrry { max-width: 14em; width: 100%; } #connected-blubrry-blurb { display: inline-block; width: 55%; margin: 0 0 0 1ch; text-align: left; } #connect-blubrry-blurb { font-size: 12px; margin: 1ch 1ch 0 4ch; } /* Style the tab */ .pp-sidenav { overflow: hidden; background-color: white; float: left; min-height: 70vh; height: 100%; z-index: 10000; opacity: 1.0; } /* Style the tab content */ .pp-sidenav-tab { background-color: #ffffff; display: none; border-top: none; padding: 3vh 3vw; width: 75%; border-left: 1px solid #ddd; } .pp-sidenav-tab.active { display: inline-block; } /* Style the buttons that are used to open the tab content */ .pp-sidenav button { display: block; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 600; background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 1vh 2vw 1vh 1vw; transition: 0.3s; width: 100%; text-align: left; line-height: 25px; } .pp-sidenav button img { height: 25px; width: 25px; background-color: rgba(255,255,255,0); vertical-align: middle; } /* Change background color of buttons on hover */ .pp-sidenav button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .pp-sidenav button.active { border-left: 2px solid #1a6deb; color: #1665D8; background-color: #F6F9FD; } #connect-blubrry-services { margin: 30px 10px 10px 10px; text-align: center; border: 1px solid #D0D3DB; border-radius: 2px; display: inline-block; } #connect-see-options, #blubrry-services-connected-settings { padding: 3ch 3ch 3ch 1.5ch; } #connect-blubrry-button-container { padding: 10px; text-align: center; border-top: 1px solid #D0D3DB; } #blubrry-logo-connect { width: 42px; height: 40px; } .pp-settings-section { border-left: 3px solid #EFF0F5; padding-left: 2em; margin-bottom: 4em; } .pp-settings-section h2 { font-weight: bold; font-family: Roboto, sans-serif; font-size: 20px; } .pp-settings-subsection { margin-left: 1em; padding: 1em 0 1em 1em; border-bottom: 1px solid #EFF0F5; display: inline-block; width: 90%; } .player-options .pp-settings-subsection { border-bottom: 1px solid #1d2327; width: 95%; } .pp-settings-subsection-no-border { padding: 1em 0 1em 0; display: inline-block; width: 90%; } .player-options .pp-settings-subsection-no-border { padding: 1em 0 1em 1em; margin-left: 1em; width: 95%; } .player-options h3 { margin-bottom: 0; font-weight: bold; } .player-options.video-player-options h3 { margin-bottom: 1em; margin-top: 0; } .player-options .video-player-text { display: inline-block; width: 60%; } .player-options .video-player-text.html5 { max-width: calc(95% - 400px); } .player-options .video-player-sample { display: inline-block; width: 35%; vertical-align: top; } .player-options.video-player-options .activate-player { float: right; margin-right: 0; margin-bottom: 1em; } .player-options .activate-player { display: inline-block; border-radius: 4px; border: 1px solid #0c74d5; color: #0c74d5; padding: 1ch 2em 1ch 2em; margin-right: 1em; text-align: center; font-family: Roboto, sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; } .player-options .activate-player.activated { color: white; background-color: #0c74d5; } .player-options .customize-box-section { border: 1px solid #1d2327; border-radius: 8px; width: 40%; padding: 2em; } .player-customize-container { display: flex; justify-content: space-between; } @media (max-width: 785px) { .player-customize-container { display: block; } .player-options .customize-box-section { width: 90%; margin-bottom: 1em; } } @media (max-width: 768px) { /* stack layout on mobile, no sidebar column */ .pp-tabcontent { padding: 0; } .pp-tabcontent.active { display: block; } .pp-tab button { padding: var(--pp-spacing-md, 12px) var(--pp-spacing-lg, 16px); font-size: var(--pp-font-size-base, 14px); } .player-options .video-player-text, .player-options .video-player-text.html5 { display: block; width: 100%; max-width: 100%; } .player-options .video-player-sample { width: 100%; } } @media (max-width: 600px) { .player-options .customize-box-section { width: 80%; } } @media (min-width: 769px) { .pp-sidenav-toggle-container { width: 23%; } } @media (min-width: 769px) and (max-width: 1250px) { #settings-destinations .pp-sidenav-toggle-container, #settings-experimental .pp-sidenav-toggle-container, #settings-advanced .pp-sidenav-toggle-container { width: 35%; } } .new-color-field-button { width: 30px; height: 30px; border: 1px solid #ccc; box-shadow: 0 0 0 transparent; cursor: pointer; } .color_control .new-color-field { width: 75%; height: 30px; display: inline-block; border-radius: 0; margin-right: 0; border-right: 0; } .customize-box-section h3 { margin-top: 0; } .customize-box-section h4 { margin-top: 1em; } .pp-nav-icon { margin: 0 25px 0 10px; } .pp-directory-icon { margin: 0 25px 0 0; vertical-align: middle; /*height: 32px;*/ } h1.pp-heading, h2.pp-heading { font-size: 26px; font-family: Roboto, sans-serif; font-weight: bold; } p.pp-main { font-size: 16px; font-family: Roboto, sans-serif; font-weight: bold; margin: 0; display: block; } p.pp-sub, a.pp-sub { font-size: 16px; font-family: Roboto, sans-serif; margin: 0; display: block; } p.pp-sub { color: rgba(0,0,0,0.6); } p.pp-label-bottom { font-size: 14px; font-family: Roboto, sans-serif; margin: 0 0 2em 0; color: rgba(0,0,0,0.6); } p.pp-sidenav-extra-text, a.pp-sidenav-extra-text { color: #32373c; font-size: 12px; line-height: 18px; font-family: Roboto, sans-serif; text-decoration: none; font-weight: bold; } .pp-sidenav-extra { margin: 2vh 2vw; } .pp-settings-text { margin-top: 0; margin-bottom: 2em; font-family: Roboto, sans-serif; font-size: 14px; display: block; } .pp-settings-text-smaller-margin { margin-top: 0; margin-bottom: 1em; font-family: Roboto, sans-serif; font-size: 14px; display: block; } .pp-settings-text-no-margin { margin-top: 0; margin-bottom: 0; font-family: Roboto, sans-serif; font-size: 12px; display: block; } .pp-show-subscribe { margin-top: 3em; } .pp-show-subscribe input.pp-settings-checkbox { margin-top: 2px; margin-right: 10px; } .pp-settings-text a, .pp-label-bottom a, .pp-right-label a, .pp-main a, .pp-sub a { text-decoration: none; color: #2278CF; } .pp-right-label { font-size: 14px; margin-top: 5px; } .pp-settings-text-with-label { margin-top: 0; margin-bottom: 0; font-family: Roboto, sans-serif; font-size: 14px; } b { font-weight: bold; } input.pp-settings-checkbox { border: 2px solid #d4d8e0; border-radius: 3px; height: 18px; width: 18px; vertical-align: top; margin-top: 2ch; } input.pp-settings-checkbox:checked { background-color: #2278cf; border-color: #2278cf; } input.pp-settings-checkbox:checked:disabled { background-color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.2); } input.pp-settings-checkbox:checked:before { content: url('../images/check_white.svg'); height: 21px; width: 21px; margin: -3px 0 0 -4px; } .round-checkbox { border-radius: 8px; } input.round-checkbox:checked { background-color: #2278cf; border-color: #2278cf; } input.round-checkbox:checked:before { color: #2278cf; } input[class="pp-settings-radio"] { width: 22px; height: 22px; border: 2px solid var(--pp-color-gray-400, #B1B1B1); } input[class="pp-settings-radio"]:checked { border: 2px solid var(--pp-color-secondary, #0c74d5); } input[class="pp-settings-radio"]:checked:before { width: 12px; height: 12px; margin: 3px; background-color: var(--pp-color-secondary, #0c74d5); } input[class="pp-settings-radio-small"] { width: 16px; height: 16px; margin-right: 8px; background-color: var(--pp-color-gray-200, #d8dce6); } input[class="pp-settings-radio-small"]:checked { border: 2px solid var(--pp-color-secondary, #0c74d5); background-color: var(--pp-color-secondary, #0c74d5); } input[class="pp-settings-radio-small"]:checked:before { width: 6px; height: 6px; margin: 3px; background-color: var(--pp-color-gray-200, #d8dce6); } /* radio/checkbox row layout - flex containers for li only */ li:has(> input.pp-settings-radio), li:has(> input.pp-settings-checkbox) { display: flex; align-items: center; gap: 0.5em; margin-bottom: 1em; } li > input.pp-settings-radio, li > input.pp-settings-checkbox { flex-shrink: 0; } li > input.pp-settings-radio + .pp-settings-subsection, li > input.pp-settings-checkbox + .pp-settings-subsection { flex: 1; } /* inline checkbox/radio + subsection (not in li) */ input.pp-settings-checkbox, input.pp-settings-radio-small { vertical-align: top; } input.pp-settings-checkbox + .pp-settings-subsection, input.pp-settings-radio-small + .pp-settings-subsection-no-border { display: inline-block; vertical-align: top; width: calc(100% - 40px); margin-left: 0.5em; } input.pp-settings-text-input, textarea.pp-settings-text-input, select.pp-settings-text-input, input.pp-settings-text-input:focus, textarea.pp-settings-text-input:focus, select.pp-settings-text-input:focus { display: block; border-radius: 4px; background-color: white; border: 1px solid #B1B1B1; font-size: 14px; padding: 2ch 1em 2ch 1em; width: 100%; box-sizing: border-box; } input.pp-settings-text-input-less-wide, input.pp-settings-text-input-less-wide:focus { border-radius: 4px; background-color: white; border: 1px solid #B1B1B1; font-size: 14px; padding: 2ch 1em 2ch 1em; width: 70%; margin-right: 30%; } .pp-settings-section h4 { margin-top: 0; margin-bottom: 0; font-weight: bold; } .powerpress_color_box { float: left; width: 24px; height: 24px; cursor: pointer; margin: 8px 19px 8px 0; border: 1px solid #666666; } label[class^="pp-settings-label"] { position: relative; top: 9px; padding: 0 9px 0 2px; left: 9px; background-color: white; font-size: 12px; } label[class^="pp-settings-label-under"] { position: relative; top: -2px; padding: 0 9px 0 2px; left: 9px; background-color: white; color: rgba(0,0,0,0.6); font-size: 12px; } select[class^='pp-settings-select'] { background-color: #eff0f5; color: rgba(0,0,0,0.6); border-radius: 4px; padding: 1em 1ch 1em 1ch; font-size: 14px; font-family: Roboto, sans-serif; font-weight: bold; border: none; box-shadow: none; height: auto; width: 45%; display: block; } select.pp-settings-select-inline { display: inline-block; width: 40%; margin-bottom: 3ch; } @media (max-width: 782px) { select[class^='pp-settings-select'], select.pp-settings-select-inline { width: 100%; } /* larger touch targets for mobile */ li:has(> input.pp-settings-radio), li:has(> input.pp-settings-checkbox) { align-items: center; } input.pp-settings-checkbox { height: 36px; width: 36px; } input.pp-settings-checkbox:checked:before { height: 39px; width: 39px; margin: -3px 0 0 -4px; } input[class="pp-settings-radio"] { width: 36px; height: 36px; } input[class="pp-settings-radio"]:checked:before { width: 20px; height: 20px; margin: 6px; } input[class="pp-settings-radio-small"] { width: 32px; height: 32px; } input[class="pp-settings-radio-small"]:checked:before { width: 16px; height: 16px; margin: 6px; } .destinations-link { flex: 0 0 calc(100% / 4 - 10px); max-width: calc(100% / 4 - 10px); } } .pp-settings-button { box-sizing: border-box; display: inline-block; padding: 1.5ch; border: 1px solid #D8DCE6; border-radius: 4px; background: linear-gradient(0deg, #F6F7F9 0%, #FFFFFF 100%); box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.05), 0 1px 1px 0 rgba(22,29,37,0.05); margin: 1em 0 1em 0; } .pp-settings-icon { margin: 0 10px; width: 18px; height: 18px; } .pp-settings-button-label, .pp-settings-icon { vertical-align: middle; } .pp-shortcode { padding: 1em 3ch 1em 3ch; } .pp-shortcode-container { margin: 4ch 0; } .blubrry-stats-marketing-message { background-image: url('../images/Blubrry_stats_hero_2a.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 0 25%; padding: 1em; border-radius: 4px; margin-bottom: 1em; width: 100%; } .blubrry-stats-marketing-text, .blubrry-stats-marketing-text:hover { color: white; margin-top: 0; } a.blubrry-stats-marketing-text { display: inline-block; text-decoration: none; } h5.blubrry-stats-marketing-text { margin: 0; } .pp_white-button-container { padding: 0.5ch 3em; border: 2px solid white; border-radius: 4px; } /* update frequency template */ .pp-update-frequency .pp-uf-day-chips { display: flex; gap: var(--pp-spacing-sm, 8px); margin-top: var(--pp-spacing-sm, 8px); } .pp-update-frequency .pp-uf-day-chip, .pp-update-frequency .pp-uf-day-of-month-cell, .pp-update-frequency .pp-uf-month-cell { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pp-color-gray-400, #ccc); cursor: pointer; } .pp-update-frequency .pp-uf-day-chip { width: 36px; height: 36px; border-radius: 50%; } .pp-update-frequency .pp-uf-day-of-month-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: var(--pp-spacing-xs, 4px); margin-top: var(--pp-spacing-sm, 8px); } .pp-update-frequency .pp-uf-day-of-month-cell { width: 36px; height: 36px; font-size: 13px; } .pp-update-frequency .pp-uf-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pp-spacing-sm, 8px); margin-top: var(--pp-spacing-sm, 8px); max-width: 400px; } .pp-update-frequency .pp-uf-month-cell { height: 36px; } .pp-update-frequency .pp-uf-day-chip input[type="checkbox"], .pp-update-frequency .pp-uf-day-of-month-cell input[type="checkbox"], .pp-update-frequency .pp-uf-month-cell input[type="checkbox"] { display: none; } .pp-update-frequency .pp-uf-ends-group { margin-top: 20px; } .pp-update-frequency .pp-uf-count-input { width: 100px; } .pp-update-frequency .pp-uf-until-input { width: 200px; }