.lpm-podcast-list { display: flex; flex-direction: column; gap: 15px; } .podcast-card { background-color: var(--card-bg, #f8f9fa); border: 1px solid var(--border-color, #e9ecef); border-radius: 12px; padding: 12px; transition: transform 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .podcast-card:hover { transform: translateY(-2px); } .podcast-card-inner { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; } .podcast-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .podcast-info { flex: 1; } .podcast-title { margin: 0 0 2px 0; font-size: 1rem; font-weight: 600; color: var(--text-color, #333); } .podcast-author { margin: 0; font-size: 0.8rem; color: var(--text-muted, #777); } .podcast-audio { width: 100%; height: 40px; outline: none; } /* Customize the audio player slightly to fit theme */ audio::-webkit-media-controls-panel { background-color: #e9ecef; } [data-theme="dark"] audio::-webkit-media-controls-panel { background-color: #333; } /* Share Button & Portal Dropdown styling */ .podcast-share-wrapper { display: inline-flex; align-self: center; flex-shrink: 0; } .podcast-share-btn { background: transparent; border: none; color: var(--text-muted, #8c8f94); cursor: pointer; font-size: 1.05rem; padding: 8px; border-radius: 50%; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; outline: none; } .podcast-share-btn:hover, .podcast-share-btn:focus { background: rgba(96, 124, 62, 0.12); color: var(--primary-color, #607c3e); } /* Portal dropdown — appended to , escapes all overflow:hidden ancestors */ .podcast-share-portal { display: none; position: absolute; /* JS converts coords to page-absolute */ background: var(--card-bg, #fff); border: 1px solid var(--border-color, #ccd0d4); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); z-index: 99999; min-width: 158px; padding: 6px 0; pointer-events: auto; } .podcast-share-portal.show { display: block; animation: podcastFadeIn 0.18s ease forwards; } .podcast-share-portal a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--text-color, #2c3338); text-decoration: none; font-size: 0.84rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .podcast-share-portal a:hover { background: rgba(96, 124, 62, 0.07); color: var(--primary-color, #607c3e); } .podcast-share-portal a i { width: 16px; font-size: 0.9rem; color: var(--text-muted, #8c8f94); transition: color 0.15s ease; } .podcast-share-portal a:hover i { color: var(--primary-color, #607c3e); } @keyframes podcastFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }