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

improve style & add icon toolboxes
All checks were successful
Deploy Sokko G / deploy (push) Successful in 5s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-21 13:47:19 +02:00
parent 9e275e0167
commit 0493db233a
31 changed files with 317 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,14 @@
rgba(5, 7, 17, 0.72);
}
.toolbox-icon-cover {
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 38%, rgba(34, 211, 238, 0.16), transparent 42%),
var(--gradient-nebula);
}
.game-card-cover img,
.toolbox-card-cover img {
display: block;
@ -27,6 +35,14 @@
object-fit: cover;
}
.toolbox-icon-cover img {
display: block;
width: min(78px, 42%);
height: auto;
object-fit: contain;
filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34));
}
.badge {
display: inline-flex;
min-height: 24px;

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

@ -182,8 +182,8 @@ span {
}
.dialogue-line i {
color: var(--color-text-muted);
font-style: normal;
color: var(--color-text-secondary);
font-style: italic;
}
.dialogue-caption {

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

@ -142,6 +142,16 @@
grid-template-columns: 1fr;
}
.toolbox-actions-row {
align-items: stretch;
flex-direction: column;
}
.toolbox-actions-row > div,
.toolbox-actions-row > div:last-child {
justify-content: flex-start;
}
.tool-add-modal {
width: min(420px, calc(100vw - 32px));
}

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

@ -17,6 +17,92 @@
cursor: text;
}
.toolbox-title-row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.toolbox-icon-picker {
position: relative;
z-index: 70;
flex: 0 0 auto;
}
.toolbox-icon-picker-button,
.toolbox-game-icon {
width: 100px;
min-width: 100px;
min-height: 100px;
border-color: var(--color-primary-border);
background:
radial-gradient(circle at 50% 35%, rgba(34, 211, 238, 0.18), transparent 44%),
rgba(21, 26, 48, 0.86);
}
.toolbox-icon-picker-button {
padding: 0;
}
.toolbox-game-icon {
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--color-primary-border);
border-radius: var(--radius-md);
}
.toolbox-icon-picker-button img,
.toolbox-game-icon img {
width: 72px;
height: 72px;
object-fit: contain;
}
.toolbox-game-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.toolbox-icon-picker-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 120;
display: grid;
grid-template-columns: repeat(5, 42px);
gap: 7px;
width: max-content;
max-width: min(260px, calc(100vw - 48px));
padding: 9px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: rgba(12, 15, 32, 0.96);
box-shadow: var(--shadow-lg);
}
.toolbox-icon-picker-menu button {
width: 42px;
min-width: 42px;
min-height: 42px;
padding: 0;
border-color: var(--color-border);
background: rgba(21, 26, 48, 0.72);
}
.toolbox-icon-picker-menu button.active {
border-color: var(--color-accent-cyan);
background: rgba(34, 211, 238, 0.12);
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}
.toolbox-icon-picker-menu img {
width: 26px;
height: 26px;
object-fit: contain;
}
.toolbox-title:focus {
background: rgba(7, 10, 24, 0.72);
outline: 1px solid rgba(34, 211, 238, 0.72);
@ -121,6 +207,31 @@
margin-top: var(--space-4);
}
.toolbox-summary {
max-width: 760px;
margin: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.toolbox-actions-row {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.toolbox-actions-row > div {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.toolbox-actions-row > div:last-child {
justify-content: flex-end;
}
.modules {
align-items: start;
}