From df0e24f273ffbd6febd3f31470ca25a0d49ec07f Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Tue, 6 Jun 2023 22:42:58 +0800 Subject: [PATCH] dark color --- src/styles/theme/dark.scss | 86 +------------------ .../content/article/header/ArticleHeader.vue | 8 +- src/views/technique/components/Aside.vue | 4 +- .../topic/aside/components/TopicAsideNav.vue | 2 +- .../topic/content/components/TopicStatus.vue | 1 + 5 files changed, 11 insertions(+), 90 deletions(-) diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss index 73cd335e..5884588b 100644 --- a/src/styles/theme/dark.scss +++ b/src/styles/theme/dark.scss @@ -1,88 +1,4 @@ html { - // --kungalgame-font-color-0: #9f9f9f; - // --kungalgame-font-color-1: #afafaf; - // --kungalgame-font-color-2: #c2c2c2; - // --kungalgame-font-color-3: #dcdcdc; - // --kungalgame-black: #fff; - // --kungalgame-white: #14171e; - - // --kungalgame-gray-7: #d0d7de; - // --kungalgame-gray-4: #afb8c1; - // --kungalgame-gray-3: #8c959f; - // --kungalgame-gray-2: #424a53; - - // --kungalgame-blue-0: #002155; - // --kungalgame-blue-1: #0a3069; - // --kungalgame-blue-2: #033d8b; - // --kungalgame-blue-3: #0550ae; - // --kungalgame-blue-4: #0969da; - // --kungalgame-blue-5: #218bff; - - // --kungalgame-green-2: #003d16; - // --kungalgame-green-3: #116329; - // --kungalgame-green-4: #1a7f37; - - // --kungalgame-yellow-3: #7d4e00; - // --kungalgame-yellow-4: #9a6700; - - // --kungalgame-orange-2: #762c00; - // --kungalgame-orange-3: #953800; - // --kungalgame-orange-4: #bc4c00; - - // --kungalgame-red-0: #4c0014; - // --kungalgame-red-1: #660018; - // --kungalgame-red-2: #82071e; - // --kungalgame-red-3: #a40e26; - // --kungalgame-red-4: #cf222e; - // --kungalgame-red-5: #fa4549; - // --kungalgame-red-6: #ff8182; - - // --kungalgame-purple-3: #6639ba; - // --kungalgame-purple-4: #8250df; - // --kungalgame-purple-5: #a475f9; - - // --kungalgame-pink-0: #4d0336; - // --kungalgame-pink-3: #99286e; - // --kungalgame-pink-4: #bf3989; - - // /* - - // transparent color - - // */ - - // --kungalgame-trans-white-2: #14171ed9; - // --kungalgame-trans-white-5: #14171e8e; - // /* 这个白色是占位符，不然会导致塌陷 */ - // --kungalgame-trans-white-9: #ffffff00; - - // --kungalgame-trans-gray-1: #24292f77; - // --kungalgame-trans-gray-4: #6e778177; - - // --kungalgame-trans-blue-0: #00215577; - // --kungalgame-trans-blue-1: #0a306977; - // --kungalgame-trans-blue-2: #033d8b77; - // --kungalgame-trans-blue-3: #0550ae77; - // --kungalgame-trans-blue-4: #0969da77; - - // --kungalgame-trans-yellow-0: #3b230077; - - // --kungalgame-trans-orange-1: #5c220077; - - // --kungalgame-trans-red-0: #4c001477; - // --kungalgame-trans-red-1: #66001877; - // --kungalgame-trans-red-2: #82071e77; - // --kungalgame-trans-red-3: #a40e2677; - // --kungalgame-trans-red-4: #cf222e77; - - // --kungalgame-trans-purple-1: #3e1f7977; - // --kungalgame-trans-purple-2: #512a9777; - // --kungalgame-trans-purple-3: #6639ba77; - - // --kungalgame-trans-pink-0: #4d033677; - // --kungalgame-trans-pink-1: #61134777; - // --kungalgame-trans-pink-2: #77205777; - // --shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), // 0 2px 8px hsla(0, 0%, 0%, 0.05); // --kungalgame-shadow-0: 5px 5px 7px var(--kungalgame-trans-gray-4), @@ -102,6 +18,8 @@ html { --kungalgame-trans-white-2: #292d3ed9; --kungalgame-trans-white-5: #1825338e; + --kungalgame-blue-0: #0550ae; + --kungalgame-red-0: #800d2c; --kungalgame-trans-blue-0: #0e162177; diff --git a/src/views/Home/content/article/header/ArticleHeader.vue b/src/views/Home/content/article/header/ArticleHeader.vue index 070dac81..8c1fcfac 100644 --- a/src/views/Home/content/article/header/ArticleHeader.vue +++ b/src/views/Home/content/article/header/ArticleHeader.vue @@ -59,6 +59,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue' /* 交互区距离外面半透明总容器的距离 */ margin-top: 5px; border-bottom: 1px solid var(--kungalgame-trans-blue-4); + color: var(--kungalgame-font-color-3); } /* 筛选、搜索帖子、更多 */ .nav-article-sort-container { @@ -113,10 +114,11 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue' } /* 单个二级菜单 hover */ .sort-submenu > div:hover { - background-color: var(--kungalgame-red-1); + background-color: var(--kungalgame-trans-blue-1); + backdrop-filter: blur(5px); } .sort-submenu > div:active { - background-color: var(--kungalgame-red-2); + background-color: var(--kungalgame-trans-blue-2); } .icon-item { color: var(--kungalgame-font-color-2); @@ -143,7 +145,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue' background-color: var(--kungalgame-trans-white-5); } .nav-article-more-topic:active { - background-color: var(--kungalgame-trans-red-3); + background-color: var(--kungalgame-trans-blue-2); } .all-topic { font-size: 18px; diff --git a/src/views/technique/components/Aside.vue b/src/views/technique/components/Aside.vue index e6c3a271..ad9e830e 100644 --- a/src/views/technique/components/Aside.vue +++ b/src/views/technique/components/Aside.vue @@ -53,8 +53,8 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue' .aside-container { height: 100%; background: linear-gradient( - var(--kungalgame-trans-blue-1), - var(--kungalgame-trans-red-1) + var(--kungalgame-trans-blue-0), + var(--kungalgame-trans-pink-0) ); display: flex; flex-direction: column; diff --git a/src/views/topic/aside/components/TopicAsideNav.vue b/src/views/topic/aside/components/TopicAsideNav.vue index 87f046ae..b764c201 100644 --- a/src/views/topic/aside/components/TopicAsideNav.vue +++ b/src/views/topic/aside/components/TopicAsideNav.vue @@ -50,7 +50,7 @@ const asideNavItem: navItem[] = [ ul { flex-grow: 1; display: flex; - background-color: var(--kungalgame-trans-yellow-0); + background-color: var(--kungalgame-trans-blue-0); display: grid; grid-template-columns: repeat(2, 1fr); & > li { diff --git a/src/views/topic/content/components/TopicStatus.vue b/src/views/topic/content/components/TopicStatus.vue index 9774f653..283ce1dc 100644 --- a/src/views/topic/content/components/TopicStatus.vue +++ b/src/views/topic/content/components/TopicStatus.vue @@ -14,6 +14,7 @@ div { } /* 帖子状态 */ span { + padding: 0 1px; background-color: var(--kungalgame-green-3); color: var(--kungalgame-white); }