1 files changed, 22 insertions, 17 deletions

diff --git a/youtube/static/search.css b/youtube/static/search.css
index ff1fbda..9b7bf8d 100644
--- a/youtube/static/search.css
+++ b/youtube/static/search.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;
@@ -39,6 +33,8 @@ input[type="search"] {
     padding: 0.4rem 0.4rem;
     font-size: 15px;
     color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }
 
 input[type='search'] {
@@ -106,7 +102,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -206,8 +201,10 @@ label[for=options-toggle-cbox] {
 }
 
 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
     white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */
 
@@ -258,7 +255,7 @@ hr {
 /* Video list item */
 .video-container {
     display: grid;
-    grid-row-gap: 0.5rem;
+    grid-gap: 0.5rem;
 }
 
 .length {
@@ -301,6 +298,12 @@ hr {
     cursor: pointer;
 }
 
+.item-video address {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .item-video.channel-item .thumbnail.channel {
     display: flex;
     justify-content: center;
@@ -436,7 +439,7 @@ hr {
 @media (min-width: 600px) {
     .video-container {
         display: grid;
-        grid-row-gap: 0.5rem;
+        grid-gap: 0.5rem;
         grid-template-columns: 1fr 1fr;
     }
 }
@@ -462,17 +465,19 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        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;
     }
-
     /* playlist */
     .playlist {
         display: grid;
@@ -482,7 +487,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
     }
     .play-clean > button {
         padding-left: 0px;
@@ -500,7 +505,7 @@ hr {
     .video-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
-        grid-row-gap: 1rem;
+        grid-gap: 1rem;
         grid-column-gap: 1rem;
     }