mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 04:40:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make statusbar dark

Browse source
This commit is contained in:
Gabe Kangas 2023-01-18 19:03:55 -08:00
parent 12eb0eed1d
commit 2b46bb5b6d
No known key found for this signature in database
GPG key ID: 4345B2060657F330
5 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/.storybook/stories-category-doc-pages/Colors.stories.mdx
View file

@ -72,6 +72,8 @@ These color names are assigned to specific component variables. They can be over
'theme-color-components-form-field-placeholder',
'theme-color-components-form-field-text',
'theme-color-components-form-field-border',
'theme-color-components-video-status-bar-background',
'theme-color-components-video-status-bar-foreground',
]}
/>

6
web/components/ui/Statusbar/Statusbar.module.scss
View file

@ -6,8 +6,8 @@
height: 2rem;
width: 100%;
padding: var(--content-padding);
color: var(--theme-color-components-text-on-light);
background-color: var(--component-background);
color: var(--theme-color-components-video-status-bar-foreground);
background-color: var(--theme-color-components-video-status-bar-background);
font-family: var(--theme-text-display-font-family);
font-weight: 600;
font-weight: 500;
}

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

@ -237,3 +237,10 @@ theme:
live-indicator:
value: 'var(--theme-color-palette-7)'
comment: 'The Live dot indicator in the control bar of the video player'
status-bar:
background:
value: 'var(--theme-color-palette-2)'
comment: 'The background color of the video status bar'
foreground:
value: 'var(--theme-color-palette-4)'
comment: 'The foreground color of the video status bar'

4
web/styles/theme.less
View file

@ -1,6 +1,6 @@
// Do not edit directly
// Generated on Wed, 18 Jan 2023 23:58:29 GMT
// Generated on Thu, 19 Jan 2023 00:03:35 GMT
//
// How to edit these values:
// Edit the corresponding token file under the style-definitions directory
@ -101,6 +101,8 @@
@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
@theme-color-components-video-live-indicator: var(--theme-color-palette-7); // The Live dot indicator in the control bar of the video player
@theme-color-components-video-status-bar-background: var(--theme-color-palette-2); // The background color of the video status bar
@theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); // The foreground color of the video status bar
@owncast-purple-25: rgba(120, 113, 255, 0.25);
@color-unknown: #7a5cf3;
@color-unknown-2: #fffffe;

4
web/styles/variables.css
View file

@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Wed, 18 Jan 2023 23:58:29 GMT
* Generated on Thu, 19 Jan 2023 00:03:35 GMT
*
* How to edit these values:
* Edit the corresponding token file under the style-definitions directory
@ -103,6 +103,8 @@
--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 */
--theme-color-components-video-live-indicator: var(--theme-color-palette-7); /* The Live dot indicator in the control bar of the video player */
--theme-color-components-video-status-bar-background: var(--theme-color-palette-2); /* The background color of the video status bar */
--theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); /* The foreground color of the video status bar */
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--color-unknown: #7a5cf3;
--color-unknown-2: #fffffe;