updates

src/element/live-chat.css

@@ -4,7 +4,17 @@
   flex-direction: column;
   padding: 8px 16px;
   border: none;
-  height: calc(100vh - 56px - 64px - 56px - 230px);
+  height: calc(100vh - 56px - 64px - 16px - 230px);
+}
+
+.live-chat ::-webkit-scrollbar {
+  width: 8px;
+}
+
+.live-chat ::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 100px;
+  min-height: 24px;
 }
 
 @media (min-width: 768px) {
@@ -13,7 +23,7 @@
   }
 
   .live-chat {
-    width:  calc(100vw - 600px - 16px);
+    width: calc(100vw - 600px - 16px);
     height: calc(100vh - 56px - 64px - 16px);
   }
 
@@ -22,7 +32,7 @@
   }
 }
 
-@media (min-width: 1020px)  {
+@media (min-width: 1020px) {
   .profile-info {
     width: unset;
     padding: 0;
@@ -36,7 +46,7 @@
   }
 
   .live-chat {
-    width:  320px;
+    width: auto;
   }
 }
 
@@ -46,7 +56,7 @@
   }
 }
 
-.live-chat > .header {
+.live-chat>.header {
   display: flex;
   justify-content: space-between
 }
@@ -68,10 +78,11 @@
   flex-direction: column-reverse;
   overflow-y: auto;
   overflow-x: hidden;
+  padding-right: 8px;
 }
 
-@media (min-width: 1020px){
+@media (min-width: 1020px) {
-  .live-chat > .messages {
+  .live-chat>.messages {
     flex-grow: 1;
   }
 }
@@ -211,7 +222,10 @@
 .zap-container:before {
   content: '';
   position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: -1;
   margin: -1px;
   background: linear-gradient(to bottom right, #FF902B, #F83838);
@@ -236,9 +250,11 @@
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
@@ -364,6 +380,7 @@
   color: #FFFFFF80;
   cursor: pointer;
 }
+
 .write-emoji-button:hover {
   color: white;
-}
+}

src/index.css

@@ -73,11 +73,21 @@ a {
   color: inherit;
   background: linear-gradient(black, black) padding-box,
     linear-gradient(94.73deg, #2BD9FF 0%, #F838D9 100%) border-box;
+  transition: 0.3s;
+}
+
+.btn-border:hover {
+  background: linear-gradient(black, black) padding-box,
+    linear-gradient(94.73deg, #14b4d8 0%, #ba179f 100%) border-box;
 }
 
 .btn-primary {
-  background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%);
+  background: #FFF;
-  color: white;
+  color: #0a0a0a;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
 }
 
 .btn-warning {
@@ -92,7 +102,11 @@ a {
   gap: 8px;
 }
 
-input[type="text"], textarea, input[type="datetime-local"], input[type="password"], input[type="number"] {
+input[type="text"],
+textarea,
+input[type="datetime-local"],
+input[type="password"],
+input[type="number"] {
   font-family: inherit;
   border: unset;
   background-color: unset;
@@ -150,4 +164,4 @@ div.paper {
 
 .border-warning {
   border: 1px solid #FF563F;
-}
+}

src/pages/root.css

@@ -2,25 +2,25 @@
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
-    padding: 40px;
+    padding: 40px 0;
 }
 
 @media (max-width: 1020px) {
-  .video-grid {
+    .video-grid {
-      display: grid;
+        display: grid;
-      grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
-      gap: 12px;
+        gap: 12px;
-      padding: 16px;
+        padding: 16px;
-  }
+    }
 }
 
 @media (max-width: 720px) {
-  .video-grid {
+    .video-grid {
-      display: grid;
+        display: grid;
-      grid-template-columns: 1fr;
+        grid-template-columns: 1fr;
-      gap: 12px;
+        gap: 32px;
-      padding: 16px;
+        padding: 16px;
-  }
+    }
 }
 
 @media(min-width: 1600px) {
@@ -36,11 +36,41 @@
 }
 
 .homepage {
-  width: 100%;
+    width: 100%;
-  grid-area: main-content;
+    grid-area: main-content;
 }
 
-.homepage h2 {
+.divider {
-    background: #171717;
+    display: flex;
-    padding: 40px;
 }
+
+.divider:after {
+    content: "";
+    flex: 1;
+}
+
+.line {
+    align-items: center;
+    margin: 1em 0;
+}
+
+.line:after {
+    height: 1px;
+    margin: 0 1em;
+}
+
+.one-line:before,
+.one-line:after {
+    background-color: #171717;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    background: #111;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 100px;
+    min-height: 24px;
+}

src/pages/root.tsx

@@ -64,7 +64,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
       </div>
       {planned.length > 0 && (
         <>
-          <h2>Planned</h2>
+          <h2 className="divider line one-line">Planned</h2>
           <div className="video-grid">
             {planned.map((e) => (
               <VideoTile ev={e} key={e.id} />
@@ -74,7 +74,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
       )}
       {ended.length > 0 && (
         <>
-          <h2>Ended</h2>
+          <h2 className="divider line one-line">Ended</h2>
           <div className="video-grid">
             {ended.map((e) => (
               <VideoTile ev={e} key={e.id} />

src/pages/stream-page.css

@@ -7,6 +7,7 @@
   max-height: 230px;
   width: 100vw;
   max-width: 100vw;
+  background: #000;
 }
 
 .live-chat {