mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-12-28 12:08:32 +03:00
Code Issues Projects Releases Packages Wiki Activity
owncast/web/styles/theme.less

135 lines
9.1 KiB
Text
Raw Normal View History

Add notification reminder popup component
2022-05-17 06:06:48 +03:00
Use the generated style variables
2022-05-07 09:32:33 +03:00
// Do not edit directly
Use action color for live video indicator. Closes #2890
2023-04-01 07:46:52 +03:00
// Generated on Sat, 01 Apr 2023 04:45:16 GMT
Use a numbered pre-named set of user colors instead of random. Closes #1974
2022-06-29 04:55:21 +03:00
//
// How to edit these values:
Minor styling changes
2022-07-10 09:56:31 +03:00
// Edit the corresponding token file under the style-definitions directory
Use a numbered pre-named set of user colors instead of random. Closes #1974
2022-06-29 04:55:21 +03:00
// in the Owncast web project.
Add inter font to project
2022-04-20 00:33:43 +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>
2022-08-30 09:17:12 +03:00
@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);
Additional style tweaks
2022-09-11 04:48:32 +03:00
@tag-default-color: var(--theme-color-action);
@border-radius-base: var(--theme-rounded-corners);
@background-color-light: var(--theme-color-background-main);
Fix modal close icon color
2022-09-11 08:33:46 +03:00
@modal-close-color: var(--theme-color-background-main);
Tweak color to be meet a11y requirements
2023-01-30 01:04:37 +03:00
@primary-color: #6544e9; // Text link/secondary light text
Some additional style overrides
2022-09-11 04:06:57 +03:00
@primary-color-hover: #2386e2; // Fun color 1
Tweak color to be meet a11y requirements
2023-01-30 01:04:37 +03:00
@primary-color-active: #7a5cf3; // Text link hover
@primary-1: #6544e9; // Text link/secondary light text
Some additional style overrides
2022-09-11 04:06:57 +03:00
@primary-2: #2386e2; // Fun color 1
Tweak color to be meet a11y requirements
2023-01-30 01:04:37 +03:00
@primary-3: #7a5cf3; // Text link hover
Some additional style overrides
2022-09-11 04:06:57 +03:00
@primary-4: #da9eff; // Fun color 2
Tweak color to be meet a11y requirements
2023-01-30 01:04:37 +03:00
@primary-5: #6544e9; // Text link/secondary light text
Some additional style overrides
2022-09-11 04:06:57 +03:00
@primary-6: #2386e2; // Fun color 1
Tweak color to be meet a11y requirements
2023-01-30 01:04:37 +03:00
@primary-7: #7a5cf3; // Text link hover
Some additional style overrides
2022-09-11 04:06:57 +03:00
@primary-8: #da9eff; // Fun color 2
Additional style tweaks
2022-09-11 04:48:32 +03:00
@component-background: #e2e8f0; // Light primary
@body-background: #e2e8f0; // Light primary
Add appearance setting for rounded corners. Closes #2471
2022-12-21 10:55:07 +03:00
@theme-rounded-corners: 9px; // How much corners are rounded in places in the UI.
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>
2022-08-30 09:17:12 +03:00
@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.
Fix font not being defined
2022-08-30 20:58:01 +03:00
@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.
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>
2022-08-30 09:17:12 +03:00
@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
Add and use additional light background color for custom page content
2022-10-10 04:41:52 +03:00
@theme-color-palette-14: var(--color-owncast-palette-14); // Light background
Support color customization from the admin (#2338) * Add user-customizable theming. Closes #1915 * Prettified Code! * Add user-customizable theming. Closes #1915 * Add explicit color for page content background * Prettified Code! Co-authored-by: gabek <gabek@users.noreply.github.com>
2022-11-13 07:26:55 +03:00
@theme-color-palette-15: var(--color-owncast-palette-15); // Lighter background
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>
2022-08-30 09:17:12 +03:00
@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
Support color customization from the admin (#2338) * Add user-customizable theming. Closes #1915 * Prettified Code! * Add user-customizable theming. Closes #1915 * Add explicit color for page content background * Prettified Code! Co-authored-by: gabek <gabek@users.noreply.github.com>
2022-11-13 07:26:55 +03:00
@theme-color-background-light: var(--theme-color-palette-3); // Light primary
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>
2022-08-30 09:17:12 +03:00
@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
Fix customized button border color
2023-01-21 10:22:45 +03:00
@theme-color-components-primary-button-border: var(--theme-color-action); // Light secondary
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>
2022-08-30 09:17:12 +03:00
@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
Make chat background dark
2023-01-19 06:16:03 +03:00
@theme-color-components-chat-background: var(--theme-color-palette-1); // Dark primary
@theme-color-components-chat-text: var(--theme-color-palette-15); // Lighter background
Support color customization from the admin (#2338) * Add user-customizable theming. Closes #1915 * Prettified Code! * Add user-customizable theming. Closes #1915 * Add explicit color for page content background * Prettified Code! Co-authored-by: gabek <gabek@users.noreply.github.com>
2022-11-13 07:26:55 +03:00
@theme-color-components-content-background: var(--theme-color-palette-15); // Lighter background
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>
2022-08-30 09:17:12 +03:00
@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
Use action color for live video indicator. Closes #2890
2023-04-01 07:46:52 +03:00
@theme-color-components-video-live-indicator: var(--theme-color-action); // The Live dot indicator in the control bar of the video player
Make statusbar dark
2023-01-19 06:03:55 +03:00
@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
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>
2022-08-30 09:17:12 +03:00
@color-unknown: #7a5cf3;
@color-unknown-2: #fffffe;
Change chat user display colors to meet a11y guidelines
2023-01-29 04:29:56 +03:00
@color-owncast-user-0: #ff717b;
@color-owncast-user-1: #f4e413;
@color-owncast-user-2: #b99c45;
Standardize color ids
2022-08-16 06:29:09 +03:00
@color-owncast-user-3: #58f40b;
@color-owncast-user-4: #0bf4f4;
Change another user display color to meet a11y requirements
2023-01-30 01:13:12 +03:00
@color-owncast-user-5: #16a8f7;
Change chat user display colors to meet a11y guidelines
2023-01-29 04:29:56 +03:00
@color-owncast-user-6: #9a92ff;
@color-owncast-user-7: #ff53ff;
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>
2022-08-30 09:17:12 +03:00
@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
Tweak color to be meet a11y requirements
2023-01-30 01:04:37 +03:00
@color-owncast-palette-6: #6544e9; // Text link/secondary light text
@color-owncast-palette-7: #7a5cf3; // Text link hover
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>
2022-08-30 09:17:12 +03:00
@color-owncast-palette-8: #b6b3c6; // Disabled background
@color-owncast-palette-9: #39373d; // Neutral dark
Regenerate styles
2023-01-25 05:51:11 +03:00
@color-owncast-palette-10: #5d5f72; // Neutral gray light
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>
2022-08-30 09:17:12 +03:00
@color-owncast-palette-11: #2386e2; // Fun color 1
@color-owncast-palette-12: #da9eff; // Fun color 2
@color-owncast-palette-13: #42bea6; // Fun color 3
Add and use additional light background color for custom page content
2022-10-10 04:41:52 +03:00
@color-owncast-palette-14: #f0f3f8; // Light background
Support color customization from the admin (#2338) * Add user-customizable theming. Closes #1915 * Prettified Code! * Add user-customizable theming. Closes #1915 * Add explicit color for page content background * Prettified Code! Co-authored-by: gabek <gabek@users.noreply.github.com>
2022-11-13 07:26:55 +03:00
@color-owncast-palette-15: #eff1f4; // Lighter background
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>
2022-08-30 09:17:12 +03:00
@color-owncast-palette-error: #ff4b39; // Error
@color-owncast-palette-warning: #ffc655; // Warning
Recreate theme variables with new style values
2022-07-10 22:15:49 +03:00
@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';
Reference in a new issue Copy permalink