mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Allow for custom scrollbar styling

Browse source
This commit is contained in:
Gabe Kangas 2022-11-13 12:37:31 -08:00
parent f348203016
commit 769f05db2c
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
6 changed files with 68 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/components/chat/ChatContainer/ChatContainer.module.scss
View file

@ -51,3 +51,17 @@
overflow-y: scroll;
overflow-x: hidden;
}
.virtuoso::-webkit-scrollbar {
width: 5px;
height: auto;
background-color: var(--theme-color-components-chat-background);
}
.virtuoso::-webkit-scrollbar-thumb {
background: var(--theme-color-components-scrollbar-thumb);
}
.chatTextField {
border-top: 1px solid lightgray;
}

6
web/components/chat/ChatContainer/ChatContainer.tsx
View file

@ -192,7 +192,11 @@ export const ChatContainer: FC<ChatContainerProps> = ({
return (
<div id="chat-container" className={styles.chatContainer}>
{MessagesTable}
{showInput && <ChatTextField />}
{showInput && (
<div className={styles.chatTextField}>
<ChatTextField />
</div>
)}
</div>
);
};

11
web/components/ui/Content/Content.module.scss
View file

@ -16,6 +16,16 @@
flex-direction: column;
}
.mainSection::-webkit-scrollbar {
width: 5px;
height: auto;
background-color: var(--theme-color-components-scrollbar-background);
}
.mainSection::-webkit-scrollbar-thumb {
background: var(--theme-color-components-scrollbar-thumb);
}
.topSection {
padding: 0;
background-color: var(--theme-color-components-video-background);
@ -45,4 +55,3 @@
height: 100%;
grid-template-rows: 1fr auto;
}

12
web/style-definitions/tokens/color/default-theme.yaml
View file

@ -174,8 +174,8 @@ theme:
chat:
background:
value: 'var(--theme-color-palette-4)'
comment: '{theme.color.palette.4.comment}'
value: 'var(--theme-color-palette-15)'
comment: '{theme.color.palette.15.comment}'
text:
value: 'var(--theme-color-palette-2)'
comment: '{theme.color.palette.2.comment}'
@ -185,6 +185,14 @@ 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:

6
web/styles/theme.less
View file

@ -1,6 +1,6 @@
// Do not edit directly
// Generated on Sun, 13 Nov 2022 04:09:55 GMT
// Generated on Sun, 13 Nov 2022 20:33:46 GMT
//
// How to edit these values:
// Edit the corresponding token file under the style-definitions directory
@ -83,9 +83,11 @@
@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-4); // Light secondary
@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

86
web/styles/variables.css
View file

@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Sun, 13 Nov 2022 04:09:55 GMT
* Generated on Sun, 13 Nov 2022 20:33:46 GMT
*
* How to edit these values:
* Edit the corresponding token file under the style-definitions directory
@ -35,12 +35,8 @@
--theme-rounded-corners: 0.5rem; /* 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,68 +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-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-chat-background: var(--theme-color-palette-4); /* Light secondary */
--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-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-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 */
--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;
@ -168,10 +134,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';
}