Skip to content

Commit eb81cbf

Browse files
Leaf-0w0Leaf-0w0
committed
style: 将硬编码的颜色值替换为CSS自定义属性
1 parent de2ac99 commit eb81cbf

13 files changed

Lines changed: 66 additions & 47 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,4 @@ src/data/bangumi-data.json
4747

4848
# Bilibili generated data
4949
src/data/bilibili-data.json
50+
/nul

‎src/components/PostMeta.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const {
3737
} = Astro.props;
3838
---
3939

40-
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
40+
<div class:list={["flex flex-wrap text-50 items-center gap-4 gap-x-4 gap-y-2", className]}>
4141
<!-- publish date -->
4242
<div class="flex items-center">
4343
<div class="meta-icon">

‎src/components/Search.svelte‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ onDestroy(() => {
221221
<div
222222
id="search-bar"
223223
class="flex transition-all items-center h-11 rounded-lg absolute right-0 top-0 shrink-0
224-
{isDesktopSearchExpanded ? 'bg-black/4 hover:bg-black/6 focus-within:bg-black/6 dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10' : 'btn-plain active:scale-90'}
224+
{isDesktopSearchExpanded ? 'search-bar-bg' : 'btn-plain active:scale-90'}
225225
{isDesktopSearchExpanded ? 'w-48' : 'w-11'}"
226226
role="button"
227227
tabindex="0"
@@ -233,7 +233,7 @@ onDestroy(() => {
233233
input?.focus();
234234
}}
235235
>
236-
<Icon icon="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none {isDesktopSearchExpanded ? 'left-3' : 'left-1/2 -translate-x-1/2'} transition top-1/2 -translate-y-1/2 {isDesktopSearchExpanded ? 'text-black/30 dark:text-white/30' : ''}"></Icon>
236+
<Icon icon="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none {isDesktopSearchExpanded ? 'left-3' : 'left-1/2 -translate-x-1/2'} transition top-1/2 -translate-y-1/2 {isDesktopSearchExpanded ? 'search-icon-color' : ''}"></Icon>
237237
<input id="search-input-desktop" placeholder={i18n(I18nKey.search)} bind:value={keywordDesktop}
238238
onfocus={() => {
239239
clearTimeout(blurTimer);
@@ -242,7 +242,7 @@ onDestroy(() => {
242242
}}
243243
onblur={handleBlur}
244244
class="transition-all pl-10 text-sm bg-transparent outline-0
245-
h-full {isDesktopSearchExpanded ? 'w-36' : 'w-0'} text-black/50 dark:text-white/50"
245+
h-full {isDesktopSearchExpanded ? 'w-36' : 'w-0'} search-input-color"
246246
>
247247
</div>
248248
</div>
@@ -256,14 +256,11 @@ onDestroy(() => {
256256
<!-- search panel -->
257257
<div id="search-panel" class="float-panel float-panel-closed absolute md:w-120 top-20 left-4 md:left-[unset] right-4 z-50 search-panel shadow-2xl rounded-2xl p-2">
258258
<!-- search bar inside panel for phone/tablet -->
259-
<div id="search-bar-inside" class="flex relative lg:hidden transition-all items-center h-11 rounded-xl
260-
bg-black/4 hover:bg-black/6 focus-within:bg-black/6
261-
dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10
262-
">
263-
<Icon icon="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
259+
<div id="search-bar-inside" class="flex relative lg:hidden transition-all items-center h-11 rounded-xl search-bar-bg">
260+
<Icon icon="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto search-icon-color"></Icon>
264261
<input placeholder={i18n(I18nKey.search)} bind:value={keywordMobile}
265262
class="pl-10 absolute inset-0 text-sm bg-transparent outline-0
266-
focus:w-60 text-black/50 dark:text-white/50"
263+
focus:w-60 search-input-color"
267264
>
268265
</div>
269266
<!-- search results -->
@@ -283,11 +280,22 @@ onDestroy(() => {
283280
</div>
284281

285282
<style>
283+
@reference "../styles/main.css";
284+
286285
input:focus {
287286
outline: 0;
288287
}
289288
:global(.search-panel) {
290289
max-height: calc(100vh - 100px);
291290
overflow-y: auto;
292291
}
292+
.search-bar-bg {
293+
@apply bg-black/4 hover:bg-black/6 focus-within:bg-black/6 dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10;
294+
}
295+
.search-icon-color {
296+
@apply text-black/30 dark:text-white/30;
297+
}
298+
.search-input-color {
299+
@apply text-black/50 dark:text-white/50;
300+
}
293301
</style>

‎src/components/control/ButtonLink.astro‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,8 @@ const { badge, url, label } = Astro.props;
1919
pl-2
2020
hover:pl-3
2121
22-
text-neutral-700
22+
text-75
2323
hover:text-(--primary)
24-
dark:text-neutral-300
25-
dark:hover:text-(--primary)
2624
`
2725
}
2826
>
@@ -32,8 +30,8 @@ const { badge, url, label } = Astro.props;
3230
</div>
3331
{ badge !== undefined && badge !== null && badge !== '' &&
3432
<div class="transition px-2 h-7 ml-4 min-w-8 rounded-lg text-sm font-bold
35-
text-(--btn-content) dark:text-(--deep-text)
36-
bg-[oklch(0.95_0.025_var(--hue))] dark:bg-(--primary)
33+
text-(--btn-content) dark:!text-(--deep-text)
34+
bg-(--btn-plain-bg-hover) dark:!bg-(--primary)
3735
flex items-center justify-center">
3836
{ badge }
3937
</div>

‎src/components/widget/Announcement.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const style = Astro.props.style;
2424
>
2525
<div>
2626
<!-- 公告栏内容 -->
27-
<div class="text-neutral-600 dark:text-neutral-300 leading-relaxed mb-3">
27+
<div class="text-75 leading-relaxed mb-3">
2828
{config.content}
2929
</div>
3030

‎src/components/widget/Calendar.astro‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const yearSuffix = isChinese ? "年" : " ";
4848
>
4949
<div class="flex justify-between items-center mb-2 mt-2">
5050
<div
51-
class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-4 flex items-center
51+
class="font-bold transition text-lg text-90 relative ml-4 flex items-center
5252
before:w-1 before:h-4 before:rounded-md before:bg-(--primary)
5353
before:absolute before:left-[-16px] before:top-[13.5px]"
5454
>
@@ -58,7 +58,7 @@ const yearSuffix = isChinese ? "年" : " ";
5858
>
5959
<span
6060
id="calendar-title"
61-
class="text-lg font-bold text-neutral-900 dark:text-neutral-100 select-none"
61+
class="text-lg font-bold text-90 select-none"
6262
></span>
6363
</div>
6464
</div>
@@ -76,14 +76,14 @@ const yearSuffix = isChinese ? "年" : " ";
7676
</button>
7777
<button
7878
id="prev-month-btn"
79-
class="p-1.5 rounded-md hover:bg-(--btn-plain-bg-hover) text-neutral-600 dark:text-neutral-400 hover:text-(--primary) transition-colors text-xl font-extrabold"
79+
class="p-1.5 rounded-md hover:bg-(--btn-plain-bg-hover) text-75 hover:text-(--primary) transition-colors text-xl font-extrabold"
8080
aria-label="Previous month"
8181
>
8282
＜
8383
</button>
8484
<button
8585
id="next-month-btn"
86-
class="p-1.5 rounded-md hover:bg-(--btn-plain-bg-hover) text-neutral-600 dark:text-neutral-400 hover:text-(--primary) transition-colors text-xl font-extrabold"
86+
class="p-1.5 rounded-md hover:bg-(--btn-plain-bg-hover) text-75 hover:text-(--primary) transition-colors text-xl font-extrabold"
8787
aria-label="Next month"
8888
>
8989
＞
@@ -95,7 +95,7 @@ const yearSuffix = isChinese ? "年" : " ";
9595
<div class="grid grid-cols-7 gap-1 mb-2">
9696
{
9797
weekDays.map((day) => (
98-
<div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium py-1">
98+
<div class="text-center text-xs text-50 font-medium py-1">
9999
{day}
100100
</div>
101101
))
@@ -104,7 +104,7 @@ const yearSuffix = isChinese ? "年" : " ";
104104
<div id="calendar-grid" class="grid grid-cols-7 gap-1"></div>
105105
<div id="calendar-posts" class="mt-4">
106106
<div
107-
class="h-px w-full bg-neutral-200 dark:bg-neutral-700 mb-2 hidden"
107+
class="h-px w-full bg-(--line-divider) mb-2 hidden"
108108
id="calendar-posts-divider"
109109
>
110110
</div>
@@ -319,9 +319,9 @@ const yearSuffix = isChinese ? "年" : " ";
319319
if (shouldShowReset) dom.backTodayBtn.classList.remove("invisible");
320320
else dom.backTodayBtn.classList.add("invisible");
321321

322-
const isDayView = currentView === "day";
323-
dom.prevBtn.style.visibility = isDayView ? "visible" : "hidden";
324-
dom.nextBtn.style.visibility = isDayView ? "visible" : "hidden";
322+
// const isDayView = currentView === "day";
323+
// dom.prevBtn.style.visibility = isDayView ? "visible" : "hidden";
324+
// dom.nextBtn.style.visibility = isDayView ? "visible" : "hidden";
325325
}
326326

327327
function renderCalendar() {
@@ -351,7 +351,7 @@ const yearSuffix = isChinese ? "年" : " ";
351351
const isSelected = selectedDateKey === dateKey;
352352

353353
let bgClass =
354-
"hover:bg-(--btn-plain-bg-hover) text-neutral-700 dark:text-neutral-300 border border-transparent";
354+
"hover:bg-(--btn-plain-bg-hover) text-75 border border-transparent";
355355

356356
if (isSelected) {
357357
bgClass =
@@ -361,7 +361,7 @@ const yearSuffix = isChinese ? "年" : " ";
361361
"text-(--primary) font-bold bg-(--primary)/10 border border-(--primary)";
362362
} else if (hasPost) {
363363
bgClass =
364-
"font-bold text-neutral-900 dark:text-neutral-100 hover:bg-(--btn-plain-bg-hover) border border-transparent";
364+
"font-bold text-90 hover:bg-(--btn-plain-bg-hover) border border-transparent";
365365
}
366366

367367
html += `

‎src/components/widget/DisplaySettings.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $: if (isMounted && (hue || hue === 0)) {
2626

2727
<div id="display-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4">
2828
<div class="flex flex-row gap-2 mb-3 items-center justify-between">
29-
<div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
29+
<div class="flex gap-2 font-bold text-lg text-90 transition relative ml-3
3030
before:w-1 before:h-4 before:rounded-md before:bg-(--primary)
3131
before:absolute before:-left-3 before:top-[0.33rem]"
3232
>

‎src/components/widget/DropdownMenu.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const hasChildren = children.length > 0;
7373
? "noopener noreferrer"
7474
: null
7575
}
76-
class="dropdown-item flex items-center justify-between px-4 py-2.5 text-black/75 dark:text-white/75 hover:text-[var(--primary)] hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-150 font-medium rounded-lg"
76+
class="dropdown-item flex items-center justify-between px-4 py-2.5 hover:text-[var(--primary)] hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-150 font-medium rounded-lg"
7777
aria-label={child.name}
7878
>
7979
<div class="flex items-center">

‎src/components/widget/NavMenuPanel.astro‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const processedLinks: ProcessedNavBarLink[] = Astro.props.links.map(
6666
data-mobile-dropdown-trigger
6767
aria-expanded="false"
6868
>
69-
<div class="flex items-center transition text-black/75 dark:text-white/75 font-bold">
69+
<div class="flex items-center transition nav-item-text font-bold">
7070
{link.icon && <Icon name={link.icon} class="text-[1.1rem] mr-2" />}
7171
{getLocalizedName(link.name)}
7272
</div>
@@ -81,12 +81,12 @@ const processedLinks: ProcessedNavBarLink[] = Astro.props.links.map(
8181
hover:bg-(--btn-plain-bg-hover) active:bg-(--btn-plain-bg-active) transition"
8282
target={child.external ? "_blank" : null}
8383
>
84-
<div class="flex items-center transition text-black/60 dark:text-white/60 font-medium">
84+
<div class="flex items-center transition nav-subitem-text font-medium">
8585
{child.icon && <Icon name={child.icon} class="text-[1.1rem] mr-2" />}
8686
{getLocalizedName(child.name)}
8787
</div>
8888
{child.external && <Icon name="fa7-solid:arrow-up-right-from-square"
89-
class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1"
89+
class="transition text-[0.75rem] nav-arrow -translate-x-1"
9090
/>}
9191
</a>
9292
))}
@@ -99,15 +99,15 @@ const processedLinks: ProcessedNavBarLink[] = Astro.props.links.map(
9999
"
100100
target={link.external ? "_blank" : null}
101101
>
102-
<div class="flex items-center transition text-black/75 dark:text-white/75 font-bold">
102+
<div class="flex items-center transition nav-item-text font-bold">
103103
{link.icon && <Icon name={link.icon} class="text-[1.1rem] mr-2" />}
104104
{getLocalizedName(link.name)}
105105
</div>
106106
{!link.external && <Icon name="material-symbols:chevron-right-rounded"
107107
class="transition text-[1.25rem] text-(--primary)"
108108
/>}
109109
{link.external && <Icon name="fa7-solid:arrow-up-right-from-square"
110-
class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1"
110+
class="transition text-[0.75rem] nav-arrow -translate-x-1"
111111
/>}
112112
</a>
113113
)}
@@ -116,7 +116,7 @@ const processedLinks: ProcessedNavBarLink[] = Astro.props.links.map(
116116
</div>
117117

118118
<style>
119-
@reference "tailwindcss";
119+
@reference "../../styles/main.css";
120120

121121
.mobile-submenu {
122122
@apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out;
@@ -129,6 +129,18 @@ const processedLinks: ProcessedNavBarLink[] = Astro.props.links.map(
129129
.mobile-dropdown[data-expanded="true"] .mobile-dropdown-arrow {
130130
@apply rotate-180;
131131
}
132+
133+
.nav-item-text {
134+
@apply text-black/75 dark:text-white/75;
135+
}
136+
137+
.nav-subitem-text {
138+
@apply text-black/60 dark:text-white/60;
139+
}
140+
141+
.nav-arrow {
142+
@apply text-black/25 dark:text-white/25;
143+
}
132144
</style>
133145

134146
<script>

‎src/components/widget/SiteStats.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,21 +125,21 @@ const stats = [
125125
<div class="text-(--primary) text-xl shrink-0">
126126
<Icon name={stat.icon} />
127127
</div>
128-
<span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm wrap-break-word leading-tight">
128+
<span class="text-75 font-medium text-sm wrap-break-word leading-tight">
129129
{stat.label}
130130
</span>
131131
</div>
132132
<div class="flex items-center ml-3 shrink-0">
133133
<span
134-
class="text-base font-bold text-neutral-900 dark:text-neutral-100"
134+
class="text-base font-bold text-90"
135135
data-stat-id={stat.id}
136136
>
137137
{stat.formatted
138138
? formatNumber(stat.value)
139139
: stat.value}
140140
</span>
141141
{stat.suffix && (
142-
<span class="text-sm text-neutral-500 dark:text-neutral-400 ml-1">
142+
<span class="text-sm text-50 ml-1">
143143
{stat.suffix}
144144
</span>
145145
)}

0 commit comments

Comments
 (0)