diff --git a/client/src/styles/partials/generic/buttons.scss b/client/src/styles/partials/generic/buttons.scss
index bfa55f40..740772ea 100644
--- a/client/src/styles/partials/generic/buttons.scss
+++ b/client/src/styles/partials/generic/buttons.scss
@@ -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;
}
}
-}
\ No newline at end of file
+}
diff --git a/csseditor/src/Editor.vue b/csseditor/src/Editor.vue
index 921a2f2f..4d1d7e1c 100644
--- a/csseditor/src/Editor.vue
+++ b/csseditor/src/Editor.vue
@@ -16,8 +16,8 @@
Loading Please Wait...
-
@@ -191,312 +191,3 @@
}
}
-
-
\ No newline at end of file
diff --git a/csseditor/src/index.js b/csseditor/src/index.js
index 9f5eeee2..c108fad1 100644
--- a/csseditor/src/index.js
+++ b/csseditor/src/index.js
@@ -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: '',
components: { Editor }
-});
\ No newline at end of file
+});
+
+const style = document.createElement('style');
+style.id = 'bd-main';
+style.type = 'text/css';
+style.appendChild(document.createTextNode(styles));
+document.head.appendChild(style);
diff --git a/csseditor/src/styles/codemirror.scss b/csseditor/src/styles/codemirror.scss
new file mode 100644
index 00000000..b945ac14
--- /dev/null
+++ b/csseditor/src/styles/codemirror.scss
@@ -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;
+}
diff --git a/csseditor/src/styles/editor.scss b/csseditor/src/styles/editor.scss
new file mode 100644
index 00000000..a46844dc
--- /dev/null
+++ b/csseditor/src/styles/editor.scss
@@ -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;
+ }
+ }
+}
diff --git a/csseditor/src/styles/images.scss b/csseditor/src/styles/images.scss
new file mode 100644
index 00000000..d488f2ae
--- /dev/null
+++ b/csseditor/src/styles/images.scss
@@ -0,0 +1 @@
+$bdicon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
diff --git a/csseditor/src/styles/index.scss b/csseditor/src/styles/index.scss
new file mode 100644
index 00000000..a3ed0e36
--- /dev/null
+++ b/csseditor/src/styles/index.scss
@@ -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';
diff --git a/csseditor/src/styles/main.scss b/csseditor/src/styles/main.scss
new file mode 100644
index 00000000..20c89ea8
--- /dev/null
+++ b/csseditor/src/styles/main.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%;
+}
diff --git a/csseditor/src/styles/spinner.scss b/csseditor/src/styles/spinner.scss
new file mode 100644
index 00000000..97acdd91
--- /dev/null
+++ b/csseditor/src/styles/spinner.scss
@@ -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;
+}
diff --git a/csseditor/src/styles/titlebar.scss b/csseditor/src/styles/titlebar.scss
new file mode 100644
index 00000000..fb1cf701
--- /dev/null
+++ b/csseditor/src/styles/titlebar.scss
@@ -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;
+ }
+}
diff --git a/csseditor/src/styles/tools.scss b/csseditor/src/styles/tools.scss
new file mode 100644
index 00000000..d2fc3c16
--- /dev/null
+++ b/csseditor/src/styles/tools.scss
@@ -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;
+ }
+ }
+}