themes (part 2)

This commit is contained in:
benweet 2018-01-14 16:27:06 +00:00
parent dcd8e1c6c5
commit 99d87fce66
16 changed files with 15408 additions and 87 deletions

View File

@ -30,16 +30,16 @@ https://stackedit.io/.
``` bash ``` bash
# install dependencies # install dependencies
yarn install npm install
# serve with hot reload at localhost:8080 # serve with hot reload at localhost:8080
yarn start npm start
# build for production with minification # build for production with minification
yarn run build npm run build
# build for production and view the bundle analyzer report # build for production and view the bundle analyzer report
yarn run build --report npm run build --report
``` ```
> **NOTE:** This page has been written and published with [StackEdit](https://stackedit.io/ "StackEdit"). > **NOTE:** This page has been written and published with [StackEdit](https://stackedit.io/ "StackEdit").

View File

@ -10,6 +10,7 @@ const prismScripts = [
'prismjs/components/prism-javascript', 'prismjs/components/prism-javascript',
'prismjs/components/prism-css', 'prismjs/components/prism-css',
'prismjs/components/prism-ruby', 'prismjs/components/prism-ruby',
'prismjs/components/prism-cpp',
].map(require.resolve); ].map(require.resolve);
prismScripts.push( prismScripts.push(
path.join(path.dirname(require.resolve('prismjs/components/prism-core')), 'prism-!(*.min).js')); path.join(path.dirname(require.resolve('prismjs/components/prism-core')), 'prism-!(*.min).js'));

14982
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -43,8 +43,9 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import 'common/variables.scss';
.button-bar { .button-bar {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -60,27 +61,44 @@ export default {
} }
.button-bar__button { .button-bar__button {
display: block;
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
display: block;
width: 26px; width: 26px;
height: 26px; height: 26px;
padding: 2px; padding: 2px;
margin: 3px 0; margin: 3px 0;
.app--dark & {
color: rgba(255, 255, 255, 0.15);
}
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
.app--dark & {
color: rgba(255, 255, 255, 0.15);
background-color: $navbar-hover-background;
}
} }
} }
.button-bar__button--on { .button-bar__button--on {
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
.app--dark & {
color: rgba(255, 255, 255, 0.4);
}
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
.app--dark & {
color: rgba(255, 255, 255, 0.4);
}
} }
} }
</style> </style>

View File

@ -349,6 +349,7 @@ export default {
.find-replace-highlighting { .find-replace-highlighting {
background-color: $highlighting-color; background-color: $highlighting-color;
color: $editor-color-light !important;
} }
.find-replace-selection { .find-replace-selection {

View File

@ -18,9 +18,6 @@
<sticky-comment v-if="styles.editorGutterWidth && stickyComment === 'top'"></sticky-comment> <sticky-comment v-if="styles.editorGutterWidth && stickyComment === 'top'"></sticky-comment>
<current-discussion v-if="styles.editorGutterWidth"></current-discussion> <current-discussion v-if="styles.editorGutterWidth"></current-discussion>
</div> </div>
<div class="layout__panel layout__panel--find-replace" v-if="showFindReplace">
<find-replace></find-replace>
</div>
</div> </div>
<div class="layout__panel layout__panel--button-bar" v-show="styles.showEditor" :style="{width: constants.buttonBarWidth + 'px'}"> <div class="layout__panel layout__panel--button-bar" v-show="styles.showEditor" :style="{width: constants.buttonBarWidth + 'px'}">
<button-bar></button-bar> <button-bar></button-bar>
@ -35,6 +32,9 @@
<current-discussion v-if="styles.previewGutterWidth"></current-discussion> <current-discussion v-if="styles.previewGutterWidth"></current-discussion>
</div> </div>
</div> </div>
<div class="layout__panel layout__panel--find-replace" v-if="showFindReplace">
<find-replace></find-replace>
</div>
</div> </div>
<div class="layout__panel layout__panel--status-bar" v-show="styles.showStatusBar" :style="{height: constants.statusBarHeight + 'px'}"> <div class="layout__panel layout__panel--status-bar" v-show="styles.showStatusBar" :style="{height: constants.statusBarHeight + 'px'}">
<status-bar></status-bar> <status-bar></status-bar>
@ -148,13 +148,8 @@ export default {
background-color: #007acc; background-color: #007acc;
} }
$editor-background-light: #fff;
$editor-background-dark: #1e1e1e;
.layout__panel--editor { .layout__panel--editor {
.app--light & {
background-color: $editor-background-light; background-color: $editor-background-light;
}
.app--dark & { .app--dark & {
background-color: $editor-background-dark; background-color: $editor-background-dark;
@ -164,13 +159,11 @@ $editor-background-dark: #1e1e1e;
.comment-list__current-discussion, .comment-list__current-discussion,
.sticky-comment, .sticky-comment,
.current-discussion { .current-discussion {
.app--light & {
background-color: mix(#000, $editor-background-light, 6.7%); background-color: mix(#000, $editor-background-light, 6.7%);
border-color: $editor-background-light; border-color: $editor-background-light;
}
.app--dark & { .app--dark & {
background-color: mix(#fff, $editor-background-dark, 5%); background-color: mix(#fff, $editor-background-dark, 6.7%);
border-color: $editor-background-dark; border-color: $editor-background-dark;
} }
} }
@ -181,9 +174,7 @@ $preview-background-dark: #252525;
.layout__panel--preview, .layout__panel--preview,
.layout__panel--button-bar { .layout__panel--button-bar {
.app--light & {
background-color: $preview-background-light; background-color: $preview-background-light;
}
.app--dark & { .app--dark & {
background-color: $preview-background-dark; background-color: $preview-background-dark;

View File

@ -134,6 +134,10 @@ $corner-size: 110px;
border-top: $corner-size solid rgba(0, 0, 0, 0.075); border-top: $corner-size solid rgba(0, 0, 0, 0.075);
border-left: $corner-size solid transparent; border-left: $corner-size solid transparent;
pointer-events: none; pointer-events: none;
.app--dark & {
border-top-color: rgba(255, 255, 255, 0.075);
}
} }
} }
@ -146,11 +150,19 @@ $corner-size: 110px;
padding: 5px; padding: 5px;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
.app--dark & {
color: rgba(255, 255, 255, 0.25);
}
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: rgba(0, 0, 0, 0.33); color: rgba(0, 0, 0, 0.33);
background-color: transparent; background-color: transparent;
.app--dark & {
color: rgba(255, 255, 255, 0.33);
}
} }
} }
</style> </style>

View File

@ -100,6 +100,18 @@ textarea {
text-decoration: none; text-decoration: none;
} }
.app--dark .layout__panel--editor &,
.app--dark .layout__panel--preview & {
color: #ccc;
&:active,
&:focus,
&:hover {
color: #ccc;
background-color: rgba(255, 255, 255, 0.067);
}
}
&[disabled] { &[disabled] {
&, &,
&:active, &:active,
@ -235,22 +247,38 @@ textarea {
height: 21px; height: 21px;
line-height: 1; line-height: 1;
.app--dark & {
color: rgba(255, 255, 255, 0.33);
}
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
.app--dark & {
color: rgba(255, 255, 255, 0.4);
}
} }
} }
.discussion-editor-highlighting, .discussion-editor-highlighting,
.discussion-preview-highlighting { .discussion-preview-highlighting {
background-color: mix(#fff, $selection-highlighting-color, 70%); background-color: mix($editor-background-light, $selection-highlighting-color, 70%);
padding: 0.25em 0; padding: 0.25em 0;
.app--dark & {
background-color: mix($editor-background-dark, $selection-highlighting-color, 70%);
}
} }
.discussion-editor-highlighting--hover, .discussion-editor-highlighting--hover,
.discussion-preview-highlighting--hover { .discussion-preview-highlighting--hover {
background-color: mix(#fff, $selection-highlighting-color, 50%); background-color: mix($editor-background-light, $selection-highlighting-color, 50%);
.app--dark & {
background-color: mix($editor-background-dark, $selection-highlighting-color, 50%);
}
* { * {
background-color: transparent; background-color: transparent;
@ -259,7 +287,11 @@ textarea {
.discussion-editor-highlighting--selected, .discussion-editor-highlighting--selected,
.discussion-preview-highlighting--selected { .discussion-preview-highlighting--selected {
background-color: mix(#fff, $selection-highlighting-color, 20%); background-color: mix($editor-background-light, $selection-highlighting-color, 20%);
.app--dark & {
background-color: mix($editor-background-dark, $selection-highlighting-color, 20%);
}
* { * {
background-color: transparent; background-color: transparent;

View File

@ -9,7 +9,7 @@
html, html,
body { body {
color: $body-color; color: $body-color-light;
font-size: 16px; font-size: 16px;
font-family: $font-family-main; font-family: $font-family-main;
font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures;
@ -18,6 +18,11 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.app--dark .layout__panel--editor,
.app--dark .layout__panel--preview {
color: $body-color-dark;
}
p, p,
blockquote, blockquote,
pre, pre,
@ -81,6 +86,12 @@ blockquote {
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
padding-left: 1.5em; padding-left: 1.5em;
border-left: 5px solid rgba(0, 0, 0, 0.075); border-left: 5px solid rgba(0, 0, 0, 0.075);
.app--dark .layout__panel--editor &,
.app--dark .layout__panel--preview & {
color: rgba(255, 255, 255, 0.4);
border-left-color: rgba(255, 255, 255, 0.075);
}
} }
code { code {

View File

@ -1,10 +1,8 @@
@import './variables'; @import './variables';
.markdown-highlighting { .markdown-highlighting {
.app--light & {
color: $editor-color-light; color: $editor-color-light;
caret-color: $editor-color-light-low; caret-color: $editor-color-light-low;
}
.app--dark & { .app--dark & {
color: $editor-color-dark; color: $editor-color-dark;
@ -27,9 +25,7 @@
} }
.pre { .pre {
.app--light & {
color: $editor-color-light; color: $editor-color-light;
}
.app--dark & { .app--dark & {
color: $editor-color-dark; color: $editor-color-dark;
@ -39,9 +35,7 @@
font-size: $font-size-monospace; font-size: $font-size-monospace;
[class*='language-'] { [class*='language-'] {
.app--light & {
color: $editor-color-light-low; color: $editor-color-light-low;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-low; color: $editor-color-dark-low;
@ -59,9 +53,7 @@
} }
.tag { .tag {
.app--light & {
color: $editor-color-light; color: $editor-color-light;
}
.app--dark & { .app--dark & {
color: $editor-color-dark; color: $editor-color-dark;
@ -84,9 +76,7 @@
.latex, .latex,
.math { .math {
.app--light & {
color: $editor-color-light; color: $editor-color-light;
}
.app--dark & { .app--dark & {
color: $editor-color-dark; color: $editor-color-dark;
@ -94,9 +84,7 @@
} }
.entity { .entity {
.app--light & {
color: $editor-color-light; color: $editor-color-light;
}
.app--dark & { .app--dark & {
color: $editor-color-dark; color: $editor-color-dark;
@ -121,9 +109,7 @@
} }
.comment { .comment {
.app--light & {
color: $editor-color-light-high; color: $editor-color-light-high;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-high; color: $editor-color-dark-high;
@ -131,9 +117,7 @@
} }
.keyword { .keyword {
.app--light & {
color: $editor-color-light-low; color: $editor-color-light-low;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-low; color: $editor-color-dark-low;
@ -173,7 +157,11 @@
} }
.blockquote { .blockquote {
color: rgba(0, 0, 0, 0.48); color: $editor-color-light-blockquote;
.app--dark & {
color: $editor-color-dark-blockquote;
}
} }
.h1, .h1,
@ -219,9 +207,7 @@
} }
.cl-hash { .cl-hash {
.app--light & {
color: $editor-color-light-high; color: $editor-color-light-high;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-high; color: $editor-color-dark-high;
@ -230,9 +216,7 @@
.cl, .cl,
.hr { .hr {
.app--light & {
color: $editor-color-light-high; color: $editor-color-light-high;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-high; color: $editor-color-dark-high;
@ -264,9 +248,7 @@
} }
.linkdef .url { .linkdef .url {
.app--light & {
color: $editor-color-light-high; color: $editor-color-light-high;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-high; color: $editor-color-dark-high;
@ -291,18 +273,14 @@
.imgref, .imgref,
.link, .link,
.linkref { .linkref {
.app--light & {
color: $editor-color-light-high; color: $editor-color-light-high;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-high; color: $editor-color-dark-high;
} }
.cl-underlined-text { .cl-underlined-text {
.app--light & {
color: $editor-color-light-low; color: $editor-color-light-low;
}
.app--dark & { .app--dark & {
color: $editor-color-dark-low; color: $editor-color-dark-low;
@ -311,9 +289,7 @@
} }
.cl-title { .cl-title {
.app--light & {
color: $editor-color-light; color: $editor-color-light;
}
.app--dark & { .app--dark & {
color: $editor-color-dark; color: $editor-color-dark;

View File

@ -1,4 +1,4 @@
/* stylelint-disable color-hex-case, color-hex-length, rule-empty-line-before, comment-empty-line-before */ /* stylelint-disable color-hex-case, color-hex-length, rule-empty-line-before, comment-empty-line-before, comment-whitespace-inside, comment-no-empty */
.mermaid { .mermaid {
font-size: 16px; font-size: 16px;
@ -7,6 +7,10 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
.app--dark & {
color: rgba(255, 255, 255, 0.75);
}
* { * {
font-family: $font-family-main; font-family: $font-family-main;
} }
@ -357,3 +361,278 @@
z-index: 100; z-index: 100;
} }
} }
.app--dark .mermaid {
/* Flowchart variables */
/* Sequence Diagram variables */
/* Gantt chart variables */
.label {
color: #323D47;
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: #BDD5EA;
stroke: #81B1DB;
stroke-width: 1px;
}
.edgePath .path {
stroke: lightgrey;
}
.edgeLabel {
background-color: #e8e8e8;
}
.cluster rect {
fill: #6D6D65 !important;
rx: 4 !important;
stroke: rgba(255, 255, 255, 0.25) !important;
stroke-width: 1px !important;
}
.cluster text {
fill: #F9FFFE;
}
.actor {
stroke: #81B1DB;
fill: #BDD5EA;
}
text.actor {
fill: black;
stroke: none;
}
.actor-line {
stroke: lightgrey;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: lightgrey;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
stroke: lightgrey;
}
#arrowhead {
fill: lightgrey !important;
}
#crosshead path {
fill: lightgrey !important;
stroke: lightgrey !important;
}
.messageText {
fill: lightgrey;
stroke: none;
}
.labelBox {
stroke: #81B1DB;
fill: #BDD5EA;
}
.labelText {
fill: #323D47;
stroke: none;
}
.loopText {
fill: lightgrey;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: #81B1DB;
}
.note {
stroke: rgba(255, 255, 255, 0.25);
fill: #fff5ad;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: rgba(255, 255, 255, 0.3);
}
.section2 {
fill: #EAE8B9;
}
.section1,
.section3 {
fill: white;
opacity: 0.2;
}
.sectionTitle0 {
fill: #F9FFFE;
}
.sectionTitle1 {
fill: #F9FFFE;
}
.sectionTitle2 {
fill: #F9FFFE;
}
.sectionTitle3 {
fill: #F9FFFE;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
}
/* Grid and axis */
.grid .tick {
stroke: rgba(255, 255, 255, 0.3);
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid .tick text {
fill: lightgrey;
opacity: 0.5;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: #DB5757;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 1;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: #323D47;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: #323D47;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: #323D47;
}
.task0,
.task1,
.task2,
.task3 {
fill: #BDD5EA;
stroke: rgba(255, 255, 255, 0.5);
}
.taskTextOutside0,
.taskTextOutside2 {
fill: lightgrey;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: lightgrey;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: #81B1DB;
stroke: rgba(255, 255, 255, 0.5);
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: #323D47 !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
fill: lightgrey;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: #323D47 !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: #E83737;
fill: #E83737;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: #E83737;
fill: #81B1DB;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: #E83737;
fill: lightgrey;
stroke-width: 1;
cursor: pointer;
shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: lightgrey !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: #323D47 !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: lightgrey;
}
/*
*/
.node text {
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
font-size: 12px;
background: #6D6D65;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
}

View File

@ -1,10 +1,11 @@
$font-family-main: Lato, 'Helvetica Neue', Helvetica, sans-serif; $font-family-main: Lato, 'Helvetica Neue', Helvetica, sans-serif;
$font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console', monaco, Courrier, monospace; $font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console', monaco, Courrier, monospace;
$body-color: rgba(0, 0, 0, 0.75); $body-color-light: rgba(0, 0, 0, 0.75);
$body-color-dark: rgba(255, 255, 255, 0.75);
$code-bg: rgba(0, 0, 0, 0.05);
$line-height-base: 1.67; $line-height-base: 1.67;
$line-height-title: 1.33; $line-height-title: 1.33;
$font-size-monospace: 0.85em; $font-size-monospace: 0.85em;
$code-bg: rgba(0, 0, 0, 0.05);
$highlighting-color: #ff0; $highlighting-color: #ff0;
$selection-highlighting-color: #ff9632; $selection-highlighting-color: #ff9632;
$info-bg: transparentize($selection-highlighting-color, 0.85); $info-bg: transparentize($selection-highlighting-color, 0.85);
@ -18,13 +19,18 @@ $navbar-color: mix($navbar-bg, #fff, 33%);
$navbar-hover-color: #fff; $navbar-hover-color: #fff;
$navbar-hover-background: rgba(255, 255, 255, 0.1); $navbar-hover-background: rgba(255, 255, 255, 0.1);
$editor-background-light: #fff;
$editor-background-dark: #1e1e1e;
$editor-color-light: rgba(0, 0, 0, 0.8); $editor-color-light: rgba(0, 0, 0, 0.8);
$editor-color-light-high: rgba(0, 0, 0, 0.28);
$editor-color-light-low: #000; $editor-color-light-low: #000;
$editor-color-light-high: rgba(0, 0, 0, 0.28);
$editor-color-light-blockquote: rgba(0, 0, 0, 0.48);
$editor-color-dark: rgba(255, 255, 255, 0.8); $editor-color-dark: rgba(255, 255, 255, 0.8);
$editor-color-dark-high: rgba(255, 255, 255, 0.28);
$editor-color-dark-low: #fff; $editor-color-dark-low: #fff;
$editor-color-dark-high: rgba(255, 255, 255, 0.28);
$editor-color-dark-blockquote: rgba(255, 255, 255, 0.48);
$editor-font-weight-base: 400; $editor-font-weight-base: 400;
$editor-font-weight-bold: 600; $editor-font-weight-bold: 600;

View File

@ -300,8 +300,12 @@ div.comment {
position: absolute; position: absolute;
bottom: -8px; bottom: -8px;
right: 0; right: 0;
border-top: 8px solid #fff; border-top: 8px solid $editor-background-light;
border-left: 8px solid transparent; border-left: 8px solid transparent;
.app--dark & {
border-top-color: $editor-background-dark;
}
} }
h1, h1,
@ -351,11 +355,15 @@ div.comment {
max-height: 200px; max-height: 200px;
overflow: auto; overflow: auto;
padding: 1px 8px; padding: 1px 8px;
background-color: #fff; background-color: $editor-background-light;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $border-radius-base; border-radius: $border-radius-base;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
.app--dark & {
background-color: $editor-background-dark;
}
.markdown-highlighting { .markdown-highlighting {
padding: 5px 0; padding: 5px 0;
margin: 0; margin: 0;

View File

@ -158,8 +158,12 @@ export default {
span { span {
padding: 0.2em 0; padding: 0.2em 0;
background-color: mix(#fff, $selection-highlighting-color, 10%); background-color: mix($editor-background-light, $selection-highlighting-color, 10%);
cursor: pointer; cursor: pointer;
.app--dark {
background-color: mix($editor-background-dark, $selection-highlighting-color, 10%);
}
} }
} }
</style> </style>

View File

@ -268,9 +268,7 @@ export default {
.layout--revision { .layout--revision {
.cledit-section *, .cledit-section *,
.cl-preview-section * { .cl-preview-section * {
.app--light & {
color: transparentize($editor-color-light, 0.67) !important; color: transparentize($editor-color-light, 0.67) !important;
}
.app--dark & { .app--dark & {
color: transparentize($editor-color-dark, 0.67) !important; color: transparentize($editor-color-dark, 0.67) !important;
@ -278,9 +276,7 @@ export default {
} }
.cledit-section .revision-diff { .cledit-section .revision-diff {
.app--light & {
color: $editor-color-light !important; color: $editor-color-light !important;
}
.app--dark & { .app--dark & {
color: $editor-color-dark !important; color: $editor-color-dark !important;
@ -288,7 +284,11 @@ export default {
} }
.cl-preview-section .revision-diff { .cl-preview-section .revision-diff {
color: $body-color !important; color: $body-color-light !important;
.app--dark & {
color: $body-color-dark !important;
}
} }
.revision-diff { .revision-diff {

View File

@ -241,7 +241,7 @@
<div class="navigation-bar"> <div class="navigation-bar">
<a class="navigation-bar__button button" href="app" title="Editor"> <a class="navigation-bar__button button" href="app" title="Editor">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M 16.8363,2.73375C 16.45,2.73375 16.0688,2.88125 15.7712,3.17375L 13.6525,5.2925L 18.955,10.5962L 21.0737,8.47625C 21.665,7.89 21.665,6.94375 21.0737,6.3575L 17.895,3.17375C 17.6025,2.88125 17.2163,2.73375 16.8363,2.73375 Z M 12.9437,6.00125L 4.84375,14.1062L 7.4025,14.39L 7.57875,16.675L 9.85875,16.85L 10.1462,19.4088L 18.2475,11.3038M 4.2475,15.0437L 2.515,21.7337L 9.19875,19.9412L 8.955,17.7838L 6.645,17.6075L 6.465,15.2925"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M 16.8363,2.73375C 16.45,2.73375 16.0688,2.88125 15.7712,3.17375L 13.6525,5.2925L 18.955,10.5962L 21.0737,8.47625C 21.665,7.89 21.665,6.94375 21.0737,6.3575L 17.895,3.17375C 17.6025,2.88125 17.2163,2.73375 16.8363,2.73375 Z M 12.9437,6.00125L 4.84375,14.1062L 7.4025,14.39L 7.57875,16.675L 9.85875,16.85L 10.1462,19.4088L 18.2475,11.3038M 4.2475,15.0437L 2.515,21.7337L 9.19875,19.9412L 8.955,17.7838L 6.645,17.6075L 6.465,15.2925"></path></svg>
Start writing! Start writing
</a> </a>
</div> </div>
<div class="splash-screen"> <div class="splash-screen">