mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-25 14:20:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use some style values so it looks like this page is making progress

Browse source
This commit is contained in:
Gabe Kangas 2022-05-07 10:25:04 -07:00
parent c99fcf5ed9
commit 448c23d097
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
15 changed files with 93 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/components/action-buttons/ExternalActionButtonRow.tsx
View file

@ -1,5 +1,6 @@
import { ExternalAction } from '../interfaces/external-action.interface'; import { ExternalAction } from '../interfaces/external-action.interface';
import ExternalActionButton from './ExternalActionButton'; import ExternalActionButton from './ExternalActionButton';
import s from './ExternalActionButtons.module.scss';
interface Props { interface Props {
actions: ExternalAction[]; actions: ExternalAction[];
@ -9,7 +10,7 @@ export default function ExternalActionButtonRow(props: Props) {
const { actions } = props; const { actions } = props;
return ( return (
<div> <div className={`${s.row}`}>
{actions.map(action => ( {actions.map(action => (
<ExternalActionButton key={action.id} action={action} /> <ExternalActionButton key={action.id} action={action} />
))} ))}

0
web/components/action-buttons/ExternalActionButtons.module.scss Normal file
View file

8
web/components/ui/Content/Content.module.scss
View file

@ -23,6 +23,14 @@
grid-template-rows: 1fr var(--header-h); grid-template-rows: 1fr var(--header-h);
} }
.pageContentSection {
background-color: var(--theme-background-secondary);
border-radius: var(--theme-rounded-corners);
margin: 1vw;
padding: 1vw;
width: 100%;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.mobileChat { .mobileChat {
display: none; display: none;

5
web/components/ui/Content/Content.tsx
View file

@ -54,13 +54,14 @@ export default function FooterComponent() {
/> />
<div className={`${s.lowerRow}`}> <div className={`${s.lowerRow}`}>
<Tabs defaultActiveKey="1" type="card"> <Tabs defaultActiveKey="1" type="card">
<TabPane tab="About" key="1"> <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
<CustomPageContent content={extraPageContent} /> <CustomPageContent content={extraPageContent} />
</TabPane> </TabPane>
<TabPane tab="Followers" key="2"> <TabPane tab="Followers" key="2" className={`${s.pageContentSection}`}>
<FollowerCollection total={total} followers={followers} /> <FollowerCollection total={total} followers={followers} />
</TabPane> </TabPane>
</Tabs> </Tabs>
{chatOpen && ( {chatOpen && (
<div className={`${s.mobileChat}`}> <div className={`${s.mobileChat}`}>
<ChatContainer messages={messages} state={chatState} /> <ChatContainer messages={messages} state={chatState} />

2
web/components/ui/Sidebar/Sidebar.module.scss
View file

@ -1,5 +1,5 @@
.root { .root {
background-color: var(--gray-700); background-color: var(--theme-background-secondary);
display: none; display: none;
} }

5
web/components/video/Player.module.scss Normal file
View file

@ -0,0 +1,5 @@
.player {
height: 90vh;
width: 100%;
background-color: green;
}

7
web/components/video/player.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import videojs from 'video.js'; import videojs from 'video.js';
import s from './Player.module.scss';
require('video.js/dist/video-js.css'); require('video.js/dist/video-js.css');
@ -47,11 +48,7 @@ export function VideoJS(props) {
return ( return (
<div data-vjs-player> <div data-vjs-player>
<video <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player}`} />
ref={videoRef}
className="video-js vjs-big-play-centered"
style={{ width: '100%', height: '100%' }}
/>
</div> </div>
); );
} }

2
web/pages/_app.tsx
View file

@ -2,7 +2,7 @@
import '../styles/variables.css'; import '../styles/variables.css';
import '../styles/global.less'; import '../styles/global.less';
import '../styles/globals.scss'; import '../styles/globals.scss';
// import '../styles/ant-overrides.scss'; import '../styles/ant-overrides.scss';
import '../styles/markdown-editor.scss'; import '../styles/markdown-editor.scss';
import '../styles/main-layout.scss'; import '../styles/main-layout.scss';

2
web/style-definitions/tokens/color/antd-overrides.yaml
View file

@ -11,7 +11,7 @@ link-color:
popover-background: popover-background:
value: "var(--theme-background)" value: "var(--theme-background)"
background-color-light: background-color-light:
value: "{color.owncast.purple.100.value}" value: "var(--theme-background-secondary)"
# These values require explicit colors and cannot take css variables. # These values require explicit colors and cannot take css variables.
primary-color: primary-color:

22
web/style-definitions/tokens/color/default-theme.yaml
View file

@ -1,16 +1,31 @@
# These are the variables used in the user interface. # These are the variables used in the user interface.
# They can be overwritten to customize the look and feel. # They can be overwritten to customize the look and feel.
# We should write some documentation on how to do that when the time comes. # We should write some documentation on how to do that when the time comes.
# The fewer there are the better as it'll be easier to customize and document.
theme: theme:
primary-color: primary-color:
value: "{color.owncast.purple.500.value}" value: "{color.owncast.purple.500.value}"
comment: "The primary color of the application used for rendering controls."
text-color: text-color:
value: "{color.owncast.gray.300.value}" value: "{color.owncast.gray.300.value}"
comment: "The color of the text in the application."
text-color-secondary: text-color-secondary:
value: "{color.owncast.gray.500.value}" value: "{color.owncast.gray.500.value}"
link-color: link-color:
value: "{color.owncast.purple.500.value}" value: "{color.owncast.purple.500.value}"
font-family:
value: "{font.owncast.family.value}"
background:
value: "{color.owncast.background.value}"
comment: "The main background color of the page."
background-secondary:
value: "{color.owncast.background-secondary.value}"
comment: "A secondary background color used in sections and controls."
rounded-corners:
value: "5px"
comment: "The radius of rounded corners."
success-color: success-color:
value: "{color.owncast.green.500.value}" value: "{color.owncast.green.500.value}"
info-color: info-color:
@ -18,9 +33,4 @@ theme:
warning-color: warning-color:
value: "{color.owncast.orange.500.value}" value: "{color.owncast.orange.500.value}"
error-color: error-color:
value: "{color.owncast.red.500.value}" value: "{color.owncast.red.500.value}"
font-family:
value: "{font.owncast.family.value}"
background:
value: "{color.owncast.background.value}"

26
web/style-definitions/tokens/color/owncast-colors.yaml
View file

@ -70,22 +70,22 @@ color:
blue: blue:
value: "rgba(32, 134, 225, 1)" value: "rgba(32, 134, 225, 1)"
background-light:
value: "rgba(27, 26, 38, 1)"
background: background:
value: "rgba(23, 21, 35, 1)" value: "rgba(27, 26, 38, 1)"
background-secondary:
value: "rgba(22, 21, 31, 1)"
font: font:
owncast: owncast:
family: family:
value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';" 'Segoe UI Symbol', 'Noto Color Emoji'"
# Values used in the admin and should be migrated to variables or removed. # Values used in the admin and should be migrated to variables or removed.
# See ant-overrides.scss. # See ant-overrides.scss.
owncast-purple: owncast-purple:
value: "{color.owncast.logo.purple}" value: "{color.owncast.logo.purple.value}"
owncast-purple-25: owncast-purple-25:
value: "rgba(120, 113, 255, 0.25)" value: "rgba(120, 113, 255, 0.25)"
owncast-purple-50: owncast-purple-50:
@ -95,18 +95,18 @@ online-color:
offline-color: offline-color:
value: "#999" value: "#999"
pink: pink:
value: "{color.owncast.logo.pink}" value: "{color.owncast.logo.pink.value}"
purple: purple:
value: "{color.owncast.logo.purple}" value: "{color.owncast.purple.500.value}"
blue: blue:
value: "{color.owncast.logo.blue}" value: "{color.owncast.logo.blue.value}"
white-88: white-88:
value: "{color.owncast.gray.500}" value: "{color.owncast.gray.500.value}"
purple-dark: purple-dark:
value: "rgba(28, 26, 59, 1)" value: "{color.owncast.purple.900.value}"
default-link-color: default-link-color:
value: "{color.owncast.logo.pink}" value: "{color.owncast.purple.700.value}"
default-bg-color: default-bg-color:
value: "black" value: "{color.owncast.background.value}"
default-text-color: default-text-color:
value: "rgba(255, 255, 255, 0.88)" value: "{color.owncast.gray.100.value}"

16
web/styles/ant-overrides.scss
View file

@ -52,14 +52,14 @@ h5.ant-typography,
} }
} }
.ant-typography h1, // .ant-typography h1,
h1.ant-typography { // h1.ant-typography {
font-size: 1.75em; // font-size: 1.75em;
color: var(--pink); // color: var(--pink);
&:first-of-type { // &:first-of-type {
margin-top: 0; // margin-top: 0;
} // }
} // }
.ant-typography h2, .ant-typography h2,
h2.ant-typography { h2.ant-typography {
font-size: 1.5em; font-size: 1.5em;

2
web/styles/globals.scss
View file

@ -2,7 +2,7 @@
:root { :root {
// chat variables // chat variables
--header-h: 64px; // --header-h: 64px;
--chat-w: 300px; --chat-w: 300px;
--chat-input-h: 40.5px; --chat-input-h: 40.5px;
} }

30
web/styles/theme.less
View file

@ -1,12 +1,12 @@
// Do not edit directly // Do not edit directly
// Generated on Sat, 07 May 2022 06:21:28 GMT // Generated on Sat, 07 May 2022 17:24:18 GMT
@text-color: var(--theme-text-color); @text-color: var(--theme-text-color);
@text-color-secondry: var(--theme-text-color-secondary); @text-color-secondry: var(--theme-text-color-secondary);
@link-color: var(--theme-link-color); @link-color: var(--theme-link-color);
@popover-background: var(--theme-background); @popover-background: var(--theme-background);
@background-color-light: #f4ebff; @background-color-light: var(--theme-background-secondary);
@primary-color: #9e77ed; @primary-color: #9e77ed;
@info-color: #667085; @info-color: #667085;
@success-color: #12b76a; @success-color: #12b76a;
@ -16,16 +16,18 @@
@green-base: #12b76a; @green-base: #12b76a;
@red-base: #f04438; @red-base: #f04438;
@orange-base: #f79009; @orange-base: #f79009;
@theme-primary-color: #9e77ed; @theme-primary-color: #9e77ed; // The primary color of the application used for rendering controls.
@theme-text-color: #d0d5dd; @theme-text-color: #d0d5dd; // The color of the text in the application.
@theme-text-color-secondary: #667085; @theme-text-color-secondary: #667085;
@theme-link-color: #9e77ed; @theme-link-color: #9e77ed;
@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@theme-background: #1b1a26; // The main background color of the page.
@theme-background-secondary: #16151f; // A secondary background color used in sections and controls.
@theme-rounded-corners: 5px; // The radius of rounded corners.
@theme-success-color: #12b76a; @theme-success-color: #12b76a;
@theme-info-color: #d6bbfb; @theme-info-color: #d6bbfb;
@theme-warning-color: #f79009; @theme-warning-color: #f79009;
@theme-error-color: #f04438; @theme-error-color: #f04438;
@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';;
@theme-background: #171523;
@color-owncast-purple-100: #f4ebff; @color-owncast-purple-100: #f4ebff;
@color-owncast-purple-300: #d6bbfb; @color-owncast-purple-300: #d6bbfb;
@color-owncast-purple-500: #9e77ed; @color-owncast-purple-500: #9e77ed;
@ -54,19 +56,19 @@
@color-owncast-logo-purple: #7871ff; @color-owncast-logo-purple: #7871ff;
@color-owncast-logo-pink: #c98bfe; @color-owncast-logo-pink: #c98bfe;
@color-owncast-logo-blue: #2086e1; @color-owncast-logo-blue: #2086e1;
@color-owncast-background-light: #1b1a26; @color-owncast-background: #1b1a26;
@color-owncast-background: #171523; @color-owncast-background-secondary: #16151f;
@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';; @font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@owncast-purple: #7871ff; @owncast-purple: #7871ff;
@owncast-purple-25: rgba(120, 113, 255, 0.25); @owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5); @owncast-purple-50: rgba(120, 113, 255, 0.5);
@online-color: #73dd3f; @online-color: #73dd3f;
@offline-color: #999; @offline-color: #999;
@pink: #c98bfe; @pink: #c98bfe;
@purple: #7871ff; @purple: #9e77ed;
@blue: #2086e1; @blue: #2086e1;
@white-88: #667085; @white-88: #667085;
@purple-dark: rgba(28, 26, 59, 1); @purple-dark: #42307d;
@default-link-color: #c98bfe; @default-link-color: #6941c6;
@default-bg-color: black; @default-bg-color: #1b1a26;
@default-text-color: rgba(255, 255, 255, 0.88); @default-text-color: #f2f4f7;

34
web/styles/variables.css
View file

@ -1,6 +1,6 @@
/** /**
* Do not edit directly * Do not edit directly
* Generated on Sat, 07 May 2022 06:21:28 GMT * Generated on Sat, 07 May 2022 17:24:18 GMT
*/ */
:root { :root {
@ -8,7 +8,7 @@
--text-color-secondry: var(--theme-text-color-secondary); --text-color-secondry: var(--theme-text-color-secondary);
--link-color: var(--theme-link-color); --link-color: var(--theme-link-color);
--popover-background: var(--theme-background); --popover-background: var(--theme-background);
--background-color-light: #f4ebff; --background-color-light: var(--theme-background-secondary);
--primary-color: #9e77ed; --primary-color: #9e77ed;
--info-color: #667085; --info-color: #667085;
--success-color: #12b76a; --success-color: #12b76a;
@ -18,18 +18,18 @@
--green-base: #12b76a; --green-base: #12b76a;
--red-base: #f04438; --red-base: #f04438;
--orange-base: #f79009; --orange-base: #f79009;
--theme-primary-color: #9e77ed; --theme-primary-color: #9e77ed; /* The primary color of the application used for rendering controls. */
--theme-text-color: #d0d5dd; --theme-text-color: #d0d5dd; /* The color of the text in the application. */
--theme-text-color-secondary: #667085; --theme-text-color-secondary: #667085;
--theme-link-color: #9e77ed; --theme-link-color: #9e77ed;
--theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-background: #1b1a26; /* The main background color of the page. */
--theme-background-secondary: #16151f; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 5px; /* The radius of rounded corners. */
--theme-success-color: #12b76a; --theme-success-color: #12b76a;
--theme-info-color: #d6bbfb; --theme-info-color: #d6bbfb;
--theme-warning-color: #f79009; --theme-warning-color: #f79009;
--theme-error-color: #f04438; --theme-error-color: #f04438;
--theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--theme-background: #171523;
--color-owncast-purple-100: #f4ebff; --color-owncast-purple-100: #f4ebff;
--color-owncast-purple-300: #d6bbfb; --color-owncast-purple-300: #d6bbfb;
--color-owncast-purple-500: #9e77ed; --color-owncast-purple-500: #9e77ed;
@ -58,22 +58,20 @@
--color-owncast-logo-purple: #7871ff; --color-owncast-logo-purple: #7871ff;
--color-owncast-logo-pink: #c98bfe; --color-owncast-logo-pink: #c98bfe;
--color-owncast-logo-blue: #2086e1; --color-owncast-logo-blue: #2086e1;
--color-owncast-background-light: #1b1a26; --color-owncast-background: #1b1a26;
--color-owncast-background: #171523; --color-owncast-background-secondary: #16151f;
--font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, --font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--owncast-purple: #7871ff; --owncast-purple: #7871ff;
--owncast-purple-25: rgba(120, 113, 255, 0.25); --owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5); --owncast-purple-50: rgba(120, 113, 255, 0.5);
--online-color: #73dd3f; --online-color: #73dd3f;
--offline-color: #999; --offline-color: #999;
--pink: #c98bfe; --pink: #c98bfe;
--purple: #7871ff; --purple: #9e77ed;
--blue: #2086e1; --blue: #2086e1;
--white-88: #667085; --white-88: #667085;
--purple-dark: rgba(28, 26, 59, 1); --purple-dark: #42307d;
--default-link-color: #c98bfe; --default-link-color: #6941c6;
--default-bg-color: black; --default-bg-color: #1b1a26;
--default-text-color: rgba(255, 255, 255, 0.88); --default-text-color: #f2f4f7;
} }