-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add PodcastPlayer component with playback controls and styling
- Loading branch information
1 parent
2c5e3d5
commit ad0536f
Showing
4 changed files
with
486 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,118 +1,245 @@ | ||
| .podcast-modal-container { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| .podcast-modal-content { | ||
| background-color: var(--background-color); | ||
| border-radius: 40px; | ||
| padding: 8px; | ||
| position: relative; | ||
| box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); | ||
| width: fit-content; | ||
| /* Adjust the width to fit the content */ | ||
| min-width: 400px; | ||
| max-width: 50vw; | ||
| max-height: 95vh; | ||
| height:-webkit-fill-available; | ||
| } | ||
|
|
||
| .podcast-modal-content .custom-scrollbar { | ||
| border-radius: unset !important; | ||
| } | ||
|
|
||
| .podcast-details-header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .podcast-modal-content .podcast-image-header { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .podcast-modal-content .podcast-image-header .background-image, .podcast-modal-content .podcast-image-header .background-image img | ||
| { | ||
| min-height: 250px; | ||
| filter:blur(120px); | ||
|
|
||
| max-height: 350px; | ||
| width: 100%; | ||
| object-fit: cover; | ||
| z-index: 0; | ||
| border-radius: 12px; | ||
| } | ||
|
|
||
| .podcast-modal-content .podcast-image-header .icon-container, .podcast-modal-content .podcast-image-header .icon-container img | ||
| { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100px !important; | ||
| min-height: unset; | ||
| height: 100px !important; | ||
| filter:none; | ||
| z-index: 2; | ||
| border-radius: 12px; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| .podcast-modal-content .podcast-ai-content-text{ | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| column-gap: 12px; | ||
| row-gap: 12px; | ||
| height: fit-content; | ||
|
|
||
| align-items: stretch; | ||
| margin: 20px 0; | ||
|
|
||
| } | ||
|
|
||
| .podcast-modal-container .topic::part(base){ | ||
| border:1px solid var(--border-color); | ||
| } | ||
|
|
||
| .podcast-details-header-info { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .podcast-thumbnail { | ||
| max-height: 500px; | ||
| width: auto; | ||
| /* Ensure the width is adjusted to maintain the aspect ratio */ | ||
| border-radius: 32px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content { | ||
| padding: 24px; | ||
|
|
||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-info { | ||
| display: flex; | ||
| flex-direction: column; | ||
| text-align: center; | ||
| max-height: 120px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-info h1 { | ||
| margin: 0; | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content h2 { | ||
| margin: 0; | ||
| font-size: 1.25rem; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-info p { | ||
| margin: 0; | ||
| font-size: 1rem; | ||
| color: var(--color); | ||
| } | ||
|
|
||
| .podcast-modal-content .podcast-ai-content-topics { | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: 12px; | ||
| height: fit-content; | ||
| align-items: justify; | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .podcast-header-buttons { | ||
| position: absolute; | ||
| top: 24px; | ||
| right: 24px; | ||
| display: flex; | ||
| align-items: center; | ||
| column-gap: 12px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-audio-player { | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .scrollable-description { | ||
| height: 200px; | ||
| /* Define a fixed height for the scrollable area */ | ||
| overflow: hidden; | ||
| /* Ensure that it only scrolls within the CustomScrollbar */ | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-description-content { | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-audio-player { | ||
| width: 100%; | ||
| } | ||
|
|
||
| /* Media Query for smaller screens */ | ||
| @media (max-width: 768px) { | ||
| .podcast-modal-content { | ||
| background-color: var(--background-color); | ||
| border-radius: 40px; | ||
| padding: 8px; | ||
| position: relative; | ||
| box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); | ||
| width: min-content; /* Adjust the width to fit the content */ | ||
| min-width: 400px; | ||
| max-width: 100%; /* Ensure it doesn't overflow the viewport */ | ||
| } | ||
|
|
||
| .podcast-details-header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| width: 90%; | ||
| /* Make the modal responsive on smaller screens */ | ||
| padding: 10px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .podcast-details-header-info { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
|
|
||
| .podcast-thumbnail { | ||
| max-height: 500px; | ||
| width: auto; /* Ensure the width is adjusted to maintain the aspect ratio */ | ||
| border-radius: 32px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content{ | ||
| padding:24px; | ||
|
|
||
| } | ||
| .podcast-detail-view-text-content .podcast-info { | ||
| display: flex; | ||
| flex-direction: column; | ||
| text-align: center; | ||
| max-height: 120px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-info h1 { | ||
| margin: 0; | ||
| font-size: 1.5rem; | ||
| } | ||
| .podcast-detail-view-text-content h2 { | ||
| margin: 0; | ||
| font-size: 1.25rem; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-info p { | ||
| margin: 0; | ||
| font-size: 1rem; | ||
| color: var(--color); | ||
| } | ||
|
|
||
| .podcast-header-buttons { | ||
| position: absolute; | ||
| top:24px; | ||
| right:24px; | ||
| display: flex; | ||
| align-items: center; | ||
| column-gap: 12px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-audio-player { | ||
| margin: 20px 0; | ||
| max-height: 200px; | ||
| /* Adjust the image size for smaller screens */ | ||
| } | ||
|
|
||
| .podcast-info h1 { | ||
| font-size: 1.2rem; | ||
| /* Adjust the title font size */ | ||
| } | ||
|
|
||
| .scrollable-description { | ||
| height: 150px; | ||
| /* Smaller scroll area for small screens */ | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 480px) { | ||
| .podcast-modal-content { | ||
| width: 90%; | ||
| /* Make the modal responsive on smaller screens */ | ||
| padding: 10px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .scrollable-description { | ||
| height: 200px; /* Define a fixed height for the scrollable area */ | ||
| overflow: hidden; /* Ensure that it only scrolls within the CustomScrollbar */ | ||
|
|
||
| .podcast-thumbnail { | ||
| max-height: 200px; | ||
| /* Adjust the image size for smaller screens */ | ||
| } | ||
|
|
||
| .podcast-info h1 { | ||
| font-size: 1.2rem; | ||
| /* Adjust the title font size */ | ||
| } | ||
|
|
||
| .scrollable-description { | ||
| height: 150px; | ||
| /* Smaller scroll area for small screens */ | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .podcast-modal-content { | ||
| width: 90%; | ||
| /* Make the modal responsive on smaller screens */ | ||
| padding: 10px; | ||
| font-size: 14px; | ||
| } | ||
| .podcast-detail-view-text-content .podcast-description-content { | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
|
|
||
| .podcast-thumbnail { | ||
| max-height: 200px; | ||
| /* Adjust the image size for smaller screens */ | ||
| } | ||
|
|
||
| .podcast-detail-view-text-content .podcast-audio-player { | ||
| width: 100%; | ||
|
|
||
| .podcast-info h1 { | ||
| font-size: 1.2rem; | ||
| /* Adjust the title font size */ | ||
| } | ||
|
|
||
| /* Media Query for smaller screens */ | ||
| @media (max-width: 768px) { | ||
| .podcast-modal-content { | ||
| width: 90%; /* Make the modal responsive on smaller screens */ | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .podcast-thumbnail { | ||
| max-height: 200px; /* Adjust the image size for smaller screens */ | ||
| } | ||
|
|
||
| .podcast-info h1 { | ||
| font-size: 1.2rem; /* Adjust the title font size */ | ||
| } | ||
|
|
||
| .scrollable-description { | ||
| height: 150px; /* Smaller scroll area for small screens */ | ||
| } | ||
|
|
||
| .scrollable-description { | ||
| height: 150px; | ||
| /* Smaller scroll area for small screens */ | ||
| } | ||
| } |
Oops, something went wrong.