themes (part 1)
This commit is contained in:
parent
344772c1fa
commit
dcd8e1c6c5
BIN
chrome-app/Archive.zip
Normal file
BIN
chrome-app/Archive.zip
Normal file
Binary file not shown.
BIN
chrome-app/icon-128.png
Normal file
BIN
chrome-app/icon-128.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.7 KiB |
BIN
chrome-app/icon-16.png
Normal file
BIN
chrome-app/icon-16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 539 B |
BIN
chrome-app/icon-256.png
Normal file
BIN
chrome-app/icon-256.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.9 KiB |
BIN
chrome-app/icon-32.png
Normal file
BIN
chrome-app/icon-32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1007 B |
BIN
chrome-app/icon-64.png
Normal file
BIN
chrome-app/icon-64.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
27
chrome-app/manifest.json
Normal file
27
chrome-app/manifest.json
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "StackEdit",
|
||||||
|
"description": "In-browser Markdown editor",
|
||||||
|
"version": "1.0.11",
|
||||||
|
"manifest_version": 2,
|
||||||
|
"container" : "GOOGLE_DRIVE",
|
||||||
|
"api_console_project_id" : "241271498917",
|
||||||
|
"icons": {
|
||||||
|
"16": "icon-16.png",
|
||||||
|
"32": "icon-32.png",
|
||||||
|
"64": "icon-64.png",
|
||||||
|
"128": "icon-128.png",
|
||||||
|
"256": "icon-256.png"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"urls": [
|
||||||
|
"https://stackedit.io/"
|
||||||
|
],
|
||||||
|
"launch": {
|
||||||
|
"web_url": "https://stackedit.io/app"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"offline_enabled": true,
|
||||||
|
"permissions": [
|
||||||
|
"unlimitedStorage"
|
||||||
|
]
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app">
|
<div class="app" :class="themeClasses">
|
||||||
<splash-screen v-if="!ready"></splash-screen>
|
<splash-screen v-if="!ready"></splash-screen>
|
||||||
<layout v-else></layout>
|
<layout v-else></layout>
|
||||||
<modal v-if="showModal"></modal>
|
<modal v-if="showModal"></modal>
|
||||||
@ -61,6 +61,11 @@ Vue.filter('formatTime', time =>
|
|||||||
// Access the minute counter for reactive refresh
|
// Access the minute counter for reactive refresh
|
||||||
timeSvc.format(time, store.state.minuteCounter));
|
timeSvc.format(time, store.state.minuteCounter));
|
||||||
|
|
||||||
|
const themeClasses = {
|
||||||
|
light: ['app--light'],
|
||||||
|
dark: ['app--dark'],
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Layout,
|
Layout,
|
||||||
@ -72,6 +77,10 @@ export default {
|
|||||||
ready: false,
|
ready: false,
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
|
themeClasses() {
|
||||||
|
const result = themeClasses[this.$store.getters['data/computedSettings'].colorTheme];
|
||||||
|
return Array.isArray(result) ? result : themeClasses.light;
|
||||||
|
},
|
||||||
showModal() {
|
showModal() {
|
||||||
return !!this.$store.getters['modal/config'];
|
return !!this.$store.getters['modal/config'];
|
||||||
},
|
},
|
||||||
|
@ -85,7 +85,6 @@ export default {
|
|||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
caret-color: #000;
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
|
@ -148,25 +148,46 @@ export default {
|
|||||||
background-color: #007acc;
|
background-color: #007acc;
|
||||||
}
|
}
|
||||||
|
|
||||||
$editor-background: #fff;
|
$editor-background-light: #fff;
|
||||||
|
$editor-background-dark: #1e1e1e;
|
||||||
|
|
||||||
.layout__panel--editor {
|
.layout__panel--editor {
|
||||||
background-color: $editor-background;
|
.app--light & {
|
||||||
|
background-color: $editor-background-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
background-color: $editor-background-dark;
|
||||||
|
}
|
||||||
|
|
||||||
.gutter__background,
|
.gutter__background,
|
||||||
.comment-list__current-discussion,
|
.comment-list__current-discussion,
|
||||||
.sticky-comment,
|
.sticky-comment,
|
||||||
.current-discussion {
|
.current-discussion {
|
||||||
background-color: mix(#000, $editor-background, 6.7%);
|
.app--light & {
|
||||||
border-color: $editor-background;
|
background-color: mix(#000, $editor-background-light, 6.7%);
|
||||||
|
border-color: $editor-background-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
background-color: mix(#fff, $editor-background-dark, 5%);
|
||||||
|
border-color: $editor-background-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$preview-background: #f3f3f3;
|
$preview-background-light: #f3f3f3;
|
||||||
|
$preview-background-dark: #252525;
|
||||||
|
|
||||||
.layout__panel--preview,
|
.layout__panel--preview,
|
||||||
.layout__panel--button-bar {
|
.layout__panel--button-bar {
|
||||||
background-color: $preview-background;
|
.app--light & {
|
||||||
|
background-color: $preview-background-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
background-color: $preview-background-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout__panel--preview {
|
.layout__panel--preview {
|
||||||
@ -174,8 +195,8 @@ $preview-background: #f3f3f3;
|
|||||||
.comment-list__current-discussion,
|
.comment-list__current-discussion,
|
||||||
.sticky-comment,
|
.sticky-comment,
|
||||||
.current-discussion {
|
.current-discussion {
|
||||||
background-color: mix(#000, $preview-background, 6.7%);
|
background-color: mix(#000, $preview-background-light, 6.7%);
|
||||||
border-color: $preview-background;
|
border-color: $preview-background-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,16 @@
|
|||||||
@import './variables';
|
@import './variables';
|
||||||
|
|
||||||
.markdown-highlighting {
|
.markdown-highlighting {
|
||||||
color: $editor-color;
|
.app--light & {
|
||||||
|
color: $editor-color-light;
|
||||||
|
caret-color: $editor-color-light-low;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark;
|
||||||
|
caret-color: $editor-color-dark-low;
|
||||||
|
}
|
||||||
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
-webkit-font-smoothing: auto;
|
-webkit-font-smoothing: auto;
|
||||||
@ -18,12 +27,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pre {
|
.pre {
|
||||||
color: $editor-color;
|
.app--light & {
|
||||||
|
color: $editor-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
font-family: $font-family-monospace;
|
font-family: $font-family-monospace;
|
||||||
font-size: $font-size-monospace;
|
font-size: $font-size-monospace;
|
||||||
|
|
||||||
[class*='language-'] {
|
[class*='language-'] {
|
||||||
color: $editor-color-dark;
|
.app--light & {
|
||||||
|
color: $editor-color-light-low;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-low;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -37,7 +59,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
color: $editor-color;
|
.app--light & {
|
||||||
|
color: $editor-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
font-family: $font-family-monospace;
|
font-family: $font-family-monospace;
|
||||||
font-size: $font-size-monospace;
|
font-size: $font-size-monospace;
|
||||||
font-weight: $editor-font-weight-bold;
|
font-weight: $editor-font-weight-bold;
|
||||||
@ -55,11 +84,24 @@
|
|||||||
|
|
||||||
.latex,
|
.latex,
|
||||||
.math {
|
.math {
|
||||||
color: $editor-color;
|
.app--light & {
|
||||||
|
color: $editor-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entity {
|
.entity {
|
||||||
color: $editor-color;
|
.app--light & {
|
||||||
|
color: $editor-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
font-family: $font-family-monospace;
|
font-family: $font-family-monospace;
|
||||||
font-size: $font-size-monospace;
|
font-size: $font-size-monospace;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@ -79,11 +121,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
color: $editor-color-light;
|
.app--light & {
|
||||||
|
color: $editor-color-light-high;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-high;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.keyword {
|
.keyword {
|
||||||
color: $editor-color-dark;
|
.app--light & {
|
||||||
|
color: $editor-color-light-low;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-low;
|
||||||
|
}
|
||||||
|
|
||||||
font-weight: $editor-font-weight-bold;
|
font-weight: $editor-font-weight-bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -164,12 +219,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cl-hash {
|
.cl-hash {
|
||||||
color: $editor-color-light;
|
.app--light & {
|
||||||
|
color: $editor-color-light-high;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-high;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl,
|
.cl,
|
||||||
.hr {
|
.hr {
|
||||||
color: $editor-color-light;
|
.app--light & {
|
||||||
|
color: $editor-color-light-high;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-high;
|
||||||
|
}
|
||||||
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: $editor-font-weight-base;
|
font-weight: $editor-font-weight-base;
|
||||||
}
|
}
|
||||||
@ -196,7 +264,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.linkdef .url {
|
.linkdef .url {
|
||||||
color: $editor-color-light;
|
.app--light & {
|
||||||
|
color: $editor-color-light-high;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-high;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fn,
|
.fn,
|
||||||
@ -217,15 +291,33 @@
|
|||||||
.imgref,
|
.imgref,
|
||||||
.link,
|
.link,
|
||||||
.linkref {
|
.linkref {
|
||||||
color: $editor-color-light;
|
.app--light & {
|
||||||
|
color: $editor-color-light-high;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-high;
|
||||||
|
}
|
||||||
|
|
||||||
.cl-underlined-text {
|
.cl-underlined-text {
|
||||||
color: $editor-color-dark;
|
.app--light & {
|
||||||
|
color: $editor-color-light-low;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark-low;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-title {
|
.cl-title {
|
||||||
color: $editor-color;
|
.app--light & {
|
||||||
|
color: $editor-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,8 +18,13 @@ $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-color: rgba(0, 0, 0, 0.8);
|
$editor-color-light: rgba(0, 0, 0, 0.8);
|
||||||
$editor-color-light: rgba(0, 0, 0, 0.28);
|
$editor-color-light-high: rgba(0, 0, 0, 0.28);
|
||||||
$editor-color-dark: #000;
|
$editor-color-light-low: #000;
|
||||||
|
|
||||||
|
$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-font-weight-base: 400;
|
$editor-font-weight-base: 400;
|
||||||
$editor-font-weight-bold: 600;
|
$editor-font-weight-bold: 600;
|
||||||
|
@ -268,11 +268,23 @@ export default {
|
|||||||
.layout--revision {
|
.layout--revision {
|
||||||
.cledit-section *,
|
.cledit-section *,
|
||||||
.cl-preview-section * {
|
.cl-preview-section * {
|
||||||
color: rgba(0, 0, 0, 0.15) !important;
|
.app--light & {
|
||||||
|
color: transparentize($editor-color-light, 0.67) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: transparentize($editor-color-dark, 0.67) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cledit-section .revision-diff {
|
.cledit-section .revision-diff {
|
||||||
color: $editor-color !important;
|
.app--light & {
|
||||||
|
color: $editor-color-light !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app--dark & {
|
||||||
|
color: $editor-color-dark !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-preview-section .revision-diff {
|
.cl-preview-section .revision-diff {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<modal-inner class="modal__inner-1--about-modal" aria-label="About">
|
<modal-inner class="modal__inner-1--about-modal" aria-label="About">
|
||||||
<div class="modal__content">
|
<div class="modal__content">
|
||||||
<div class="logo-background"></div>
|
<div class="logo-background"></div>
|
||||||
<div class="app-version">v{{version}} — © 2018 Benoit Schweblin</div>
|
<small>v{{version}} — © 2018 Benoit Schweblin</small>
|
||||||
<hr>
|
<hr>
|
||||||
<a target="_blank" href="https://github.com/benweet/stackedit/">GitHub repo</a> —
|
<a target="_blank" href="https://github.com/benweet/stackedit/">GitHub repo</a> —
|
||||||
<a target="_blank" href="https://github.com/benweet/stackedit/issues">issue tracker</a>
|
<a target="_blank" href="https://github.com/benweet/stackedit/issues">issue tracker</a>
|
||||||
@ -11,10 +11,9 @@
|
|||||||
<br>
|
<br>
|
||||||
StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a>
|
StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a>
|
||||||
<hr>
|
<hr>
|
||||||
Licensed under an
|
<small>Licensed under an
|
||||||
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a>
|
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a><br>
|
||||||
<br>
|
<a target="_blank" href="privacy_policy.html">Privacy Policy</a></small>
|
||||||
<a target="_blank" href="privacy_policy.html">Privacy Policy</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal__button-bar">
|
<div class="modal__button-bar">
|
||||||
<button class="button" @click="config.resolve()">Close</button>
|
<button class="button" @click="config.resolve()">Close</button>
|
||||||
@ -48,8 +47,8 @@ export default {
|
|||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-version {
|
small {
|
||||||
font-size: 0.8em;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
# light or dark
|
||||||
|
colorTheme: light
|
||||||
# Auto-sync frequency (in ms). Minimum is 60000.
|
# Auto-sync frequency (in ms). Minimum is 60000.
|
||||||
autoSyncEvery: 60000
|
autoSyncEvery: 60000
|
||||||
# Adjust font size in editor and preview
|
# Adjust font size in editor and preview
|
||||||
|
Loading…
Reference in New Issue
Block a user