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

43
website/src/styles/_base.scss
View file

@ -1,3 +1,4 @@
// Rôle : définit les bases globales HTML, body, typographie et contrôles natifs.
* {
box-sizing: border-box;
}
@ -251,11 +252,11 @@ body.is-modal-open {
.drawer-action-button,
.drawer-close-button,
.filter-reset-button,
.screenshot-viewer-button,
.image-viewer-button,
.module-edit-button,
.module-delete-button,
.shot-annotate-button,
.shot-delete-button,
.image-annotate-button,
.image-delete-button,
.checklist-delete-button,
.tool-quick-add-button
) {
@ -288,11 +289,11 @@ body.is-modal-open {
.drawer-action-button,
.drawer-close-button,
.filter-reset-button,
.screenshot-viewer-button,
.image-viewer-button,
.module-edit-button,
.module-delete-button,
.shot-annotate-button,
.shot-delete-button,
.image-annotate-button,
.image-delete-button,
.checklist-delete-button,
.tool-quick-add-button
) .ui-icon {
@ -309,11 +310,11 @@ body.is-modal-open {
.drawer-action-button,
.drawer-close-button,
.filter-reset-button,
.screenshot-viewer-button,
.image-viewer-button,
.module-edit-button,
.module-delete-button,
.shot-annotate-button,
.shot-delete-button,
.image-annotate-button,
.image-delete-button,
.checklist-delete-button,
.tool-quick-add-button
):hover {
@ -335,11 +336,11 @@ body.is-modal-open {
.drawer-action-button,
.drawer-close-button,
.filter-reset-button,
.screenshot-viewer-button,
.image-viewer-button,
.module-edit-button,
.module-delete-button,
.shot-annotate-button,
.shot-delete-button,
.image-annotate-button,
.image-delete-button,
.tool-quick-add-button
).primary {
border-color: rgba(246, 196, 83, 0.34);
@ -360,11 +361,11 @@ body.is-modal-open {
.drawer-action-button,
.drawer-close-button,
.filter-reset-button,
.screenshot-viewer-button,
.image-viewer-button,
.module-edit-button,
.module-delete-button,
.shot-annotate-button,
.shot-delete-button,
.image-annotate-button,
.image-delete-button,
.tool-quick-add-button
).primary:hover {
border-color: rgba(246, 196, 83, 0.72);
@ -387,11 +388,11 @@ body.is-modal-open {
.drawer-action-button,
.drawer-close-button,
.filter-reset-button,
.screenshot-viewer-button,
.image-viewer-button,
.module-edit-button,
.module-delete-button,
.shot-annotate-button,
.shot-delete-button,
.image-annotate-button,
.image-delete-button,
.checklist-delete-button,
.tool-quick-add-button
):hover .ui-icon {
@ -399,12 +400,12 @@ body.is-modal-open {
filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.28));
}
:is(.card-icon-button, .module-delete-button, .shot-delete-button, .checklist-delete-button).danger {
:is(.card-icon-button, .module-delete-button, .image-delete-button, .checklist-delete-button).danger {
border-color: rgba(251, 113, 133, 0.2);
color: var(--color-danger);
}
:is(.card-icon-button, .module-delete-button, .shot-delete-button, .checklist-delete-button).danger:hover {
:is(.card-icon-button, .module-delete-button, .image-delete-button, .checklist-delete-button).danger:hover {
border-color: rgba(251, 113, 133, 0.56);
background:
linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
@ -415,7 +416,7 @@ body.is-modal-open {
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:is(.card-icon-button, .module-delete-button, .shot-delete-button, .checklist-delete-button).danger:hover .ui-icon {
:is(.card-icon-button, .module-delete-button, .image-delete-button, .checklist-delete-button).danger:hover .ui-icon {
background-color: #fff;
filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26));
}

1
website/src/styles/_cards.scss
View file

@ -1,3 +1,4 @@
// Rôle : regroupe les styles de cards, panels et variantes compactes.
@use "mixins";
.section-grid,

1
website/src/styles/_diablo4.scss
View file

@ -1,3 +1,4 @@
// Rôle : contient les styles spécifiques aux affichages Diablo IV.
.game-card-placeholder {
display: grid;
width: 100%;

1
website/src/styles/_games.scss
View file

@ -1,3 +1,4 @@
// Rôle : regroupe les styles partagés des pages de jeux, filtres et listes.
@use "mixins";
.game-home-grid {

1
website/src/styles/_home.scss
View file

@ -1,3 +1,4 @@
// Rôle : contient les styles spécifiques à la page d'accueil.
@use "mixins";
.hero,

1
website/src/styles/_icons.scss
View file

@ -1,3 +1,4 @@
// Rôle : définit le rendu commun des icônes SVG.
.ui-icon {
display: block;
width: 20px;

1
website/src/styles/_mhwilds.scss
View file

@ -1,3 +1,4 @@
// Rôle : contient les styles spécifiques aux pages Monster Hunter Wilds.
.monster-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

1
website/src/styles/_mixins.scss
View file

@ -1,3 +1,4 @@
// Rôle : fournit les mixins Sass partagés du thème.
@mixin border-mask {
mask-image:
linear-gradient(#000 0 0),

1
website/src/styles/_nebula.scss
View file

@ -1,3 +1,4 @@
// Rôle : génère le fond nebula et le champ d'étoiles global.
@use "sass:list";
$bright-stars:

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;

5
website/src/styles/_responsive.scss
View file

@ -1,3 +1,4 @@
// Rôle : contient les adaptations responsive et préférences d'accessibilité.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
@ -166,11 +167,11 @@
grid-template-columns: 1fr;
}
.screenshot-viewer-body.has-annotation-side {
.image-viewer-body.has-annotation-side {
grid-template-columns: 1fr;
}
.screenshot-viewer-side {
.image-viewer-side {
height: min(280px, 32vh);
}

1
website/src/styles/_shell.scss
View file

@ -1,3 +1,4 @@
// Rôle : définit le layout principal, la sidebar et la navigation.
@use "mixins";
.app-shell {

1
website/src/styles/_tokens.scss
View file

@ -1,3 +1,4 @@
// Rôle : expose les tokens CSS du thème Sokko G.
:root {
color-scheme: dark;

29
website/src/styles/_toolboxes.scss
View file

@ -1,3 +1,4 @@
// Rôle : regroupe les styles des toolboxes, outils et panneau latéral.
@use "mixins";
.toolbox-head {
@ -1701,14 +1702,14 @@ textarea:focus {
padding: var(--space-4);
}
.shots {
.images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-3);
padding: var(--space-4);
}
.shots figure {
.images figure {
position: relative;
display: grid;
gap: 8px;
@ -1719,7 +1720,7 @@ textarea:focus {
background: rgba(5, 7, 17, 0.38);
}
.shot-preview {
.image-preview {
display: block;
width: 100%;
min-height: 0;
@ -1729,18 +1730,18 @@ textarea:focus {
background: transparent;
}
.shot-preview:hover {
.image-preview:hover {
transform: none;
box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.28);
}
.shot-label,
.shot-label-input {
.image-label,
.image-label-input {
min-width: 0;
font-size: var(--font-size-sm);
}
.shot-label {
.image-label {
overflow: hidden;
color: var(--color-text-secondary);
font-weight: 700;
@ -1748,7 +1749,7 @@ textarea:focus {
white-space: nowrap;
}
.shot-label-input {
.image-label-input {
width: 100%;
min-height: 36px;
padding: 0 10px;
@ -1758,17 +1759,17 @@ textarea:focus {
color: var(--color-text);
}
.shot-label-input::placeholder {
.image-label-input::placeholder {
color: rgba(185, 194, 215, 0.48);
}
.shot-label-input:focus {
.image-label-input:focus {
border-color: rgba(246, 196, 83, 0.72);
outline: none;
box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.14);
}
.shots img {
.images img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
@ -1777,12 +1778,12 @@ textarea:focus {
background: var(--color-bg-deep);
}
.shot-actions {
.image-actions {
display: flex;
gap: var(--space-2);
}
.shot-actions .shot-annotate-button,
.shot-actions .shot-delete-button {
.image-actions .image-annotate-button,
.image-actions .image-delete-button {
margin-top: 0;
}

1
website/src/styles/main.scss
View file

@ -1,3 +1,4 @@
// Rôle : point d'entrée Sass qui assemble les modules de style.
@use "tokens";
@use "nebula";
@use "base";