LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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-placeholder',
'theme-color-components-form-field-text', 'theme-color-components-form-field-text',
'theme-color-components-form-field-border', '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; height: 2rem;
width: 100%; width: 100%;
padding: var(--content-padding); padding: var(--content-padding);
color: var(--theme-color-components-text-on-light); color: var(--theme-color-components-video-status-bar-foreground);
background-color: var(--component-background); background-color: var(--theme-color-components-video-status-bar-background);
font-family: var(--theme-text-display-font-family); 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: live-indicator:
value: 'var(--theme-color-palette-7)' value: 'var(--theme-color-palette-7)'
comment: 'The Live dot indicator in the control bar of the video player' 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 // 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: // How to edit these values:
// Edit the corresponding token file under the style-definitions directory // 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-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-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-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); @owncast-purple-25: rgba(120, 113, 255, 0.25);
@color-unknown: #7a5cf3; @color-unknown: #7a5cf3;
@color-unknown-2: #fffffe; @color-unknown-2: #fffffe;

4
web/styles/variables.css
View File

@ -1,6 +1,6 @@
/** /**
* Do not edit directly * 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: * How to edit these values:
* Edit the corresponding token file under the style-definitions directory * 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-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-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-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); --owncast-purple-25: rgba(120, 113, 255, 0.25);
--color-unknown: #7a5cf3; --color-unknown: #7a5cf3;
--color-unknown-2: #fffffe; --color-unknown-2: #fffffe;