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

style: improve preview section UI

Browse Source 
- Make preview-header fully transparent
- Add inset shadow to preview-section
- Remove green tint from expected overlay
This commit is contained in:
Michael Czechowski
2025-12-30 18:34:41 +01:00
parent 6a21cacdee
commit bf2a53eca6
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/main.css
View File

@@ -430,6 +430,7 @@ code, kbd {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
box-shadow: inset 0 -40px 30px -30px rgba(0, 0, 0, 0.08);
} }
.preview-header { .preview-header {
@@ -437,7 +438,7 @@ code, kbd {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: var(--spacing-xs) var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md);
background: rgba(255, 255, 255, 0.7); background: transparent;
} }
.preview-label { .preview-label {
@@ -474,7 +475,7 @@ code, kbd {
.expected-overlay { .expected-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(88, 184, 144, 0.1); background: var(--panel-bg);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@@ -499,7 +500,6 @@ code, kbd {
height: 100%; height: 100%;
border: none; border: none;
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
opacity: 0.7;
} }
/* Success Match Animation */ /* Success Match Animation */