From a1a327203159b5c1ac165416057c957d693647ab Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Wed, 18 Jan 2023 14:45:59 -0800 Subject: [PATCH] Hide scrollbars --- .../admin/config/general/AppearanceConfig.tsx | 2 - .../ChatContainer/ChatContainer.module.scss | 6 +- web/components/ui/Content/Content.module.scss | 7 +- .../tokens/color/default-theme.yaml | 8 -- web/styles/theme.less | 4 +- web/styles/variables.css | 88 +++++-------------- 6 files changed, 26 insertions(+), 89 deletions(-) diff --git a/web/components/admin/config/general/AppearanceConfig.tsx b/web/components/admin/config/general/AppearanceConfig.tsx index 95b0225ea..f74efacc5 100644 --- a/web/components/admin/config/general/AppearanceConfig.tsx +++ b/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' }]; diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss index 0d2dd3372..da1b250b5 100644 --- a/web/components/chat/ChatContainer/ChatContainer.module.scss +++ b/web/components/chat/ChatContainer/ChatContainer.module.scss @@ -45,13 +45,11 @@ } .virtuoso::-webkit-scrollbar { - width: 5px; - height: auto; - background-color: var(--theme-color-components-chat-background); + display: none; } .virtuoso::-webkit-scrollbar-thumb { - background: var(--theme-color-components-scrollbar-thumb); + display: none; } .chatTextField { diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index 3659d7b02..54b8b7c52 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -20,14 +20,11 @@ } .mainSection::-webkit-scrollbar { - width: 5px; - height: auto; - background-color: var(--theme-color-components-scrollbar-background); + display: none; } .mainSection::-webkit-scrollbar-thumb { - background: var(--theme-color-components-scrollbar-thumb); - border-radius: 1px; + display: none; } .topSection { diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 4c7311657..4af922b4f 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/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: diff --git a/web/styles/theme.less b/web/styles/theme.less index 0e7318c7f..20c6851bd 100644 --- a/web/styles/theme.less +++ b/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 diff --git a/web/styles/variables.css b/web/styles/variables.css index e2d580f46..b76f7cc2d 100644 --- a/web/styles/variables.css +++ b/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( - --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,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-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-border: 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-primary-button-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */ + --theme-color-components-primary-button-border: 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-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-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-live-indicator: var(--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, - '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'; }