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

feat: bigger border (6px), colorful conic glow, reduced padding

Browse Source 
- Border increased from 4px to 6px
- Glow layer uses same conic-gradient with 20px blur
- Reduced preview-frame padding to compensate
- Higher glow opacity (0.8) for more vibrant effect
This commit is contained in:
Michael Czechowski
2026-01-13 21:29:19 +01:00
parent 8b3b9ddde5
commit 2a96ba9d00
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/main.css
View File

@@ -550,13 +550,13 @@ kbd {
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
border: 4px solid transparent; border: 6px solid transparent;
} }
.preview-frame { .preview-frame {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: var(--spacing-sm); padding: var(--spacing-xs);
} }
.preview-frame iframe { .preview-frame iframe {
@@ -606,7 +606,7 @@ kbd {
.preview-wrapper.matched { .preview-wrapper.matched {
--border-angle: 0deg; --border-angle: 0deg;
border: 4px solid transparent; border: 6px 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(
@@ -620,12 +620,12 @@ kbd {
animation: spin-border 2.5s linear forwards; animation: spin-border 2.5s linear forwards;
} }
/* Glow effect layer */ /* Colorful glow effect layer */
.preview-wrapper.matched::before { .preview-wrapper.matched::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: -8px; inset: -12px;
border-radius: calc(var(--border-radius-md) + 8px); border-radius: calc(var(--border-radius-md) + 12px);
background: conic-gradient( background: conic-gradient(
from var(--border-angle), from var(--border-angle),
#9b59b6, #9b59b6,
@@ -635,7 +635,7 @@ kbd {
#9b59b6 #9b59b6
); );
z-index: -1; z-index: -1;
filter: blur(12px); filter: blur(20px);
opacity: 0; opacity: 0;
animation: spin-glow 2.5s linear forwards; animation: spin-glow 2.5s linear forwards;
} }
@@ -656,11 +656,11 @@ kbd {
@keyframes spin-glow { @keyframes spin-glow {
0% { 0% {
--border-angle: 0deg; --border-angle: 0deg;
opacity: 0.6; opacity: 0.8;
} }
80% { 80% {
--border-angle: -288deg; --border-angle: -288deg;
opacity: 0.4; opacity: 0.6;
} }
100% { 100% {
--border-angle: -360deg; --border-angle: -360deg;