Dark tomato is darker, Light tomato is lighter

This commit is contained in:
Hirame1 2022-05-08 13:53:44 +07:00 committed by cyip92
parent 61debf676e
commit 190b0e27a7
7 changed files with 192 additions and 41 deletions

View File

@ -1,6 +1,54 @@
:root {
--color-automator-controls-background: lightgray;
--color-automator-splitter: gray;
--color-automator-active-line-background: rgba(178, 151, 214, 0.527);
--color-automator-active-line-outline: rgb(122, 73, 255);
--color-automator-event-background: rgb(0, 127, 0);
--color-automator-event-outline: rgb(25, 200, 25);
--color-automator-error-background: rgb(172, 6, 23);
--color-automator-error-outline: rgb(255, 0, 64);
--color-automator-docs-background: white;
--color-automator-docs-font: black;
--color-automator-error-underline: red;
--color-blockmator-block-border: #cfcfcf;
--color-blockmator-block-background: #f5f5f5;
--color-blockmator-block-font: #a142ff;
--color-blockmator-active-background: #b597d3;
--color-blockmator-editor-background: white;
--color-blockmator-editor-selection: #007f7f;
--color-blockmator-editor-input: rgb(0, 172, 0);
--color-blockmator-nested-block-border: #369b36;
--color-blockmator-block-delete: #ff3333;
--color-template-textbox-border: black;
}
:root .s-base--dark {
--color-automator-controls-background: #262626;
--color-automator-splitter: gray;
--color-automator-active-line-background: rgb(43, 6, 92);
--color-automator-active-line-outline: rgb(68, 0, 255);
--color-automator-event-background: rgb(0, 127, 0);
--color-automator-event-outline: rgb(25, 200, 25);
--color-automator-error-background: rgb(172, 6, 23);
--color-automator-error-outline: rgb(255, 0, 64);
--color-automator-docs-background: black;
--color-automator-docs-font: white;
--color-automator-error-underline: red;
--color-blockmator-block-border: #353535;
--color-blockmator-block-background: #000115;
--color-blockmator-block-font: #c080ff;
--color-blockmator-active-background: #50316f;
--color-blockmator-editor-background: black;
--color-blockmator-editor-selection: #01a1a1;
--color-blockmator-editor-input: #0f0;
--color-blockmator-nested-block-border: #55ff55;
--color-blockmator-block-delete: #ff3333;
--color-template-textbox-border: black;
}
._-automator-split-pane-fix {
width: 100%;
background-color: black;
background-color: var(--color-automator-splitter);
}
.c-automator-tab {
@ -133,7 +181,7 @@
}
.c-automator__controls {
background-color: #262626;
background-color: var(--color-automator-controls-background);
}
.l-automator__controls {
@ -169,46 +217,47 @@
}
.c-automator-editor__active-line {
background: rgb(43, 6, 92);
outline: 0.1rem solid rgb(68, 0, 255);
background: var(--color-automator-active-line-background);
outline: 0.1rem solid var(--color-automator-active-line-outline);
}
.c-automator-editor__active-line-gutter {
font-weight: bold;
background: rgb(43, 6, 92);
outline: 0.1rem solid rgb(68, 0, 255);
background: var(--color-automator-active-line-background);
filter: brightness(200%);
outline: 0.1rem solid var(--color-automator-active-line-outline);
}
.c-automator-editor__event-line {
background: rgb(0, 127, 0);
outline: 0.1rem solid rgb(25, 200, 25);
background: var(--color-automator-event-background);
outline: 0.1rem solid var(--color-automator-event-outline);
}
.c-automator-editor__event-line-gutter {
font-weight: bold;
background: rgb(0, 127, 0);
outline: 0.1rem solid rgb(25, 200, 25);
background: var(--color-automator-event-background);
filter: brightness(200%);
outline: 0.1rem solid var(--color-automator-event-outline);
}
.c-automator-editor__error-line {
background: rgb(172, 6, 23);
outline: 0.1rem solid rgb(255, 0, 64);
background: var(--color-automator-error-background);
outline: 0.1rem solid var(--color-automator-event-outline);
}
.c-automator-editor__error-line-gutter {
font-weight: bold;
background: rgb(172, 6, 23);
outline: 0.1rem solid rgb(255, 0, 64);
background: var(--color-automator-error-background);
filter: brightness(200%);
outline: 0.1rem solid var(--color-automator-event-outline);
}
.c-automator-editor {
text-align: left;
font-family: Typewriter, serif;
font-size: 1.4rem;
border-bottom: 0.15rem solid #262626;
text-align: left;
border-bottom: 0.15rem solid var(--color-automator-controls-background);
}
.l-automator-editor {
@ -246,12 +295,13 @@
.c-automator-docs {
overflow: auto;
text-align: left;
font-size: 1.4rem;
color: black;
background-color: lightgray;
border-right: 0.15rem solid #262626;
border-bottom: 0.15rem solid #262626;
padding-left: 1rem;
border-right: 0.15rem solid var(--color-automator-controls-background);
border-bottom: 0.15rem solid var(--color-automator-controls-background);
background-color: var(--color-automator-docs-background);
padding-left: 1rem;
font-size: 1.4rem;
color: var(--color-automator-docs-font);
}
.c-automator-docs-page {
@ -286,6 +336,10 @@
.o-automator-error-underline::before {
content: "~~~~~~~~~~~~";
overflow: hidden;
font-size: 0.6em;
font-weight: 700;
font-family: Times New Roman, Serif;
color: var(--color-automator-error-underline);
width: 100%;
position: absolute;
top: 12px;

View File

@ -1,9 +1,13 @@
.cm-s-liquibyte.CodeMirror {
background-color: #000;
color: #fff;
background-color: #fff;
color: #000;
line-height: 1.2em;
font-size: 1em;
}
.s-base--dark .cm-s-liquibyte.CodeMirror {
background-color: #000;
color: #fff;
}
.cm-s-liquibyte .CodeMirror-focused .cm-matchhighlight {
text-decoration: underline;
text-decoration-color: #0f0;
@ -19,26 +23,36 @@
text-decoration-color: #404040;
text-decoration-style: dotted;
}
.cm-s-liquibyte .CodeMirror-gutters { background-color: #262626; border-right: 1px solid #505050; padding-right: 0.8em; }
.cm-s-liquibyte .CodeMirror-gutters { background-color: #eee; border-right: 1px solid #999; padding-right: 0.8em; }
.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-cursor { border-left: 1px solid #eee; }
.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-gutters { background-color: #262626; border-right: 1px solid #505050; }
.cm-s-liquibyte span.cm-comment { color: #008000; }
.cm-s-liquibyte span.cm-def { color: #ffaf40; font-weight: bold; }
.cm-s-liquibyte span.cm-keyword { color: #c080ff; font-weight: bold; }
.cm-s-liquibyte span.cm-keyword { color: #9d68d3; font-weight: bold; }
.cm-s-liquibyte span.cm-builtin { color: #ffaf40; font-weight: bold; }
.cm-s-liquibyte span.cm-variable { color: #5967ff; font-weight: bold; }
.cm-s-liquibyte span.cm-string { color: #ff8000; }
.cm-s-liquibyte span.cm-number { color: #0f0; font-weight: bold; }
.cm-s-liquibyte span.cm-number { color: rgb(0, 190, 0); font-weight: bold; }
.cm-s-liquibyte span.cm-atom { color: #bf3030; font-weight: bold; }
.cm-s-liquibyte span.cm-variable-2 { color: #21a8a8; font-weight: bold; }
.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-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: #fff; }
.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; }
.cm-s-liquibyte span.cm-meta { color: #0f0; }
.cm-s-liquibyte span.cm-qualifier { color: #fff700; font-weight: bold; }
@ -48,7 +62,9 @@
.cm-s-liquibyte span.cm-error { color: #f00; }
.cm-s-liquibyte span.cm-blob { color: #fc2; }
.cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.25); }
.cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.1); }
.s-base--dark .cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.25); }
.cm-s-liquibyte span.cm-compilation { background-color: rgba(255, 255, 255, 0.12); }

View File

@ -8937,9 +8937,10 @@ kbd {
.o-automator-command {
display: inline-block;
min-width: 8.5rem;
color: #c080ff;
background: #000115;
border: 0.1rem solid #353535;
border: 0.1rem solid var(--color-blockmator-block-border);
padding: 0.5rem;
background: var(--color-blockmator-block-background);
color: var(--color-blockmator-block-font);
border-radius: var(--var-border-radius, 0.5rem);
padding: 0.5rem;
-webkit-user-select: none;
@ -8974,7 +8975,7 @@ kbd {
}
.c-automator-block-row-active {
background: #50316f;
background: var(--color-blockmator-active-background);
}
.c-automator-block-row-ghost {
@ -8986,6 +8987,19 @@ kbd {
padding: 0.3rem 0.6rem;
}
.c-automator-block-editor {
overflow-y: scroll;
height: 100%;
background-color: var(--color-blockmator-editor-background);
border-left: 0.1rem solid var(--color-automator-controls-background);
border-bottom: 0.1rem solid var(--color-automator-controls-background);
box-sizing: border-box;
padding: 0.5rem;
tab-size: 1.5em;
-moz-tab-size: 1.5em;
-o-tab-size: 1.5em;
}
.s-base--metro .c-automator-block-editor::-webkit-scrollbar-thumb {
border-radius: 0;
}
@ -8994,18 +9008,29 @@ kbd {
display: inline-block;
font-family: Typewriter, serif;
font-size: 1.1rem;
color: #007f7f;
background: #000115;
border: 0.1rem solid #353535;
border: 0.1rem solid var(--color-blockmator-block-border);
padding: 0.5rem;
background: var(--color-blockmator-block-background);
color: var(--color-blockmator-editor-selection);
border-radius: var(--var-border-radius, 0.5rem);
padding: 0.5rem;
}
input.o-automator-block-input {
color: #00ff00;
color: var(--color-blockmator-editor-input);
}
.l-automator-nested-block {
width: fit-content;
padding: 1rem;
border: var(--var-border-width, 2px) dotted var(--color-blockmator-nested-block-border);
margin-left: 3rem;
margin-top: 0.5rem;
min-widtH: 30rem;
}
.o-automator-block-delete {
color: var(--color-blockmator-block-delete);
font-size: 1.7rem;
color: #ff3333;
cursor: pointer;
@ -9038,7 +9063,7 @@ input.o-automator-block-input {
.c-automator-template-textbox {
text-align: center;
border: 0.1rem solid black;
border: 0.1rem solid var(--color-template-textbox-border);
border-radius: var(--var-border-radius, 0.3rem);
}

View File

@ -140,13 +140,13 @@ export default {
<button
v-for="(preset, presetNumber) in presets"
:key="preset.name"
class="o-primary-btn"
class="o-primary-btn o-load-preset-button-margin"
@click="loadPreset(preset.name, presetNumber + 1)"
>
{{ preset.name ? preset.name : presetNumber + 1 }}
</button>
<button
class="o-primary-btn"
class="o-primary-btn o-load-preset-button-margin"
@click="loadCurrent"
>
<i>Current Tree</i>
@ -209,3 +209,9 @@ export default {
</button>
</ModalWrapper>
</template>
<style scoped>
.o-load-preset-button-margin {
margin-right: 0.3rem;
}
</style>

View File

@ -18,5 +18,6 @@ export default {
border-radius: 0.3rem;
margin: 0.4rem;
cursor: pointer;
background-color: white;
}
</style>

View File

@ -31,8 +31,9 @@ export default {
<style scoped>
.c-automator-docs-template--button {
border-radius: 0.3rem;
margin: 0.4rem;
border-radius: var(--var-border-radius, 0.4rem);
border-width: var(--var-border-width, 0.2rem);
cursor: pointer;
}
</style>

View File

@ -79,3 +79,51 @@ export default {
<AutomatorBlockEditor v-if="!isTextAutomator" />
</div>
</template>
<style scoped>
.c-slider-toggle-button {
color: black;
background-color: #626262;
border: 0.2rem solid #767676;
border-radius: 0.2rem;
margin: 0.4rem;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
padding: 0.3rem 0;
}
.s.base--dark .c-slider-toggle-button {
background-color: #626262;
}
.c-slider-toggle-button .fas {
width: 3rem;
position: relative;
z-index: 1;
}
.c-slider-toggle-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 100%;
border-radius: 0.2rem;
transition: 0.3s ease all;
background-color: white;
z-index: 0;
}
.c-slider-toggle-button--right:before {
left: 3rem;
background-color: white;
}
.tutorial--glow:after {
z-index: 2;
}
</style>