Hide scrollbars

web/components/admin/config/general/AppearanceConfig.tsx

@@ -45,8 +45,6 @@ const componentColorVariables = [
   { name: 'theme-color-components-text-on-light', description: 'Text: Dark' },
   { name: 'theme-color-background-header', description: 'Header/Footer' },
   { name: 'theme-color-components-content-background', description: 'Page Content' },
-  { name: 'theme-color-components-scrollbar-background', description: 'Scrollbar Background' },
-  { name: 'theme-color-components-scrollbar-thumb', description: 'Scrollbar Thumb' },
 ];
 
 const others = [{ name: 'theme-rounded-corners', description: 'Corner radius' }];

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

@@ -45,13 +45,11 @@
 }
 
 .virtuoso::-webkit-scrollbar {
-  width: 5px;
+  display: none;
-  height: auto;
-  background-color: var(--theme-color-components-chat-background);
 }
 
 .virtuoso::-webkit-scrollbar-thumb {
-  background: var(--theme-color-components-scrollbar-thumb);
+  display: none;
 }
 
 .chatTextField {

web/components/ui/Content/Content.module.scss

@@ -20,14 +20,11 @@
   }
 
   .mainSection::-webkit-scrollbar {
-    width: 5px;
+    display: none;
-    height: auto;
-    background-color: var(--theme-color-components-scrollbar-background);
   }
 
   .mainSection::-webkit-scrollbar-thumb {
-    background: var(--theme-color-components-scrollbar-thumb);
+    display: none;
-    border-radius: 1px;
   }
 
   .topSection {

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

@@ -185,14 +185,6 @@ theme:
           value: 'var(--theme-color-palette-15)'
           comment: '{theme.color.palette.15.comment}'
 
-      scrollbar:
-        background:
-          value: 'var(--theme-color-palette-15)'
-          comment: '{theme.color.palette.15.comment}'
-        thumb:
-          value: 'var(--theme-color-palette-6)'
-          comment: '{theme.color.palette.6.comment}'
-
       modal:
         header:
           background:

web/styles/theme.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 21 Dec 2022 07:38:01 GMT
+// Generated on Wed, 18 Jan 2023 22:45:39 GMT
 // 
 // How to edit these values:
 // Edit the corresponding token file under the style-definitions directory
@@ -86,8 +86,6 @@
 @theme-color-components-chat-background: var(--theme-color-palette-15); // Lighter background
 @theme-color-components-chat-text: var(--theme-color-palette-2); // Dark alternate
 @theme-color-components-content-background: var(--theme-color-palette-15); // Lighter background
-@theme-color-components-scrollbar-background: var(--theme-color-palette-15); // Lighter background
-@theme-color-components-scrollbar-thumb: var(--theme-color-palette-6); // Text link/secondary light text
 @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

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 21 Dec 2022 07:38:01 GMT
+ * Generated on Wed, 18 Jan 2023 22:45:39 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,74 +73,36 @@
   --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
+  --theme-color-components-primary-button-border: var(--theme-color-palette-4); /* Light secondary */
-  ); /* Neutral gray light */
+  --theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */
-  --theme-color-components-primary-button-border: var(
+  --theme-color-components-secondary-button-background: var(--theme-color-palette-4); /* Light secondary */
-    --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-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-15); /* Lighter background */
   --theme-color-components-chat-text: var(--theme-color-palette-2); /* Dark alternate */
-  --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-scrollbar-background: var(
-    --theme-color-palette-15
-  ); /* Lighter background */
-  --theme-color-components-scrollbar-thumb: var(
-    --theme-color-palette-6
-  ); /* Text link/secondary light text */
-  --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
-  ); /* The Live dot indicator in the control bar of the video player */
   --owncast-purple-25: rgba(120, 113, 255, 0.25);
   --color-unknown: #7a5cf3;
   --color-unknown-2: #fffffe;
@@ -174,10 +132,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';
 }