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>

web/components/ui/Content/Content.tsx

@@ -113,7 +113,8 @@ export default function ContentComponent() {
     <Content className={rootClassName}>
       <div className={s.leftContent}>
         <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
-        <div className={s.topHalf}>
+
+        <div className={s.topSection}>
           {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
           {!online && (
             <OfflineBanner
@@ -129,6 +130,8 @@ export default function ContentComponent() {
             lastDisconnectTime={lastDisconnectTime}
             viewerCount={viewerCount}
           />
+        </div>
+        <div className={s.midSection}>
           <div className={s.buttonsLogoTitleSection}>
             <ActionButtonRow>
               {externalActionButtons}
@@ -161,6 +164,9 @@ export default function ContentComponent() {
             links={socialHandles}
             logo="/logo"
           />
+        </div>
+
+        <div className={s.lowerSection}>
           <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
             {isChatVisible && isMobile && (
               <TabPane tab="Chat" key="0" style={{ height: '100%' }}>