update styles

This commit is contained in:
xiaoqi.cxq 2023-04-06 14:00:15 +08:00
parent 2e9e4b73f6
commit 1daa5afe39
7 changed files with 31 additions and 6 deletions

View File

@ -7,6 +7,16 @@
<title>{{files.0.name}}</title> <title>{{files.0.name}}</title>
<link rel="stylesheet" href="https://stackedit.cn/style.css" /> <link rel="stylesheet" href="https://stackedit.cn/style.css" />
<style type="text/css"> <style type="text/css">
.app--dark {
background-color: #444;
}
.app--dark .stackedit__html {
padding-left: 0;
padding-right: 0;
}
.app--dark .stackedit__content {
padding: 1px 20px 20px;
}
{{{files.0.content.themeStyleContent}}} {{{files.0.content.themeStyleContent}}}
</style> </style>
</head> </head>
@ -14,7 +24,7 @@
{{#if pdf}} {{#if pdf}}
<body class="stackedit stackedit--pdf"> <body class="stackedit stackedit--pdf">
{{else}} {{else}}
<body class="stackedit"> <body class="stackedit {{{files.0.content.colorThemeClass}}}">
{{/if}} {{/if}}
<div class="stackedit__left"> <div class="stackedit__left">
<div class="stackedit__toc"> <div class="stackedit__toc">
@ -23,7 +33,7 @@
</div> </div>
<div class="stackedit__right"> <div class="stackedit__right">
<div class="stackedit__html"> <div class="stackedit__html">
<div class="{{{files.0.content.themeClass}}}"> <div class="stackedit__content {{{files.0.content.themeClass}}}">
{{{files.0.content.html}}} {{{files.0.content.html}}}
</div> </div>
</div> </div>

View File

@ -7,6 +7,16 @@
<title>{{files.0.name}}</title> <title>{{files.0.name}}</title>
<link rel="stylesheet" href="https://stackedit.cn/style.css" /> <link rel="stylesheet" href="https://stackedit.cn/style.css" />
<style type="text/css"> <style type="text/css">
.app--dark {
background-color: #444;
}
.app--dark .stackedit__html {
padding-left: 0;
padding-right: 0;
}
.app--dark .stackedit__content {
padding: 1px 20px 20px;
}
{{{files.0.content.themeStyleContent}}} {{{files.0.content.themeStyleContent}}}
</style> </style>
</head> </head>
@ -14,10 +24,10 @@
{{#if pdf}} {{#if pdf}}
<body class="stackedit stackedit--pdf"> <body class="stackedit stackedit--pdf">
{{else}} {{else}}
<body class="stackedit"> <body class="stackedit {{{files.0.content.colorThemeClass}}}">
{{/if}} {{/if}}
<div class="stackedit__html"> <div class="stackedit__html">
<div class="{{{files.0.content.themeClass}}}"> <div class="stackedit__content {{{files.0.content.themeClass}}}">
{{{files.0.content.html}}} {{{files.0.content.html}}}
</div> </div>
</div> </div>

View File

@ -73,6 +73,7 @@ export default {
const parsingCtx = markdownConversionSvc.parseSections(converter, content.text); const parsingCtx = markdownConversionSvc.parseSections(converter, content.text);
const conversionCtx = markdownConversionSvc.convert(parsingCtx); const conversionCtx = markdownConversionSvc.convert(parsingCtx);
const html = conversionCtx.htmlSectionList.map(htmlSanitizer.sanitizeHtml).join(''); const html = conversionCtx.htmlSectionList.map(htmlSanitizer.sanitizeHtml).join('');
const colorThemeClass = `app--${store.getters['data/computedSettings'].colorTheme}`;
const themeClass = `preview-theme--${store.state.theme.currPreviewTheme}`; const themeClass = `preview-theme--${store.state.theme.currPreviewTheme}`;
let themeStyleContent = ''; let themeStyleContent = '';
const themeStyleEle = document.getElementById(`preview-theme-${store.state.theme.currPreviewTheme}`); const themeStyleEle = document.getElementById(`preview-theme-${store.state.theme.currPreviewTheme}`);
@ -134,6 +135,7 @@ export default {
yamlProperties: content.properties, yamlProperties: content.properties,
html: containerElt.innerHTML, html: containerElt.innerHTML,
toc, toc,
colorThemeClass,
themeClass, themeClass,
themeStyleContent, themeStyleContent,
}, },

View File

@ -61,7 +61,7 @@
} }
.share-content { .share-content {
margin-top: 60px; padding-top: 50px;
} }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -120,6 +120,7 @@
// 内容 // 内容
const shareContent = document.getElementsByClassName('share-content')[0]; const shareContent = document.getElementsByClassName('share-content')[0];
shareContent.innerHTML = newdoc.body.innerHTML; shareContent.innerHTML = newdoc.body.innerHTML;
document.body.className = newdoc.body.className;
} else if (xhr.status === 403) { } else if (xhr.status === 403) {
const rateLimit = xhr.responseText && xhr.responseText.indexOf('Rate Limit') >= 0; const rateLimit = xhr.responseText && xhr.responseText.indexOf('Rate Limit') >= 0;
const appUri = `${window.location.protocol}//${window.location.host}/app`; const appUri = `${window.location.protocol}//${window.location.host}/app`;

View File

@ -172,7 +172,7 @@ style.innerHTML = "/* 草原绿 caoyuangreen\n \
padding-bottom: 25px;\n \ padding-bottom: 25px;\n \
border-left: none !important;\n \ border-left: none !important;\n \
border: 1px solid #1b900d !important;\n \ border: 1px solid #1b900d !important;\n \
background: #fff;\n \ background: #fff !important;\n \
\n \ \n \
}\n \ }\n \
\n \ \n \

View File

@ -152,6 +152,7 @@ background: rgba(0, 0, 0, 0.05) !important;\n \
\n \ \n \
/* 引用文字 */\n \ /* 引用文字 */\n \
.preview-theme--jikebrack blockquote p {\n \ .preview-theme--jikebrack blockquote p {\n \
margin: 0px;\n \
font-size: 15px;\n \ font-size: 15px;\n \
font-family: -apple-system-font, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif;\n \ font-family: -apple-system-font, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif;\n \
color: rgb(119, 119, 119);\n \ color: rgb(119, 119, 119);\n \

View File

@ -182,6 +182,7 @@ list-style-type: circle;\n \
border-left: 3px solid rgba(0, 0, 0, 0.65) !important;\n \ border-left: 3px solid rgba(0, 0, 0, 0.65) !important;\n \
border-right: 1px solid rgba(0, 0, 0, 0.65) !important;\n \ border-right: 1px solid rgba(0, 0, 0, 0.65) !important;\n \
background: rgb(249, 249, 249) !important;\n \ background: rgb(249, 249, 249) !important;\n \
color: rgba(0,0,0,0.5) !important;\n \
}\n \ }\n \
\n \ \n \
/* 引用文字 */\n \ /* 引用文字 */\n \