mirror of
https://github.com/marktext/marktext.git
synced 2025-05-02 19:41:39 +08:00
Modified themes and added dark and one dark theme (#826)
* Modified themes and added dark and one dark theme * fix: print service * Update documentation
This commit is contained in:
Felix Häusler
Ran Luo
parent
70d49c30e1
commit
004879b49a
@ -47,7 +47,7 @@ const rendererConfig = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /(katex|github\-markdown|prism[\-a-z]*)\.css$/,
|
test: /(katex|github\-markdown|prism[\-a-z]*|\.theme)\.css$/,
|
||||||
use: [
|
use: [
|
||||||
'to-string-loader',
|
'to-string-loader',
|
||||||
'css-loader'
|
'css-loader'
|
||||||
@ -55,7 +55,7 @@ const rendererConfig = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
exclude: /(katex|github\-markdown|prism[\-a-z]*)\.css$/,
|
exclude: /(katex|github\-markdown|prism[\-a-z]*|\.theme)\.css$/,
|
||||||
use: [
|
use: [
|
||||||
proMode ? MiniCssExtractPlugin.loader : 'style-loader',
|
proMode ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||||
|
|||||||
2
.github/CHANGELOG.md
vendored
2
.github/CHANGELOG.md
vendored
@ -19,7 +19,7 @@ This update **fixes a XSS security vulnerability** when exporting a document.
|
|||||||
- Open local markdown file when you click on it in another tab (#359)
|
- Open local markdown file when you click on it in another tab (#359)
|
||||||
- Clicking a link should open it in the browser (#425)
|
- Clicking a link should open it in the browser (#425)
|
||||||
- Support maxOS `dark mode`, when you change `mode dark or light` in system, Mark Text will change its theme.
|
- Support maxOS `dark mode`, when you change `mode dark or light` in system, Mark Text will change its theme.
|
||||||
- Add two new themes Ulysses Light and Graphite Light theme.
|
- Add new themes: Ulysses Light, Graphite Light, Material Dark and One Dark.
|
||||||
- Watch file changed in tabs and show a notice(autoSave is `false`) or update the file(autoSave is `true`)
|
- Watch file changed in tabs and show a notice(autoSave is `false`) or update the file(autoSave is `true`)
|
||||||
|
|
||||||
**:butterfly:Optimization**
|
**:butterfly:Optimization**
|
||||||
|
|||||||
39
doc/SETTINGS.md
Normal file
39
doc/SETTINGS.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
# Settings
|
||||||
|
|
||||||
|
## Options
|
||||||
|
|
||||||
|
### Editor
|
||||||
|
|
||||||
|
- **fontSize**: The editor font size.
|
||||||
|
- **editorFontFamily**: The editor font family name.
|
||||||
|
- **codeFontSize**: The code block font size.
|
||||||
|
- **codeFontFamily**: The code block font family name.
|
||||||
|
- **lineHeight**: The line height of the editor.
|
||||||
|
- **tabSize**: The number of spaces a tab is equal to.
|
||||||
|
- **autoPairBracket**: If `true` the editor automatically closes brackets.
|
||||||
|
- **autoPairMarkdownSyntax**: If `true` the editor automatically closes inline markdown like `*` or `_`.
|
||||||
|
- **autoPairQuote**: If `true` the editor automatically closes quotes (`'` and `"`).
|
||||||
|
- **hideQuickInsertHint**: If `true` the editor hides the quick insert hint.
|
||||||
|
- **preferLooseListItem**: The preferred list style. If `true` a loose list is preferred otherwise a tight list.
|
||||||
|
- **bulletListMarker**: The preferred list item bullet (`+`,`-` or `*`).
|
||||||
|
|
||||||
|
### Files
|
||||||
|
|
||||||
|
- **autoSave**: Automatically saves the file after editing.
|
||||||
|
- **endOfLine**: The default end of line character (`lf`, `crlf` or `default`).
|
||||||
|
|
||||||
|
### Window
|
||||||
|
|
||||||
|
- **theme**: Specifies the theme (`dark`, `graphite`, `material-dark`, `one-dark`, `light` or `ulysses`).
|
||||||
|
- **textDirection**: The editor text direction (`ltr` or `rtl`).
|
||||||
|
- **openFilesInNewWindow**: If `true` files should opened in a new window.
|
||||||
|
- **titleBarStyle**: Specifies the title bar (`csd` (macOS only), `custom` or `native`).
|
||||||
|
|
||||||
|
### Misc
|
||||||
|
|
||||||
|
- **aidou**: Show aidou menu entry.
|
||||||
|
|
||||||
|
### Deprecated
|
||||||
|
|
||||||
|
- **lightColor**
|
||||||
|
- **darkColor**
|
||||||
@ -7,14 +7,6 @@ export default {
|
|||||||
label: 'Theme',
|
label: 'Theme',
|
||||||
id: 'themeMenu',
|
id: 'themeMenu',
|
||||||
submenu: [{
|
submenu: [{
|
||||||
label: 'Material Dark',
|
|
||||||
type: 'radio',
|
|
||||||
id: 'dark',
|
|
||||||
checked: theme === 'dark',
|
|
||||||
click (menuItem, browserWindow) {
|
|
||||||
actions.selectTheme('dark')
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
label: 'Cadmium Light',
|
label: 'Cadmium Light',
|
||||||
type: 'radio',
|
type: 'radio',
|
||||||
id: 'light',
|
id: 'light',
|
||||||
@ -23,12 +15,12 @@ export default {
|
|||||||
actions.selectTheme('light')
|
actions.selectTheme('light')
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
label: 'Ulysses Light',
|
label: 'Dark',
|
||||||
type: 'radio',
|
type: 'radio',
|
||||||
id: 'ulysses',
|
id: 'dark',
|
||||||
checked: theme === 'ulysses',
|
checked: theme === 'dark',
|
||||||
click (menuItem, browserWindow) {
|
click (menuItem, browserWindow) {
|
||||||
actions.selectTheme('ulysses')
|
actions.selectTheme('dark')
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
label: 'Graphite Light',
|
label: 'Graphite Light',
|
||||||
@ -38,5 +30,29 @@ export default {
|
|||||||
click (menuItem, browserWindow) {
|
click (menuItem, browserWindow) {
|
||||||
actions.selectTheme('graphite')
|
actions.selectTheme('graphite')
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
label: 'Material Dark',
|
||||||
|
type: 'radio',
|
||||||
|
id: 'material-dark',
|
||||||
|
checked: theme === 'material-dark',
|
||||||
|
click (menuItem, browserWindow) {
|
||||||
|
actions.selectTheme('material-dark')
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
label: 'One Dark',
|
||||||
|
type: 'radio',
|
||||||
|
id: 'one-dark',
|
||||||
|
checked: theme === 'one-dark',
|
||||||
|
click (menuItem, browserWindow) {
|
||||||
|
actions.selectTheme('one-dark')
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
label: 'Ulysses Light',
|
||||||
|
type: 'radio',
|
||||||
|
id: 'ulysses',
|
||||||
|
checked: theme === 'ulysses',
|
||||||
|
click (menuItem, browserWindow) {
|
||||||
|
actions.selectTheme('ulysses')
|
||||||
|
}
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -120,16 +120,16 @@ class Preference {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let brokenSettings = false
|
let brokenSettings = false
|
||||||
if (!settings.theme || (settings.theme && !/^(dark|light)$/.test(settings.theme))) {
|
if (!settings.theme || (settings.theme && !/^(?:dark|graphite|material-dark|one-dark|light|ulysses)$/.test(settings.theme))) {
|
||||||
brokenSettings = true
|
brokenSettings = true
|
||||||
settings.theme = 'light'
|
settings.theme = 'light'
|
||||||
}
|
}
|
||||||
if (!settings.bulletListMarker ||
|
if (!settings.bulletListMarker ||
|
||||||
(settings.bulletListMarker && !/^(\+|-|\*)$/.test(settings.bulletListMarker))) {
|
(settings.bulletListMarker && !/^(?:\+|-|\*)$/.test(settings.bulletListMarker))) {
|
||||||
brokenSettings = true
|
brokenSettings = true
|
||||||
settings.bulletListMarker = '-'
|
settings.bulletListMarker = '-'
|
||||||
}
|
}
|
||||||
if (!settings.titleBarStyle || !/^(native|csd|custom)$/.test(settings.titleBarStyle)) {
|
if (!settings.titleBarStyle || !/^(?:native|csd|custom)$/.test(settings.titleBarStyle)) {
|
||||||
settings.titleBarStyle = 'csd'
|
settings.titleBarStyle = 'csd'
|
||||||
}
|
}
|
||||||
if (brokenSettings) {
|
if (brokenSettings) {
|
||||||
|
|||||||
@ -112,6 +112,8 @@ pre.ag-paragraph {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media not print {
|
||||||
|
|
||||||
#ag-editor-id {
|
#ag-editor-id {
|
||||||
max-width: var(--editorAreaWidth);
|
max-width: var(--editorAreaWidth);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -408,19 +410,6 @@ pre[class*="language-"] {
|
|||||||
color: var(--editorColor50);
|
color: var(--editorColor50);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
|
||||||
html {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
table,
|
|
||||||
pre {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ag-hide.ag-math > .ag-math-render {
|
.ag-hide.ag-math > .ag-math-render {
|
||||||
color: var(--editorColor);
|
color: var(--editorColor);
|
||||||
}
|
}
|
||||||
@ -456,127 +445,41 @@ blockquote .ag-hide.ag-math > .ag-math-render {
|
|||||||
background-image: url(../lib/assets/icons/image_light_fail.png);
|
background-image: url(../lib/assets/icons/image_light_fail.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* prismjs default theme */
|
body.dark .ag-image-marked-text::before {
|
||||||
|
background: url(../lib/assets/icons/image_dark.png);
|
||||||
code[class*="language-"],
|
|
||||||
pre.ag-paragraph {
|
|
||||||
color: black;
|
|
||||||
/*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre;
|
|
||||||
word-spacing: normal;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
|
||||||
-moz-hyphens: none;
|
|
||||||
-ms-hyphens: none;
|
|
||||||
hyphens: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code blocks */
|
|
||||||
pre.ag-paragraph {
|
|
||||||
padding: 1em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre) > code[class*="language-"] {
|
|
||||||
padding: .1em;
|
|
||||||
border-radius: .3em;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: slategray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.namespace {
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.boolean,
|
|
||||||
.token.number,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol {
|
|
||||||
color: #905;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.builtin {
|
|
||||||
color: #690;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.inserted {
|
|
||||||
color: #22863a;
|
|
||||||
background: #f0fff4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.deleted {
|
body.dark .ag-image-marked-text.ag-image-fail::before {
|
||||||
color: #b31d28;
|
background-image: url(../lib/assets/icons/image_dark_fail.png);
|
||||||
background: #ffeef0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string {
|
|
||||||
color: #9a6e3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.keyword {
|
|
||||||
color: #07a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.function,
|
|
||||||
.token.class-name {
|
|
||||||
color: #DD4A68;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important,
|
|
||||||
.token.variable {
|
|
||||||
color: #e90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important,
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ag-front-icon {
|
.ag-front-icon {
|
||||||
fill: var(--editorColor50);
|
fill: var(--editorColor50);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ag-front-icon::before {
|
.ag-front-icon::before {
|
||||||
border: 3px solid var(--editorColor50);
|
border: 3px solid var(--editorColor50);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-left-color: transparent;
|
border-left-color: transparent;
|
||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
} /* end not print */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
html {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
table,
|
||||||
|
pre {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prism.js theme
|
||||||
|
*/
|
||||||
|
@import url("prismjs/light.theme.css");
|
||||||
115
src/muya/themes/prismjs/light.theme.css
Normal file
115
src/muya/themes/prismjs/light.theme.css
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
/*
|
||||||
|
* ------------------------------------
|
||||||
|
* Prism.js light theme
|
||||||
|
*/
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
color: black;
|
||||||
|
/*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code Fence */
|
||||||
|
pre.ag-paragraph {
|
||||||
|
padding: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline Code */
|
||||||
|
:not(pre) > code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.inserted {
|
||||||
|
color: #22863a;
|
||||||
|
background: #f0fff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.deleted {
|
||||||
|
color: #b31d28;
|
||||||
|
background: #ffeef0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #9a6e3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #DD4A68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
@ -2,6 +2,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--titleBarHeight: 32px;
|
--titleBarHeight: 32px;
|
||||||
--editorAreaWidth: 700px;
|
--editorAreaWidth: 700px;
|
||||||
|
|
||||||
/*editor*/
|
/*editor*/
|
||||||
--themeColor: rgba(33, 181, 111, 1);
|
--themeColor: rgba(33, 181, 111, 1);
|
||||||
--highlightColor: rgba(33, 181, 111, .4);
|
--highlightColor: rgba(33, 181, 111, .4);
|
||||||
@ -10,12 +11,13 @@
|
|||||||
--editorColor50: rgba(0, 0, 0, .5);
|
--editorColor50: rgba(0, 0, 0, .5);
|
||||||
--editorColor30: rgba(0, 0, 0, .3);
|
--editorColor30: rgba(0, 0, 0, .3);
|
||||||
--editorColor10: rgba(0, 0, 0, .1);
|
--editorColor10: rgba(0, 0, 0, .1);
|
||||||
--editorColor04: rgba(0, 0, 0, .03); /* on purpose to set it to .03*/
|
--editorColor04: rgba(0, 0, 0, .03);
|
||||||
--editorBgColor: rgba(255, 255, 255, 1);
|
--editorBgColor: rgba(255, 255, 255, 1);
|
||||||
--deleteColor: #ff6969;
|
--deleteColor: #ff6969;
|
||||||
--iconColor: #333;
|
--iconColor: #333;
|
||||||
--codeBgColor: #d8d8d869;
|
--codeBgColor: #d8d8d869;
|
||||||
--codeBlockBgColor: rgba(33, 181, 111, 0.08);
|
--codeBlockBgColor: rgba(33, 181, 111, 0.08);
|
||||||
|
|
||||||
/*marktext*/
|
/*marktext*/
|
||||||
--sideBarColor: rgba(0, 0, 0, .6);
|
--sideBarColor: rgba(0, 0, 0, .6);
|
||||||
--sideBarTitleColor: rgba(0, 0, 0, 1);
|
--sideBarTitleColor: rgba(0, 0, 0, 1);
|
||||||
|
|||||||
@ -2,13 +2,27 @@ body article.print-container {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
|
.editor-container {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* General rules for printing. */
|
/* General rules for printing. */
|
||||||
html, body {
|
html, body {
|
||||||
|
position: relative !important;
|
||||||
|
width: 100% !important;
|
||||||
|
display: block !important;
|
||||||
|
height: auto !important;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative !important;
|
||||||
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > div {
|
body > div {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body article.print-container {
|
body article.print-container {
|
||||||
|
|||||||
110
src/renderer/assets/themes/codemirror/one-dark.css
Normal file
110
src/renderer/assets/themes/codemirror/one-dark.css
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
/*
|
||||||
|
Name: one-dark 1.1.1
|
||||||
|
Author: Török Ádám (http://github.com/Aerobird98)
|
||||||
|
Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
|
||||||
|
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2016-2017 Aerobird98
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* basic */
|
||||||
|
.cm-s-one-dark {
|
||||||
|
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||||
|
font-weight: 350;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #abb2bf;
|
||||||
|
background-color: #282c34;
|
||||||
|
}
|
||||||
|
.cm-s-one-dark .CodeMirror-selected {background-color: #3e4451;}
|
||||||
|
.cm-s-one-dark .CodeMirror-gutter,
|
||||||
|
.cm-s-one-dark .CodeMirror-gutters {
|
||||||
|
border: none;
|
||||||
|
background-color: #282c34;
|
||||||
|
}
|
||||||
|
.cm-s-one-dark .CodeMirror-linenumber,
|
||||||
|
.cm-s-one-dark .CodeMirror-linenumbers {
|
||||||
|
color: #5c6370 !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.cm-s-one-dark .CodeMirror-lines {
|
||||||
|
color: #abb2bf !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.cm-s-one-dark .CodeMirror-cursor {border-left: 2px solid #56b6c2 !important;}
|
||||||
|
/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
|
||||||
|
.cm-s-one-dark .CodeMirror-matchingbracket,
|
||||||
|
.cm-s-one-dark .CodeMirror-matchingtag {
|
||||||
|
border-bottom: 2px solid #56b6c2;
|
||||||
|
color: #abb2bf !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.cm-s-one-dark .CodeMirror-nonmatchingbracket {
|
||||||
|
border-bottom: 2px solid #e06c75;
|
||||||
|
color: #abb2bf !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
/* addon: fold/foldgutter.js */
|
||||||
|
.cm-s-one-dark .CodeMirror-foldmarker,
|
||||||
|
.cm-s-one-dark .CodeMirror-foldgutter,
|
||||||
|
.cm-s-one-dark .CodeMirror-foldgutter-open,
|
||||||
|
.cm-s-one-dark .CodeMirror-foldgutter-folded {
|
||||||
|
border: none;
|
||||||
|
text-shadow: none;
|
||||||
|
color: #5c6370 !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
/* addon: selection/active-line.js */
|
||||||
|
.cm-s-one-dark .CodeMirror-activeline-background {background-color: rgba(153, 187, 255, 0.04);}
|
||||||
|
/* basic syntax */
|
||||||
|
.cm-s-one-dark .cm-header {color: #e06c75;}
|
||||||
|
.cm-s-one-dark .cm-quote {color: #5c6370;font-style: italic;}
|
||||||
|
.cm-s-one-dark .cm-negative {color: #e06c75;}
|
||||||
|
.cm-s-one-dark .cm-positive {color: #e06c75;}
|
||||||
|
.cm-s-one-dark .cm-strong {color: #d19a66;font-weight: bold;}
|
||||||
|
.cm-s-one-dark .cm-header .cm-strong {color: #d19a66;font-weight: bold;}
|
||||||
|
.cm-s-one-dark .cm-em {color: #c678dd;font-style: italic;}
|
||||||
|
.cm-s-one-dark .cm-header .cm-em {color: #c678dd;font-style: italic;}
|
||||||
|
.cm-s-one-dark .cm-tag {color: #e06c75;}
|
||||||
|
.cm-s-one-dark .cm-attribute {color: #d19a66;}
|
||||||
|
.cm-s-one-dark .cm-link {color: #98c379;border-bottom: solid 1px #98c379;}
|
||||||
|
.cm-s-one-dark .cm-builtin {color: #e06c75;}
|
||||||
|
.cm-s-one-dark .cm-keyword {color: #c678dd;}
|
||||||
|
.cm-s-one-dark .cm-def {color: #e5c07b;} /* original: #d19a66; */
|
||||||
|
.cm-s-one-dark .cm-atom {color: #d19a66;}
|
||||||
|
.cm-s-one-dark .cm-number {color: #d19a66;}
|
||||||
|
.cm-s-one-dark .cm-property {color: #56b6c2;} /* original: #abb2bf */
|
||||||
|
.cm-s-one-dark .cm-qualifier {color: #d19a66;}
|
||||||
|
.cm-s-one-dark .cm-variable {color: #e06c75;}
|
||||||
|
.cm-s-one-dark .cm-string {color: #98c379;}
|
||||||
|
.cm-s-one-dark .cm-punctuation {color: #abb2bf;}
|
||||||
|
.cm-s-one-dark .cm-operator {color: #56b6c2;} /* original: #abb2bf */
|
||||||
|
.cm-s-one-dark .cm-meta {color: #abb2bf;}
|
||||||
|
.cm-s-one-dark .cm-bracket {color: #abb2bf;}
|
||||||
|
.cm-s-one-dark .cm-comment {color: #5c6370;font-style: italic;}
|
||||||
|
.cm-s-one-dark .cm-error {color: #e06c75;}
|
||||||
|
/* css syntax corrections */
|
||||||
|
.cm-s-one-dark .cm-m-css.cm-variable {color: #828997;}
|
||||||
|
.cm-s-one-dark .cm-m-css.cm-property {color: #abb2bf;}
|
||||||
|
.cm-s-one-dark .cm-m-css.cm-atom {color: #56b6c2;}
|
||||||
|
.cm-s-one-dark .cm-m-css.cm-builtin {color: #56b6c2;}
|
||||||
|
/* lua syntax corrections */
|
||||||
|
.cm-s-one-dark .cm-m-lua.cm-variable {color: #56b6c2;}
|
||||||
66
src/renderer/assets/themes/dark.theme.css
Normal file
66
src/renderer/assets/themes/dark.theme.css
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
:root {
|
||||||
|
/*editor*/
|
||||||
|
--themeColor: #409eff;
|
||||||
|
--highlightColor: rgba(102, 177, 255, .6);
|
||||||
|
--selectionColor: rgba(102, 177, 255, .3);
|
||||||
|
--editorColor: rgba(255, 255, 255, .8);
|
||||||
|
--editorColor50: rgba(255, 255, 255, .5);
|
||||||
|
--editorColor30: rgba(255, 255, 255, .3);
|
||||||
|
--editorColor10: rgba(255, 255, 255, .1);
|
||||||
|
--editorColor04: rgba(255, 255, 255, .04);
|
||||||
|
--editorBgColor: #282828;
|
||||||
|
--deleteColor: #409eff;
|
||||||
|
--iconColor: rgba(255, 255, 255, .8);
|
||||||
|
--codeBgColor: #424344;
|
||||||
|
--codeBlockBgColor: #424344;
|
||||||
|
|
||||||
|
/*marktext*/
|
||||||
|
--sideBarColor: rgba(255, 255, 255, .6);
|
||||||
|
--sideBarTitleColor: rgba(255, 255, 255, .8);
|
||||||
|
--sideBarTextColor: rgba(255, 255, 255, .4);
|
||||||
|
--sideBarBgColor: #1e1e1e;
|
||||||
|
--sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
|
||||||
|
--itemBgColor: #3f3f3f;
|
||||||
|
--floatBgColor: #3f3f3f;
|
||||||
|
--floatHoverColor: rgba(255, 255, 255, .04);
|
||||||
|
--floatBorderColor: rgba(0, 0, 0, .05);
|
||||||
|
--editorAreaWidth: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
background: var(--editorBgColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar .frameless-titlebar-button > div > svg {
|
||||||
|
fill: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-bar {
|
||||||
|
border-right: 1px solid #1d1d1d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-tabs {
|
||||||
|
border-bottom: 1px solid #1d1d1d;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li,
|
||||||
|
.tabs-container > li.active {
|
||||||
|
background: var(--editorBgColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
background: var(--codeBlockBgColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:not(.ag-active)[data-role="hr"]::before {
|
||||||
|
border-top: 2px dashed var(--editorColor10) !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prism.js theme (override light theme)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* @import url("prismjs/dark.theme.css"); */
|
||||||
|
|
||||||
127
src/renderer/assets/themes/graphite.theme.css
Normal file
127
src/renderer/assets/themes/graphite.theme.css
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
:root {
|
||||||
|
--themeColor: rgb(104, 134, 170);
|
||||||
|
--highlightColor: rgba(104, 134, 170, .4);
|
||||||
|
--selectionColor: rgba(0, 0, 0, .1);
|
||||||
|
--editorColor: rgba(43, 48, 50, .8);
|
||||||
|
--editorColor50: rgba(43, 48, 50, .5);
|
||||||
|
--editorColor30: rgba(43, 48, 50, .3);
|
||||||
|
--editorColor10: rgba(43, 48, 50, .1);
|
||||||
|
--editorColor04: rgba(43, 48, 50, .04);
|
||||||
|
--editorBgColor: #f7f7f7;
|
||||||
|
--deleteColor: #ff6969;
|
||||||
|
--iconColor: rgba(135, 135, 135, .8);
|
||||||
|
--codeBgColor: #d8d8d869;
|
||||||
|
--codeBlockBgColor: rgba(104, 134, 170, .04);
|
||||||
|
|
||||||
|
--sideBarColor: rgba(188, 193, 197, .8);
|
||||||
|
--sideBarTitleColor: rgba(255, 255, 255, 1);
|
||||||
|
--sideBarTextColor: rgba(188, 193, 197, .4);
|
||||||
|
--sideBarBgColor: rgba(69, 75, 80, 1);
|
||||||
|
--sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
|
||||||
|
--itemBgColor: rgba(43, 48, 50, .5);
|
||||||
|
--floatBgColor: rgb(237, 237, 238);
|
||||||
|
--floatHoverColor: rgba(43, 48, 50, .04);
|
||||||
|
--floatBorderColor: rgba(0, 0, 0, .03);
|
||||||
|
--editorAreaWidth: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar.tabs-visible {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-tabs {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
border-bottom: 1px solid #dddddd !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li.active {
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
background: var(--floatBgColor) !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li.active:not(:last-child):after {
|
||||||
|
top: 0 !important;
|
||||||
|
bottom: auto !important;
|
||||||
|
background: var(--themeColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------ */
|
||||||
|
|
||||||
|
li.ag-paragraph {
|
||||||
|
color: var(--editorColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*task list*/
|
||||||
|
li.ag-task-list-item {
|
||||||
|
list-style-type: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 4px 0px 0px;
|
||||||
|
top: 2px;
|
||||||
|
left: -22px;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked {
|
||||||
|
transform: rotate(0);
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input[type=checkbox]::before {
|
||||||
|
content: '';
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
border: 2px solid var(--editorColor);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: var(--editorBgColor);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked::before {
|
||||||
|
border: transparent;
|
||||||
|
background-color: var(--editorColor);
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input::after {
|
||||||
|
content: '';
|
||||||
|
transform: rotate(-45deg) scale(0);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
top: 1px;
|
||||||
|
left: 5px;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked::after {
|
||||||
|
transform: rotate(-45deg) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*horizontal line*/
|
||||||
|
p:not(.ag-active)[data-role="hr"]::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
height: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 2px dashed var(--editorColor50);
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
62
src/renderer/assets/themes/material-dark.theme.css
Normal file
62
src/renderer/assets/themes/material-dark.theme.css
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
:root {
|
||||||
|
/*editor*/
|
||||||
|
--themeColor: #f48237;
|
||||||
|
--highlightColor: rgba(244, 130, 55, .4);
|
||||||
|
--selectionColor: rgba(255, 255, 255, .2);
|
||||||
|
--editorColor: rgba(171, 178, 191, 1);
|
||||||
|
--editorColor50: rgba(171, 178, 191, .9);
|
||||||
|
--editorColor30: rgba(171, 178, 191, .8);
|
||||||
|
--editorColor10: rgba(171, 178, 191, .5);
|
||||||
|
--editorColor04: rgba(171, 178, 191, .04);
|
||||||
|
--editorBgColor: #34393f;
|
||||||
|
--deleteColor: #ff6969;
|
||||||
|
--iconColor: rgba(255, 255, 255, .8);
|
||||||
|
--codeBgColor: #d8d8d869;
|
||||||
|
--codeBlockBgColor: #3f454c;
|
||||||
|
|
||||||
|
/*marktext*/
|
||||||
|
--sideBarColor: rgba(255, 255, 255, .6);
|
||||||
|
--sideBarTitleColor: rgba(255, 255, 255, 1);
|
||||||
|
--sideBarTextColor: rgba(255, 255, 255, .4);
|
||||||
|
--sideBarBgColor: rgba(26, 33, 41, 0.9);
|
||||||
|
--sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
|
||||||
|
--itemBgColor: rgba(71, 78, 86, 0.6);
|
||||||
|
--floatBgColor: #3c4650;
|
||||||
|
--floatHoverColor: rgba(255, 255, 255, .04);
|
||||||
|
--floatBorderColor: rgba(0, 0, 0, .03);
|
||||||
|
--editorAreaWidth: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar .frameless-titlebar-button > div > svg {
|
||||||
|
fill: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-container > li {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li.active {
|
||||||
|
background: var(--floatBgColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------ */
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
background: var(--codeBlockBgColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.ag-image-marked-text::before {
|
||||||
|
background: url(../lib/assets/icons/image_dark.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ag-image-marked-text.ag-image-fail::before {
|
||||||
|
background-image: url(../lib/assets/icons/image_dark_fail.png);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prism.js theme (override light theme)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
@import url("prismjs/dark.theme.css");
|
||||||
|
*/
|
||||||
190
src/renderer/assets/themes/one-dark.theme.css
Normal file
190
src/renderer/assets/themes/one-dark.theme.css
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
:root {
|
||||||
|
/*editor*/
|
||||||
|
--themeColor: #e2c08d;
|
||||||
|
--highlightColor: #ffffff10;
|
||||||
|
--selectionColor: #67769660;
|
||||||
|
--editorColor: #9da5b4;
|
||||||
|
--editorColor50: rgba(157, 165, 180, .5);
|
||||||
|
--editorColor30: rgba(157, 165, 180, .3);
|
||||||
|
--editorColor10: rgba(157, 165, 180, .1);
|
||||||
|
--editorColor04: rgba(157, 165, 180, .04);
|
||||||
|
--editorBgColor: #282c34;
|
||||||
|
--deleteColor: #ff6969;
|
||||||
|
--iconColor: rgba(255, 255, 255, .8);
|
||||||
|
--codeBgColor: #3a3f4b;
|
||||||
|
--codeBlockBgColor: #3a3f4b;
|
||||||
|
|
||||||
|
/*marktext*/
|
||||||
|
--sideBarColor: #9da5b4;
|
||||||
|
--sideBarTitleColor: #9da5b4;
|
||||||
|
--sideBarTextColor: #9da5b4;
|
||||||
|
--sideBarBgColor: #21252b;
|
||||||
|
--sideBarItemHoverBgColor: #3a3f4b;
|
||||||
|
--itemBgColor: #21252b;
|
||||||
|
--floatBgColor: #21252b;
|
||||||
|
--floatHoverColor: #3a3f4b;
|
||||||
|
--floatBorderColor: #181a1f;
|
||||||
|
--editorAreaWidth: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
background: var(--editorBgColor);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar:vertical {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar:vertical:hover {
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #414956;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #4b5362;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tooltip__popper.is-dark {
|
||||||
|
border: 1px solid #181a1f;
|
||||||
|
}
|
||||||
|
.v-modal {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.el-dialog {
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
|
||||||
|
border: 1px solid #181a1f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-notification > .notice-bg.icon-message {
|
||||||
|
background: #4d78cc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar .frameless-titlebar-button > div > svg {
|
||||||
|
fill: #ffffff;
|
||||||
|
}
|
||||||
|
.frameless-titlebar-minimize[data-v-0a64f081]:hover,
|
||||||
|
.frameless-titlebar-toggle[data-v-0a64f081]:hover {
|
||||||
|
background-color: rgba(215, 218, 224, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-bar {
|
||||||
|
border-right: 1px solid #181a1f !important;
|
||||||
|
}
|
||||||
|
.left-column ul > li > svg {
|
||||||
|
color: rgba(215, 218, 224, 0.6) !important;
|
||||||
|
}
|
||||||
|
.left-column ul > li:hover > svg {
|
||||||
|
color: #d7dae0 !important;
|
||||||
|
}
|
||||||
|
.left-column ul > li.active > svg {
|
||||||
|
color: #4d78cc !important;
|
||||||
|
}
|
||||||
|
.open-project svg,
|
||||||
|
.empty .no-data svg,
|
||||||
|
.side-bar-toc .no-data svg {
|
||||||
|
fill: #4d78cc !important;
|
||||||
|
}
|
||||||
|
.open-project a {
|
||||||
|
color: #9da5b4 !important;
|
||||||
|
border: 1px solid #181a1f !important;
|
||||||
|
background-color: #353b45 !important;
|
||||||
|
background-image: linear-gradient(#3a3f4b, #353b45) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-tabs {
|
||||||
|
border-bottom: 1px solid #181a1f;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li,
|
||||||
|
.tabs-container > li.active {
|
||||||
|
background: var(--editorBgColor) !important;
|
||||||
|
}
|
||||||
|
.tabs-container > li.active {
|
||||||
|
border: 1px solid #181a1f;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.tabs-container > li.active:not(:last-child):after {
|
||||||
|
top: 0 !important;
|
||||||
|
right: auto !important;
|
||||||
|
width: 2px !important;
|
||||||
|
height: auto !important;
|
||||||
|
background: #4d78cc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
background: var(--codeBlockBgColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:not(.ag-active)[data-role="hr"]::before {
|
||||||
|
border-top: 2px dashed #4b5362 !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
background: #1b1d23 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.ag-task-list-item {
|
||||||
|
list-style-type: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 4px 0px 0px;
|
||||||
|
top: 2px;
|
||||||
|
left: -22px;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked {
|
||||||
|
transform: rotate(0);
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input[type=checkbox]::before {
|
||||||
|
content: '';
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
border: 2px solid var(--editorColor);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: var(--editorBgColor);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked::before {
|
||||||
|
border: transparent;
|
||||||
|
background-color: var(--editorColor);
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input::after {
|
||||||
|
content: '';
|
||||||
|
transform: rotate(-45deg) scale(0);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
top: 1px;
|
||||||
|
left: 5px;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked::after {
|
||||||
|
transform: rotate(-45deg) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------ */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prism.js theme (override light theme)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* @import url("prismjs/one-dark.theme.css"); */
|
||||||
126
src/renderer/assets/themes/prismjs/dark.theme.css
Normal file
126
src/renderer/assets/themes/prismjs/dark.theme.css
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
/*
|
||||||
|
* ------------------------------------
|
||||||
|
* Prism.js dark theme
|
||||||
|
*/
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
color: #f8f8f2;
|
||||||
|
/*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code Fence */
|
||||||
|
pre.ag-paragraph {
|
||||||
|
padding: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline Code */
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
background: #272822;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline Code */
|
||||||
|
:not(pre) > code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #f8f8f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol {
|
||||||
|
color: #f92672;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.boolean,
|
||||||
|
.token.number {
|
||||||
|
color: #ae81ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin {
|
||||||
|
color: #a6e22e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.inserted {
|
||||||
|
color: #22863a;
|
||||||
|
background: #f0fff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.deleted {
|
||||||
|
color: #b31d28;
|
||||||
|
background: #ffeef0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string,
|
||||||
|
.token.variable {
|
||||||
|
color: #f8f8f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #e6db74;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.keyword {
|
||||||
|
color: #66d9ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important {
|
||||||
|
color: #fd971f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
137
src/renderer/assets/themes/prismjs/one-dark.theme.css
Normal file
137
src/renderer/assets/themes/prismjs/one-dark.theme.css
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2016 Adrián
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
color: #ABB2BF;
|
||||||
|
/*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code Fence */
|
||||||
|
pre.ag-paragraph {
|
||||||
|
padding: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline Code */
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre.ag-paragraph {
|
||||||
|
background: #282c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline Code */
|
||||||
|
:not(pre) > code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: #5C6370;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #abb2bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.tag {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.deleted {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #98c379;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #56b6c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.keyword {
|
||||||
|
color: #c678dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function {
|
||||||
|
color: #61afef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #c678dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
139
src/renderer/assets/themes/ulysses.theme.css
Normal file
139
src/renderer/assets/themes/ulysses.theme.css
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
:root {
|
||||||
|
--themeColor: rgb(12, 139, 186);
|
||||||
|
--highlightColor: rgba(12, 139, 186, .4);
|
||||||
|
--selectionColor: rgba(0, 0, 0, .1);
|
||||||
|
--editorColor: rgba(101, 101, 101, .8);
|
||||||
|
--editorColor50: rgba(101, 101, 101, .5);
|
||||||
|
--editorColor30: rgba(101, 101, 101, .3);
|
||||||
|
--editorColor10: rgba(101, 101, 101, .1);
|
||||||
|
--editorColor04: rgba(101, 101, 101, .04);
|
||||||
|
--editorBgColor: #f3f3f3;
|
||||||
|
--deleteColor: #ff6969;
|
||||||
|
--iconColor: rgba(101, 101, 101, .8);
|
||||||
|
--codeBgColor: #d8d8d869;
|
||||||
|
--codeBlockBgColor: rgba(12, 139, 186, .04);
|
||||||
|
|
||||||
|
--sideBarColor: rgba(101, 101, 101, .6);
|
||||||
|
--sideBarTitleColor: rgba(101, 101, 101, 1);
|
||||||
|
--sideBarTextColor: rgba(101, 101, 101, .4);
|
||||||
|
--sideBarBgColor: rgba(248, 248, 248, 0.9);
|
||||||
|
--sideBarItemHoverBgColor: rgba(101, 101, 101, .03);
|
||||||
|
--itemBgColor: rgba(245, 245, 245, 0.6);
|
||||||
|
--floatBgColor: #ffffff;
|
||||||
|
--floatHoverColor: rgba(101, 101, 101, .04);
|
||||||
|
--floatBorderColor: rgba(0, 0, 0, .03);
|
||||||
|
--editorAreaWidth: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-tabs {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-container > li:not(:last-child) {
|
||||||
|
border-right: 1px solid #e5e5e5 !important;
|
||||||
|
background: var(--editorBgColor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------ */
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--themeColor);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.ag-bullet-list-item {
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
li.ag-bullet-list-item::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 5px;
|
||||||
|
height: 2px;
|
||||||
|
left: -18px;
|
||||||
|
top: 15px;
|
||||||
|
background: var(--editorColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote.ag-paragraph {
|
||||||
|
background: rgb(233, 233, 233);
|
||||||
|
}
|
||||||
|
blockquote.ag-paragraph::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.ag-paragraph {
|
||||||
|
color: var(--editorColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*task list*/
|
||||||
|
li.ag-task-list-item {
|
||||||
|
list-style-type: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 4px 0px 0px;
|
||||||
|
top: 2px;
|
||||||
|
left: -22px;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked {
|
||||||
|
transform: rotate(0);
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input[type=checkbox]::before {
|
||||||
|
content: '';
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
border: 2px solid var(--editorColor);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: var(--editorBgColor);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked::before {
|
||||||
|
border: transparent;
|
||||||
|
background-color: var(--editorColor);
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input::after {
|
||||||
|
content: '';
|
||||||
|
transform: rotate(-45deg) scale(0);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
top: 1px;
|
||||||
|
left: 5px;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
li.ag-task-list-item > input.ag-checkbox-checked::after {
|
||||||
|
transform: rotate(-45deg) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*horizontal line*/
|
||||||
|
p:not(.ag-active)[data-role="hr"]::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
height: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 2px dashed var(--editorColor50);
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
@ -89,9 +89,10 @@
|
|||||||
import Printer from '@/services/printService'
|
import Printer from '@/services/printService'
|
||||||
import { DEFAULT_EDITOR_FONT_FAMILY } from '@/config'
|
import { DEFAULT_EDITOR_FONT_FAMILY } from '@/config'
|
||||||
|
|
||||||
import 'muya/themes/light.css'
|
import 'muya/themes/default.css'
|
||||||
import CloseIcon from '@/assets/icons/close.svg'
|
import '@/assets/themes/codemirror/one-dark.css'
|
||||||
import 'view-image/lib/imgViewer.css'
|
import 'view-image/lib/imgViewer.css'
|
||||||
|
import CloseIcon from '@/assets/icons/close.svg'
|
||||||
|
|
||||||
const STANDAR_Y = 320
|
const STANDAR_Y = 320
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { adjustCursor } from '../../util'
|
import { adjustCursor } from '../../util'
|
||||||
import bus from '../../bus'
|
import bus from '../../bus'
|
||||||
import { railscastsThemes } from '@/config'
|
import { oneDarkThemes, railscastsThemes } from '@/config'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
@ -67,6 +67,8 @@
|
|||||||
}
|
}
|
||||||
if (railscastsThemes.includes(theme)) {
|
if (railscastsThemes.includes(theme)) {
|
||||||
codeMirrorConfig.theme = 'railscasts'
|
codeMirrorConfig.theme = 'railscasts'
|
||||||
|
} else if (oneDarkThemes.includes(theme)) {
|
||||||
|
codeMirrorConfig.theme = 'one-dark'
|
||||||
}
|
}
|
||||||
const editor = this.editor = codeMirror(container, codeMirrorConfig)
|
const editor = this.editor = codeMirror(container, codeMirrorConfig)
|
||||||
bus.$on('file-loaded', this.setMarkdown)
|
bus.$on('file-loaded', this.setMarkdown)
|
||||||
|
|||||||
@ -53,6 +53,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, .1);
|
||||||
}
|
}
|
||||||
.tabs-container {
|
.tabs-container {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="title-bar"
|
class="title-bar"
|
||||||
:class="[{ 'active': active }, { 'frameless': titleBarStyle === 'custom' }, { 'isOsx': platform === 'darwin' }]"
|
:class="[{ 'active': active }, { 'tabs-visible': showTabBar }, { 'frameless': titleBarStyle === 'custom' }, { 'isOsx': platform === 'darwin' }]"
|
||||||
>
|
>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span v-if="!filename">Mark Text</span>
|
<span v-if="!filename">Mark Text</span>
|
||||||
@ -141,6 +141,7 @@
|
|||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
'titleBarStyle': state => state.preferences.titleBarStyle,
|
'titleBarStyle': state => state.preferences.titleBarStyle,
|
||||||
|
'showTabBar': state => state.layout.showTabBar
|
||||||
}),
|
}),
|
||||||
paths () {
|
paths () {
|
||||||
if (!this.pathname) return []
|
if (!this.pathname) return []
|
||||||
|
|||||||
@ -13,4 +13,5 @@ export const DEFAULT_STYLE = {
|
|||||||
theme: 'light'
|
theme: 'light'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const railscastsThemes = ['dark']
|
export const railscastsThemes = ['dark', 'material-dark']
|
||||||
|
export const oneDarkThemes = ['one-dark']
|
||||||
|
|||||||
@ -23,6 +23,19 @@
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& > .notice-bg.icon-message {
|
||||||
|
background: var(--themeColor);
|
||||||
|
}
|
||||||
|
& > .notice-bg.icon-error {
|
||||||
|
background: var(--deleteColor);
|
||||||
|
}
|
||||||
|
& > .notice-bg.icon-warn {
|
||||||
|
background: var(--deleteColor);
|
||||||
|
}
|
||||||
|
& > .notice-bg.icon-info {
|
||||||
|
background: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
& .content {
|
& .content {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@ -9,17 +9,16 @@ const INON_HASH = {
|
|||||||
info: 'icon-info'
|
info: 'icon-info'
|
||||||
}
|
}
|
||||||
|
|
||||||
const COLOR_HASH = {
|
// const COLOR_HASH = {
|
||||||
primary: 'var(--themeColor)',
|
// primary: 'var(--themeColor)',
|
||||||
error: 'var(--deleteColor)',
|
// error: 'var(--deleteColor)',
|
||||||
warning: 'var(--deleteColor)',
|
// warning: 'var(--deleteColor)',
|
||||||
info: '#999999'
|
// info: '#999999'
|
||||||
}
|
// }
|
||||||
|
|
||||||
const notification = {
|
const notification = {
|
||||||
name: 'notify',
|
name: 'notify',
|
||||||
noticeCache: {},
|
noticeCache: {},
|
||||||
// it's a dirty implement of clear, because not remove all the event listeners. need refactor.
|
|
||||||
clear () {
|
clear () {
|
||||||
Object.keys(this.noticeCache).forEach(key => {
|
Object.keys(this.noticeCache).forEach(key => {
|
||||||
this.noticeCache[key].remove()
|
this.noticeCache[key].remove()
|
||||||
@ -56,7 +55,7 @@ const notification = {
|
|||||||
target = noticeContainer.querySelector('.confirm')
|
target = noticeContainer.querySelector('.confirm')
|
||||||
}
|
}
|
||||||
|
|
||||||
bgNotice.style.backgroundColor = `${COLOR_HASH[type]}`
|
bgNotice.classList.add(INON_HASH[type])
|
||||||
|
|
||||||
fluent.style.height = offsetHeight * 2 + 'px'
|
fluent.style.height = offsetHeight * 2 + 'px'
|
||||||
fluent.style.width = offsetHeight * 2 + 'px'
|
fluent.style.width = offsetHeight * 2 + 'px'
|
||||||
|
|||||||
@ -1,40 +1,63 @@
|
|||||||
import { THEME_STYLE_ID, COMMON_STYLE_ID, DEFAULT_CODE_FONT_FAMILY, railscastsThemes } from '../config'
|
import { THEME_STYLE_ID, COMMON_STYLE_ID, DEFAULT_CODE_FONT_FAMILY, oneDarkThemes, railscastsThemes } from '../config'
|
||||||
import { dark, ulysses, graphite } from './themeColor'
|
import { dark, graphite, materialDark, oneDark, ulysses } from './themeColor'
|
||||||
|
|
||||||
|
const patchTheme = css => {
|
||||||
|
return `@media not print {\n${css}\n}`
|
||||||
|
}
|
||||||
|
|
||||||
export const addThemeStyle = theme => {
|
export const addThemeStyle = theme => {
|
||||||
|
const isCmRailscasts = railscastsThemes.includes(theme)
|
||||||
|
const isCmOneDark = oneDarkThemes.includes(theme)
|
||||||
|
const isDarkTheme = isCmOneDark || isCmRailscasts
|
||||||
let themeStyleEle = document.querySelector(`#${THEME_STYLE_ID}`)
|
let themeStyleEle = document.querySelector(`#${THEME_STYLE_ID}`)
|
||||||
if (!themeStyleEle) {
|
if (!themeStyleEle) {
|
||||||
themeStyleEle = document.createElement('style')
|
themeStyleEle = document.createElement('style')
|
||||||
themeStyleEle.id = THEME_STYLE_ID
|
themeStyleEle.id = THEME_STYLE_ID
|
||||||
document.head.appendChild(themeStyleEle)
|
document.head.appendChild(themeStyleEle)
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (theme) {
|
switch (theme) {
|
||||||
case 'light':
|
case 'light':
|
||||||
themeStyleEle.innerHTML = ''
|
themeStyleEle.innerHTML = ''
|
||||||
break
|
break
|
||||||
case 'dark':
|
case 'dark':
|
||||||
themeStyleEle.innerHTML = dark
|
themeStyleEle.innerHTML = patchTheme(dark())
|
||||||
|
break
|
||||||
|
case 'material-dark':
|
||||||
|
themeStyleEle.innerHTML = patchTheme(materialDark())
|
||||||
break
|
break
|
||||||
case 'ulysses':
|
case 'ulysses':
|
||||||
themeStyleEle.innerHTML = ulysses
|
themeStyleEle.innerHTML = patchTheme(ulysses())
|
||||||
break
|
break
|
||||||
case 'graphite':
|
case 'graphite':
|
||||||
themeStyleEle.innerHTML = graphite
|
themeStyleEle.innerHTML = patchTheme(graphite())
|
||||||
|
break
|
||||||
|
case 'one-dark':
|
||||||
|
themeStyleEle.innerHTML = patchTheme(oneDark())
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
console.log('unknown theme')
|
console.log('unknown theme')
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
// change codeMirror theme
|
// workaround: use dark icons
|
||||||
|
document.body.classList.remove('dark')
|
||||||
|
if (isDarkTheme) {
|
||||||
|
document.body.classList.add('dark')
|
||||||
|
}
|
||||||
|
|
||||||
|
// change CodeMirror theme
|
||||||
const cm = document.querySelector('.CodeMirror')
|
const cm = document.querySelector('.CodeMirror')
|
||||||
if (cm) {
|
if (cm) {
|
||||||
if (railscastsThemes.includes(theme)) {
|
cm.classList.remove('cm-s-default')
|
||||||
cm.classList.remove('cm-s-default')
|
cm.classList.remove('cm-s-one-dark')
|
||||||
|
cm.classList.remove('cm-s-railscasts')
|
||||||
|
if (isCmOneDark) {
|
||||||
|
cm.classList.add('cm-s-one-dark')
|
||||||
|
} else if (isCmRailscasts) {
|
||||||
cm.classList.add('cm-s-railscasts')
|
cm.classList.add('cm-s-railscasts')
|
||||||
} else {
|
} else {
|
||||||
cm.classList.add('cm-s-default')
|
cm.classList.add('cm-s-default')
|
||||||
cm.classList.remove('cm-s-railscasts')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,410 +1,28 @@
|
|||||||
// we can load custom theme from userData folder, we also can write this theme in userData folder.
|
import darkTheme from '../assets/themes/dark.theme.css'
|
||||||
import imageDark from '../../muya/lib/assets/icons/image_dark.png'
|
import graphiteTheme from '../assets/themes/graphite.theme.css'
|
||||||
import imageDarkFail from '../../muya/lib/assets/icons/image_dark_fail.png'
|
import materialDarkTheme from '../assets/themes/material-dark.theme.css'
|
||||||
|
import oneDarkTheme from '../assets/themes/one-dark.theme.css'
|
||||||
|
import ulyssesTheme from '../assets/themes/ulysses.theme.css'
|
||||||
|
|
||||||
export const dark = `
|
import darkPrismTheme from '../assets/themes/prismjs/dark.theme.css'
|
||||||
:root {
|
import oneDarkPrismTheme from '../assets/themes/prismjs/one-dark.theme.css'
|
||||||
/*editor*/
|
|
||||||
--themeColor: #f48237;
|
|
||||||
--highlightColor: rgba(244, 130, 55, .4);
|
|
||||||
--selectionColor: rgba(255, 255, 255, .2);
|
|
||||||
--editorColor: rgba(255, 255, 255, .8);
|
|
||||||
--editorColor50: rgba(255, 255, 255, .5);
|
|
||||||
--editorColor30: rgba(255, 255, 255, .3);
|
|
||||||
--editorColor10: rgba(255, 255, 255, .1);
|
|
||||||
--editorColor04: rgba(255, 255, 255, .04);
|
|
||||||
--editorBgColor: #34393f;
|
|
||||||
--deleteColor: #ff6969;
|
|
||||||
--iconColor: rgba(255, 255, 255, .8);
|
|
||||||
--codeBgColor: #d8d8d869;
|
|
||||||
--codeBlockBgColor: rgba(244, 130, 55, .04);
|
|
||||||
/*marktext*/
|
|
||||||
--sideBarColor: rgba(255, 255, 255, .6);
|
|
||||||
--sideBarTitleColor: rgba(255, 255, 255, 1);
|
|
||||||
--sideBarTextColor: rgba(255, 255, 255, .4);
|
|
||||||
--sideBarBgColor: rgba(26, 33, 41, 0.9);
|
|
||||||
--sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
|
|
||||||
--itemBgColor: rgba(71, 78, 86, 0.6);
|
|
||||||
--floatBgColor: #3c4650;
|
|
||||||
--floatHoverColor: rgba(255, 255, 255, .04);
|
|
||||||
--floatBorderColor: rgba(0, 0, 0, .03);
|
|
||||||
--floatShadow: rgba(0, 0, 0, 0.1);
|
|
||||||
--editorAreaWidth: 700px;
|
|
||||||
}
|
|
||||||
div.title-bar .frameless-titlebar-button > div > svg {
|
|
||||||
fill: #ffffff;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* okaidia theme for JavaScript, CSS and HTML
|
|
||||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
|
||||||
* @author ocodia
|
|
||||||
*/
|
|
||||||
|
|
||||||
code[class*="language-"],
|
export const dark = () => {
|
||||||
pre.ag-paragraph {
|
return darkTheme + '\n' + darkPrismTheme
|
||||||
color: #f8f8f2;
|
|
||||||
/*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre;
|
|
||||||
word-spacing: normal;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
|
||||||
-moz-hyphens: none;
|
|
||||||
-ms-hyphens: none;
|
|
||||||
hyphens: none;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code blocks */
|
|
||||||
pre.ag-paragraph {
|
|
||||||
padding: 1em;
|
|
||||||
margin: 1em 0;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(pre) > code[class*="language-"],
|
|
||||||
pre.ag-paragraph {
|
|
||||||
/*background: #272822;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre) > code[class*="language-"] {
|
|
||||||
padding: .1em;
|
|
||||||
border-radius: .3em;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ag-image-marked-text::before {
|
|
||||||
background: url(${imageDark});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ag-image-marked-text.ag-image-fail::before {
|
export const graphite = () => {
|
||||||
background-image: url(${imageDarkFail});
|
return graphiteTheme
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: slategray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #f8f8f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.namespace {
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol {
|
|
||||||
color: #f92672;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.boolean,
|
|
||||||
.token.number {
|
|
||||||
color: #ae81ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.builtin {
|
|
||||||
color: #a6e22e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.inserted {
|
|
||||||
color: #22863a;
|
|
||||||
background: #f0fff4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.deleted {
|
export const materialDark = () => {
|
||||||
color: #b31d28;
|
return materialDarkTheme + '\n' + darkPrismTheme
|
||||||
background: #ffeef0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string,
|
|
||||||
.token.variable {
|
|
||||||
color: #f8f8f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.function,
|
|
||||||
.token.class-name {
|
|
||||||
color: #e6db74;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.keyword {
|
|
||||||
color: #66d9ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important {
|
|
||||||
color: #fd971f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important,
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
|
|
||||||
export const ulysses = `
|
|
||||||
:root {
|
|
||||||
--themeColor: rgb(12, 139, 186);
|
|
||||||
--highlightColor: rgba(12, 139, 186, .4);
|
|
||||||
--selectionColor: rgba(0, 0, 0, .1);
|
|
||||||
--editorColor: rgba(101, 101, 101, .8);
|
|
||||||
--editorColor50: rgba(101, 101, 101, .5);
|
|
||||||
--editorColor30: rgba(101, 101, 101, .3);
|
|
||||||
--editorColor10: rgba(101, 101, 101, .1);
|
|
||||||
--editorColor04: rgba(101, 101, 101, .04);
|
|
||||||
--editorBgColor: #f3f3f3;
|
|
||||||
--deleteColor: #ff6969;
|
|
||||||
--iconColor: rgba(101, 101, 101, .8);
|
|
||||||
--codeBgColor: #d8d8d869;
|
|
||||||
--codeBlockBgColor: rgba(12, 139, 186, .04);
|
|
||||||
--sideBarColor: rgba(101, 101, 101, .6);
|
|
||||||
--sideBarTitleColor: rgba(101, 101, 101, 1);
|
|
||||||
--sideBarTextColor: rgba(101, 101, 101, .4);
|
|
||||||
--sideBarBgColor: rgba(248, 248, 248, 0.9);
|
|
||||||
--sideBarItemHoverBgColor: rgba(101, 101, 101, .03);
|
|
||||||
--itemBgColor: rgba(245, 245, 245, 0.6);
|
|
||||||
--floatBgColor: #ffffff;
|
|
||||||
--floatHoverColor: rgba(101, 101, 101, .04);
|
|
||||||
--floatBorderColor: rgba(0, 0, 0, .03);
|
|
||||||
--floatShadow: rgba(0, 0, 0, 0.1);
|
|
||||||
--editorAreaWidth: 700px;
|
|
||||||
}
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
color: var(--themeColor);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
li.ag-bullet-list-item {
|
|
||||||
position: relative;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
li.ag-bullet-list-item::before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 5px;
|
|
||||||
height: 2px;
|
|
||||||
left: -18px;
|
|
||||||
top: 15px;
|
|
||||||
background: var(--editorColor);
|
|
||||||
}
|
|
||||||
blockquote.ag-paragraph {
|
|
||||||
background: rgb(233, 233, 233);
|
|
||||||
}
|
|
||||||
blockquote.ag-paragraph::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
li.ag-paragraph {
|
|
||||||
color: var(--editorColor);
|
|
||||||
}
|
|
||||||
/*task list*/
|
|
||||||
li.ag-task-list-item {
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li.ag-task-list-item > input[type=checkbox] {
|
export const oneDark = () => {
|
||||||
position: absolute;
|
return oneDarkTheme + '\n' + oneDarkPrismTheme
|
||||||
cursor: pointer;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: 4px 0px 0px;
|
|
||||||
top: 2px;
|
|
||||||
left: -22px;
|
|
||||||
transform-origin: center;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li.ag-task-list-item > input.ag-checkbox-checked {
|
export const ulysses = () => {
|
||||||
transform: rotate(0);
|
return ulyssesTheme
|
||||||
opacity: .5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li.ag-task-list-item > input[type=checkbox]::before {
|
|
||||||
content: '';
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
border: 2px solid var(--editorColor);
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: var(--editorBgColor);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input.ag-checkbox-checked::before {
|
|
||||||
border: transparent;
|
|
||||||
background-color: var(--editorColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input::after {
|
|
||||||
content: '';
|
|
||||||
transform: rotate(-45deg) scale(0);
|
|
||||||
width: 9px;
|
|
||||||
height: 5px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
border-top: none;
|
|
||||||
border-right: none;
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
top: 1px;
|
|
||||||
left: 5px;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input.ag-checkbox-checked::after {
|
|
||||||
transform: rotate(-45deg) scale(1);
|
|
||||||
}
|
|
||||||
/*horizontal line*/
|
|
||||||
p:not(.ag-active)[data-role="hr"]::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 50%;
|
|
||||||
display: block;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
height: 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-bottom: 2px dashed var(--editorColor50);
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export const graphite = `
|
|
||||||
:root {
|
|
||||||
--themeColor: rgb(104, 134, 170);
|
|
||||||
--highlightColor: rgba(104, 134, 170, .4);
|
|
||||||
--selectionColor: rgba(0, 0, 0, .1);
|
|
||||||
--editorColor: rgba(43, 48, 50, .8);
|
|
||||||
--editorColor50: rgba(43, 48, 50, .5);
|
|
||||||
--editorColor30: rgba(43, 48, 50, .3);
|
|
||||||
--editorColor10: rgba(43, 48, 50, .1);
|
|
||||||
--editorColor04: rgba(43, 48, 50, .04);
|
|
||||||
--editorBgColor: #f7f7f7;
|
|
||||||
--deleteColor: #ff6969;
|
|
||||||
--iconColor: rgba(135, 135, 135, .8);
|
|
||||||
--codeBgColor: #d8d8d869;
|
|
||||||
--codeBlockBgColor: rgba(104, 134, 170, .04);
|
|
||||||
--sideBarColor: rgba(188, 193, 197, .8);
|
|
||||||
--sideBarTitleColor: rgba(255, 255, 255, 1);
|
|
||||||
--sideBarTextColor: rgba(188, 193, 197, .4);
|
|
||||||
--sideBarBgColor: rgba(69, 75, 80, 1);
|
|
||||||
--sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
|
|
||||||
--itemBgColor: rgba(43, 48, 50, .5);
|
|
||||||
--floatBgColor: rgb(237, 237, 238);
|
|
||||||
--floatHoverColor: rgba(43, 48, 50, .04);
|
|
||||||
--floatBorderColor: rgba(0, 0, 0, .03);
|
|
||||||
--floatShadow: rgba(0, 0, 0, 0.1);
|
|
||||||
--editorAreaWidth: 700px;
|
|
||||||
}
|
|
||||||
li.ag-paragraph {
|
|
||||||
color: var(--editorColor);
|
|
||||||
}
|
|
||||||
/*task list*/
|
|
||||||
li.ag-task-list-item {
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input[type=checkbox] {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: 4px 0px 0px;
|
|
||||||
top: 2px;
|
|
||||||
left: -22px;
|
|
||||||
transform-origin: center;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input.ag-checkbox-checked {
|
|
||||||
transform: rotate(0);
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input[type=checkbox]::before {
|
|
||||||
content: '';
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
border: 2px solid var(--editorColor);
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: var(--editorBgColor);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input.ag-checkbox-checked::before {
|
|
||||||
border: transparent;
|
|
||||||
background-color: var(--editorColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input::after {
|
|
||||||
content: '';
|
|
||||||
transform: rotate(-45deg) scale(0);
|
|
||||||
width: 9px;
|
|
||||||
height: 5px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
border-top: none;
|
|
||||||
border-right: none;
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
top: 1px;
|
|
||||||
left: 5px;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ag-task-list-item > input.ag-checkbox-checked::after {
|
|
||||||
transform: rotate(-45deg) scale(1);
|
|
||||||
}
|
|
||||||
/*horizontal line*/
|
|
||||||
p:not(.ag-active)[data-role="hr"]::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
height: 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-bottom: 2px dashed var(--editorColor50);
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
Edit and save to update preferences. You can only change the JSON below!
|
Edit and save to update preferences. You can only change the JSON below!
|
||||||
|
|
||||||
- **theme**: *String* `dark` or `light`
|
- **theme**: *String* `dark`, `graphite`, `material-dark`, `one-dark`, `light` or `ulysses`
|
||||||
|
|
||||||
- **autoSave**: *Boolean* `true` or `false`
|
- **autoSave**: *Boolean* `true` or `false`
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user