hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

feat: editor theme

Browse source
This commit is contained in:
KUN1007 2023-09-06 23:08:59 +08:00
parent 44eec62d59
commit 3160438092
4 changed files with 89 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -46,6 +46,8 @@
"vueup", "vueup",
"weixin", "weixin",
"ymgal", "ymgal",
"Yuki",
"Yuuki",
"yuyu" "yuyu"
], ],
"i18n-ally.localesPaths": ["src/language"], "i18n-ally.localesPaths": ["src/language"],

7
src/components/quill-editor/EditorSettingsMenu.vue
View file

@ -14,7 +14,7 @@ import { storeToRefs } from 'pinia'
// 使用编辑界面的 store // 使用编辑界面的 store
const settingsStore = useKUNGalgameEditStore() const settingsStore = useKUNGalgameEditStore()
const { isShowAdvance } = storeToRefs(settingsStore) const { mode } = storeToRefs(settingsStore)
const { editorHeight } = storeToRefs(useKUNGalgameEditStore()) const { editorHeight } = storeToRefs(useKUNGalgameEditStore())
@ -26,9 +26,6 @@ defineProps<{
const isRefreshPage = ref(false) const isRefreshPage = ref(false)
// 点击高级选项时提醒用户刷新页面 // 点击高级选项时提醒用户刷新页面
watch(isShowAdvance, () => {
isRefreshPage.value = !isRefreshPage.value
})
const handleRefreshPage = () => location.reload() const handleRefreshPage = () => location.reload()
</script> </script>
@ -61,7 +58,7 @@ const handleRefreshPage = () => location.reload()
<div class="editor-advance-title"> <div class="editor-advance-title">
<div class="editor-advance"> <div class="editor-advance">
<Transition mode="out-in" name="slide-up"> <Transition mode="out-in" name="slide-up">
<span v-if="!isRefreshPage"> 高级编辑模式 </span> <span v-if="!isRefreshPage"> 编辑器模式 </span>
<span <span
@click="handleRefreshPage" @click="handleRefreshPage"
class="refresh" class="refresh"

94
src/components/quill-editor/QuillEditor.vue
View file

@ -100,12 +100,6 @@ const handleTextChange = () => {
<!-- 话题 title --> <!-- 话题 title -->
<Title v-if="isShowTitle" /> <Title v-if="isShowTitle" />
<div class="hint hint1" v-if="isShowSettings">
<span class="box1"></span>
<span class="filling"></span>
<span class="box2"></span>
</div>
<!-- 编辑器主体 --> <!-- 编辑器主体 -->
<QuillEditor <QuillEditor
ref="editorRef" ref="editorRef"
@ -113,19 +107,13 @@ const handleTextChange = () => {
:content="valueHtml" :content="valueHtml"
:style="editorHeightStyle" :style="editorHeightStyle"
:theme="theme" :theme="theme"
:toolbar="mode" toolbar="full"
:options="editorOptions" :options="editorOptions"
@textChange="handleTextChange" @textChange="handleTextChange"
@ready="onEditorReady" @ready="onEditorReady"
@click.prevent @click.prevent
/> />
<div class="hint" v-if="isShowSettings">
<span class="box3"></span>
<span class="filling"></span>
<span class="box4"></span>
</div>
<!-- 编辑器 footer --> <!-- 编辑器 footer -->
<EditorFooter <EditorFooter
:textCount="textCount" :textCount="textCount"
@ -143,65 +131,53 @@ const handleTextChange = () => {
/* 工具栏的样式 */ /* 工具栏的样式 */
:deep(.ql-toolbar) { :deep(.ql-toolbar) {
border: none; border-top: 1px solid var(--kungalgame-blue-1);
border-bottom: 1px solid var(--kungalgame-blue-1);
background-color: var(--kungalgame-trans-blue-0);
/* 头部下方阴影 */
box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
} }
/* 编辑器体的样式 */ /* 编辑器体的样式 */
:deep(.ql-container) { :deep(.ql-container) {
transition: all 0.2s;
width: 80%; width: 80%;
max-width: 1080px;
border: none; border: none;
margin: 0 auto; margin: 0 auto;
margin-top: 40px;
font-size: 17px; font-size: 17px;
margin-top: 40px;
margin-bottom: 40px;
&::before {
content: '∟';
position: absolute;
font-size: 40px;
transform: translateX(-20px) translateY(-20px) rotate(90deg);
color: var(--kungalgame-blue-2);
}
&::after {
content: '∟';
position: absolute;
right: 0;
font-size: 40px;
transform: translateX(20px) translateY(-20px) rotate(-90deg);
color: var(--kungalgame-blue-2);
}
.ql-editor { .ql-editor {
padding: 0; padding: 0;
&::before { &::before {
left: 0; left: 0;
} }
} &::after {
} content: '♡ Yuki Yuki';
font-size: 22px;
/* 提示线 */
.hint {
margin: 0 auto;
width: 100%;
height: 30px;
display: flex;
justify-content: center;
border-bottom: none;
border-top: none;
& > span {
width: 30px;
height: 100%;
border: 1.5px solid var(--kungalgame-blue-2);
}
.filling {
border: none;
max-width: 1080px;
width: 80%;
}
.box1 {
border-top: none;
border-left: none;
}
.box2 {
border-top: none;
border-right: none;
}
.box3 {
border-bottom: none;
border-left: none;
}
.box4 {
border-bottom: none;
border-right: none;
}
}
.hint1 {
margin-top: 10px;
position: absolute; position: absolute;
width: 80%; bottom: 0;
top: 200px; transform: translateX(-20px) translateY(27px);
color: var(--kungalgame-trans-white-5);
text-shadow: 1px 1px 1px var(--kungalgame-blue-2);
font-style: oblique;
}
}
} }
</style> </style>

89
src/styles/editor/editor.snow.scss
View file

@ -1,7 +1,7 @@
.ql-container { .ql-container {
box-sizing: border-box; box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 17px;
height: 100%; height: 100%;
margin: 0px; margin: 0px;
position: relative; position: relative;
@ -75,7 +75,7 @@
} }
.ql-editor ul[data-checked='true'] > li::before, .ql-editor ul[data-checked='true'] > li::before,
.ql-editor ul[data-checked='false'] > li::before { .ql-editor ul[data-checked='false'] > li::before {
color: #777; color: var(--kungalgame-font-color-0);
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
@ -380,8 +380,9 @@
.ql-editor .ql-align-right { .ql-editor .ql-align-right {
text-align: right; text-align: right;
} }
/* placeholder 的颜色 */
.ql-editor.ql-blank::before { .ql-editor.ql-blank::before {
color: rgba(0, 0, 0, 0.6); color: var(--kungalgame-font-color-0);
content: attr(data-placeholder); content: attr(data-placeholder);
font-style: italic; font-style: italic;
left: 15px; left: 15px;
@ -429,7 +430,7 @@
.ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover { .ql-snow .ql-toolbar .ql-picker-item:hover {
background-color: #f3f4f6; background-color: var(--kungalgame-trans-blue-1);
} }
.ql-snow.ql-toolbar button.ql-active, .ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active,
@ -437,8 +438,8 @@
.ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected { .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
background-color: #dbeafe; background-color: var(--kungalgame-blue-0);
color: #2563eb; color: var(--kungalgame-blue-4);
} }
.ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill,
@ -452,7 +453,7 @@
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
fill: #2563eb; fill: var(--kungalgame-blue-4);
} }
.ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke,
@ -466,24 +467,25 @@
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
stroke: #2563eb; stroke: var(--kungalgame-blue-4);
} }
/* 未知属性，貌似和鼠标有关 */
@media (pointer: coarse) { @media (pointer: coarse) {
.ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow.ql-toolbar button:hover:not(.ql-active),
.ql-snow .ql-toolbar button:hover:not(.ql-active) { .ql-snow .ql-toolbar button:hover:not(.ql-active) {
color: #4b5563; color: var(--kungalgame-blue-4);
} }
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
fill: #4b5563; fill: var(--kungalgame-blue-4);
} }
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
stroke: #4b5563; stroke: var(--kungalgame-blue-4);
} }
} }
.ql-snow { .ql-snow {
@ -519,22 +521,23 @@
content: ''; content: '';
display: table; display: table;
} }
/* toolbar 图标的颜色 */
.ql-snow .ql-stroke { .ql-snow .ql-stroke {
fill: none; fill: none;
stroke: #4b5563; stroke: var(--kungalgame-font-color-1);
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
stroke-width: 2; stroke-width: 2;
} }
.ql-snow .ql-stroke-miter { .ql-snow .ql-stroke-miter {
fill: none; fill: none;
stroke: #4b5563; stroke: var(--kungalgame-font-color-1);
stroke-miterlimit: 10; stroke-miterlimit: 10;
stroke-width: 2; stroke-width: 2;
} }
.ql-snow .ql-fill, .ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill { .ql-snow .ql-stroke.ql-fill {
fill: #4b5563; fill: var(--kungalgame-blue-4);
} }
.ql-snow .ql-empty { .ql-snow .ql-empty {
fill: none; fill: none;
@ -579,15 +582,17 @@
.ql-snow .ql-editor a { .ql-snow .ql-editor a {
text-decoration: underline; text-decoration: underline;
} }
/* 引用的颜色 */
.ql-snow .ql-editor blockquote { .ql-snow .ql-editor blockquote {
border-left: 4px solid #ccc; border-left: 4px solid var(--kungalgame-blue-2);
background-color: var(--kungalgame-trans-blue-0);
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px; margin-top: 5px;
padding-left: 16px; padding-left: 16px;
} }
.ql-snow .ql-editor code, .ql-snow .ql-editor code,
.ql-snow .ql-editor pre { .ql-snow .ql-editor pre {
background-color: #f0f0f0;
border-radius: 3px; border-radius: 3px;
} }
.ql-snow .ql-editor pre { .ql-snow .ql-editor pre {
@ -600,19 +605,21 @@
font-size: 85%; font-size: 85%;
padding: 2px 4px; padding: 2px 4px;
} }
/* 代码块颜色 */
.ql-snow .ql-editor pre.ql-syntax { .ql-snow .ql-editor pre.ql-syntax {
background-color: #23241f; background-color: var(--kungalgame-trans-blue-0);
color: #f8f8f2; border: 1px solid var(--kungalgame-blue-4);
overflow: visible; overflow: visible;
} }
.ql-snow .ql-editor img { .ql-snow .ql-editor img {
max-width: 100%; max-width: 100%;
} }
/* 展开列表的颜色 */
.ql-snow .ql-picker { .ql-snow .ql-picker {
color: #4b5563; color: var(--kungalgame-blue-4);
display: inline-block; display: inline-block;
float: left; float: left;
font-size: 14px; font-size: 17px;
font-weight: 500; font-weight: 500;
height: 24px; height: 24px;
position: relative; position: relative;
@ -634,7 +641,7 @@
line-height: 22px; line-height: 22px;
} }
.ql-snow .ql-picker-options { .ql-snow .ql-picker-options {
background-color: #fff; background-color: var(--kungalgame-trans-white-2);
display: none; display: none;
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
@ -646,14 +653,14 @@
padding: 5px 8px; padding: 5px 8px;
} }
.ql-snow .ql-picker.ql-expanded .ql-picker-label { .ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #d1d5db; color: var(--kungalgame-blue-4);
z-index: 2; z-index: 2;
} }
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #d1d5db; fill: var(--kungalgame-blue-1);
} }
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #d1d5db; stroke: var(--kungalgame-blue-4);
} }
.ql-snow .ql-picker.ql-expanded .ql-picker-options { .ql-snow .ql-picker.ql-expanded .ql-picker-options {
display: block; display: block;
@ -820,13 +827,13 @@
font-size: 32px; font-size: 32px;
} }
.ql-snow .ql-color-picker.ql-background .ql-picker-item { .ql-snow .ql-color-picker.ql-background .ql-picker-item {
background-color: #fff; background-color: var(--kungalgame-trans-white-2);
} }
.ql-snow .ql-color-picker.ql-color .ql-picker-item { .ql-snow .ql-color-picker.ql-color .ql-picker-item {
background-color: #000; background-color: var(--kungalgame-trans-white-2);
} }
.ql-toolbar.ql-snow { .ql-toolbar.ql-snow {
border: 1px solid #d1d5db; border: 1px solid var(--kungalgame-blue-1);
box-sizing: border-box; box-sizing: border-box;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding: 8px; padding: 8px;
@ -839,26 +846,29 @@
} }
.ql-toolbar.ql-snow .ql-picker-options { .ql-toolbar.ql-snow .ql-picker-options {
border: 1px solid transparent; border: 1px solid transparent;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; box-shadow: var(--shadow);
} }
/* 选中列表的样式 */
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
border-color: #d1d5db; background-color: var(--kungalgame-trans-blue-1);
} }
/* 选中列表的展开选项样式 */
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #d1d5db; border-color: var(--kungalgame-blue-1);
} }
/* 选中颜色的边框颜色 */
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
border-color: #000; border-color: var(--kungalgame-blue-4);
} }
.ql-toolbar.ql-snow + .ql-container.ql-snow { .ql-toolbar.ql-snow + .ql-container.ql-snow {
border-top: 0px; border-top: 0px;
} }
.ql-snow .ql-tooltip { .ql-snow .ql-tooltip {
background-color: #fff; background-color: var(--kungalgame-trans-white-2);
border: 1px solid #d1d5db; border: 1px solid var(--kungalgame-blue-1);
box-shadow: 0px 0px 5px #d1d5db; box-shadow: var(--shadow);
color: #4b5563; color: var(--kungalgame-font-color-1);
padding: 5px 12px; padding: 5px 12px;
white-space: nowrap; white-space: nowrap;
} }
@ -869,7 +879,8 @@
} }
.ql-snow .ql-tooltip input[type='text'] { .ql-snow .ql-tooltip input[type='text'] {
display: none; display: none;
border: 1px solid #d1d5db; border: 1px solid var(--kungalgame-blue-1);
background-color: var(--kungalgame-trans-white-9);
font-size: 13px; font-size: 13px;
height: 26px; height: 26px;
margin: 0px; margin: 0px;
@ -884,7 +895,7 @@
vertical-align: top; vertical-align: top;
} }
.ql-snow .ql-tooltip a.ql-action::after { .ql-snow .ql-tooltip a.ql-action::after {
border-right: 1px solid #d1d5db; border-right: 1px solid var(--kungalgame-blue-1);
content: 'Edit'; content: 'Edit';
margin-left: 16px; margin-left: 16px;
padding-right: 8px; padding-right: 8px;
@ -918,8 +929,8 @@
content: 'Enter video:'; content: 'Enter video:';
} }
.ql-snow a { .ql-snow a {
color: #2563eb; color: var(--kungalgame-blue-4);
} }
.ql-container.ql-snow { .ql-container.ql-snow {
border: 1px solid #d1d5db; border: 1px solid var(--kungalgame-blue-1);
} }