Mercurial
diff mrjunejune/src/jrpg/jrpg.css @ 261:b401627fc49e
Add JRPG mock flows and interactive previews
Add scripted mock SSE commands, custom event forwarding, animated chat turns, full-height message navigation, and a cyberpunk resume dossier.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <mrjunejune@users.noreply.github.com> |
|---|---|
| date | Wed, 05 Aug 2026 20:38:32 -0700 |
| parents | 1f9877b637e9 |
| children | 0f45474c1b1a |
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/jrpg.css Wed Aug 05 09:19:41 2026 -0700 +++ b/mrjunejune/src/jrpg/jrpg.css Wed Aug 05 20:38:32 2026 -0700 @@ -177,7 +177,6 @@ border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); } -.jrpg-panel-heading span, .jrpg-preview-kicker, .jrpg-menu-label, .jrpg-brand > p, @@ -194,14 +193,18 @@ font-size: var(--zenbu-sys-font-size-lg); } -zen-message-scroller, -.jrpg-message-viewport { +zen-message-scroller { display: block; + overflow: hidden; min-height: 0; height: 100%; } -.jrpg-message-viewport { +zen-message-scroller > .jrpg-message-viewport { + box-sizing: border-box; + height: 100%; + min-height: 0; + max-height: none; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; @@ -224,6 +227,10 @@ border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); } +.jrpg-message[hidden] { + display: none; +} + .jrpg-message[data-speaker="June"] { border-left-color: var(--mjj-jrpg-info); } @@ -236,16 +243,75 @@ .jrpg-message p { margin: 0; color: var(--mjj-jrpg-text); + white-space: pre-wrap; +} + +.jrpg-message[data-streaming="true"] p::after { + display: inline-block; + width: 0.65em; + height: 1em; + margin-left: var(--zenbu-sys-space-icon-label); + background: currentColor; + content: ""; + vertical-align: -0.12em; + animation: mjj-jrpg-cursor + calc(var(--zenbu-sys-motion-duration-layout) * 2) + steps(1, end) + infinite; +} + +@keyframes mjj-jrpg-cursor { + 50% { + opacity: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .jrpg-message[data-streaming="true"] p::after { + animation: none; + } } -.jrpg-next { - display: flex; +.jrpg-turn-navigation { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; - justify-content: end; gap: var(--zenbu-sys-space-icon-label); - margin: 0; + padding-top: var(--zenbu-sys-padding-sm); + border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); +} + +.jrpg-turn-navigation zen-button, +.jrpg-turn-navigation button { + width: 100%; +} + +.jrpg-turn-navigation button { + justify-content: center; + border: var(--zenbu-sys-stroke-width) solid transparent; + border-radius: 0; + background: transparent; color: var(--mjj-jrpg-primary); font-size: var(--zenbu-sys-font-size-xs); + cursor: pointer; +} + +.jrpg-turn-navigation button:hover:not(:disabled) { + border-color: var(--mjj-jrpg-primary); + background: var(--mjj-jrpg-surface-raised); +} + +.jrpg-turn-navigation button:disabled { + color: var(--mjj-jrpg-text-muted); + cursor: not-allowed; + opacity: var(--zenbu-sys-opacity-disabled); +} + +.jrpg-turn-navigation [data-turn-position] { + justify-self: center; + color: var(--mjj-jrpg-text-muted); + font-size: var(--zenbu-sys-font-size-xs); + letter-spacing: 0.08em; } .jrpg-utility { @@ -299,7 +365,7 @@ .jrpg-preview-panel { display: grid; - grid-template-rows: auto auto minmax(0, 1fr) auto auto; + grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: var(--zenbu-sys-space-group); height: 100%; padding: var(--zenbu-sys-padding-lg); @@ -327,6 +393,40 @@ color: var(--mjj-jrpg-text); } +.jrpg-work-showcase { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-content: start; + gap: var(--zenbu-sys-space-control); + min-height: 0; + margin: 0; + padding: 0; + overflow-y: auto; + list-style: none; +} + +.jrpg-work-showcase a { + display: grid; + gap: var(--zenbu-sys-space-icon-label); + height: 100%; + padding: var(--zenbu-sys-padding-sm); + border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); + background: var(--mjj-jrpg-panel); + color: var(--mjj-jrpg-primary); + text-decoration: none; +} + +.jrpg-work-showcase a:hover, +.jrpg-work-showcase a:focus-visible { + border-color: var(--mjj-jrpg-accent); + background: var(--mjj-jrpg-surface-raised); +} + +.jrpg-work-showcase small { + color: var(--mjj-jrpg-text-muted); + font-size: var(--zenbu-sys-font-size-xs); +} + .jrpg-preview-stats { display: grid; grid-template-columns: repeat(2, 1fr); @@ -434,9 +534,133 @@ margin-bottom: var(--zenbu-sys-space-content); } +.jrpg-preview-dialog dialog.jrpg-resume-dialog { + width: min(94vw, 72rem); + max-height: calc(100dvh - var(--zenbu-sys-space-container)); + overflow: hidden; +} + +.jrpg-preview-dialog dialog.jrpg-resume-dialog[open] { + display: grid; + grid-template-rows: auto auto minmax(0, 1fr) auto; + gap: var(--zenbu-sys-space-group); +} + +.jrpg-resume-dossier { + min-height: 0; + padding: var(--zenbu-sys-padding-lg); + overflow: auto; + border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); + background: var(--mjj-jrpg-surface-sunken); + scrollbar-color: var(--mjj-jrpg-frame) transparent; +} + +.jrpg-resume-dossier[hidden], +[data-dialog-copy][hidden], +[data-resume-status][hidden], +[data-resume-download][hidden] { + display: none; +} + +.jrpg-resume-dossier [data-resume-status] { + margin: 0; + color: var(--mjj-jrpg-highlight); +} + +.jrpg-resume-dossier [data-resume-content] { + display: grid; + gap: var(--zenbu-sys-space-group); + color: var(--mjj-jrpg-text); +} + +.jrpg-resume-dossier :where(p, ul) { + margin-block: 0; +} + +.jrpg-resume-dossier .info { + display: grid; + gap: var(--zenbu-sys-space-control); + padding: var(--zenbu-sys-padding-lg); + border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary); + background: var(--mjj-jrpg-panel); +} + +.jrpg-resume-dossier .info > p { + color: var(--mjj-jrpg-primary); + font-size: var(--zenbu-sys-font-size-xl); +} + +.jrpg-resume-dossier .header-address-style, +.jrpg-resume-dossier .header-social-style { + display: flex; + flex-wrap: wrap; + gap: var(--zenbu-sys-space-control); + color: var(--mjj-jrpg-text-muted); +} + +.jrpg-resume-dossier .sub-header { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + align-items: center; + gap: var(--zenbu-sys-space-control); + margin-top: var(--zenbu-sys-space-content); +} + +.jrpg-resume-dossier .sub-header h2 { + margin: 0; + color: var(--mjj-jrpg-highlight); + font-size: var(--zenbu-sys-font-size-lg); + text-transform: uppercase; +} + +.jrpg-resume-dossier .sub-header .line { + height: var(--zenbu-sys-stroke-width-emphasis); + background: var(--mjj-jrpg-accent); +} + +.jrpg-resume-dossier .flex-box { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: var(--zenbu-sys-space-control); + padding-top: var(--zenbu-sys-padding-sm); + border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); +} + +.jrpg-resume-dossier .entry-title-style, +.jrpg-resume-dossier .entry-position-style { + color: var(--mjj-jrpg-primary); +} + +.jrpg-resume-dossier .entry-location-style, +.jrpg-resume-dossier .entry-date-style, +.jrpg-resume-dossier .skill-type-style { + color: var(--mjj-jrpg-text-muted); + text-align: right; +} + +.jrpg-resume-dossier .description-style { + display: grid; + gap: var(--zenbu-sys-space-control); + padding-left: var(--zenbu-sys-padding-xl); +} + +.jrpg-resume-dossier a { + color: var(--mjj-jrpg-primary); + text-decoration-color: var(--mjj-jrpg-accent); + text-underline-offset: var(--zenbu-sys-space-icon-label); +} + +.jrpg-dialog-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--zenbu-sys-space-control); +} + mjj-jrpg-composer { grid-area: composer; display: block; + min-height: 0; padding: var(--zenbu-sys-padding-md); background: var(--mjj-jrpg-surface); } @@ -444,26 +668,42 @@ .jrpg-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; + grid-template-rows: minmax(0, 1fr) auto; gap: var(--zenbu-sys-space-control); + height: 100%; + min-height: 0; } -.jrpg-composer zen-field { +.jrpg-composer zen-field[appearance="plain"] { display: grid; + grid-column: 1; + grid-row: 1; + grid-template-rows: auto minmax(0, 1fr); gap: var(--zenbu-sys-space-icon-label); + min-height: 0; } .jrpg-composer label, .jrpg-composer-hint { grid-column: 1 / -1; + grid-row: 2; color: var(--mjj-jrpg-text-muted); font-size: var(--zenbu-sys-font-size-xs); } +.jrpg-composer zen-field label { + grid-column: 1; + grid-row: 1; +} + .jrpg-composer textarea { box-sizing: border-box; + grid-column: 1; + grid-row: 2; width: 100%; + height: 100%; min-height: calc(var(--zenbu-control-height) * 2); - resize: vertical; + resize: none; padding: var(--zenbu-control-padding-block) var(--zenbu-control-padding-inline); @@ -483,11 +723,25 @@ outline-offset: var(--zenbu-sys-focus-offset); } +.jrpg-composer-actions { + display: flex; + grid-column: 2; + grid-row: 1; + flex-direction: column; + justify-content: flex-end; + gap: var(--zenbu-sys-space-control); +} + .jrpg-composer zen-button { - align-self: end; + width: 100%; +} + +.jrpg-composer zen-button[hidden] { + display: none; } .jrpg-composer zen-button > button { + width: 100%; border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); border-radius: 0; background: var(--mjj-jrpg-primary); @@ -655,10 +909,39 @@ .jrpg-composer { grid-template-columns: 1fr; + grid-template-rows: + minmax(calc(var(--zenbu-control-height) * 3), 1fr) + auto + auto; + } + + .jrpg-composer-actions { + grid-column: 1; + grid-row: 2; + flex-direction: row; + } + + .jrpg-composer-hint { + grid-row: 3; } - .jrpg-composer zen-button { - width: 100%; + .jrpg-composer-actions zen-button { + flex: 1; + } + + .jrpg-work-showcase, + .jrpg-dialog-actions { + grid-template-columns: 1fr; + } + + .jrpg-resume-dossier .flex-box { + display: grid; + } + + .jrpg-resume-dossier .entry-location-style, + .jrpg-resume-dossier .entry-date-style, + .jrpg-resume-dossier .skill-type-style { + text-align: left; } .jrpg-composer zen-button > button {