Shine the code block header on copy
This commit is contained in:
@ -10,10 +10,21 @@
|
||||
|
||||
.header {
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
|
||||
background-color: var(--fg-muted-1);
|
||||
background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--primary-color-alpha) 75%, var(--fg-muted-1) 100%);
|
||||
background-size: 200%;
|
||||
padding: 0.25rem;
|
||||
height: 2.5rem;
|
||||
|
||||
&:has(button.active) {
|
||||
animation: active-fill var(--transition-long);
|
||||
|
||||
@keyframes active-fill {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
margin-inline-start: 0.75rem;
|
||||
@ -21,13 +32,6 @@
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
|
||||
}
|
||||
|
||||
button {
|
||||
float: inline-end;
|
||||
@ -74,3 +78,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user