970 lines
21 KiB
CSS
970 lines
21 KiB
CSS
:root {
|
|
--ink: #243044;
|
|
--muted: #6f7b91;
|
|
--paper: #fff7e8;
|
|
--panel: rgba(255, 248, 232, .94);
|
|
--panel-solid: #fff8e9;
|
|
--panel-2: #ffeec9;
|
|
--line: #2d3c50;
|
|
--line-soft: rgba(45, 60, 80, .18);
|
|
--pink: #ff85b3;
|
|
--pink-dark: #f05f98;
|
|
--mint: #73d6a4;
|
|
--sky: #77c9ff;
|
|
--sun: #ffd66e;
|
|
--danger: #ff6b6b;
|
|
--shadow: 6px 6px 0 rgba(34, 45, 63, .14);
|
|
--hard-shadow: 4px 4px 0 rgba(34, 45, 63, .22);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
background: #92d8ff;
|
|
font-family: "3x5 MT Pixel Font", "Press Start 2P", "PixelMplus10", "DotGothic16", "Courier New", "Monaco", "Lucida Console", ui-monospace, monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
button, input, select, textarea { font: inherit; }
|
|
button { -webkit-tap-highlight-color: transparent; }
|
|
|
|
.app {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#worldCanvas {
|
|
display: block;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
image-rendering: pixelated;
|
|
cursor: grab;
|
|
background: #8cd4ff;
|
|
}
|
|
|
|
#worldCanvas.dragging { cursor: grabbing; }
|
|
#worldCanvas.placeCursor { cursor: copy; }
|
|
#worldCanvas.eraseCursor { cursor: not-allowed; }
|
|
|
|
.hud {
|
|
position: absolute;
|
|
z-index: 5;
|
|
background: var(--panel);
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.topHud {
|
|
top: 14px;
|
|
left: 14px;
|
|
right: 14px;
|
|
min-height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 12px 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: 900;
|
|
letter-spacing: .04em;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.logo span {
|
|
display: inline-block;
|
|
background: var(--pink);
|
|
border: 2px solid var(--line);
|
|
padding: 1px 6px;
|
|
margin-left: 6px;
|
|
font-size: 12px;
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.subline {
|
|
margin-top: 3px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
.authorCard {
|
|
width: 190px;
|
|
border: 2px solid var(--line);
|
|
background: #fffdf5;
|
|
padding: 6px 8px;
|
|
pointer-events: auto;
|
|
}
|
|
.authorCard span {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.authorCard input {
|
|
margin-top: 3px;
|
|
padding: 5px 6px;
|
|
border-width: 2px;
|
|
background: #fffaf0;
|
|
}
|
|
|
|
.clockCard {
|
|
width: 230px;
|
|
border: 2px solid var(--line);
|
|
background: #fffdf5;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.phaseLabel {
|
|
font-weight: 900;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.phaseBar {
|
|
margin-top: 6px;
|
|
height: 10px;
|
|
background: #dfe8f0;
|
|
border: 2px solid var(--line);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phaseBar span {
|
|
display: block;
|
|
width: 0%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #ffd66e, #77c9ff, #6862e8);
|
|
}
|
|
|
|
.clockHint {
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.edgeAdd {
|
|
position: absolute;
|
|
z-index: 8;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 56px;
|
|
height: 86px;
|
|
transform: translateY(-50%);
|
|
border: 3px solid var(--line);
|
|
border-left: 0;
|
|
border-radius: 0 18px 18px 0;
|
|
background: var(--pink);
|
|
color: white;
|
|
font-size: 42px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
box-shadow: var(--hard-shadow);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edgeAdd:hover { background: var(--pink-dark); }
|
|
.edgeAdd:active { transform: translateY(calc(-50% + 2px)); box-shadow: 2px 2px 0 rgba(34,45,63,.22); }
|
|
|
|
.toolHud {
|
|
right: 14px;
|
|
top: 116px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 7px;
|
|
padding: 9px;
|
|
}
|
|
|
|
.iconButton,
|
|
button,
|
|
.ghostButton,
|
|
.tab,
|
|
.tool,
|
|
.segmented button {
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
background: #fffdf5;
|
|
color: var(--ink);
|
|
padding: 8px 11px;
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
box-shadow: 3px 3px 0 rgba(36, 48, 68, .16);
|
|
transition: transform .05s, box-shadow .05s, background .12s;
|
|
}
|
|
|
|
button:hover,
|
|
.ghostButton:hover,
|
|
.tab:hover,
|
|
.tool:hover,
|
|
.segmented button:hover { background: #fff1c8; }
|
|
|
|
button:active,
|
|
.ghostButton:active,
|
|
.tab:active,
|
|
.tool:active,
|
|
.segmented button:active {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 1px 1px 0 rgba(36, 48, 68, .16);
|
|
}
|
|
|
|
button.active,
|
|
.tab.active,
|
|
.tool.active,
|
|
.segmented button.active {
|
|
background: var(--sun);
|
|
box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 3px 3px 0 rgba(36,48,68,.18);
|
|
}
|
|
|
|
button.primary {
|
|
background: var(--mint);
|
|
color: #163a2a;
|
|
}
|
|
|
|
button.secondary { background: var(--panel-2); }
|
|
button.danger, .tool.danger, .iconButton.danger { background: #ffe4e4; color: #833232; }
|
|
button.danger.active, .iconButton.danger.active { background: var(--danger); color: #fffdf5; }
|
|
|
|
.divider {
|
|
height: 2px;
|
|
background: var(--line);
|
|
opacity: .22;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.infoHud {
|
|
right: 14px;
|
|
bottom: 14px;
|
|
width: min(360px, calc(100vw - 28px));
|
|
padding: 12px;
|
|
}
|
|
|
|
.selectedAsset {
|
|
font-weight: 900;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px dashed rgba(45,60,80,.25);
|
|
}
|
|
|
|
.tileInfo {
|
|
white-space: pre-wrap;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.studioDrawer {
|
|
position: absolute;
|
|
z-index: 7;
|
|
top: 0;
|
|
left: 0;
|
|
width: min(500px, calc(100vw - 20px));
|
|
height: 100vh;
|
|
background: var(--panel-solid);
|
|
border-right: 3px solid var(--line);
|
|
box-shadow: 10px 0 0 rgba(36, 48, 68, .12);
|
|
transform: translateX(-104%);
|
|
transition: transform .18s ease-out;
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
}
|
|
|
|
.studioDrawer.open { transform: translateX(0); }
|
|
|
|
.drawerHead {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 10px 12px 8px;
|
|
border-bottom: 3px solid var(--line);
|
|
background: #ffe6f0;
|
|
}
|
|
|
|
.drawerHead h1 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.drawerHead p {
|
|
margin: 3px 0 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ghostButton {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
padding: 8px;
|
|
background: #fff2d0;
|
|
border-bottom: 3px solid var(--line);
|
|
}
|
|
|
|
.tab { padding: 8px 5px; font-size: 13px; }
|
|
|
|
.drawerBody {
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
background:
|
|
linear-gradient(45deg, rgba(255,255,255,.4) 25%, transparent 25%) 0 0/18px 18px,
|
|
var(--panel-solid);
|
|
}
|
|
|
|
.tabPanel { display: none; }
|
|
.tabPanel.active { display: block; }
|
|
|
|
.compactNameField { margin-bottom: 5px; }
|
|
.roleHintInline { margin: 0 0 10px; }
|
|
|
|
.card {
|
|
background: #fffdf5;
|
|
border: 2px solid var(--line);
|
|
box-shadow: 4px 4px 0 rgba(36,48,68,.12);
|
|
padding: 9px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stack > * + * { margin-top: 10px; }
|
|
.cardTitle {
|
|
font-weight: 950;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
font-size: 12px;
|
|
color: #3c4b60;
|
|
}
|
|
|
|
.field {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
input, select, textarea {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
background: #fffaf0;
|
|
color: var(--ink);
|
|
padding: 9px 10px;
|
|
outline: none;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(119,201,255,.35); }
|
|
textarea { resize: vertical; }
|
|
input[type="color"] { height: 39px; padding: 3px; }
|
|
input[type="checkbox"] { width: auto; margin: 0 8px 0 0; }
|
|
|
|
.twoCols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.segmented {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 7px;
|
|
}
|
|
|
|
.segmented button { font-size: 12px; padding: 8px 5px; }
|
|
|
|
.hint {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.editorCard { padding-bottom: 10px; }
|
|
.editorTop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.sideSwitcher {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
}
|
|
.sideSwitcher button { padding: 6px 7px; font-size: 11px; }
|
|
|
|
.toolRow {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 6px;
|
|
align-items: center;
|
|
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)); }
|
|
.editorFileRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.toolRow input { margin: 0; }
|
|
.tool { padding: 7px 5px; font-size: 11px; }
|
|
button:disabled, .tool:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
|
|
|
|
#paintCanvas {
|
|
display: block;
|
|
width: min(100%, 330px);
|
|
margin: 0 auto;
|
|
aspect-ratio: 1 / 1;
|
|
image-rendering: pixelated;
|
|
border: 3px solid var(--line);
|
|
background:
|
|
linear-gradient(45deg, #f4ebdc 25%, transparent 25%) 0 0/16px 16px,
|
|
linear-gradient(45deg, transparent 75%, #f4ebdc 75%) 0 0/16px 16px,
|
|
#fffaf0;
|
|
cursor: crosshair;
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.compactSettings .twoCols { align-items: center; }
|
|
.toggleLine {
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.behaviorNote {
|
|
border: 2px dashed rgba(45,60,80,.22);
|
|
padding: 8px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.actionRow {
|
|
display: flex;
|
|
gap: 9px;
|
|
margin: 12px 0;
|
|
}
|
|
.actionRow.wrap { flex-wrap: wrap; }
|
|
.actionRow button { flex: 1; }
|
|
.lineageNote { min-height: 18px; color: var(--muted); font-size: 12px; }
|
|
|
|
.assetList { display: grid; gap: 10px; }
|
|
.assetCard {
|
|
display: grid;
|
|
grid-template-columns: 68px 1fr;
|
|
gap: 10px;
|
|
border: 2px solid var(--line);
|
|
background: #fff9e8;
|
|
padding: 8px;
|
|
box-shadow: 3px 3px 0 rgba(36,48,68,.12);
|
|
}
|
|
.assetCard.selected { background: #e6ffef; }
|
|
.assetPreview {
|
|
width: 64px;
|
|
height: 64px;
|
|
image-rendering: pixelated;
|
|
background: #fff3d9;
|
|
border: 2px solid var(--line);
|
|
}
|
|
.assetMeta strong { display: block; font-size: 14px; }
|
|
.assetMeta span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; }
|
|
.assetActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
.assetActions button { padding: 5px 7px; font-size: 11px; }
|
|
|
|
.modeGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.modeGrid button { padding: 8px 5px; font-size: 12px; }
|
|
|
|
.legend {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.legend span { display: flex; align-items: center; gap: 6px; }
|
|
.legend i {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--line);
|
|
}
|
|
.legend .water { background: #67b5d9; }
|
|
.legend .sand { background: #ead493; }
|
|
.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;
|
|
left: 50%;
|
|
bottom: 22px;
|
|
transform: translateX(-50%);
|
|
background: #fffdf5;
|
|
border: 3px solid var(--line);
|
|
box-shadow: var(--hard-shadow);
|
|
padding: 10px 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
[hidden] { display: none !important; }
|
|
|
|
@media (max-width: 760px) {
|
|
.topHud { align-items: flex-start; flex-direction: column; right: 70px; }
|
|
.clockCard, .authorCard { width: 100%; }
|
|
.toolHud { top: auto; bottom: 122px; right: 10px; }
|
|
.infoHud { left: 10px; right: 10px; width: auto; }
|
|
.studioDrawer { width: calc(100vw - 18px); }
|
|
.toolRow { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
|
|
}
|
|
|
|
/* refinements */
|
|
.toolHud {
|
|
top: 142px;
|
|
right: 18px;
|
|
}
|
|
.edgeAdd {
|
|
top: calc(50% + 24px);
|
|
width: 62px;
|
|
height: 92px;
|
|
background: linear-gradient(180deg, #ff97c2, #ff75aa);
|
|
}
|
|
.studioDrawer {
|
|
width: min(520px, calc(100vw - 28px));
|
|
}
|
|
.drawerHead { background: #ffe1ef; }
|
|
.drawerBody {
|
|
background:
|
|
linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, transparent 1px) 0 0/20px 20px,
|
|
linear-gradient(0deg, rgba(255,255,255,.42) 0 1px, transparent 1px) 0 0/20px 20px,
|
|
#fff8e9;
|
|
}
|
|
.card {
|
|
border-width: 3px;
|
|
box-shadow: 5px 5px 0 rgba(36,48,68,.13);
|
|
}
|
|
.heroEditor {
|
|
background: #fffdf7;
|
|
border-color: #26364c;
|
|
}
|
|
#paintCanvas {
|
|
margin-bottom: 10px;
|
|
max-height: min(42vh, 330px);
|
|
}
|
|
.toolRow {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
margin-top: 0;
|
|
}
|
|
.paletteGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(13, 1fr);
|
|
gap: 3px;
|
|
margin: 6px 0 6px;
|
|
padding: 6px;
|
|
border: 2px solid rgba(36,48,68,.28);
|
|
background: #fff6df;
|
|
}
|
|
.paletteSwatch {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
min-height: 18px;
|
|
border: 2px solid rgba(36,48,68,.38);
|
|
box-shadow: 2px 2px 0 rgba(36,48,68,.13);
|
|
cursor: pointer;
|
|
}
|
|
.paletteSwatch.active {
|
|
outline: 3px solid #ff7aad;
|
|
outline-offset: 1px;
|
|
border-color: #26364c;
|
|
}
|
|
.paletteSwatch::after {
|
|
content: attr(data-code);
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 0;
|
|
color: rgba(20,26,38,.52);
|
|
font-size: 7px;
|
|
font-weight: 900;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.7);
|
|
}
|
|
.quickSetupBar { margin-bottom: 6px; }
|
|
.settingsCard .segmented { margin-top: 2px; }
|
|
.markerRow {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.markerChip {
|
|
border: 2px dashed rgba(36,48,68,.25);
|
|
background: #fff6df;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.summonCard {
|
|
background: linear-gradient(180deg, #fffdf5, #fff2d7);
|
|
}
|
|
.finishActions {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr .8fr .6fr;
|
|
}
|
|
.bigPrimary {
|
|
min-height: 48px;
|
|
font-size: 14px;
|
|
background: linear-gradient(180deg, #89e4ae, #65d596) !important;
|
|
}
|
|
.sideSwitcher button:first-child.active::after,
|
|
.sideSwitcher button:nth-child(2).active::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
}
|
|
.spawnPop {
|
|
pointer-events: none;
|
|
}
|
|
.selectedAsset { font-weight: 900; padding-bottom: 8px; border-bottom: 2px dashed rgba(45,60,80,.25); }
|
|
@media (max-width: 720px) {
|
|
.toolHud { top: auto; bottom: 126px; right: 10px; }
|
|
.finishActions { grid-template-columns: 1fr; }
|
|
.paletteGrid { grid-template-columns: repeat(8, 1fr); }
|
|
}
|
|
|
|
.paletteGrid button { width: 100%; aspect-ratio: 1 / 1; padding: 0; min-height: 22px; }
|
|
.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;
|
|
grid-template-columns: minmax(220px, 360px) 1fr;
|
|
align-items: start;
|
|
gap: 10px;
|
|
margin: 4px 0 8px;
|
|
}
|
|
#paintCanvas {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
max-height: none;
|
|
margin: 0;
|
|
}
|
|
.paletteGrid {
|
|
margin: 0;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
align-content: start;
|
|
gap: 4px;
|
|
max-height: 360px;
|
|
overflow: hidden;
|
|
}
|
|
.paletteSwatch, .paletteGrid button {
|
|
min-height: 20px;
|
|
}
|
|
.sideSwitcher { justify-content: flex-start; }
|
|
.authorCard span { white-space: nowrap; }
|
|
@media (max-width: 720px) {
|
|
.paintLayout { grid-template-columns: 1fr; }
|
|
.paletteGrid { grid-template-columns: repeat(10, 1fr); max-height: none; }
|
|
}
|
|
|
|
/* Selection bubble + outline controls */
|
|
.palettePanel { display: grid; gap: 8px; }
|
|
.selectionBubble {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
min-width: 126px;
|
|
max-width: 210px;
|
|
padding: 8px;
|
|
background: #fffdf5;
|
|
border: 3px solid var(--line);
|
|
box-shadow: 4px 4px 0 rgba(36,48,68,.20);
|
|
pointer-events: auto;
|
|
text-align: center;
|
|
}
|
|
.selectionBubble::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -10px;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #fffdf5;
|
|
border-right: 3px solid var(--line);
|
|
border-bottom: 3px solid var(--line);
|
|
transform: translateX(-50%) rotate(45deg);
|
|
}
|
|
.bubbleName {
|
|
font-size: 12px;
|
|
font-weight: 950;
|
|
line-height: 1.2;
|
|
word-break: break-word;
|
|
}
|
|
.bubbleAuthor {
|
|
margin-top: 2px;
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
font-weight: 800;
|
|
}
|
|
.bubbleVotes {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-top: 6px;
|
|
}
|
|
.bubbleVotes button {
|
|
padding: 3px 7px;
|
|
min-width: 30px;
|
|
font-size: 11px;
|
|
}
|
|
#voteScore {
|
|
font-weight: 950;
|
|
font-size: 12px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.bubbleRemixFrom, .bubbleRemixCount {
|
|
margin-top: 3px;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
.bubbleActions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5px;
|
|
margin-top: 6px;
|
|
}
|
|
.bubbleActions button {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
}
|
|
.bubbleVotes button.mutedVote, .assetActions button.mutedAction {
|
|
opacity: .45;
|
|
}
|
|
.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(6, minmax(0, 1fr)); }
|
|
.editorHistoryRow { grid-template-columns: repeat(2, 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; }
|
|
.toolRow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.editorHistoryRow { grid-template-columns: 1fr 1fr; }
|
|
.advancedRow { grid-template-columns: 1fr 1fr 1fr; }
|
|
}
|
|
|
|
|
|
.syncStats {
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: rgba(20, 25, 32, 0.06);
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Phase 5: keep advanced depth controls inside the drawer. */
|
|
.advancedRow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.advancedRow .tool {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: 7px 7px;
|
|
white-space: nowrap;
|
|
}
|
|
#advancedHint {
|
|
flex: 1 0 100%;
|
|
min-width: 0;
|
|
}
|
|
#guardrailStats {
|
|
white-space: pre-wrap;
|
|
}
|
|
.bubbleActions {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.bubbleActions button:only-child,
|
|
.bubbleActions button:nth-child(3):last-child {
|
|
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;
|
|
}
|
|
.hiddenSectionTitle {
|
|
margin: 8px 0 6px;
|
|
padding: 5px 7px;
|
|
background: #ffe6f0;
|
|
border: 2px solid var(--line);
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
.reportDialog {
|
|
position: absolute;
|
|
z-index: 20;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(20, 25, 34, .34);
|
|
}
|
|
.reportDialog[hidden] { display: none; }
|
|
.reportCard {
|
|
width: min(360px, calc(100vw - 28px));
|
|
background: #fffdf5;
|
|
border: 3px solid var(--line);
|
|
box-shadow: 8px 8px 0 rgba(36,48,68,.25);
|
|
padding: 14px;
|
|
}
|
|
.reportCard .hint { margin: 8px 0 10px; }
|
|
.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; }
|