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

structure refacto & file documentation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-25 17:51:53 +02:00
parent d7871736c8
commit 895fec2b40
84 changed files with 2629 additions and 2313 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
.screenshot-viewer-root {
// Rôle : regroupe les styles des modales, viewers et notifications.
.image-viewer-root {
position: fixed;
inset: 0;
z-index: 110;
@ -8,14 +9,14 @@
overscroll-behavior: contain;
}
.screenshot-viewer-backdrop {
.image-viewer-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 3, 9, 0.64);
backdrop-filter: blur(4px);
}
.screenshot-viewer {
.image-viewer {
--viewer-content-max-height: min(80vh, calc(100vh - 140px));
--viewer-image-height: 400px;
position: relative;
@ -30,14 +31,14 @@
box-shadow: var(--shadow-lg);
}
.screenshot-viewer header {
.image-viewer header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2);
}
.screenshot-viewer-title {
.image-viewer-title {
overflow: hidden;
color: var(--color-text);
font-size: var(--font-size-md);
@ -45,30 +46,30 @@
white-space: nowrap;
}
.screenshot-viewer-actions {
.image-viewer-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
.screenshot-viewer-button {
.image-viewer-button {
flex: 0 0 40px;
}
.screenshot-viewer-body {
.image-viewer-body {
display: grid;
min-width: 0;
justify-items: center;
}
.screenshot-viewer-body.has-annotation-side {
.image-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 {
.image-viewer-media {
display: flex;
min-width: 0;
max-width: 100%;
@ -77,11 +78,11 @@
align-items: start;
}
.screenshot-viewer-media.can-annotate {
.image-viewer-media.can-annotate {
cursor: crosshair;
}
.screenshot-viewer-image-frame {
.image-viewer-image-frame {
position: relative;
display: block;
width: fit-content;
@ -91,7 +92,7 @@
line-height: 0;
}
.screenshot-viewer-image-frame img {
.image-viewer-image-frame img {
display: block;
width: auto;
height: auto;
@ -100,7 +101,7 @@
object-fit: contain;
}
.screenshot-viewer-marker {
.image-viewer-marker {
display: inline-grid;
width: 30px;
min-width: 30px;
@ -123,7 +124,7 @@
pointer-events: none;
}
.screenshot-viewer-side {
.image-viewer-side {
display: grid;
align-content: start;
grid-template-rows: auto minmax(0, 1fr);
@ -142,12 +143,12 @@
rgba(7, 10, 24, 0.38);
}
.screenshot-viewer-side strong {
.image-viewer-side strong {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.screenshot-viewer-side .annotation-marker-list {
.image-viewer-side .annotation-marker-list {
min-width: 0;
max-height: 100%;
overflow-y: auto;