Add subscriptions export

plus design by heckyel

1 files changed, 38 insertions, 1 deletions

diff --git a/youtube/static/subscription_manager.css b/youtube/static/subscription_manager.css
index 1e260d8..7ddd90e 100644
--- a/youtube/static/subscription_manager.css
+++ b/youtube/static/subscription_manager.css
@@ -227,7 +227,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 +238,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 +342,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) {