pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Draft: rough-ish draft of proposed color theme changes (#2067) 

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
pull/2079/head
gingervitis 3 years ago committed by GitHub
parent
a0a28fa572
commit
d5fa81f76e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 817 additions and 325 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      web/components/action-buttons/ActionButton.tsx
  2. 5
      web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
  3. 6
      web/components/chat/ChatTextField/ChatTextField.module.scss
  4. 4
      web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
  5. 19
      web/components/common/ContentHeader/ContentHeader.module.scss
  6. 1
      web/components/common/Logo/Logo.module.scss
  7. 5
      web/components/common/UserDropdown/UserDropdown.module.scss
  8. 2
      web/components/common/UserDropdown/UserDropdown.tsx
  9. 6
      web/components/modals/Follow/FollowModal.tsx
  10. 2
      web/components/modals/NameChangeModal.tsx
  11. 16
      web/components/ui/Content/Content.module.scss
  12. 8
      web/components/ui/Content/Content.tsx
  13. 10
      web/components/ui/CustomPageContent/CustomPageContent.module.scss
  14. 4
      web/components/ui/Footer/Footer.module.scss
  15. 11
      web/components/ui/Header/Header.module.scss
  16. 4
      web/components/ui/Logo/Logo.module.scss
  17. 1
      web/components/ui/Modal/Modal.module.scss
  18. 3
      web/components/ui/OfflineBanner/OfflineBanner.module.scss
  19. 5
      web/components/ui/Sidebar/Sidebar.module.scss
  20. 8
      web/components/ui/Statusbar/Statusbar.module.scss
  21. 19
      web/components/video/player.scss
  22. 5
      web/stories/Color.tsx
  23. 109
      web/stories/Colors.stories.mdx
  24. 30
      web/style-definitions/tokens/color/antd-overrides.yaml
  25. 252
      web/style-definitions/tokens/color/default-theme.yaml
  26. 48
      web/style-definitions/tokens/color/owncast-admin.yaml
  27. 75
      web/style-definitions/tokens/color/owncast-colors.yaml
  28. 120
      web/styles/ant-overrides.scss
  29. 25
      web/styles/globals.scss
  30. 141
      web/styles/theme.less
  31. 173
      web/styles/variables.css
  32. 18
      web/styles/variables.scss

7
web/components/action-buttons/ActionButton.tsx
Unescape View File

@ -6,10 +6,15 @@ import s from './ActionButton.module.scss'; @@ -6,10 +6,15 @@ import s from './ActionButton.module.scss';
interface Props {
action: ExternalAction;
primary?: boolean;
}
ActionButton.defaultProps = {
primary: false,
};
export default function ActionButton({
action: { url, title, description, icon, color, openExternally },
primary = false,
}: Props) {
const [showModal, setShowModal] = useState(false);
@ -24,7 +29,7 @@ export default function ActionButton({ @@ -24,7 +29,7 @@ export default function ActionButton({
return (
<>
<Button
type="primary"
type={primary ? 'primary' : 'default'}
className={`${s.button}`}
onClick={buttonClicked}
style={{ backgroundColor: color }}

5
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
.chatSystemMessage {
background: var(--theme-background-secondary);
background: var(--theme-color-background-main);
background: linear-gradient(
70deg,
rgb(78, 54, 114) 0%,
@ -31,8 +31,7 @@ @@ -31,8 +31,7 @@
mark {
padding-left: 0.35em;
padding-right: 0.35em;
color: var(--theme-text-highlight);
background-color: var(--color-bg-highlight);
background-color: var(--theme-color-palette-12);
}
}
}

6
web/components/chat/ChatTextField/ChatTextField.module.scss
Unescape View File

@ -4,14 +4,16 @@ @@ -4,14 +4,16 @@
bottom: 0px;
width: 100%;
padding: 0.3rem;
color: var(--theme-text-secondary);
color: var(--theme-color-components-form-field-text);
overflow-x: hidden;
div[role='textbox'] {
font-size: 0.9rem;
border-radius: 0.2rem;
padding: 0.6rem;
padding-right: calc(0.6rem + 44px);
background-color: var(--color-owncast-gray-700);
background-color: var(--theme-color-components-form-field-background);
border-color: var(--theme-color-components-form-field-border);
box-shadow: 0;
transition: box-shadow 50ms ease-in-out;
&:focus {

4
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
Unescape View File

@ -13,12 +13,12 @@ @@ -13,12 +13,12 @@
font-weight: bold;
}
.message {
color: var(--theme-text-primary);
color: var(--theme-color-components-chat-text);
mark {
padding-left: 0.35em;
padding-right: 0.35em;
color: var(--theme-text-highlight);
color: var(--theme-color-palette-12);
}
}

19
web/components/common/ContentHeader/ContentHeader.module.scss
Unescape View File

@ -1,6 +1,7 @@ @@ -1,6 +1,7 @@
.root {
position: relative;
display: grid;
padding: 20px;
}
.buttonsLogoTitleSection {
@ -28,31 +29,31 @@ @@ -28,31 +29,31 @@
.titleSection {
display: flex;
flex-direction: column;
margin-left: 10px;
.title {
font-family: var(--theme-text-display-font-family);
color: var(--theme-color-palette-0);
font-size: 32px;
font-weight: bold;
color: black;
text-transform: uppercase;
line-height: 30px;
}
.subtitle {
font-size: 24px;
font-weight: 400;
line-height: 22px;
color: var(--theme-text-secondary);
font-size: 22px;
font-weight: 300;
line-height: 1.3;
color: var(--theme-color-background-header);
}
}
.tagList {
font-family: var(--theme-text-display-font-family);
color: var(--theme-text-primary);
color: var(--theme-color-palette-10);
span {
display: inline-block;
margin-right: 8px;
font-size: 14px;
font-weight: 300;
font-weight: 500;
}
}

1
web/components/common/Logo/Logo.module.scss
Unescape View File

@ -12,7 +12,6 @@ @@ -12,7 +12,6 @@
.contrast {
padding: 5px;
border-radius: 50%;
background-color: var(--color-owncast-gray-100);
svg {
width: clamp(2rem, 7vw, 40px);
height: clamp(2rem, 7vw, 40px);

5
web/components/common/UserDropdown/UserDropdown.module.scss
Unescape View File

@ -1,5 +1,10 @@ @@ -1,5 +1,10 @@
.root {
button {
border: none;
.ant-space {
.ant-space-item {
color: var(--theme-unknown-2);
}
}
}
}

2
web/components/common/UserDropdown/UserDropdown.tsx
Unescape View File

@ -68,7 +68,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) { @@ -68,7 +68,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
return (
<div className={`${s.root}`}>
<Dropdown overlay={menu} trigger={['click']}>
<Button icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Space>
{username}
<CaretDownOutlined />

6
web/components/modals/Follow/FollowModal.tsx
Unescape View File

@ -111,10 +111,12 @@ export default function FollowModal(props: Props) { @@ -111,10 +111,12 @@ export default function FollowModal(props: Props) {
</div>
</div>
<Space className={s.buttons}>
<Button disabled={!valid} onClick={remoteFollowButtonPressed}>
<Button disabled={!valid} type="primary" onClick={remoteFollowButtonPressed}>
Follow
</Button>
<Button onClick={joinButtonPressed}>Join the Fediverse</Button>
<Button onClick={joinButtonPressed} type="primary">
Join the Fediverse
</Button>
</Space>
</Spin>
</Space>

2
web/components/modals/NameChangeModal.tsx
Unescape View File

@ -18,7 +18,7 @@ function UserColor(props: { color: number }): React.ReactElement { @@ -18,7 +18,7 @@ function UserColor(props: { color: number }): React.ReactElement {
const { color } = props;
const style: CSSProperties = {
textAlign: 'center',
backgroundColor: `var(--theme-user-colors-${color})`,
backgroundColor: `var(--theme-color-users-${color})`,
width: '100%',
height: '100%',
};

16
web/components/ui/Content/Content.module.scss
Unescape View File

@ -1,7 +1,16 @@ @@ -1,7 +1,16 @@
.root {
display: grid;
grid-template-columns: 1fr auto;
padding: 0.7em;
background-color: var(--theme-color-background-main);
.topSection {
padding: 0;
background-color: var(--theme-color-components-video-background);
}
.lowerSection {
padding: 0em 2em;
}
}
.leftCol {
@ -22,13 +31,12 @@ @@ -22,13 +31,12 @@
flex-direction: column;
height: calc(100vh - 64px);
overflow: hidden;
.topHalf {
.topSection {
display: grid;
grid-template-rows: 30vh 5vh 5vh;
height: 40vh;
// overflow: hidden;
}
.lowerHalf {
.lowerSection {
height: 60vh;
}
}

8
web/components/ui/Content/Content.tsx
Unescape View File

@ -113,7 +113,8 @@ export default function ContentComponent() { @@ -113,7 +113,8 @@ export default function ContentComponent() {
<Content className={rootClassName}>
<div className={s.leftContent}>
<Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
<div className={s.topHalf}>
<div className={s.topSection}>
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
{!online && (
<OfflineBanner
@ -129,6 +130,8 @@ export default function ContentComponent() { @@ -129,6 +130,8 @@ export default function ContentComponent() {
lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount}
/>
</div>
<div className={s.midSection}>
<div className={s.buttonsLogoTitleSection}>
<ActionButtonRow>
{externalActionButtons}
@ -161,6 +164,9 @@ export default function ContentComponent() { @@ -161,6 +164,9 @@ export default function ContentComponent() {
links={socialHandles}
logo="/logo"
/>
</div>
<div className={s.lowerSection}>
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && (
<TabPane tab="Chat" key="0" style={{ height: '100%' }}>

10
web/components/ui/CustomPageContent/CustomPageContent.module.scss
Unescape View File

@ -9,12 +9,10 @@ @@ -9,12 +9,10 @@
line-height: 1.5em;
margin: 0;
padding: 0;
width: 80%;
max-width: 1200px;
color: var(--theme-text);
background-color: var(--theme-background-secondary);
padding: 1em;
color: var(--theme-color-palette-0);
background-color: var(--theme-color-palette-4);
padding: calc(3 * var(--content-padding));
border-radius: var(--theme-rounded-corners);
// Allow the content to fill the width on narrow screens.
@media only screen and (max-width: 768px) {

4
web/components/ui/Footer/Footer.module.scss
Unescape View File

@ -1,5 +1,7 @@ @@ -1,5 +1,7 @@
.footer {
font-size: 0.85em;
font-weight: 500;
color: var(--theme-text-secondary);
color: var(--theme-color-palette-1);
background-color: transparent;
padding: var(--content-padding);
}

11
web/components/ui/Header/Header.module.scss
Unescape View File

@ -5,13 +5,18 @@ @@ -5,13 +5,18 @@
align-items: center;
justify-content: space-between;
z-index: 20;
padding: 0.4rem .7rem;
background-color: var(--default-bg-color);
padding: 0.4rem 0.7rem;
box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
background-color: var(--theme-color-background-header);
.logo {
display: flex;
align-items: center;
span {
margin-left: .5rem;
color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-display-font-family);
margin-left: 0.5rem;
font-size: 1.5rem;
font-weight: 600;
}

4
web/components/ui/Logo/Logo.module.scss
Unescape View File

@ -10,8 +10,8 @@ @@ -10,8 +10,8 @@
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: var(--theme-primary-color);
background-color: var(--theme-background-secondary);
border-color: var(--theme-color-palette-0);
background-color: var(--theme-color-palette-4);
}
.container {

1
web/components/ui/Modal/Modal.module.scss
Unescape View File

@ -8,4 +8,5 @@ @@ -8,4 +8,5 @@
display: block;
height: 100%;
padding: 2vw;
background-color: var(--theme-color-components-modal-content-background);
}

3
web/components/ui/OfflineBanner/OfflineBanner.module.scss
Unescape View File

@ -7,7 +7,8 @@ @@ -7,7 +7,8 @@
width: clamp(200px, 100%, 300px);
display: flex;
flex-direction: column;
background-color: var(--theme-background-secondary);
color: var(--theme-color-components-text-on-light);
background-color: var(--theme-color-background-main);
margin: 1rem auto;
border-radius: var(--theme-rounded-corners);
padding: 1rem;

5
web/components/ui/Sidebar/Sidebar.module.scss
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
.root {
background-color: var(--theme-background-secondary);
background-color: var(--theme-color-components-chat-background);
display: none;
--header-h: 64px;
}
@ -13,7 +13,7 @@ @@ -13,7 +13,7 @@
max-height: calc(100vh - var(--header-h));
}
}
/*
/*
First div is .ant-layout-sider-children
Only way to target it apparently
*/
@ -24,4 +24,3 @@ Only way to target it apparently @@ -24,4 +24,3 @@ Only way to target it apparently
flex-grow: 1 !important;
height: 100% !important;
}

8
web/components/ui/Statusbar/Statusbar.module.scss
Unescape View File

@ -1,12 +1,10 @@ @@ -1,12 +1,10 @@
.statusbar {
display: flex;
align-items: center;
font-size: .8rem;
padding-left: 10px;
padding-right: 10px;
font-size: 0.8rem;
justify-content: space-between;
height: 2rem;
width: 100%;
color: var(--color-owncast-gray-300);
background-color: var(--theme-background-secondary);
padding: var(--content-padding);
color: var(--theme-color-palette-5);
}

19
web/components/video/player.scss
Unescape View File

@ -1,20 +1,23 @@ @@ -1,20 +1,23 @@
/* Change all text and icon colors in the player. */
.vjs-owncast.video-js {
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-owncast .vjs-big-play-button {
z-index: 10;
color: var(--theme-text-secondary);
font-size: 15rem !important;
color: var(--theme-color-action);
font-size: 8rem !important;
border-color: transparent !important;
border-radius: var(--theme-rounded-corners) !important;
background-color: transparent !important;
text-shadow: 2px 3px 4px #0000005f;
-webkit-text-stroke: 2px white;
text-stroke: 2px white;
:hover {
transition: all 0.2s ease-in-out;
font-size: 20rem;
font-size: 10rem;
text-shadow: 2px 5px 4px #00000093;
}
}
@ -22,16 +25,16 @@ @@ -22,16 +25,16 @@
.vjs-owncast .vjs-loading-spinner {
z-index: 10;
display: block;
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-owncast .vjs-control-bar {
color: var(--theme-text-secondary);
background-color: var(--theme-background-primary) !important;
color: var(--theme-color-components-text-on-light);
background-color: var(--theme-color-background-main) !important;
}
.vjs-owncast .vjs-control {
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-airplay .vjs-icon-placeholder::before {

5
web/stories/Color.tsx
Unescape View File

@ -1,3 +1,5 @@ @@ -1,3 +1,5 @@
import he from 'date-fns/esm/locale/he/index.js';
import { unset } from 'lodash';
import PropTypes from 'prop-types';
export function Color(props) {
@ -35,8 +37,9 @@ export function Color(props) { @@ -35,8 +37,9 @@ export function Color(props) {
const colorDescriptionStyle = {
margin: '5px',
color: 'gray',
fontSize: '0.9vw',
fontSize: '0.95vw',
textAlign: 'center' as 'center',
lineHeight: 1.0,
};
return (

109
web/stories/Colors.stories.mdx
Unescape View File

@ -1,34 +1,111 @@ @@ -1,34 +1,111 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Color, ColorRow } from './Color';
<Meta title="owncast/Style Guide/Colors" />
<Meta title="owncast/Style Guide/Default Theme" />
# Colors
# Default theme colors
These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/webv2/web/style-definitions/tokens/color) files
and get reflected here as they change. run `npm build-styles` to regenerate.
and get reflected here as they change. run `npm run build-styles` to regenerate.
Toggle dark mode on and off in the above toolbar to see how these colors look on a dark vs. light background.
## Default Theme
## Text
These color names are assigned to specific component variables. They can be overwritten via CSS.
<ColorRow colors={['theme-text-primary', 'theme-text-secondary', 'theme-text-link']} />
<ColorRow
colors={[
'theme-color-palette-0',
'theme-color-palette-1',
'theme-color-palette-2',
'theme-color-palette-3',
'theme-color-palette-4',
'theme-color-palette-5',
'theme-color-palette-6',
'theme-color-palette-7',
'theme-color-palette-8',
'theme-color-palette-9',
'theme-color-palette-10',
'theme-color-palette-11',
'theme-color-palette-12',
'theme-color-palette-13',
'theme-color-palette-error',
'theme-color-palette-warning',
'theme-color-background-main',
'theme-color-background-header',
'theme-color-action',
'theme-color-action-hover',
'theme-color-action-disabled',
]}
/>
## Backgrounds
## Component Colors
<ColorRow colors={['theme-background-primary', 'theme-background-secondary']} />
<ColorRow
colors={[
'theme-color-components-text-on-light',
'theme-color-components-text-on-dark',
'theme-color-components-primary-button-background',
'theme-color-components-primary-button-background-disabled',
'theme-color-components-primary-button-text',
'theme-color-components-primary-button-text-disabled',
'theme-color-components-primary-button-border',
'theme-color-components-secondary-button-background',
'theme-color-components-secondary-button-background-disabled',
'theme-color-components-secondary-button-text',
'theme-color-components-secondary-button-text-disabled',
'theme-color-components-secondary-button-border',
'theme-color-components-chat-background',
'theme-color-components-chat-text',
'theme-color-components-modal-header-background',
'theme-color-components-modal-header-text',
'theme-color-components-modal-content-background',
'theme-color-components-modal-content-text',
'theme-color-components-menu-background',
'theme-color-components-menu-item-text',
'theme-color-components-menu-item-bg',
'theme-color-components-menu-item-hover-bg',
'theme-color-components-menu-item-focus-bg',
'theme-color-components-form-field-background',
'theme-color-components-form-field-placeholder',
'theme-color-components-form-field-text',
'theme-color-components-form-field-border',
]}
/>
## Default Palette
These are the core colors for the default, out of the box, Owncast web application theme.
They should not be overwritten, instead the theme variables should be overwritten.
<ColorRow
colors={[
'color-owncast-palette-0',
'color-owncast-palette-1',
'color-owncast-palette-2',
'color-owncast-palette-3',
'color-owncast-palette-4',
'color-owncast-palette-5',
'color-owncast-palette-6',
'color-owncast-palette-7',
'color-owncast-palette-9',
'color-owncast-palette-10',
'color-owncast-palette-11',
'color-owncast-palette-12',
'color-owncast-palette-13',
]}
/>
## User Colors
<ColorRow
colors={[
'theme-user-colors-0',
'theme-user-colors-1',
'theme-user-colors-2',
'theme-user-colors-3',
'theme-user-colors-4',
'theme-user-colors-5',
'theme-user-colors-6',
'theme-user-colors-7',
'theme-color-users-0',
'theme-color-users-1',
'theme-color-users-2',
'theme-color-users-3',
'theme-color-users-4',
'theme-color-users-5',
'theme-color-users-6',
'theme-color-users-7',
]}
/>

30
web/style-definitions/tokens/color/antd-overrides.yaml
Unescape View File

@ -2,23 +2,17 @@ @@ -2,23 +2,17 @@
# You can find the variable names to override at:
# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
text-color:
value: 'var(--theme-text-primary)'
text-color-secondary:
value: 'var(--theme-text-secondary)'
link-color:
value: 'var(--theme-text-link)'
popover-background:
value: 'var(--theme-background-secondary)'
value: 'var(--theme-color-action)'
link-hover-color:
value: 'var(--theme-color-action-hover)'
modal-header-bg:
value: 'var(--theme-color-components-modal-header-background)'
modal-content-bg:
value: '{color.unknown-2.value}'
background-color-light:
value: 'var(--theme-background-secondary)'
layout-body-background:
value: 'var(--theme-background-primary)'
# These colors need to be explicitly set and cannot use CSS variables.
component-background:
value: '{color.unknown.value}'
warning-color:
value: '{color.unknown-2.value}'
value: 'var(--theme-color-background-main)'
alert-error-bg-color:
value: 'var(--theme-color-palette-4)'
alert-error-border-color:
value: 'var(--theme-color-palette-error)'
popover-background:
value: 'var(--theme-color-components-menu-background)'

252
web/style-definitions/tokens/color/default-theme.yaml
Unescape View File

@ -4,51 +4,211 @@ @@ -4,51 +4,211 @@
# The fewer there are the easier it'll be easier to customize and document.
theme:
unknown:
value: '{color.unknown.value}'
rounded-corners:
value: 0.5rem
comment: 'How much corners are rounded in places in the UI.'
unknown-1:
value: 'green'
comment: 'This should never be used and it means something is wrong.'
unknown-2:
value: '{color.unknown-2.value}'
primary:
value: '{color.unknown.value}'
comment: 'The primary color of the application used for rendering controls.'
text:
primary:
value: '{color.owncast.text.primary.value}'
comment: 'The color of the text in the application.'
secondary:
value: '{color.owncast.text.secondary.value}'
link:
value: '{color.owncast.text.bright.value}'
body-font-family:
value: '{font.owncast.body.value}'
display-font-family:
value: '{font.owncast.display.value}'
background:
primary:
value: '{color.owncast.background.primary.value}'
comment: 'The main background color of the page.'
secondary:
value: '{color.owncast.background.secondary.value}'
comment: 'A secondary background color used in sections and controls.'
value: 'red'
comment: 'This should never be used and it means something is wrong.'
color:
users:
comment: 'Colors used to display chat users.'
0:
value: 'var(--color-owncast-user-0)'
1:
value: 'var(--color-owncast-user-1)'
2:
value: 'var(--color-owncast-user-2)'
3:
value: 'var(--color-owncast-user-3)'
4:
value: 'var(--color-owncast-user-4)'
5:
value: 'var(--color-owncast-user-5)'
6:
value: 'var(--color-owncast-user-6)'
7:
value: 'var(--color-owncast-user-7)'
rounded-corners:
value: '{rounded-corners.value}'
user-colors:
comment: 'Colors used to display chat users.'
0:
value: '{color.owncast.user.0.value}'
1:
value: '{color.owncast.user.1.value}'
2:
value: '{color.owncast.user.2.value}'
3:
value: '{color.owncast.user.3.value}'
4:
value: '{color.owncast.user.4.value}'
5:
value: '{color.owncast.user.5.value}'
6:
value: '{color.owncast.user.6.value}'
7:
value: '{color.owncast.user.7.value}'
palette:
comment: 'Colors used in the user interface for the default theme.'
0:
value: 'var(--color-owncast-palette-0)'
comment: '{color.owncast.palette.0.comment}'
1:
value: 'var(--color-owncast-palette-1)'
comment: '{color.owncast.palette.1.comment}'
2:
value: 'var(--color-owncast-palette-2)'
comment: '{color.owncast.palette.2.comment}'
3:
value: 'var(--color-owncast-palette-3)'
comment: '{color.owncast.palette.3.comment}'
4:
value: 'var(--color-owncast-palette-4)'
comment: '{color.owncast.palette.4.comment}'
5:
value: 'var(--color-owncast-palette-5)'
comment: '{color.owncast.palette.5.comment}'
6:
value: 'var(--color-owncast-palette-6)'
comment: '{color.owncast.palette.6.comment}'
7:
value: 'var(--color-owncast-palette-7)'
comment: '{color.owncast.palette.7.comment}'
8:
value: 'var(--color-owncast-palette-8)'
comment: '{color.owncast.palette.8.comment}'
9:
value: 'var(--color-owncast-palette-9)'
comment: '{color.owncast.palette.9.comment}'
10:
value: 'var(--color-owncast-palette-10)'
comment: '{color.owncast.palette.10.comment}'
11:
value: 'var(--color-owncast-palette-11)'
comment: '{color.owncast.palette.11.comment}'
12:
value: 'var(--color-owncast-palette-12)'
comment: '{color.owncast.palette.12.comment}'
13:
value: 'var(--color-owncast-palette-13)'
comment: '{color.owncast.palette.13.comment}'
error:
value: 'var(--color-owncast-palette-error)'
comment: '{color.owncast.palette.error.comment}'
warning:
value: 'var(--color-owncast-palette-warning)'
comment: '{color.owncast.palette.warning.comment}'
background:
main:
value: 'var(--theme-color-palette-3)'
comment: '{theme.color.palette.3.comment}'
header:
value: 'var(--theme-color-palette-0)'
comment: '{theme.color.palette.0.comment}'
action:
value: 'var(--theme-color-palette-6)'
comment: '{theme.color.palette.6.comment}'
action-hover:
value: 'var(--theme-color-palette-7)'
comment: '{theme.color.palette.7.comment}'
action-disabled:
value: 'var(--theme-color-palette-8)'
comment: '{theme.color.palette.8.comment}'
error:
value: 'var(--theme-color-palette-error)'
comment: '{theme.color.palette.error.comment}'
warning:
value: 'var(--theme-color-palette-warning)'
comment: '{theme.color.palette.warning.comment}'
components:
text-on-light:
value: 'var(--theme-color-palette-0)'
comment: '{theme.color.palette.0.comment}'
text-on-dark:
value: 'var(--theme-color-palette-3)'
comment: '{theme.color.palette.3.comment}'
primary-button:
background:
value: 'var(--theme-color-action)'
comment: '{theme.color.action.comment}'
background-disabled:
value: 'var(--theme-color-action-disabled)'
comment: '{theme.color.action-disabled.comment}'
text:
value: 'var(--theme-color-palette-4)'
comment: '{theme.color.palette.4.comment}'
text-disabled:
value: 'var(--theme-color-palette-10)'
comment: '{theme.color.palette.10.comment}'
border:
value: 'var(--theme-color-palette-4)'
comment: '{theme.color.palette.4.comment}'
border-disabled:
value: 'var(--theme-color-action-disabled)'
comment: '{theme.color.action-disabled.comment}'
secondary-button:
background:
value: 'var(--theme-color-palette-4)'
comment: '{theme.color.palette.4.comment}'
background-disabled:
value: 'transparent'
text:
value: 'var(--theme-color-action-disabled)'
comment: '{theme.color.action-disabled.comment}'
text-disabled:
value: 'var(--theme-color-action-disabled)'
comment: '{theme.color.action-disabled.comment}'
border:
value: 'var(--theme-color-action)'
comment: '{theme.color.action.comment}'
border-disabled:
value: 'var(--theme-color-action-disabled)'
comment: '{theme.color.action-disabled.comment}'
chat:
background:
value: 'var(--theme-color-palette-1)'
comment: '{theme.color.palette.1.comment}'
text:
value: 'var(--theme-color-palette-3)'
comment: '{theme.color.palette.3.comment}'
modal:
header:
background:
value: 'var(--theme-color-palette-1)'
comment: '{theme.color.palette.1.comment}'
text:
value: 'var(--theme-color-palette-3)'
comment: '{theme.color.palette.3.comment}'
content:
background:
value: 'var(--theme-color-palette-3)'
comment: '{theme.color.palette.3.comment}'
text:
value: 'var(--theme-color-palette-0)'
comment: '{theme.color.palette.0.comment}'
menu:
background:
value: 'var(--theme-color-palette-3)'
comment: '{theme.color.palette.3.comment}'
item:
text:
value: 'var(--theme-color-palette-0)'
comment: '{theme.color.palette.0.comment}'
bg:
value: 'transparent'
hover-bg:
value: 'rgba(0, 0, 0, 0.05)'
focus-bg:
value: 'rgba(0, 0, 0, 0.1)'
form-field:
background:
value: 'var(--theme-color-palette-4)'
comment: '{theme.color.palette.4.comment}'
placeholder:
value: 'var(--theme-color-action-disabled)'
comment: '{theme.color.action-disabled.comment}'
text:
value: 'var(--theme-color-palette-0)'
comment: '{theme.color.palette.0.comment}'
border:
value: 'var(--theme-color-palette-0)'
comment: '{theme.color.palette.0.comment}'
video:
background:
value: 'var(--theme-color-palette-2)'
comment: '{theme.color.palette.2.comment}'

48
web/style-definitions/tokens/color/owncast-admin.yaml
Unescape View File

@ -1,28 +1,28 @@ @@ -1,28 +1,28 @@
# Values used in the admin and should be migrated to variables or removed.
# See ant-overrides.scss.
owncast-purple:
value: '{color.unknown.value}'
# owncast-purple:
# value: '{color.unknown.value}'
owncast-purple-25:
value: 'rgba(120, 113, 255, 0.25)'
owncast-purple-50:
value: 'rgba(120, 113, 255, 0.5)'
online-color:
value: '#73dd3f'
offline-color:
value: '#999'
pink:
value: '{color.unknown.value}'
purple:
value: '{color.unknown-2.value}'
blue:
value: '{color.unknown.value}'
white-88:
value: '{color.unknown-2.value}'
purple-dark:
value: '{color.unknown.value}'
default-link-color:
value: '{color.owncast.text.bright.value}'
default-bg-color:
value: '{color.owncast.background.primary.value}'
default-text-color:
value: '{color.owncast.text.primary.value}'
# owncast-purple-50:
# value: 'rgba(120, 113, 255, 0.5)'
# online-color:
# value: '#73dd3f'
# offline-color:
# value: '#999'
# pink:
# value: '{color.unknown.value}'
# purple:
# value: '{color.unknown-2.value}'
# blue:
# value: '{color.unknown.value}'
# white-88:
# value: '{color.unknown-2.value}'
# purple-dark:
# value: '{color.unknown.value}'
# default-link-color:
# value: '{color.owncast.text.bright.value}'
# default-bg-color:
# value: '{color.owncast.background.primary.value}'
# default-text-color:
# value: '{color.owncast.text.primary.value}'

75
web/style-definitions/tokens/color/owncast-colors.yaml
Unescape View File

@ -1,9 +1,12 @@ @@ -1,9 +1,12 @@
# These are colors that make up the Owncast-specific color palette.
color:
unknown:
value: '#00FF00'
value: '#7a5cf3'
# this ends up being primary button text
unknown-2:
value: '#FF0000'
value: '#fffffe'
owncast:
# These are the colors assigned to chat users.
# If you add more colors here make sure to add them to
@ -27,25 +30,55 @@ color: @@ -27,25 +30,55 @@ color:
7:
value: 'rgb(244, 11, 244)'
text:
primary:
value: '#030208'
secondary:
value: '#63638E'
highlight:
value: '#030208'
bright:
value: '#5353A6'
background:
highlight:
value: '#F0E678'
primary:
value: '#FFFCF2'
secondary:
value: '#F0EFE4'
rounded-corners:
value: '0.5em'
palette:
0:
value: '#12161d'
comment: 'Dark primary'
1:
value: '#2D3748'
comment: 'Dark secondary'
2:
value: '#000000'
comment: 'Dark alternate'
3:
value: '#e2e8f0'
comment: 'Light primary'
4:
value: '#ffffff'
comment: 'Light secondary'
5:
value: '#c3dafe'
comment: 'Light alternate'
6:
value: '#7a5cf3'
comment: 'Text link/secondary light text'
7:
value: '#5d38f3'
comment: 'Text link hover'
8:
value: '#b6b3c6'
comment: 'Disabled background'
9:
value: '#39373d'
comment: 'Neutral dark'
10:
value: '#707283'
comment: 'Neutral gray light'
11:
value: '#2386e2'
comment: 'Fun color 1'
12:
value: '#da9eff'
comment: 'Fun color 2'
13:
value: '#42bea6'
comment: 'Fun color 3'
error:
value: '#ff4b39'
comment: 'Error'
warning:
value: '#ffc655'
comment: 'Warning'
font:
owncast:

120
web/styles/ant-overrides.scss
Unescape View File

@ -4,36 +4,65 @@ @@ -4,36 +4,65 @@
.ant-btn {
height: 2rem;
padding: 0.3rem 1rem;
background-color: var(--theme-unknown);
font-size: 0.85rem;
font-weight: bold;
border-width: 2px;
border-radius: var(--theme-rounded-corners);
border-color: transparent;
color: var(--theme-unknown-2);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-action);
&:hover,
&:focus {
background-color: var(--theme-primary);
border-color: transparent;
color: var(--theme-unknown-2);
border-color: var(--theme-color-action-hover);
color: var(--theme-color-action-hover);
background-color: var(--theme-color-components-secondary-button-background);
}
&:focus {
border-color: var(--theme-unknown-2);
border-color: var(--theme-color-components-secondary-button-text);
}
&[ant-click-animating-without-extra-node]:after {
animation: 0s !important;
}
}
.ant-btn[disabled] {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
}
}
.ant-btn-primary {
background-color: var(--theme-unknown);
background-color: var(--theme-color-components-primary-button-background);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-background);
&:hover {
background-color: var(--theme-color-action-hover);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-action-hover);
}
&:focus {
background-color: var(--theme-color-action-hover);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-text);
}
}
.ant-btn-primary[disabled] {
background-color: var(--theme-unknown);
color: var(--theme-unknown-2);
&:hover {
background-color: var(--theme-unknown);
background-color: var(--theme-color-components-primary-button-background-disabled);
border-color: var(--theme-color-components-primary-button-border-disabled);
color: var(--theme-color-components-primary-button-text-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-primary-button-background-disabled);
border-color: var(--theme-color-components-primary-button-border-disabled);
color: var(--theme-color-components-primary-button-text-disabled);
}
}
@ -52,5 +81,68 @@ @@ -52,5 +81,68 @@
.ant-dropdown-menu {
border-radius: var(--theme-rounded-corners);
background-color: var(--theme-background-secondary);
background-color: var(--theme-color-components-menu-background);
}
.ant-dropdown-menu-item {
color: var(--theme-color-components-menu-item-text);
&:hover {
background-color: var(--theme-color-components-menu-item-hover-bg);
}
&:focus {
background-color: var(--theme-color-components-menu-item-focus-bg);
}
}
.ant-modal-header {
color: var(--theme-color-components-modal-header-text);
}
.ant-modal-title {
color: var(--theme-color-components-modal-header-text);
}
.ant-modal {
color: var(--theme-color-components-text-on-light);
h1 {
color: var(--theme-color-components-text-on-light);
}
}
.ant-input {
background-color: var(--theme-color-components-form-field-background);
color: var(--theme-color-components-form-field-text);
border-color: var(--theme-color-components-form-field-border);
&::placeholder {
color: var(--theme-color-components-form-field-placeholder);
}
}
.ant-alert-error {
.ant-alert-icon {
color: var(--theme-color-palette-error);
}
.ant-alert-message {
color: var(--theme-color-palette-error);
}
}
.ant-tabs-tab {
padding: var(--content-padding);
background-color: transparent;
border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
font-weight: bold;
& + .ant-tabs-tab {
margin-left: var(--module-spacing);
}
&.ant-tabs-tab-active {
background-color: var(--theme-color-palette-4);
.ant-tabs-tab-btn {
color: var(--theme-color-action);
&:hover {
color: var(--theme-color-action-hover);
}
}
}
}
.ant-tabs-ink-bar {
background-color: var(--theme-color-action);
}

25
web/styles/globals.scss
Unescape View File

@ -1,15 +1,26 @@ @@ -1,15 +1,26 @@
@import '@fontsource/open-sans/variable.css';
@import '@fontsource/open-sans/300.css';
@import '@fontsource/open-sans/400.css';
@import '@fontsource/open-sans/600.css';
@import '@fontsource/open-sans/800.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/600.css';
:root {
--content-padding: 12px;
--module-spacing: 12px; // margin size between lines of stuff, if needed
}
::selection {
background-color: var(--theme-color-palette-12);
}
body {
font-family: var(--theme-text-body-font-family);
font-size: 16px;
line-height: 1.5em;
margin: 0;
color: var(--theme-text-primary);
background-color: var(--theme-background-primary);
background-color: var(--theme-color-background-main);
div,
h1,
@ -20,7 +31,6 @@ body { @@ -20,7 +31,6 @@ body {
h6,
p {
padding: 0;
color: var(--theme-text-primary);
}
h1,
@ -30,6 +40,7 @@ body { @@ -30,6 +40,7 @@ body {
h5,
h6 {
font-family: var(--theme-text-display-font-family);
color: unset; // reset some colors from global.less file
}
h1 {
@ -71,10 +82,10 @@ body { @@ -71,10 +82,10 @@ body {
}
a {
color: var(--theme-text-link);
color: var(--theme-color-action);
&:visited {
color: var(--theme-text-primary);
&:hover {
color: var(--theme-color-palette-12);
}
}

141
web/styles/theme.less
Unescape View File

@ -1,54 +1,85 @@ @@ -1,54 +1,85 @@
// Do not edit directly
// Generated on Tue, 16 Aug 2022 03:27:53 GMT
// Generated on Tue, 30 Aug 2022 06:12:22 GMT
//
// How to edit these values:
// Edit the corresponding token file under the style-definitions directory
// in the Owncast web project.
@text-color: var(--theme-text-primary);
@text-color-secondary: var(--theme-text-secondary);
@link-color: var(--theme-text-link);
@popover-background: var(--theme-background-secondary);
@modal-content-bg: #ff0000;
@background-color-light: var(--theme-background-secondary);
@layout-body-background: var(--theme-background-primary);
@component-background: #00ff00;
@warning-color: #ff0000;
@theme-unknown: #00ff00;
@theme-unknown-2: #ff0000;
@theme-primary: #00ff00; // The primary color of the application used for rendering controls.
@theme-text-primary: #030208; // The color of the text in the application.
@theme-text-secondary: #63638e;
@theme-text-link: #5353a6;
@theme-text-body-font-family: 'Open Sans', 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-text-display-font-family: 'Poppins', 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-primary: #fffcf2; // The main background color of the page.
@theme-background-secondary: #f0efe4; // A secondary background color used in sections and controls.
@theme-rounded-corners: 0.5em;
@theme-user-colors-0: #f40b0b;
@theme-user-colors-1: #f4800b;
@theme-user-colors-2: #f4f40b;
@theme-user-colors-3: #58f40b;
@theme-user-colors-4: #0bf4f4;
@theme-user-colors-5: #0ba6f4;
@theme-user-colors-6: #6666ff;
@theme-user-colors-7: #f40bf4;
@owncast-purple: #00ff00;
@link-color: var(--theme-color-action);
@link-hover-color: var(--theme-color-action-hover);
@modal-header-bg: var(--theme-color-components-modal-header-background);
@modal-content-bg: var(--theme-color-background-main);
@alert-error-bg-color: var(--theme-color-palette-4);
@alert-error-border-color: var(--theme-color-palette-error);
@popover-background: var(--theme-color-components-menu-background);
@theme-rounded-corners: 0.5rem; // How much corners are rounded in places in the UI.
@theme-unknown-1: green; // This should never be used and it means something is wrong.
@theme-unknown-2: red; // This should never be used and it means something is wrong.
@theme-color-users-0: var(--color-owncast-user-0);
@theme-color-users-1: var(--color-owncast-user-1);
@theme-color-users-2: var(--color-owncast-user-2);
@theme-color-users-3: var(--color-owncast-user-3);
@theme-color-users-4: var(--color-owncast-user-4);
@theme-color-users-5: var(--color-owncast-user-5);
@theme-color-users-6: var(--color-owncast-user-6);
@theme-color-users-7: var(--color-owncast-user-7);
@theme-color-palette-0: var(--color-owncast-palette-0); // Dark primary
@theme-color-palette-1: var(--color-owncast-palette-1); // Dark secondary
@theme-color-palette-2: var(--color-owncast-palette-2); // Dark alternate
@theme-color-palette-3: var(--color-owncast-palette-3); // Light primary
@theme-color-palette-4: var(--color-owncast-palette-4); // Light secondary
@theme-color-palette-5: var(--color-owncast-palette-5); // Light alternate
@theme-color-palette-6: var(--color-owncast-palette-6); // Text link/secondary light text
@theme-color-palette-7: var(--color-owncast-palette-7); // Text link hover
@theme-color-palette-8: var(--color-owncast-palette-8); // Disabled background
@theme-color-palette-9: var(--color-owncast-palette-9); // Neutral dark
@theme-color-palette-10: var(--color-owncast-palette-10); // Neutral gray light
@theme-color-palette-11: var(--color-owncast-palette-11); // Fun color 1
@theme-color-palette-12: var(--color-owncast-palette-12); // Fun color 2
@theme-color-palette-13: var(--color-owncast-palette-13); // Fun color 3
@theme-color-palette-error: var(--color-owncast-palette-error); // Error
@theme-color-palette-warning: var(--color-owncast-palette-warning); // Warning
@theme-color-background-main: var(--theme-color-palette-3); // Light primary
@theme-color-background-header: var(--theme-color-palette-0); // Dark primary
@theme-color-action: var(--theme-color-palette-6); // Text link/secondary light text
@theme-color-action-hover: var(--theme-color-palette-7); // Text link hover
@theme-color-action-disabled: var(--theme-color-palette-8); // Disabled background
@theme-color-error: var(--theme-color-palette-error); // Error
@theme-color-warning: var(--theme-color-palette-warning); // Warning
@theme-color-components-text-on-light: var(--theme-color-palette-0); // Dark primary
@theme-color-components-text-on-dark: var(--theme-color-palette-3); // Light primary
@theme-color-components-primary-button-background: var(--theme-color-action); // Text link/secondary light text
@theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-primary-button-text: var(--theme-color-palette-4); // Light secondary
@theme-color-components-primary-button-text-disabled: var(--theme-color-palette-10); // Neutral gray light
@theme-color-components-primary-button-border: var(--theme-color-palette-4); // Light secondary
@theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-secondary-button-background: var(--theme-color-palette-4); // Light secondary
@theme-color-components-secondary-button-background-disabled: transparent;
@theme-color-components-secondary-button-text: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-secondary-button-border: var(--theme-color-action); // Text link/secondary light text
@theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-chat-background: var(--theme-color-palette-1); // Dark secondary
@theme-color-components-chat-text: var(--theme-color-palette-3); // Light primary
@theme-color-components-modal-header-background: var(--theme-color-palette-1); // Dark secondary
@theme-color-components-modal-header-text: var(--theme-color-palette-3); // Light primary
@theme-color-components-modal-content-background: var(--theme-color-palette-3); // Light primary
@theme-color-components-modal-content-text: var(--theme-color-palette-0); // Dark primary
@theme-color-components-menu-background: var(--theme-color-palette-3); // Light primary
@theme-color-components-menu-item-text: var(--theme-color-palette-0); // Dark primary
@theme-color-components-menu-item-bg: transparent;
@theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05);
@theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1);
@theme-color-components-form-field-background: var(--theme-color-palette-4); // Light secondary
@theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-form-field-text: var(--theme-color-palette-0); // Dark primary
@theme-color-components-form-field-border: var(--theme-color-palette-0); // Dark primary
@theme-color-components-video-background: var(--theme-color-palette-2); // Dark alternate
@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: #00ff00;
@purple: #ff0000;
@blue: #00ff00;
@white-88: #ff0000;
@purple-dark: #00ff00;
@default-link-color: #5353a6;
@default-bg-color: #fffcf2;
@default-text-color: #030208;
@color-unknown: #00ff00;
@color-unknown-2: #ff0000;
@color-unknown: #7a5cf3;
@color-unknown-2: #fffffe;
@color-owncast-user-0: #f40b0b;
@color-owncast-user-1: #f4800b;
@color-owncast-user-2: #f4f40b;
@ -57,13 +88,21 @@ @@ -57,13 +88,21 @@
@color-owncast-user-5: #0ba6f4;
@color-owncast-user-6: #6666ff;
@color-owncast-user-7: #f40bf4;
@color-owncast-text-primary: #030208;
@color-owncast-text-secondary: #63638e;
@color-owncast-text-highlight: #030208;
@color-owncast-text-bright: #5353a6;
@color-owncast-background-highlight: #f0e678;
@color-owncast-background-primary: #fffcf2;
@color-owncast-background-secondary: #f0efe4;
@rounded-corners: 0.5em;
@color-owncast-palette-0: #12161d; // Dark primary
@color-owncast-palette-1: #2d3748; // Dark secondary
@color-owncast-palette-2: #000000; // Dark alternate
@color-owncast-palette-3: #e2e8f0; // Light primary
@color-owncast-palette-4: #ffffff; // Light secondary
@color-owncast-palette-5: #c3dafe; // Light alternate
@color-owncast-palette-6: #7a5cf3; // Text link/secondary light text
@color-owncast-palette-7: #5d38f3; // Text link hover
@color-owncast-palette-8: #b6b3c6; // Disabled background
@color-owncast-palette-9: #39373d; // Neutral dark
@color-owncast-palette-10: #707283; // Neutral gray light
@color-owncast-palette-11: #2386e2; // Fun color 1
@color-owncast-palette-12: #da9eff; // Fun color 2
@color-owncast-palette-13: #42bea6; // Fun color 3
@color-owncast-palette-error: #ff4b39; // Error
@color-owncast-palette-warning: #ffc655; // Warning
@font-owncast-body: 'Open Sans', 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-display: 'Poppins', 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';

173
web/styles/variables.css
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Tue, 16 Aug 2022 03:27:53 GMT
* Generated on Tue, 30 Aug 2022 06:12:22 GMT
*
* How to edit these values:
* Edit the corresponding token file under the style-definitions directory
@ -8,53 +8,108 @@ @@ -8,53 +8,108 @@
*/
:root {
--text-color: var(--theme-text-primary);
--text-color-secondary: var(--theme-text-secondary);
--link-color: var(--theme-text-link);
--popover-background: var(--theme-background-secondary);
--modal-content-bg: #ff0000;
--background-color-light: var(--theme-background-secondary);
--layout-body-background: var(--theme-background-primary);
--component-background: #00ff00;
--warning-color: #ff0000;
--theme-unknown: #00ff00;
--theme-unknown-2: #ff0000;
--theme-primary: #00ff00; /* The primary color of the application used for rendering controls. */
--theme-text-primary: #030208; /* The color of the text in the application. */
--theme-text-secondary: #63638e;
--theme-text-link: #5353a6;
--theme-text-body-font-family: 'Open Sans', 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-text-display-font-family: 'Poppins', 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-primary: #fffcf2; /* The main background color of the page. */
--theme-background-secondary: #f0efe4; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 0.5em;
--theme-user-colors-0: #f40b0b;
--theme-user-colors-1: #f4800b;
--theme-user-colors-2: #f4f40b;
--theme-user-colors-3: #58f40b;
--theme-user-colors-4: #0bf4f4;
--theme-user-colors-5: #0ba6f4;
--theme-user-colors-6: #6666ff;
--theme-user-colors-7: #f40bf4;
--owncast-purple: #00ff00;
--link-color: var(--theme-color-action);
--link-hover-color: var(--theme-color-action-hover);
--modal-header-bg: var(--theme-color-components-modal-header-background);
--modal-content-bg: var(--theme-color-background-main);
--alert-error-bg-color: var(--theme-color-palette-4);
--alert-error-border-color: var(--theme-color-palette-error);
--popover-background: var(--theme-color-components-menu-background);
--theme-rounded-corners: 0.5rem; /* How much corners are rounded in places in the UI. */
--theme-unknown-1: green; /* This should never be used and it means something is wrong. */
--theme-unknown-2: red; /* This should never be used and it means something is wrong. */
--theme-color-users-0: var(--color-owncast-user-0);
--theme-color-users-1: var(--color-owncast-user-1);
--theme-color-users-2: var(--color-owncast-user-2);
--theme-color-users-3: var(--color-owncast-user-3);
--theme-color-users-4: var(--color-owncast-user-4);
--theme-color-users-5: var(--color-owncast-user-5);
--theme-color-users-6: var(--color-owncast-user-6);
--theme-color-users-7: var(--color-owncast-user-7);
--theme-color-palette-0: var(--color-owncast-palette-0); /* Dark primary */
--theme-color-palette-1: var(--color-owncast-palette-1); /* Dark secondary */
--theme-color-palette-2: var(--color-owncast-palette-2); /* Dark alternate */
--theme-color-palette-3: var(--color-owncast-palette-3); /* Light primary */
--theme-color-palette-4: var(--color-owncast-palette-4); /* Light secondary */
--theme-color-palette-5: var(--color-owncast-palette-5); /* Light alternate */
--theme-color-palette-6: var(--color-owncast-palette-6); /* Text link/secondary light text */
--theme-color-palette-7: var(--color-owncast-palette-7); /* Text link hover */
--theme-color-palette-8: var(--color-owncast-palette-8); /* Disabled background */
--theme-color-palette-9: var(--color-owncast-palette-9); /* Neutral dark */
--theme-color-palette-10: var(--color-owncast-palette-10); /* Neutral gray light */
--theme-color-palette-11: var(--color-owncast-palette-11); /* Fun color 1 */
--theme-color-palette-12: var(--color-owncast-palette-12); /* Fun color 2 */
--theme-color-palette-13: var(--color-owncast-palette-13); /* Fun color 3 */
--theme-color-palette-error: var(--color-owncast-palette-error); /* Error */
--theme-color-palette-warning: var(--color-owncast-palette-warning); /* Warning */
--theme-color-background-main: var(--theme-color-palette-3); /* Light primary */
--theme-color-background-header: var(--theme-color-palette-0); /* Dark primary */
--theme-color-action: var(--theme-color-palette-6); /* Text link/secondary light text */
--theme-color-action-hover: var(--theme-color-palette-7); /* Text link hover */
--theme-color-action-disabled: var(--theme-color-palette-8); /* Disabled background */
--theme-color-error: var(--theme-color-palette-error); /* Error */
--theme-color-warning: var(--theme-color-palette-warning); /* Warning */
--theme-color-components-text-on-light: var(--theme-color-palette-0); /* Dark primary */
--theme-color-components-text-on-dark: var(--theme-color-palette-3); /* Light primary */
--theme-color-components-primary-button-background: var(
--theme-color-action
); /* Text link/secondary light text */
--theme-color-components-primary-button-background-disabled: var(
--theme-color-action-disabled
); /* Disabled background */
--theme-color-components-primary-button-text: var(--theme-color-palette-4); /* Light secondary */
--theme-color-components-primary-button-text-disabled: var(
--theme-color-palette-10
); /* Neutral gray light */
--theme-color-components-primary-button-border: var(
--theme-color-palette-4
); /* Light secondary */
--theme-color-components-primary-button-border-disabled: var(
--theme-color-action-disabled
); /* Disabled background */
--theme-color-components-secondary-button-background: var(
--theme-color-palette-4
); /* Light secondary */
--theme-color-components-secondary-button-background-disabled: transparent;
--theme-color-components-secondary-button-text: var(
--theme-color-action-disabled
); /* Disabled background */
--theme-color-components-secondary-button-text-disabled: var(
--theme-color-action-disabled
); /* Disabled background */
--theme-color-components-secondary-button-border: var(
--theme-color-action
); /* Text link/secondary light text */
--theme-color-components-secondary-button-border-disabled: var(
--theme-color-action-disabled
); /* Disabled background */
--theme-color-components-chat-background: var(--theme-color-palette-1); /* Dark secondary */
--theme-color-components-chat-text: var(--theme-color-palette-3); /* Light primary */
--theme-color-components-modal-header-background: var(
--theme-color-palette-1
); /* Dark secondary */
--theme-color-components-modal-header-text: var(--theme-color-palette-3); /* Light primary */
--theme-color-components-modal-content-background: var(
--theme-color-palette-3
); /* Light primary */
--theme-color-components-modal-content-text: var(--theme-color-palette-0); /* Dark primary */
--theme-color-components-menu-background: var(--theme-color-palette-3); /* Light primary */
--theme-color-components-menu-item-text: var(--theme-color-palette-0); /* Dark primary */
--theme-color-components-menu-item-bg: transparent;
--theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05);
--theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1);
--theme-color-components-form-field-background: var(
--theme-color-palette-4
); /* Light secondary */
--theme-color-components-form-field-placeholder: var(
--theme-color-action-disabled
); /* Disabled background */
--theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */
--theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */
--theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */
--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: #00ff00;
--purple: #ff0000;
--blue: #00ff00;
--white-88: #ff0000;
--purple-dark: #00ff00;
--default-link-color: #5353a6;
--default-bg-color: #fffcf2;
--default-text-color: #030208;
--color-unknown: #00ff00;
--color-unknown-2: #ff0000;
--color-unknown: #7a5cf3;
--color-unknown-2: #fffffe;
--color-owncast-user-0: #f40b0b;
--color-owncast-user-1: #f4800b;
--color-owncast-user-2: #f4f40b;
@ -63,14 +118,22 @@ @@ -63,14 +118,22 @@
--color-owncast-user-5: #0ba6f4;
--color-owncast-user-6: #6666ff;
--color-owncast-user-7: #f40bf4;
--color-owncast-text-primary: #030208;
--color-owncast-text-secondary: #63638e;
--color-owncast-text-highlight: #030208;
--color-owncast-text-bright: #5353a6;
--color-owncast-background-highlight: #f0e678;
--color-owncast-background-primary: #fffcf2;
--color-owncast-background-secondary: #f0efe4;
--rounded-corners: 0.5em;
--color-owncast-palette-0: #12161d; /* Dark primary */
--color-owncast-palette-1: #2d3748; /* Dark secondary */
--color-owncast-palette-2: #000000; /* Dark alternate */
--color-owncast-palette-3: #e2e8f0; /* Light primary */
--color-owncast-palette-4: #ffffff; /* Light secondary */
--color-owncast-palette-5: #c3dafe; /* Light alternate */
--color-owncast-palette-6: #7a5cf3; /* Text link/secondary light text */
--color-owncast-palette-7: #5d38f3; /* Text link hover */
--color-owncast-palette-8: #b6b3c6; /* Disabled background */
--color-owncast-palette-9: #39373d; /* Neutral dark */
--color-owncast-palette-10: #707283; /* Neutral gray light */
--color-owncast-palette-11: #2386e2; /* Fun color 1 */
--color-owncast-palette-12: #da9eff; /* Fun color 2 */
--color-owncast-palette-13: #42bea6; /* Fun color 3 */
--color-owncast-palette-error: #ff4b39; /* Error */
--color-owncast-palette-warning: #ffc655; /* Warning */
--font-owncast-body: 'Open Sans', 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';

18
web/styles/variables.scss
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
@import "@fontsource/open-sans";
@import "@fontsource/poppins";
@import '@fontsource/open-sans';
@import '@fontsource/poppins';
// See theme.less for specific Ant Design overrides.
:root {
@ -75,21 +75,7 @@ @@ -75,21 +75,7 @@
--container-bg-color-alt: var(--purple-dark);
--container-border-radius: 4px;
--code-color: #9cdcfe;
--code-bg-color: var(--owncast-purple-25);
--nav-bg-color: var(--gray-dark);
--nav-text: #aaa;
--nav-selected-text: var(--pink); //#cd7cff;
--button-focused: var(--owncast-purple-50);
--textfield-border: var(--white-25);
--textfield-bg: var(--black);
//
--popover-base-color: var(--gray);
--tooltip-base-color: var(--gray-medium);
--font-family: var(--theme-font-family);
}

Write Preview
Loading…
Cancel
Save