mirror of
https://gitee.com/mafgwo/stackedit
synced 2024-11-15 19:22:27 +08:00
themes (part 1)
This commit is contained in:
Benoit Schweblin
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>
|
||||
<div class="app">
|
||||
<div class="app" :class="themeClasses">
|
||||
<splash-screen v-if="!ready"></splash-screen>
|
||||
<layout v-else></layout>
|
||||
<modal v-if="showModal"></modal>
|
||||
|
|
@ -61,6 +61,11 @@ Vue.filter('formatTime', time =>
|
|||
// Access the minute counter for reactive refresh
|
||||
timeSvc.format(time, store.state.minuteCounter));
|
||||
|
||||
const themeClasses = {
|
||||
light: ['app--light'],
|
||||
dark: ['app--dark'],
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
|
|
@ -72,6 +77,10 @@ export default {
|
|||
ready: false,
|
||||
}),
|
||||
computed: {
|
||||
themeClasses() {
|
||||
const result = themeClasses[this.$store.getters['data/computedSettings'].colorTheme];
|
||||
return Array.isArray(result) ? result : themeClasses.light;
|
||||
},
|
||||
showModal() {
|
||||
return !!this.$store.getters['modal/config'];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -85,7 +85,6 @@ export default {
|
|||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
caret-color: #000;
|
||||
|
||||
* {
|
||||
line-height: $line-height-base;
|
||||
|
|
|
|||
|
|
@ -148,25 +148,46 @@ export default {
|
|||
background-color: #007acc;
|
||||
}
|
||||
|
||||
$editor-background: #fff;
|
||||
$editor-background-light: #fff;
|
||||
$editor-background-dark: #1e1e1e;
|
||||
|
||||
.layout__panel--editor {
|
||||
background-color: $editor-background;
|
||||
.app--light & {
|
||||
background-color: $editor-background-light;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
background-color: $editor-background-dark;
|
||||
}
|
||||
|
||||
.gutter__background,
|
||||
.comment-list__current-discussion,
|
||||
.sticky-comment,
|
||||
.current-discussion {
|
||||
background-color: mix(#000, $editor-background, 6.7%);
|
||||
border-color: $editor-background;
|
||||
.app--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%);
|
||||
border-color: $editor-background-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$preview-background: #f3f3f3;
|
||||
$preview-background-light: #f3f3f3;
|
||||
$preview-background-dark: #252525;
|
||||
|
||||
.layout__panel--preview,
|
||||
.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 {
|
||||
|
|
@ -174,8 +195,8 @@ $preview-background: #f3f3f3;
|
|||
.comment-list__current-discussion,
|
||||
.sticky-comment,
|
||||
.current-discussion {
|
||||
background-color: mix(#000, $preview-background, 6.7%);
|
||||
border-color: $preview-background;
|
||||
background-color: mix(#000, $preview-background-light, 6.7%);
|
||||
border-color: $preview-background-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
@import './variables';
|
||||
|
||||
.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-size: inherit;
|
||||
-webkit-font-smoothing: auto;
|
||||
|
|
@ -18,12 +27,25 @@
|
|||
}
|
||||
|
||||
.pre {
|
||||
color: $editor-color;
|
||||
.app--light & {
|
||||
color: $editor-color-light;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark;
|
||||
}
|
||||
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-monospace;
|
||||
|
||||
[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 {
|
||||
color: $editor-color;
|
||||
.app--light & {
|
||||
color: $editor-color-light;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark;
|
||||
}
|
||||
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-monospace;
|
||||
font-weight: $editor-font-weight-bold;
|
||||
|
|
@ -55,11 +84,24 @@
|
|||
|
||||
.latex,
|
||||
.math {
|
||||
color: $editor-color;
|
||||
.app--light & {
|
||||
color: $editor-color-light;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.entity {
|
||||
color: $editor-color;
|
||||
.app--light & {
|
||||
color: $editor-color-light;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark;
|
||||
}
|
||||
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-monospace;
|
||||
font-style: italic;
|
||||
|
|
@ -79,11 +121,24 @@
|
|||
}
|
||||
|
||||
.comment {
|
||||
color: $editor-color-light;
|
||||
.app--light & {
|
||||
color: $editor-color-light-high;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark-high;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -164,12 +219,25 @@
|
|||
}
|
||||
|
||||
.cl-hash {
|
||||
color: $editor-color-light;
|
||||
.app--light & {
|
||||
color: $editor-color-light-high;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark-high;
|
||||
}
|
||||
}
|
||||
|
||||
.cl,
|
||||
.hr {
|
||||
color: $editor-color-light;
|
||||
.app--light & {
|
||||
color: $editor-color-light-high;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark-high;
|
||||
}
|
||||
|
||||
font-style: normal;
|
||||
font-weight: $editor-font-weight-base;
|
||||
}
|
||||
|
|
@ -196,7 +264,13 @@
|
|||
}
|
||||
|
||||
.linkdef .url {
|
||||
color: $editor-color-light;
|
||||
.app--light & {
|
||||
color: $editor-color-light-high;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark-high;
|
||||
}
|
||||
}
|
||||
|
||||
.fn,
|
||||
|
|
@ -217,15 +291,33 @@
|
|||
.imgref,
|
||||
.link,
|
||||
.linkref {
|
||||
color: $editor-color-light;
|
||||
.app--light & {
|
||||
color: $editor-color-light-high;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark-high;
|
||||
}
|
||||
|
||||
.cl-underlined-text {
|
||||
color: $editor-color-dark;
|
||||
.app--light & {
|
||||
color: $editor-color-light-low;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark-low;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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-background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
$editor-color: rgba(0, 0, 0, 0.8);
|
||||
$editor-color-light: rgba(0, 0, 0, 0.28);
|
||||
$editor-color-dark: #000;
|
||||
$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-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-bold: 600;
|
||||
|
|
|
|||
|
|
@ -268,11 +268,23 @@ export default {
|
|||
.layout--revision {
|
||||
.cledit-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 {
|
||||
color: $editor-color !important;
|
||||
.app--light & {
|
||||
color: $editor-color-light !important;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: $editor-color-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cl-preview-section .revision-diff {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<modal-inner class="modal__inner-1--about-modal" aria-label="About">
|
||||
<div class="modal__content">
|
||||
<div class="logo-background"></div>
|
||||
<div class="app-version">v{{version}} — © 2018 Benoit Schweblin</div>
|
||||
<small>v{{version}} — © 2018 Benoit Schweblin</small>
|
||||
<hr>
|
||||
<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>
|
||||
|
|
@ -11,10 +11,9 @@
|
|||
<br>
|
||||
StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a>
|
||||
<hr>
|
||||
Licensed under an
|
||||
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a>
|
||||
<br>
|
||||
<a target="_blank" href="privacy_policy.html">Privacy Policy</a>
|
||||
<small>Licensed under an
|
||||
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a><br>
|
||||
<a target="_blank" href="privacy_policy.html">Privacy Policy</a></small>
|
||||
</div>
|
||||
<div class="modal__button-bar">
|
||||
<button class="button" @click="config.resolve()">Close</button>
|
||||
|
|
@ -48,8 +47,8 @@ export default {
|
|||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 0.8em;
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
# light or dark
|
||||
colorTheme: light
|
||||
# Auto-sync frequency (in ms). Minimum is 60000.
|
||||
autoSyncEvery: 60000
|
||||
# Adjust font size in editor and preview
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user