add image upload feature in dev mode

static/css/main.css

@@ -130,7 +130,8 @@ body,
 pre,
 code,
 kbd,
-button {
+button,
+select {
     font-family: "RecVar", sans-serif;
     line-height: 1.5;
 }
@@ -142,7 +143,8 @@ body {
 pre,
 code,
 kbd,
-button {
+button,
+select {
     font-size: 100%;
 }
 

static/css/page/treehouse/dev/tools.css

@@ -0,0 +1,53 @@
+th-picture-upload {
+    display: block;
+
+    border: 1px solid var(--border-1);
+    padding: 8px 12px;
+    margin-right: 8px;
+    border-radius: 8px;
+
+    cursor: default;
+
+    &:focus {
+        border-color: var(--liquidex-brand-blue);
+    }
+
+    & > .nothing-pasted {
+        text-align: center;
+        opacity: 50%;
+        padding: 16px;
+    }
+
+    & > .have-picture {
+        & > p {
+            padding-bottom: 8px;
+        }
+
+        & > img {
+            max-height: 480px;
+        }
+    }
+
+    & > .copied-to-clipboard {
+        text-align: center;
+        padding: 16px;
+    }
+
+    /* State display */
+
+    & > * {
+        display: none;
+    }
+
+    &[data-state="init"] > .nothing-pasted {
+        display: block;
+    }
+
+    &[data-state="have-picture"] > .have-picture {
+        display: block;
+    }
+
+    &[data-state="copied-to-clipboard"] > .copied-to-clipboard {
+        display: block;
+    }
+}