caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

themes (part 2)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -30,16 +30,16 @@ https://stackedit.io/.
``` bash
# install dependencies
yarn install
npm install
# serve with hot reload at localhost:8080
yarn start
npm start
# build for production with minification
yarn run build
npm run build
# 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").

1
gulpfile.js
View File

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

14982
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
src/components/ButtonBar.vue
View File

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

1
src/components/FindReplace.vue
View File

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

25
src/components/Layout.vue
View File

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

12
src/components/Preview.vue
View File

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

38
src/components/common/app.scss
View File

@ -100,6 +100,18 @@ textarea {
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] {
&,
&:active,
@ -235,22 +247,38 @@ textarea {
height: 21px;
line-height: 1;
.app--dark & {
color: rgba(255, 255, 255, 0.33);
}
&:active,
&:focus,
&:hover {
color: rgba(0, 0, 0, 0.4);
.app--dark & {
color: rgba(255, 255, 255, 0.4);
}
}
}
.discussion-editor-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;
.app--dark & {
background-color: mix($editor-background-dark, $selection-highlighting-color, 70%);
}
}
.discussion-editor-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;
@ -259,7 +287,11 @@ textarea {
.discussion-editor-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;

13
src/components/common/base.scss
View File

@ -9,7 +9,7 @@
html,
body {
color: $body-color;
color: $body-color-light;
font-size: 16px;
font-family: $font-family-main;
font-variant-ligatures: common-ligatures;
@ -18,6 +18,11 @@ body {
-moz-osx-font-smoothing: grayscale;
}
.app--dark .layout__panel--editor,
.app--dark .layout__panel--preview {
color: $body-color-dark;
}
p,
blockquote,
pre,
@ -81,6 +86,12 @@ blockquote {
color: rgba(0, 0, 0, 0.5);
padding-left: 1.5em;
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 {

64
src/components/common/markdownHighlighting.scss
View File

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

281
src/components/common/mermaid.scss
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 {
font-size: 16px;
@ -7,6 +7,10 @@
width: 100%;
max-width: 100%;
.app--dark & {
color: rgba(255, 255, 255, 0.75);
}
* {
font-family: $font-family-main;
}
@ -357,3 +361,278 @@
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;
}
}

14
src/components/common/variables.scss
View File

@ -1,10 +1,11 @@
$font-family-main: Lato, 'Helvetica Neue', Helvetica, sans-serif;
$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-title: 1.33;
$font-size-monospace: 0.85em;
$code-bg: rgba(0, 0, 0, 0.05);
$highlighting-color: #ff0;
$selection-highlighting-color: #ff9632;
$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-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-high: rgba(0, 0, 0, 0.28);
$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-high: rgba(255, 255, 255, 0.28);
$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-bold: 600;

12
src/components/gutters/CommentList.vue
View File

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

6
src/components/gutters/CurrentDiscussion.vue
View File

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

14
src/components/menus/HistoryMenu.vue
View File

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

2
static/landing/index.html
View File

@ -241,7 +241,7 @@
<div class="navigation-bar">
<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>
Start writing!
Start writing
</a>
</div>
<div class="splash-screen">