From 695efa9d6b22c75803c1127840081adf13fd7fb4 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Tue, 31 Jan 2023 11:46:44 -0800 Subject: [PATCH] Remove some deprecated css+variables --- web/docs/README.md | 2 +- .../styles/admin/config-video-variants.css | 2 +- .../styles/admin/form-misc-elements.css | 4 +- .../tokens/color/owncast-admin.yaml | 28 - web/styles/ant-overrides.scss.bak | 529 ------------------ web/styles/theme.less | 3 +- web/styles/variables.css | 87 +-- 7 files changed, 27 insertions(+), 628 deletions(-) delete mode 100644 web/style-definitions/tokens/color/owncast-admin.yaml delete mode 100644 web/styles/ant-overrides.scss.bak diff --git a/web/docs/README.md b/web/docs/README.md index 290c7d822..9c52d0ec7 100644 --- a/web/docs/README.md +++ b/web/docs/README.md @@ -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. --- diff --git a/web/public/styles/admin/config-video-variants.css b/web/public/styles/admin/config-video-variants.css index 97d437065..a097a738f 100644 --- a/web/public/styles/admin/config-video-variants.css +++ b/web/public/styles/admin/config-video-variants.css @@ -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 { diff --git a/web/public/styles/admin/form-misc-elements.css b/web/public/styles/admin/form-misc-elements.css index 011d05b86..21c6c84f6 100644 --- a/web/public/styles/admin/form-misc-elements.css +++ b/web/public/styles/admin/form-misc-elements.css @@ -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 { diff --git a/web/style-definitions/tokens/color/owncast-admin.yaml b/web/style-definitions/tokens/color/owncast-admin.yaml deleted file mode 100644 index 453bcd463..000000000 --- a/web/style-definitions/tokens/color/owncast-admin.yaml +++ /dev/null @@ -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}' diff --git a/web/styles/ant-overrides.scss.bak b/web/styles/ant-overrides.scss.bak deleted file mode 100644 index e75b9aece..000000000 --- a/web/styles/ant-overrides.scss.bak +++ /dev/null @@ -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; - } -} - diff --git a/web/styles/theme.less b/web/styles/theme.less index 72d83aa8a..79665b950 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -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; diff --git a/web/styles/variables.css b/web/styles/variables.css index 0ac652aa1..79ac87df1 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -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'; }