Added moderator menu to messages and some other styling.

created new ant overrides file.

Ignore the static directory

.prettierignore

@@ -1,3 +1,4 @@
 # Ignore artifacts:
 build/javascript
 webroot/js/web_modules
+static/

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -9,6 +9,7 @@
 
 .toBottomWrap {
   display: flex;
+  opacity: 0.9;
   width: 100%;
   justify-content: center;
   position: absolute;

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -43,7 +43,8 @@ export default function ChatContainer(props: Props) {
             message={message as ChatMessage}
             showModeratorMenu={isModerator} // Moderators have access to an additional menu
             highlightString={usernameToHighlight} // What to highlight in the message
-            renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
+            sentBySelf={message.user?.id === chatUserId} // The local user sent this message
+            sameUserAsLast={message.user?.id === messages[messages.length - 1].user?.id}
             key={message.id}
           />
         );
@@ -70,7 +71,7 @@ export default function ChatContainer(props: Props) {
         {!atBottom && (
           <div className={s.toBottomWrap}>
             <Button
-              ghost
+              type="default"
               icon={<VerticalAlignBottomOutlined />}
               onClick={() =>
                 chatContainerRef.current.scrollToIndex({

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -6,6 +6,7 @@
   // animation: chatFadeIn .1s ease-in;
   .background {
     position: absolute;
+    z-index: -1;
     top: 0px;
     left: 0px;
     width: 100%;
@@ -16,8 +17,7 @@
     overflow: hidden;
   }
   .user {
-    font: var(--theme-header-font-family);
-    color: var(--color-owncast-grey-100);
+    font-family: var(--theme-header-font-family);
     font-weight: bold;
   }
   .message {
@@ -38,6 +38,7 @@
       box-decoration-break: clone;
     }
   }
+
   .customBorder {
     position: absolute;
     top: 0px;
@@ -53,7 +54,7 @@
       top: 0%;
       right: 0px;
       background-color: currentColor;
-      border-radius: 0.5rem;
+      border-radius: var(--theme-rounded-corners);
     }
   }
 
@@ -66,6 +67,17 @@
       }
     }
   }
+
+  .modMenuWrapper {
+    position: absolute;
+    display: none;
+    top: 0;
+    right: 10px;
+  }
+
+  &:hover .modMenuWrapper {
+    display: block;
+  }
 }
 
 

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -3,22 +3,26 @@ import { useEffect, useState } from 'react';
 import { Highlight } from 'react-highlighter-ts';
 import he from 'he';
 import cn from 'classnames';
-import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { formatTimestamp } from './messageFmt';
+import { Button, Dropdown, Menu } from 'antd';
+import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icons';
 import s from './ChatUserMessage.module.scss';
+import { formatTimestamp } from './messageFmt';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 
 interface Props {
   message: ChatMessage;
   showModeratorMenu: boolean;
   highlightString: string;
-  renderAsPersonallySent: boolean;
+  sentBySelf: boolean;
+  sameUserAsLast: boolean;
 }
 
 export default function ChatUserMessage({
   message,
   highlightString,
   showModeratorMenu,
-  renderAsPersonallySent, // Move the border to the right and render a background
+  sentBySelf, // Move the border to the right and render a background
+  sameUserAsLast,
 }: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
@@ -32,24 +36,62 @@ export default function ChatUserMessage({
   }, [message]);
 
   return (
-    <div style={{ padding: 5 }}>
+    <div style={{ padding: 3.5 }}>
       <div
         className={cn(s.root, {
-          [s.ownMessage]: renderAsPersonallySent,
+          [s.ownMessage]: sentBySelf,
         })}
         style={{ borderColor: color }}
         title={formattedTimestamp}
       >
-        <div className={s.user} style={{ color }}>
-          {displayName}
-        </div>
+        {!sameUserAsLast && (
+          <div className={s.user} style={{ color }}>
+            {displayName}
+          </div>
+        )}
         <Highlight search={highlightString}>
           <div className={s.message}>{formattedMessage}</div>
         </Highlight>
-        {showModeratorMenu && <div>Moderator menu</div>}
+        {showModeratorMenu && <ModeratorMenu />}
         <div className={s.customBorder} style={{ color }} />
         <div className={s.background} style={{ color }} />
       </div>
     </div>
   );
 }
+
+function ModeratorMenu() {
+  const menu = (
+    <Menu
+      items={[
+        {
+          label: (
+            <div>
+              <DeleteOutlined style={{ marginRight: 5 }} />
+              Hide message
+            </div>
+          ),
+          key: 0,
+        },
+
+        {
+          label: (
+            <div>
+              <StopOutlined style={{ marginRight: 5 }} />
+              Ban User
+            </div>
+          ),
+          key: 1,
+        },
+      ]}
+    />
+  );
+
+  return (
+    <div className={s.modMenuWrapper}>
+      <Dropdown overlay={menu} trigger={['click']}>
+        <Button ghost icon={<EllipsisOutlined />} />
+      </Dropdown>
+    </div>
+  );
+}

web/pages/_app.tsx

@@ -5,7 +5,7 @@
 import '../styles/variables.css';
 import '../styles/global.less';
 import '../styles/globals.scss';
-// import '../styles/ant-overrides.scss';
+import '../styles/ant-overrides.scss';
 // import '../styles/markdown-editor.scss';
 
 import '../styles/main-layout.scss';

web/style-definitions/tokens/color/default-theme.yaml

@@ -25,7 +25,7 @@ theme:
     value: '{color.owncast.background-secondary.value}'
     comment: 'A secondary background color used in sections and controls.'
   rounded-corners:
-    value: '5px'
+    value: '.5rem'
     comment: 'The radius of rounded corners used in places.'
 
   success-color:

web/styles/ant-overrides.scss

@@ -1,260 +1,7 @@
-// GENERAL ANT OVERRIDES
+/* ------------------------- //
+  BUTTONS
+// ------------------------- */
 
-// 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;
@@ -271,6 +18,9 @@ textarea.ant-input {
   &:focus {
     border-color: var(--owncast-purple-25);
   }
+  &[ant-click-animating-without-extra-node]:after {
+    animation: 0s !important;
+ }
 }
 
 .ant-btn-primary {
@@ -285,243 +35,20 @@ textarea.ant-input {
   }
 }
 
-.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-btn-background-ghost {
+  border: 0px;
+  box-shadow: none !important;
+  &:hover,
+  &:focus {
+    background-color: var(--theme-info-color);
   }
-}
-.ant-table-thead th.ant-table-column-sort,
-.ant-dropdown-trigger.active {
-  background-color: var(--owncast-purple-25);
-  opacity: 0.75;
-}
-// DROPDOWN 
+} 
+
+/* ------------------------- //
+  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);
-  }
+  background-color: var(--color-owncast-background-secondary);
 }
-// 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/ant-overrides.scss.bak

@@ -0,0 +1,529 @@
+// 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/globals.scss

@@ -7,7 +7,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: var(--theme-font-family);
+  font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif;
   font-size: 16px;
 
   background-color: var(--default-bg-color);