6 changed files with 161 additions and 51 deletions
@ -1,7 +1,2 @@
@@ -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,40 +1,72 @@
@@ -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); |
@ -0,0 +1,79 @@
@@ -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); |
||||
} |
Loading…
Reference in new issue