1 files changed, 50 insertions, 105 deletions

diff --git a/youtube/static/subscription_manager.css b/youtube/static/subscription_manager.css
index 1e260d8..7101828 100644
--- a/youtube/static/subscription_manager.css
+++ b/youtube/static/subscription_manager.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;
@@ -126,66 +121,6 @@ header {
     background-color: var(--buttom-hover);
 }
 
-/* playlist */
-.playlist {
-    display: grid;
-    grid-gap: 4px;
-    grid-template-areas:
-        "play-box"
-        "play-hidden"
-        "play-add"
-        "play-clean";
-    grid-area: playlist;
-}
-.play-box {
-    grid-area: play-box;
-}
-
-.play-hidden {
-    grid-area: play-hidden;
-}
-
-.play-add {
-    grid-area: play-add;
-    cursor: pointer;
-
-    padding-bottom: 6px;
-    padding-left: .75em;
-    padding-right: .75em;
-    padding-top: 6px;
-    text-align: center;
-    white-space: nowrap;
-    background-color: var(--buttom);
-    border: 1px solid var(--button-border);
-    color: var(--buttom-text);
-    border-radius: 5px;
-}
-.play-add:hover {
-    background-color: var(--buttom-hover);
-}
-
-.play-clean {
-    display: grid;
-    grid-area: play-clean;
-}
-
-.play-clean > button {
-    padding-bottom: 6px;
-    padding-left: .75em;
-    padding-right: .75em;
-    padding-top: 6px;
-    text-align: center;
-    white-space: nowrap;
-    background-color: var(--buttom);
-    border: 1px solid var(--button-border);
-    color: var(--buttom-text);
-    border-radius: 5px;
-}
-.play-clean > button:hover {
-    background-color: var(--buttom-hover);
-}
-/* /playlist */
-
 /* ------------- Menu Mobile sin JS ---------------- */
 /* input hidden */
 .opt-box {
@@ -206,8 +141,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 ------------- */
 
@@ -227,7 +164,8 @@ hr {
     grid-template-columns: 1fr;
     margin: auto;
     grid-template-areas:
-        "subscriptions-import-form";
+        "subscriptions-import-form"
+        "subscriptions-export-form";
     align-items: center;
     justify-items: center;
     justify-content: center;
@@ -237,12 +175,30 @@ hr {
     text-align: center;
 }
 
+.subscriptions-import-options {
+    display: grid;
+    grid-template-columns: repeat(1, auto);
+    margin: auto;
+}
+
+.subscriptions-export-form {
+    grid-area: subscriptions-export-form;
+    text-align: center;
+}
+
+.subscriptions-export-options {
+    display: grid;
+    grid-template-columns: repeat(1, auto);
+    margin: auto;
+}
+
 .sub-list-controls {
     display: grid;
     grid-row-gap: 0.2rem;
 }
 
 .subscriptions-import-form input[type='submit'],
+.subscriptions-export-form input[type='submit'],
 .sub-list-controls button[type='submit'],
 .sub-list-controls input[type='reset'] {
     cursor: pointer;
@@ -323,6 +279,24 @@ hr {
     .title {
         font-size: 1rem;
     }
+    .subscriptions-import-options {
+        display: grid;
+        grid-template-columns: repeat(2, auto);
+        margin: auto;
+        align-items: center;
+        justify-items: center;
+        justify-content: center;
+        grid-column-gap: 0.5rem;
+    }
+    .subscriptions-export-options {
+        display: grid;
+        grid-template-columns: repeat(4, auto);
+        margin: auto;
+        align-items: center;
+        justify-items: center;
+        justify-content: center;
+        grid-column-gap: 0.5rem;
+    }
 }
 
 @media (min-width: 600px) {
@@ -354,17 +328,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;
     }
-
     .import-export {
         max-width: 50vw;
     }
@@ -377,37 +353,6 @@ hr {
         align-items: center;
     }
 
-    /* playlist */
-    .playlist {
-        display: grid;
-        grid-gap: 1px;
-        grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr;
-        grid-template-areas: ". play-box play-add play-clean";
-        grid-area: playlist;
-    }
-    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
-    }
-    .play-clean > button {
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-bottom: 6px;
-        padding-top: 6px;
-        text-align: center;
-        white-space: nowrap;
-        background-color: var(--buttom);
-        color: var(--buttom-text);
-        border-radius: 5px;
-        cursor: pointer;
-    }
-
-    .video-container {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-row-gap: 1rem;
-        grid-column-gap: 1rem;
-    }
-
     .footer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);