dark主题样式调整
This commit is contained in:
xiaoqi.cxq
parent
dc8b4677be
commit
246f5b394e
2
package-lock.json
generated
2
package-lock.json
generated
@ -594,7 +594,7 @@
|
||||
},
|
||||
"@braintree/sanitize-url": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
|
||||
"integrity": "sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg=="
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
|
||||
@ -236,6 +236,10 @@ $item-font-size: 14px;
|
||||
.explorer-node--trash,
|
||||
.explorer-node--temp {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.app--dark & {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.explorer-node--folder > .explorer-node__item,
|
||||
|
||||
@ -208,6 +208,10 @@ $preview-background-dark: #252525;
|
||||
.layout__panel--explorer,
|
||||
.layout__panel--side-bar {
|
||||
background-color: #ddd;
|
||||
|
||||
.app--dark & {
|
||||
background-color: #383c4a;
|
||||
}
|
||||
}
|
||||
|
||||
.layout__panel--find-replace {
|
||||
|
||||
@ -273,6 +273,10 @@ export default {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.app--dark & {
|
||||
background-color: #383c4a;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
</div>
|
||||
<!-- Side bar -->
|
||||
<div class="navigation-bar__inner navigation-bar__inner--right navigation-bar__inner--button">
|
||||
<button class="navigation-bar__button navigation-bar__button--theme button" v-title="'切换主题'" tour-step-anchor="theme" @click="switchTheme"><icon-switch-theme></icon-switch-theme></button>
|
||||
<a class="navigation-bar__button navigation-bar__button--stackedit button" v-if="light" href="app" target="_blank" v-title="'打开StackEdit'"><icon-provider provider-id="stackedit"></icon-provider></a>
|
||||
<button class="navigation-bar__button navigation-bar__button--stackedit button" v-else tour-step-anchor="menu" @click="toggleSideBar()" v-title="'切换侧边栏'"><icon-provider provider-id="stackedit"></icon-provider></button>
|
||||
</div>
|
||||
@ -187,6 +188,9 @@ export default {
|
||||
publishSvc.requestPublish();
|
||||
}
|
||||
},
|
||||
switchTheme() {
|
||||
store.dispatch('data/switchThemeSetting');
|
||||
},
|
||||
pagedownClick(name) {
|
||||
if (store.getters['content/isCurrentEditable']) {
|
||||
const text = editorSvc.clEditor.getContent();
|
||||
@ -309,6 +313,18 @@ export default {
|
||||
padding: 0 4px;
|
||||
width: 38px;
|
||||
|
||||
&.navigation-bar__button--theme {
|
||||
width: 34px;
|
||||
padding: 0 7px;
|
||||
opacity: 0.85;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.navigation-bar__button--stackedit {
|
||||
opacity: 0.85;
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
<div class="tour-step__inner" v-else-if="step === 'editor'">
|
||||
<h2>您的Markdown编辑器</h2>
|
||||
<p>StackEdit实时将Markdown转换为HTML。</p>
|
||||
<p>StackEdit中文版实时将Markdown转换为HTML。</p>
|
||||
<p>点击 <icon-side-preview></icon-side-preview> 切换侧边预览</p>
|
||||
<div class="tour-step__button-bar">
|
||||
<button class="button" @click="finish">跳过</button>
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="tour-step__inner" v-else-if="step === 'explorer'">
|
||||
<h2>文件资源管理器</h2>
|
||||
<p>StackEdit可以管理文档空间中的多个文件和文件夹。</p>
|
||||
<p>StackEdit中文版可以管理文档空间中的多个文件和文件夹。</p>
|
||||
<p>点击 <icon-folder></icon-folder> 打开文件资源管理器。</p>
|
||||
<div class="tour-step__button-bar">
|
||||
<button class="button" @click="finish">跳过</button>
|
||||
@ -29,17 +29,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tour-step__inner" v-else-if="step === 'menu'">
|
||||
<h2>更多！</h2>
|
||||
<p>StackEdit还可以同步和发布文件，管理协作文档空间...</p>
|
||||
<h2>切换侧边栏！</h2>
|
||||
<p>StackEdit中文版还可以同步和发布文件，管理协作文档空间...</p>
|
||||
<p>点击 <icon-provider provider-id="stackedit"></icon-provider> 浏览菜单。</p>
|
||||
<div class="tour-step__button-bar">
|
||||
<button class="button" @click="finish">跳过</button>
|
||||
<button class="button button--resolve" @click="next">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tour-step__inner" v-else-if="step === 'theme'">
|
||||
<h2>切换主题！</h2>
|
||||
<p>StackEdit中文版可以切换黑白主题。</p>
|
||||
<p>点击 <icon-switch-theme></icon-switch-theme> 切换主题。</p>
|
||||
<div class="tour-step__button-bar">
|
||||
<button class="button" @click="finish">跳过</button>
|
||||
<button class="button button--resolve" @click="next">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tour-step__inner" v-else-if="step === 'end'">
|
||||
<h2>Enjoy!</h2>
|
||||
<p>如果您喜欢StackEdit中文版，请在<a href="https://gitee.com/mafgwo/stackedit">Gitee仓库</a>上点一下starred，谢谢！</p>
|
||||
<p>如果您喜欢StackEdit中文版，请在<a href="https://gitee.com/mafgwo/stackedit">Gitee仓库</a>上点一下Star，谢谢！</p>
|
||||
<div class="tour-step__button-bar">
|
||||
<button class="button button--resolve" @click="finish">确认</button>
|
||||
</div>
|
||||
@ -57,6 +66,7 @@ const steps = [
|
||||
'editor',
|
||||
'explorer',
|
||||
'menu',
|
||||
'theme',
|
||||
'end',
|
||||
];
|
||||
|
||||
@ -90,7 +100,8 @@ export default {
|
||||
break;
|
||||
}
|
||||
case 'editor':
|
||||
case 'menu': {
|
||||
case 'menu':
|
||||
case 'theme': {
|
||||
style.left = `${anchorRect.left}px`;
|
||||
break;
|
||||
}
|
||||
@ -139,6 +150,7 @@ export default {
|
||||
}
|
||||
|
||||
$tour-step-background: transparentize(mix(#f3f3f3, $selection-highlighting-color, 75%), 0.025);
|
||||
$tour-step-darkbackground: transparentize(mix(#4d4d4d, $selection-highlighting-color, 75%), 0.025);
|
||||
$tour-step-width: 240px;
|
||||
|
||||
.tour-step__inner {
|
||||
@ -151,6 +163,10 @@ $tour-step-width: 240px;
|
||||
text-align: center;
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
.app--dark & {
|
||||
background-color: $tour-step-darkbackground;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
||||
@ -183,11 +199,16 @@ $tour-step-width: 240px;
|
||||
right: 0;
|
||||
border-top: 10px solid $tour-step-background;
|
||||
border-left: 10px solid transparent;
|
||||
|
||||
.app--dark & {
|
||||
border-top: 10px solid $tour-step-darkbackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tour-step--editor &,
|
||||
.tour-step--menu & {
|
||||
.tour-step--menu &,
|
||||
.tour-step--theme & {
|
||||
right: 15px;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
@ -196,6 +217,10 @@ $tour-step-width: 240px;
|
||||
right: -10px;
|
||||
border-top: 10px solid $tour-step-background;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
.app--dark & {
|
||||
border-top: 10px solid $tour-step-darkbackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -208,6 +233,10 @@ $tour-step-width: 240px;
|
||||
left: -10px;
|
||||
border-top: 10px solid $tour-step-background;
|
||||
border-left: 10px solid transparent;
|
||||
|
||||
.app--dark & {
|
||||
border-top: 10px solid $tour-step-darkbackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,6 +73,10 @@
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
opacity: 0.6;
|
||||
|
||||
.app--dark & {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-entry__label--warning {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="modal__image">
|
||||
<icon-provider provider-id="dropbox"></icon-provider>
|
||||
</div>
|
||||
<p>将您的<b>Dropbox</b>链接到<b>StackEdit</b>。</p>
|
||||
<p>将您的<b>Dropbox</b>链接到<b>StackEdit中文版</b>。</p>
|
||||
<div class="form-entry">
|
||||
<div class="form-entry__checkbox">
|
||||
<label>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="modal__image">
|
||||
<icon-provider provider-id="gitea"></icon-provider>
|
||||
</div>
|
||||
<p>将您的<b>Gitea</b>链接到<b>StackEdit</b>。</p>
|
||||
<p>将您的<b>Gitea</b>链接到<b>StackEdit中文版</b>。</p>
|
||||
<form-entry label="Gitea URL" error="serverUrl">
|
||||
<input v-if="config.forceServerUrl" slot="field" class="textfield" type="text" disabled="disabled" v-model="config.forceServerUrl">
|
||||
<input v-else slot="field" class="textfield" type="text" v-model.trim="serverUrl" @keydown.enter="resolve()">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="modal__image">
|
||||
<icon-provider provider-id="github"></icon-provider>
|
||||
</div>
|
||||
<p>将您的<b>Github账号</b>链接到<b>StackEdit</b>。</p>
|
||||
<p>将您的<b>Github账号</b>链接到<b>StackEdit中文版</b>。</p>
|
||||
<div class="form-entry">
|
||||
<div class="form-entry__checkbox">
|
||||
<label>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="modal__image">
|
||||
<icon-provider provider-id="gitlab"></icon-provider>
|
||||
</div>
|
||||
<p>将您的<b>GitLab</b>链接到<b>StackEdit</b>。</p>
|
||||
<p>将您的<b>GitLab</b>链接到<b>StackEdit中文版</b>。</p>
|
||||
<form-entry label="GitLab URL" error="serverUrl">
|
||||
<input v-if="config.forceServerUrl" slot="field" class="textfield" type="text" disabled="disabled" v-model="config.forceServerUrl">
|
||||
<input v-else slot="field" class="textfield" type="text" v-model.trim="serverUrl" @keydown.enter="resolve()">
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<div class="modal__image">
|
||||
<icon-provider provider-id="googleDrive"></icon-provider>
|
||||
</div>
|
||||
<p>将您的<b>Google Drive</b>链接到<b>StackEdit</b>。</p>
|
||||
<p>将您的<b>Google Drive</b>链接到<b>StackEdit中文版</b>。</p>
|
||||
<div class="form-entry">
|
||||
<div class="form-entry__checkbox">
|
||||
<label>
|
||||
<input type="checkbox" v-model="restrictedAccess"> 限制访问
|
||||
</label>
|
||||
<div class="form-entry__info">
|
||||
如果限制，则将访问仅限于您使用<b>StackEdit</b>创建的文件。
|
||||
如果限制，则将访问仅限于您使用<b>StackEdit中文版</b>创建的文件。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="modal__image">
|
||||
<icon-provider provider-id="zendesk"></icon-provider>
|
||||
</div>
|
||||
<p>将您的<b>Zendesk</b>链接到<b>StackEdit</b>。</p>
|
||||
<p>将您的<b>Zendesk</b>链接到<b>StackEdit中文版</b>。</p>
|
||||
<form-entry label="Site URL" error="siteUrl">
|
||||
<input slot="field" class="textfield" type="text" v-model.trim="siteUrl" @keydown.enter="resolve()">
|
||||
<div class="form-entry__info">
|
||||
|
||||
@ -88,7 +88,7 @@ newFileContent: |
|
||||
|
||||
|
||||
|
||||
> Written with [StackEdit](https://stackedit.cn/).
|
||||
> Written with [StackEdit中文版](https://stackedit.cn/).
|
||||
|
||||
# Default properties for new files
|
||||
newFileProperties: |
|
||||
|
||||
@ -4,6 +4,6 @@
|
||||
|
||||
我们建议同步您的文档空间，以确保在清除浏览器数据的情况下不会丢失文件。自托管Gitea后端非常适合保证隐私。
|
||||
|
||||
**StackEdit可以访问我的数据而不告诉我吗？**
|
||||
**StackEdit中文版可以访问我的数据而不告诉我吗？**
|
||||
|
||||
StackEdit是一个基于浏览器的应用程序。Gitee，Github，Dropbox ...发出的访问令牌存储在您的浏览器中，不会发送到任何形式的后端或第三方，因此任何人都不会访问您的数据。
|
||||
StackEdit中文版是一个基于浏览器的应用程序。Gitee，Github，Dropbox ...发出的访问令牌存储在您的浏览器中，不会发送到任何形式的后端或第三方，因此任何人都不会访问您的数据。
|
||||
|
||||
@ -553,6 +553,11 @@ export default [
|
||||
'更新设置',
|
||||
'使用“设置”对话框调整应用程序行为。',
|
||||
),
|
||||
new Feature(
|
||||
'switchTheme',
|
||||
'切换主题',
|
||||
'使用“主题切换”按钮切换主题。',
|
||||
),
|
||||
new Feature(
|
||||
'changeShortcuts',
|
||||
'编辑快捷键',
|
||||
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
'好的',
|
||||
),
|
||||
workspaceGoogleRedirection: simpleModal(
|
||||
'<p>StackEdit需要完整的Google Drive访问才能打开此文档空间。</p>',
|
||||
'<p>StackEdit中文版需要完整的Google Drive访问才能打开此文档空间。</p>',
|
||||
'取消',
|
||||
'确认授权',
|
||||
),
|
||||
|
||||
3
src/icons/SwitchTheme.vue
Normal file
3
src/icons/SwitchTheme.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<svg t="1659766631486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2235" width="32" height="32"><path d="M512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m0-64v-725.333334a362.666667 362.666667 0 0 1 0 725.333334z" p-id="2236"></path></svg>
|
||||
</template>
|
||||
@ -55,6 +55,7 @@ import ContentCopy from './ContentCopy';
|
||||
import Key from './Key';
|
||||
import DotsHorizontal from './DotsHorizontal';
|
||||
import Seal from './Seal';
|
||||
import SwitchTheme from './SwitchTheme';
|
||||
|
||||
Vue.component('iconProvider', Provider);
|
||||
Vue.component('iconFormatBold', FormatBold);
|
||||
@ -112,3 +113,4 @@ Vue.component('iconContentCopy', ContentCopy);
|
||||
Vue.component('iconKey', Key);
|
||||
Vue.component('iconDotsHorizontal', DotsHorizontal);
|
||||
Vue.component('iconSeal', Seal);
|
||||
Vue.component('iconSwitchTheme', SwitchTheme);
|
||||
|
||||
@ -236,6 +236,21 @@ export default {
|
||||
actions: {
|
||||
setServerConf: setter('serverConf'),
|
||||
setSettings: setter('settings'),
|
||||
switchThemeSetting: ({ commit, getters }) => {
|
||||
const customSettingStr = getters.settings;
|
||||
let { colorTheme } = getters.computedSettings;
|
||||
if (!colorTheme || colorTheme === 'light') {
|
||||
colorTheme = 'dark';
|
||||
} else {
|
||||
colorTheme = 'light';
|
||||
}
|
||||
const themeStr = `colorTheme: ${colorTheme}`;
|
||||
let settingsStr = (customSettingStr && customSettingStr.trim()) || '# 增加您的自定义配置覆盖默认配置';
|
||||
settingsStr = settingsStr.indexOf('colorTheme:') > -1 ?
|
||||
settingsStr.replace(/colorTheme:.*/, themeStr) : `${settingsStr}\n${themeStr}`;
|
||||
commit('setItem', itemTemplate('settings', settingsStr));
|
||||
badgeSvc.addBadge('switchTheme');
|
||||
},
|
||||
patchLocalSettings: patcher('localSettings'),
|
||||
patchLayoutSettings: patcher('layoutSettings'),
|
||||
toggleNavigationBar: layoutSettingsToggler('showNavigationBar', 'toggleNavigationBar'),
|
||||
|
||||
@ -91,6 +91,10 @@ textarea {
|
||||
background-image: none;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
.app--dark & {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -129,6 +133,20 @@ textarea {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
.hidden-file:focus + & {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app--dark .layout__panel--editor &,
|
||||
.app--dark .layout__panel--preview & {
|
||||
color: #ccc;
|
||||
@ -166,6 +184,18 @@ textarea {
|
||||
color: #fff;
|
||||
background-color: darken(#349be8, 8%);
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
background-color: #567c98;
|
||||
color: rgb(222, 222, 222);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: darken(#567c98, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textfield {
|
||||
@ -190,6 +220,16 @@ textarea {
|
||||
background-color: #f0f0f0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.app--dark & {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
background-color: #373737;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
||||
@ -12,6 +12,10 @@ body {
|
||||
line-height: $line-height-base;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
.app--dark {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.app--dark .layout__panel--editor,
|
||||
@ -98,6 +102,10 @@ code {
|
||||
background-color: $code-bg;
|
||||
border-radius: $border-radius-base;
|
||||
padding: 2px 4px;
|
||||
|
||||
.app--dark & {
|
||||
background-color: $code-dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -113,6 +121,10 @@ pre > code {
|
||||
-webkit-text-size-adjust: none;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
|
||||
.app--dark & {
|
||||
background-color: $code-dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
|
||||
@ -134,6 +134,10 @@
|
||||
background-color: $code-bg;
|
||||
border-radius: $code-border-radius;
|
||||
padding: 0.15em 0;
|
||||
|
||||
.app--dark & {
|
||||
background-color: $code-dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
|
||||
@ -3,6 +3,7 @@ $font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console
|
||||
$body-color-light: rgba(0, 0, 0, 0.75);
|
||||
$body-color-dark: rgba(255, 255, 255, 0.75);
|
||||
$code-bg: rgba(0, 0, 0, 0.05);
|
||||
$code-dark-bg: rgba(0, 0, 0, 0.2);
|
||||
$line-height-base: 1.67;
|
||||
$line-height-title: 1.33;
|
||||
$font-size-monospace: 0.85em;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user