diff --git a/src/bulma.scss b/src/bulma.scss
index 8bc876c..96298d7 100644
--- 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
index 7327edd..3d74f21 100644
--- 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
index 6032d92..f720e92 100644
--- 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
index ea062db..b3e9c75 100644
--- a/src/lib/Tab.svelte
+++ b/src/lib/Tab.svelte
@@ -66,6 +66,7 @@
/>{suffix}
{:else}
+
{name}{suffix}
{#if active && !readonly}
dispatch('close')}>
diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte
index e178135..97f064d 100644
--- 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;
}
diff --git a/src/style.scss b/src/style.scss
index 968b3f6..91e3680 100644
--- 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;
}