Mercurial

comparison mrjunejune/src/jrpg/jrpg.css @ 261:b401627fc49e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
260:1f9877b637e9 261:b401627fc49e
175 gap: var(--zenbu-sys-space-group); 175 gap: var(--zenbu-sys-space-group);
176 padding-bottom: var(--zenbu-sys-padding-sm); 176 padding-bottom: var(--zenbu-sys-padding-sm);
177 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); 177 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
178 } 178 }
179 179
180 .jrpg-panel-heading span,
181 .jrpg-preview-kicker, 180 .jrpg-preview-kicker,
182 .jrpg-menu-label, 181 .jrpg-menu-label,
183 .jrpg-brand > p, 182 .jrpg-brand > p,
184 .jrpg-dialog-heading p, 183 .jrpg-dialog-heading p,
185 .jrpg-preview-stats dt { 184 .jrpg-preview-stats dt {
192 margin: 0; 191 margin: 0;
193 color: var(--mjj-jrpg-text); 192 color: var(--mjj-jrpg-text);
194 font-size: var(--zenbu-sys-font-size-lg); 193 font-size: var(--zenbu-sys-font-size-lg);
195 } 194 }
196 195
197 zen-message-scroller, 196 zen-message-scroller {
198 .jrpg-message-viewport {
199 display: block; 197 display: block;
198 overflow: hidden;
200 min-height: 0; 199 min-height: 0;
201 height: 100%; 200 height: 100%;
202 } 201 }
203 202
204 .jrpg-message-viewport { 203 zen-message-scroller > .jrpg-message-viewport {
204 box-sizing: border-box;
205 height: 100%;
206 min-height: 0;
207 max-height: none;
205 overflow-y: auto; 208 overflow-y: auto;
206 overflow-anchor: none; 209 overflow-anchor: none;
207 overscroll-behavior: contain; 210 overscroll-behavior: contain;
208 scrollbar-color: var(--mjj-jrpg-frame) transparent; 211 scrollbar-color: var(--mjj-jrpg-frame) transparent;
209 } 212 }
222 gap: var(--zenbu-sys-space-control); 225 gap: var(--zenbu-sys-space-control);
223 padding-left: var(--zenbu-sys-padding-sm); 226 padding-left: var(--zenbu-sys-padding-sm);
224 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); 227 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
225 } 228 }
226 229
230 .jrpg-message[hidden] {
231 display: none;
232 }
233
227 .jrpg-message[data-speaker="June"] { 234 .jrpg-message[data-speaker="June"] {
228 border-left-color: var(--mjj-jrpg-info); 235 border-left-color: var(--mjj-jrpg-info);
229 } 236 }
230 237
231 .jrpg-message strong { 238 .jrpg-message strong {
234 } 241 }
235 242
236 .jrpg-message p { 243 .jrpg-message p {
237 margin: 0; 244 margin: 0;
238 color: var(--mjj-jrpg-text); 245 color: var(--mjj-jrpg-text);
239 } 246 white-space: pre-wrap;
240 247 }
241 .jrpg-next { 248
242 display: flex; 249 .jrpg-message[data-streaming="true"] p::after {
250 display: inline-block;
251 width: 0.65em;
252 height: 1em;
253 margin-left: var(--zenbu-sys-space-icon-label);
254 background: currentColor;
255 content: "";
256 vertical-align: -0.12em;
257 animation: mjj-jrpg-cursor
258 calc(var(--zenbu-sys-motion-duration-layout) * 2)
259 steps(1, end)
260 infinite;
261 }
262
263 @keyframes mjj-jrpg-cursor {
264 50% {
265 opacity: 0;
266 }
267 }
268
269 @media (prefers-reduced-motion: reduce) {
270 .jrpg-message[data-streaming="true"] p::after {
271 animation: none;
272 }
273 }
274
275 .jrpg-turn-navigation {
276 display: grid;
277 grid-template-columns: auto minmax(0, 1fr) auto;
243 align-items: center; 278 align-items: center;
244 justify-content: end;
245 gap: var(--zenbu-sys-space-icon-label); 279 gap: var(--zenbu-sys-space-icon-label);
246 margin: 0; 280 padding-top: var(--zenbu-sys-padding-sm);
281 border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
282 }
283
284 .jrpg-turn-navigation zen-button,
285 .jrpg-turn-navigation button {
286 width: 100%;
287 }
288
289 .jrpg-turn-navigation button {
290 justify-content: center;
291 border: var(--zenbu-sys-stroke-width) solid transparent;
292 border-radius: 0;
293 background: transparent;
247 color: var(--mjj-jrpg-primary); 294 color: var(--mjj-jrpg-primary);
248 font-size: var(--zenbu-sys-font-size-xs); 295 font-size: var(--zenbu-sys-font-size-xs);
296 cursor: pointer;
297 }
298
299 .jrpg-turn-navigation button:hover:not(:disabled) {
300 border-color: var(--mjj-jrpg-primary);
301 background: var(--mjj-jrpg-surface-raised);
302 }
303
304 .jrpg-turn-navigation button:disabled {
305 color: var(--mjj-jrpg-text-muted);
306 cursor: not-allowed;
307 opacity: var(--zenbu-sys-opacity-disabled);
308 }
309
310 .jrpg-turn-navigation [data-turn-position] {
311 justify-self: center;
312 color: var(--mjj-jrpg-text-muted);
313 font-size: var(--zenbu-sys-font-size-xs);
314 letter-spacing: 0.08em;
249 } 315 }
250 316
251 .jrpg-utility { 317 .jrpg-utility {
252 grid-area: utility; 318 grid-area: utility;
253 display: grid; 319 display: grid;
297 min-height: 0; 363 min-height: 0;
298 } 364 }
299 365
300 .jrpg-preview-panel { 366 .jrpg-preview-panel {
301 display: grid; 367 display: grid;
302 grid-template-rows: auto auto minmax(0, 1fr) auto auto; 368 grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
303 gap: var(--zenbu-sys-space-group); 369 gap: var(--zenbu-sys-space-group);
304 height: 100%; 370 height: 100%;
305 padding: var(--zenbu-sys-padding-lg); 371 padding: var(--zenbu-sys-padding-lg);
306 background: 372 background:
307 linear-gradient( 373 linear-gradient(
323 color: var(--mjj-jrpg-primary); 389 color: var(--mjj-jrpg-primary);
324 } 390 }
325 391
326 .jrpg-preview-panel > p:not(.jrpg-preview-kicker) { 392 .jrpg-preview-panel > p:not(.jrpg-preview-kicker) {
327 color: var(--mjj-jrpg-text); 393 color: var(--mjj-jrpg-text);
394 }
395
396 .jrpg-work-showcase {
397 display: grid;
398 grid-template-columns: repeat(2, minmax(0, 1fr));
399 align-content: start;
400 gap: var(--zenbu-sys-space-control);
401 min-height: 0;
402 margin: 0;
403 padding: 0;
404 overflow-y: auto;
405 list-style: none;
406 }
407
408 .jrpg-work-showcase a {
409 display: grid;
410 gap: var(--zenbu-sys-space-icon-label);
411 height: 100%;
412 padding: var(--zenbu-sys-padding-sm);
413 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
414 background: var(--mjj-jrpg-panel);
415 color: var(--mjj-jrpg-primary);
416 text-decoration: none;
417 }
418
419 .jrpg-work-showcase a:hover,
420 .jrpg-work-showcase a:focus-visible {
421 border-color: var(--mjj-jrpg-accent);
422 background: var(--mjj-jrpg-surface-raised);
423 }
424
425 .jrpg-work-showcase small {
426 color: var(--mjj-jrpg-text-muted);
427 font-size: var(--zenbu-sys-font-size-xs);
328 } 428 }
329 429
330 .jrpg-preview-stats { 430 .jrpg-preview-stats {
331 display: grid; 431 display: grid;
332 grid-template-columns: repeat(2, 1fr); 432 grid-template-columns: repeat(2, 1fr);
432 532
433 .jrpg-preview-dialog dialog > p { 533 .jrpg-preview-dialog dialog > p {
434 margin-bottom: var(--zenbu-sys-space-content); 534 margin-bottom: var(--zenbu-sys-space-content);
435 } 535 }
436 536
537 .jrpg-preview-dialog dialog.jrpg-resume-dialog {
538 width: min(94vw, 72rem);
539 max-height: calc(100dvh - var(--zenbu-sys-space-container));
540 overflow: hidden;
541 }
542
543 .jrpg-preview-dialog dialog.jrpg-resume-dialog[open] {
544 display: grid;
545 grid-template-rows: auto auto minmax(0, 1fr) auto;
546 gap: var(--zenbu-sys-space-group);
547 }
548
549 .jrpg-resume-dossier {
550 min-height: 0;
551 padding: var(--zenbu-sys-padding-lg);
552 overflow: auto;
553 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
554 background: var(--mjj-jrpg-surface-sunken);
555 scrollbar-color: var(--mjj-jrpg-frame) transparent;
556 }
557
558 .jrpg-resume-dossier[hidden],
559 [data-dialog-copy][hidden],
560 [data-resume-status][hidden],
561 [data-resume-download][hidden] {
562 display: none;
563 }
564
565 .jrpg-resume-dossier [data-resume-status] {
566 margin: 0;
567 color: var(--mjj-jrpg-highlight);
568 }
569
570 .jrpg-resume-dossier [data-resume-content] {
571 display: grid;
572 gap: var(--zenbu-sys-space-group);
573 color: var(--mjj-jrpg-text);
574 }
575
576 .jrpg-resume-dossier :where(p, ul) {
577 margin-block: 0;
578 }
579
580 .jrpg-resume-dossier .info {
581 display: grid;
582 gap: var(--zenbu-sys-space-control);
583 padding: var(--zenbu-sys-padding-lg);
584 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary);
585 background: var(--mjj-jrpg-panel);
586 }
587
588 .jrpg-resume-dossier .info > p {
589 color: var(--mjj-jrpg-primary);
590 font-size: var(--zenbu-sys-font-size-xl);
591 }
592
593 .jrpg-resume-dossier .header-address-style,
594 .jrpg-resume-dossier .header-social-style {
595 display: flex;
596 flex-wrap: wrap;
597 gap: var(--zenbu-sys-space-control);
598 color: var(--mjj-jrpg-text-muted);
599 }
600
601 .jrpg-resume-dossier .sub-header {
602 display: grid;
603 grid-template-columns: auto minmax(0, 1fr);
604 align-items: center;
605 gap: var(--zenbu-sys-space-control);
606 margin-top: var(--zenbu-sys-space-content);
607 }
608
609 .jrpg-resume-dossier .sub-header h2 {
610 margin: 0;
611 color: var(--mjj-jrpg-highlight);
612 font-size: var(--zenbu-sys-font-size-lg);
613 text-transform: uppercase;
614 }
615
616 .jrpg-resume-dossier .sub-header .line {
617 height: var(--zenbu-sys-stroke-width-emphasis);
618 background: var(--mjj-jrpg-accent);
619 }
620
621 .jrpg-resume-dossier .flex-box {
622 display: flex;
623 align-items: baseline;
624 justify-content: space-between;
625 gap: var(--zenbu-sys-space-control);
626 padding-top: var(--zenbu-sys-padding-sm);
627 border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
628 }
629
630 .jrpg-resume-dossier .entry-title-style,
631 .jrpg-resume-dossier .entry-position-style {
632 color: var(--mjj-jrpg-primary);
633 }
634
635 .jrpg-resume-dossier .entry-location-style,
636 .jrpg-resume-dossier .entry-date-style,
637 .jrpg-resume-dossier .skill-type-style {
638 color: var(--mjj-jrpg-text-muted);
639 text-align: right;
640 }
641
642 .jrpg-resume-dossier .description-style {
643 display: grid;
644 gap: var(--zenbu-sys-space-control);
645 padding-left: var(--zenbu-sys-padding-xl);
646 }
647
648 .jrpg-resume-dossier a {
649 color: var(--mjj-jrpg-primary);
650 text-decoration-color: var(--mjj-jrpg-accent);
651 text-underline-offset: var(--zenbu-sys-space-icon-label);
652 }
653
654 .jrpg-dialog-actions {
655 display: grid;
656 grid-template-columns: repeat(2, minmax(0, 1fr));
657 gap: var(--zenbu-sys-space-control);
658 }
659
437 mjj-jrpg-composer { 660 mjj-jrpg-composer {
438 grid-area: composer; 661 grid-area: composer;
439 display: block; 662 display: block;
663 min-height: 0;
440 padding: var(--zenbu-sys-padding-md); 664 padding: var(--zenbu-sys-padding-md);
441 background: var(--mjj-jrpg-surface); 665 background: var(--mjj-jrpg-surface);
442 } 666 }
443 667
444 .jrpg-composer { 668 .jrpg-composer {
445 display: grid; 669 display: grid;
446 grid-template-columns: minmax(0, 1fr) auto; 670 grid-template-columns: minmax(0, 1fr) auto;
447 gap: var(--zenbu-sys-space-control); 671 grid-template-rows: minmax(0, 1fr) auto;
448 } 672 gap: var(--zenbu-sys-space-control);
449 673 height: 100%;
450 .jrpg-composer zen-field { 674 min-height: 0;
451 display: grid; 675 }
676
677 .jrpg-composer zen-field[appearance="plain"] {
678 display: grid;
679 grid-column: 1;
680 grid-row: 1;
681 grid-template-rows: auto minmax(0, 1fr);
452 gap: var(--zenbu-sys-space-icon-label); 682 gap: var(--zenbu-sys-space-icon-label);
683 min-height: 0;
453 } 684 }
454 685
455 .jrpg-composer label, 686 .jrpg-composer label,
456 .jrpg-composer-hint { 687 .jrpg-composer-hint {
457 grid-column: 1 / -1; 688 grid-column: 1 / -1;
689 grid-row: 2;
458 color: var(--mjj-jrpg-text-muted); 690 color: var(--mjj-jrpg-text-muted);
459 font-size: var(--zenbu-sys-font-size-xs); 691 font-size: var(--zenbu-sys-font-size-xs);
460 } 692 }
461 693
694 .jrpg-composer zen-field label {
695 grid-column: 1;
696 grid-row: 1;
697 }
698
462 .jrpg-composer textarea { 699 .jrpg-composer textarea {
463 box-sizing: border-box; 700 box-sizing: border-box;
701 grid-column: 1;
702 grid-row: 2;
464 width: 100%; 703 width: 100%;
704 height: 100%;
465 min-height: calc(var(--zenbu-control-height) * 2); 705 min-height: calc(var(--zenbu-control-height) * 2);
466 resize: vertical; 706 resize: none;
467 padding: 707 padding:
468 var(--zenbu-control-padding-block) 708 var(--zenbu-control-padding-block)
469 var(--zenbu-control-padding-inline); 709 var(--zenbu-control-padding-inline);
470 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); 710 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
471 border-radius: 0; 711 border-radius: 0;
481 .jrpg-page :where(a, button, textarea):focus-visible { 721 .jrpg-page :where(a, button, textarea):focus-visible {
482 outline: var(--zenbu-sys-focus-width) solid var(--mjj-jrpg-focus); 722 outline: var(--zenbu-sys-focus-width) solid var(--mjj-jrpg-focus);
483 outline-offset: var(--zenbu-sys-focus-offset); 723 outline-offset: var(--zenbu-sys-focus-offset);
484 } 724 }
485 725
726 .jrpg-composer-actions {
727 display: flex;
728 grid-column: 2;
729 grid-row: 1;
730 flex-direction: column;
731 justify-content: flex-end;
732 gap: var(--zenbu-sys-space-control);
733 }
734
486 .jrpg-composer zen-button { 735 .jrpg-composer zen-button {
487 align-self: end; 736 width: 100%;
737 }
738
739 .jrpg-composer zen-button[hidden] {
740 display: none;
488 } 741 }
489 742
490 .jrpg-composer zen-button > button { 743 .jrpg-composer zen-button > button {
744 width: 100%;
491 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); 745 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
492 border-radius: 0; 746 border-radius: 0;
493 background: var(--mjj-jrpg-primary); 747 background: var(--mjj-jrpg-primary);
494 color: var(--mjj-jrpg-primary-foreground); 748 color: var(--mjj-jrpg-primary-foreground);
495 cursor: pointer; 749 cursor: pointer;
653 max-width: 9rem; 907 max-width: 9rem;
654 } 908 }
655 909
656 .jrpg-composer { 910 .jrpg-composer {
657 grid-template-columns: 1fr; 911 grid-template-columns: 1fr;
658 } 912 grid-template-rows:
659 913 minmax(calc(var(--zenbu-control-height) * 3), 1fr)
660 .jrpg-composer zen-button { 914 auto
661 width: 100%; 915 auto;
916 }
917
918 .jrpg-composer-actions {
919 grid-column: 1;
920 grid-row: 2;
921 flex-direction: row;
922 }
923
924 .jrpg-composer-hint {
925 grid-row: 3;
926 }
927
928 .jrpg-composer-actions zen-button {
929 flex: 1;
930 }
931
932 .jrpg-work-showcase,
933 .jrpg-dialog-actions {
934 grid-template-columns: 1fr;
935 }
936
937 .jrpg-resume-dossier .flex-box {
938 display: grid;
939 }
940
941 .jrpg-resume-dossier .entry-location-style,
942 .jrpg-resume-dossier .entry-date-style,
943 .jrpg-resume-dossier .skill-type-style {
944 text-align: left;
662 } 945 }
663 946
664 .jrpg-composer zen-button > button { 947 .jrpg-composer zen-button > button {
665 width: 100%; 948 width: 100%;
666 } 949 }