333/pixel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated

Browse source
This commit is contained in:
33333-33333 2026-06-01 21:17:09 +09:00
commit 89a32dc28e
4 changed files with 490 additions and 679 deletions
Download patch file Download diff file Expand all files Collapse all files

137
styles.css
View file

@ -31,11 +31,6 @@ body {
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled {
cursor: not-allowed;
opacity: .48;
transform: none;
}
.app {
position: relative;
@ -183,7 +178,7 @@ button:disabled {
.edgeAdd:hover { background: var(--pink-dark); }
.edgeAdd:active { transform: translateY(calc(-50% + 2px)); box-shadow: 2px 2px 0 rgba(34,45,63,.22); }
.toolHud {
.toolHud {
right: 14px;
top: 116px;
display: grid;
@ -192,14 +187,6 @@ button:disabled {
padding: 9px;
}
.settingsPanel {
top: 142px;
right: 126px;
z-index: 6;
padding: 10px 12px;
min-width: 150px;
}
.iconButton,
button,
.ghostButton,
@ -430,16 +417,12 @@ input[type="checkbox"] { width: auto; margin: 0 8px 0 0; }
.toolRow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
align-items: center;
margin-bottom: 8px;
}
.editorActions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.toolRow input { margin: 0; }
.tool { padding: 7px 5px; font-size: 11px; }
@ -563,7 +546,7 @@ input[type="checkbox"] { width: auto; margin: 0 8px 0 0; }
.toolHud { top: auto; bottom: 122px; right: 10px; }
.infoHud { left: 10px; right: 10px; width: auto; }
.studioDrawer { width: calc(100vw - 18px); }
.toolRow { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
.toolRow { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
}
/* refinements */
@ -600,7 +583,7 @@ input[type="checkbox"] { width: auto; margin: 0 8px 0 0; }
max-height: min(42vh, 330px);
}
.toolRow {
grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 0;
}
.paletteGrid {
@ -721,21 +704,6 @@ body, button, input, select, textarea { font-smooth: never; -webkit-font-smoothi
/* Selection bubble + outline controls */
.palettePanel { display: grid; gap: 8px; }
.outlineControls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
align-items: center;
font-size: 10px;
}
.outlineControls span {
grid-column: 1 / -1;
display: block;
border: 2px solid rgba(36,48,68,.28);
background: #fffaf0;
padding: 5px 6px;
font-weight: 900;
}
.selectionBubble {
position: absolute;
left: 0;
@ -816,3 +784,100 @@ body, button, input, select, textarea { font-smooth: never; -webkit-font-smoothi
.bubbleVotes button.activeVote {
background: var(--sun);
}
/* Pixel-ish UI refinements */
body, button, input, select, textarea {
font-family: "Courier New", "Lucida Console", Monaco, monospace;
letter-spacing: .02em;
}
button, .tab, .tool, .iconButton, .cardTitle, .logo {
text-transform: uppercase;
font-weight: 900;
}
.libraryHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.hiddenAssetPanel {
border: 2px dashed rgba(36,48,68,.35);
background: #fff3d6;
padding: 8px;
}
.compactAssetList .assetCard { opacity: .82; }
.librarySectionTitle {
margin: 12px 0 6px;
padding: 5px 7px;
background: #ffe6f0;
border: 2px solid var(--line);
box-shadow: 3px 3px 0 rgba(36,48,68,.12);
font-size: 12px;
font-weight: 900;
}
.advancedRow {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px;
align-items: center;
margin-top: 8px;
}
.advancedOnly.active { background: #bde9ff; }
.depthLegend {
font-size: 10px;
color: var(--muted);
}
/* Simplified current UI */
body, button, input, select, textarea {
font-family: "MS Gothic", "Osaka-Mono", "DotumChe", "Courier New", ui-monospace, monospace;
letter-spacing: .02em;
-webkit-font-smoothing: none;
text-rendering: geometricPrecision;
}
.toolRow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.advancedRow {
grid-template-columns: max-content max-content max-content 1fr;
gap: 6px;
}
.librarySectionTitle {
display: block;
width: 100%;
text-align: left;
margin: 10px 0 6px;
cursor: pointer;
}
.librarySectionTitle::after {
content: " click: genre";
float: right;
color: var(--muted);
font-size: 10px;
}
.assetSectionGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-height: 360px;
overflow-y: auto;
padding-right: 4px;
}
.libraryEmptyNote {
color: var(--muted);
font-size: 12px;
border: 2px dashed rgba(36,48,68,.2);
padding: 8px;
background: #fff9e8;
}
.assetSectionGrid .assetCard {
grid-template-columns: 54px 1fr;
gap: 8px;
}
.assetSectionGrid .assetPreview {
width: 52px;
height: 52px;
}
.assetSectionGrid .assetActions button { padding: 4px 5px; font-size: 10px; }
@media (max-width: 720px) {
.assetSectionGrid { grid-template-columns: 1fr; max-height: none; }
.advancedRow { grid-template-columns: 1fr 1fr 1fr; }
}