js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix copy code button styles (#1627)

Browse Source
This commit is contained in:
Lindsay M
2025-10-19 16:25:20 -04:00
committed by GitHub
parent 925cc2816f
commit 3a23e48473
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/webawesome/docs/assets/styles/copy-code.css
View File

@@ -15,24 +15,25 @@ pre[id*='code-block-']:has(code) {
} }
wa-copy-button.copy-button { wa-copy-button.copy-button {
--background-color: var(--wa-color-gray-20);
--background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
position: absolute; position: absolute;
top: 0.25rem; top: 0.5rem;
right: 0.25rem; right: 0.5rem;
font-family: var(--wa-font-family-body); font-family: var(--wa-font-family-body);
color: var(--wa-color-gray-80); font-size: var(--wa-font-size-m);
color: white;
border-radius: var(--wa-border-radius-m); border-radius: var(--wa-border-radius-m);
padding: 0.25rem;
&::part(button) { &::part(button) {
background: transparent; aspect-ratio: 1;
background-color: var(--wa-color-neutral-20);
cursor: copy; cursor: copy;
} }
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
color: white; &::part(button) {
background-color: var(--wa-color-neutral-30);
}
} }
} }