shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

content & style opti, new tool annotation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-24 09:37:32 +02:00
parent 0db35a0d2c
commit 6e1472d2fb
21 changed files with 1112 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

104
website/src/styles/_overlays.scss
View file

@ -5,6 +5,7 @@
display: grid;
place-items: center;
padding: var(--space-5);
overscroll-behavior: contain;
}
.screenshot-viewer-backdrop {
@ -15,9 +16,11 @@
}
.screenshot-viewer {
--viewer-content-max-height: min(80vh, calc(100vh - 140px));
--viewer-image-height: 400px;
position: relative;
display: grid;
width: min(1120px, calc(100vw - 32px));
width: min(1500px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
gap: var(--space-4);
padding: var(--space-4);
@ -38,15 +41,106 @@
flex: 0 0 40px;
}
.screenshot-viewer img {
display: block;
.screenshot-viewer-body {
display: grid;
min-width: 0;
justify-items: center;
}
.screenshot-viewer-body.has-annotation-side {
grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
gap: var(--space-4);
align-items: start;
justify-items: stretch;
}
.screenshot-viewer-media {
display: flex;
min-width: 0;
max-width: 100%;
max-height: calc(100vh - 170px);
justify-self: center;
justify-content: center;
align-items: start;
}
.screenshot-viewer-media.can-annotate {
cursor: crosshair;
}
.screenshot-viewer-image-frame {
position: relative;
display: block;
width: fit-content;
max-width: 100%;
overflow: hidden;
border-radius: var(--radius-md);
line-height: 0;
}
.screenshot-viewer-image-frame img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: var(--viewer-content-max-height);
object-fit: contain;
}
.screenshot-viewer-marker {
display: inline-grid;
width: 30px;
min-width: 30px;
height: 30px;
min-height: 30px;
place-items: center;
padding: 0;
border: 1px solid rgba(246, 196, 83, 0.72);
border-radius: var(--radius-pill);
background:
linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.9), rgba(196, 181, 253, 0.5)) border-box;
color: #fff;
font-size: var(--font-size-xs);
font-weight: 900;
line-height: 1;
box-shadow:
0 0 0 2px rgba(5, 7, 17, 0.72),
0 0 16px rgba(246, 196, 83, 0.22);
pointer-events: none;
}
.screenshot-viewer-side {
display: grid;
align-content: start;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--space-3);
min-width: 0;
width: 100%;
max-width: 340px;
height: min(var(--viewer-image-height), var(--viewer-content-max-height));
max-height: min(var(--viewer-image-height), var(--viewer-content-max-height));
overflow: hidden;
padding: 12px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%),
rgba(7, 10, 24, 0.38);
}
.screenshot-viewer-side strong {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.screenshot-viewer-side .annotation-marker-list {
min-width: 0;
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 4px;
}
.drawer[aria-hidden="true"] {
display: none;
}
@ -166,6 +260,7 @@ body.is-resizing-drawer * {
display: grid;
place-items: center;
padding: var(--space-5);
overscroll-behavior: contain;
}
.tool-add-modal-root {
@ -175,6 +270,7 @@ body.is-resizing-drawer * {
display: grid;
place-items: center;
padding: var(--space-5);
overscroll-behavior: contain;
}
.confirm-backdrop {