Merge branch 'master' into ui
This commit is contained in:
Alexei Stukov
GitHub
commit
25dac4d258
|
|
@ -1,126 +1,48 @@
|
|||
.bd-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
background: #44474c;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
background: $colbdblue;
|
||||
.bd-settings-button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
width: 70px;
|
||||
height: 48px;
|
||||
left: 0;
|
||||
background: #202225;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
|
||||
opacity: 1;
|
||||
|
||||
|
||||
&:not(.bd-disabled):hover {
|
||||
background: darken($colbdblue, 5%);
|
||||
}
|
||||
|
||||
&.bd-disabled {
|
||||
filter: grayscale(90%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.bd-err {
|
||||
background: $colerr;
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoSmallBw;
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3000;
|
||||
cursor: pointer;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5;
|
||||
transition: all 0.4s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: darken($colerr, 5%);
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-warn {
|
||||
background: $colwarn;
|
||||
|
||||
&:hover {
|
||||
background: darken($colwarn, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-ok {
|
||||
background: $colok;
|
||||
|
||||
&:hover {
|
||||
background: darken($colok, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-spinner-7 {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.material-design-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-button-group {
|
||||
display: flex;
|
||||
|
||||
.bd-button,
|
||||
.bd-material-button {
|
||||
|
||||
&:first-of-type {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px solid rgba(114, 118, 126, 0.3);
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-left: 1px solid rgba(114, 118, 126, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tabheader {
|
||||
.bd-button {
|
||||
&.active {
|
||||
background: transparent;
|
||||
border-bottom: 2px solid rgba(114, 118, 126, 0.3);
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
z-index: 90000;
|
||||
|
||||
h3 {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-material-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.material-design-icon,
|
||||
.bd-material-design-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
fill: #FFF;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2d2f34;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.bd-active {
|
||||
background: transparent;
|
||||
border-bottom: 2px solid $colbdblue;
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoBigBw;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 20px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
<div class="valign">Loading Please Wait...</div>
|
||||
</div>
|
||||
<div id="editor" class="editor">
|
||||
<codemirror
|
||||
ref="mycm"
|
||||
<codemirror
|
||||
ref="mycm"
|
||||
:options="cmOptions"
|
||||
@input="cmOnChange"
|
||||
/>
|
||||
|
|
@ -191,312 +191,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../node_modules/codemirror/lib/codemirror.css';
|
||||
@import '../../node_modules/codemirror/theme/material.css';
|
||||
@import '../../node_modules/codemirror/addon/scroll/simplescrollbars.css';
|
||||
@import '../../node_modules/codemirror/addon/dialog/dialog.css';
|
||||
@import '../../node_modules/codemirror/addon/hint/show-hint.css';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
background: #2c383e;
|
||||
min-width: 700px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.valign {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
padding: 4px 5px;
|
||||
background: #292b2f;
|
||||
border-bottom: 1px solid hsla(218,5%,47%,.3);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.titlebar .icon {
|
||||
width: 31px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.titlebar .icon .inner {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-size: 22px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.titlebar .title {
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.titlebar .controls {
|
||||
margin: 0 0 0 2px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.titlebar .controls button {
|
||||
-webkit-app-region: no-drag;
|
||||
border-radius: 3px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
/*background: #263238;*/
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: default;
|
||||
border: 0;
|
||||
height: 25px;
|
||||
z-index: 900062;
|
||||
padding: 0;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.titlebar .controls button:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.titlebar .controls button.active {
|
||||
background: #3a71c1;
|
||||
}
|
||||
|
||||
.titlebar .draggable {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 63px;
|
||||
position: absolute;
|
||||
height: 33px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
background: rgba(51, 48, 48, 0.41);
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2em;
|
||||
z-index: 90000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor .vue-codemirror {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor .vue-codemirror,
|
||||
.editor .vue-codemirror .CodeMirror {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tools {
|
||||
height: 36px;
|
||||
background: #292b2f;
|
||||
border-top: 1px solid hsla(218,5%,47%,.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tools .flex-row {
|
||||
flex-grow: 1;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.tools button {
|
||||
border-radius: 3px;
|
||||
width: 100px;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.tools button:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate {
|
||||
padding: 3px 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate input[type="checkbox"] {
|
||||
margin: 0 6px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*CodeMirror styling*/
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
|
||||
background: #38444a;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal div,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal,
|
||||
.CodeMirror-overlayscroll-horizontal div {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-vertical,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #292b2f;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
min-width: 34px;
|
||||
border-right: 1px solid hsla(218,5%,47%,.3);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
/*background: #1e262a;*/
|
||||
background: #292b2f;
|
||||
box-shadow: 2px 3px 5px rgba(4, 4, 4, 0.22);
|
||||
border: 1px solid #262f33;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar-thumb,
|
||||
.CodeMirror-hints::-webkit-scrollbar-track {
|
||||
background-clip: padding-box;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber,
|
||||
.CodeMirror-line {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-linenumber {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
color: #bac9d2;
|
||||
}
|
||||
|
||||
li.CodeMirror-hint-active {
|
||||
color: #bac9d2;
|
||||
/*background: #3b4950;*/
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog-top {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border: none;
|
||||
background: #1e262a;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
const styles = require('./styles/index.scss');
|
||||
|
||||
import Vue from 'vue';
|
||||
import Editor from './Editor.vue';
|
||||
import VueCodemirror from 'vue-codemirror'
|
||||
|
|
@ -10,4 +12,10 @@ new Vue({
|
|||
el: '#root',
|
||||
template: '<Editor/>',
|
||||
components: { Editor }
|
||||
});
|
||||
});
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = 'bd-main';
|
||||
style.type = 'text/css';
|
||||
style.appendChild(document.createTextNode(styles));
|
||||
document.head.appendChild(style);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
|
||||
background: #38444a;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal div,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal,
|
||||
.CodeMirror-overlayscroll-horizontal div {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-vertical,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #292b2f;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
min-width: 34px;
|
||||
border-right: 1px solid hsla(218,5%,47%,.3);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
/*background: #1e262a;*/
|
||||
background: #292b2f;
|
||||
box-shadow: 2px 3px 5px rgba(4, 4, 4, 0.22);
|
||||
border: 1px solid #262f33;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb,
|
||||
&::-webkit-scrollbar-track {
|
||||
background-clip: padding-box;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber,
|
||||
.CodeMirror-line {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-linenumber {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
color: #bac9d2;
|
||||
}
|
||||
|
||||
li.CodeMirror-hint-active {
|
||||
color: #bac9d2;
|
||||
/*background: #3b4950;*/
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog-top {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border: none;
|
||||
background: #1e262a;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.vue-codemirror {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&, & .CodeMirror {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
$bdicon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import '../../../node_modules/codemirror/lib/codemirror.css';
|
||||
@import '../../../node_modules/codemirror/theme/material.css';
|
||||
@import '../../../node_modules/codemirror/addon/scroll/simplescrollbars.css';
|
||||
@import '../../../node_modules/codemirror/addon/dialog/dialog.css';
|
||||
@import '../../../node_modules/codemirror/addon/hint/show-hint.css';
|
||||
|
||||
@import './images.scss';
|
||||
@import './main.scss';
|
||||
@import './titlebar.scss';
|
||||
@import './spinner.scss';
|
||||
@import './editor.scss';
|
||||
@import './tools.scss';
|
||||
@import './codemirror.scss';
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
background: #2c383e;
|
||||
min-width: 700px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.valign {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
#spinner {
|
||||
background: rgba(51, 48, 48, 0.41);
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2em;
|
||||
z-index: 90000;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
.titlebar {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
padding: 4px 5px;
|
||||
background: #292b2f;
|
||||
border-bottom: 1px solid hsla(218,5%,47%,.3);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
|
||||
.icon {
|
||||
width: 31px;
|
||||
height: 25px;
|
||||
|
||||
.inner {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-image: $bdicon;
|
||||
background-size: 22px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0 0 0 2px;
|
||||
font-size: 0;
|
||||
|
||||
button {
|
||||
-webkit-app-region: no-drag;
|
||||
border-radius: 3px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
/*background: #263238;*/
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: default;
|
||||
border: 0;
|
||||
height: 25px;
|
||||
z-index: 900062;
|
||||
padding: 0;
|
||||
margin: 0 0 0 4px;
|
||||
|
||||
&:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #3a71c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 63px;
|
||||
position: absolute;
|
||||
height: 33px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.tools {
|
||||
height: 36px;
|
||||
background: #292b2f;
|
||||
border-top: 1px solid hsla(218,5%,47%,.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
|
||||
.flex-row {
|
||||
flex-grow: 1;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 3px;
|
||||
width: 100px;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin-right: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
#chkboxLiveUpdate {
|
||||
padding: 3px 10px;
|
||||
line-height: 22px;
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 0 6px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue