From 4c898e1c1c73ebe9a65af4ce722ced473b80b767 Mon Sep 17 00:00:00 2001
From: LimePotato <nelle@limepot.xyz>
Date: Thu, 21 Mar 2024 18:15:55 -0600
Subject: [PATCH] 202403211815

---
 dist/dl/microbin.css | 446 +++----------------------------------------
 1 file changed, 28 insertions(+), 418 deletions(-)

diff --git a/dist/dl/microbin.css b/dist/dl/microbin.css
index 16f7098..ff3cf7f 100644
--- a/dist/dl/microbin.css
+++ b/dist/dl/microbin.css
@@ -22,32 +22,7 @@
     --highlight: #ff0;
     --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
   }
-  
-  @media (prefers-color-scheme:dark) {
-    :root {
-      --background-body: #141b23;
-      --background: #222f3a;
-      --background-alt: #1a242f;
-      --selection: #f9e2af;
-      --text-main: #dbdbdb;
-      --text-bright: #1e1e2e;
-      --text-muted: #a9b1ba;
-      --links: #f9e2af;
-      --focus: #f9e2af;
-      --border: #526980;
-      --code: #ffbe85;
-      --animation-duration: 0.1s;
-      --button-base: #0c151c;
-      --button-hover: #040a0f;
-      --scrollbar-thumb: var(--button-hover);
-      --scrollbar-thumb-hover: #000;
-      --form-placeholder: #a9a9a9;
-      --form-text: #1e1e2e;
-      --variable: #d941e2;
-      --highlight: #efdb43;
-      --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
-    }
-  }
+
   
   html {
     scrollbar-color: #aaa #1e1e2e;
@@ -55,13 +30,6 @@
     scrollbar-width: thin
   }
   
-  @media (prefers-color-scheme:dark) {
-    html {
-      scrollbar-color: #040a0f #202b38;
-      scrollbar-color: var(--scrollbar-thumb) var(--background-body)
-    }
-  }
-  
   body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif;
     line-height: 1.4;
@@ -76,50 +44,28 @@
     text-rendering: optimizeLegibility
   }
   
-  @media (prefers-color-scheme:dark) {
-    body {
-      background: #202b38;
-      background: var(--background-body);
-      color: #dbdbdb;
-      color: var(--text-main)
-    }
-  }
-  
   button {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
   }
   
-  @media (prefers-color-scheme:dark) {
-    button {
-      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
-      transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
-    }
-  }
-  
   input {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
   }
-  
-  @media (prefers-color-scheme:dark) {
-    input {
-      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
-      transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
-    }
-  }
+
+  input::file-selector-button {
+    width: 140px;
+    float: right;
+    background-color:#fab387;
+    color: white;
+}
   
   textarea {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
   }
-  
-  @media (prefers-color-scheme:dark) {
-    textarea {
-      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
-      transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
-    }
-  }
+
   
   h1 {
     font-size: 2.2em;
@@ -140,85 +86,41 @@
     color: #000;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h1 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
+
   
   h2 {
     color: #000;
     color: var(--text-bright)
   }
   
-  @media (prefers-color-scheme:dark) {
-    h2 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
   h3 {
     color: #000;
     color: var(--text-bright)
   }
   
-  @media (prefers-color-scheme:dark) {
-    h3 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
   
   h4 {
     color: #000;
     color: var(--text-bright)
   }
   
-  @media (prefers-color-scheme:dark) {
-    h4 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
   
   h5 {
     color: #000;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h5 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
+
   
   h6 {
     color: #000;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h6 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+
   strong {
     color: #000;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    strong {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
+
   
   b,
   h1,
@@ -245,12 +147,7 @@
     font-style: italic
   }
   
-  @media (prefers-color-scheme:dark) {
-    blockquote {
-      border-left: 4px solid #418ed1;
-      border-left: 4px solid var(--focus)
-    }
-  }
+
   
   q {
     border-left: 4px solid #418ed1;
@@ -260,12 +157,7 @@
     font-style: italic
   }
   
-  @media (prefers-color-scheme:dark) {
-    q {
-      border-left: 4px solid #418ed1;
-      border-left: 4px solid var(--focus)
-    }
-  }
+
   
   blockquote>footer {
     font-style: normal;
@@ -297,12 +189,6 @@
     color: #000
   }
   
-  @media (prefers-color-scheme:dark) {
-    mark {
-      background-color: #efdb43;
-      background-color: var(--highlight)
-    }
-  }
   
   a>code,
   a>strong {
@@ -345,14 +231,6 @@
     outline: none
   }
   
-  @media (prefers-color-scheme:dark) {
-    input {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
   
   button {
     color: #1d1d1d;
@@ -369,15 +247,6 @@
     outline: none
   }
   
-  @media (prefers-color-scheme:dark) {
-    button {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
   textarea {
     color: #1d1d1d;
     color: var(--form-text);
@@ -393,15 +262,6 @@
     outline: none
   }
   
-  @media (prefers-color-scheme:dark) {
-    textarea {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
   select {
     color: #1d1d1d;
     color: var(--form-text);
@@ -417,28 +277,13 @@
     outline: none
   }
   
-  @media (prefers-color-scheme:dark) {
-    select {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
   button {
     background-color: #d0cfcf;
     background-color: var(--button-base);
     padding-right: 30px;
     padding-left: 30px
   }
-  
-  @media (prefers-color-scheme:dark) {
-    button {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
+
   
   input[type=submit] {
     background-color: #d0cfcf;
@@ -446,90 +291,43 @@
     padding-right: 30px;
     padding-left: 30px
   }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=submit] {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
+
   
   input[type=reset] {
     background-color: #d0cfcf;
     background-color: var(--button-base);
     padding-right: 30px;
     padding-left: 30px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=reset] {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
-  
+
   input[type=button] {
     background-color: #d0cfcf;
     background-color: var(--button-base);
     padding-right: 30px;
     padding-left: 30px
   }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=button] {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
+
   
   button:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    button:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
+
   input[type=submit]:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=submit]:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
   
   input[type=reset]:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=reset]:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
   input[type=button]:hover {
     background: #9b9b9b;
     background: var(--button-hover)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=button]:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
   input[type=color] {
     min-height: 2rem;
     padding: 8px;
@@ -585,13 +383,7 @@
     background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;
     padding-right: 35px
   }
-  
-  @media (prefers-color-scheme:dark) {
-    select {
-      background: #161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
-      background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat
-    }
-  }
+
   
   select::-ms-expand {
     display: none
@@ -608,48 +400,23 @@
     box-shadow: 0 0 0 2px var(--focus)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
-  
   select:focus {
     box-shadow: 0 0 0 2px #418ed1;
     box-shadow: 0 0 0 2px var(--focus)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    select:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
+
   
   button:focus {
     box-shadow: 0 0 0 2px #418ed1;
     box-shadow: 0 0 0 2px var(--focus)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    button:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
+
   
   textarea:focus {
     box-shadow: 0 0 0 2px #418ed1;
     box-shadow: 0 0 0 2px var(--focus)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    textarea:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
+
   
   button:active,
   input[type=button]:active,
@@ -689,28 +456,6 @@
     color: var(--form-placeholder)
   }
   
-  @media (prefers-color-scheme:dark) {
-    ::-moz-placeholder {
-      color: #a9a9a9;
-      color: var(--form-placeholder)
-    }
-  
-    :-ms-input-placeholder {
-      color: #a9a9a9;
-      color: var(--form-placeholder)
-    }
-  
-    ::-ms-input-placeholder {
-      color: #a9a9a9;
-      color: var(--form-placeholder)
-    }
-  
-    ::placeholder {
-      color: #a9a9a9;
-      color: var(--form-placeholder)
-    }
-  }
-  
   fieldset {
     border: 1px solid #418ed1;
     border: 1px solid var(--focus);
@@ -719,12 +464,6 @@
     padding: 10px
   }
   
-  @media (prefers-color-scheme:dark) {
-    fieldset {
-      border: 1px solid #418ed1;
-      border: 1px solid var(--focus)
-    }
-  }
   
   legend {
     font-size: .9em;
@@ -750,14 +489,6 @@
     background: var(--background);
     border-radius: 3px
   }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-webkit-slider-runnable-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
   input[type=range]::-webkit-slider-thumb {
     box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
     height: 20px;
@@ -769,24 +500,12 @@
     margin-top: -7px
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-webkit-slider-thumb {
-      background: #526980;
-      background: var(--border)
-    }
-  }
   
   input[type=range]:focus::-webkit-slider-runnable-track {
     background: #efefef;
     background: var(--background)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]:focus::-webkit-slider-runnable-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
   
   input[type=range]::-moz-range-track {
     width: 100%;
@@ -798,13 +517,6 @@
     border-radius: 3px
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-moz-range-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
   input[type=range]::-moz-range-thumb {
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
     height: 20px;
@@ -814,13 +526,6 @@
     background: var(--border)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-moz-range-thumb {
-      background: #526980;
-      background: var(--border)
-    }
-  }
-  
   input[type=range]::-ms-track {
     width: 100%;
     height: 9.5px;
@@ -838,12 +543,6 @@
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-ms-fill-lower {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
   
   input[type=range]::-ms-fill-upper {
     background: #efefef;
@@ -853,13 +552,6 @@
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-ms-fill-upper {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
   input[type=range]::-ms-thumb {
     box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
     border: 1px solid #000;
@@ -869,51 +561,27 @@
     background: #dbdbdb;
     background: var(--border)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-ms-thumb {
-      background: #526980;
-      background: var(--border)
-    }
-  }
-  
+
   input[type=range]:focus::-ms-fill-lower {
     background: #efefef;
     background: var(--background)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]:focus::-ms-fill-lower {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
+
   
   input[type=range]:focus::-ms-fill-upper {
     background: #efefef;
     background: var(--background)
   }
   
-  @media (prefers-color-scheme:dark) {
-    input[type=range]:focus::-ms-fill-upper {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
+
   a {
     text-decoration: none;
     color: #0076d1;
     color: var(--links)
   }
   
-  @media (prefers-color-scheme:dark) {
-    a {
-      color: #41adff;
-      color: var(--links)
-    }
-  }
-  
+
   a:hover {
     text-decoration: underline
   }
@@ -928,14 +596,6 @@
     font-size: 1em
   }
   
-  @media (prefers-color-scheme:dark) {
-    code {
-      color: #ffbe85;
-      color: var(--code);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
   
   samp {
     background: #efefef;
@@ -947,14 +607,6 @@
     font-size: 1em
   }
   
-  @media (prefers-color-scheme:dark) {
-    samp {
-      color: #ffbe85;
-      color: var(--code);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
   
   time {
     background: #efefef;
@@ -966,14 +618,6 @@
     font-size: 1em
   }
   
-  @media (prefers-color-scheme:dark) {
-    time {
-      color: #ffbe85;
-      color: var(--code);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
   
   pre>code {
     padding: 10px;
@@ -988,12 +632,6 @@
     font-family: monospace
   }
   
-  @media (prefers-color-scheme:dark) {
-    var {
-      color: #d941e2;
-      color: var(--variable)
-    }
-  }
   
   kbd {
     background: #efefef;
@@ -1006,16 +644,6 @@
     padding: 2px 4px
   }
   
-  @media (prefers-color-scheme:dark) {
-    kbd {
-      color: #dbdbdb;
-      color: var(--text-main);
-      border: 1px solid #526980;
-      border: 1px solid var(--border);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
   
   img,
   video {
@@ -1029,12 +657,6 @@
     border-top: 1px solid var(--border)
   }
   
-  @media (prefers-color-scheme:dark) {
-    hr {
-      border-top: 1px solid #526980;
-      border-top: 1px solid var(--border)
-    }
-  }
   
   table {
     border-collapse: collapse;
@@ -1061,24 +683,12 @@
     border-bottom: 1px solid var(--border)
   }
   
-  @media (prefers-color-scheme:dark) {
-    thead {
-      border-bottom: 1px solid #526980;
-      border-bottom: 1px solid var(--border)
-    }
-  }
   
   tfoot {
     border-top: 1px solid #dbdbdb;
     border-top: 1px solid var(--border)
   }
   
-  @media (prefers-color-scheme:dark) {
-    tfoot {
-      border-top: 1px solid #526980;
-      border-top: 1px solid var(--border)
-    }
-  }
   
   tbody tr:nth-child(2n) {
     background-color: #efefef;