forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: add readme codeblock bg, remove duplicated styles (#973)
authored by
Mikołaj Misztal
and committed by
GitHub
84d849ec
5bc07783
+1
-42
+1
-42
app/components/Readme.vue
+1
-42
app/components/Readme.vue
···
165
165
}
166
166
167
167
.readme :deep(.readme-code-block) {
168
-
display: block;
169
-
width: 100%;
170
-
position: relative;
171
-
}
172
-
173
-
.readme :deep(.readme-copy-button) {
174
-
position: absolute;
175
-
top: 0.4rem;
176
-
inset-inline-end: 0.4rem;
177
-
display: inline-flex;
178
-
align-items: center;
179
-
justify-content: center;
180
-
padding: 0.25rem;
181
-
border-radius: 6px;
182
-
background: color-mix(in srgb, var(--bg-subtle) 80%, transparent);
183
-
border: 1px solid var(--border);
184
-
color: var(--fg-subtle);
185
-
opacity: 0;
186
-
transition:
187
-
opacity 0.2s ease,
188
-
color 0.2s ease,
189
-
border-color 0.2s ease;
190
-
}
191
-
192
-
.readme :deep(.readme-code-block:hover .readme-copy-button),
193
-
.readme :deep(.readme-copy-button:focus-visible) {
194
-
opacity: 1;
195
-
}
196
-
197
-
.readme :deep(.readme-copy-button:hover) {
198
-
color: var(--fg);
199
-
border-color: var(--border-hover);
200
-
}
201
-
202
-
.readme :deep(.readme-copy-button > span) {
203
-
width: 1rem;
204
-
height: 1rem;
205
-
display: inline-block;
206
-
pointer-events: none;
207
-
}
208
-
209
-
.readme :deep(.readme-code-block) {
168
+
@apply bg-bg-subtle;
210
169
display: block;
211
170
width: 100%;
212
171
position: relative;