mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 12:18:02 +03:00
Remove some deprecated css+variables
This commit is contained in:
Gabe Kangas
parent
5c4e8f0a2d
commit
695efa9d6b
7 changed files with 27 additions and 628 deletions
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
- This admin site chooses to have a generally Dark color palette, but with colors that are different from Ant design's _dark_ stylesheet, so that style sheet is not included. This results in a very large `ant-overrides.scss` file to reset colors on frequently used Ant components in the system. If you find yourself a new Ant Component that has not yet been used in this app, feel free to add a reset style for that component to the overrides stylesheet.
|
||||
|
||||
- Take a look at `variables.scss` CSS file if you want to give some elements custom css colors.
|
||||
- Take a look at `variables.css` CSS file if you want to give some elements custom css colors.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
font-size: 0.88em;
|
||||
font-weight: 500;
|
||||
background-color: var(--black-50);
|
||||
border-radius: var(--container-border-radius);
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
}
|
||||
.config-variant-form .cpu-usage-container,
|
||||
.config-variant-form .bitrate-container {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 1em 2em 0.75em;
|
||||
background-color: var(--owncast-purple-25);
|
||||
background-color: var(--color-owncast-palette-7);
|
||||
border-radius: var(--container-border-radius);
|
||||
}
|
||||
.segment-slider-container .status-container {
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
line-height: normal;
|
||||
color: var(--white);
|
||||
padding: 1em;
|
||||
border-radius: var(--container-border-radius);
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
background-color: var(--black-35);
|
||||
}
|
||||
.segment-tip {
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
# 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,529 +0,0 @@
|
|||
// GENERAL ANT OVERRIDES
|
||||
|
||||
// RESET BG, TEXT COLORS
|
||||
.ant-layout,
|
||||
.ant-layout-header,
|
||||
.ant-layout-sider,
|
||||
.ant-layout-footer,
|
||||
.ant-card,
|
||||
.ant-collapse,
|
||||
.ant-collapse-content,
|
||||
.ant-statistic,
|
||||
.ant-statistic-title,
|
||||
.ant-statistic-content,
|
||||
.ant-table,
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th,
|
||||
th.ant-table-column-sort,
|
||||
td.ant-table-column-sort,
|
||||
.ant-table-tbody > tr.ant-table-row:hover > td,
|
||||
.ant-table-thead th.ant-table-column-sort,
|
||||
.ant-menu,
|
||||
.ant-menu-submenu > .ant-menu,
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: transparent;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
h1.ant-typography,
|
||||
h2.ant-typography,
|
||||
h3.ant-typography,
|
||||
h4.ant-typography,
|
||||
h5.ant-typography,
|
||||
.ant-typography,
|
||||
.ant-typography h1,
|
||||
.ant-typography h2,
|
||||
.ant-typography h3,
|
||||
.ant-typography h4,
|
||||
.ant-typography h5 {
|
||||
color: var(--white);
|
||||
font-weight: 400;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.ant-typography.ant-typography-secondary {
|
||||
color: var(--white);
|
||||
font-weight: 400;
|
||||
}
|
||||
.ant-typography {
|
||||
font-weight: 300;
|
||||
color: var(--white-75);
|
||||
a {
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
|
||||
// .ant-typography h1,
|
||||
// h1.ant-typography {
|
||||
// font-size: 1.75em;
|
||||
// color: var(--pink);
|
||||
// &:first-of-type {
|
||||
// margin-top: 0;
|
||||
// }
|
||||
// }
|
||||
.ant-typography h2,
|
||||
h2.ant-typography {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.ant-typography h3,
|
||||
h3.ant-typography {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.ant-progress-text,
|
||||
.ant-progress-circle .ant-progress-text {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
// ANT MENU
|
||||
// menu base
|
||||
.ant-menu-item {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
|
||||
.anticon {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
color: var(--nav-text);
|
||||
}
|
||||
|
||||
a {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
color: var(--nav-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--black-50);
|
||||
color: var(--white);
|
||||
.anticon {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-item:active,
|
||||
.ant-menu-submenu-title:active {
|
||||
background-color: var(--black-50);
|
||||
}
|
||||
|
||||
// menu item selected
|
||||
.ant-menu-item-selected,
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: var(--black);
|
||||
a {
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
.anticon {
|
||||
color: var(--nav-selected-text);
|
||||
}
|
||||
|
||||
// the right border color
|
||||
&:after {
|
||||
border-color: var(--nav-selected-text);
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
}
|
||||
}
|
||||
// submenu items
|
||||
.ant-menu-submenu {
|
||||
& > .ant-menu {
|
||||
border-left: 1px solid var(--white-50);
|
||||
background-color: var(--black-35);
|
||||
}
|
||||
.ant-menu-submenu-title {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
color: var(--nav-text);
|
||||
|
||||
.anticon {
|
||||
color: var(--nav-text);
|
||||
}
|
||||
.ant-menu-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-image: linear-gradient(to right, var(--nav-text), var(--nav-text));
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.ant-menu-submenu-title {
|
||||
color: var(--white);
|
||||
.anticon {
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-menu-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
background-image: linear-gradient(to right, var(--white), var(--white));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ANT RESULT
|
||||
.ant-result-title {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-result-subtitle {
|
||||
color: var(--white-75);
|
||||
}
|
||||
|
||||
// ANT CARD
|
||||
.ant-card {
|
||||
border-radius: var(--container-border-radius);
|
||||
background-color: var(--container-bg-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.ant-card-bordered {
|
||||
border-color: var(--white-25);
|
||||
}
|
||||
.ant-card-meta-title {
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
color: var(--white-75);
|
||||
}
|
||||
.ant-card-type-inner .ant-card-head {
|
||||
background-color: var(--black);
|
||||
color: var(--white-88);
|
||||
border-color: var(--white-25);
|
||||
}
|
||||
|
||||
// ANT INPUT
|
||||
input.ant-input,
|
||||
textarea.ant-input {
|
||||
background-color: var(--textfield-bg);
|
||||
color: var(--white-88);
|
||||
border-color: var(--black);
|
||||
&::placeholder {
|
||||
color: var(--owncast-purple-50);
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-input-number {
|
||||
background-color: var(--textfield-bg);
|
||||
border-color: var(--textfield-border);
|
||||
input,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
color: var(--white-88);
|
||||
border-color: var(--black);
|
||||
&::placeholder {
|
||||
color: var(--owncast-purple-50);
|
||||
}
|
||||
&:-webkit-autofill {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-input:hover,
|
||||
.ant-input-number:hover,
|
||||
.ant-input-affix-wrapper:hover {
|
||||
border-color: var(--owncast-purple);
|
||||
input,
|
||||
textarea {
|
||||
border-color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-number:focus,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
border-color: var(--owncast-purple);
|
||||
input,
|
||||
textarea {
|
||||
color: var(--white);
|
||||
border-color: var(--owncast-purple);
|
||||
}
|
||||
}
|
||||
|
||||
textarea.ant-input {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.ant-input-suffix,
|
||||
.ant-input-clear-icon,
|
||||
.ant-input-textarea-clear-icon,
|
||||
.ant-input-password-icon {
|
||||
color: var(--white-50);
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
// ANT BUTTON
|
||||
.ant-btn {
|
||||
background-color: var(--owncast-purple-25);
|
||||
font-size: .85rem;
|
||||
font-weight: bold;
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
border-color: transparent;
|
||||
color: var(--white-75);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-owncast-purple-700);
|
||||
border-color: transparent;
|
||||
color: var(--white);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--owncast-purple-25);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: var(--owncast-purple-50);
|
||||
}
|
||||
|
||||
.ant-btn-primary[disabled] {
|
||||
background-color: var(--white-25);
|
||||
color: var(--white-50);
|
||||
&:hover {
|
||||
background-color: var(--white-35);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-
|
||||
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-btn {
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.ant-btn-dangerous {
|
||||
color: var(--white-88);
|
||||
border-color: var(--ant-error);
|
||||
background-color: var(--purple-dark);
|
||||
}
|
||||
.ant-btn-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// ANT TABLE
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-filter-dropdown,
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-color: var(--purple-dark);
|
||||
font-weight: 500;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td,
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
border-color: var(--white-15);
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
transition-duration: var(--ant-transition-duration);
|
||||
background-color: var(--gray-dark);
|
||||
color: var(--white-75);
|
||||
}
|
||||
.ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
background-color: var(--gray-dark);
|
||||
}
|
||||
.ant-table-tbody > tr.ant-table-row-selected > td {
|
||||
background: var(--white-25);
|
||||
}
|
||||
|
||||
.ant-empty {
|
||||
color: var(--white-75);
|
||||
}
|
||||
.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
|
||||
.ant-empty-image {
|
||||
display: none;
|
||||
}
|
||||
&:hover > td {
|
||||
background-color: var(--gray-dark);
|
||||
}
|
||||
}
|
||||
.ant-table-thead th.ant-table-column-has-sorters:hover {
|
||||
background-color: var(--textfield-border);
|
||||
.ant-table-filter-trigger-container {
|
||||
background-color: var(--textfield-border);
|
||||
}
|
||||
}
|
||||
.ant-table-thead th.ant-table-column-sort,
|
||||
.ant-dropdown-trigger.active {
|
||||
background-color: var(--owncast-purple-25);
|
||||
opacity: 0.75;
|
||||
}
|
||||
// DROPDOWN
|
||||
|
||||
.ant-dropdown-menu {
|
||||
padding: 10px 7px;
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
background-color: var(--color-owncast-background);
|
||||
li {
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
}
|
||||
}
|
||||
// SELECT
|
||||
.ant-select-dropdown {
|
||||
background-color: var(--black);
|
||||
}
|
||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||
background-color: var(--black);
|
||||
border-color: var(--owncast-purple-50);
|
||||
}
|
||||
.ant-select-arrow {
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
.ant-select-selection-placeholder {
|
||||
color: var(--owncast-purple-50);
|
||||
}
|
||||
.ant-select {
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-select-item {
|
||||
background-color: var(--gray-dark);
|
||||
color: var(--white-88);
|
||||
}
|
||||
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||||
background-color: var(--gray);
|
||||
color: var(--white-75);
|
||||
}
|
||||
|
||||
// SLIDER
|
||||
// .ant-slider-with-marks {
|
||||
// margin-right: 2em;
|
||||
// }
|
||||
.ant-slider-mark-text {
|
||||
font-size: 0.85em;
|
||||
white-space: nowrap;
|
||||
color: var(--white);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ant-slider-handle {
|
||||
border-color: var(--blue);
|
||||
}
|
||||
.ant-slider:hover .ant-slider-track {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
.ant-slider-rail {
|
||||
background-color: var(--black);
|
||||
}
|
||||
.ant-slider-track {
|
||||
background-color: var(--nav-text);
|
||||
}
|
||||
.ant-slider-mark-text-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// ANT SWITCH
|
||||
.ant-switch {
|
||||
background-color: var(--gray-medium);
|
||||
}
|
||||
.ant-switch-checked {
|
||||
background-color: var(--ant-success);
|
||||
.ant-switch-inner {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
// ANT COLLAPSE
|
||||
.ant-collapse {
|
||||
font-size: 1em;
|
||||
border-color: transparent;
|
||||
& > .ant-collapse-item,
|
||||
.ant-collapse-content {
|
||||
border-color: transparent;
|
||||
& > .ant-collapse-header {
|
||||
border-radius: var(--container-border-radius);
|
||||
border-color: transparent;
|
||||
background-color: var(--purple-dark);
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-collapse-content {
|
||||
background-color: var(--black-35); //#181231;
|
||||
}
|
||||
.ant-collapse > .ant-collapse-item:last-child,
|
||||
.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
|
||||
border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
|
||||
}
|
||||
.ant-collapse-item:last-child > .ant-collapse-content {
|
||||
border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
|
||||
}
|
||||
|
||||
|
||||
// ANT TOOLTIP
|
||||
.ant-tooltip {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.ant-tooltip-inner {
|
||||
color: var(--white);
|
||||
}
|
||||
.ant-tooltip-inner,
|
||||
.ant-tooltip-arrow-content {
|
||||
background-color: var(--tooltip-base-color);
|
||||
}
|
||||
|
||||
// ANT TAGS
|
||||
.ant-tag-red,
|
||||
.ant-tag-orange,
|
||||
.ant-tag-green,
|
||||
.ant-tag-purple,
|
||||
.ant-tag-blue {
|
||||
background-color: var(--black);
|
||||
}
|
||||
|
||||
// ANT PAGINATOR
|
||||
.ant-pagination-item {
|
||||
border-color: var(--white);
|
||||
color: var(--default-link-color);
|
||||
a {
|
||||
color: var(--default-link-color);
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--white);
|
||||
a {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-pagination-item-active {
|
||||
color: var(--white);
|
||||
background-color: var(--default-link-color);
|
||||
border-color: var(--default-link-color);
|
||||
a {
|
||||
color: var(--white);
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: var(--default-link-color);
|
||||
a {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
.ant-pagination-item-link {
|
||||
color: var(--default-link-color);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ANT CHECKBOX
|
||||
.ant-checkbox-wrapper {
|
||||
color: var(--white-75);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.ant-checkbox-group {
|
||||
.ant-checkbox-group-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
// Do not edit directly
|
||||
// Generated on Sun, 29 Jan 2023 22:10:49 GMT
|
||||
// Generated on Tue, 31 Jan 2023 19:44:59 GMT
|
||||
//
|
||||
// How to edit these values:
|
||||
// Edit the corresponding token file under the style-definitions directory
|
||||
|
|
@ -103,7 +103,6 @@
|
|||
@theme-color-components-video-live-indicator: var(--theme-color-palette-7); // The Live dot indicator in the control bar of the video player
|
||||
@theme-color-components-video-status-bar-background: var(--theme-color-palette-2); // The background color of the video status bar
|
||||
@theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); // The foreground color of the video status bar
|
||||
@owncast-purple-25: rgba(120, 113, 255, 0.25);
|
||||
@color-unknown: #7a5cf3;
|
||||
@color-unknown-2: #fffffe;
|
||||
@color-owncast-user-0: #ff717b;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* Do not edit directly
|
||||
* Generated on Sun, 29 Jan 2023 22:10:49 GMT
|
||||
* Generated on Tue, 31 Jan 2023 19:44:59 GMT
|
||||
*
|
||||
* How to edit these values:
|
||||
* Edit the corresponding token file under the style-definitions directory
|
||||
|
|
@ -35,12 +35,8 @@
|
|||
--theme-rounded-corners: 9px; /* How much corners are rounded in places in the UI. */
|
||||
--theme-unknown-1: green; /* This should never be used and it means something is wrong. */
|
||||
--theme-unknown-2: red; /* This should never be used and it means something is wrong. */
|
||||
--theme-text-body-font-family: var(
|
||||
--font-owncast-body
|
||||
); /* The font family used for the body text. */
|
||||
--theme-text-display-font-family: var(
|
||||
--font-owncast-display
|
||||
); /* The font family used for the display/header text. */
|
||||
--theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */
|
||||
--theme-text-display-font-family: var(--font-owncast-display); /* The font family used for the display/header text. */
|
||||
--theme-color-users-0: var(--color-owncast-user-0);
|
||||
--theme-color-users-1: var(--color-owncast-user-1);
|
||||
--theme-color-users-2: var(--color-owncast-user-2);
|
||||
|
|
@ -77,73 +73,38 @@
|
|||
--theme-color-warning: var(--theme-color-palette-warning); /* Warning */
|
||||
--theme-color-components-text-on-light: var(--theme-color-palette-0); /* Dark primary */
|
||||
--theme-color-components-text-on-dark: var(--theme-color-palette-3); /* Light primary */
|
||||
--theme-color-components-primary-button-background: var(
|
||||
--theme-color-action
|
||||
); /* Text link/secondary light text */
|
||||
--theme-color-components-primary-button-background-disabled: var(
|
||||
--theme-color-action-disabled
|
||||
); /* Disabled background */
|
||||
--theme-color-components-primary-button-background: var(--theme-color-action); /* Text link/secondary light text */
|
||||
--theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); /* Disabled background */
|
||||
--theme-color-components-primary-button-text: var(--theme-color-palette-4); /* Light secondary */
|
||||
--theme-color-components-primary-button-text-disabled: var(
|
||||
--theme-color-palette-10
|
||||
); /* Neutral gray light */
|
||||
--theme-color-components-primary-button-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */
|
||||
--theme-color-components-primary-button-border: var(--theme-color-action); /* Light secondary */
|
||||
--theme-color-components-primary-button-border-disabled: var(
|
||||
--theme-color-action-disabled
|
||||
); /* Disabled background */
|
||||
--theme-color-components-secondary-button-background: var(
|
||||
--theme-color-palette-4
|
||||
); /* Light secondary */
|
||||
--theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
|
||||
--theme-color-components-secondary-button-background: var(--theme-color-palette-4); /* Light secondary */
|
||||
--theme-color-components-secondary-button-background-disabled: transparent;
|
||||
--theme-color-components-secondary-button-text: var(
|
||||
--theme-color-action-disabled
|
||||
); /* Disabled background */
|
||||
--theme-color-components-secondary-button-text-disabled: var(
|
||||
--theme-color-action-disabled
|
||||
); /* Disabled background */
|
||||
--theme-color-components-secondary-button-border: var(
|
||||
--theme-color-action
|
||||
); /* Text link/secondary light text */
|
||||
--theme-color-components-secondary-button-border-disabled: var(
|
||||
--theme-color-action-disabled
|
||||
); /* Disabled background */
|
||||
--theme-color-components-secondary-button-text: var(--theme-color-action-disabled); /* Disabled background */
|
||||
--theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); /* Disabled background */
|
||||
--theme-color-components-secondary-button-border: var(--theme-color-action); /* Text link/secondary light text */
|
||||
--theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
|
||||
--theme-color-components-chat-background: var(--theme-color-palette-1); /* Dark primary */
|
||||
--theme-color-components-chat-text: var(--theme-color-palette-15); /* Lighter background */
|
||||
--theme-color-components-content-background: var(
|
||||
--theme-color-palette-15
|
||||
); /* Lighter background */
|
||||
--theme-color-components-modal-header-background: var(
|
||||
--theme-color-palette-1
|
||||
); /* Dark secondary */
|
||||
--theme-color-components-content-background: var(--theme-color-palette-15); /* Lighter background */
|
||||
--theme-color-components-modal-header-background: var(--theme-color-palette-1); /* Dark secondary */
|
||||
--theme-color-components-modal-header-text: var(--theme-color-palette-3); /* Light primary */
|
||||
--theme-color-components-modal-content-background: var(
|
||||
--theme-color-palette-3
|
||||
); /* Light primary */
|
||||
--theme-color-components-modal-content-background: var(--theme-color-palette-3); /* Light primary */
|
||||
--theme-color-components-modal-content-text: var(--theme-color-palette-0); /* Dark primary */
|
||||
--theme-color-components-menu-background: var(--theme-color-palette-3); /* Light primary */
|
||||
--theme-color-components-menu-item-text: var(--theme-color-palette-0); /* Dark primary */
|
||||
--theme-color-components-menu-item-bg: transparent;
|
||||
--theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05);
|
||||
--theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1);
|
||||
--theme-color-components-form-field-background: var(
|
||||
--theme-color-palette-4
|
||||
); /* Light secondary */
|
||||
--theme-color-components-form-field-placeholder: var(
|
||||
--theme-color-action-disabled
|
||||
); /* Disabled background */
|
||||
--theme-color-components-form-field-background: var(--theme-color-palette-4); /* Light secondary */
|
||||
--theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); /* Disabled background */
|
||||
--theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */
|
||||
--theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */
|
||||
--theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */
|
||||
--theme-color-components-video-live-indicator: var(
|
||||
--theme-color-palette-7
|
||||
); /* The Live dot indicator in the control bar of the video player */
|
||||
--theme-color-components-video-status-bar-background: var(
|
||||
--theme-color-palette-2
|
||||
); /* The background color of the video status bar */
|
||||
--theme-color-components-video-status-bar-foreground: var(
|
||||
--theme-color-palette-4
|
||||
); /* The foreground color of the video status bar */
|
||||
--owncast-purple-25: rgba(120, 113, 255, 0.25);
|
||||
--theme-color-components-video-live-indicator: var(--theme-color-palette-7); /* The Live dot indicator in the control bar of the video player */
|
||||
--theme-color-components-video-status-bar-background: var(--theme-color-palette-2); /* The background color of the video status bar */
|
||||
--theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); /* The foreground color of the video status bar */
|
||||
--color-unknown: #7a5cf3;
|
||||
--color-unknown-2: #fffffe;
|
||||
--color-owncast-user-0: #ff717b;
|
||||
|
|
@ -172,10 +133,6 @@
|
|||
--color-owncast-palette-15: #eff1f4; /* Lighter background */
|
||||
--color-owncast-palette-error: #ff4b39; /* Error */
|
||||
--color-owncast-palette-warning: #ffc655; /* Warning */
|
||||
--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';
|
||||
--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…
Reference in a new issue