Skip to content

Commit 12adfdc

Browse files
JingMatrixJingMatrix
committed
Move CSS rules out of cascade layers
See docs at https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
1 parent 18cad8a commit 12adfdc

File tree

5 files changed

+84
-87
lines changed

5 files changed

+84
-87
lines changed

‎components/ChromeXt/manager.vue

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,16 @@ onMounted(() => {
8181

8282
<style lang="postcss" scoped>
8383
@reference "tailwindcss/theme.css";
84-
@tailwind base;
8584
86-
@layer base {
87-
h1 {
88-
@apply text-center text-2xl py-8;
89-
}
85+
h1 {
86+
@apply text-center text-2xl py-8;
87+
}
9088
91-
p {
92-
@apply px-2 indent-2;
93-
}
89+
p {
90+
@apply px-2 indent-2;
91+
}
9492
95-
a {
96-
@apply text-violet-400;
97-
}
93+
a {
94+
@apply text-violet-400;
9895
}
9996
</style>

‎components/chat/connect.vue

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -59,23 +59,20 @@ function savename() {
5959

6060
<style lang="postcss" scoped>
6161
@reference "tailwindcss/theme.css";
62-
@tailwind components;
6362
64-
@layer components {
65-
.headtext {
66-
@apply font-semibold text-lg my-3 min-w-[64] pl-5;
67-
}
63+
.headtext {
64+
@apply font-semibold text-lg my-3 min-w-[64] pl-5;
65+
}
6866
69-
.paratext {
70-
@apply px-8 dark:text-gray-400 text-gray-600 whitespace-pre-wrap
71-
}
67+
.paratext {
68+
@apply px-8 dark:text-gray-400 text-gray-600 whitespace-pre-wrap
69+
}
7270
73-
input {
74-
@apply bg-transparent focus:outline-none focus:shadow border-solid border border-gray-500 dark:border-gray-300 rounded-lg py-2 px-4 block w-2/3 appearance-none leading-normal
75-
}
71+
input {
72+
@apply bg-transparent focus:outline-none focus:shadow border-solid border border-gray-500 dark:border-gray-300 rounded-lg py-2 px-4 block w-2/3 appearance-none leading-normal
73+
}
7674
77-
button {
78-
@apply bg-transparent hover:bg-indigo-500 text-sky-500 font-semibold hover:text-yellow-100 block py-2 px-4 border border-blue-500 hover:border-transparent rounded dark:text-cyan-300 border-solid
79-
}
75+
button {
76+
@apply bg-transparent hover:bg-indigo-500 text-sky-500 font-semibold hover:text-yellow-100 block py-2 px-4 border border-blue-500 hover:border-transparent rounded dark:text-cyan-300 border-solid
8077
}
8178
</style>

‎components/layouts/header.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="relative mb-16" v-if="frontmatter.header">
3-
<h1 class="text-3xl text-center pb-16">{{ frontmatter.title }}</h1>
3+
<h1>{{ frontmatter.title }}</h1>
44
<div class="text-sm mb-2 text-cyan-500 hover:text-black">
55
<a
66
v-for="tag in frontmatter.tags"
@@ -44,3 +44,11 @@ function formatDateByLocale(date: Date, lang: string) {
4444
return localDate;
4545
}
4646
</script>
47+
48+
<style lang="postcss" scoped>
49+
@reference "tailwindcss/theme.css";
50+
51+
h1 {
52+
@apply text-3xl text-center pb-16;
53+
}
54+
</style>

‎content/.vitepress/theme/tailwind.postcss

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -39,36 +39,35 @@ html[lang="zh"] body #app {
3939
font-family: Noto Sans, Noto Sans CJK SC;
4040
}
4141

42-
@layer components {
43-
#app .content .content-container .main div[class*="_zh_blog"] div {
44-
@apply prose-headings:font-[Kaiti]
42+
#app .content .content-container .main div[class*="_zh_blog"] div {
43+
@apply prose-headings:font-[Kaiti]
4544
prose-headings:font-normal
4645
prose-h1:font-[Xingkai]
4746
prose-h3:font-[Xinwei];
48-
p > sup > a {
49-
text-decoration: none;
50-
}
51-
section.footnotes > ol.footnotes-list {
52-
font-family: Xihei;
53-
}
54-
h2 + hr.footnotes-sep {
55-
display: none;
56-
}
57-
blockquote {
58-
@apply prose-p:text-slate-900
47+
p > sup > a {
48+
text-decoration: none;
49+
}
50+
section.footnotes > ol.footnotes-list {
51+
font-family: Xihei;
52+
}
53+
h2 + hr.footnotes-sep {
54+
display: none;
55+
}
56+
blockquote {
57+
@apply prose-p:text-slate-900
5958
prose-p:dark:text-violet-200;
60-
p {
61-
@apply font-[Fangsong] my-1 font-semibold not-italic;
62-
}
63-
p::before,
64-
p::after {
65-
content: none;
66-
}
59+
p {
60+
@apply font-[Fangsong] my-1 font-semibold not-italic;
61+
}
62+
p::before,
63+
p::after {
64+
content: none;
6765
}
6866
}
67+
}
6968

70-
#app .content .content-container .main .vp-doc div {
71-
@apply prose prose-stone lg:prose-lg
69+
#app .content .content-container .main .vp-doc div {
70+
@apply prose prose-stone lg:prose-lg
7271
dark:prose-invert
7372
prose-em:italic
7473
prose-a:text-green-400
@@ -79,36 +78,35 @@ html[lang="zh"] body #app {
7978
prose-a:underline-offset-4
8079
prose-p:text-justify
8180
prose-p:indent-[2em];
82-
.header-anchor {
83-
@apply text-green-200;
84-
}
85-
ul > li > p,
86-
ol > li > p {
87-
text-indent: 0;
88-
}
89-
code::before {
90-
display: none;
91-
}
92-
code::after {
93-
display: none;
94-
}
95-
a {
96-
@apply hover:text-blue-500 hover:decoration-4 dark:hover:text-indigo-300;
97-
}
81+
.header-anchor {
82+
@apply text-green-200;
9883
}
99-
100-
#app .content .content-container .main .vp-doc div li.footnote-item p {
101-
@apply indent-0;
84+
ul > li > p,
85+
ol > li > p {
86+
text-indent: 0;
87+
}
88+
code::before {
89+
display: none;
10290
}
91+
code::after {
92+
display: none;
93+
}
94+
a {
95+
@apply hover:text-blue-500 hover:decoration-4 dark:hover:text-indigo-300;
96+
}
97+
}
10398

104-
#chat-room .render-html {
105-
@apply prose prose-zinc dark:prose-invert prose-p:my-0;
106-
a[href^="#"] {
107-
@apply text-sm dark:text-gray-600 text-gray-200;
108-
}
109-
p + blockquote {
110-
@apply my-2;
111-
}
99+
#app .content .content-container .main .vp-doc div li.footnote-item p {
100+
@apply indent-0;
101+
}
102+
103+
#chat-room .render-html {
104+
@apply prose prose-zinc dark:prose-invert prose-p:my-0;
105+
a[href^="#"] {
106+
@apply text-sm dark:text-gray-600 text-gray-200;
107+
}
108+
p + blockquote {
109+
@apply my-2;
112110
}
113111
}
114112

‎content/en/writing/2019-12-21-Workflow.md

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -94,16 +94,13 @@ For `wayland` users, I have a `zsh` function in
9494

9595
<style scoped>
9696
@reference "tailwindcss/theme.css";
97-
@tailwind base;
98-
@layer base {
99-
input:focus {
100-
@apply shadow-md
101-
}
102-
input {
103-
@apply bg-transparent border-2 border-gray-300 rounded-lg py-2 px-4 inline-block w-1/2 appearance-none leading-normal
104-
}
105-
button {
106-
@apply bg-transparent ml-10 hover:bg-blue-500 text-blue-700 dark:text-green-400 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded
107-
}
97+
input:focus {
98+
@apply shadow-md
99+
}
100+
input {
101+
@apply bg-transparent border-2 border-gray-300 rounded-lg py-2 px-4 inline-block w-1/2 appearance-none leading-normal
102+
}
103+
button {
104+
@apply bg-transparent ml-10 hover:bg-blue-500 text-blue-700 dark:text-green-400 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded
108105
}
109106
</style>

0 commit comments

Comments
 (0)