update
This commit is contained in:
parent
67a7477242
commit
a05c031074
7 changed files with 1781 additions and 385 deletions
444
styles.css
444
styles.css
|
|
@ -1015,3 +1015,447 @@ body, button, input, select, textarea { font-size: 15px; }
|
|||
.likedCodexItem canvas { width:28px; height:28px; image-rendering:pixelated; }
|
||||
.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 {
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
max-width: min(520px, 48vw);
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 7px !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.authorCard span { display:inline !important; margin:0; font-size:11px !important; }
|
||||
.authorCard input { margin-top:0 !important; width:132px; min-height:28px; }
|
||||
.authorCard small { display:inline !important; margin-top:0 !important; line-height:1.15 !important; font-size:11px !important; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.miniButton { margin-top:0 !important; padding:5px 7px !important; font-size:11px !important; white-space:nowrap; }
|
||||
.clockCard { width: 190px; padding: 6px 8px; }
|
||||
.subline { white-space: nowrap; }
|
||||
.advancedRow { grid-template-columns: repeat(5, max-content) 1fr !important; }
|
||||
@media (max-width: 900px) {
|
||||
.topHud { right: 76px; align-items:flex-start; }
|
||||
.authorCard { max-width: calc(100vw - 110px); flex-wrap: wrap; white-space: normal; }
|
||||
.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%;
|
||||
right: auto;
|
||||
width: min(560px, calc(100vw - 24px));
|
||||
min-height: 0 !important;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 8px 10px !important;
|
||||
background: rgba(255, 253, 245, .78) !important;
|
||||
border: 1px solid rgba(36, 48, 68, .24) !important;
|
||||
box-shadow: 0 6px 18px rgba(22, 31, 46, .12) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.brandBlock { min-width: 0; }
|
||||
.islandTopBar .logo { font-size: 18px; line-height: 1; white-space: nowrap; }
|
||||
.islandTopBar .subline {
|
||||
margin-top: 2px;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 11px;
|
||||
opacity: .72;
|
||||
}
|
||||
.topActions { display: flex; gap: 6px; align-items: center; }
|
||||
.topButton {
|
||||
padding: 7px 10px !important;
|
||||
border-width: 1px !important;
|
||||
box-shadow: none !important;
|
||||
background: rgba(255, 253, 245, .86) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.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; }
|
||||
.editorToolRow { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||||
.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."; }
|
||||
|
||||
/* Let the island breathe under the lighter navigation. */
|
||||
#worldCanvas { background: #8dd7ff; }
|
||||
.selectionBubble {
|
||||
border-width: 2px !important;
|
||||
box-shadow: 0 8px 20px rgba(22,31,46,.16) !important;
|
||||
background: rgba(255,253,245,.94) !important;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.islandTopBar { width: calc(100vw - 16px); top: 8px; }
|
||||
.islandTopBar .subline { display: none; }
|
||||
.topButton { padding: 7px 8px !important; }
|
||||
}
|
||||
|
||||
/* v8 account, editor, and placement refinements */
|
||||
.islandClickHint {
|
||||
position: fixed;
|
||||
left: 14px;
|
||||
bottom: 14px;
|
||||
z-index: 24;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid rgba(36,48,68,.22);
|
||||
background: rgba(255,253,245,.72);
|
||||
box-shadow: 0 5px 16px rgba(22,31,46,.10);
|
||||
backdrop-filter: blur(8px);
|
||||
font-size: 11px;
|
||||
color: rgba(36,48,68,.78);
|
||||
pointer-events: none;
|
||||
}
|
||||
.islandTopBar {
|
||||
width: min(960px, calc(100vw - 24px)) !important;
|
||||
}
|
||||
.accountCard.utilityControl {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
max-width: 430px !important;
|
||||
padding: 5px 7px !important;
|
||||
border: 1px solid rgba(36,48,68,.2) !important;
|
||||
background: rgba(255,253,245,.68) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.accountFields {
|
||||
display: grid;
|
||||
grid-template-columns: 96px 112px 112px;
|
||||
gap: 5px;
|
||||
align-items: end;
|
||||
}
|
||||
.accountField {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
font-size: 9px !important;
|
||||
line-height: 1;
|
||||
color: rgba(36,48,68,.72);
|
||||
}
|
||||
.accountField input {
|
||||
width: 100% !important;
|
||||
min-height: 24px !important;
|
||||
padding: 3px 5px !important;
|
||||
font-size: 10px !important;
|
||||
border-width: 1px !important;
|
||||
background: rgba(255,255,255,.72);
|
||||
}
|
||||
.accountField input[readonly] { opacity: .72; }
|
||||
.accountCard small {
|
||||
max-width: 118px !important;
|
||||
white-space: normal !important;
|
||||
font-size: 9px !important;
|
||||
line-height: 1.15 !important;
|
||||
opacity: .78;
|
||||
}
|
||||
.accountCard .miniButton {
|
||||
font-size: 9px !important;
|
||||
padding: 4px 5px !important;
|
||||
border-width: 1px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.clockCard.utilityControl { display: none !important; }
|
||||
.editorToolRow { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||||
.editorHistoryRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
|
||||
.studioDrawer.advancedTools .editorToolRow { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||||
.studioDrawer.advancedTools .editorHistoryRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
|
||||
.advancedToolGroup {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 2px 0 8px;
|
||||
}
|
||||
.advancedToolGroup[hidden] { display: none !important; }
|
||||
.advancedDrawRow { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
|
||||
.advancedActionRow { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||||
.studioDrawer.advancedTools .advancedTool { display: block !important; }
|
||||
.toolBrush { background: #e8fff0 !important; }
|
||||
.toolErase { background: #ffe9e2 !important; }
|
||||
.toolFill { background: #e7f0ff !important; }
|
||||
.toolPick { background: #fff0d4 !important; }
|
||||
.toolUndo, .toolRedo { background: #f2ecff !important; }
|
||||
.toolLine { background: #e9f7ff !important; }
|
||||
.toolRect { background: #edf9e3 !important; }
|
||||
.toolSelect { background: #ffe8f3 !important; }
|
||||
.toolDoor { background: #f5ead7 !important; }
|
||||
.toolOutline { background: #fff6d8 !important; }
|
||||
.toolFlipH, .toolFlipV { background: #eaf2ff !important; }
|
||||
.toolClearSel { background: #f7e9ff !important; }
|
||||
.toolAdvanced { background: #f5f1e7 !important; }
|
||||
.toolLight { background: #fff0a8 !important; }
|
||||
.toolDepth { background: #dfeeff !important; }
|
||||
.toolParticle { background: #e8fffb !important; }
|
||||
.tool.active, button.active {
|
||||
outline: 2px solid rgba(36,48,68,.55);
|
||||
outline-offset: -4px;
|
||||
filter: saturate(1.08);
|
||||
}
|
||||
.particleControl {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 7px;
|
||||
border: 2px solid var(--line);
|
||||
background: #e8fffb;
|
||||
box-shadow: 3px 3px 0 rgba(36,48,68,.14);
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.particleControl[hidden] { display: none !important; }
|
||||
.particleControl select {
|
||||
min-height: 26px;
|
||||
padding: 2px 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.finishActions { grid-template-columns: 1.4fr 1fr !important; }
|
||||
.placementPreviewBar span::after { content: " Left-click chooses a tile; right-click cancels selection."; }
|
||||
@media (max-width: 980px) {
|
||||
.islandTopBar { width: calc(100vw - 16px) !important; flex-wrap: wrap; justify-content: center; }
|
||||
.accountCard.utilityControl { order: 3; max-width: 100% !important; }
|
||||
.accountFields { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
|
||||
.accountCard small { max-width: 100% !important; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.accountFields { grid-template-columns: 1fr; }
|
||||
.finishActions { grid-template-columns: 1fr !important; }
|
||||
.advancedDrawRow, .advancedActionRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
|
||||
}
|
||||
|
||||
/* v9 menu and particle-range refinements */
|
||||
.cuteMenuButton {
|
||||
flex: 0 0 auto;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0 !important;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid rgba(36,48,68,.72) !important;
|
||||
border-radius: 14px !important;
|
||||
background: linear-gradient(180deg, #ffe3f0, #ffc3dd) !important;
|
||||
box-shadow: 3px 3px 0 rgba(36,48,68,.18) !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cuteMenuButton:hover { transform: translateY(-1px); filter: saturate(1.08); }
|
||||
.cuteMenuButton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(36,48,68,.18) !important; }
|
||||
.islandTopBar .brandBlock { margin-right: auto; }
|
||||
.particleControlGroup {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(92px, 120px) auto;
|
||||
align-items: end;
|
||||
gap: 6px 8px;
|
||||
max-width: min(100%, 360px);
|
||||
text-transform: none;
|
||||
}
|
||||
.particleControlGroup label { font-size: 10px; font-weight: 900; color: rgba(36,48,68,.76); }
|
||||
.particleRangeButtons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(74px, 1fr));
|
||||
gap: 5px;
|
||||
}
|
||||
.particleRangeButtons .tool { padding: 6px 7px !important; font-size: 11px !important; }
|
||||
#particleRangeStatus {
|
||||
grid-column: 1 / -1;
|
||||
font-size: 10px;
|
||||
color: rgba(36,48,68,.72);
|
||||
line-height: 1.25;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.particleControlGroup { grid-template-columns: 1fr; }
|
||||
.particleRangeButtons { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
/* v10 bottom DRAW access and remix bottom sheet */
|
||||
.drawDockButton {
|
||||
position: fixed;
|
||||
z-index: 28;
|
||||
left: 50%;
|
||||
bottom: 22px;
|
||||
transform: translateX(-50%);
|
||||
min-width: 210px;
|
||||
min-height: 62px;
|
||||
padding: 12px 28px !important;
|
||||
border: 4px solid var(--line) !important;
|
||||
border-radius: 22px !important;
|
||||
background: linear-gradient(180deg, #ffe18f, #ff9dbf 62%, #ff7aa8) !important;
|
||||
color: #253044 !important;
|
||||
box-shadow: 0 8px 0 rgba(36,48,68,.24), 0 14px 26px rgba(22,31,46,.18) !important;
|
||||
font-size: 24px !important;
|
||||
letter-spacing: .06em;
|
||||
line-height: 1 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.drawDockButton:hover { filter: saturate(1.08) brightness(1.02); }
|
||||
.drawDockButton:active { transform: translate(-50%, 4px); box-shadow: 0 4px 0 rgba(36,48,68,.24), 0 8px 18px rgba(22,31,46,.16) !important; }
|
||||
.drawDockButton[hidden] { display: none !important; }
|
||||
.islandTopBar .cuteMenuButton { display: none !important; }
|
||||
.islandTopBar .brandBlock { margin-right: 0 !important; }
|
||||
.islandClickHint { bottom: 96px !important; }
|
||||
|
||||
.selectionBubble {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
z-index: 36 !important;
|
||||
min-width: 138px !important;
|
||||
max-width: 224px !important;
|
||||
padding: 8px 9px !important;
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
border: 3px solid var(--line) !important;
|
||||
border-radius: 14px !important;
|
||||
background: rgba(255,253,245,.98) !important;
|
||||
box-shadow: 0 6px 0 rgba(36,48,68,.18), 0 10px 20px rgba(22,31,46,.15) !important;
|
||||
}
|
||||
.selectionBubble[hidden] { display: none !important; }
|
||||
.selectionBubble::after {
|
||||
display: block !important;
|
||||
content: '' !important;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: rgba(255,253,245,.98);
|
||||
border-right: 3px solid var(--line);
|
||||
border-bottom: 3px solid var(--line);
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
.bubbleName { font-size: 13px !important; }
|
||||
.bubbleAuthor, .bubbleRemixFrom, .bubbleRemixCount { font-size: 10px !important; margin-top: 2px !important; }
|
||||
.bubbleVotes { margin-top: 6px !important; grid-template-columns: 1fr auto 1fr !important; justify-content: center; }
|
||||
.bubbleActions {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
gap: 5px !important;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
.bubbleActions button { min-height: 32px; font-size: 10px !important; }
|
||||
.bubbleRemixPrimary {
|
||||
background: linear-gradient(180deg, #ffb3d1, #ff7daf) !important;
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.bubbleMenuButton {
|
||||
margin-top: 6px;
|
||||
min-width: 64px;
|
||||
min-height: 28px;
|
||||
padding: 5px 8px !important;
|
||||
border-radius: 12px !important;
|
||||
background: #fff2d7 !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
.bubbleMenuActions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding-top: 4px;
|
||||
margin-top: 4px;
|
||||
border-top: 1px dashed rgba(36,48,68,.25);
|
||||
}
|
||||
.bubbleMenuActions[hidden] { display: none !important; }
|
||||
.bubbleMenuActions button { font-size: 10px !important; padding: 5px 8px !important; }
|
||||
@media (max-width: 760px) {
|
||||
.drawDockButton { min-width: 176px; min-height: 56px; font-size: 20px !important; bottom: 16px; }
|
||||
.islandClickHint { display: none; }
|
||||
}
|
||||
|
||||
|
||||
/* v15 analog day-night clock */
|
||||
.analogClock {
|
||||
--clock-rotate: 0deg;
|
||||
position: fixed;
|
||||
top: clamp(104px, 14vh, 158px);
|
||||
right: 18px;
|
||||
z-index: 28;
|
||||
width: 82px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.analogClockDial {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border: 4px solid var(--line);
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, rgba(255,255,245,.42) 0 6%, rgba(255,255,245,0) 7%),
|
||||
conic-gradient(from -90deg,
|
||||
#142147 0deg 54deg,
|
||||
#5468aa 70deg,
|
||||
#f5b067 96deg,
|
||||
#8bd8ff 128deg 232deg,
|
||||
#ff9d4f 266deg,
|
||||
#c84f2e 292deg,
|
||||
#1b2a58 326deg 360deg);
|
||||
box-shadow: 0 5px 0 rgba(36,48,68,.20), 0 8px 18px rgba(18,28,44,.18);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.analogClockDial::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 8px;
|
||||
border: 1px dashed rgba(36,48,68,.25);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.analogClockHand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 4px;
|
||||
height: 28px;
|
||||
transform-origin: 50% 100%;
|
||||
transform: translate(-50%, -100%) rotate(var(--clock-rotate));
|
||||
background: #243044;
|
||||
border-radius: 6px 6px 2px 2px;
|
||||
box-shadow: 1px 0 0 rgba(255,255,255,.45);
|
||||
}
|
||||
.analogClockHand::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: translateX(-50%);
|
||||
border: 3px solid var(--line);
|
||||
background: #fff7e8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.analogClockLabel {
|
||||
min-width: 70px;
|
||||
padding: 2px 7px;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: rgba(255,248,232,.9);
|
||||
box-shadow: 0 3px 0 rgba(36,48,68,.16);
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-weight: 950;
|
||||
}
|
||||
.analogPhaseBar { display: none !important; }
|
||||
@media (max-width: 760px) {
|
||||
.analogClock { top: 82px; right: 10px; transform: scale(.86); transform-origin: top right; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue