vegard/synops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

BlockShell: fiks resize-handles + visuell affordance

Browse source 
overflow: hidden på .blockshell klippet resize-handles (negative offsets).
Endret til overflow: visible, border-radius på header/content i stedet.
Lagt til subtile visulle indikatorer ved hover: L-merker på hjørner,
tynne linjer på kanter. Hardkodede farger → CSS custom properties.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
vegard 2026-03-19 05:42:34 +00:00
parent b8bb8703ca
commit b863611daa
1 changed files with 67 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
frontend/src/lib/components/blockshell/BlockShell.svelte
View file

@ -448,12 +448,11 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #1c1c20; background: var(--color-surface, #1c1c20);
border: 1px solid #2a2a2e; border: 1px solid var(--color-border, #2a2a2e);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden; overflow: visible;
contain: layout;
} }
.blockshell-fullscreen { .blockshell-fullscreen {
@ -464,7 +463,7 @@
height: 100% !important; height: 100% !important;
border-radius: 0; border-radius: 0;
border: none; border: none;
background: #0a0a0b; background: var(--color-bg, #0a0a0b);
} }
.blockshell-minimized { .blockshell-minimized {
@ -503,12 +502,13 @@
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
padding: 6px 8px 6px 12px; padding: 6px 8px 6px 12px;
border-bottom: 1px solid #f3f4f6; border-bottom: 1px solid var(--color-border, #2a2a2e);
cursor: grab; cursor: grab;
user-select: none; user-select: none;
flex-shrink: 0; flex-shrink: 0;
min-height: 36px; min-height: 36px;
background: #141416; background: var(--color-bg, #141416);
border-radius: 8px 8px 0 0;
} }
.blockshell-dragging .blockshell-header { .blockshell-dragging .blockshell-header {
@ -574,6 +574,7 @@
flex: 1; flex: 1;
overflow: auto; overflow: auto;
min-height: 0; min-height: 0;
border-radius: 0 0 8px 8px;
} }
.blockshell-empty { .blockshell-empty {
@ -619,6 +620,65 @@
z-index: 5; z-index: 5;
} }
/* Visual affordance on hover — edge lines */
.blockshell:hover .blockshell-resize-e::after,
.blockshell:hover .blockshell-resize-w::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 20px;
background: rgba(138, 138, 150, 0.3);
border-radius: 1px;
}
.blockshell:hover .blockshell-resize-e::after { right: 1px; }
.blockshell:hover .blockshell-resize-w::after { left: 1px; }
.blockshell:hover .blockshell-resize-n::after,
.blockshell:hover .blockshell-resize-s::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 20px;
background: rgba(138, 138, 150, 0.3);
border-radius: 1px;
}
.blockshell:hover .blockshell-resize-n::after { top: 1px; }
.blockshell:hover .blockshell-resize-s::after { bottom: 1px; }
/* Visual affordance on hover — corner L-marks */
.blockshell:hover .blockshell-resize-se::after,
.blockshell:hover .blockshell-resize-sw::after,
.blockshell:hover .blockshell-resize-ne::after,
.blockshell:hover .blockshell-resize-nw::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-color: rgba(138, 138, 150, 0.4);
border-style: solid;
border-width: 0;
}
.blockshell:hover .blockshell-resize-se::after {
bottom: 1px; right: 1px;
border-right-width: 2px; border-bottom-width: 2px;
}
.blockshell:hover .blockshell-resize-sw::after {
bottom: 1px; left: 1px;
border-left-width: 2px; border-bottom-width: 2px;
}
.blockshell:hover .blockshell-resize-ne::after {
top: 1px; right: 1px;
border-right-width: 2px; border-top-width: 2px;
}
.blockshell:hover .blockshell-resize-nw::after {
top: 1px; left: 1px;
border-left-width: 2px; border-top-width: 2px;
}
/* Edge handles */ /* Edge handles */
.blockshell-resize-n { .blockshell-resize-n {
top: -3px; top: -3px;