Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 更新“明亮”主题样式 #801 #834

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: 更新“明亮”主题样式 #801 #834

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 59 additions & 193 deletions src/sass/themes/light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,46 @@
/** 色值可以参考：https://yeun.github.io/open-color/ */

/** 工具栏样式 */
$toolbarBg: $toolbarBgLight;
$toolbarBtnColor: $toolbarBtnColorLight;
$toolbarBtnBgHover: $toolbarBtnBgHoverLight;
$toolbarBtnHoverColor: $toolbarBtnHoverColorLight;
$toolbarBg: rgb(249, 249, 250);
$toolbarBtnColor: rgb(33, 37, 41);
$toolbarBtnBgHover: rgb(236, 237, 238);
$toolbarBtnHoverColor: rgb(13, 84, 156);
$toolbarColorItemHoverBorderColor: rgb(247, 133, 83);
$sidebarShadow: $shadow;
$sidebarShadow: rgba(0, 0, 0, 0.1);
$toolbarBdColor: rgb(218, 218, 218);
/** 编辑区域样式 */
$editorBg: rgb(255, 255, 255);
$editorColor: rgb(63, 74, 86);
$editorSelectedBg: $toolbarBtnBgHover;
$editorUrlBg: rgb(215, 230, 254);
$editorCursorColor: rgb(0,0,0);
$editorImportantColor: rgb(34, 139, 230);
$editorCodeColor: rgb(77, 171, 247);
$editorBg: rgb(253, 253, 253);
$editorColor: rgb(28, 31, 34);
$editorSelectedBg: rgb(222, 226, 230);
$editorUrlBg: rgb(220, 228, 240);
$editorCursorColor: rgb(0, 0, 0);
$editorCodeColor: rgb(0, 86, 179);
/** 预览区域样式 */
$previewBg: rgb(255, 255, 255);
$previewMobileBgColor: $editorBg;
$previewBg: rgb(253, 253, 253);
$previewMobileBgColor: rgb(248, 249, 250);
$previewSplitLineColor: rgb(225, 227, 230);
/** markdown样式 */
$mdColor: $editorColor;
$mdHeaderColor: $editorImportantColor;
$mdLineColor: rgb(25, 113, 194);
$mdAColor: $editorCodeColor;
$mdAHoverColor: $editorImportantColor;
$mdInlineCodeColor: $editorCodeColor;
$mdInlineCodeBg: $editorUrlBg;
$mdBlockquoteBg: rgb(231, 245, 255);
$mdColor: rgb(35, 36, 37);
$mdHeaderColor: rgb(0, 123, 255);
$mdLineColor: rgb(52, 58, 64);
$mdAColor: rgb(0, 86, 179);
$mdAHoverColor: rgb(0, 123, 255);
$mdInlineCodeColor: rgb(51, 53, 54);
$mdInlineCodeBg: rgb(236, 236, 236);
$mdBlockquoteBg: rgb(230, 230, 230);
/** 编辑器样式 */
.cherry.theme__light {

/** 顶部按钮, 选中文字时弹出的按钮, 光标focus到空行时联想出的按钮, 侧边栏按钮 */
.cherry-toolbar, .cherry-floatmenu, .cherry-bubble, .cherry-sidebar {
.cherry-toolbar {
border-bottom: 1px solid $toolbarBdColor;
}

.cherry-toolbar,
.cherry-floatmenu,
.cherry-bubble,
.cherry-sidebar {
background: $toolbarBg;
border-color: $toolbarBg;
border-color: $toolbarBdColor;
.cherry-toolbar-button {
color: $toolbarBtnColor;
&:hover {
Expand All @@ -52,6 +59,7 @@ $mdBlockquoteBg: rgb(231, 245, 255);
/** 二级菜单 */
.cherry-dropdown {
background: $toolbarBg;
border: 1px solid $toolbarBdColor;
.cherry-dropdown-item {
color: $toolbarBtnColor;
&:hover {
Expand All @@ -67,8 +75,6 @@ $mdBlockquoteBg: rgb(231, 245, 255);
}
/** 色盘里的每一个色块 */
.cherry-color-item {
// width: 15px;
// border: none;
border-color: $toolbarBtnBgHover;
&:hover {
border-color: $toolbarColorItemHoverBorderColor;
Expand All @@ -82,10 +88,6 @@ $mdBlockquoteBg: rgb(231, 245, 255);
.cherry-bubble-bottom {
border-top-color: $toolbarBg;
}
/** 粘贴HTML内容时弹出的选择按钮 */
&.cherry-switch-paste {

}
}

.cherry-editor {
Expand All @@ -96,16 +98,16 @@ $mdBlockquoteBg: rgb(231, 245, 255);
border-left: 1px solid $editorCursorColor;
}
.CodeMirror-scroll {
span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
span,
.cm-variable-2,
.cm-string,
.cm-strong,
.cm-em,
.cm-meta {
color: $editorColor;
}
.cm-image-marker, .cm-quote, .cm-header {
color: $editorImportantColor;
}
.cm-url {
background-color: $editorUrlBg;
}
.cm-comment, .cm-url {
background-color: initial;
color: $editorCodeColor;
}
}
Expand All @@ -117,10 +119,12 @@ $mdBlockquoteBg: rgb(231, 245, 255);

.cherry-sidebar {
box-shadow: $sidebarShadow;
border-left: 1px solid $toolbarBdColor;
}

.cherry-previewer {
background-color: $previewBg;
border-left-color: $previewSplitLineColor;
.cherry-mobile-previewer-content {
background-color: $previewMobileBgColor;
}
Expand All @@ -135,96 +139,39 @@ $mdBlockquoteBg: rgb(231, 245, 255);
}
}
}

}

/** 预览区域样式 */
.cherry-markdown.theme__light {
color: $mdColor;
background-color: $previewBg;

p, div {

}

h1, h2, h3, h4, h5 {
color: $mdHeaderColor;
}

h1 {

}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

h1, h2, h3, h4, h5, h6 {
/** 标题前面的锚点或序号 */
.anchor {

}
}

ul {
&.cherry-list__upper-roman {
list-style: upper-roman;
}

&.cherry-list__lower-greek {
list-style: lower-greek;
}

&.cherry-list__cjk-ideographic {
list-style: cjk-ideographic;
}

&.cherry-list__circle {
list-style: circle;
}

&.cherry-list__square {
list-style: square;
}

&.cherry-list__default {

}

/** checklist 模式，未勾选时 */
.ch-icon-square {

}
/** checklist 模式，勾选时 */
.ch-icon-check {

}
}

ol {
li {

}
}


blockquote {
color: $mdColor;
background-color: $mdBlockquoteBg;
border-color: $mdLineColor;
background-color: rgb(233, 233, 233);
border-width: 5px;
border-radius: 5px;
border-color: rgb(173, 173, 173);
color: rgba($mdColor, 0.8);
}

a {
text-decoration: none;
color: $mdAColor;
Expand All @@ -233,79 +180,29 @@ $mdBlockquoteBg: rgb(231, 245, 255);
color: $mdAHoverColor;
}
}

strong {

}

em {

}

del {

}

sup {

}

sub {

}

hr {
border-color: $mdLineColor;
}

img {

}

video {

}

audio {

}

/** 行内代码 */
p code, li code {
p code,
li code {
background-color: $mdInlineCodeBg;
color: $mdInlineCodeColor;
border: 1px solid $mdLineColor;
padding: 1px 5px;
font-size: 0.8em;
}

/**
* 代码块
*/
pre code {

}

/**
* 表格
*/
table, .cherry-table {

table,
.cherry-table {
color: $mdColor;
th {
background-color: $mdInlineCodeBg;
}
tr, th, td {
tr,
th,
td {
border-color: $mdLineColor;
}
}

/** 可以理解为上下结构的音标，下部是文字，上部是对应的拼音 */
ruby {
/** 上部的拼音 */
rt {

}
}

/** 脚注 */
.footnote {
border-color: $mdLineColor;
.footnote-title {
Expand All @@ -319,35 +216,4 @@ $mdBlockquoteBg: rgb(231, 245, 255);
}
}
}

/** 行间公式 */
.Cherry-InlineMath {

}

/** 段落公式 */
.Cherry-Math {

}

/** 目录 */
.toc {
.toc-title {
}
.toc-li {
.level-1 {

}
.level-2 {

}
.level-3 {

}
a {
&:hover {
}
}
}
}
}
Loading