1 files changed, 58 insertions, 18 deletions

diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index 8d23017..c0bdec6 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -1,9 +1,3 @@
-html {
-    font-family: "liberation serif", "times new roman", calibri, carlito, serif;
-    background: var(--background);
-    color: var(--text);
-}
-
 body {
     display: grid;
     grid-gap: 20px;
@@ -27,7 +21,7 @@ img {
 video {
     width: 100%;
     height: auto;
-    max-height: 480px;
+    max-height: calc(100vh/1.5);
 }
 
 a:link {
@@ -46,6 +40,8 @@ input[type="search"] {
     padding: 0.4rem 0.4rem;
     font-size: 15px;
     color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }
 
 input[type='search'] {
@@ -113,7 +109,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -133,6 +128,29 @@ header {
     background-color: var(--buttom-hover);
 }
 
+.live-url-choices {
+    background-color: var(--thumb-background);
+    margin: 1rem 0;
+    padding: 1rem;
+}
+
+.playability-error {
+    position: relative;
+    box-sizing: border-box;
+    height: 30vh;
+    margin: 1rem 0;
+}
+
+.playability-error > span {
+    display: flex;
+    background-color: var(--thumb-background);
+    height: 100%;
+    object-fit: cover;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
 .playlist {
     display: grid;
     grid-gap: 4px;
@@ -211,9 +229,10 @@ label[for=options-toggle-cbox] {
 }
 
 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
     white-space: nowrap;
-    padding-left: 1rem;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */
 
@@ -222,12 +241,15 @@ label[for=options-toggle-cbox] {
     margin: 0 auto;
 
     display: grid;
-    grid-grap: 1px;
+    grid-gap: 1px;
     grid-template-columns: 1fr;
     grid-template-areas:
         "sc-video"
         "sc-info";
 }
+figure.sc-video {
+    margin: 1rem 0px;
+}
 .sc-video { grid-area: sc-video; }
 .sc-info {
     display: grid;
@@ -249,6 +271,7 @@ label[for=options-toggle-cbox] {
         "v-uploaded v-views"
         "v-published v-likes-dislikes"
         "external-player-controls v-checkbox"
+        "v-direct-link v-direct-link"
         "v-download v-download"
         "v-description v-description"
         "v-music-list v-music-list"
@@ -279,6 +302,11 @@ label[for=options-toggle-cbox] {
     grid-area: v-checkbox;
     justify-self: end;
 }
+.v-direct-link {
+    grid-area: v-direct-link;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
 .v-download { grid-area: v-download; }
 .v-download > ul.download-dropdown-content {
     background: var(--secondary-background);
@@ -331,6 +359,14 @@ label[for=options-toggle-cbox] {
 
 .side-videos { grid-area: side-videos; }
 
+.side-videos .related-autoplay {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    justify-content: start;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+}
+
 /* playlist items */
 .side-videos .site-playlist {
     border-style: solid;
@@ -596,17 +632,21 @@ label[for=options-toggle-cbox] {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 120px);
+        grid-template-columns: 100px auto;
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
         grid-area: dropdown;
-
-        background: var(--background);
-        padding-right: 4rem;
-
-        z-index: 1;
         position: absolute;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
+    }
+    .playability-error {
+        height: 60vh;
     }
     .playlist {
         display: grid;
@@ -616,7 +656,7 @@ label[for=options-toggle-cbox] {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 120px);
+        grid-template-columns: 100px auto;
     }
     .play-clean > button {
         padding-bottom: 6px;