mirror of
https://github.com/owncast/owncast.git
synced 2024-11-22 04:40:37 +03:00
Some additional style overrides
This commit is contained in:
Gabe Kangas
parent
e037655ab2
commit
5b29abd42d
3 changed files with 101 additions and 56 deletions
|
|
@ -16,3 +16,44 @@ alert-error-border-color:
|
|||
value: 'var(--theme-color-palette-error)'
|
||||
popover-background:
|
||||
value: 'var(--theme-color-components-menu-background)'
|
||||
|
||||
# This values need to be statically assigned at build time and cannot be
|
||||
# overridden by the user at runtime.
|
||||
primary-color:
|
||||
value: '{color.owncast.palette.6.value}'
|
||||
comment: '{color.owncast.palette.6.comment}'
|
||||
primary-color-hover:
|
||||
value: '{color.owncast.palette.11.value}'
|
||||
comment: '{color.owncast.palette.11.comment}'
|
||||
primary-color-active:
|
||||
value: '{color.owncast.palette.7.value}'
|
||||
comment: '{color.owncast.palette.7.comment}'
|
||||
|
||||
primary-1:
|
||||
value: '{color.owncast.palette.6.value}'
|
||||
comment: '{color.owncast.palette.6.comment}'
|
||||
primary-2:
|
||||
value: '{color.owncast.palette.11.value}'
|
||||
comment: '{color.owncast.palette.11.comment}'
|
||||
primary-3:
|
||||
value: '{color.owncast.palette.7.value}'
|
||||
comment: '{color.owncast.palette.7.comment}'
|
||||
primary-4:
|
||||
value: '{color.owncast.palette.12.value}'
|
||||
comment: '{color.owncast.palette.12.comment}'
|
||||
primary-5:
|
||||
value: '{color.owncast.palette.6.value}'
|
||||
comment: '{color.owncast.palette.6.comment}'
|
||||
primary-6:
|
||||
value: '{color.owncast.palette.11.value}'
|
||||
comment: '{color.owncast.palette.11.comment}'
|
||||
primary-7:
|
||||
value: '{color.owncast.palette.7.value}'
|
||||
comment: '{color.owncast.palette.7.comment}'
|
||||
primary-8:
|
||||
value: '{color.owncast.palette.12.value}'
|
||||
comment: '{color.owncast.palette.12.comment}'
|
||||
|
||||
component-background:
|
||||
value: '{color.owncast.palette.1.value}'
|
||||
comment: '{color.owncast.palette.1.comment}'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
// Do not edit directly
|
||||
// Generated on Tue, 30 Aug 2022 17:56:21 GMT
|
||||
// Generated on Sun, 11 Sep 2022 00:27:11 GMT
|
||||
//
|
||||
// How to edit these values:
|
||||
// Edit the corresponding token file under the style-definitions directory
|
||||
|
|
@ -13,6 +13,26 @@
|
|||
@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);
|
||||
@primary-color: #7a5cf3; // Text link/secondary light text
|
||||
@primary-color-hover: #2386e2; // Fun color 1
|
||||
@primary-color-active: #5d38f3; // Text link hover
|
||||
@primary-1: #7a5cf3; // Text link/secondary light text
|
||||
@primary-2: #2386e2; // Fun color 1
|
||||
@primary-3: #5d38f3; // Text link hover
|
||||
@primary-4: #da9eff; // Fun color 2
|
||||
@primary-5: #7a5cf3; // Text link/secondary light text
|
||||
@primary-6: #2386e2; // Fun color 1
|
||||
@primary-7: #5d38f3; // Text link hover
|
||||
@primary-8: #da9eff; // Fun color 2
|
||||
@blue-1: #7a5cf3; // Text link/secondary light text
|
||||
@blue-2: #2386e2; // Fun color 1
|
||||
@blue-3: #5d38f3; // Text link hover
|
||||
@blue-4: #da9eff; // Fun color 2
|
||||
@blue-5: #7a5cf3; // Text link/secondary light text
|
||||
@blue-6: #2386e2; // Fun color 1
|
||||
@blue-7: #5d38f3; // Text link hover
|
||||
@blue-8: #da9eff; // Fun color 2
|
||||
@component-background: #2d3748; // Dark secondary
|
||||
@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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* Do not edit directly
|
||||
* Generated on Tue, 30 Aug 2022 17:56:21 GMT
|
||||
* Generated on Sun, 11 Sep 2022 00:27:11 GMT
|
||||
*
|
||||
* How to edit these values:
|
||||
* Edit the corresponding token file under the style-definitions directory
|
||||
|
|
@ -15,15 +15,31 @@
|
|||
--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);
|
||||
--primary-color: #7a5cf3; /* Text link/secondary light text */
|
||||
--primary-color-hover: #2386e2; /* Fun color 1 */
|
||||
--primary-color-active: #5d38f3; /* Text link hover */
|
||||
--primary-1: #7a5cf3; /* Text link/secondary light text */
|
||||
--primary-2: #2386e2; /* Fun color 1 */
|
||||
--primary-3: #5d38f3; /* Text link hover */
|
||||
--primary-4: #da9eff; /* Fun color 2 */
|
||||
--primary-5: #7a5cf3; /* Text link/secondary light text */
|
||||
--primary-6: #2386e2; /* Fun color 1 */
|
||||
--primary-7: #5d38f3; /* Text link hover */
|
||||
--primary-8: #da9eff; /* Fun color 2 */
|
||||
--blue-1: #7a5cf3; /* Text link/secondary light text */
|
||||
--blue-2: #2386e2; /* Fun color 1 */
|
||||
--blue-3: #5d38f3; /* Text link hover */
|
||||
--blue-4: #da9eff; /* Fun color 2 */
|
||||
--blue-5: #7a5cf3; /* Text link/secondary light text */
|
||||
--blue-6: #2386e2; /* Fun color 1 */
|
||||
--blue-7: #5d38f3; /* Text link hover */
|
||||
--blue-8: #da9eff; /* Fun color 2 */
|
||||
--component-background: #2d3748; /* Dark secondary */
|
||||
--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-text-body-font-family: var(
|
||||
--font-owncast-body
|
||||
); /* The font family used for the body text. */
|
||||
--theme-text-display-font-family: var(
|
||||
--font-owncast-display
|
||||
); /* The font family used for the display/header text. */
|
||||
--theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */
|
||||
--theme-text-display-font-family: var(--font-owncast-display); /* The font family used for the display/header text. */
|
||||
--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);
|
||||
|
|
@ -57,59 +73,31 @@
|
|||
--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-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-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-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-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-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-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 */
|
||||
|
|
@ -140,10 +128,6 @@
|
|||
--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';
|
||||
--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';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue