Fix some minor visual problems

MiniZinc · Jun 28, 2023 · e643b94 · e643b94
1 parent 090df90
commit e643b94
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 25 deletions.
diff --git a/src/bulma.scss b/src/bulma.scss
@@ -11,3 +11,24 @@
 @import "../node_modules/bulma/sass/components/navbar";
 @import "../node_modules/bulma/sass/components/panel";
 @import "../node_modules/bulma/sass/components/tabs";
+
+& {
+    /** Apply these here since we can't apply to body */
+    box-sizing: border-box;
+    line-height: $body-line-height;
+    font-family: $body-family;
+
+    background-color: $body-background-color;
+    font-size: $body-size;
+    min-width: $body-min-width;
+
+    font-family: $body-family;
+    color: $body-color;
+    font-size: $body-font-size;
+    font-weight: $body-weight;
+    line-height: $body-line-height;
+
+    .navbar-item, .navbar-link {
+        padding: 0.5rem;
+    }
+}
diff --git a/src/lib/Editor.svelte b/src/lib/Editor.svelte
@@ -64,13 +64,13 @@
     .mzn-editor :global(.cm-mzn-underline-error),
     .mzn-editor :global(.cm-mzn-underline-error::before),
     .mzn-editor :global(.cm-mzn-underline-error::after) {
-        border-color: red;
+        border-color: var(--mzn-playground-red);
     }
 
     .mzn-editor :global(.cm-mzn-underline-warning),
     .mzn-editor :global(.cm-mzn-underline-warning::before),
     .mzn-editor :global(.cm-mzn-underline-warning::after) {
-        border-color: #d1d100;
+        border-color: var(--mzn-playground-yellow);
     }
 
     .mzn-editor :global(.cm-mzn-underline-error::before),

diff --git a/src/lib/Output.svelte b/src/lib/Output.svelte
@@ -491,20 +491,20 @@
     .mzn-comment,
     .mzn-stderr,
     .mzn-checker {
-        color: gray;
+        color: var(--mzn-playground-gray);
     }
 
     .mzn-stat,
     .mzn-runtime {
-        color: blue;
+        color: var(--mzn-playground-blue);
     }
 
     .mzn-error {
-        color: red;
+        color: var(--mzn-playground-red);
     }
 
     .mzn-warning {
-        color: #d1d100;
+        color: var(--mzn-playground-yellow);
     }
 
     .mzn-link {

diff --git a/src/lib/Tab.svelte b/src/lib/Tab.svelte
@@ -66,6 +66,7 @@
         />{suffix}
     {:else}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions-->
         <span class="filename" on:click={editName}>{name}{suffix}</span>
         {#if active && !readonly}
             <span class="close-tab" on:click={() => dispatch('close')}>

diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte
@@ -121,10 +121,11 @@
     .add-icon {
         margin: 0 !important;
     }
+
     .right {
         flex: 1 1 auto;
         display: flex !important;
         justify-content: flex-end;
-        padding-right: 0.5rem;
+        padding-right: 0.5rem !important;
     }
 </style>
diff --git a/src/style.scss b/src/style.scss
@@ -6,24 +6,14 @@ $pre-code-font-size: 1em;
 .mzn-playground {
     @import "./bulma";
 
-    /** Apply these here since we can't apply to body */
-    box-sizing: border-box;
-    line-height: $body-line-height;
-    font-family: $body-family;
-
-    background-color: $body-background-color;
-    font-size: $body-size;
-    min-width: $body-min-width;
-
-    font-family: $body-family;
-    color: $body-color;
-    font-size: $body-font-size;
-    font-weight: $body-weight;
-    line-height: $body-line-height;
-
     --mzn-playground-border: hsl(0, 0%, 86%);
     --mzn-playground-input-background-color: hsl(0, 0%, 100%);
     --mzn-playground-splitter: #EEE;
+
+    --mzn-playground-gray: gray;
+    --mzn-playground-blue: blue;
+    --mzn-playground-red: red;
+    --mzn-playground-yellow: #d1d100;
 }
 
 .mzn-playground.is-dark {
@@ -53,6 +43,11 @@ $pre-code-font-size: 1em;
     --mzn-playground-input-background-color: hsl(0, 0%, 12%);
     --mzn-playground-splitter: hsl(0, 0%, 29%);
 
+    --mzn-playground-gray: gray;
+    --mzn-playground-blue: #33beff;
+    --mzn-playground-red: red;
+    --mzn-playground-yellow: #d1d100;
+
     .delete {
         background-color: hsl(0, 0%, 20%);
         &::before, &::after {
@@ -80,7 +75,4 @@ $pre-code-font-size: 1em;
             background-color: hsl(0, 0%, 24%);
         }
     }
-
-    background-color: $body-background-color;
-    color: $body-color;
 }