owncast/web/components/ui/Sidebar/Sidebar.module.scss

.root {
  background-color: var(--theme-color-background-chat);
  display: none;
  --header-h: 64px;
}

@media (min-width: 768px) {
  .root {
    position: sticky;
    top: var(--header-h);
    display: block;
    height: calc(100vh - var(--header-h));
    max-height: calc(100vh - var(--header-h));
  }
}
/*
First div is .ant-layout-sider-children
Only way to target it apparently
*/
.root > div {
  display: flex;
  flex-flow: column nowrap;
  -moz-box-flex: 1 !important;
  flex-grow: 1 !important;
  height: 100% !important;
}
Added mobile chat and some responsiveness weird 0 popping out when toggling chat. wasn't able to find which component is responsible. Used bare mininum scss. May refactor in the future. 2022-05-04 10:55:44 +03:00			`.root {`
added chat bg variable and updated bg color to match design 2022-09-30 10:56:10 +03:00			`background-color: var(--theme-color-background-chat);`
Added mobile chat and some responsiveness weird 0 popping out when toggling chat. wasn't able to find which component is responsible. Used bare mininum scss. May refactor in the future. 2022-05-04 10:55:44 +03:00			`display: none;`
Fix typo + var defined in generated file 2022-05-18 03:56:39 +03:00			`--header-h: 64px;`
Added mobile chat and some responsiveness weird 0 popping out when toggling chat. wasn't able to find which component is responsible. Used bare mininum scss. May refactor in the future. 2022-05-04 10:55:44 +03:00			`}`

			`@media (min-width: 768px) {`
			`.root {`
Changed Layout a bit now we use less state for the layout. Chat and header are now sticky. Moved some css vars. 2022-05-17 09:41:39 +03:00			`position: sticky;`
			`top: var(--header-h);`
worked on chat styling 2022-05-17 17:36:07 +03:00			`display: block;`
Changed chat behaviour added recoil value isMobile to determine which chat to display and style. #1978 changed the player to actually span across the viewport without the black borders around it. 2022-07-03 13:36:30 +03:00			`height: calc(100vh - var(--header-h));`
Changed Layout a bit now we use less state for the layout. Chat and header are now sticky. Moved some css vars. 2022-05-17 09:41:39 +03:00			`max-height: calc(100vh - var(--header-h));`
Added mobile chat and some responsiveness weird 0 popping out when toggling chat. wasn't able to find which component is responsible. Used bare mininum scss. May refactor in the future. 2022-05-04 10:55:44 +03:00			`}`
			`}`
Draft: rough-ish draft of proposed color theme changes (#2067) * color experimentation and troubleshooting * create color scheme, assign colors, more ant overrides * fun selection color * Prettified Code! * Correctly import opensans * Prettified Code! * Organize+standardize colors/names and update the app to use them * Prettified Code! * Use css var references instead of resolving value of vars in css files * Prettified Code! Co-authored-by: gingervitis <gingervitis@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: gabek <gabek@users.noreply.github.com> 2022-08-30 09:17:12 +03:00			`/*`
worked on chat styling 2022-05-17 17:36:07 +03:00			`First div is .ant-layout-sider-children`
			`Only way to target it apparently`
			`*/`
			`.root > div {`
			`display: flex;`
			`flex-flow: column nowrap;`
			`-moz-box-flex: 1 !important;`
			`flex-grow: 1 !important;`
			`height: 100% !important;`
			`}`