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

Improve toolbox checklists, image browsing, and guide integration
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-27 22:26:39 +02:00
parent 00e73f0062
commit 386212041f
47 changed files with 744 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

108
website/src/styles/overlays/_image-viewer.scss
View file

@ -1,4 +1,4 @@
// Rôle : stylise le viewer d'image et son panneau d'annotation.
// Rôle : stylise la visionneuse d'image, sa galerie et son panneau d'annotation.
.image-viewer-root {
position: fixed;
inset: 0;
@ -38,6 +38,13 @@
gap: var(--space-2);
}
.image-viewer-heading {
display: flex;
min-width: 0;
align-items: center;
gap: var(--space-3);
}
.image-viewer-title {
overflow: hidden;
color: var(--color-text);
@ -46,6 +53,17 @@
white-space: nowrap;
}
.image-viewer-position {
flex: 0 0 auto;
padding: 3px 9px;
border: 1px solid rgba(246, 196, 83, 0.22);
border-radius: var(--radius-pill);
background: rgba(246, 196, 83, 0.08);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: 800;
}
.image-viewer-actions {
display: flex;
justify-content: flex-end;
@ -69,6 +87,24 @@
justify-items: stretch;
}
.image-viewer-body.has-navigation {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
}
.image-viewer-nav {
align-self: center;
}
.image-viewer-nav .ui-icon {
transform: rotate(90deg);
}
.image-viewer-nav-next .ui-icon {
transform: rotate(-90deg);
}
.image-viewer-media {
display: flex;
min-width: 0;
@ -158,3 +194,73 @@
overscroll-behavior: contain;
padding: 4px 4px 4px 0;
}
.image-viewer.is-gallery {
height: min(860px, calc(100vh - 48px));
grid-template-rows: auto minmax(0, 1fr);
}
.image-viewer-gallery {
display: grid;
min-height: 0;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
align-content: start;
gap: var(--space-4);
overflow-y: auto;
overscroll-behavior: contain;
padding: 2px 6px 2px 2px;
}
.image-viewer-gallery-item {
display: grid;
min-width: 0;
gap: 10px;
padding: 10px;
color: var(--color-text);
text-align: left;
cursor: pointer;
}
.image-viewer-gallery-item.is-active {
border-color: rgba(246, 196, 83, 0.52);
box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.16);
}
.image-viewer-gallery-frame {
display: grid;
min-height: 200px;
height: clamp(200px, 24vh, 280px);
place-items: center;
overflow: hidden;
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.72);
}
.image-viewer-gallery-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.image-viewer-gallery-caption {
display: grid;
min-width: 0;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2);
}
.image-viewer-gallery-caption strong {
overflow: hidden;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.image-viewer-gallery-caption small {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 800;
}