Skip to content

Commit

Permalink
style: 主题样式优化 (#7037)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lan-yonghui
lan-yonghui authored Nov 13, 2024
1 parent 911b407 commit 6e690cc
Show file tree
Hide file tree
Showing 11 changed files with 259 additions and 103 deletions.
18 changes: 9 additions & 9 deletions frontend/src/components/system-upgrade/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
<div>
<div class="flex w-full flex-col gap-2 md:flex-row items-center">
<div class="flex flex-wrap items-center" v-if="props.footer">
<el-button type="primary" link @click="toForum">
<el-link type="primary" :underline="false" @click="toForum">
<span class="font-normal">{{ $t('setting.forum') }}</span>
</el-button>
</el-link>
<el-divider direction="vertical" />
<el-button type="primary" link @click="toDoc">
<el-link type="primary" :underline="false" @click="toDoc">
<span class="font-normal">{{ $t('setting.doc2') }}</span>
</el-button>
</el-link>
<el-divider direction="vertical" />
<el-button type="primary" link @click="toGithub">
<el-link type="primary" :underline="false" @click="toGithub">
<span class="font-normal">{{ $t('setting.project') }}</span>
</el-button>
</el-link>
<el-divider v-if="!mobile" direction="vertical" />
</div>
<div class="flex flex-wrap items-center">
Expand All @@ -27,14 +27,14 @@
（{{ $t('setting.hasNewVersion') }}）
</el-link>
</el-badge>
<el-button
<el-link
v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
type="primary"
link
:underline="false"
@click="onLoadUpgradeInfo"
>
（{{ $t('setting.upgradeCheck') }}）
</el-button>
</el-link>
<el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">
{{ $t('setting.upgrading') }}
</el-tag>
Expand Down
21 changes: 21 additions & 0 deletions frontend/src/styles/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,3 +464,24 @@ html {
.monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
background-color: #111417;
}
.check-label{
background: var(--panel-main-bg-color-10) !important;
.check-label-a {
color: var(--panel-color-primary);
}
}
.check-content {
background: var(--panel-main-bg-color-10);
pre {
margin: 0;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
}
}


.el-descriptions {
overflow: hidden;
text-overflow: ellipsis;
}
148 changes: 131 additions & 17 deletions frontend/src/styles/element-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,24 @@ html.dark {
--panel-main-bg-color-9: #2E313D;
--panel-main-bg-color-10: #242633;
--panel-main-bg-color-11: #60626F;
--panel-main-bg-color-12: #000000;

--panel-alert-error-bg-color: #54293A;
--panel-alert-error-text-color: #E2324F;
--panel-alert-error-bg-color: #fef0f0;
--panel-alert-error-text-color: #f56c6c;
--panel-alert-error-hover-bg-color: #E9657B;

--panel-alert-success-bg-color: #1E5146;
--panel-alert-success-text-color: #11B671;
--panel-alert-success-bg-color: #e1f3d8;
--panel-alert-success-text-color: #67c23a;
--panel-alert-success-hover-bg-color: #4DC894;

--panel-alert-warning-bg-color: #59472A;
--panel-alert-warning-text-color: #EDAC2C;
--panel-alert-warning-hover-bg-color: #F1C161;

--panel-alert-info-bg-color: var(--panel-main-bg-color-7);
--panel-alert-info-text-color: var(--panel-text-color-white);
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);

--el-color-success: #3fb950;
--el-color-success-light-5: #4DC894;
--el-color-success-light-8: #3fb950;
Expand All @@ -55,14 +60,11 @@ html.dark {
--el-color-error-light-8: #E2324F;
--el-color-error-light-9: #54293A;

--el-color-info: var(--panel-text-color-white);
--el-color-info: var(--panel-main-bg-color-2);
--el-color-info-light-5: var(--panel-main-bg-color-3);
--el-color-info-light-8: var(--panel-text-color-white);
--el-color-info-light-8: var(--panel-color-primary);
--el-color-info-light-9: var(--panel-main-bg-color-8);

--panel-alert-info-bg-color: var(--panel-main-bg-color-8);
--panel-alert-info-text-color: var(--panel-text-color-white);
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);

--panel-pie-bg-color: #434552;
--panel-text-color-white: #ffffff;
Expand All @@ -78,7 +80,8 @@ html.dark {
--el-scrollbar-bg-color: var(--panel-main-bg-color-8);
--el-border-color-darker: var(--panel-main-bg-color-6);

--panel-border: 2px solid var(--panel-main-bg-color-8);
--panel-border: 1px solid var(--panel-main-bg-color-8);
--panel-border-color: var(--panel-main-bg-color-8);
--panel-button-active: var(--panel-main-bg-color-10);
--panel-button-text-color: var(--panel-main-bg-color-10);
--panel-button-bg-color: var(--panel-color-primary);
Expand Down Expand Up @@ -113,6 +116,9 @@ html.dark {

--el-text-color-placeholder: var(--panel-main-bg-color-4);

.el-radio-button {
--el-radio-button-checked-text-color: var(--panel-main-bg-color-10);
}
.el-descriptions__content:not(.is-bordered-label) {
color: var(--panel-main-bg-color-3);
}
Expand Down Expand Up @@ -180,21 +186,52 @@ html.dark {
}

.el-button--primary {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-link-text-color: var(--panel-color-primary-light-1);
&.tag-button,
&.brief-button {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-text-color: var(--el-color-white);
--el-button-hover-border-color:var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
}

&.app-button {
--el-button-text-color: var(--el-color-primary);
}

&.h-app-button {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-text-color: var(--el-color-white);
--el-button-hover-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
}
}

.el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link {
--el-button-text-color: var(--panel-main-bg-color-2);
--el-button-bg-color: var(--panel-main-bg-color-9);
--el-button-border-color: var(--panel-main-bg-color-8);
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
--el-button-hover-border-color: var(--panel-main-bg-color-8);
}

.el-button--primary.is-text,.el-button--primary.is-link {
--el-button-text-color: var(--panel-color-primary);
}

.el-button--primary:hover {
--el-button-hover-text-color: var(--panel-text-color-white);
--el-button-border-color: var(--el-color-primary-light-3);
--el-button-hover-bg-color: var(--el-color-primary-light-3);
--el-button-hover-border-color: var(--el-color-primary-light-3);
--el-button-hover-text-color: var(--panel-main-bg-color-2);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
--el-button-hover-border-color: var(--panel-main-bg-color-8);
}

.el-button--primary.is-plain:hover {
--el-button-hover-text-color: var(--panel-main-bg-color-10);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
--el-button-hover-border-color: var(--el-color-primary);
}

.el-button--primary:active {
Expand Down Expand Up @@ -231,7 +268,7 @@ html.dark {
}

.el-dialog {
background-color: var(--panel-main-bg-color-8);
background-color: var(--panel-main-bg-color-9);
border: 1px solid var(--panel-border-color);

.el-dialog__header {
Expand Down Expand Up @@ -265,15 +302,24 @@ html.dark {
}

.md-editor-dark {
--md-bk-color: var(--panel-main-bg-color-8);
--md-bk-color: var(--panel-main-bg-color-9);
}

.md-editor-dark .md-editor-preview {
--md-theme-color: var(--el-text-color-primary);
}

.md-editor-dark .default-theme a {
--md-theme-link-color: var(--el-color-primary);
}

.md-editor-dark .default-theme pre code {
background-color: var(--panel-main-bg-color-8);
}
.md-editor-dark .default-theme pre:before {
background-color: var(--panel-main-bg-color-10);
}

.el-descriptions__title {
color: var(--el-text-color-primary);
}
Expand All @@ -297,12 +343,20 @@ html.dark {
box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
border: 0.5px solid var(--panel-main-bg-color-7);
}
.el-drawer {
.cm-editor {
background-color: var(--panel-main-bg-color-10);
}
.cm-gutters {
background-color: var(--panel-main-bg-color-10);
}
}

.cm-editor {
background-color: var(--panel-main-bg-color-9);
}
.cm-gutters {
background-color: var(--panel-main-bg-color-8);
background-color: var(--panel-main-bg-color-9);
}

// scroll-bar
Expand All @@ -312,6 +366,9 @@ html.dark {
::-webkit-scrollbar-thumb {
background-color: var(--el-border-color-darker);
}
::-webkit-scrollbar-corner {
background-color: var(--el-scrollbar-bg-color);
}

.app-warn {
span {
Expand All @@ -325,4 +382,61 @@ html.dark {
}
}

.el-table {
--el-table-bg-color: var(--el-bg-color);
--el-table-tr-bg-color: var(--el-bg-color);
--el-table-header-bg-color: var(--el-bg-color);
--el-table-border: 1px solid var(--panel-main-bg-color-8);
--el-table-border-color: var(--panel-main-bg-color-8);
}

.el-message-box {
--el-messagebox-title-color: var(--el-menu-text-color);
border: 1px solid var(--panel-border-color);
}

.el-popover {
--el-popover-title-text-color: var(--panel-main-bg-color-2);
border: 1px solid var(--panel-border-color);
}

.app-wrapper {
.main-container {
background-color: var(--panel-main-bg-color-9) !important;
}
.app-footer {
background-color: var(--panel-main-bg-color-9) !important;
border-top: var(--panel-border);
}
.mobile-header {
background-color: var(--panel-main-bg-color-9) !important;
border-bottom: var(--panel-border);
color: #ffffff;
}
}

.router_card_button {
.el-radio-button__inner {
background: none !important;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: var(--panel-main-bg-color-10);
background-color: var(--panel-color-primary) !important;
box-shadow: none !important;
border: none !important;
}
}

.el-date-table td.in-range .el-date-table-cell {
background-color: var(--panel-main-bg-color-8);
}

.el-collapse-item__header {
color: #ffffff;
background-color: var(--panel-main-bg-color-10) !important;
}

.el-loading-mask {
background-color: rgba(36, 38, 51, 0.8);
}
}
7 changes: 6 additions & 1 deletion frontend/src/views/app-store/detail/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ defineExpose({
});
</script>

<style lang="scss">
<style lang="scss" scoped>
.brief {
.name {
span {
Expand All @@ -183,6 +183,7 @@ defineExpose({
.icon {
width: 180px;
height: 180px;
background-color: #ffffff;
}
.version {
Expand All @@ -196,4 +197,8 @@ defineExpose({
}
}
}
:deep(.md-editor-dark) {
background-color: var(--panel-main-bg-color-9);
}
</style>
17 changes: 12 additions & 5 deletions frontend/src/views/app-store/installed/check/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="40%" :close-on-click-modal="false">
<el-row>
<el-col :span="20" :offset="2" v-if="open">
<el-alert
Expand All @@ -9,11 +9,18 @@
show-icon
:closable="false"
/>
<br />
<el-descriptions border :column="1">
<el-descriptions-item v-for="(item, key) in map" :key="key">
<el-descriptions :column="1" border>
<el-descriptions-item
v-for="(item, key) in map"
:key="key"
label-class-name="check-label"
class-name="check-content"
min-width="60px"
>
<template #label>
<a href="javascript:void(0);" @click="toPage(item[0])">{{ $t('app.' + item[0]) }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toPage(item[0])">
{{ $t('app.' + item[0]) }}
</a>
</template>
<span class="resources">
{{ map.get(item[0]).toString() }}
Expand Down
Loading

0 comments on commit 6e690cc

Please sign in to comment.