mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
Update components to use the new style/color names
This commit is contained in:
Gabe Kangas
parent
9ec1d75d32
commit
255585cd9f
@ -15,21 +15,13 @@
|
||||
}
|
||||
}
|
||||
.message {
|
||||
color: var(--color-owncast-gray-300);
|
||||
color: var(--theme-text-primary);
|
||||
|
||||
mark {
|
||||
color: white;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 0.5em 0.3em;
|
||||
background: transparent;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 225, 0, 0.1),
|
||||
rgba(255, 225, 0, 0.358) 4%,
|
||||
rgba(255, 225, 0, 0.3)
|
||||
);
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
padding-left: 0.35em;
|
||||
padding-right: 0.35em;
|
||||
color: var(--theme-text-highlight);
|
||||
background-color: var(--color-bg-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +48,7 @@
|
||||
.customBorder {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
opacity: .85;
|
||||
opacity: 0.85;
|
||||
&:after {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@ -8,12 +8,6 @@
|
||||
margin-right: 1.5vw;
|
||||
}
|
||||
|
||||
.pageContentSection {
|
||||
// background-color: var(--theme-background-secondary);
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logoTitleSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -30,8 +24,11 @@
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.6vw;
|
||||
font-weight: bold;
|
||||
margin-top: 0.35em;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,7 +36,7 @@
|
||||
&.root {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0 .3rem;
|
||||
padding: 0 0.3rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.mobileInfo {
|
||||
@ -61,17 +58,32 @@
|
||||
.liveStatus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: .5rem;
|
||||
font-size: .8rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
gap: 4px;
|
||||
.liveCircle {
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tagList {
|
||||
font-family: var(--theme-text-display-font-family);
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.7em 0 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,10 +56,12 @@ export default function StreamInfo({ isMobile }: Props) {
|
||||
<div className={s.titleSection}>
|
||||
<div className={s.title}>{name}</div>
|
||||
<div className={s.subtitle}>
|
||||
{title}
|
||||
{title || 'Stream title or server description goes here'}
|
||||
<CategoryIcon tags={tags} />
|
||||
</div>
|
||||
<div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag} </span>)}</div>
|
||||
<div className={s.tagList}>
|
||||
{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag} </span>)}
|
||||
</div>
|
||||
<SocialLinks links={socialHandles} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
|
||||
.leftCol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -16,7 +16,7 @@ import {
|
||||
isMobileAtom,
|
||||
} from '../../stores/ClientConfigStore';
|
||||
import { ClientConfig } from '../../../interfaces/client-config.model';
|
||||
import CustomPageContent from '../../CustomPageContent';
|
||||
import CustomPageContent from '../CustomPageContent/CustomPageContent';
|
||||
import OwncastPlayer from '../../video/OwncastPlayer';
|
||||
import FollowerCollection from '../../FollowersCollection';
|
||||
import s from './Content.module.scss';
|
||||
@ -152,12 +152,7 @@ export default function ContentComponent() {
|
||||
<div className={s.lowerHalf}>
|
||||
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
|
||||
{isChatVisible && isMobile && (
|
||||
<TabPane
|
||||
tab="Chat"
|
||||
key="0"
|
||||
className={s.pageContentSection}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<TabPane tab="Chat" key="0" style={{ height: '100%' }}>
|
||||
<div style={{ position: 'relative', height: '100%' }}>
|
||||
<div className={s.mobileChat}>
|
||||
<ChatContainer
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
.customPageContent {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: var(--theme-text);
|
||||
background-color: var(--theme-background-secondary);
|
||||
padding: 0.175em 1em;
|
||||
|
||||
hr {
|
||||
margin: 1.35em 0;
|
||||
border: 0;
|
||||
border-top: solid 1px var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
div.summary {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
import s from './CustomPageContent.module.scss';
|
||||
|
||||
interface Props {
|
||||
content: string;
|
||||
}
|
||||
@ -5,5 +7,5 @@ interface Props {
|
||||
export default function CustomPageContent(props: Props) {
|
||||
const { content } = props;
|
||||
// eslint-disable-next-line react/no-danger
|
||||
return <div dangerouslySetInnerHTML={{ __html: content }} />;
|
||||
return <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
.footer {
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { Layout } from 'antd';
|
||||
import s from './Footer.module.scss';
|
||||
|
||||
const { Footer } = Layout;
|
||||
|
||||
@ -10,7 +11,7 @@ export default function FooterComponent(props: Props) {
|
||||
const { version } = props;
|
||||
|
||||
return (
|
||||
<Footer style={{ textAlign: 'center', height: '64px' }}>
|
||||
<Footer className={s.footer}>
|
||||
<a href="https://owncast.online">{version}</a>
|
||||
</Footer>
|
||||
);
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
/* Change all text and icon colors in the player. */
|
||||
.vjs-owncast.video-js {
|
||||
color: var(--primary-color);
|
||||
color: var(--theme-unknown-2);
|
||||
}
|
||||
|
||||
.vjs-owncast .vjs-big-play-button {
|
||||
z-index: 10;
|
||||
border-color: var(--primary-color) !important;
|
||||
border-color: var(--theme-unknown) !important;
|
||||
border-radius: var(--theme-rounded-corners) !important;
|
||||
}
|
||||
|
||||
.vjs-owncast .vjs-control-bar {
|
||||
background-color: var(--theme-background) !important;
|
||||
background-color: var(--theme-unknown) !important;
|
||||
}
|
||||
|
||||
.vjs-airplay .vjs-icon-placeholder::before {
|
||||
content: url("./airplay.png");
|
||||
content: url('./airplay.png');
|
||||
}
|
||||
|
||||
.vjs-quality-selector .vjs-icon-placeholder {
|
||||
@ -23,5 +23,5 @@
|
||||
font-style: normal;
|
||||
}
|
||||
.vjs-quality-selector .vjs-icon-placeholder::before {
|
||||
content: "\f110";
|
||||
content: '\f110';
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable no-useless-escape */
|
||||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import CustomPageContent from '../components/CustomPageContent';
|
||||
import CustomPageContent from '../components/ui/CustomPageContent/CustomPageContent';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Components/Custom page content',
|
||||
|
||||
@ -7,7 +7,6 @@ body {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: var(--theme-text-primary);
|
||||
background-color: var(--theme-background-primary);
|
||||
@ -20,8 +19,8 @@ body {
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0.7em 0 0 0;
|
||||
padding: 0;
|
||||
color: var(--theme-text-primary);
|
||||
}
|
||||
|
||||
h1,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user