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

Recreate theme variables with new style values

pull/2032/head
Gabe Kangas 4 years ago
parent
b39c84747d
commit
9ec1d75d32
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
8 changed files with 271 additions and 535 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      web/style-definitions/tokens/color/antd-overrides.yaml
  2. 56
      web/style-definitions/tokens/color/default-theme.yaml
  3. 28
      web/style-definitions/tokens/color/owncast-admin.yaml
  4. 135
      web/style-definitions/tokens/color/owncast-colors.yaml
  5. 51
      web/styles/ant-overrides.scss
  6. 266
      web/styles/globals.scss
  7. 116
      web/styles/theme.less
  8. 124
      web/styles/variables.css

30
web/style-definitions/tokens/color/antd-overrides.yaml
Unescape View File

@ -3,34 +3,14 @@
# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less # https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
text-color: text-color:
value: 'var(--theme-text-color)' value: 'var(--theme-text-primary)'
text-color-secondary: text-color-secondary:
value: 'var(--theme-text-color-secondary)' value: 'var(--theme-text-secondary)'
link-color: link-color:
value: 'var(--theme-link-color)' value: 'var(--theme-text-link)'
popover-background: popover-background:
value: 'var(--theme-text-color-secondary)' value: 'var(--theme-background-secondary)'
background-color-light: background-color-light:
value: 'var(--theme-background-secondary)' value: 'var(--theme-background-secondary)'
layout-body-background: layout-body-background:
value: 'var(--theme-background)' value: 'var(--theme-background-primary)'
# These values require explicit colors and cannot take css variables.
primary-color:
value: '{color.owncast.purple.700.value}'
info-color:
value: '{color.owncast.gray.500.value}'
success-color:
value: '{color.owncast.green.500.value}'
warning-color:
value: '{color.owncast.orange.500.value}'
error-color:
value: '{color.owncast.red.500.value}'
purple-base:
value: '{color.owncast.purple.500.value}'
green-base:
value: '{color.owncast.green.500.value}'
red-base:
value: '{color.owncast.red.500.value}'
orange-base:
value: '{color.owncast.orange.500.value}'

56
web/style-definitions/tokens/color/default-theme.yaml
Unescape View File

@ -4,40 +4,38 @@
# The fewer there are the easier it'll be easier to customize and document. # The fewer there are the easier it'll be easier to customize and document.
theme: theme:
primary-color: unknown:
value: '{color.owncast.purple.700.value}' value: '{color.unknown.value}'
unknown-2:
value: '{color.unknown-2.value}'
primary:
value: '{color.unknown.value}'
comment: 'The primary color of the application used for rendering controls.' comment: 'The primary color of the application used for rendering controls.'
text-color: text:
value: '{color.owncast.gray.300.value}' primary:
comment: 'The color of the text in the application.' value: '{color.owncast.text.primary.value}'
text-color-secondary: comment: 'The color of the text in the application.'
value: '{color.owncast.gray.500.value}' secondary:
link-color: value: '{color.owncast.text.secondary.value}'
value: '{color.owncast.purple.500.value}' link:
font-family: value: '{color.owncast.text.bright.value}'
value: '{font.owncast.family.value}' body-font-family:
header-font-family: value: '{font.owncast.body.value}'
value: '{font.owncast.header-family.value}' display-font-family:
value: '{font.owncast.display.value}'
background: background:
value: '{color.owncast.background.value}' primary:
comment: 'The main background color of the page.' value: '{color.owncast.background.primary.value}'
background-secondary: comment: 'The main background color of the page.'
value: '{color.owncast.background-secondary.value}' secondary:
comment: 'A secondary background color used in sections and controls.' value: '{color.owncast.background.secondary.value}'
rounded-corners: comment: 'A secondary background color used in sections and controls.'
value: '.4rem'
comment: 'The radius of rounded corners used in places.'
success-color: rounded-corners:
value: '{color.owncast.green.500.value}' value: '{rounded-corners.value}'
info-color:
value: '{color.owncast.purple.300.value}'
warning-color:
value: '{color.owncast.orange.500.value}'
error-color:
value: '{color.owncast.red.500.value}'
user-colors: user-colors:
comment: 'Colors used to display chat users.'
1: 1:
value: '{color.owncast.user.1.value}' value: '{color.owncast.user.1.value}'
2: 2:

28
web/style-definitions/tokens/color/owncast-admin.yaml
Unescape View File

@ -0,0 +1,28 @@
# Values used in the admin and should be migrated to variables or removed.
# See ant-overrides.scss.
owncast-purple:
value: '{color.unknown.value}'
owncast-purple-25:
value: 'rgba(120, 113, 255, 0.25)'
owncast-purple-50:
value: 'rgba(120, 113, 255, 0.5)'
online-color:
value: '#73dd3f'
offline-color:
value: '#999'
pink:
value: '{color.unknown.value}'
purple:
value: '{color.unknown-2.value}'
blue:
value: '{color.unknown.value}'
white-88:
value: '{color.unknown-2.value}'
purple-dark:
value: '{color.unknown.value}'
default-link-color:
value: '{color.owncast.text.bright.value}'
default-bg-color:
value: '{color.owncast.background.primary.value}'
default-text-color:
value: '{color.owncast.text.primary.value}'

135
web/style-definitions/tokens/color/owncast-colors.yaml
Unescape View File

@ -1,80 +1,14 @@
# These are colors that make up the Owncast-specific color palette. # These are colors that make up the Owncast-specific color palette.
color: color:
# The Owncast color definitions. unknown:
value: '#00FF00'
unknown-2:
value: '#FF0000'
owncast: owncast:
purple: # These are the colors assigned to chat users.
100: # If you add more colors here make sure to add them to
value: '#f4ebff' # GenerateRandomDisplayColor in the Go codebase so it knows the max
300: # number of colors to use.
value: '#d6bbfb'
500:
value: '#9e77ed'
700:
value: '#6941c6'
900:
value: '#42307d'
green:
100:
value: '#d15ad5'
300:
value: '#6ce9a6'
500:
value: '#12b76a'
700:
value: '#027a48'
900:
value: '#054f31'
red:
100:
value: '#fee4e2'
300:
value: '#fda29b'
500:
value: '#f04438'
700:
value: '#b42318'
900:
value: '#7a271a'
orange:
100:
value: '#fef0c7'
300:
value: '#fec84b'
500:
value: '#f79009'
700:
value: '#b54708'
900:
value: '#93370d'
gray:
100:
value: '#f2f4f7'
300:
value: '#d0d5dd'
500:
value: '#667085'
700:
value: '#344054'
900:
value: '#101828'
logo:
purple:
value: 'rgba(120, 113, 255, 1)'
pink:
value: 'rgba(201, 139, 254, 1)'
blue:
value: 'rgba(32, 134, 225, 1)'
background:
value: 'rgba(32, 34, 50, 1.0)'
background-secondary:
value: '#282A30'
user: user:
1: 1:
value: 'rgb(244, 11, 11)' value: 'rgb(244, 11, 11)'
@ -93,42 +27,33 @@ color:
8: 8:
value: 'rgb(244, 11, 244)' value: 'rgb(244, 11, 244)'
text:
primary:
value: '#030208'
secondary:
value: '#63638E'
highlight:
value: '#030208'
bright:
value: '#5353A6'
background:
highlight:
value: '#F0E678'
primary:
value: '#FFFCF2'
secondary:
value: '#F0EFE4'
rounded-corners:
value: '0.5em'
font: font:
owncast: owncast:
family: body:
value: "'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, value: "'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'" 'Segoe UI Symbol', 'Noto Color Emoji'"
header-family: display:
value: "'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, value: "'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'" 'Segoe UI Symbol', 'Noto Color Emoji'"
# Values used in the admin and should be migrated to variables or removed.
# See ant-overrides.scss.
owncast-purple:
value: '{color.owncast.logo.purple.value}'
owncast-purple-25:
value: 'rgba(120, 113, 255, 0.25)'
owncast-purple-50:
value: 'rgba(120, 113, 255, 0.5)'
online-color:
value: '#73dd3f'
offline-color:
value: '#999'
pink:
value: '{color.owncast.logo.pink.value}'
purple:
value: '{color.owncast.purple.500.value}'
blue:
value: '{color.owncast.logo.blue.value}'
white-88:
value: '{color.owncast.gray.500.value}'
purple-dark:
value: '{color.owncast.purple.900.value}'
default-link-color:
value: '{color.owncast.purple.700.value}'
default-bg-color:
value: '{color.owncast.background.value}'
default-text-color:
value: '{color.owncast.gray.100.value}'

51
web/styles/ant-overrides.scss
Unescape View File

@ -5,17 +5,20 @@
.ant-btn { .ant-btn {
height: 2rem; height: 2rem;
padding: .3rem 1rem; padding: .3rem 1rem;
background-color: var(--theme-unknown);
font-size: .85rem; font-size: .85rem;
font-weight: bold; font-weight: bold;
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
border-color: transparent; border-color: transparent;
background-color: var(--color-owncast-gray-500); color: var(--theme-unknown-2);
color: var(--color-owncast-gray-100);
&:hover, &:hover,
&:focus { &:focus {
background-color: var(--color-owncast-gray-700); background-color: var(--theme-primary);
border-color: transparent; border-color: transparent;
color: inherit; color: var(--theme-unknown-2);
}
&:focus {
border-color: var(--theme-unknown-2);
} }
&[ant-click-animating-without-extra-node]:after { &[ant-click-animating-without-extra-node]:after {
animation: 0s !important; animation: 0s !important;
@ -23,30 +26,25 @@
} }
.ant-btn-primary { .ant-btn-primary {
background-color: var(--color-owncast-purple-700); background-color: var(--theme-unknown);
&:hover,
&:focus {
background-color: var(--color-owncast-purple-500);
border-color: transparent;
}
} }
.ant-btn-primary[disabled] { .ant-btn-primary[disabled] {
background-color: var(--white-25); background-color: var(--theme-unknown);
color: var(--theme-unknown-2);
&:hover { &:hover {
background-color: var(--white-35); background-color: var(--theme-unknown);
} }
} }
.ant-btn-ghost { .ant-btn-background-ghost {
border: 0px; border: 0px;
box-shadow: none !important; box-shadow: none !important;
background-color: transparent !important;
&:hover, &:hover,
&:focus { &:focus {
background-color: var(--theme-info-color); background-color: var(--theme-unknown);
} }
} }
/* ------------------------- // /* ------------------------- //
DROPDOWN DROPDOWN
@ -54,24 +52,5 @@
.ant-dropdown-menu { .ant-dropdown-menu {
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
background-color: var(--color-owncast-background-secondary); background-color: var(--color-background-secondary);
}
/* ------------------------- //
TABS
// ------------------------- */
@media (max-width: 768px) {
.ant-tabs-content {
height: 100%;
}
}
/* ------------------------- //
TOOLTIP
// ------------------------- */
.ant-tooltip {
// border-radius: var(--theme-rounded-corners);
// overflow: hidden;
} }

266
web/styles/globals.scss
Unescape View File

@ -1,17 +1,88 @@
@import "@fontsource/open-sans/variable.css"; @import '@fontsource/open-sans/variable.css';
@import "@fontsource/poppins/400.css"; @import '@fontsource/poppins/400.css';
@import "@fontsource/poppins/600.css"; @import '@fontsource/poppins/600.css';
// @import "~antd/dist/antd.dark";
html,
body { body {
padding: 0; font-family: var(--theme-text-body-font-family);
font-size: 16px;
line-height: 1.5em;
margin: 0; margin: 0;
font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif; padding: 0;
font-size: clamp(14px, 1vw, 17px);
background-color: var(--default-bg-color); color: var(--theme-text-primary);
color: var(--default-text-color); background-color: var(--theme-background-primary);
div,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0.7em 0 0 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--theme-text-display-font-family);
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
font-weight: 400;
}
h3 {
font-family: var(--theme-text-body-font-family);
font-size: 1.25em;
font-weight: 500;
}
h4 {
font-size: 1em;
}
ul {
list-style: square;
}
ul,
ol {
margin: 0.7em 0 0 0;
padding: 0 1em;
ul,
ol {
margin: 0;
}
li {
margin: 0.175em 0 0 0;
}
}
a {
color: var(--theme-text-link);
&:visited {
color: var(--theme-text-primary);
}
}
strong,
b {
font-weight: 700;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -19,176 +90,3 @@ body {
overflow: hidden; overflow: hidden;
} }
} }
// a {
// color: inherit;
// text-decoration: none;
// color: var(--default-link-color);
// &:hover {
// color: var(--default-text-color);
// }
// }
// * {
// box-sizing: border-box;
// }
// p,
// p.description,
// .description,
// .ant-typography {
// font-weight: 500;
// margin: 1em 0;
// color: var(--white-75);
// }
// .description.reduced-margins {
// margin-top: 5px;
// margin-bottom: 5px;
// }
// pre {
// display: block;
// padding: 1rem;
// margin: 0.5rem 0;
// background-color: var(--code-bg-color);
// color: var(--white-50);
// }
// code {
// color: var(--code-color);
// background-color: var(--white-15);
// display: inline-block;
// padding: 2px 4px;
// border-radius: 4px;
// font-size: 0.88em;
// }
// strong {
// font-weight: 600;
// }
// .logo-svg {
// height: 2rem;
// width: 2rem;
// }
// .line-chart-container {
// margin: 2em auto;
// margin-bottom: 0px;
// padding: 1em;
// border: 1px solid var(--gray-dark);
// canvas {
// max-width: 100%;
// }
// }
// .form-module {
// margin: 1em 0;
// background-color: var(--container-bg-color);
// padding: 2em;
// border-radius: var(--container-border-radius);
// h3 {
// &:first-of-type {
// margin-top: 0;
// }
// }
// }
// .form-module.disabled {
// opacity: 0.4;
// cursor: not-allowed;
// }
// .row {
// display: flex;
// flex-direction: row;
// justify-content: space-between;
// align-items: flex-start;
// @media (max-width: 980px) {
// flex-direction: column;
// .form-module {
// width: 100%;
// }
// }
// }
// input {
// &:not(:focus) {
// &:invalid {
// color: var(--ant-error);
// }
// }
// }
// .table-container {
// .ant-table-tbody > tr > td {
// transition: background-color 0.15s;
// }
// .ant-table-tbody > tr.ant-table-row:hover > td {
// background-color: var(--gray);
// }
// .ant-table-small {
// .ant-table-cell {
// font-size: 12px;
// }
// .ant-table-selection-column {
// width: 20px;
// min-width: 20px;
// }
// }
// .ant-table-row.hidden {
// .ant-table-cell {
// color: var(--black-35);
// }
// @media (prefers-color-scheme: dark) {
// .ant-table-cell {
// color: var(--white-25);
// }
// }
// }
// .ant-table-cell {
// &.actions-col {
// text-align: right;
// }
// }
// td.number-col {
// text-align: right;
// }
// }
// .ant-tabs-tab {
// color: var(--owncast-purple);
// .ant-tabs-tab-active {
// border-color: var(--nav-selected-text);
// }
// }
// .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
// color: var(--nav-selected-text);
// }
// .ant-tabs-ink-bar {
// background: var(--nav-selected-text);
// }
// #fediverse-post-container {
// max-width: 50vw;
// width: 100%;
// #fediverse-post-input {
// color: var(--white-75);
// border-color: var(--owncast-purple);
// background-color: var(--default-bg-color);
// height: 250px;
// }
// .ant-input-textarea-show-count::after {
// color: var(--owncast-purple);
// }
// }

116
web/styles/theme.less
Unescape View File

@ -1,39 +1,28 @@
// Do not edit directly // Do not edit directly
// Generated on Sun, 10 Jul 2022 05:37:28 GMT // Generated on Sun, 10 Jul 2022 17:52:44 GMT
// //
// How to edit these values: // How to edit these values:
// Edit the corresponding token file under the style-definitions directory // Edit the corresponding token file under the style-definitions directory
// in the Owncast web project. // in the Owncast web project.
@text-color: var(--theme-text-color); @text-color: var(--theme-text-primary);
@text-color-secondary: var(--theme-text-color-secondary); @text-color-secondary: var(--theme-text-secondary);
@link-color: var(--theme-link-color); @link-color: var(--theme-text-link);
@popover-background: var(--theme-text-color-secondary); @popover-background: var(--theme-background-secondary);
@background-color-light: var(--theme-background-secondary); @background-color-light: var(--theme-background-secondary);
@layout-body-background: var(--theme-background); @layout-body-background: var(--theme-background-primary);
@primary-color: #6941c6; @theme-unknown: #00ff00;
@info-color: #667085; @theme-unknown-2: #ff0000;
@success-color: #12b76a; @theme-primary: #00ff00; // The primary color of the application used for rendering controls.
@warning-color: #f79009; @theme-text-primary: #030208; // The color of the text in the application.
@error-color: #f04438; @theme-text-secondary: #63638e;
@purple-base: #9e77ed; @theme-text-link: #5353a6;
@green-base: #12b76a; @theme-text-body-font-family: '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';
@red-base: #f04438; @theme-text-display-font-family: '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';
@orange-base: #f79009; @theme-background-primary: #fffcf2; // The main background color of the page.
@theme-primary-color: #6941c6; // The primary color of the application used for rendering controls. @theme-background-secondary: #f0efe4; // A secondary background color used in sections and controls.
@theme-text-color: #d0d5dd; // The color of the text in the application. @theme-rounded-corners: 0.5em;
@theme-text-color-secondary: #667085;
@theme-link-color: #9e77ed;
@theme-font-family: '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';
@theme-header-font-family: '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';
@theme-background: #202232; // The main background color of the page.
@theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
@theme-rounded-corners: .5rem; // The radius of rounded corners used in places.
@theme-success-color: #12b76a;
@theme-info-color: #d6bbfb;
@theme-warning-color: #f79009;
@theme-error-color: #f04438;
@theme-user-colors-1: #f40b0b; @theme-user-colors-1: #f40b0b;
@theme-user-colors-2: #f4800b; @theme-user-colors-2: #f4800b;
@theme-user-colors-3: #f4f40b; @theme-user-colors-3: #f4f40b;
@ -42,37 +31,21 @@
@theme-user-colors-6: #0ba6f4; @theme-user-colors-6: #0ba6f4;
@theme-user-colors-7: #6666ff; @theme-user-colors-7: #6666ff;
@theme-user-colors-8: #f40bf4; @theme-user-colors-8: #f40bf4;
@color-owncast-purple-100: #f4ebff; @owncast-purple: #00ff00;
@color-owncast-purple-300: #d6bbfb; @owncast-purple-25: rgba(120, 113, 255, 0.25);
@color-owncast-purple-500: #9e77ed; @owncast-purple-50: rgba(120, 113, 255, 0.5);
@color-owncast-purple-700: #6941c6; @online-color: #73dd3f;
@color-owncast-purple-900: #42307d; @offline-color: #999;
@color-owncast-green-100: #d15ad5; @pink: #00ff00;
@color-owncast-green-300: #6ce9a6; @purple: #ff0000;
@color-owncast-green-500: #12b76a; @blue: #00ff00;
@color-owncast-green-700: #027a48; @white-88: #ff0000;
@color-owncast-green-900: #054f31; @purple-dark: #00ff00;
@color-owncast-red-100: #fee4e2; @default-link-color: #5353a6;
@color-owncast-red-300: #fda29b; @default-bg-color: #fffcf2;
@color-owncast-red-500: #f04438; @default-text-color: #030208;
@color-owncast-red-700: #b42318; @color-unknown: #00ff00;
@color-owncast-red-900: #7a271a; @color-unknown-2: #ff0000;
@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-600: #4b4c4d;
@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: #202232;
@color-owncast-background-secondary: #282a30;
@color-owncast-user-1: #f40b0b; @color-owncast-user-1: #f40b0b;
@color-owncast-user-2: #f4800b; @color-owncast-user-2: #f4800b;
@color-owncast-user-3: #f4f40b; @color-owncast-user-3: #f4f40b;
@ -81,18 +54,13 @@
@color-owncast-user-6: #0ba6f4; @color-owncast-user-6: #0ba6f4;
@color-owncast-user-7: #6666ff; @color-owncast-user-7: #6666ff;
@color-owncast-user-8: #f40bf4; @color-owncast-user-8: #f40bf4;
@font-owncast-family: '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'; @color-owncast-text-primary: #030208;
@font-owncast-header-family: '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'; @color-owncast-text-secondary: #63638e;
@owncast-purple: #7871ff; @color-owncast-text-highlight: #030208;
@owncast-purple-25: rgba(120, 113, 255, 0.25); @color-owncast-text-bright: #5353a6;
@owncast-purple-50: rgba(120, 113, 255, 0.5); @color-owncast-background-highlight: #f0e678;
@online-color: #73dd3f; @color-owncast-background-primary: #fffcf2;
@offline-color: #999; @color-owncast-background-secondary: #f0efe4;
@pink: #c98bfe; @rounded-corners: 0.5em;
@purple: #9e77ed; @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';
@blue: #2086e1; @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';
@white-88: #667085;
@purple-dark: #42307d;
@default-link-color: #6941c6;
@default-bg-color: #202232;
@default-text-color: #f2f4f7;

124
web/styles/variables.css
Unescape View File

@ -1,6 +1,6 @@
/** /**
* Do not edit directly * Do not edit directly
* Generated on Sun, 10 Jul 2022 05:37:28 GMT * Generated on Sun, 10 Jul 2022 17:52:44 GMT
* *
* How to edit these values: * How to edit these values:
* Edit the corresponding token file under the style-definitions directory * Edit the corresponding token file under the style-definitions directory
@ -8,38 +8,23 @@
*/ */
:root { :root {
--text-color: var(--theme-text-color); --text-color: var(--theme-text-primary);
--text-color-secondary: var(--theme-text-color-secondary); --text-color-secondary: var(--theme-text-secondary);
--link-color: var(--theme-link-color); --link-color: var(--theme-text-link);
--popover-background: var(--theme-text-color-secondary); --popover-background: var(--theme-background-secondary);
--background-color-light: var(--theme-background-secondary); --background-color-light: var(--theme-background-secondary);
--layout-body-background: var(--theme-background); --layout-body-background: var(--theme-background-primary);
--primary-color: #6941c6; --theme-unknown: #00ff00;
--info-color: #667085; --theme-unknown-2: #ff0000;
--success-color: #12b76a; --theme-primary: #00ff00; /* The primary color of the application used for rendering controls. */
--warning-color: #f79009; --theme-text-primary: #030208; /* The color of the text in the application. */
--error-color: #f04438; --theme-text-secondary: #63638e;
--purple-base: #9e77ed; --theme-text-link: #5353a6;
--green-base: #12b76a; --theme-text-body-font-family: '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';
--red-base: #f04438; --theme-text-display-font-family: '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';
--orange-base: #f79009; --theme-background-primary: #fffcf2; /* The main background color of the page. */
--theme-primary-color: #6941c6; /* The primary color of the application used for rendering controls. */ --theme-background-secondary: #f0efe4; /* A secondary background color used in sections and controls. */
--theme-text-color: #d0d5dd; /* The color of the text in the application. */ --theme-rounded-corners: 0.5em;
--theme-text-color-secondary: #667085;
--theme-link-color: #9e77ed;
--theme-font-family: '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';
--theme-header-font-family: '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';
--theme-background: #202232; /* The main background color of the page. */
--theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 0.5rem; /* The radius of rounded corners used in places. */
--theme-success-color: #12b76a;
--theme-info-color: #d6bbfb;
--theme-warning-color: #f79009;
--theme-error-color: #f04438;
--theme-user-colors-1: #f40b0b; --theme-user-colors-1: #f40b0b;
--theme-user-colors-2: #f4800b; --theme-user-colors-2: #f4800b;
--theme-user-colors-3: #f4f40b; --theme-user-colors-3: #f4f40b;
@ -48,37 +33,21 @@
--theme-user-colors-6: #0ba6f4; --theme-user-colors-6: #0ba6f4;
--theme-user-colors-7: #6666ff; --theme-user-colors-7: #6666ff;
--theme-user-colors-8: #f40bf4; --theme-user-colors-8: #f40bf4;
--color-owncast-purple-100: #f4ebff; --owncast-purple: #00ff00;
--color-owncast-purple-300: #d6bbfb; --owncast-purple-25: rgba(120, 113, 255, 0.25);
--color-owncast-purple-500: #9e77ed; --owncast-purple-50: rgba(120, 113, 255, 0.5);
--color-owncast-purple-700: #6941c6; --online-color: #73dd3f;
--color-owncast-purple-900: #42307d; --offline-color: #999;
--color-owncast-green-100: #d15ad5; --pink: #00ff00;
--color-owncast-green-300: #6ce9a6; --purple: #ff0000;
--color-owncast-green-500: #12b76a; --blue: #00ff00;
--color-owncast-green-700: #027a48; --white-88: #ff0000;
--color-owncast-green-900: #054f31; --purple-dark: #00ff00;
--color-owncast-red-100: #fee4e2; --default-link-color: #5353a6;
--color-owncast-red-300: #fda29b; --default-bg-color: #fffcf2;
--color-owncast-red-500: #f04438; --default-text-color: #030208;
--color-owncast-red-700: #b42318; --color-unknown: #00ff00;
--color-owncast-red-900: #7a271a; --color-unknown-2: #ff0000;
--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-600: #4b4c4d;
--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: #202232;
--color-owncast-background-secondary: #282a30;
--color-owncast-user-1: #f40b0b; --color-owncast-user-1: #f40b0b;
--color-owncast-user-2: #f4800b; --color-owncast-user-2: #f4800b;
--color-owncast-user-3: #f4f40b; --color-owncast-user-3: #f4f40b;
@ -87,23 +56,14 @@
--color-owncast-user-6: #0ba6f4; --color-owncast-user-6: #0ba6f4;
--color-owncast-user-7: #6666ff; --color-owncast-user-7: #6666ff;
--color-owncast-user-8: #f40bf4; --color-owncast-user-8: #f40bf4;
--font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', --color-owncast-text-primary: #030208;
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', --color-owncast-text-secondary: #63638e;
'Segoe UI Symbol', 'Noto Color Emoji'; --color-owncast-text-highlight: #030208;
--font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', --color-owncast-text-bright: #5353a6;
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', --color-owncast-background-highlight: #f0e678;
'Segoe UI Symbol', 'Noto Color Emoji'; --color-owncast-background-primary: #fffcf2;
--owncast-purple: #7871ff; --color-owncast-background-secondary: #f0efe4;
--owncast-purple-25: rgba(120, 113, 255, 0.25); --rounded-corners: 0.5em;
--owncast-purple-50: rgba(120, 113, 255, 0.5); --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';
--online-color: #73dd3f; --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';
--offline-color: #999;
--pink: #c98bfe;
--purple: #9e77ed;
--blue: #2086e1;
--white-88: #667085;
--purple-dark: #42307d;
--default-link-color: #6941c6;
--default-bg-color: #202232;
--default-text-color: #f2f4f7;
} }

Write Preview
Loading…
Cancel
Save