mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 04:40:37 +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 ExternalActionButton from './ExternalActionButton';
import s from './ExternalActionButtons.module.scss';
interface Props {
actions: ExternalAction[];
@ -9,7 +10,7 @@ export default function ExternalActionButtonRow(props: Props) {
const { actions } = props;
return (
<div>
<div className={`${s.row}`}>
{actions.map(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);
}
.pageContentSection {
background-color: var(--theme-background-secondary);
border-radius: var(--theme-rounded-corners);
margin: 1vw;
padding: 1vw;
width: 100%;
}
@media (min-width: 768px) {
.mobileChat {
display: none;

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

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

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

@ -1,5 +1,5 @@
.root {
background-color: var(--gray-700);
background-color: var(--theme-background-secondary);
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 videojs from 'video.js';
import s from './Player.module.scss';
require('video.js/dist/video-js.css');
@ -47,11 +48,7 @@ export function VideoJS(props) {
return (
<div data-vjs-player>
<video
ref={videoRef}
className="video-js vjs-big-play-centered"
style={{ width: '100%', height: '100%' }}
/>
<video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player}`} />
</div>
);
}

2
web/pages/_app.tsx
View file

@ -2,7 +2,7 @@
import '../styles/variables.css';
import '../styles/global.less';
import '../styles/globals.scss';
// import '../styles/ant-overrides.scss';
import '../styles/ant-overrides.scss';
import '../styles/markdown-editor.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:
value: "var(--theme-background)"
background-color-light:
value: "{color.owncast.purple.100.value}"
value: "var(--theme-background-secondary)"
# These values require explicit colors and cannot take css variables.
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.
# They can be overwritten to customize the look and feel.
# 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:
primary-color:
value: "{color.owncast.purple.500.value}"
comment: "The primary color of the application used for rendering controls."
text-color:
value: "{color.owncast.gray.300.value}"
comment: "The color of the text in the application."
text-color-secondary:
value: "{color.owncast.gray.500.value}"
link-color:
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:
value: "{color.owncast.green.500.value}"
info-color:
@ -18,9 +33,4 @@ theme:
warning-color:
value: "{color.owncast.orange.500.value}"
error-color:
value: "{color.owncast.red.500.value}"
font-family:
value: "{font.owncast.family.value}"
background:
value: "{color.owncast.background.value}"
value: "{color.owncast.red.500.value}"

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

@ -70,22 +70,22 @@ color:
blue:
value: "rgba(32, 134, 225, 1)"
background-light:
value: "rgba(27, 26, 38, 1)"
background:
value: "rgba(23, 21, 35, 1)"
value: "rgba(27, 26, 38, 1)"
background-secondary:
value: "rgba(22, 21, 31, 1)"
font:
owncast:
family:
value: "'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';"
'Segoe UI Symbol', 'Noto Color Emoji'"
# Values used in the admin and should be migrated to variables or removed.
# See ant-overrides.scss.
owncast-purple:
value: "{color.owncast.logo.purple}"
value: "{color.owncast.logo.purple.value}"
owncast-purple-25:
value: "rgba(120, 113, 255, 0.25)"
owncast-purple-50:
@ -95,18 +95,18 @@ online-color:
offline-color:
value: "#999"
pink:
value: "{color.owncast.logo.pink}"
value: "{color.owncast.logo.pink.value}"
purple:
value: "{color.owncast.logo.purple}"
value: "{color.owncast.purple.500.value}"
blue:
value: "{color.owncast.logo.blue}"
value: "{color.owncast.logo.blue.value}"
white-88:
value: "{color.owncast.gray.500}"
value: "{color.owncast.gray.500.value}"
purple-dark:
value: "rgba(28, 26, 59, 1)"
value: "{color.owncast.purple.900.value}"
default-link-color:
value: "{color.owncast.logo.pink}"
value: "{color.owncast.purple.700.value}"
default-bg-color:
value: "black"
value: "{color.owncast.background.value}"
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,
h1.ant-typography {
font-size: 1.75em;
color: var(--pink);
&:first-of-type {
margin-top: 0;
}
}
// .ant-typography h1,
// h1.ant-typography {
// font-size: 1.75em;
// color: var(--pink);
// &:first-of-type {
// margin-top: 0;
// }
// }
.ant-typography h2,
h2.ant-typography {
font-size: 1.5em;

2
web/styles/globals.scss
View file

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

30
web/styles/theme.less
View file

@ -1,12 +1,12 @@
// 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-secondry: var(--theme-text-color-secondary);
@link-color: var(--theme-link-color);
@popover-background: var(--theme-background);
@background-color-light: #f4ebff;
@background-color-light: var(--theme-background-secondary);
@primary-color: #9e77ed;
@info-color: #667085;
@success-color: #12b76a;
@ -16,16 +16,18 @@
@green-base: #12b76a;
@red-base: #f04438;
@orange-base: #f79009;
@theme-primary-color: #9e77ed;
@theme-text-color: #d0d5dd;
@theme-primary-color: #9e77ed; // The primary color of the application used for rendering controls.
@theme-text-color: #d0d5dd; // The color of the text in the application.
@theme-text-color-secondary: #667085;
@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-info-color: #d6bbfb;
@theme-warning-color: #f79009;
@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-300: #d6bbfb;
@color-owncast-purple-500: #9e77ed;
@ -54,19 +56,19 @@
@color-owncast-logo-purple: #7871ff;
@color-owncast-logo-pink: #c98bfe;
@color-owncast-logo-blue: #2086e1;
@color-owncast-background-light: #1b1a26;
@color-owncast-background: #171523;
@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';;
@color-owncast-background: #1b1a26;
@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';
@owncast-purple: #7871ff;
@owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5);
@online-color: #73dd3f;
@offline-color: #999;
@pink: #c98bfe;
@purple: #7871ff;
@purple: #9e77ed;
@blue: #2086e1;
@white-88: #667085;
@purple-dark: rgba(28, 26, 59, 1);
@default-link-color: #c98bfe;
@default-bg-color: black;
@default-text-color: rgba(255, 255, 255, 0.88);
@purple-dark: #42307d;
@default-link-color: #6941c6;
@default-bg-color: #1b1a26;
@default-text-color: #f2f4f7;

34
web/styles/variables.css
View file

@ -1,6 +1,6 @@
/**
* 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 {
@ -8,7 +8,7 @@
--text-color-secondry: var(--theme-text-color-secondary);
--link-color: var(--theme-link-color);
--popover-background: var(--theme-background);
--background-color-light: #f4ebff;
--background-color-light: var(--theme-background-secondary);
--primary-color: #9e77ed;
--info-color: #667085;
--success-color: #12b76a;
@ -18,18 +18,18 @@
--green-base: #12b76a;
--red-base: #f04438;
--orange-base: #f79009;
--theme-primary-color: #9e77ed;
--theme-text-color: #d0d5dd;
--theme-primary-color: #9e77ed; /* The primary color of the application used for rendering controls. */
--theme-text-color: #d0d5dd; /* The color of the text in the application. */
--theme-text-color-secondary: #667085;
--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-info-color: #d6bbfb;
--theme-warning-color: #f79009;
--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-300: #d6bbfb;
--color-owncast-purple-500: #9e77ed;
@ -58,22 +58,20 @@
--color-owncast-logo-purple: #7871ff;
--color-owncast-logo-pink: #c98bfe;
--color-owncast-logo-blue: #2086e1;
--color-owncast-background-light: #1b1a26;
--color-owncast-background: #171523;
--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';
--color-owncast-background: #1b1a26;
--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';
--owncast-purple: #7871ff;
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5);
--online-color: #73dd3f;
--offline-color: #999;
--pink: #c98bfe;
--purple: #7871ff;
--purple: #9e77ed;
--blue: #2086e1;
--white-88: #667085;
--purple-dark: rgba(28, 26, 59, 1);
--default-link-color: #c98bfe;
--default-bg-color: black;
--default-text-color: rgba(255, 255, 255, 0.88);
--purple-dark: #42307d;
--default-link-color: #6941c6;
--default-bg-color: #1b1a26;
--default-text-color: #f2f4f7;
}