Improve automator styling in light mode

This commit is contained in:
SpectralFlame 2022-06-08 16:31:46 -05:00 committed by cyip92
parent 3c2057e7a4
commit e3d8a3b54f
5 changed files with 21 additions and 10 deletions

View File

@ -1,10 +1,14 @@
:root {
--color-automator-controls-background: #d3d3d3;
--color-automator-controls-active: #0ba00e;
--color-automator-controls-inactive: #eeeeee;
--color-automator-controls-border: #767676;
--color-automator-active-line-background: #d8caeb;
--color-automator-active-line-outline: #7a49ff;
--color-automator-event-background: #007f00;
--color-automator-event-outline: #19c819;
--color-automator-event-outline: #094e09;
--color-automator-error-background: #ac0617;
--color-automator-error-outline: #440108;
--color-automator-docs-font: black;
--color-blockmator-block-border: #cfcfcf;
--color-blockmator-block-background: #f5f5f5;
@ -13,8 +17,12 @@
:root .s-base--dark {
--color-automator-controls-background: #262626;
--color-automator-controls-active: #007c00;
--color-automator-controls-inactive: #273757;
--color-automator-controls-border: #929292;
--color-automator-active-line-background: #2b065c;
--color-automator-active-line-outline: #4400ff;
--color-automator-event-background: #004b00;
--color-automator-docs-font: white;
--color-blockmator-block-border: #353535;
--color-blockmator-block-background: #000115;
@ -162,6 +170,7 @@
.c-automator__controls {
background-color: var(--color-automator-controls-background);
border-bottom: 0.3rem solid var(--color-automator-active-line-outline);
}
.l-automator__controls {
@ -222,14 +231,14 @@
.c-automator-editor__error-line {
background: var(--color-automator-error-background);
outline: 0.1rem solid var(--color-automator-event-outline);
outline: 0.1rem solid var(--color-automator-error-outline);
}
.c-automator-editor__error-line-gutter {
font-weight: bold;
background: var(--color-automator-error-background);
filter: brightness(200%);
outline: 0.1rem solid var(--color-automator-event-outline);
outline: 0.1rem solid var(--color-automator-error-outline);
}
.c-automator-editor {

View File

@ -27,10 +27,11 @@
.cm-s-liquibyte .CodeMirror-gutter-elt div { font-size: 1.2em; }
.cm-s-liquibyte .CodeMirror-guttermarker { }
.cm-s-liquibyte .CodeMirror-guttermarker-subtle { }
.cm-s-liquibyte .CodeMirror-linenumber { color: #606060; padding-left: 0; }
.cm-s-liquibyte .CodeMirror-linenumber { color: #000000; padding-left: 0; }
.cm-s-liquibyte .CodeMirror-cursor { border-left: 1px solid #262626; }
.s-base--dark .cm-s-liquibyte .CodeMirror-cursor { border-left: 1px solid #eee; }
.s-base--dark .cm-s-liquibyte .CodeMirror-linenumber { color: #ffffff; padding-left: 0; }
.s-base--dark .cm-s-liquibyte .CodeMirror-gutters { border-right: 1px solid #505050; }
@ -46,16 +47,17 @@
.s-base--dark .cm-s-liquibyte span.cm-keyword { color: #c080ff; }
.s-base--dark .cm-s-liquibyte span.cm-number { color: #0f0; }
.cm-s-liquibyte span.cm-variable-2 { color: #1d9494; font-weight: bold; }
.cm-s-liquibyte span.cm-variable-2 { color: #6ca7a7; font-weight: bold; }
.cm-s-liquibyte span.cm-variable-3, .cm-s-liquibyte span.cm-type { color: #c080ff; font-weight: bold; }
.cm-s-liquibyte span.cm-property { color: #999; font-weight: bold; }
.cm-s-liquibyte span.cm-operator { color: #000; }
.s-base--dark .cm-s-liquibyte span.cm-variable-2 { color: #21a8a8; }
.s-base--dark .cm-s-liquibyte span.cm-operator { color: #fff; }
.s-base--dark .cm-s-liquibyte span.cm-qualifier { color: #fff700; font-weight: bold; }
.cm-s-liquibyte span.cm-meta { color: #0f0; }
.cm-s-liquibyte span.cm-qualifier { color: #fff700; font-weight: bold; }
.cm-s-liquibyte span.cm-qualifier { color: #bdb700; font-weight: bold; }
.cm-s-liquibyte span.cm-bracket { color: #cc7; }
.cm-s-liquibyte span.cm-tag { color: #ff0; font-weight: bold; }
.cm-s-liquibyte span.cm-attribute { color: #c080ff; font-weight: bold; }

View File

@ -14,10 +14,10 @@ export default {
<style scoped>
.c-automator__button {
width: 3.3rem;
border: 0.2rem solid #767676;
border: 0.2rem solid var(--color-automator-controls-border);
border-radius: 0.3rem;
margin: 0.4rem;
cursor: pointer;
background-color: white;
background-color: var(--color-automator-controls-inactive);
}
</style>

View File

@ -179,7 +179,7 @@ export default {
}
.c-automator__button--active {
background-color: var(--color-reality);
background-color: var(--color-automator-controls-active);
border-color: var(--color-reality-light);
}

View File

@ -305,7 +305,7 @@ export default {
}
.c-automator__button--active {
background-color: var(--color-reality);
background-color: var(--color-automator-controls-active);
border-color: var(--color-reality-light);
}
</style>