feat(design): add the Macaron (07) art direction and land the Signpost (06) package files
- 07 macaron, referenced from Meowdoku: cream worlds, a white tray with gutters, candy tokens with white arrows, two-column 关卡/待解 HUD, white elevated tool discs (macaron-only exception to the flat rule), full-screen dark result overlay, a brick ripple on board clear, an eased glide-out and dot-lattice dissolve on exit; Resource Han Rounded subset fonts (SIL OFL) in assets/fonts with the charset and regeneration note - 06 signpost: the design.md, tokens and preview directory that earlier commits left untracked - design docs, catalog, manifest, showcase and base spec updated to seven directions; the analysis and proposal live in docs/art-proposal-macaron.html - the renderer, app, geometry and CSS sources for both directions were already carried by the level commits made from this working tree Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
cabinw
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
7607f48cb1
commit
e447d1f807
@@ -58,3 +58,133 @@ body:not(.editing) .board-tools>.game-tool{grid-row:3;justify-self:center;width:
|
||||
.item-study{padding:44px 0;border-bottom:1px solid #273B5020;scroll-margin-top:80px}
|
||||
.item-study-content{max-width:640px;margin:auto}.item-study-content>.item-samples{background:var(--scene-bg,#E9EDE5);border-radius:24px;padding:24px 12px 18px}
|
||||
@media(max-width:380px){.item-samples,.guide-tools{gap:4px}.component-preview{padding:16px}.game-tool{min-width:72px}}
|
||||
|
||||
/* 06 路标 (signpost): controls recede into the paper; rotation hangs under the board. Values: design/directions/signpost/design.md */
|
||||
body[data-design=signpost]{--signpost-rotate:#8AA1AD;--signpost-label:#5C7280;--signpost-plate:#9AAEB9;--signpost-plate-ink:#22354A;--signpost-hi:rgba(255,255,255,.6);--signpost-lo:rgba(34,53,74,.28)}
|
||||
body[data-design=signpost][data-theme=apricot]{--signpost-rotate:#A79378;--signpost-label:#6B5A44;--signpost-plate:#BFA98A}
|
||||
body[data-design=signpost][data-theme=lavender]{--signpost-rotate:#8E9F86;--signpost-label:#56664F;--signpost-plate:#A2B398}
|
||||
body[data-design=signpost][data-theme=rose]{--signpost-rotate:#A58C89;--signpost-label:#6A5453;--signpost-plate:#BC9F9B}
|
||||
body[data-design=signpost][data-theme=midnight]{--signpost-rotate:#4E6376;--signpost-label:#8FA3B4;--signpost-plate:#33465A;--signpost-plate-ink:#DCE5EE;--signpost-hi:rgba(255,255,255,.14);--signpost-lo:rgba(0,0,0,.55)}
|
||||
/* White atlas icons are tinted through a mask (the CSS form of tinting a white sprite); mask geometry derives from ICONS in src/ui-skin.js. Shared by 06 signpost and 07 macaron. */
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])>.sprite-crop{-webkit-mask:url(../assets/ui-icons-generated.png) no-repeat;mask:url(../assets/ui-icons-generated.png) no-repeat;background:currentColor}
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])>.sprite-crop>img{visibility:hidden}
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=left]>.sprite-crop{-webkit-mask-size:540.517% 540.517%;mask-size:540.517% 540.517%;-webkit-mask-position:4.207% 36.008%;mask-position:4.207% 36.008%}
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=right]>.sprite-crop{-webkit-mask-size:552.423% 552.423%;mask-size:552.423% 552.423%;-webkit-mask-position:36.125% 37.196%;mask-position:36.125% 37.196%}
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=grid]>.sprite-crop{-webkit-mask-size:620.792% 620.792%;mask-size:620.792% 620.792%;-webkit-mask-position:35.361% 8.270%;mask-position:35.361% 8.270%}
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=gear]>.sprite-crop{-webkit-mask-size:547.598% 547.598%;mask-size:547.598% 547.598%;-webkit-mask-position:5.659% 6.829%;mask-position:5.659% 6.829%}
|
||||
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=close]>.sprite-crop{-webkit-mask-size:646.392% 646.392%;mask-size:646.392% 646.392%;-webkit-mask-position:94.245% 8.679%;mask-position:94.245% 8.679%}
|
||||
body[data-design=signpost] .rotations button>[data-icon],body[data-design=signpost]:not(.editing) .rotate-button>.ui-icon{color:var(--signpost-rotate);filter:drop-shadow(0 1px 0 var(--signpost-hi)) drop-shadow(0 -1px 0 var(--signpost-lo))}
|
||||
body[data-design=signpost]:not(.editing) .rotate-button b{color:var(--signpost-label)}
|
||||
body[data-design=signpost]:not(.editing) .game-icon>.ui-icon{color:var(--signpost-plate-ink)}
|
||||
body[data-design=signpost] .icon-button[data-icon]{color:var(--signpost-plate-ink);background:var(--signpost-plate);border:0;box-shadow:none;border-radius:12px}
|
||||
body[data-design=signpost]:not(.editing) .game-icon>.ui-plate{background:var(--signpost-plate);border-radius:12px}
|
||||
body[data-design=signpost]:not(.editing) .game-icon>.ui-plate .sprite-crop{display:none}
|
||||
body[data-design=signpost]:not(.editing) .game-tool>b{color:var(--scene-ink,#273B50)}
|
||||
/* Rotation belongs to the board: app.js sets --rot-x / --rot-x2 / --rot-y from the board geometry. */
|
||||
body[data-design=signpost]:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 108px}
|
||||
body[data-design=signpost]:not(.editing) .board-tools>.game-tool{grid-row:2}
|
||||
body[data-design=signpost]:not(.editing) .rotation-controls{position:absolute;inset:0;grid-row:1/-1;grid-column:1/-1;display:block;padding:0;margin:0;pointer-events:none;z-index:3}
|
||||
body[data-design=signpost]:not(.editing) .rotate-button{position:absolute;left:var(--rot-x,25%);top:var(--rot-y,82%);margin:-41px 0 0 -42px;width:84px;min-width:0;min-height:0;padding:0;gap:2px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
|
||||
body[data-design=signpost]:not(.editing) #rotate-right{left:var(--rot-x2,75%)}
|
||||
body[data-design=signpost]:not(.editing) .rotate-button>.ui-icon{width:64px;height:64px}
|
||||
body[data-design=signpost]:not(.editing) .rotate-button b{font-size:12px;letter-spacing:0}
|
||||
|
||||
/* 07 马卡龙 (macaron): cream world, white objects with soft elevation, mauve ink, one orange action. Values: design/directions/macaron/design.md */
|
||||
/* Resource Han Rounded (SIL OFL), subset to the game's own characters; see assets/fonts/README.md. */
|
||||
@font-face{font-family:'Resource Han Rounded';font-weight:500;font-display:swap;src:url(../assets/fonts/ResourceHanRoundedCN-Medium.subset.woff2) format('woff2')}
|
||||
@font-face{font-family:'Resource Han Rounded';font-weight:700;font-display:swap;src:url(../assets/fonts/ResourceHanRoundedCN-Bold.subset.woff2) format('woff2')}
|
||||
body[data-design=macaron]{--mac-ink:#7A5560;--mac-ink-strong:#5A3A44;--mac-muted:#A98590;--mac-rotate:#B4939C;--mac-card:#FFFFFF;--mac-elev:0 4px 14px rgba(110,70,82,.14);--mac-cta:#E07416;--mac-cta-edge:#B95C0C;--mac-scrim:rgba(62,46,53,.5);font-family:'Resource Han Rounded',ui-rounded,'Arial Rounded MT Bold','Nunito','PingFang SC','Microsoft YaHei',sans-serif}
|
||||
body[data-design=macaron][data-theme=apricot]{--mac-ink:#7C4E52;--mac-rotate:#BC9A97}
|
||||
body[data-design=macaron][data-theme=lavender]{--mac-ink:#5F4E78;--mac-rotate:#A79BC0}
|
||||
body[data-design=macaron][data-theme=rose]{--mac-ink:#7B4658;--mac-rotate:#BE9AA6}
|
||||
body[data-design=macaron][data-theme=midnight]{--mac-ink:#FBEFE6;--mac-ink-strong:#FBEFE6;--mac-muted:#C4A9B0;--mac-rotate:#9E8189;--mac-elev:0 6px 18px rgba(0,0,0,.35);--mac-scrim:rgba(20,12,16,.62)}
|
||||
/* Top row: two white discs at the sides, two stat columns (关卡 / 待解) in the middle, the notice bubble on the row below. */
|
||||
body[data-design=macaron]:not(.editing) .game-column{grid-template-rows:64px 64px minmax(0,1fr);grid-template-columns:1fr 1fr;column-gap:40px}
|
||||
body[data-design=macaron]:not(.editing) .level-heading{grid-row:1;grid-column:1;justify-self:end;align-self:center;margin:0;padding:0}
|
||||
body[data-design=macaron]:not(.editing) .hud{grid-row:1;grid-column:2;justify-self:start;align-self:center;margin:0;padding:0}
|
||||
body[data-design=macaron]:not(.editing) .notice-slot{grid-row:2;grid-column:1/-1}
|
||||
body[data-design=macaron]:not(.editing) .game-card{grid-row:3;grid-column:1/-1}
|
||||
body[data-design=macaron]:not(.editing) .level-ribbon{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:26px;line-height:1;letter-spacing:0;color:var(--mac-ink-strong)}
|
||||
body[data-design=macaron]:not(.editing) .level-ribbon small{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mac-muted)}
|
||||
body[data-design=macaron]:not(.editing) .level-ribbon b{font-weight:800}
|
||||
body[data-design=macaron]:not(.editing) .level-ribbon b i{font-style:normal;font-size:14px;font-weight:600;color:var(--mac-muted)}
|
||||
body[data-design=macaron]:not(.editing) .moves-bubble{background:none;box-shadow:none;padding:0;height:auto;flex-direction:column;align-items:center;gap:3px;min-width:0;width:auto;transform-origin:center}
|
||||
body[data-design=macaron]:not(.editing) .moves-bubble>span{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mac-muted);margin:0}
|
||||
body[data-design=macaron]:not(.editing) .moves-bubble strong{font-size:26px;line-height:1;font-weight:800;color:var(--mac-ink-strong)}
|
||||
body[data-design=macaron] .moves-bubble.pop{animation:mac-pill-pop .42s cubic-bezier(.34,1.56,.64,1)}
|
||||
@keyframes mac-pill-pop{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
|
||||
body[data-design=macaron]:not(.editing) .game-icon>.ui-plate{background:var(--mac-card);border-radius:50%;box-shadow:var(--mac-elev)}
|
||||
body[data-design=macaron]:not(.editing) .game-icon>.ui-plate .sprite-crop{display:none}
|
||||
body[data-design=macaron]:not(.editing) .game-icon>.ui-icon{color:#5A3A44}
|
||||
body[data-design=macaron] .icon-button[data-icon]{color:#5A3A44;background:var(--mac-card);border:0;box-shadow:var(--mac-elev);border-radius:50%}
|
||||
/* Notices are white speech bubbles with a tail towards the stats and an orange dot instead of the "i" badge. */
|
||||
body[data-design=macaron] .game-notice{position:relative;background:var(--mac-card);color:#5A3A44;border:0;border-radius:16px;box-shadow:var(--mac-elev);font-weight:600}
|
||||
body[data-design=macaron] .game-notice::before{content:'';flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--mac-cta)}
|
||||
body[data-design=macaron] .game-notice::after{content:'';position:absolute;left:50%;top:-6px;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom:6px solid var(--mac-card)}
|
||||
/* Rotation hangs under the tray like 06; plain ink-tinted sprites, no plate. */
|
||||
body[data-design=macaron] .rotations button>[data-icon],body[data-design=macaron]:not(.editing) .rotate-button>.ui-icon{color:var(--mac-rotate)}
|
||||
body[data-design=macaron]:not(.editing) .rotate-button b{color:var(--mac-ink)}
|
||||
/* The canvas bleeds 8px into the shell padding on each side, so the exit dissolve has room without shrinking the board. */
|
||||
body[data-design=macaron]:not(.editing) .canvas-wrap{margin-inline:-8px;width:calc(100% + 16px)}
|
||||
body[data-design=macaron]:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 108px}
|
||||
body[data-design=macaron]:not(.editing) .board-tools>.game-tool{grid-row:2}
|
||||
body[data-design=macaron]:not(.editing) .rotation-controls{position:absolute;inset:0;grid-row:1/-1;grid-column:1/-1;display:block;padding:0;margin:0;pointer-events:none;z-index:3}
|
||||
body[data-design=macaron]:not(.editing) .rotate-button{position:absolute;left:var(--rot-x,25%);top:var(--rot-y,82%);margin:-41px 0 0 -42px;width:84px;min-width:0;min-height:0;padding:0;gap:2px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
|
||||
body[data-design=macaron]:not(.editing) #rotate-right{left:var(--rot-x2,75%)}
|
||||
body[data-design=macaron]:not(.editing) .rotate-button>.ui-icon{width:60px;height:60px}
|
||||
body[data-design=macaron]:not(.editing) .rotate-button b{font-size:12px;letter-spacing:0}
|
||||
/* Tools are the reference's white discs: soft elevation, a candy-coloured glyph tinted through the atlas mask, mauve labels. */
|
||||
body[data-design=macaron] .game-tool{--item-color:var(--mac-card);--item-border:0;--item-radius:50%;--item-icon-filter:none}
|
||||
body[data-design=macaron] .game-tool .item-face::before{box-shadow:var(--mac-elev)}
|
||||
body[data-design=macaron] .game-tool .item-face{color:#4A91D4}
|
||||
body[data-design=macaron] .game-tool[data-tool=restart] .item-face{color:#D06E93}
|
||||
body[data-design=macaron] .game-tool[data-tool=hint] .item-face{color:#C98A0E}
|
||||
body[data-design=macaron] .game-tool .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask:url(../assets/ui-icons-generated.png) no-repeat;mask:url(../assets/ui-icons-generated.png) no-repeat;background:currentColor;filter:none}
|
||||
body[data-design=macaron] .game-tool .item-face :is(.ui-icon>.sprite-crop,.art-icon)>img{visibility:hidden}
|
||||
body[data-design=macaron] .game-tool[data-tool=undo] .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask-size:577.880% 577.880%;mask-size:577.880% 577.880%;-webkit-mask-position:65.574% 38.380%;mask-position:65.574% 38.380%}
|
||||
body[data-design=macaron] .game-tool[data-tool=restart] .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask-size:540.517% 540.517%;mask-size:540.517% 540.517%;-webkit-mask-position:95.890% 36.008%;mask-position:95.890% 36.008%}
|
||||
body[data-design=macaron] .game-tool[data-tool=hint] .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask-size:533.617% 533.617%;mask-size:533.617% 533.617%;-webkit-mask-position:4.220% 66.045%;mask-position:4.220% 66.045%}
|
||||
body[data-design=macaron]:not(.editing) .game-tool>b,body[data-design=macaron] .phone-tools .game-tool>b,body[data-design=macaron] .item-samples .game-tool>b{color:var(--mac-ink)}
|
||||
:is(.phone .phone-tools,body[data-design=macaron]:not(.editing) .board-tools) .game-tool:disabled{opacity:.45}
|
||||
/* Result screen: the reference's dark celebration. No card; cream glowing title on the scrim, rays and confetti behind the stars, one orange pill. */
|
||||
/* Full-screen result: the dialog covers the viewport, so rays, confetti and text are never clipped by a card edge. */
|
||||
body[data-design=macaron] .win-overlay{background:transparent!important;box-shadow:none;position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:24px 20px;border-radius:0;overflow:hidden}
|
||||
body[data-design=macaron] .win-overlay[open]{display:flex;flex-direction:column;justify-content:center;align-items:center;animation:mac-veil .32s ease-out both}
|
||||
@keyframes mac-veil{from{opacity:0}to{opacity:1}}
|
||||
body[data-design=macaron] .win-overlay>.ui-plate{display:none!important}
|
||||
body[data-design=macaron] .win-overlay::backdrop{background:rgba(40,26,32,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
|
||||
body[data-design=macaron] .win-overlay .eyebrow{color:#C9AEB6}
|
||||
body[data-design=macaron] .win-overlay h3{color:#FFF3E6;font-size:25px;letter-spacing:.01em;text-shadow:0 0 22px rgba(255,214,150,.55),0 2px 0 rgba(0,0,0,.25)}
|
||||
body[data-design=macaron] .win-overlay p{color:#E9D2C4}
|
||||
body[data-design=macaron] .win-overlay .text-button{color:#FBEFE6;background:rgba(255,255,255,.14)!important;border-radius:999px;min-height:44px;padding:10px 26px;margin-top:12px}
|
||||
body[data-design=macaron] .win-overlay .text-button>.ui-plate{display:none!important}
|
||||
body[data-design=macaron] .win-overlay .result-emblem{position:relative;isolation:isolate;overflow:visible;margin-bottom:6px}
|
||||
body[data-design=macaron] .win-overlay[open] .result-emblem::before{content:'';position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,96,.40) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 60%);mask:radial-gradient(circle,#000 10%,transparent 60%);animation:mac-rays 40s linear infinite;z-index:-1;pointer-events:none}
|
||||
@keyframes mac-rays{to{transform:rotate(360deg)}}
|
||||
body[data-design=macaron] .win-overlay[open] .result-emblem::after{content:'';position:absolute;left:50%;top:-6px;width:7px;height:11px;border-radius:2px;background:#EE5398;box-shadow:-84px 6px 0 #578BF0,-48px -12px 0 #F7C948,-120px 16px 0 #4C9E5A,36px -10px 0 #937DE4,72px 8px 0 #E5680C,112px -2px 0 #369C94,-18px 18px 0 #C56AC4,96px 24px 0 #D06E93,-140px -4px 0 #F7C948,140px 10px 0 #EE5398;animation:mac-confetti 1.6s .3s ease-out both;pointer-events:none;z-index:-1}
|
||||
@keyframes mac-confetti{from{opacity:0;transform:translateY(-40px) rotate(0)}30%{opacity:1}to{opacity:0;transform:translateY(110px) rotate(200deg)}}
|
||||
body[data-design=macaron] .primary{color:#FFFFFF;font-weight:800;font-size:16px;min-height:52px;padding:12px 30px}
|
||||
body[data-design=macaron] .primary>.ui-plate{background:var(--mac-cta);border-radius:999px;box-shadow:0 4px 0 var(--mac-cta-edge);filter:none}
|
||||
body[data-design=macaron] .primary>.ui-plate .sprite-crop{display:none}
|
||||
/* Menus and the level map: a white card with a peach title band, like the reference's settings sheet. */
|
||||
body[data-design=macaron] #info-dialog::backdrop{background:var(--mac-scrim)}
|
||||
body[data-design=macaron] #info-dialog>.ui-plate{background:#FFFFFF;border-radius:28px}
|
||||
body[data-design=macaron] #info-dialog>.ui-plate .sprite-crop{display:none}
|
||||
body[data-design=macaron] #info-dialog>#dialog-content{margin:-32px -25px 0;padding:30px 25px 0;background:linear-gradient(#FBE6DA 0,#FBE6DA 104px,transparent 104px);border-radius:28px 28px 0 0}
|
||||
body[data-design=macaron] #info-dialog>#dialog-content>.eyebrow{text-align:center;display:block}
|
||||
body[data-design=macaron] #info-dialog>#dialog-content>h2{text-align:center;margin:8px 0 34px}
|
||||
body[data-design=macaron] dialog h2{color:#5A3A44}
|
||||
body[data-design=macaron] dialog p,body[data-design=macaron] dialog li,body[data-design=macaron] dialog .eyebrow{color:#8A6670}
|
||||
body[data-design=macaron] #info-dialog[open]{animation:mac-pop .38s cubic-bezier(.34,1.56,.64,1) both}
|
||||
@keyframes mac-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
|
||||
body[data-design=macaron] .text-button{color:var(--mac-muted)}
|
||||
body[data-design=macaron] .dialog-close.game-icon{z-index:2}
|
||||
body[data-design=macaron] .dialog-close.game-icon>.ui-plate{background:#FFFFFF;border-radius:50%;box-shadow:0 2px 8px rgba(110,70,82,.16)}
|
||||
body[data-design=macaron] .dialog-close.game-icon>.ui-plate .sprite-crop{display:none}
|
||||
body[data-design=macaron] .dialog-close.game-icon>.ui-icon{color:#7A5560}
|
||||
body[data-design=macaron] .level-btn>.ui-plate{background:#F7EFE8;border-radius:16px}
|
||||
body[data-design=macaron] .level-btn.done>.ui-plate{background:#E4F3EA}
|
||||
body[data-design=macaron] .level-btn.current>.ui-plate{background:var(--mac-cta)}
|
||||
body[data-design=macaron] .level-btn>.ui-plate .sprite-crop{display:none}
|
||||
body[data-design=macaron] .level-btn{color:#7A5560}
|
||||
@media(prefers-reduced-motion:reduce){body[data-design=macaron] .moves-bubble.pop,body[data-design=macaron] .win-overlay[open] .result-emblem::before,body[data-design=macaron] .win-overlay[open] .result-emblem::after{animation:none}}
|
||||
|
||||
Reference in New Issue
Block a user