update
This commit is contained in:
parent
8ee6a87d44
commit
06176fb2d5
6 changed files with 3282 additions and 153 deletions
630
styles.css
630
styles.css
|
|
@ -1896,3 +1896,633 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
max-width: 640px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* v22 requested: compact left drawer + Create tab header layout
|
||||
Desktop drawer is capped to roughly 40% of the viewport instead of occupying most of the screen. */
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer {
|
||||
width: clamp(440px, 40vw, 620px) !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(150px, 1fr) 58px 14px 58px minmax(96px, .64fr) !important;
|
||||
gap: 8px !important;
|
||||
align-items: center !important;
|
||||
margin: 2px 0 10px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaRole {
|
||||
grid-column: auto !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 46px !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
border-width: 2px !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 850 !important;
|
||||
letter-spacing: .02em !important;
|
||||
padding: 7px 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaDimension {
|
||||
padding-left: 4px !important;
|
||||
padding-right: 4px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
display: grid !important;
|
||||
place-items: center !important;
|
||||
color: #e33a4d !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 950 !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(0, 1fr) clamp(92px, 9.2vw, 128px) !important;
|
||||
gap: 10px !important;
|
||||
align-items: start !important;
|
||||
margin: 0 0 10px !important;
|
||||
}
|
||||
|
||||
#paintCanvas {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
justify-self: stretch !important;
|
||||
}
|
||||
|
||||
.palettePanel {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
min-width: 0 !important;
|
||||
align-self: stretch !important;
|
||||
justify-self: stretch !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.paletteGrid {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
gap: 3px !important;
|
||||
padding: 5px !important;
|
||||
margin: 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.paletteSwatch,
|
||||
.paletteGrid button {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
|
||||
.editorToolRow,
|
||||
.editorHistoryRow,
|
||||
.advancedRow,
|
||||
#editHint {
|
||||
max-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 761px) and (max-width: 1100px) {
|
||||
.studioDrawer {
|
||||
width: min(440px, calc(100vw - 20px)) !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(126px, 1fr) 50px 12px 50px minmax(84px, .58fr) !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 42px !important;
|
||||
font-size: 14px !important;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
grid-template-columns: minmax(0, 1fr) 92px !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||
gap: 2px !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* v23 requested: canvas-surroundings redesign + palette cleanup */
|
||||
:root {
|
||||
--editorSurface: #efe9dc;
|
||||
--editorPanel: #f6f1e5;
|
||||
--editorLine: #314159;
|
||||
--editorMuted: #9a9aa0;
|
||||
--editorAccent: #ef4d63;
|
||||
--editorActive: #f28aaa;
|
||||
}
|
||||
|
||||
.card.editorCard.heroEditor {
|
||||
background: var(--editorSurface) !important;
|
||||
}
|
||||
|
||||
.compactEditorTop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
background: var(--editorPanel) !important;
|
||||
border-color: var(--editorLine) !important;
|
||||
color: var(--editorLine) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.creationMetaRow input::placeholder,
|
||||
.creationMetaRow select:invalid {
|
||||
color: var(--editorMuted) !important;
|
||||
}
|
||||
.creationMetaRow .metaRole {
|
||||
text-align: center !important;
|
||||
text-align-last: center !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
#paintCanvas {
|
||||
display: block !important;
|
||||
background: #ece8df !important;
|
||||
border: 6px solid var(--editorLine) !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.palettePanel {
|
||||
background: var(--editorPanel) !important;
|
||||
border: 5px solid rgba(49, 65, 89, .28) !important;
|
||||
padding: 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.paletteGrid {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
gap: 6px !important;
|
||||
align-content: start !important;
|
||||
}
|
||||
|
||||
.paletteSwatch,
|
||||
.paletteGrid button {
|
||||
position: relative !important;
|
||||
border: 4px solid rgba(76, 76, 76, .45) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.paletteSwatch::after,
|
||||
.paletteGrid button::after {
|
||||
content: attr(data-code) !important;
|
||||
position: absolute !important;
|
||||
right: 3px !important;
|
||||
bottom: 0 !important;
|
||||
font-size: 10px !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 800 !important;
|
||||
color: rgba(30, 40, 55, .66) !important;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.52) !important;
|
||||
}
|
||||
|
||||
.paletteSwatch.active,
|
||||
.paletteGrid button.active {
|
||||
border-color: var(--editorActive) !important;
|
||||
box-shadow: inset 0 0 0 5px rgba(255, 192, 208, .92) !important;
|
||||
}
|
||||
|
||||
.basicEditorTools,
|
||||
.editorUtilityRow {
|
||||
display: grid !important;
|
||||
gap: 0 !important;
|
||||
margin: 0 0 14px !important;
|
||||
border: 5px solid var(--editorAccent) !important;
|
||||
background: var(--editorSurface) !important;
|
||||
}
|
||||
|
||||
.basicEditorTools {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.editorUtilityRow {
|
||||
grid-template-columns: minmax(0, 1.14fr) repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.basicEditorTools .tool,
|
||||
.editorUtilityRow .tool {
|
||||
min-height: 98px !important;
|
||||
border: none !important;
|
||||
border-right: 5px solid var(--editorAccent) !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
color: #7f7d7a !important;
|
||||
font-size: clamp(20px, 2.4vw, 38px) !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: .01em !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
.basicEditorTools .tool:last-child,
|
||||
.editorUtilityRow .tool:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
.basicEditorTools .tool.active,
|
||||
.editorUtilityRow .tool.active {
|
||||
background: rgba(255,255,255,.24) !important;
|
||||
color: #434951 !important;
|
||||
}
|
||||
.basicEditorTools .tool:disabled,
|
||||
.editorUtilityRow .tool:disabled {
|
||||
color: rgba(127,125,122,.55) !important;
|
||||
}
|
||||
|
||||
.advancedPanel {
|
||||
border: 5px solid var(--editorAccent) !important;
|
||||
background: #ececeb !important;
|
||||
padding: 16px 16px 12px !important;
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.advancedPanelHeader {
|
||||
color: #7f7d7a !important;
|
||||
font-size: clamp(28px, 3vw, 54px) !important;
|
||||
line-height: 1.05 !important;
|
||||
letter-spacing: .01em !important;
|
||||
margin: 0 0 10px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .advancedDrawRow,
|
||||
.advancedPanel .advancedActionRow,
|
||||
.advancedPanel .extraAdvancedRow {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .toolRow {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .tool,
|
||||
.advancedPanel select,
|
||||
.advancedPanel .particleControl {
|
||||
border-width: 3px !important;
|
||||
border-color: rgba(49, 65, 89, .78) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.advancedPanel .hint {
|
||||
display: block !important;
|
||||
color: #5d6570 !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.45 !important;
|
||||
}
|
||||
|
||||
#editHint {
|
||||
margin: 2px 0 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer {
|
||||
width: min(40vw, 1024px) !important;
|
||||
max-width: calc(100vw - 20px) !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(170px, 1.5fr) 78px 26px 78px minmax(110px, .96fr) !important;
|
||||
gap: 16px !important;
|
||||
margin: 0 0 18px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 92px !important;
|
||||
padding: 14px 20px !important;
|
||||
border-width: 4px !important;
|
||||
font-size: 32px !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
font-size: 52px !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
grid-template-columns: minmax(0, 1fr) 255px !important;
|
||||
gap: 22px !important;
|
||||
margin-bottom: 18px !important;
|
||||
}
|
||||
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.paletteSwatch,
|
||||
.paletteGrid button {
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.paintLayout {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
|
||||
.palettePanel {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.basicEditorTools .tool,
|
||||
.editorUtilityRow .tool {
|
||||
min-height: 64px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.advancedPanelHeader {
|
||||
font-size: 26px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(0, 1fr) 58px 14px 58px !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
.creationMetaRow .metaRole {
|
||||
grid-column: 1 / -1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* v24: align canvas, primary tools, and palette exactly as one editor block */
|
||||
.paintMainColumn {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto auto auto !important;
|
||||
gap: 14px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.paintMainColumn #paintCanvas {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
.basicEditorTools,
|
||||
.editorUtilityRow {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.advancedPanel {
|
||||
min-height: 174px !important;
|
||||
}
|
||||
@media (min-width: 761px) {
|
||||
.paintLayout {
|
||||
align-items: start !important;
|
||||
}
|
||||
.palettePanel {
|
||||
min-height: 100% !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.paintMainColumn {
|
||||
gap: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* v25: requested layout-only cleanup. Keep existing button design; move controls around the canvas. */
|
||||
:root {
|
||||
--createGap: 12px;
|
||||
}
|
||||
|
||||
.card.editorCard.heroEditor {
|
||||
background: var(--panel) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer {
|
||||
width: clamp(430px, 40vw, 760px) !important;
|
||||
max-width: calc(100vw - 20px) !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(136px, 1.35fr) clamp(52px, 5vw, 76px) 20px clamp(52px, 5vw, 76px) minmax(94px, .92fr) !important;
|
||||
gap: 12px !important;
|
||||
margin: 0 0 var(--createGap) !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 54px !important;
|
||||
min-height: 0 !important;
|
||||
border: 2px solid var(--line) !important;
|
||||
background: #fffdf5 !important;
|
||||
box-shadow: 3px 3px 0 rgba(36, 48, 68, .14) !important;
|
||||
color: var(--ink) !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 850 !important;
|
||||
padding: 9px 10px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaDimension {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
display: grid !important;
|
||||
place-items: center !important;
|
||||
color: var(--danger) !important;
|
||||
font-size: 26px !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 950 !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
grid-template-columns: minmax(0, 1fr) clamp(104px, 10.5vw, 156px) !important;
|
||||
gap: 14px !important;
|
||||
align-items: start !important;
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
|
||||
.paintMainColumn {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto auto auto !important;
|
||||
gap: 10px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.paintMainColumn #paintCanvas {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
border: 3px solid var(--line) !important;
|
||||
background:
|
||||
linear-gradient(45deg, #f4ebdc 25%, transparent 25%) 0 0/16px 16px,
|
||||
linear-gradient(45deg, transparent 75%, #f4ebdc 75%) 0 0/16px 16px,
|
||||
#fffaf0 !important;
|
||||
}
|
||||
|
||||
.palettePanel {
|
||||
width: 100% !important;
|
||||
align-self: stretch !important;
|
||||
background: #fff7de !important;
|
||||
border: 2px solid rgba(36, 48, 68, .28) !important;
|
||||
padding: 8px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.paletteGrid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
gap: 4px !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
align-content: start !important;
|
||||
}
|
||||
|
||||
.paletteSwatch,
|
||||
.paletteGrid button {
|
||||
border: 2px solid rgba(36, 48, 68, .42) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
|
||||
.paletteSwatch.active,
|
||||
.paletteGrid button.active {
|
||||
border-color: var(--danger) !important;
|
||||
box-shadow: inset 0 0 0 3px rgba(255,255,255,.55) !important;
|
||||
outline: 2px solid rgba(36, 48, 68, .65) !important;
|
||||
outline-offset: -5px !important;
|
||||
}
|
||||
|
||||
.basicEditorTools,
|
||||
.editorUtilityRow {
|
||||
display: grid !important;
|
||||
gap: 8px !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.basicEditorTools {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.editorUtilityRow {
|
||||
grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.basicEditorTools .tool,
|
||||
.editorUtilityRow .tool {
|
||||
min-height: 42px !important;
|
||||
border: 2px solid var(--line) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 3px 3px 0 rgba(36, 48, 68, .16) !important;
|
||||
color: var(--ink) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.15 !important;
|
||||
font-weight: 850 !important;
|
||||
padding: 8px 7px !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.basicEditorTools .tool:active,
|
||||
.editorUtilityRow .tool:active {
|
||||
transform: translate(2px, 2px) !important;
|
||||
box-shadow: 1px 1px 0 rgba(36, 48, 68, .16) !important;
|
||||
}
|
||||
|
||||
.advancedPanel {
|
||||
margin-top: 0 !important;
|
||||
padding: 12px !important;
|
||||
border: 2px solid var(--line) !important;
|
||||
background: var(--panel-2) !important;
|
||||
min-height: 0 !important;
|
||||
box-shadow: 4px 4px 0 rgba(36, 48, 68, .12) !important;
|
||||
}
|
||||
|
||||
.advancedPanelHeader {
|
||||
font-size: 16px !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1.2 !important;
|
||||
color: var(--ink) !important;
|
||||
margin: 0 0 8px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .advancedDrawRow,
|
||||
.advancedPanel .advancedActionRow,
|
||||
.advancedPanel .extraAdvancedRow {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .hint {
|
||||
font-size: 12px !important;
|
||||
line-height: 1.45 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 761px) and (max-width: 1180px) {
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(120px, 1.25fr) 48px 16px 48px minmax(82px, .86fr) !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 46px !important;
|
||||
font-size: 13px !important;
|
||||
padding: 7px 8px !important;
|
||||
}
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
.paintLayout {
|
||||
grid-template-columns: minmax(0, 1fr) 108px !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
.paletteGrid {
|
||||
gap: 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.basicEditorTools,
|
||||
.editorUtilityRow {
|
||||
gap: 8px !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.basicEditorTools .tool,
|
||||
.editorUtilityRow .tool {
|
||||
min-height: 40px !important;
|
||||
border: 2px solid var(--line) !important;
|
||||
box-shadow: 3px 3px 0 rgba(36, 48, 68, .16) !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 850 !important;
|
||||
}
|
||||
.advancedPanel {
|
||||
border: 2px solid var(--line) !important;
|
||||
background: var(--panel-2) !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
.advancedPanelHeader {
|
||||
font-size: 15px !important;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue