dark color
This commit is contained in:
KUN1007
parent
f40b50264a
commit
df0e24f273
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ div {
|
|||
}
|
||||
/* 帖子状态 */
|
||||
span {
|
||||
padding: 0 1px;
|
||||
background-color: var(--kungalgame-green-3);
|
||||
color: var(--kungalgame-white);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue