Restyle frontmatter dialog to match rest of pluto

fonsp · Feb 7, 2023 · 10a104b · 10a104b
1 parent 75c8de0
commit 10a104b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/frontend/dark_color.css b/frontend/dark_color.css
@@ -29,6 +29,12 @@
         --export-card-text-color: rgb(255 255 255 / 70%);
         --export-card-shadow-color: #0000001c;
 
+        /*Frontmatter styling*/
+        --frontmatter-button-bg-color: #554e4e;
+        --frontmatter-outline-color: rgb(255 248 235);
+        --frontmatter-input-bg-color: #2c2c2c;
+        --frontmatter-input-border-color: #757575;
+
         /*Pluto output styling */
         --pluto-schema-types-color: rgba(255, 255, 255, 0.6);
         --pluto-schema-types-border-color: rgba(255, 255, 255, 0.2);

diff --git a/frontend/editor.css b/frontend/editor.css
@@ -3320,22 +3320,56 @@ pluto-cell.hooked_up pluto-output {
 .pluto-frontmatter {
     font-family: var(--system-ui-font-stack);
     width: min(31rem, 90vw);
-    color: var(--black);
-    background: var(--white);
+    color: var(--export-color);
+    background: var(--export-bg-color);
+    border-radius: 1em;
 }
 
 .pluto-frontmatter button {
     cursor: pointer;
+    background-color: var(--frontmatter-button-bg-color);
+    border-radius: 0.5em;
+    border: 2px solid var(--frontmatter-button-bg-color);
+    padding: 0.3em 0.5em;
+    font-weight: 500;
+}
+
+.pluto-frontmatter button:hover {
+    border-color: var(--frontmatter-input-border-color);
+}
+
+.pluto-frontmatter input {
+    background-color: var(--frontmatter-input-bg-color);
+    border-radius: 0.5em;
+    border: 2px solid var(--frontmatter-input-border-color);
+    padding: 0.3em 0.5em;
+}
+
+.pluto-frontmatter input:focus {
+    outline: none;
+}
+
+.pluto-frontmatter label {
+    text-transform: capitalize;
+    font-weight: 500;
 }
 
 .pluto-frontmatter .deletefield {
     align-self: baseline;
+    background-color: transparent;
+    border-width: 0;
+    opacity: 0.6;
+    margin-left: -1em;
+    margin-top: -0.1em;
+}
+
+.pluto-frontmatter .deletefield:hover {
+    opacity: 1;
 }
 
 .pluto-frontmatter .addentry {
     grid-column: 1/3;
     margin-top: 0.5em;
-    background-color: transparent;
 }
 
 .pluto-frontmatter .final {

diff --git a/frontend/light_color.css b/frontend/light_color.css
@@ -32,6 +32,12 @@
         --export-card-text-color: rgba(0, 0, 0, 0.5);
         --export-card-shadow-color: #00000029;
 
+        /*Frontmatter styling*/
+        --frontmatter-button-bg-color: white;
+        --frontmatter-outline-color: hsl(230, 14%, 11%);
+        --frontmatter-input-bg-color: #fbfbfb;
+        --frontmatter-input-border-color: hsl(207deg 24% 87%);
+
         /*Pluto output styling */
         --pluto-schema-types-color: rgba(0, 0, 0, 0.4);
         --pluto-schema-types-border-color: rgba(0, 0, 0, 0.2);