From 39942740d894ac0289bfe2bfa640b424aad30b90 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Mon, 10 Dec 2018 12:10:30 -0600 Subject: [PATCH] Updates --- dist/dist.css | 167 +++------------------------------------------ dist/dist.css.map | 2 +- src/main.scss | 169 +++++----------------------------------------- 3 files changed, 28 insertions(+), 310 deletions(-) diff --git a/dist/dist.css b/dist/dist.css index 1d6148c..183b43d 100644 --- a/dist/dist.css +++ b/dist/dist.css @@ -2,18 +2,18 @@ --foreground-color: #3d3c40; --background-color: rebeccapurple; --highlight-color: #c9cccf; - --high-contrast-bg-color: #d9dbde; --border-color: var(--highlight-color); - --note-cell-border-color: var(--border-color); - --editor-text-color: var(--foreground-color); - --editor-bg-color: var(--high-contrast-bg-color); - --ui-component-text-color: var(--foreground-color); - --ui-component-bg-color: var(--high-contrast-bg-color); - --link-color: var(--background-color); - --selection-color: var(--border-color); --sn-stylekit-shadow-color: var(--highlight-color); --sn-stylekit-info-color: var(--background-color); --sn-stylekit-info-contrast-color: #e6e6e6; + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: white; + --sn-stylekit-success-color: #2B9612; + --sn-stylekit-success-contrast-color: white; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: white; + --sn-stylekit-danger-color: #F80324; + --sn-stylekit-danger-contrast-color: white; --sn-stylekit-background-color: #d9dbde; --sn-stylekit-foreground-color: #3d3c40; --sn-stylekit-border-color: #c9cccf; @@ -26,159 +26,14 @@ --sn-stylekit-secondary-contrast-background-color: #e7e7e7; --sn-stylekit-secondary-contrast-foreground-color: #3d3c40; --sn-stylekit-secondary-contrast-border-color: #c9cccf; + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); --sn-stylekit-paragraph-text-color: #3d3c40; --sn-stylekit-scrollbar-track-border-color: var(--border-color); - --sn-desktop-titlebar-bg-color: var(--high-contrast-bg-color); + --sn-desktop-titlebar-bg-color: #d9dbde; --sn-desktop-titlebar-border-color: var(--highlight-color); --sn-desktop-titlebar-ui-color: var(--foreground-color); --sn-desktop-titlebar-ui-hover-color: var(--background-color); } -/* Editors */ -.CodeMirror { - background-color: var(--editor-bg-color) !important; - color: var(--editor-text-color) !important; - border: 0 !important; -} - -.CodeMirror-cursor { - border-color: white; -} - -.CodeMirror-selected { - background: var(--selection-color) !important; -} - -.CodeMirror-gutters { - background-color: var(--high-contrast-bg-color) !important; - color: var(--editor-text-color) !important; - border-color: var(--border-color) !important; -} - -.CodeMirror .cm-header { - font-family: arial; - color: var(--editor-text-color) !important; -} - -.CodeMirror .cm-variable-2 { - font-family: arial; - color: var(--link-color) !important; -} - -.CodeMirror .cm-link, .cm-string, .cm-keyword { - font-family: arial; - color: var(--editor-text-color) !important; -} - -.CodeMirror .CodeMirror-linenumber { - color: gray !important; -} - -/* Code Editor bottom toolbar */ -#select-wrapper { - background-color: var(--high-contrast-bg-color) !important; - color: var(--editor-text-color) !important; - border-color: var(--border-color) !important; -} - -/* Advanced Markdown top toolbar */ -.editor-toolbar { - background-color: var(--high-contrast-bg-color) !important; - border-color: var(--border-color) !important; -} - -.editor-toolbar::before, ::after { - background: 0 !important; -} - -.editor-toolbar a { - color: var(--editor-text-color) !important; -} - -.editor-toolbar a.active, .editor-toolbar a:hover { - border-color: transparent; - background: var(--border-color); -} - -.editor-toolbar.disabled-for-preview a:not(.no-disable) { - background: inherit; -} - -.editor-preview-active, .editor-preview-active-side { - background-color: var(--editor-bg-color) !important; - border: 0 !important; - border-left: 1px solid var(--border-color) !important; - color: var(--editor-text-color) !important; -} - -#sn-advanced-markdown-editor .editor-toolbar i.separator { - border-right-color: var(--border-color); -} - -#sn-advanced-markdown-editor .editor-preview.editor-preview-active pre, #sn-advanced-markdown-editor .editor-preview-side.editor-preview-active-side pre { - background-color: var(--border-color); - padding: 20px; -} - -/* Plus Editor */ -#plus-editor .note-editor.note-frame.fullscreen .note-editable { - background-color: var(--editor-bg-color) !important; - color: var(--editor-text-color) !important; -} - -#plus-editor .panel-default > .panel-heading { - background-color: var(--editor-bg-color) !important; -} - -#plus-editor .btn-default { - color: var(--ui-component-text-color) !important; - background-color: var(--ui-component-bg-color) !important; - border-color: var(--highlight-color) !important; -} - -#plus-editor .panel-heading { - border-color: var(--border-color) !important; -} - -#plus-editor .dropdown-menu > li > a { - color: var(--editor-text-color); -} - -#plus-editor .table-bordered td { - border-color: var(--note-cell-border-color); -} - -.component-stack-border { - border-color: var(--border-color) !important; -} - -/*SN Components */ -:root { - --body-text-color: var(--editor-text-color); - --body-background-color: var(--high-contrast-bg-color); - --element-text-color: var(--ui-component-text-color); - --element-background-color: var(--ui-component-bg-color); - --tint-color: var(--highlight-color); -} - -.sn-component .element-background-color { - background-color: var(--element-background-color); -} - -.sn-component .body-background-color { - background-color: var(--body-background-color); -} - -.sn-component .element-text-color { - color: var(--element-text-color); -} - -.sn-component .body-text-color { - color: var(--body-text-color); -} - -.sn-component .border-color { - border-color: var(--border-color) !important; -} - /*# sourceMappingURL=dist.css.map */ diff --git a/dist/dist.css.map b/dist/dist.css.map index c7faed9..6c6a493 100644 --- a/dist/dist.css.map +++ b/dist/dist.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,KAAM;EAEJ,kBAAkB,CAAC,QAAQ;EAC3B,kBAAkB,CAAC,cAAc;EACjC,iBAAiB,CAAC,QAAQ;EAE1B,wBAAwB,CAAC,QAAQ;EACjC,cAAc,CAAC,uBAAuB;EAEtC,wBAAwB,CAAC,oBAAoB;EAC7C,mBAAmB,CAAC,wBAAwB;EAC5C,iBAAiB,CAAC,8BAA8B;EAChD,yBAAyB,CAAC,wBAAwB;EAClD,uBAAuB,CAAC,8BAA8B;EACtD,YAAY,CAAC,wBAAwB;EACrC,iBAAiB,CAAC,oBAAoB;EAGtC,0BAA0B,CAAC,uBAAuB;EAElD,wBAAwB,CAAC,wBAAwB;EACjD,iCAAiC,CAAC,QAAQ;EAE1C,8BAA8B,CAAC,QAAQ;EACvC,8BAA8B,CAAC,QAAQ;EACvC,0BAA0B,CAAC,QAAQ;EAEnC,uCAAuC,CAAC,QAAQ;EAChD,uCAAuC,CAAC,QAAQ;EAChD,mCAAmC,CAAC,QAAQ;EAE5C,wCAAwC,CAAC,QAAQ;EACjD,wCAAwC,CAAC,QAAQ;EACjD,oCAAoC,CAAC,QAAQ;EAE7C,iDAAiD,CAAC,QAAQ;EAC1D,iDAAiD,CAAC,QAAQ;EAC1D,6CAA6C,CAAC,QAAQ;EAEtD,kCAAkC,CAAC,QAAQ;EAE3C,0CAA0C,CAAC,oBAAoB;EAE/D,8BAA8B,CAAC,8BAA8B;EAC7D,kCAAkC,CAAC,uBAAuB;EAC1D,8BAA8B,CAAC,wBAAwB;EACvD,oCAAoC,CAAC,wBAAwB;;;AAG/D,aAAa;AAEb,WAAY;EACV,gBAAgB,EAAE,iCAAiC;EACnD,KAAK,EAAE,mCAAmC;EAC1C,MAAM,EAAE,YAAY;;;AAGtB,kBAAmB;EACjB,YAAY,EAAE,KAAK;;;AAGrB,oBAAqB;EACnB,UAAU,EAAE,iCAAiC;;;AAG/C,mBAAoB;EAClB,gBAAgB,EAAE,wCAAwC;EAC1D,KAAK,EAAE,mCAAmC;EAC1C,YAAY,EAAE,8BAA8B;;;AAG9C,sBAAuB;EAAE,WAAW,EAAE,KAAK;EAAE,KAAK,EAAE,mCAAmC;;;AACvF,0BAA2B;EAAE,WAAW,EAAE,KAAK;EAAE,KAAK,EAAE,4BAA4B;;;AACpF,6CAA8C;EAAE,WAAW,EAAE,KAAK;EAAE,KAAK,EAAE,mCAAmC;;;AAE9G,kCAAmC;EAAE,KAAK,EAAE,eAAe;;;AAE3D,gCAAgC;AAEhC,eAAgB;EACd,gBAAgB,EAAE,wCAAwC;EAC1D,KAAK,EAAE,mCAAmC;EAC1C,YAAY,EAAE,8BAA8B;;;AAG9C,mCAAmC;AAEnC,eAAgB;EACd,gBAAgB,EAAE,wCAAwC;EAC1D,YAAY,EAAE,8BAA8B;;;AAG9C,gCAAiC;EAC/B,UAAU,EAAE,YAAY;;;AAG1B,iBAAkB;EAChB,KAAK,EAAE,mCAAmC;;;AAG5C,iDAAkD;EAChD,YAAY,EAAE,WAAW;EACzB,UAAU,EAAE,mBAAmB;;;AAGjC,uDAAwD;EACtD,UAAU,EAAE,OAAO;;;AAGrB,mDAAoD;EAClD,gBAAgB,EAAE,iCAAiC;EACnD,MAAM,EAAE,YAAY;EACpB,WAAW,EAAE,wCAAwC;EACrD,KAAK,EAAE,mCAAmC;;;AAG5C,wDAA0D;EACxD,kBAAkB,EAAE,mBAAmB;;;AAGzC,wJAAyJ;EACvJ,gBAAgB,EAAE,mBAAmB;EACrC,OAAO,EAAE,IAAI;;;AAGf,iBAAiB;AAEjB,8DAA+D;EAC7D,gBAAgB,EAAE,iCAAiC;EACnD,KAAK,EAAE,mCAAmC;;;AAG5C,4CAA2C;EACzC,gBAAgB,EAAE,iCAAiC;;;AAGrD,yBAA0B;EACtB,KAAK,EAAE,yCAAyC;EAChD,gBAAgB,EAAE,uCAAuC;EACzD,YAAY,EAAE,iCAAiC;;;AAGnD,2BAA4B;EACxB,YAAY,EAAE,8BAA8B;;;AAGhD,oCAAiC;EAC7B,KAAK,EAAE,wBAAwB;;;AAGnC,+BAAgC;EAC9B,YAAY,EAAE,6BAA6B;;;AAK7C,uBAAwB;EACtB,YAAY,EAAE,8BAA8B;;;AAG9C,kBAAkB;AAElB,KAAM;EACJ,iBAAiB,CAAC,yBAAyB;EAC3C,uBAAuB,CAAC,8BAA8B;EAEtD,oBAAoB,CAAC,+BAA+B;EACpD,0BAA0B,CAAC,6BAA6B;EAExD,YAAY,CAAC,uBAAuB;;;AAGtC,uCAAwC;EACvC,gBAAgB,EAAE,+BAA+B;;;AAGlD,oCAAqC;EACpC,gBAAgB,EAAE,4BAA4B;;;AAG/C,iCAAkC;EACjC,KAAK,EAAE,yBAAyB;;;AAGjC,8BAA+B;EAC9B,KAAK,EAAE,sBAAsB;;;AAG9B,2BAA4B;EAC1B,YAAY,EAAE,8BAA8B", +"mappings": "AAAA,KAAM;EAEJ,kBAAkB,CAAC,QAAQ;EAC3B,kBAAkB,CAAC,cAAc;EACjC,iBAAiB,CAAC,QAAQ;EAE1B,cAAc,CAAC,uBAAuB;EAGtC,0BAA0B,CAAC,uBAAuB;EAElD,wBAAwB,CAAC,wBAAwB;EACjD,iCAAiC,CAAC,QAAQ;EAE1C,2BAA2B,CAAC,QAAQ;EACpC,oCAAoC,CAAC,MAAM;EAE3C,2BAA2B,CAAC,QAAQ;EACpC,oCAAoC,CAAC,MAAM;EAE3C,2BAA2B,CAAC,QAAQ;EACpC,oCAAoC,CAAC,MAAM;EAE3C,0BAA0B,CAAC,QAAQ;EACnC,mCAAmC,CAAC,MAAM;EAE1C,8BAA8B,CAAC,QAAQ;EACvC,8BAA8B,CAAC,QAAQ;EACvC,0BAA0B,CAAC,QAAQ;EAEnC,uCAAuC,CAAC,QAAQ;EAChD,uCAAuC,CAAC,QAAQ;EAChD,mCAAmC,CAAC,QAAQ;EAE5C,wCAAwC,CAAC,QAAQ;EACjD,wCAAwC,CAAC,QAAQ;EACjD,oCAAoC,CAAC,QAAQ;EAE7C,iDAAiD,CAAC,QAAQ;EAC1D,iDAAiD,CAAC,QAAQ;EAC1D,6CAA6C,CAAC,QAAQ;EAEtD,qCAAqC,CAAC,oCAAoC;EAC1E,qCAAqC,CAAC,oCAAoC;EAE1E,kCAAkC,CAAC,QAAQ;EAE3C,0CAA0C,CAAC,oBAAoB;EAE/D,8BAA8B,CAAC,QAAQ;EACvC,kCAAkC,CAAC,uBAAuB;EAC1D,8BAA8B,CAAC,wBAAwB;EACvD,oCAAoC,CAAC,wBAAwB", "sources": ["../src/main.scss"], "names": [], "file": "dist.css" diff --git a/src/main.scss b/src/main.scss index 15af93b..7afa73b 100644 --- a/src/main.scss +++ b/src/main.scss @@ -4,23 +4,26 @@ --background-color: rebeccapurple; --highlight-color: #c9cccf; - --high-contrast-bg-color: #d9dbde; --border-color: var(--highlight-color); - --note-cell-border-color: var(--border-color); - --editor-text-color: var(--foreground-color); - --editor-bg-color: var(--high-contrast-bg-color); - --ui-component-text-color: var(--foreground-color); - --ui-component-bg-color: var(--high-contrast-bg-color); - --link-color: var(--background-color); - --selection-color: var(--border-color); - // StyleKit Vars --sn-stylekit-shadow-color: var(--highlight-color); --sn-stylekit-info-color: var(--background-color); --sn-stylekit-info-contrast-color: #e6e6e6; + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: white; + + --sn-stylekit-success-color: #2B9612; + --sn-stylekit-success-contrast-color: white; + + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: white; + + --sn-stylekit-danger-color: #F80324; + --sn-stylekit-danger-contrast-color: white; + --sn-stylekit-background-color: #d9dbde; --sn-stylekit-foreground-color: #3d3c40; --sn-stylekit-border-color: #c9cccf; @@ -37,155 +40,15 @@ --sn-stylekit-secondary-contrast-foreground-color: #3d3c40; --sn-stylekit-secondary-contrast-border-color: #c9cccf; + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-paragraph-text-color: #3d3c40; --sn-stylekit-scrollbar-track-border-color: var(--border-color); - --sn-desktop-titlebar-bg-color: var(--high-contrast-bg-color); + --sn-desktop-titlebar-bg-color: #d9dbde; --sn-desktop-titlebar-border-color: var(--highlight-color); --sn-desktop-titlebar-ui-color: var(--foreground-color); --sn-desktop-titlebar-ui-hover-color: var(--background-color); } - -/* Editors */ - -.CodeMirror { - background-color: var(--editor-bg-color) !important; - color: var(--editor-text-color) !important; - border: 0 !important; -} - -.CodeMirror-cursor { - border-color: white; -} - -.CodeMirror-selected { - background: var(--selection-color) !important; -} - -.CodeMirror-gutters { - background-color: var(--high-contrast-bg-color) !important; - color: var(--editor-text-color) !important; - border-color: var(--border-color) !important; -} - -.CodeMirror .cm-header { font-family: arial; color: var(--editor-text-color) !important;} -.CodeMirror .cm-variable-2 { font-family: arial; color: var(--link-color) !important;} -.CodeMirror .cm-link, .cm-string, .cm-keyword { font-family: arial; color: var(--editor-text-color) !important;} - -.CodeMirror .CodeMirror-linenumber { color: gray !important; } - -/* Code Editor bottom toolbar */ - -#select-wrapper { - background-color: var(--high-contrast-bg-color) !important; - color: var(--editor-text-color) !important; - border-color: var(--border-color) !important; -} - -/* Advanced Markdown top toolbar */ - -.editor-toolbar { - background-color: var(--high-contrast-bg-color) !important; - border-color: var(--border-color) !important; -} - -.editor-toolbar::before, ::after { - background: 0 !important; -} - -.editor-toolbar a { - color: var(--editor-text-color) !important; -} - -.editor-toolbar a.active, .editor-toolbar a:hover { - border-color: transparent; - background: var(--border-color); -} - -.editor-toolbar.disabled-for-preview a:not(.no-disable) { - background: inherit; -} - -.editor-preview-active, .editor-preview-active-side { - background-color: var(--editor-bg-color) !important; - border: 0 !important; - border-left: 1px solid var(--border-color) !important; - color: var(--editor-text-color) !important; -} - -#sn-advanced-markdown-editor .editor-toolbar i.separator { - border-right-color: var(--border-color); -} - -#sn-advanced-markdown-editor .editor-preview.editor-preview-active pre, #sn-advanced-markdown-editor .editor-preview-side.editor-preview-active-side pre { - background-color: var(--border-color); - padding: 20px; -} - -/* Plus Editor */ - -#plus-editor .note-editor.note-frame.fullscreen .note-editable { - background-color: var(--editor-bg-color) !important; - color: var(--editor-text-color) !important; -} - -#plus-editor .panel-default>.panel-heading { - background-color: var(--editor-bg-color) !important; -} - -#plus-editor .btn-default { - color: var(--ui-component-text-color) !important; - background-color: var(--ui-component-bg-color) !important; - border-color: var(--highlight-color) !important; -} - -#plus-editor .panel-heading { - border-color: var(--border-color) !important; -} - -#plus-editor .dropdown-menu>li>a { - color: var(--editor-text-color); -} - -#plus-editor .table-bordered td { - border-color: var(--note-cell-border-color); -} - - - -.component-stack-border { - border-color: var(--border-color) !important; -} - -/*SN Components */ - -:root { - --body-text-color: var(--editor-text-color); - --body-background-color: var(--high-contrast-bg-color); - - --element-text-color: var(--ui-component-text-color); - --element-background-color: var(--ui-component-bg-color); - - --tint-color: var(--highlight-color); -} - -.sn-component .element-background-color { - background-color: var(--element-background-color); -} - -.sn-component .body-background-color { - background-color: var(--body-background-color); -} - -.sn-component .element-text-color { - color: var(--element-text-color); -} - -.sn-component .body-text-color { - color: var(--body-text-color); -} - -.sn-component .border-color { - border-color: var(--border-color) !important; -}