Add themes for handling ft-prompt styling

This is a portal-compatible way of affecting prompt styling, as ':deep' does not work for portals.

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css

@@ -6,16 +6,6 @@
   text-align: center;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard) {
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-
-  /* Some child(s) will grow vertically */
-  display: flex;
-  flex-direction: column;
-}
-
 .searchInputsRow {
   display: grid;
 

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue

@@ -1,5 +1,6 @@
 <template>
   <ft-prompt
+    theme="flex-column"
     @click="hide"
   >
     <h2 class="heading">

src/renderer/components/ft-prompt/ft-prompt.css

@@ -17,6 +17,7 @@
 
 .promptCard {
   overflow-y: scroll;
+  max-block-size: 95%;
 }
 
 .promptCard.autosize {
@@ -34,6 +35,31 @@
   box-sizing: border-box;
 }
 
+.promptCard.flex-column {
+    /* Some child(ren) will grow vertically */
+    display: flex;
+    flex-direction: column;
+}
+
+.promptCard.slim {
+  max-inline-size: 70%;
+  inset-inline-start: 15%;
+  padding-block: 10px;
+}
+
 .center {
   text-align: center;
 }
+
+@media only screen and (width <= 680px) {
+  .promptCard.slim {
+    padding-block: 5px;
+  }
+}
+
+@media only screen and (width <= 500px) {
+  .promptCard.slim {
+    max-inline-size: 80%;
+    inset-inline-start: 10%;
+  }
+}

src/renderer/components/ft-prompt/ft-prompt.js

@@ -36,6 +36,10 @@ export default defineComponent({
     autosize: {
       type: Boolean,
       default: false
+    },
+    theme: {
+      type: String,
+      default: 'base'
     }
   },
   emits: ['click'],

src/renderer/components/ft-prompt/ft-prompt.vue

@@ -9,7 +9,9 @@
     >
       <ft-card
         class="promptCard"
-        :class="{ autosize }"
+        :class="{ autosize, [theme]: true }"
+        role="dialog"
+        aria-modal="true"
         :aria-labelledby="('dialog-' + sanitizedLabel)"
       >
         <slot>

src/renderer/components/ft-search-filters/ft-search-filters.css

@@ -4,16 +4,6 @@
   user-select: none;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-  max-inline-size: 70%;
-  inset-inline-start: 15%;
-  padding-block: 10px;
-
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-}
-
 .searchRadio {
   padding: 5px;
 }
@@ -29,11 +19,6 @@
 }
 
 @media only screen and (width <= 680px) {
-  /* Style for `ft-prompt` */
-  :deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-    padding-block: 5px;
-  }
-
   .searchRadio {
     border-inline-end: 0;
     padding-block-start: 0;
@@ -43,11 +28,3 @@
     flex-flow: column;
   }
 }
-
-@media only screen and (width <= 500px) {
-  /* Style for `ft-prompt` */
-  :deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-    max-inline-size: 80%;
-    inset-inline-start: 10%;
-  }
-}

src/renderer/components/ft-search-filters/ft-search-filters.js

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'

src/renderer/components/ft-search-filters/ft-search-filters.vue

@@ -1,5 +1,6 @@
 <template>
   <ft-prompt
+    theme="slim"
     @click="hideSearchFilters"
   >
     <div>