T!!!

src/server/routes/authRoutes.ts

@@ -141,10 +141,16 @@ authRoutes.post("/customcss", parser, (req,res) => {
         return
     }
     
-    if (typeof req.body.fileId != "string") return
+    if (typeof req.body.fileId != "string") req.body.fileId = undefined;
     
-    if (req.body.fileId.match(id_check_regex) == req.body.fileId && req.body.fileId.length <= config.maxUploadIdLength) {
+    if (
-        acc.customCSS = req.body.fileId
+
+        !req.body.fileId
+        || (req.body.fileId.match(id_check_regex) == req.body.fileId 
+        && req.body.fileId.length <= config.maxUploadIdLength)
+        
+    ) {
+        acc.customCSS = req.body.fileId || undefined
         if (!req.body.fileId) delete acc.customCSS
         Accounts.save()
         res.send(`custom css saved`)

src/style/app.scss

@@ -35,3 +35,7 @@
         background-image: linear-gradient(#303030,base.$Background);
     }
 }
+
+.number {
+    font-family: "Inconsolata", monospace;
+}

src/style/app/uploads.scss

@@ -32,10 +32,6 @@
         font-size: 25px;
     }
 
-    .number {
-        font-family: "Inconsolata", monospace;
-    }
-
     .uploadContainer {
         overflow:auto;
     }

src/style/themes/classy.scss

@@ -0,0 +1,168 @@
+#uploadWindow {
+    color: #FFFFFF
+}
+
+body {
+    background-color:#DDDDDD;
+}
+
+#appContent {
+    background: darkgray;
+    @media screen and (max-width:500px) {
+        background:white;
+    }
+}
+
+#uploadWindow {
+    background: white;
+
+    color:black;
+
+    h1, p, a {
+        margin: 0px;
+        font-size: 14px;
+    }
+
+    a {
+        color:rgb(153, 153, 153);
+    }
+
+    h1 {
+        font-weight:600;
+        font-size: 25px;
+        text-align:center;
+
+        @media screen and (max-width:500px) {
+            font-size: 30px;
+        }
+    }
+
+    & > p:nth-of-type(1) {
+        text-align:center;
+        font-style: italic;
+        font-weight:600;
+        font-size: 16px;
+        color:black !important;
+        @media screen and (max-width:500px) {
+            font-size: 21px;
+        }
+    }
+
+    button {
+        cursor:pointer;
+        color:black;
+        border:none;
+        outline:none;
+        padding:5px;
+        background: #AAAAAA;
+
+        @media screen and (max-width: 500px) {
+            font-size:16px;
+            padding:10px;
+        }
+
+        &:hover {
+            outline: 1px solid #333333;
+            color: black;
+            background-color:#AAAAAA;
+        }
+    }
+
+    & > button:nth-last-of-type(1) {
+        background-color:#66AAFF;
+        &:hover {
+            background-color:#66AAFF;
+        }
+    }
+
+    #add_new_files {
+        background-color: #AAAAAA66;
+        border:1px solid #AAAAAA;
+
+        #file_add_btns {
+            button, input[type=text] {
+                transition-duration:0s;
+                
+                @media screen and (max-width: 500px) {
+                    font-size:16px;
+                    padding:10px;
+                }
+            }
+
+            input[type=text] {
+                font-family: "Fira Code", monospace;
+                background-color:#AAAAAA;
+                color:black;
+            }
+
+            button {
+                cursor:pointer;
+                background-color:#AAAAAA;
+                color: black;
+
+                &:hover {
+                    flex-basis: 50%;
+                    transition-duration:0s;
+                    background-color:#AAAAAA;
+                    color: black;
+                    outline: 1px solid #333333;
+                }
+            }
+
+            .fileUpload {
+                background-color:#AAAAAA;
+                transition-duration:250ms;
+
+                &:hover {
+                    transition-duration:0s;
+                    background-color:#AAAAAA;
+                }
+            }
+        }
+    }
+
+    .file {
+        background-color: #AAAAAA66;
+        border: 1px solid #AAAAAA;
+
+        input[type=text] {
+            font-family: "Fira Code", monospace;
+            background-color:#AAAAAA;
+            color:black;
+        }
+    }
+    
+}
+
+* {
+    /* nice scrollbars aren't needed on mobile so */
+    @media screen and (min-width:500px) {
+        
+        &::-webkit-scrollbar {
+            width:5px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color:#AAAAAA;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color:#DDDDDD;
+
+            &:hover {
+                background-color:#FFFFFF;
+            }
+        }
+    
+    }
+}
+
+#topbar {
+    background-color: #DDDDDD;
+}
+
+.error {
+    .code {
+        color: black;
+    }
+}

src/svelte/elem/pulldowns/Accounts.svelte

@@ -151,6 +151,15 @@
                     <p>Make all of my files {$account.defaultFileVisibility || "public"}<span><br />Matches your default file visibility</p>
                 </button>
 
+                <div class="category">
+                    <p>Customization</p>
+                </div>
+
+                <button on:click={() => accOpts.customcss(optPicker)}>
+                    <img src="/static/assets/icons/paint.svg" alt="customcss">
+                    <p>Set custom CSS<span><br />{@html $account.customCSS ? `Using file ID <span class="number">${$account.customCSS}</span>` : "No custom CSS set"}</span></p>
+                </button>
+                
                 <div class="category">
                     <p>Sessions</p>
                 </div>
@@ -165,15 +174,6 @@
                     <p>Log out<span><br />Session expires {new Date($account.sessionExpires).toLocaleDateString()}</span></p>
                 </button>
 
-                <div class="category">
-                    <p>Customization</p>
-                </div>
-
-                <button on:click={() => accOpts.customcss(optPicker)}>
-                    <img src="/static/assets/icons/paint.svg" alt="customcss">
-                    <p>Set custom CSS<span><br />{@html $account.customCSS ? `Using file ID <span class="number">${$account.customCSS}</span>` : "No custom CSS set"}</span></p>
-                </button>
-
                 {#if $account.admin}
 
                     <div class="category">

src/svelte/elem/pulldowns/Files.svelte

@@ -36,7 +36,7 @@
                                 <h2>{file.filename}</h2>
                                 <p class="detail">
                                     <img src="/static/assets/icons/{file.visibility || "public"}.svg" alt={file.visibility||"public"} />&nbsp;
-                                    <span class="number">{file.id}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span>
+                                    <span class="number">{file.id}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="cd">{file.mime.split(";")[0]}</span>
                                     {#if file.reserved}
                                         <br />
                                         <img src="/static/assets/icons/update.svg" alt="uploading"/>&nbsp;
@@ -45,7 +45,7 @@
                                     {#if file.tag}
                                         <br />
                                         <img src="/static/assets/icons/tag.svg" alt="tag"/>&nbsp;
-                                        <span class="number">{file.tag}</span>
+                                        <span class="cd">{file.tag}</span>
                                     {/if}
                                 </p>
                             </div>