pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Use the generated style variables

pull/2032/head
Gabe Kangas 3 years ago
parent
a78869302e
commit
f7a03705a8
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
6 changed files with 161 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/pages/_app.tsx
  2. 7
      web/styles/global.less
  3. 10
      web/styles/globals.scss
  4. 108
      web/styles/theme.less
  5. 79
      web/styles/variables.css
  6. 6
      web/styles/variables.scss

2
web/pages/_app.tsx
Unescape View File

@ -1,5 +1,5 @@ @@ -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';

7
web/styles/global.less
Unescape View File

@ -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

10
web/styles/globals.scss
Unescape View File

@ -1,10 +1,18 @@ @@ -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);

108
web/styles/theme.less
Unescape View File

@ -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);

79
web/styles/variables.css
Unescape View File

@ -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);
}

6
web/styles/variables.scss
Unescape View File

@ -94,8 +94,4 @@ @@ -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;
}

Write Preview
Loading…
Cancel
Save