chicken chicken chicken chicken

src/style/app/pulldown/accounts.scss

@@ -54,12 +54,28 @@
                 flex-grow:1;
             }
 
+            input[type=text],input[type=password] {
+                border:none;
+                border-radius:0;
+                width:100%;
+                padding:5px;
+                background-color:#333333;
+                color:#dddddd;
+                outline:none;
+                
+                @media screen and (max-width: 500px) {
+                    font-size:16px;
+                    padding:10px;
+                }
+            }
+
             .lgBtnContainer {
                 display:flex;
                 position:relative;
                 left:20px;
                 width:calc( 100% - 40px );
                 gap:10px;
+                overflow:clip;
             }
 
             .fields {
@@ -69,16 +85,7 @@
                 left:20px;
                 width:calc( 100% - 40px );
                 gap:5px;
-
-                input {
-                    border:none;
-                    border-radius:0;
-                    width:100%;
-                    padding:5px;
-                    background-color:#333333;
-                    color:#dddddd;
-                    outline:none;
-                }
+                overflow:clip;
             }
             
             /*

src/svelte/elem/UploadWindow.svelte

@@ -1,5 +1,6 @@
 <script>
     import { _void } from "./transition/_void.js";
+    import { padding_scaleY } from "./transition/padding_scaleY.js"
     import { fade } from "svelte/transition";
     import { circIn, circOut } from "svelte/easing";
 
@@ -109,23 +110,6 @@
     }
 
     // animation
-
-    function padding_scaleY(node, { duration, easingFunc, padY, padX, op }) {
-        let rect = node.getBoundingClientRect()
-
-        return {
-            duration: duration||300,
-            css: t => {
-                let eased = (easingFunc || circOut)(t)
-
-                return `
-                    height: ${eased*(rect.height-(padY||0))}px;
-                    ${padX&&padY ? `padding: ${(eased)*(padY)}px ${(padX)}px;` : ""}
-                    ${op ? `opacity: ${eased};` : ""}
-                `
-            }
-        }
-    }
     
     function fileTransition(node) {
         return {

src/svelte/elem/pulldowns/Accounts.svelte

@@ -1,6 +1,7 @@
 <script>
     import Pulldown from "./Pulldown.svelte"
-    import { _void } from "../transition/_void"
+    import { padding_scaleY } from "../transition/padding_scaleY"
+    import { circIn,circOut } from "svelte/easing"
 
     let targetAction
 </script>
@@ -13,15 +14,15 @@
 
             {#if targetAction}
 
-                <div class="fields" transition:_void|local>
-                    <input placeholder="username">
+                <div class="fields" out:padding_scaleY|local={{easingFunc:circIn}} in:padding_scaleY|local>
+                    <input placeholder="username" type="text">
                     <input placeholder="password" type="password">
                     <button>{targetAction=="login" ? "Log in" : "Create account"}</button>
                 </div>
 
             {:else}
 
-                <div class="lgBtnContainer" transition:_void|local>
+                <div class="lgBtnContainer" out:padding_scaleY|local={{easingFunc:circIn}} in:padding_scaleY|local>
                     <button on:click={() => targetAction="login"}>Log in</button>
                     <button on:click={() => targetAction="create"}>Sign up</button>
                 </div>

src/svelte/elem/transition/padding_scaleY.js

@@ -0,0 +1,18 @@
+import { circIn, circOut } from "svelte/easing"
+
+export function padding_scaleY(node, { duration, easingFunc, padY, padX, op }) {
+    let rect = node.getBoundingClientRect()
+
+    return {
+        duration: duration||300,
+        css: t => {
+            let eased = (easingFunc || circOut)(t)
+
+            return `
+                height: ${eased*(rect.height-(padY||0))}px;
+                ${padX&&padY ? `padding: ${(eased)*(padY)}px ${(padX)}px;` : ""}
+                ${op ? `opacity: ${eased};` : ""}
+            `
+        }
+    }
+}