mirror of
https://github.com/owncast/owncast.git
synced 2024-11-24 13:50:06 +03:00
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>
This commit is contained in:
gingervitis
GitHub
parent
a0a28fa572
commit
d5fa81f76e
32 changed files with 817 additions and 325 deletions
|
|
@ -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({
|
|||
return (
|
||||
<>
|
||||
<Button
|
||||
type="primary"
|
||||
type={primary ? 'primary' : 'default'}
|
||||
className={`${s.button}`}
|
||||
onClick={buttonClicked}
|
||||
style={{ backgroundColor: color }}
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.root {
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.buttonsLogoTitleSection {
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
.root {
|
||||
button {
|
||||
border: none;
|
||||
.ant-space {
|
||||
.ant-space-item {
|
||||
color: var(--theme-unknown-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
lastDisconnectTime={lastDisconnectTime}
|
||||
viewerCount={viewerCount}
|
||||
/>
|
||||
</div>
|
||||
<div className={s.midSection}>
|
||||
<div className={s.buttonsLogoTitleSection}>
|
||||
<ActionButtonRow>
|
||||
{externalActionButtons}
|
||||
|
|
@ -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%' }}>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@
|
|||
display: block;
|
||||
height: 100%;
|
||||
padding: 2vw;
|
||||
background-color: var(--theme-color-components-modal-content-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
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
|
|||
flex-grow: 1 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
.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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
const colorDescriptionStyle = {
|
||||
margin: '5px',
|
||||
color: 'gray',
|
||||
fontSize: '0.9vw',
|
||||
fontSize: '0.95vw',
|
||||
textAlign: 'center' as 'center',
|
||||
lineHeight: 1.0,
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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)'
|
||||
|
|
|
|||
|
|
@ -4,51 +4,211 @@
|
|||
# The fewer there are the easier it'll be easier to customize and document.
|
||||
|
||||
theme:
|
||||
unknown:
|
||||
value: '{color.unknown.value}'
|
||||
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.'
|
||||
|
||||
rounded-corners:
|
||||
value: '{rounded-corners.value}'
|
||||
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: '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)'
|
||||
|
||||
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}'
|
||||
|
|
|
|||
|
|
@ -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}'
|
||||
|
|
|
|||
|
|
@ -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:
|
|||
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:
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
|
||||
.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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
h6,
|
||||
p {
|
||||
padding: 0;
|
||||
color: var(--theme-text-primary);
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -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 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-text-link);
|
||||
color: var(--theme-color-action);
|
||||
|
||||
&:visited {
|
||||
color: var(--theme-text-primary);
|
||||
&:hover {
|
||||
color: var(--theme-color-palette-12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
@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';
|
||||
|
|
@ -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 @@
|
|||
*/
|
||||
|
||||
: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 @@
|
|||
--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';
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
--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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue