hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use code block header if copy button is enabled

Browse Source 
Now copy button doesn't cover the code, because it's not on top of it!
This commit is contained in:
daudix
2024-07-18 01:55:09 +03:00
parent 95751760fd
commit 19e976375c
4 changed files with 105 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
sass/_containers.scss
View File

@ -4,30 +4,44 @@
}
.pre-container {
position: relative;
margin: 1rem 0 1rem;
box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner);
.header {
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
background-color: var(--fg-muted-1);
padding: 0.25rem;
height: 2.5rem;
span {
vertical-align: middle;
margin-inline-start: 0.75rem;
color: var(--fg-muted-5);
font-weight: bold;
line-height: normal;
}
}
pre {
margin: 0;
box-shadow: none;
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
}
button {
-webkit-backdrop-filter: var(--blur);
position: absolute;
top: 0.5rem;
right: 0.5rem;
backdrop-filter: var(--blur);
float: inline-end;
transition: var(--transition);
cursor: pointer;
box-shadow: var(--edge-highlight);
border: none;
border-radius: 50%;
background-color: var(--fg-muted-1);
border-radius: var(--rounded-corner-small);
background-color: transparent;
padding: 0.5rem;
line-height: 0;
:root[dir*="rtl"] & {
right: unset;
left: 0.5rem;
}
&:hover {
background-color: var(--fg-muted-2);
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
i {
background-color: var(--fg-muted-5);
@ -38,14 +52,6 @@
transform: scale(var(--active));
}
&.dark {
background-color: rgba(255, 255, 255, 0.05);
.icon {
background-color: rgba(255, 255, 255, 0.5);
}
}
&.active {
background-color: var(--primary-color-alpha);