- don't make emoji picker freak out by limiting transitions to just app container (#123)

- give width on youtube embed container (#122)
- give video a max height of less than current window height (#125)
-

webroot/js/utils/chat.js

@@ -112,10 +112,7 @@ function getYoutubeIdFromURL(url) {
 }
 
 function getYoutubeEmbedFromID(id) {
-  return `
-    <div class="chat-embed youtube-embed">
-      <lite-youtube videoid="${id}" />
-    </div>`;
+  return `<div class="chat-embed youtube-embed"><lite-youtube videoid="${id}" /></div>`;
 }
 
 function getInstagramEmbedFromURL(url) {

webroot/styles/app.css

@@ -25,7 +25,7 @@ a:hover {
   background: transparent;
 }
 
-* {
+#app-container * {
   transition: all .25s;
 }
 
@@ -78,6 +78,7 @@ header {
   width: 100%;
 
   min-height: 480px;
+  max-height: calc(100vh - var(--header-height) - 2rem);
   background-size: 30%;
 }
 #video-container #video {

webroot/styles/chat.css

@@ -121,8 +121,8 @@
 }
 
 .message-text .youtube-embed {
-  width: 100%;
-  height: 12rem;
+  width: calc(var(--right-col-width) - 3.5em);
+  height: auto;
 }
 
 /* MESSAGE TEXT CONTENT */

webroot/styles/layout.css

@@ -1,194 +0,0 @@
-/*
-Overall layout styles for all of owncast app.
-
-DE[RECATE THIS LAYOUT.CSS FILE.
-*/
-
-/* variables */
-:root {
-  --header-height: 3.5em;
-  --right-col-width: 24em;
-  --video-container-height: 55vh;
-  --header-bg-color: rgba(20,0,40,1);
-  --user-image-width: 10em;
-}
-
-html {
-  font-size:  14px;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-::-webkit-scrollbar {
-  width: 0px;
-  background: transparent;
-}
-
-.visually-hidden {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap; /* added line */
-}
-
-
-header {
-  height: var(--header-height);
-  background-color: var(--header-bg-color);
-}
-
-#logo-container {
-  background-size: 1.35em;
-}
-
-#chat-toggle {
-  min-width: 3rem;
-}
-
-/* ************************************************8 */
-
-
-#user-info-change {
-  display: none;
-}
-
-/* ************************************************8 */
-
-
-#video-container {
-  height: calc(var(--video-container-height));
-  margin-top: var(--header-height);
-  background-size: 30%;
-}
-
-.owncast-video-container {
-  height: auto;
-}
-.owncast-video-container .video-js {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-.owncast-video-container video {
-  width: 100%;
-  display: block;
-  min-height: 100%
-}
-
-.vjs-airplay .vjs-icon-placeholder::before {
-  content: url("../img/airplay.png");
-}
-
-
-#video {
-  transition: opacity .5s;
-  opacity: 0;
-  pointer-events: none;
-}
-.online #video {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-
-/* ************************************************8 */
-
-
-.no-chat footer {
-  justify-content: center;
-}
-
-
-.chat #video-container,
-.chat #stream-info,
-.chat #user-content {
-  width: calc(100% - var(--right-col-width));
-}
-
-#stream-info span {
-  font-size: .70rem;
-}
-
-/* ************************************************8 */
-
-
-.no-chat #chat-toggle {
-  opacity: .75;
-}
-
-/* ************************************************8 */
-
-
-@media screen and (max-width: 860px) {
-  :root {
-    --right-col-width: 20em;
-    --user-image-width: 6em;
-  }
-
-  #chat-container {
-    width: var(--right-col-width);
-  }
-
-}
-
-/* single col layout */
-@media screen and (max-width: 640px ) {
-  :root {
-    --right-col-width: 0;
-    --video-container-height: 40vh;
-  }
-  #logo-container {
-    display: none;
-  }
-  header h1 {
-    max-width: 58%;
-  }
-  #user-options-container {
-    max-width: 41%;
-  }
-
-  #chat-container {
-    width: 100%;
-    position: static;
-    /* min-height: calc(100vh - var(--header-height)); */
-    height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh)
-  }
-  #messages-container {
-    min-height: unset;
-  }
-  #user-content {
-    width: 100%;
-  }
-  #stream-info {
-    width: 100%;
-  }
-  #video-container {
-    width: 100%;
-  }
-  .chat #video-container {
-    width: 100%;
-  }
-  .chat #user-content {
-    display: none;
-  }
-  .chat footer {
-    display: none;
-  }
-}
-
-
-
-
-@media screen and (max-height: 860px ) {
-  :root {
-    --video-container-height: 40vh;
-  }
-  .user-content {
-    flex-direction: column;
-  }
-}