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; }