slim
This commit is contained in:
parent
43b659b64b
commit
06ab438d7b
13 changed files with 1167 additions and 3747 deletions
436
styles.css
436
styles.css
|
|
@ -97,7 +97,6 @@ button { -webkit-tap-highlight-color: transparent; }
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.authorCard {
|
||||
width: 190px;
|
||||
border: 2px solid var(--line);
|
||||
|
|
@ -423,7 +422,6 @@ input[type="checkbox"] { width: auto; margin: 0 8px 0 0; }
|
|||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.editorToolRow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.editorHistoryRow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.editorMoveRow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
|
|
@ -475,16 +473,53 @@ button:disabled, .tool:disabled { opacity: .45; cursor: not-allowed; transform:
|
|||
.lineageNote { min-height: 18px; color: var(--muted); font-size: 12px; }
|
||||
|
||||
.assetList { display: grid; gap: 10px; }
|
||||
.collectionToolbar {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 2px solid rgba(36,48,68,.22);
|
||||
background: #f8fbff;
|
||||
}
|
||||
.collectionSummary {
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
}
|
||||
.collectionSearch {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 8px 9px;
|
||||
border: 2px solid rgba(36,48,68,.28);
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
.collectionFilters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.collectionFilter {
|
||||
flex: 0 0 auto;
|
||||
padding: 6px 8px;
|
||||
border: 2px solid rgba(36,48,68,.24);
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
.collectionFilter.active {
|
||||
border-color: var(--line);
|
||||
background: #dff4ff;
|
||||
}
|
||||
.assetCard {
|
||||
display: grid;
|
||||
grid-template-columns: 68px 1fr;
|
||||
gap: 10px;
|
||||
border: 2px solid var(--line);
|
||||
background: #fff9e8;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
box-shadow: 3px 3px 0 rgba(36,48,68,.12);
|
||||
box-shadow: 0 2px 0 rgba(36,48,68,.08);
|
||||
}
|
||||
.assetCard.selected { background: #e6ffef; }
|
||||
.assetCard.selected { background: #eefbf3; border-color: #3f7d58; }
|
||||
.assetPreview {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
|
@ -494,6 +529,25 @@ button:disabled, .tool:disabled { opacity: .45; cursor: not-allowed; transform:
|
|||
}
|
||||
.assetMeta strong { display: block; font-size: 14px; }
|
||||
.assetMeta span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; }
|
||||
.assetStatusRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.assetMeta .assetStatus {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
margin-top: 0;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(36,48,68,.2);
|
||||
background: #f5f5f5;
|
||||
color: #3d4652;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.assetMeta .assetStatus.placed { background: #e3f8e8; color: #28633e; }
|
||||
.assetMeta .assetStatus.role { background: #eef2ff; color: #3e4f78; }
|
||||
.assetActions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -528,8 +582,6 @@ button:disabled, .tool:disabled { opacity: .45; cursor: not-allowed; transform:
|
|||
.legend .grass { background: #8bce76; }
|
||||
.legend .highland { background: #a7be80; }
|
||||
|
||||
#dataBox { min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
|
||||
|
||||
.toast {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
|
|
@ -554,7 +606,6 @@ button:disabled, .tool:disabled { opacity: .45; cursor: not-allowed; transform:
|
|||
.toolRow { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* refinements */
|
||||
.toolHud {
|
||||
top: 142px;
|
||||
right: 18px;
|
||||
|
|
@ -670,11 +721,9 @@ button:disabled, .tool:disabled { opacity: .45; cursor: not-allowed; transform:
|
|||
.sideSwitcher button { white-space: nowrap; }
|
||||
.heroEditor .hint { line-height: 1.35; }
|
||||
|
||||
|
||||
.compactEditorTop { margin-bottom: 4px; min-height: 0; }
|
||||
body, button, input, select, textarea { font-smooth: never; -webkit-font-smoothing: none; }
|
||||
|
||||
/* latest layout fixes */
|
||||
.studioDrawer { width: min(600px, calc(100vw - 24px)); }
|
||||
.paintLayout {
|
||||
display: grid;
|
||||
|
|
@ -707,7 +756,6 @@ body, button, input, select, textarea { font-smooth: never; -webkit-font-smoothi
|
|||
.paletteGrid { grid-template-columns: repeat(10, 1fr); max-height: none; }
|
||||
}
|
||||
|
||||
/* Selection bubble + outline controls */
|
||||
.palettePanel { display: grid; gap: 8px; }
|
||||
.selectionBubble {
|
||||
position: absolute;
|
||||
|
|
@ -790,7 +838,6 @@ body, button, input, select, textarea { font-smooth: never; -webkit-font-smoothi
|
|||
background: var(--sun);
|
||||
}
|
||||
|
||||
/* Pixel-ish UI refinements */
|
||||
body, button, input, select, textarea {
|
||||
font-family: "Courier New", "Lucida Console", Monaco, monospace;
|
||||
letter-spacing: .02em;
|
||||
|
|
@ -833,7 +880,6 @@ button, .tab, .tool, .iconButton, .cardTitle, .logo {
|
|||
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;
|
||||
|
|
@ -851,10 +897,10 @@ body, button, input, select, textarea {
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 10px 0 6px;
|
||||
cursor: pointer;
|
||||
cursor: default;
|
||||
}
|
||||
.librarySectionTitle::after {
|
||||
content: " click: genre";
|
||||
content: "";
|
||||
float: right;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
|
|
@ -890,7 +936,6 @@ body, button, input, select, textarea {
|
|||
.advancedRow { grid-template-columns: 1fr 1fr 1fr; }
|
||||
}
|
||||
|
||||
|
||||
.syncStats {
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
|
|
@ -900,7 +945,6 @@ body, button, input, select, textarea {
|
|||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Phase 5: keep advanced depth controls inside the drawer. */
|
||||
.advancedRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -920,9 +964,6 @@ body, button, input, select, textarea {
|
|||
flex: 1 0 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
#guardrailStats {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.bubbleActions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -931,7 +972,6 @@ body, button, input, select, textarea {
|
|||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Phase 5 follow-up: object hidden list + report dialog + font priority. */
|
||||
body, button, input, select, textarea {
|
||||
font-family: "3x5 MT Pixel Font", "Press Start 2P", "PixelMplus10", "DotGothic16", "MS Gothic", "Osaka-Mono", "Courier New", ui-monospace, monospace;
|
||||
}
|
||||
|
|
@ -964,12 +1004,10 @@ body, button, input, select, textarea {
|
|||
.reportActions button { min-width: 0; }
|
||||
.assetActions button { min-width: 0; }
|
||||
|
||||
|
||||
.toggleList { display:flex; flex-direction:column; gap:10px; }
|
||||
.checkRow { display:flex; align-items:center; gap:10px; font-size:13px; color:#243044; }
|
||||
.checkRow input { width:16px; height:16px; }
|
||||
|
||||
/* Phase 5 UI polish: larger readable controls while keeping palette code labels small. */
|
||||
body, button, input, select, textarea { font-size: 15px; }
|
||||
.logo { font-size: 24px; }
|
||||
.subline { font-size: 14px; }
|
||||
|
|
@ -1001,8 +1039,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.displayLimitField input { font-size: 16px; min-height: 36px; width: 110px; }
|
||||
.rotationBadge { font-size: 13px; color: #4d5b72; }
|
||||
|
||||
|
||||
/* exhibition/account polish */
|
||||
.authorCard { min-width: 210px; }
|
||||
.authorCard small { display:block; margin-top:6px; font-size:12px; line-height:1.35; opacity:.82; }
|
||||
.miniButton { margin-top:6px; padding:6px 8px; border:2px solid #243044; background:#fff3d9; box-shadow:2px 2px 0 rgba(36,48,68,.22); cursor:pointer; font-size:12px; }
|
||||
|
|
@ -1016,8 +1052,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.hiddenReasonText { color:#6f2f3b; font-weight:700; }
|
||||
.exhibitionNote { padding:8px 10px; background:#fff3d9; border:2px solid rgba(36,48,68,.2); margin-bottom:8px; font-size:14px; line-height:1.45; }
|
||||
|
||||
|
||||
/* compact account bar / remove right-side HUD */
|
||||
.toolHud { display: none !important; }
|
||||
.topHud { min-height: 50px; padding: 8px 12px; gap: 10px; align-items: center; }
|
||||
.authorCard {
|
||||
|
|
@ -1043,7 +1077,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.authorCard small { max-width: 100%; }
|
||||
}
|
||||
|
||||
/* 2026 polish pass: make the island the visual default, keep creation and collection one click away. */
|
||||
.islandTopBar {
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
|
|
@ -1084,9 +1117,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.topButton.primary { background: var(--mint) !important; }
|
||||
.utilityControl { display: none !important; }
|
||||
.edgeAdd { display: none !important; }
|
||||
.devOnly { display: none !important; }
|
||||
|
||||
/* Beginner-first editor: show only Pencil/Erase/Fill/Pick + Undo/Redo until Advanced is enabled. */
|
||||
.advancedTool { display: none !important; }
|
||||
.studioDrawer.advancedTools .advancedTool { display: inline-flex !important; }
|
||||
.studioDrawer.advancedTools .toolRow .advancedTool { display: block !important; }
|
||||
|
|
@ -1094,10 +1124,10 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.editorHistoryRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
|
||||
.studioDrawer.advancedTools .editorToolRow { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
|
||||
.studioDrawer.advancedTools .editorHistoryRow { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
|
||||
#editHint { opacity: .78; }
|
||||
#editHint::after { content: " Advanced reveals line, rectangle, selection, flip, light, depth, and particles."; }
|
||||
#editHint { display: none !important; }
|
||||
#advancedHint { display: none !important; }
|
||||
#editHint::after { content: none; }
|
||||
|
||||
/* Let the island breathe under the lighter navigation. */
|
||||
#worldCanvas { background: #8dd7ff; }
|
||||
.selectionBubble {
|
||||
border-width: 2px !important;
|
||||
|
|
@ -1110,7 +1140,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.topButton { padding: 7px 8px !important; }
|
||||
}
|
||||
|
||||
/* v8 account, editor, and placement refinements */
|
||||
.islandClickHint {
|
||||
position: fixed;
|
||||
left: 14px;
|
||||
|
|
@ -1240,7 +1269,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.advancedDrawRow, .advancedActionRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
|
||||
}
|
||||
|
||||
/* v9 menu and particle-range refinements */
|
||||
.cuteMenuButton {
|
||||
flex: 0 0 auto;
|
||||
width: 38px;
|
||||
|
|
@ -1285,7 +1313,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.particleRangeButtons { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
/* v10 bottom DRAW access and remix bottom sheet */
|
||||
.drawDockButton {
|
||||
position: fixed;
|
||||
z-index: 28;
|
||||
|
|
@ -1379,8 +1406,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.islandClickHint { display: none; }
|
||||
}
|
||||
|
||||
|
||||
/* v15 analog day-night clock */
|
||||
.analogClock {
|
||||
--clock-rotate: 0deg;
|
||||
position: fixed;
|
||||
|
|
@ -1460,8 +1485,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.analogClock { top: 82px; right: 10px; transform: scale(.86); transform-origin: top right; }
|
||||
}
|
||||
|
||||
|
||||
/* v16 layout refinements */
|
||||
.inlineField {
|
||||
display: grid;
|
||||
grid-template-columns: 86px minmax(0, 1fr);
|
||||
|
|
@ -1496,7 +1519,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.analogClock { top: 8px; right: 10px; transform: scale(.72); transform-origin: top right; }
|
||||
}
|
||||
|
||||
/* Settings tab alignment */
|
||||
#tab-settings .card {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1523,7 +1545,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* v17 requested UI tightening */
|
||||
.drawQuotaBadge {
|
||||
position: fixed;
|
||||
z-index: 27;
|
||||
|
|
@ -1617,7 +1638,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.paletteGrid { grid-template-columns: repeat(8, minmax(26px, 1fr)) !important; }
|
||||
}
|
||||
|
||||
/* v18 requested UI + palette corrections */
|
||||
.drawDockButton,
|
||||
#saveAndPlace.bigPrimary {
|
||||
display: inline-flex !important;
|
||||
|
|
@ -1663,7 +1683,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.paletteGrid { grid-template-columns: repeat(10, minmax(20px, 1fr)) !important; }
|
||||
}
|
||||
|
||||
/* v19 requested create-layout cleanup */
|
||||
.studioDrawer {
|
||||
width: min(1060px, calc(100vw - 24px)) !important;
|
||||
}
|
||||
|
|
@ -1795,7 +1814,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
#editHint { max-width: none; }
|
||||
}
|
||||
|
||||
/* v20 requested refinements */
|
||||
.studioDrawer {
|
||||
width: min(424px, calc(100vw - 20px)) !important;
|
||||
}
|
||||
|
|
@ -1864,8 +1882,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.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;
|
||||
|
|
@ -1897,8 +1913,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
|
|
@ -2022,7 +2036,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
}
|
||||
}
|
||||
|
||||
/* v23 requested: canvas-surroundings redesign + palette cleanup */
|
||||
:root {
|
||||
--editorSurface: #efe9dc;
|
||||
--editorPanel: #f6f1e5;
|
||||
|
|
@ -2155,18 +2168,14 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
}
|
||||
|
||||
.advancedPanel {
|
||||
border: 5px solid var(--editorAccent) !important;
|
||||
background: #ececeb !important;
|
||||
padding: 16px 16px 12px !important;
|
||||
margin-top: 2px !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
padding: 8px 0 0 !important;
|
||||
margin-top: 0 !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;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.advancedPanel .advancedDrawRow,
|
||||
|
|
@ -2273,7 +2282,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
}
|
||||
}
|
||||
|
||||
/* v24: align canvas, primary tools, and palette exactly as one editor block */
|
||||
.paintMainColumn {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto auto auto !important;
|
||||
|
|
@ -2305,7 +2313,6 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
}
|
||||
}
|
||||
|
||||
/* v25: requested layout-only cleanup. Keep existing button design; move controls around the canvas. */
|
||||
:root {
|
||||
--createGap: 12px;
|
||||
}
|
||||
|
|
@ -2526,3 +2533,308 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
font-weight: 900 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#tab-draw .card.editorCard.heroEditor {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 28px !important;
|
||||
min-height: 28px !important;
|
||||
padding: 3px 7px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.1 !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.creationMetaRow .dimensionSeparator {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
align-items: start !important;
|
||||
}
|
||||
|
||||
.drawControlPanel {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
align-self: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.drawControlPanel .basicEditorTools,
|
||||
.drawControlPanel .editorUtilityRow {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.drawControlPanel .advancedPanel {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#saveAndPlace.bigPrimary {
|
||||
min-width: 0 !important;
|
||||
max-width: 100% !important;
|
||||
white-space: normal !important;
|
||||
overflow-wrap: anywhere !important;
|
||||
line-height: 1.15 !important;
|
||||
flex-wrap: wrap !important;
|
||||
row-gap: 3px !important;
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
|
||||
#saveAndPlace.bigPrimary > span:first-child {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
#saveAndPlace .finishQuotaBadge {
|
||||
max-width: 100% !important;
|
||||
white-space: normal !important;
|
||||
overflow-wrap: anywhere !important;
|
||||
line-height: 1.1 !important;
|
||||
font-size: 9px !important;
|
||||
padding: 2px 5px !important;
|
||||
}
|
||||
|
||||
.collectionViewTabs.tabs {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border: 2px solid var(--line);
|
||||
box-shadow: 3px 3px 0 rgba(36,48,68,.12);
|
||||
margin: 2px 0 0;
|
||||
padding: 6px !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.collectionViewTab.tab {
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 7px 5px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer {
|
||||
width: clamp(520px, 42vw, 760px) !important;
|
||||
}
|
||||
|
||||
.creationMetaRow {
|
||||
grid-template-columns: minmax(120px, 1.35fr) clamp(42px, 4vw, 58px) 12px clamp(42px, 4vw, 58px) minmax(82px, .9fr) !important;
|
||||
gap: 8px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
grid-template-columns: minmax(0, 1fr) clamp(148px, 12vw, 210px) !important;
|
||||
gap: 12px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.paintMainColumn {
|
||||
grid-template-rows: auto auto !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.paintMainColumn #paintCanvas {
|
||||
max-height: min(58vh, 560px) !important;
|
||||
}
|
||||
|
||||
.paintMainColumn .palettePanel {
|
||||
min-height: 0 !important;
|
||||
align-self: start !important;
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.paintMainColumn .paletteGrid {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
|
||||
gap: 3px !important;
|
||||
}
|
||||
|
||||
.paintMainColumn .paletteSwatch,
|
||||
.paintMainColumn .paletteGrid button {
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.drawControlPanel .basicEditorTools {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.drawControlPanel .editorUtilityRow {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.drawControlPanel .basicEditorTools .tool,
|
||||
.drawControlPanel .editorUtilityRow .tool {
|
||||
min-height: 36px !important;
|
||||
padding: 7px 6px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.drawControlPanel .advancedPanel {
|
||||
padding: 8px !important;
|
||||
max-height: calc(100vh - 330px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.drawControlPanel .advancedPanelHeader {
|
||||
display: block !important;
|
||||
font-size: 12px !important;
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .advancedDrawRow,
|
||||
.advancedPanel .advancedActionRow,
|
||||
.advancedPanel .extraAdvancedRow {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
gap: 5px !important;
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .tool {
|
||||
min-height: 30px !important;
|
||||
padding: 5px 4px !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.advancedPanel .particleControlGroup {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 761px) and (max-height: 780px) {
|
||||
.drawerHead {
|
||||
padding-top: 4px !important;
|
||||
padding-bottom: 3px !important;
|
||||
}
|
||||
.drawerHead p {
|
||||
display: none;
|
||||
}
|
||||
.tabs {
|
||||
padding-top: 4px !important;
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
.drawControlPanel .advancedPanel {
|
||||
max-height: calc(100vh - 285px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.creationMetaRow .metaInput,
|
||||
.creationMetaRow select.metaInput {
|
||||
height: 26px !important;
|
||||
min-height: 26px !important;
|
||||
font-size: 12px !important;
|
||||
padding: 3px 6px !important;
|
||||
}
|
||||
|
||||
.paintLayout {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.paintMainColumn {
|
||||
grid-template-rows: auto auto !important;
|
||||
}
|
||||
|
||||
.paintMainColumn .paletteGrid {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.drawControlPanel {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.drawControlPanel .advancedPanel {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#saveAndPlace.bigPrimary {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.collectionViewTab.tab {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer.advancedTools .drawControlPanel .editorToolRow,
|
||||
.studioDrawer.advancedTools .drawControlPanel .basicEditorTools,
|
||||
.studioDrawer.advancedTools .drawControlPanel .editorUtilityRow {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root { --drawer-z: 70; --bubble-z: 34; }
|
||||
[hidden], .advancedToolGroup[hidden], .advancedOnly[hidden], #particleDirectionWrap[hidden] { display: none !important; }
|
||||
.studioDrawer { z-index: var(--drawer-z) !important; }
|
||||
.selectionBubble { z-index: var(--bubble-z) !important; }
|
||||
.studioDrawer:not(.advancedTools) .advancedPanel { display: none !important; }
|
||||
|
||||
.tool {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 6px !important;
|
||||
border: 2px solid var(--line, #243044) !important;
|
||||
color: var(--line, #243044) !important;
|
||||
background: var(--toolBg, #f7f4ea) !important;
|
||||
box-shadow: 2px 2px 0 rgba(36,48,68,.14) !important;
|
||||
}
|
||||
.tool:where(:not(:disabled)):hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(36,48,68,.16) !important; }
|
||||
.tool.active { color: #fffdf5 !important; background: var(--toolActiveBg, var(--toolAccent, #243044)) !important; }
|
||||
.toolIcon, .toolPixelIcon, .tool .pixelIcon { display:inline-block; width:14px; height:14px; flex:0 0 14px; image-rendering:pixelated; }
|
||||
.toolBrush { --toolBg:#dcfce7; --toolAccent:#16a34a; --toolActiveBg:#15803d; }
|
||||
.toolErase { --toolBg:#fee2e2; --toolAccent:#ef4444; --toolActiveBg:#dc2626; }
|
||||
.toolFill { --toolBg:#fef3c7; --toolAccent:#f59e0b; --toolActiveBg:#d97706; }
|
||||
.toolPick { --toolBg:#e0f2fe; --toolAccent:#0284c7; --toolActiveBg:#0369a1; }
|
||||
.toolAdvanced { --toolBg:#ede9fe; --toolAccent:#7c3aed; --toolActiveBg:#6d28d9; }
|
||||
.toolUndo, .toolRedo { --toolBg:#f3f4f6; --toolAccent:#64748b; --toolActiveBg:#475569; }
|
||||
.toolLine, .toolDepth { --toolBg:#dbeafe; --toolAccent:#2563eb; --toolActiveBg:#1d4ed8; }
|
||||
.toolRect, .toolParticle { --toolBg:#ccfbf1; --toolAccent:#0d9488; --toolActiveBg:#0f766e; }
|
||||
.toolSelect { --toolBg:#fae8ff; --toolAccent:#c026d3; --toolActiveBg:#a21caf; }
|
||||
.toolDoor { --toolBg:#ffedd5; --toolAccent:#c2410c; --toolActiveBg:#9a3412; }
|
||||
.toolOutline { --toolBg:#e0e7ff; --toolAccent:#4f46e5; --toolActiveBg:#4338ca; }
|
||||
.toolFlipH, .toolFlipV { --toolBg:#fce7f3; --toolAccent:#db2777; --toolActiveBg:#be185d; }
|
||||
.toolClearSel { --toolBg:#f1f5f9; --toolAccent:#475569; --toolActiveBg:#334155; }
|
||||
.toolLight { --toolBg:#fef9c3; --toolAccent:#ca8a04; --toolActiveBg:#a16207; }
|
||||
.tool.danger, #clearPaint { --toolBg:#ffe4e6; --toolAccent:#e11d48; --toolActiveBg:#be123c; }
|
||||
#toolPick.toolPick, #redoPaint.toolRedo { border-right: 2px solid var(--line, #243044) !important; }
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.studioDrawer.advancedTools { width: clamp(560px, 48vw, 720px) !important; max-width: calc(100vw - 20px) !important; }
|
||||
.studioDrawer.advancedTools .paintLayout { grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 270px) !important; gap: 10px !important; }
|
||||
.studioDrawer.advancedTools .paintMainColumn #paintCanvas { max-height: min(58vh, 560px) !important; max-width: none !important; justify-self: stretch !important; }
|
||||
.studioDrawer.advancedTools .palettePanel { width: min(100%, 620px) !important; padding: 6px !important; justify-self: stretch !important; }
|
||||
.studioDrawer.advancedTools .paletteGrid { grid-template-columns: repeat(14, minmax(16px, 1fr)) !important; gap: 3px !important; }
|
||||
.studioDrawer.advancedTools .drawControlPanel { display:grid !important; grid-template-columns: minmax(76px, 90px) minmax(120px, 1fr) !important; grid-template-rows:auto auto !important; gap:7px 8px !important; }
|
||||
.studioDrawer.advancedTools .basicEditorTools { grid-column:1 !important; grid-row:1 !important; }
|
||||
.studioDrawer.advancedTools .editorUtilityRow { grid-column:1 !important; grid-row:2 !important; }
|
||||
.studioDrawer.advancedTools .advancedPanel { grid-column:2 !important; grid-row:1 / span 2 !important; display:grid !important; padding:7px !important; overflow:visible !important; }
|
||||
.studioDrawer.advancedTools .advancedDrawRow,
|
||||
.studioDrawer.advancedTools .advancedActionRow,
|
||||
.studioDrawer.advancedTools .extraAdvancedRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap:5px !important; }
|
||||
.studioDrawer.advancedTools .advancedPanel :is(.tool, select, .particleControl) { min-height:30px !important; padding:5px !important; font-size:10px !important; }
|
||||
.studioDrawer.advancedTools .particleControlGroup { grid-column:1 / -1 !important; }
|
||||
}
|
||||
|
||||
.collectionToolbar { display:flex !important; align-items:center !important; gap:6px !important; flex-wrap:nowrap !important; padding:7px !important; overflow:hidden !important; }
|
||||
.collectionSummary { flex:0 0 auto !important; white-space:nowrap !important; font-size:11px !important; }
|
||||
.collectionSearch { flex:0 0 108px !important; width:108px !important; min-width:92px !important; min-height:26px !important; padding:3px 6px !important; font-size:10px !important; }
|
||||
.collectionFilters { flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-wrap:nowrap !important; gap:5px !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:thin; }
|
||||
.collectionFilter { flex:0 0 auto !important; padding:4px 7px !important; font-size:10px !important; white-space:nowrap !important; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.collectionToolbar { align-items:stretch !important; overflow-x:auto !important; }
|
||||
.collectionSummary { display:none !important; }
|
||||
.collectionSearch { flex-basis:104px !important; width:104px !important; }
|
||||
.studioDrawer { z-index: var(--drawer-z) !important; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue