LogalDeveloper/owncast
0
Fork 0
Code Activity

fix(embed): change text color of offline banner. Closes #2953

Browse Source
This commit is contained in:
Gabe Kangas
2023-04-26 09:40:17 -07:00
parent 9674333e62
commit bb9cc28596
4 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/ui/Content/Content.module.scss
View File

@@ -71,6 +71,10 @@
background-color: var(--theme-color-components-video-background); background-color: var(--theme-color-components-video-background);
} }
.offlineBanner {
color: var(--theme-color-background-main);
}
.statusBar { .statusBar {
flex-shrink: 0; flex-shrink: 0;
} }

2
web/components/ui/Content/Content.tsx
View File

@@ -229,7 +229,7 @@ export const Content: FC = () => {
lastLive={lastDisconnectTime} lastLive={lastDisconnectTime}
onNotifyClick={() => setShowNotifyModal(true)} onNotifyClick={() => setShowNotifyModal(true)}
onFollowClick={() => setShowFollowModal(true)} onFollowClick={() => setShowFollowModal(true)}
className={styles.topSectionElement} className={classnames([styles.topSectionElement, styles.offlineBanner])}
/> />
</div> </div>
)} )}

15
web/components/ui/OfflineBanner/OfflineBanner.module.scss
View File

@@ -9,7 +9,6 @@
width: clamp(00px, 100%, 600px); width: clamp(00px, 100%, 600px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--theme-color-background-main);
margin: 3rem auto; margin: 3rem auto;
padding: 2.4em; padding: 2.4em;
@@ -22,7 +21,7 @@
.bodyText { .bodyText {
line-height: 2rem; line-height: 2rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
.separator { .separator {
@@ -32,10 +31,10 @@
.lastLiveDate { .lastLiveDate {
margin-top: 2rem; margin-top: 2rem;
font-size: .8rem; font-size: 0.8rem;
color: var(--theme-color-palette-8); opacity: 0.7;
font-family: var(--theme-text-body-font-family); font-family: var(--theme-text-body-font-family);
font-weight: 300; font-weight: 300;
.clockIcon { .clockIcon {
margin-right: 6px; margin-right: 6px;
@@ -43,9 +42,9 @@
} }
.header { .header {
font-family: var(--theme-text-display-font-family); font-family: var(--theme-text-display-font-family);
font-weight: 600; font-weight: 600;
font-size: 1.4rem; font-size: 1.4rem;
} }
.footer { .footer {

7
web/pages/embed/video/index.tsx
View File

@@ -47,7 +47,12 @@ export default function VideoEmbed() {
const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />; const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />;
const offlineState = ( const offlineState = (
<OfflineBanner streamName={name} customText={offlineMessage} notificationsEnabled={false} /> <OfflineBanner
streamName={name}
customText={offlineMessage}
lastLive={lastDisconnectTime}
notificationsEnabled={false}
/>
); );
const onlineState = ( const onlineState = (