updated
This commit is contained in:
parent
94571943cf
commit
8ee6a87d44
7 changed files with 2317 additions and 560 deletions
415
styles.css
415
styles.css
|
|
@ -1313,9 +1313,9 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.islandClickHint { bottom: 96px !important; }
|
||||
|
||||
.selectionBubble {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
position: fixed !important;
|
||||
left: var(--bubble-left, 0px) !important;
|
||||
top: var(--bubble-top, 0px) !important;
|
||||
z-index: 36 !important;
|
||||
min-width: 138px !important;
|
||||
max-width: 224px !important;
|
||||
|
|
@ -1484,12 +1484,415 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.selectionBubble {
|
||||
position: fixed !important;
|
||||
z-index: 50 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.selectionBubble.belowSprite::after { display: none !important; }
|
||||
|
||||
.analogClock {
|
||||
top: 218px;
|
||||
right: 30px;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.analogClock { top: 176px; right: 12px; transform: scale(.82); transform-origin: top right; }
|
||||
.analogClock { top: 8px; right: 10px; transform: scale(.72); transform-origin: top right; }
|
||||
}
|
||||
|
||||
/* Settings tab alignment */
|
||||
#tab-settings .card {
|
||||
text-align: center;
|
||||
}
|
||||
#tab-settings .hint {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 34ch;
|
||||
}
|
||||
#tab-settings .toggleList {
|
||||
align-items: center;
|
||||
}
|
||||
#tab-settings .checkRow,
|
||||
#tab-settings .displayLimitField {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
#tab-settings .displayLimitField input {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.tabs .tab[data-tab="settings"] {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* v17 requested UI tightening */
|
||||
.drawQuotaBadge {
|
||||
position: fixed;
|
||||
z-index: 27;
|
||||
left: calc(50% + 154px);
|
||||
bottom: 34px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.drawDockButton[hidden] + .drawQuotaBadge { display: none !important; }
|
||||
.quotaBadge {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-height: 28px;
|
||||
padding: 5px 10px;
|
||||
border: 2px solid rgba(36,48,68,.72);
|
||||
border-radius: 999px;
|
||||
background: #fff8e4;
|
||||
box-shadow: 3px 3px 0 rgba(36,48,68,.16);
|
||||
color: #253044;
|
||||
font-size: 11px;
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.quotaBadge.quotaEmpty { background: #ffe2e7; }
|
||||
.finishActions {
|
||||
grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .9fr) !important;
|
||||
align-items: center;
|
||||
}
|
||||
.finishQuotaBadge { justify-self: center; }
|
||||
.dimensionField {
|
||||
grid-template-columns: 58px minmax(0, 1fr) !important;
|
||||
}
|
||||
.drawerHead {
|
||||
padding: 6px 10px 5px !important;
|
||||
}
|
||||
.drawerHead h1 { font-size: 20px !important; }
|
||||
.drawerHead p { margin-top: 1px !important; font-size: 11px !important; }
|
||||
.tabs { padding: 5px 7px !important; gap: 5px !important; }
|
||||
.tab { padding: 6px 4px !important; }
|
||||
.drawerBody { padding: 6px !important; }
|
||||
.card.editorCard.heroEditor { padding-top: 7px !important; }
|
||||
.quickSetupBar.twoCols {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 6px 8px !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
.compactNameField.inlineField { margin-top: 4px !important; }
|
||||
.compactEditorTop { margin-bottom: 2px !important; }
|
||||
.paintLayout {
|
||||
gap: 6px !important;
|
||||
margin: 2px 0 6px !important;
|
||||
grid-template-columns: minmax(220px, 360px) minmax(150px, 1fr) !important;
|
||||
}
|
||||
.palettePanel { gap: 4px !important; }
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(5, minmax(28px, 1fr)) !important;
|
||||
gap: 3px !important;
|
||||
padding: 4px !important;
|
||||
max-height: 360px;
|
||||
}
|
||||
.paletteSwatch, .paletteGrid button {
|
||||
min-height: 28px !important;
|
||||
}
|
||||
.paletteSwatch::after { font-size: 8px !important; }
|
||||
#tab-settings .card {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
#tab-settings .toggleList {
|
||||
width: min(100%, 340px);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
#tab-settings .checkRow,
|
||||
#tab-settings .displayLimitField {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.drawQuotaBadge {
|
||||
left: 50%;
|
||||
bottom: 78px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.finishActions { grid-template-columns: 1fr !important; }
|
||||
.quickSetupBar.twoCols { grid-template-columns: 1fr 1fr !important; }
|
||||
.paintLayout { grid-template-columns: 1fr !important; }
|
||||
.paletteGrid { grid-template-columns: repeat(8, minmax(26px, 1fr)) !important; }
|
||||
}
|
||||
|
||||
/* v18 requested UI + palette corrections */
|
||||
.drawDockButton,
|
||||
#saveAndPlace.bigPrimary {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.drawDockButton { min-width: 176px; }
|
||||
.drawQuotaBadge,
|
||||
.finishQuotaBadge {
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
justify-self: auto !important;
|
||||
display: inline-grid !important;
|
||||
min-height: 20px !important;
|
||||
padding: 3px 6px !important;
|
||||
font-size: 9px !important;
|
||||
box-shadow: none !important;
|
||||
border-width: 1px !important;
|
||||
background: rgba(255, 248, 228, .92) !important;
|
||||
}
|
||||
.drawDockButton[hidden] .drawQuotaBadge { display: none !important; }
|
||||
.finishActions {
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) !important;
|
||||
}
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(10, minmax(18px, 1fr)) !important;
|
||||
gap: 2px !important;
|
||||
padding: 3px !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.paletteSwatch,
|
||||
.paletteGrid button {
|
||||
min-height: 24px !important;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.paletteSwatch::after { font-size: 7px !important; right: 1px !important; }
|
||||
@media (max-width: 760px) {
|
||||
.drawDockButton { min-width: 156px; }
|
||||
.finishActions { grid-template-columns: 1fr !important; }
|
||||
.paletteGrid { grid-template-columns: repeat(10, minmax(20px, 1fr)) !important; }
|
||||
}
|
||||
|
||||
/* v19 requested create-layout cleanup */
|
||||
.studioDrawer {
|
||||
width: min(1060px, calc(100vw - 24px)) !important;
|
||||
}
|
||||
.card.editorCard.heroEditor {
|
||||
padding: 10px 10px 12px !important;
|
||||
}
|
||||
.creationMetaRow {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(230px, 1.55fr) 96px 24px 96px minmax(160px, .75fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 2px 0 12px;
|
||||
}
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 64px;
|
||||
margin: 0 !important;
|
||||
border: 3px solid var(--line);
|
||||
background: #fffaf0;
|
||||
color: var(--ink);
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
letter-spacing: .04em;
|
||||
padding: 10px 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.creationMetaRow .metaDimension {
|
||||
text-align: center;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.creationMetaRow .metaRole {
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
}
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #e33a4d;
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
.creationMetaRow input::placeholder {
|
||||
color: rgba(91, 105, 132, .64);
|
||||
font-weight: 520;
|
||||
opacity: 1;
|
||||
}
|
||||
.creationMetaRow select:invalid,
|
||||
.creationMetaRow select.placeholderRole {
|
||||
color: rgba(91, 105, 132, .64);
|
||||
font-weight: 520;
|
||||
}
|
||||
.compactEditorTop {
|
||||
display: none !important;
|
||||
}
|
||||
.paintLayout {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(420px, 2.2fr) minmax(250px, 340px) !important;
|
||||
gap: 24px !important;
|
||||
align-items: start !important;
|
||||
margin: 0 0 12px !important;
|
||||
}
|
||||
#paintCanvas {
|
||||
width: 100% !important;
|
||||
max-width: 650px !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
justify-self: stretch !important;
|
||||
border-width: 4px !important;
|
||||
}
|
||||
.palettePanel {
|
||||
width: 100% !important;
|
||||
align-self: start !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.paletteGrid {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
|
||||
gap: 3px !important;
|
||||
padding: 6px !important;
|
||||
margin: 0 !important;
|
||||
border: 3px solid rgba(36,48,68,.34) !important;
|
||||
background: #fff6df !important;
|
||||
overflow: hidden !important;
|
||||
align-content: start !important;
|
||||
}
|
||||
.paletteSwatch,
|
||||
.paletteGrid button {
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
width: 100% !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.paletteSwatch::after {
|
||||
font-size: 6px !important;
|
||||
right: 1px !important;
|
||||
bottom: -1px !important;
|
||||
}
|
||||
.editorToolRow,
|
||||
.editorHistoryRow {
|
||||
max-width: 650px;
|
||||
}
|
||||
.advancedRow,
|
||||
#editHint {
|
||||
max-width: 650px;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.studioDrawer { width: min(100vw - 16px, 680px) !important; }
|
||||
.creationMetaRow {
|
||||
grid-template-columns: 1fr 70px 18px 70px;
|
||||
}
|
||||
.creationMetaRow .metaRole {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 52px;
|
||||
font-size: 19px;
|
||||
}
|
||||
.paintLayout { grid-template-columns: 1fr !important; gap: 10px !important; }
|
||||
.paletteGrid { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
|
||||
.editorToolRow,
|
||||
.editorHistoryRow,
|
||||
.advancedRow,
|
||||
#editHint { max-width: none; }
|
||||
}
|
||||
|
||||
/* v20 requested refinements */
|
||||
.studioDrawer {
|
||||
width: min(424px, calc(100vw - 20px)) !important;
|
||||
}
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(0, 1fr) 62px 14px 62px !important;
|
||||
gap: 7px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
.creationMetaRow .metaRole {
|
||||
grid-column: 1 / -1 !important;
|
||||
}
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 44px !important;
|
||||
font-size: 16px !important;
|
||||
padding: 7px 10px !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.paintLayout {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
#paintCanvas {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.palettePanel {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.editorToolRow,
|
||||
.editorHistoryRow,
|
||||
.advancedRow,
|
||||
#editHint {
|
||||
max-width: none !important;
|
||||
}
|
||||
.drawDockButton .quotaBadge,
|
||||
.drawQuotaBadge {
|
||||
background: rgba(255, 126, 169, .34) !important;
|
||||
border-color: rgba(36, 48, 68, .62) !important;
|
||||
color: #253044 !important;
|
||||
}
|
||||
#saveAndPlace .quotaBadge,
|
||||
.finishQuotaBadge {
|
||||
background: rgba(63, 158, 103, .24) !important;
|
||||
border-color: rgba(22, 58, 42, .48) !important;
|
||||
color: #163a2a !important;
|
||||
}
|
||||
.quotaBadge.quotaEmpty {
|
||||
background: rgba(255, 98, 118, .34) !important;
|
||||
color: #5d1f2b !important;
|
||||
}
|
||||
.bubbleActions {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
.bubbleActions button,
|
||||
.bubbleRemixPrimary,
|
||||
#bubbleRemix,
|
||||
#bubbleTeleport {
|
||||
width: 100% !important;
|
||||
justify-self: stretch !important;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.studioDrawer { width: min(424px, calc(100vw - 12px)) !important; }
|
||||
.creationMetaRow { grid-template-columns: minmax(0, 1fr) 58px 12px 58px !important; }
|
||||
}
|
||||
|
||||
/* v21 correction: keep palette to the right of the canvas on desktop.
|
||||
The previous left-drawer shrink made the editor too narrow and forced the palette below. */
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer {
|
||||
width: min(960px, calc(100vw - 20px)) !important;
|
||||
}
|
||||
.paintLayout {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(520px, 1fr) minmax(238px, 292px) !important;
|
||||
gap: 14px !important;
|
||||
align-items: start !important;
|
||||
}
|
||||
#paintCanvas {
|
||||
width: 100% !important;
|
||||
max-width: 640px !important;
|
||||
justify-self: stretch !important;
|
||||
}
|
||||
.palettePanel {
|
||||
width: 100% !important;
|
||||
max-width: 292px !important;
|
||||
justify-self: stretch !important;
|
||||
}
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.editorToolRow,
|
||||
.editorHistoryRow,
|
||||
.advancedRow,
|
||||
#editHint {
|
||||
max-width: 640px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue