moar stuff.

frontend/src/lib/components/Modal.svelte

@@ -2,8 +2,8 @@
   import { getModalContext, type ModalSelection } from "$lib/contexts/ModalContext.svelte";
 
   export let show: boolean = false;
-  export let verb: string = "Submit";
-  export let noun: string = "Form";
+  export let titleText: string = "Edit Form";
+  export let submitText: string = "Submit";
   export let cancelLabel: string = "Cancel";
   export let wide: boolean = false;
   export let error: string | null = null;
@@ -30,7 +30,7 @@
   <div role="dialog" class="modal-background" on:keypress={onKeyPress}>
     <div class="modal" class:wide class:nobody>
       <div class="header" class:nobody>
-        <div class="title" class:noclose={!closable}>{verb} {noun}</div>  
+        <div class="title" class:noclose={!closable}>{titleText}</div>  
         {#if (closable)}
           <div class="x">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -46,7 +46,7 @@
         <slot></slot>
       </div>
       <div class="button-row" class:nobody>
-        <button disabled={disabled} type="submit">{verb} {noun}</button>
+        <button disabled={disabled} type="submit">{submitText}</button>
         <slot name="secondary-button-1"></slot>
         <slot name="secondary-button-2"></slot>
         <button disabled={!closable} on:click|preventDefault={onClose}>{cancelLabel}</button>
@@ -84,6 +84,10 @@
     &.nobody {
       background: none;
     }
+
+    &.fullheight {
+      min-height: 100%
+    }
   }
   div.modal.wide {
     max-width: 80ch;
@@ -182,7 +186,7 @@
     -moz-user-select: none;
   }
   
-  div.modal :global(input), div.modal :global(select), div.modal :global(textarea) {
+  div.modal :global(input:not(.custom)), div.modal :global(select), div.modal :global(textarea) {
     width: calc(100% - 2ch);
     margin-bottom: 1em;
     margin-top: 0.25em;
@@ -206,7 +210,7 @@
     padding: 0.5em 0;
   }
 
-  div.modal :global(input)::placeholder {
+  div.modal :global(input:not(.custom))::placeholder {
     opacity: 0.5;
   }
   div.modal :global(select:disabled) {
@@ -214,7 +218,7 @@
     opacity: 1;
     color: #789;
   }
-  div.modal :global(input:disabled) {
+  div.modal :global(input:not(.custom):disabled) {
     background: #1a1c1f;
     color: #789;
   }
@@ -229,22 +233,22 @@
     color: #aaa;
   }
   
-  div.modal :global(input.nolast) {
+  div.modal :global(input:not(.custom).nolast) {
     margin-bottom: 0.5em;
   }
   
-  div.modal :global(input[type="checkbox"]) {
+  div.modal :global(input:not(.custom)[type="checkbox"]) {
     width: initial;
     display: inline-block;
   }
-  div.modal :global(input[type="checkbox"] + label) {
+  div.modal :global(input:not(.custom)[type="checkbox"] + label) {
     width: initial;
     display: inline-block;
     padding: 0;
     margin: 0;
   }
   
-  div.modal :global(input:focus), div.modal :global(select:focus), div.modal :global(textarea:focus) {
+  div.modal :global(input:not(.custom):focus), div.modal :global(select:focus), div.modal :global(textarea:focus) {
     background: #121418;
     color: $color-main9;
     border: none;
@@ -256,13 +260,13 @@
     font-size: 0.9em;
   }
 
-  div.modal :global(input::-webkit-outer-spin-button),
-  div.modal :global(input::-webkit-inner-spin-button) {
+  div.modal :global(input:not(.custom)::-webkit-outer-spin-button),
+  div.modal :global(input:not(.custom)::-webkit-inner-spin-button) {
     -webkit-appearance: none;
     margin: 0;
   }
 
-  div.modal :global(input[type=number]) {
+  div.modal :global(input:not(.custom)[type=number]) {
     appearance: textfield;
     -moz-appearance: textfield;
   }