Remove some deprecated css+variables

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

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 {

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 {

web/style-definitions/tokens/color/owncast-admin.yaml

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

web/styles/ant-overrides.scss.bak

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

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;

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(
+  --theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */
-    --font-owncast-body
+  --theme-text-display-font-family: var(--font-owncast-display); /* The font family used for the display/header text. */
-  ); /* 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-components-primary-button-background: var(--theme-color-action); /* Text link/secondary light text */
-    --theme-color-action
+  --theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); /* Disabled background */
-  ); /* 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-components-primary-button-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */
-    --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-components-primary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
-    --theme-color-action-disabled
+  --theme-color-components-secondary-button-background: var(--theme-color-palette-4); /* Light secondary */
-  ); /* 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-components-secondary-button-text: var(--theme-color-action-disabled); /* Disabled background */
-    --theme-color-action-disabled
+  --theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); /* Disabled background */
-  ); /* Disabled background */
+  --theme-color-components-secondary-button-border: var(--theme-color-action); /* Text link/secondary light text */
-  --theme-color-components-secondary-button-text-disabled: var(
+  --theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
-    --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-components-content-background: var(--theme-color-palette-15); /* Lighter background */
-    --theme-color-palette-15
+  --theme-color-components-modal-header-background: var(--theme-color-palette-1); /* Dark secondary */
-  ); /* 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-components-modal-content-background: var(--theme-color-palette-3); /* Light primary */
-    --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-components-form-field-background: var(--theme-color-palette-4); /* Light secondary */
-    --theme-color-palette-4
+  --theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); /* Disabled background */
-  ); /* 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-components-video-live-indicator: var(--theme-color-palette-7); /* The Live dot indicator in the control bar of the video player */
-    --theme-color-palette-7
+  --theme-color-components-video-status-bar-background: var(--theme-color-palette-2); /* The background color of the video status bar */
-  ); /* The Live dot indicator in the control bar of the video player */
+  --theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); /* The foreground color of the video status bar */
-  --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;
@@ -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,
+  --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';
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI 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';
-    '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';
 }