[FrontEnd]: fix dropdown design

11 files changed, 116 insertions, 53 deletions

diff --git a/youtube/static/channel.css b/youtube/static/channel.css
index fee15b3..3742418 100644
--- a/youtube/static/channel.css
+++ b/youtube/static/channel.css
@@ -202,8 +202,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 ------------- */
 
@@ -506,7 +508,7 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -517,6 +519,13 @@ hr {
         position: absolute;
     }
 
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow: hidden;
+    }
+
     .author-container {
         max-width: 50vw;
     }
@@ -530,7 +539,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;
diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index 19ba373..aa279ef 100644
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -107,9 +107,7 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    background: var(--background);
     padding-right: 4rem;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -274,7 +272,7 @@ label[for=options-toggle-cbox] {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -282,6 +280,12 @@ label[for=options-toggle-cbox] {
         z-index: 1;
         position: absolute;
     }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
 
     .footer {
         display: grid;
diff --git a/youtube/static/home.css b/youtube/static/home.css
index a92be6b..8a282f6 100644
--- a/youtube/static/home.css
+++ b/youtube/static/home.css
@@ -97,7 +97,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -137,8 +136,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 ------------- */
 
@@ -188,15 +189,21 @@ label[for=options-toggle-cbox] {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
         grid-area: dropdown;
-        z-index: 1;
         position: absolute;
         background: var(--background);
         padding-right: 4rem;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
     }
 
     .footer {
diff --git a/youtube/static/license.css b/youtube/static/license.css
index d967de7..bf3f129 100644
--- a/youtube/static/license.css
+++ b/youtube/static/license.css
@@ -97,7 +97,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -137,8 +136,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 ------------- */
 
@@ -265,7 +266,7 @@ label[for=options-toggle-cbox] {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -273,7 +274,12 @@ label[for=options-toggle-cbox] {
         z-index: 1;
         position: absolute;
     }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
     .footer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
diff --git a/youtube/static/local_playlist.css b/youtube/static/local_playlist.css
index 116c96a..f40df49 100644
--- a/youtube/static/local_playlist.css
+++ b/youtube/static/local_playlist.css
@@ -102,7 +102,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -202,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 ------------- */
 
@@ -476,7 +477,7 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -486,7 +487,12 @@ hr {
         z-index: 1;
         position: absolute;
     }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
     .playlist-metadata {
         max-width: 50vw;
     }
@@ -500,7 +506,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;
diff --git a/youtube/static/playlist.css b/youtube/static/playlist.css
index cab28da..e2171ec 100644
--- a/youtube/static/playlist.css
+++ b/youtube/static/playlist.css
@@ -102,7 +102,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -202,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 ------------- */
 
@@ -486,17 +487,21 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
         grid-area: dropdown;
-        background: var(--background);
         padding-right: 4rem;
         z-index: 1;
         position: absolute;
     }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
     .playlist-metadata {
         max-width: 50vw;
     }
@@ -510,7 +515,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;
diff --git a/youtube/static/search.css b/youtube/static/search.css
index f3c8be2..f131e9c 100644
--- a/youtube/static/search.css
+++ b/youtube/static/search.css
@@ -102,7 +102,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -202,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 ------------- */
 
@@ -464,7 +465,7 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -474,7 +475,12 @@ hr {
         z-index: 1;
         position: absolute;
     }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
     /* playlist */
     .playlist {
         display: grid;
@@ -484,7 +490,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;
diff --git a/youtube/static/settings.css b/youtube/static/settings.css
index a603a53..a2ff71d 100644
--- a/youtube/static/settings.css
+++ b/youtube/static/settings.css
@@ -97,7 +97,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -137,8 +136,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 ------------- */
 
@@ -221,15 +222,20 @@ label[for=options-toggle-cbox] {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
         grid-area: dropdown;
-        z-index: 1;
         position: absolute;
-        background: var(--background);
         padding-right: 4rem;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
     }
     .main {
         display: grid;
diff --git a/youtube/static/subscription.css b/youtube/static/subscription.css
index e7f0ea6..201d159 100644
--- a/youtube/static/subscription.css
+++ b/youtube/static/subscription.css
@@ -102,7 +102,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -202,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 ------------- */
 
@@ -479,17 +480,21 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
         grid-area: dropdown;
-        background: var(--background);
         padding-right: 4rem;
         z-index: 1;
         position: absolute;
     }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
     .sidebar-links {
         max-width: 50vw;
     }
@@ -503,7 +508,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;
diff --git a/youtube/static/subscription_manager.css b/youtube/static/subscription_manager.css
index d131da3..7b97e7e 100644
--- a/youtube/static/subscription_manager.css
+++ b/youtube/static/subscription_manager.css
@@ -102,7 +102,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -202,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 ------------- */
 
@@ -387,7 +388,7 @@ hr {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -397,7 +398,12 @@ hr {
         z-index: 1;
         position: absolute;
     }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
     .import-export {
         max-width: 50vw;
     }
@@ -419,7 +425,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index bbb09dd..e717d6c 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -123,7 +123,6 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -221,9 +220,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 ------------- */
 
@@ -625,12 +625,15 @@ label[for=options-toggle-cbox] {
             "dropdown-label"
             "dropdown-content";
         grid-area: dropdown;
-
-        background: var(--background);
+        position: absolute;
         padding-right: 4rem;
-
         z-index: 1;
-        position: absolute;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
     }
     .playlist {
         display: grid;