mirror of
https://github.com/owncast/owncast.git
synced 2024-11-24 21:59:43 +03:00
Use the generated style variables
This commit is contained in:
Gabe Kangas
parent
a78869302e
commit
f7a03705a8
6 changed files with 161 additions and 51 deletions
|
|
@ -1,5 +1,5 @@
|
|||
// order matters!
|
||||
import '../styles/variables.scss';
|
||||
import '../styles/variables.css';
|
||||
import '../styles/global.less';
|
||||
import '../styles/globals.scss';
|
||||
// import '../styles/ant-overrides.scss';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,2 @@
|
|||
// @import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
|
||||
// @import '~antd/dist/antd.less';
|
||||
@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
|
||||
@import './theme.less'; // Import owncast theme styles
|
||||
|
||||
|
||||
|
||||
@import './theme.less'; // Import ant design theme definition
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
// @import "~antd/dist/antd.dark";
|
||||
|
||||
:root {
|
||||
// chat variables
|
||||
--header-h: 64px;
|
||||
--chat-w: 300px;
|
||||
--chat-input-h: 40.5px;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: var(--font-family);
|
||||
font-family: var(--theme-font-family);
|
||||
font-size: 16px;
|
||||
|
||||
background-color: var(--default-bg-color);
|
||||
|
|
|
|||
|
|
@ -1,40 +1,72 @@
|
|||
@theme: owncast;
|
||||
|
||||
// These overrides are only used for customizing the style of Ant Design
|
||||
// components and do not impact any custom components. Therefore CSS variables
|
||||
// should be set in a centralized place and used here so changes only need
|
||||
// to be made once. See variables.scss.
|
||||
|
||||
// Variable names can be found in
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
|
||||
|
||||
// From color palette in variables.scss.
|
||||
@green-1: --var(green-100);
|
||||
@green-2: --var(green-300);
|
||||
@green-3: --var(green-500);
|
||||
@green-4: --var(green-700);
|
||||
@green-5: --var(green-900);
|
||||
|
||||
@purple-1: --var(purple-100);
|
||||
@purple-2: --var(purple-300);
|
||||
@purple-3: --var(purple-500);
|
||||
@purple-4: --var(purple-700);
|
||||
@purple-5: --var(purple-900);
|
||||
|
||||
// Random colors for testing
|
||||
@primary-color: #d62222;
|
||||
@text-color: green;
|
||||
@text-color-secondary: orange;
|
||||
@link-color: #1890ff; // link color
|
||||
@success-color: #52c41a; // success state color
|
||||
@warning-color: #faad14; // warning state color
|
||||
@error-color: #f5222d; // error state color
|
||||
@font-size-base: 14px; // major text font size
|
||||
@heading-color: rgba(177, 168, 44, 0.85); // heading text color
|
||||
@text-color-secondary: rgba(224, 8, 231, 0.45); // secondary text color
|
||||
@disabled-color: rgba(134, 123, 123, 0.25); // disable state color
|
||||
@border-radius-base: 2px; // major border radius
|
||||
@border-color-base: #d9d9d9; // major border color
|
||||
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers
|
||||
// Do not edit directly
|
||||
// Generated on Sat, 07 May 2022 06:21:28 GMT
|
||||
|
||||
@text-color: var(--theme-text-color);
|
||||
@text-color-secondry: var(--theme-text-color-secondary);
|
||||
@link-color: var(--theme-link-color);
|
||||
@popover-background: var(--theme-background);
|
||||
@background-color-light: #f4ebff;
|
||||
@primary-color: #9e77ed;
|
||||
@info-color: #667085;
|
||||
@success-color: #12b76a;
|
||||
@warning-color: #f79009;
|
||||
@error-color: #f04438;
|
||||
@purple-base: #9e77ed;
|
||||
@green-base: #12b76a;
|
||||
@red-base: #f04438;
|
||||
@orange-base: #f79009;
|
||||
@theme-primary-color: #9e77ed;
|
||||
@theme-text-color: #d0d5dd;
|
||||
@theme-text-color-secondary: #667085;
|
||||
@theme-link-color: #9e77ed;
|
||||
@theme-success-color: #12b76a;
|
||||
@theme-info-color: #d6bbfb;
|
||||
@theme-warning-color: #f79009;
|
||||
@theme-error-color: #f04438;
|
||||
@theme-font-family: 'Inter', 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';;
|
||||
@theme-background: #171523;
|
||||
@color-owncast-purple-100: #f4ebff;
|
||||
@color-owncast-purple-300: #d6bbfb;
|
||||
@color-owncast-purple-500: #9e77ed;
|
||||
@color-owncast-purple-700: #6941c6;
|
||||
@color-owncast-purple-900: #42307d;
|
||||
@color-owncast-green-100: #d15ad5;
|
||||
@color-owncast-green-300: #6ce9a6;
|
||||
@color-owncast-green-500: #12b76a;
|
||||
@color-owncast-green-700: #027a48;
|
||||
@color-owncast-green-900: #054f31;
|
||||
@color-owncast-red-100: #fee4e2;
|
||||
@color-owncast-red-300: #fda29b;
|
||||
@color-owncast-red-500: #f04438;
|
||||
@color-owncast-red-700: #b42318;
|
||||
@color-owncast-red-900: #7a271a;
|
||||
@color-owncast-orange-100: #fef0c7;
|
||||
@color-owncast-orange-300: #fec84b;
|
||||
@color-owncast-orange-500: #f79009;
|
||||
@color-owncast-orange-700: #b54708;
|
||||
@color-owncast-orange-900: #93370d;
|
||||
@color-owncast-gray-100: #f2f4f7;
|
||||
@color-owncast-gray-300: #d0d5dd;
|
||||
@color-owncast-gray-500: #667085;
|
||||
@color-owncast-gray-700: #344054;
|
||||
@color-owncast-gray-900: #101828;
|
||||
@color-owncast-logo-purple: #7871ff;
|
||||
@color-owncast-logo-pink: #c98bfe;
|
||||
@color-owncast-logo-blue: #2086e1;
|
||||
@color-owncast-background-light: #1b1a26;
|
||||
@color-owncast-background: #171523;
|
||||
@font-owncast-family: 'Inter', 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';;
|
||||
@owncast-purple: #7871ff;
|
||||
@owncast-purple-25: rgba(120, 113, 255, 0.25);
|
||||
@owncast-purple-50: rgba(120, 113, 255, 0.5);
|
||||
@online-color: #73dd3f;
|
||||
@offline-color: #999;
|
||||
@pink: #c98bfe;
|
||||
@purple: #7871ff;
|
||||
@blue: #2086e1;
|
||||
@white-88: #667085;
|
||||
@purple-dark: rgba(28, 26, 59, 1);
|
||||
@default-link-color: #c98bfe;
|
||||
@default-bg-color: black;
|
||||
@default-text-color: rgba(255, 255, 255, 0.88);
|
||||
79
web/styles/variables.css
Normal file
79
web/styles/variables.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* Do not edit directly
|
||||
* Generated on Sat, 07 May 2022 06:21:28 GMT
|
||||
*/
|
||||
|
||||
:root {
|
||||
--text-color: var(--theme-text-color);
|
||||
--text-color-secondry: var(--theme-text-color-secondary);
|
||||
--link-color: var(--theme-link-color);
|
||||
--popover-background: var(--theme-background);
|
||||
--background-color-light: #f4ebff;
|
||||
--primary-color: #9e77ed;
|
||||
--info-color: #667085;
|
||||
--success-color: #12b76a;
|
||||
--warning-color: #f79009;
|
||||
--error-color: #f04438;
|
||||
--purple-base: #9e77ed;
|
||||
--green-base: #12b76a;
|
||||
--red-base: #f04438;
|
||||
--orange-base: #f79009;
|
||||
--theme-primary-color: #9e77ed;
|
||||
--theme-text-color: #d0d5dd;
|
||||
--theme-text-color-secondary: #667085;
|
||||
--theme-link-color: #9e77ed;
|
||||
--theme-success-color: #12b76a;
|
||||
--theme-info-color: #d6bbfb;
|
||||
--theme-warning-color: #f79009;
|
||||
--theme-error-color: #f04438;
|
||||
--theme-font-family: 'Inter', 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';
|
||||
--theme-background: #171523;
|
||||
--color-owncast-purple-100: #f4ebff;
|
||||
--color-owncast-purple-300: #d6bbfb;
|
||||
--color-owncast-purple-500: #9e77ed;
|
||||
--color-owncast-purple-700: #6941c6;
|
||||
--color-owncast-purple-900: #42307d;
|
||||
--color-owncast-green-100: #d15ad5;
|
||||
--color-owncast-green-300: #6ce9a6;
|
||||
--color-owncast-green-500: #12b76a;
|
||||
--color-owncast-green-700: #027a48;
|
||||
--color-owncast-green-900: #054f31;
|
||||
--color-owncast-red-100: #fee4e2;
|
||||
--color-owncast-red-300: #fda29b;
|
||||
--color-owncast-red-500: #f04438;
|
||||
--color-owncast-red-700: #b42318;
|
||||
--color-owncast-red-900: #7a271a;
|
||||
--color-owncast-orange-100: #fef0c7;
|
||||
--color-owncast-orange-300: #fec84b;
|
||||
--color-owncast-orange-500: #f79009;
|
||||
--color-owncast-orange-700: #b54708;
|
||||
--color-owncast-orange-900: #93370d;
|
||||
--color-owncast-gray-100: #f2f4f7;
|
||||
--color-owncast-gray-300: #d0d5dd;
|
||||
--color-owncast-gray-500: #667085;
|
||||
--color-owncast-gray-700: #344054;
|
||||
--color-owncast-gray-900: #101828;
|
||||
--color-owncast-logo-purple: #7871ff;
|
||||
--color-owncast-logo-pink: #c98bfe;
|
||||
--color-owncast-logo-blue: #2086e1;
|
||||
--color-owncast-background-light: #1b1a26;
|
||||
--color-owncast-background: #171523;
|
||||
--font-owncast-family: 'Inter', 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';
|
||||
--owncast-purple: #7871ff;
|
||||
--owncast-purple-25: rgba(120, 113, 255, 0.25);
|
||||
--owncast-purple-50: rgba(120, 113, 255, 0.5);
|
||||
--online-color: #73dd3f;
|
||||
--offline-color: #999;
|
||||
--pink: #c98bfe;
|
||||
--purple: #7871ff;
|
||||
--blue: #2086e1;
|
||||
--white-88: #667085;
|
||||
--purple-dark: rgba(28, 26, 59, 1);
|
||||
--default-link-color: #c98bfe;
|
||||
--default-bg-color: black;
|
||||
--default-text-color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
|
@ -94,8 +94,4 @@
|
|||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
// chat variables
|
||||
--header-h: 64px;
|
||||
--chat-w: 300px;
|
||||
--chat-input-h: 40.5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue