@@ -22,10 +22,14 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
22
22
<div class =" rule-header" >
23
23
<a :href =" meta.link" class =" rule-name" target =" _blank" >{{ meta.name }}</a >
24
24
<div class =" rule-badges" >
25
- <a :href =" `/catalog/${meta.language}/`" >
26
- <Badge type =" info" :text =" languages[meta.language]" />
27
- </a >
28
- <Badge v-if =" meta.hasFix" type =" tip" text =" 🛠️ Fix" />
25
+ <Badge type =" info" >
26
+ <a :href =" `/catalog/${meta.language}/`" class =" override-badge-text-color" target =" _blank" >
27
+ {{ languages[meta.language] }}
28
+ </a >
29
+ </Badge >
30
+ <Badge v-if =" meta.hasFix" type =" tip" >
31
+ <span class =" override-badge-text-color" >🛠️ Fix</span >
32
+ </Badge >
29
33
</div >
30
34
</div >
31
35
<div class =" rule-details" >
@@ -50,7 +54,7 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
50
54
+{{ moreFeatures }}
51
55
</code >
52
56
</div >
53
- <a :href =" meta.playgroundLink" class =" playground- link" target =" _blank" >
57
+ <a :href =" meta.playgroundLink" class =" link playground " target =" _blank" >
54
58
Try in Playground →
55
59
</a >
56
60
</div >
64
68
a :hover {
65
69
text-decoration : underline ;
66
70
}
71
+ .override-badge-text-color {
72
+ color : var (--vp-c-text-1 );
73
+ }
74
+ .override-badge-text-color :hover {
75
+ color : var (--vp-c-text-1 );
76
+ }
77
+
78
+ .link {
79
+ filter : brightness (1.3 );
80
+ color : var (--vp-button-brand-bg );
81
+ }
82
+ .link :hover {
83
+ color : var (--vp-button-brand-bg );
84
+ filter : brightness (1.5 );
85
+ }
86
+ .rule-name {
87
+ font-weight : 600 ;
88
+ }
89
+ .playground {
90
+ font-size : 0.8em ;
91
+ }
67
92
.rule-item {
68
93
border : 1px solid var (--vp-c-divider );
69
94
border-radius : 8px ;
@@ -76,10 +101,6 @@ a:hover {
76
101
margin-bottom : 12px ;
77
102
}
78
103
79
- .rule-name {
80
- font-weight : 600 ;
81
- }
82
-
83
104
.rule-badges {
84
105
display : flex ;
85
106
gap : 4px ;
@@ -102,16 +123,6 @@ a:hover {
102
123
line-height : 24px ;
103
124
padding-top : 0 ;
104
125
}
105
-
106
- .playground-link {
107
- font-size : 0.8em ;
108
- color : var (--vp-button-brand-bg );
109
- filter : brightness (1.1 );
110
- }
111
- .playground-link :hover {
112
- color : var (--vp-button-brand-bg );
113
- filter : brightness (1.35 );
114
- }
115
126
.emoji-offset {
116
127
/* Offset emoji visual spacing */
117
128
margin-right : -2px ;
0 commit comments