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;
display: flex;
flex-direction: column;
background: #1c1c20;
border: 1px solid #2a2a2e;
background: var(--color-surface, #1c1c20);
border: 1px solid var(--color-border, #2a2a2e);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
contain: layout;
overflow: visible;
}
.blockshell-fullscreen {
@ -464,7 +463,7 @@
height: 100% !important;
border-radius: 0;
border: none;
background: #0a0a0b;
background: var(--color-bg, #0a0a0b);
}
.blockshell-minimized {
@ -503,12 +502,13 @@
justify-content: space-between;
gap: 8px;
padding: 6px 8px 6px 12px;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--color-border, #2a2a2e);
cursor: grab;
user-select: none;
flex-shrink: 0;
min-height: 36px;
background: #141416;
background: var(--color-bg, #141416);
border-radius: 8px 8px 0 0;
}
.blockshell-dragging .blockshell-header {
@ -574,6 +574,7 @@
flex: 1;
overflow: auto;
min-height: 0;
border-radius: 0 0 8px 8px;
}
.blockshell-empty {
@ -619,6 +620,65 @@
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 */
.blockshell-resize-n {
top: -3px;