Recreate theme variables with new style values
This commit is contained in:
Gabe Kangas
parent
b39c84747d
commit
9ec1d75d32
@ -3,34 +3,14 @@
|
||||
# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
|
||||
|
||||
text-color:
|
||||
value: 'var(--theme-text-color)'
|
||||
value: 'var(--theme-text-primary)'
|
||||
text-color-secondary:
|
||||
value: 'var(--theme-text-color-secondary)'
|
||||
value: 'var(--theme-text-secondary)'
|
||||
link-color:
|
||||
value: 'var(--theme-link-color)'
|
||||
value: 'var(--theme-text-link)'
|
||||
popover-background:
|
||||
value: 'var(--theme-text-color-secondary)'
|
||||
value: 'var(--theme-background-secondary)'
|
||||
background-color-light:
|
||||
value: 'var(--theme-background-secondary)'
|
||||
layout-body-background:
|
||||
value: 'var(--theme-background)'
|
||||
|
||||
# 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}'
|
||||
value: 'var(--theme-background-primary)'
|
||||
|
||||
@ -4,40 +4,38 @@
|
||||
# The fewer there are the easier it'll be easier to customize and document.
|
||||
|
||||
theme:
|
||||
primary-color:
|
||||
value: '{color.owncast.purple.700.value}'
|
||||
unknown:
|
||||
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.'
|
||||
text-color:
|
||||
value: '{color.owncast.gray.300.value}'
|
||||
comment: 'The color of the text in the application.'
|
||||
text-color-secondary:
|
||||
value: '{color.owncast.gray.500.value}'
|
||||
link-color:
|
||||
value: '{color.owncast.purple.500.value}'
|
||||
font-family:
|
||||
value: '{font.owncast.family.value}'
|
||||
header-font-family:
|
||||
value: '{font.owncast.header-family.value}'
|
||||
text:
|
||||
primary:
|
||||
value: '{color.owncast.text.primary.value}'
|
||||
comment: 'The color of the text in the application.'
|
||||
secondary:
|
||||
value: '{color.owncast.text.secondary.value}'
|
||||
link:
|
||||
value: '{color.owncast.text.bright.value}'
|
||||
body-font-family:
|
||||
value: '{font.owncast.body.value}'
|
||||
display-font-family:
|
||||
value: '{font.owncast.display.value}'
|
||||
background:
|
||||
value: '{color.owncast.background.value}'
|
||||
comment: 'The main background color of the page.'
|
||||
background-secondary:
|
||||
value: '{color.owncast.background-secondary.value}'
|
||||
comment: 'A secondary background color used in sections and controls.'
|
||||
rounded-corners:
|
||||
value: '.4rem'
|
||||
comment: 'The radius of rounded corners used in places.'
|
||||
primary:
|
||||
value: '{color.owncast.background.primary.value}'
|
||||
comment: 'The main background color of the page.'
|
||||
secondary:
|
||||
value: '{color.owncast.background.secondary.value}'
|
||||
comment: 'A secondary background color used in sections and controls.'
|
||||
|
||||
success-color:
|
||||
value: '{color.owncast.green.500.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}'
|
||||
rounded-corners:
|
||||
value: '{rounded-corners.value}'
|
||||
|
||||
user-colors:
|
||||
comment: 'Colors used to display chat users.'
|
||||
1:
|
||||
value: '{color.owncast.user.1.value}'
|
||||
2:
|
||||
|
||||
28
web/style-definitions/tokens/color/owncast-admin.yaml
Normal file
28
web/style-definitions/tokens/color/owncast-admin.yaml
Normal 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}'
|
||||
@ -1,80 +1,14 @@
|
||||
# These are colors that make up the Owncast-specific color palette.
|
||||
color:
|
||||
# The Owncast color definitions.
|
||||
unknown:
|
||||
value: '#00FF00'
|
||||
unknown-2:
|
||||
value: '#FF0000'
|
||||
owncast:
|
||||
purple:
|
||||
100:
|
||||
value: '#f4ebff'
|
||||
300:
|
||||
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'
|
||||
|
||||
# These are the colors assigned to chat users.
|
||||
# If you add more colors here make sure to add them to
|
||||
# GenerateRandomDisplayColor in the Go codebase so it knows the max
|
||||
# number of colors to use.
|
||||
user:
|
||||
1:
|
||||
value: 'rgb(244, 11, 11)'
|
||||
@ -93,42 +27,33 @@ color:
|
||||
8:
|
||||
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:
|
||||
owncast:
|
||||
family:
|
||||
body:
|
||||
value: "'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'"
|
||||
header-family:
|
||||
display:
|
||||
value: "'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'"
|
||||
|
||||
# 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}'
|
||||
|
||||
@ -5,17 +5,20 @@
|
||||
.ant-btn {
|
||||
height: 2rem;
|
||||
padding: .3rem 1rem;
|
||||
background-color: var(--theme-unknown);
|
||||
font-size: .85rem;
|
||||
font-weight: bold;
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
border-color: transparent;
|
||||
background-color: var(--color-owncast-gray-500);
|
||||
color: var(--color-owncast-gray-100);
|
||||
color: var(--theme-unknown-2);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-owncast-gray-700);
|
||||
background-color: var(--theme-primary);
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
color: var(--theme-unknown-2);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--theme-unknown-2);
|
||||
}
|
||||
&[ant-click-animating-without-extra-node]:after {
|
||||
animation: 0s !important;
|
||||
@ -23,30 +26,25 @@
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: var(--color-owncast-purple-700);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-owncast-purple-500);
|
||||
border-color: transparent;
|
||||
}
|
||||
background-color: var(--theme-unknown);
|
||||
}
|
||||
|
||||
.ant-btn-primary[disabled] {
|
||||
background-color: var(--white-25);
|
||||
background-color: var(--theme-unknown);
|
||||
color: var(--theme-unknown-2);
|
||||
&:hover {
|
||||
background-color: var(--white-35);
|
||||
background-color: var(--theme-unknown);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-ghost {
|
||||
.ant-btn-background-ghost {
|
||||
border: 0px;
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--theme-info-color);
|
||||
background-color: var(--theme-unknown);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------- //
|
||||
DROPDOWN
|
||||
@ -54,24 +52,5 @@
|
||||
|
||||
.ant-dropdown-menu {
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
background-color: var(--color-owncast-background-secondary);
|
||||
}
|
||||
|
||||
/* ------------------------- //
|
||||
TABS
|
||||
// ------------------------- */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------- //
|
||||
TOOLTIP
|
||||
// ------------------------- */
|
||||
|
||||
.ant-tooltip {
|
||||
// border-radius: var(--theme-rounded-corners);
|
||||
// overflow: hidden;
|
||||
background-color: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@ -1,17 +1,88 @@
|
||||
@import "@fontsource/open-sans/variable.css";
|
||||
@import "@fontsource/poppins/400.css";
|
||||
@import "@fontsource/poppins/600.css";
|
||||
@import '@fontsource/open-sans/variable.css';
|
||||
@import '@fontsource/poppins/400.css';
|
||||
@import '@fontsource/poppins/600.css';
|
||||
|
||||
// @import "~antd/dist/antd.dark";
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
font-family: var(--theme-text-body-font-family);
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif;
|
||||
font-size: clamp(14px, 1vw, 17px);
|
||||
background-color: var(--default-bg-color);
|
||||
color: var(--default-text-color);
|
||||
padding: 0;
|
||||
|
||||
color: var(--theme-text-primary);
|
||||
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) {
|
||||
@ -19,176 +90,3 @@ body {
|
||||
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);
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,39 +1,28 @@
|
||||
|
||||
// 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:
|
||||
// Edit the corresponding token file under the style-definitions directory
|
||||
// in the Owncast web project.
|
||||
|
||||
@text-color: var(--theme-text-color);
|
||||
@text-color-secondary: var(--theme-text-color-secondary);
|
||||
@link-color: var(--theme-link-color);
|
||||
@popover-background: var(--theme-text-color-secondary);
|
||||
@text-color: var(--theme-text-primary);
|
||||
@text-color-secondary: var(--theme-text-secondary);
|
||||
@link-color: var(--theme-text-link);
|
||||
@popover-background: var(--theme-background-secondary);
|
||||
@background-color-light: var(--theme-background-secondary);
|
||||
@layout-body-background: var(--theme-background);
|
||||
@primary-color: #6941c6;
|
||||
@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: #6941c6; // The primary color of the application used for rendering controls.
|
||||
@theme-text-color: #d0d5dd; // The color of the text in the application.
|
||||
@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;
|
||||
@layout-body-background: var(--theme-background-primary);
|
||||
@theme-unknown: #00ff00;
|
||||
@theme-unknown-2: #ff0000;
|
||||
@theme-primary: #00ff00; // The primary color of the application used for rendering controls.
|
||||
@theme-text-primary: #030208; // The color of the text in the application.
|
||||
@theme-text-secondary: #63638e;
|
||||
@theme-text-link: #5353a6;
|
||||
@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';
|
||||
@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';
|
||||
@theme-background-primary: #fffcf2; // The main background color of the page.
|
||||
@theme-background-secondary: #f0efe4; // A secondary background color used in sections and controls.
|
||||
@theme-rounded-corners: 0.5em;
|
||||
@theme-user-colors-1: #f40b0b;
|
||||
@theme-user-colors-2: #f4800b;
|
||||
@theme-user-colors-3: #f4f40b;
|
||||
@ -42,37 +31,21 @@
|
||||
@theme-user-colors-6: #0ba6f4;
|
||||
@theme-user-colors-7: #6666ff;
|
||||
@theme-user-colors-8: #f40bf4;
|
||||
@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-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;
|
||||
@owncast-purple: #00ff00;
|
||||
@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: #00ff00;
|
||||
@purple: #ff0000;
|
||||
@blue: #00ff00;
|
||||
@white-88: #ff0000;
|
||||
@purple-dark: #00ff00;
|
||||
@default-link-color: #5353a6;
|
||||
@default-bg-color: #fffcf2;
|
||||
@default-text-color: #030208;
|
||||
@color-unknown: #00ff00;
|
||||
@color-unknown-2: #ff0000;
|
||||
@color-owncast-user-1: #f40b0b;
|
||||
@color-owncast-user-2: #f4800b;
|
||||
@color-owncast-user-3: #f4f40b;
|
||||
@ -81,18 +54,13 @@
|
||||
@color-owncast-user-6: #0ba6f4;
|
||||
@color-owncast-user-7: #6666ff;
|
||||
@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';
|
||||
@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';
|
||||
@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: #9e77ed;
|
||||
@blue: #2086e1;
|
||||
@white-88: #667085;
|
||||
@purple-dark: #42307d;
|
||||
@default-link-color: #6941c6;
|
||||
@default-bg-color: #202232;
|
||||
@default-text-color: #f2f4f7;
|
||||
@color-owncast-text-primary: #030208;
|
||||
@color-owncast-text-secondary: #63638e;
|
||||
@color-owncast-text-highlight: #030208;
|
||||
@color-owncast-text-bright: #5353a6;
|
||||
@color-owncast-background-highlight: #f0e678;
|
||||
@color-owncast-background-primary: #fffcf2;
|
||||
@color-owncast-background-secondary: #f0efe4;
|
||||
@rounded-corners: 0.5em;
|
||||
@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';
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* 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:
|
||||
* Edit the corresponding token file under the style-definitions directory
|
||||
@ -8,38 +8,23 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--text-color: var(--theme-text-color);
|
||||
--text-color-secondary: var(--theme-text-color-secondary);
|
||||
--link-color: var(--theme-link-color);
|
||||
--popover-background: var(--theme-text-color-secondary);
|
||||
--text-color: var(--theme-text-primary);
|
||||
--text-color-secondary: var(--theme-text-secondary);
|
||||
--link-color: var(--theme-text-link);
|
||||
--popover-background: var(--theme-background-secondary);
|
||||
--background-color-light: var(--theme-background-secondary);
|
||||
--layout-body-background: var(--theme-background);
|
||||
--primary-color: #6941c6;
|
||||
--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: #6941c6; /* The primary color of the application used for rendering controls. */
|
||||
--theme-text-color: #d0d5dd; /* The color of the text in the application. */
|
||||
--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;
|
||||
--layout-body-background: var(--theme-background-primary);
|
||||
--theme-unknown: #00ff00;
|
||||
--theme-unknown-2: #ff0000;
|
||||
--theme-primary: #00ff00; /* The primary color of the application used for rendering controls. */
|
||||
--theme-text-primary: #030208; /* The color of the text in the application. */
|
||||
--theme-text-secondary: #63638e;
|
||||
--theme-text-link: #5353a6;
|
||||
--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';
|
||||
--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';
|
||||
--theme-background-primary: #fffcf2; /* The main background color of the page. */
|
||||
--theme-background-secondary: #f0efe4; /* A secondary background color used in sections and controls. */
|
||||
--theme-rounded-corners: 0.5em;
|
||||
--theme-user-colors-1: #f40b0b;
|
||||
--theme-user-colors-2: #f4800b;
|
||||
--theme-user-colors-3: #f4f40b;
|
||||
@ -48,37 +33,21 @@
|
||||
--theme-user-colors-6: #0ba6f4;
|
||||
--theme-user-colors-7: #6666ff;
|
||||
--theme-user-colors-8: #f40bf4;
|
||||
--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-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;
|
||||
--owncast-purple: #00ff00;
|
||||
--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: #00ff00;
|
||||
--purple: #ff0000;
|
||||
--blue: #00ff00;
|
||||
--white-88: #ff0000;
|
||||
--purple-dark: #00ff00;
|
||||
--default-link-color: #5353a6;
|
||||
--default-bg-color: #fffcf2;
|
||||
--default-text-color: #030208;
|
||||
--color-unknown: #00ff00;
|
||||
--color-unknown-2: #ff0000;
|
||||
--color-owncast-user-1: #f40b0b;
|
||||
--color-owncast-user-2: #f4800b;
|
||||
--color-owncast-user-3: #f4f40b;
|
||||
@ -87,23 +56,14 @@
|
||||
--color-owncast-user-6: #0ba6f4;
|
||||
--color-owncast-user-7: #6666ff;
|
||||
--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';
|
||||
--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';
|
||||
--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: #9e77ed;
|
||||
--blue: #2086e1;
|
||||
--white-88: #667085;
|
||||
--purple-dark: #42307d;
|
||||
--default-link-color: #6941c6;
|
||||
--default-bg-color: #202232;
|
||||
--default-text-color: #f2f4f7;
|
||||
--color-owncast-text-primary: #030208;
|
||||
--color-owncast-text-secondary: #63638e;
|
||||
--color-owncast-text-highlight: #030208;
|
||||
--color-owncast-text-bright: #5353a6;
|
||||
--color-owncast-background-highlight: #f0e678;
|
||||
--color-owncast-background-primary: #fffcf2;
|
||||
--color-owncast-background-secondary: #f0efe4;
|
||||
--rounded-corners: 0.5em;
|
||||
--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';
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user