mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 13:35:57 +03:00
Code Issues Projects Releases Packages Wiki Activity
owncast/web/styles/variables.css

150 lines
8.2 KiB
CSS
Raw Normal View History

Use the generated style variables
2022-05-07 09:32:33 +03:00
/**
* Do not edit directly
Fix font not being defined
2022-08-30 20:58:01 +03:00
* Generated on Tue, 30 Aug 2022 17:56:21 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.
Use the generated style variables
2022-05-07 09:32:33 +03:00
*/
:root {
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);
--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. */
Prettified Code!
2022-08-30 20:59:04 +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 */
--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 */
Prettified Code!
2022-08-30 20:59:04 +03:00
--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 */
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-text: var(--theme-color-palette-4); /* Light secondary */
Prettified Code!
2022-08-30 20:59:04 +03:00
--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 */
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-secondary-button-background-disabled: transparent;
Prettified Code!
2022-08-30 20:59:04 +03:00
--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 */
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-chat-background: var(--theme-color-palette-1); /* Dark secondary */
--theme-color-components-chat-text: var(--theme-color-palette-3); /* Light primary */
Prettified Code!
2022-08-30 20:59:04 +03:00
--theme-color-components-modal-header-background: var(
--theme-color-palette-1
); /* Dark 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-modal-header-text: var(--theme-color-palette-3); /* Light primary */
Prettified Code!
2022-08-30 20:59:04 +03:00
--theme-color-components-modal-content-background: 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-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);
Prettified Code!
2022-08-30 20:59:04 +03:00
--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 */
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-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 */
Recreate theme variables with new style values
2022-07-10 22:15:49 +03:00
--owncast-purple-25: rgba(120, 113, 255, 0.25);
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;
Standardize color ids
2022-08-16 06:29:09 +03:00
--color-owncast-user-0: #f40b0b;
--color-owncast-user-1: #f4800b;
--color-owncast-user-2: #f4f40b;
--color-owncast-user-3: #58f40b;
--color-owncast-user-4: #0bf4f4;
--color-owncast-user-5: #0ba6f4;
--color-owncast-user-6: #6666ff;
--color-owncast-user-7: #f40bf4;
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 */
--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 */
Prettified Code!
2022-08-30 20:59:04 +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';
Use the generated style variables
2022-05-07 09:32:33 +03:00
}
Reference in a new issue Copy permalink