public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: thicker border (4px) and add transparent border by default

Browse Source 
- preview-wrapper now has 4px transparent border by default
- No layout jump when animation activates
- Larger glow layer for better effect
This commit is contained in:
Michael Czechowski
2026-01-13 21:27:59 +01:00
parent 1ec3f34eac
commit 8b3b9ddde5
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/main.css
View File

@@ -550,6 +550,7 @@ kbd {
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
border: 4px solid transparent;
} }
.preview-frame { .preview-frame {
@@ -605,7 +606,7 @@ kbd {
.preview-wrapper.matched { .preview-wrapper.matched {
--border-angle: 0deg; --border-angle: 0deg;
border: 3px solid transparent; border: 4px solid transparent;
background: background:
linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box, linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
conic-gradient( conic-gradient(
@@ -623,8 +624,8 @@ kbd {
.preview-wrapper.matched::before { .preview-wrapper.matched::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: -6px; inset: -8px;
border-radius: calc(var(--border-radius-md) + 6px); border-radius: calc(var(--border-radius-md) + 8px);
background: conic-gradient( background: conic-gradient(
from var(--border-angle), from var(--border-angle),
#9b59b6, #9b59b6,