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

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;
}