Mercurial

comparison mrjunejune/src/jrpg/jrpg.css @ 273:e02e2036ef84 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents 41a49c29a28f
children
comparison
equal deleted inserted replaced
272:41a49c29a28f 273:e02e2036ef84
39 39
40 .jrpg-page { 40 .jrpg-page {
41 --zenbu-sys-font-family-ui: "Pixel Mplus"; 41 --zenbu-sys-font-family-ui: "Pixel Mplus";
42 --zenbu-sys-font-family-content: "Pixel Mplus"; 42 --zenbu-sys-font-family-content: "Pixel Mplus";
43 --zenbu-sys-font-family-code: "Pixel Mplus"; 43 --zenbu-sys-font-family-code: "Pixel Mplus";
44 --zenbu-sys-type-caption-family: "Pixel Mplus";
44 --zenbu-sys-type-label-family: "Pixel Mplus"; 45 --zenbu-sys-type-label-family: "Pixel Mplus";
46 --zenbu-sys-type-body-family: "Pixel Mplus";
47 --zenbu-sys-type-body-large-family: "Pixel Mplus";
48 --zenbu-sys-type-subtitle-family: "Pixel Mplus";
49 --zenbu-sys-type-title-family: "Pixel Mplus";
50 --zenbu-sys-type-page-title-family: "Pixel Mplus";
51 --zenbu-sys-type-reading-family: "Pixel Mplus";
52 --zenbu-sys-type-code-family: "Pixel Mplus";
45 min-width: 20rem; 53 min-width: 20rem;
46 min-height: 100dvh; 54 min-height: 100dvh;
47 overflow: hidden; 55 overflow: hidden;
48 overflow-anchor: none; 56 overflow-anchor: none;
49 background: var(--mjj-jrpg-canvas); 57 background: var(--mjj-jrpg-canvas);
739 747
740 .jrpg-preview-dialog dialog { 748 .jrpg-preview-dialog dialog {
741 box-sizing: border-box; 749 box-sizing: border-box;
742 width: min(82vw, 46rem); 750 width: min(82vw, 46rem);
743 max-width: calc(100% - var(--zenbu-sys-space-content)); 751 max-width: calc(100% - var(--zenbu-sys-space-content));
744 padding: var(--zenbu-sys-padding-xl);
745 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
746 border-radius: 0;
747 background: var(--mjj-jrpg-surface-raised);
748 color: var(--mjj-jrpg-text);
749 box-shadow:
750 inset 0 0 0 var(--zenbu-sys-stroke-width)
751 var(--mjj-jrpg-accent),
752 var(--zenbu-sys-space-control)
753 var(--zenbu-sys-space-control)
754 0
755 var(--mjj-jrpg-accent);
756 }
757
758 .jrpg-preview-dialog dialog::backdrop {
759 background: color-mix(in srgb, var(--mjj-jrpg-canvas) 84%, transparent);
760 }
761
762 .jrpg-preview-dialog dialog[open] {
763 animation: mjj-jrpg-dialog-open var(--zenbu-sys-motion-duration-layout)
764 var(--zenbu-sys-motion-ease-enter);
765 }
766
767 @keyframes mjj-jrpg-dialog-open {
768 from {
769 clip-path: inset(48% 25%);
770 transform: scaleX(0.35);
771 }
772 to {
773 clip-path: inset(0);
774 transform: scaleX(1);
775 }
776 } 752 }
777 753
778 .jrpg-dialog-heading { 754 .jrpg-dialog-heading {
779 display: flex; 755 display: flex;
780 align-items: center; 756 align-items: center;
781 justify-content: space-between; 757 justify-content: space-between;
782 gap: var(--zenbu-sys-space-group); 758 gap: var(--zenbu-sys-space-group);
783 padding-bottom: var(--zenbu-sys-padding-md);
784 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
785 } 759 }
786 760
787 .jrpg-dialog-heading p, 761 .jrpg-dialog-heading p,
788 .jrpg-preview-dialog dialog > p { 762 .jrpg-preview-dialog dialog > p {
789 margin: 0; 763 margin: 0;
798 align-items: center; 772 align-items: center;
799 gap: var(--zenbu-sys-space-control); 773 gap: var(--zenbu-sys-space-control);
800 } 774 }
801 775
802 .jrpg-dialog-heading zen-button > :where(button, a) { 776 .jrpg-dialog-heading zen-button > :where(button, a) {
777 box-sizing: border-box;
803 width: auto; 778 width: auto;
804 min-width: var(--zenbu-control-height); 779 min-width: var(--zenbu-control-height);
780 height: var(--zenbu-control-height);
781 padding:
782 var(--zenbu-control-padding-block)
783 var(--zenbu-control-padding-inline);
805 border-color: var(--mjj-jrpg-accent); 784 border-color: var(--mjj-jrpg-accent);
806 background: var(--mjj-jrpg-surface); 785 background: var(--mjj-jrpg-surface);
807 color: var(--mjj-jrpg-text); 786 color: var(--mjj-jrpg-text);
808 } 787 }
809 788
810 .jrpg-dialog-heading zen-button > button { 789 .jrpg-dialog-heading zen-button > button {
811 width: var(--zenbu-control-height); 790 width: var(--zenbu-control-height);
812 padding: 0; 791 padding: 0;
813 } 792 }
814 793
815 .jrpg-preview-dialog dialog h2 {
816 margin-top: var(--zenbu-sys-space-content);
817 }
818
819 .jrpg-preview-dialog dialog > p {
820 margin-bottom: var(--zenbu-sys-space-content);
821 }
822
823 .jrpg-preview-dialog dialog.jrpg-detail-dialog { 794 .jrpg-preview-dialog dialog.jrpg-detail-dialog {
824 width: min(94vw, 72rem); 795 width: min(92vw, 60rem);
825 max-height: calc(100dvh - var(--zenbu-sys-space-container)); 796 max-height: calc(100dvh - var(--zenbu-sys-space-container));
826 overflow: hidden; 797 overflow: hidden;
827 } 798 }
828 799
829 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] { 800 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] {
830 display: grid; 801 display: grid;
831 grid-template-rows: auto auto minmax(0, 1fr) auto; 802 grid-template-rows: auto minmax(0, 1fr) auto;
832 gap: var(--zenbu-sys-space-group); 803 gap: var(--zenbu-sys-space-group);
833 } 804 }
834 805
806 mjj-window-modal .jrpg-detail-content {
807 box-sizing: border-box;
808 height: 100%;
809 min-height: 0;
810 padding: var(--zenbu-sys-padding-lg);
811 }
812
813 mjj-content-modal .jrpg-detail-content {
814 padding: var(--zenbu-sys-padding-lg);
815 }
816
835 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"] { 817 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"] {
836 width: calc(100vw - var(--zenbu-sys-space-content)); 818 width: min(90vw, 56rem);
837 max-width: none; 819 height: min(78dvh, 44rem);
838 height: calc(100dvh - var(--zenbu-sys-space-content)); 820 }
839 max-height: none; 821
822 .jrpg-detail-dialog[data-detail-mode="tools"] > h2 {
823 display: none;
824 }
825
826 .jrpg-detail-dialog[data-detail-mode="tools"] .jrpg-dialog-heading {
827 padding: var(--zenbu-sys-padding-sm);
828 }
829
830 .jrpg-resume-dossier {
831 min-height: 0;
840 padding: 0; 832 padding: 0;
833 overflow: auto;
841 border: 0; 834 border: 0;
842 background: transparent; 835 background: transparent;
843 box-shadow: none;
844 }
845
846 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"][open] {
847 grid-template-rows: auto minmax(0, 1fr);
848 gap: var(--zenbu-sys-space-control);
849 }
850
851 .jrpg-detail-dialog[data-detail-mode="tools"] > h2 {
852 display: none;
853 }
854
855 .jrpg-detail-dialog[data-detail-mode="tools"] .jrpg-dialog-heading {
856 padding: var(--zenbu-sys-padding-sm);
857 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
858 background: var(--mjj-jrpg-surface-raised);
859 box-shadow:
860 inset 0 0 0 var(--zenbu-sys-stroke-width)
861 var(--mjj-jrpg-accent);
862 }
863
864 .jrpg-resume-dossier {
865 min-height: 0;
866 padding: var(--zenbu-sys-padding-lg);
867 overflow: auto;
868 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
869 background: var(--mjj-jrpg-surface-sunken);
870 scrollbar-color: var(--mjj-jrpg-frame) transparent; 836 scrollbar-color: var(--mjj-jrpg-frame) transparent;
871 } 837 }
872 838
873 .jrpg-resume-dossier[hidden], 839 .jrpg-resume-dossier[hidden],
874 .jrpg-blog-browser[hidden], 840 .jrpg-blog-browser[hidden],
899 } 865 }
900 866
901 .jrpg-resume-dossier .info { 867 .jrpg-resume-dossier .info {
902 display: grid; 868 display: grid;
903 gap: var(--zenbu-sys-space-control); 869 gap: var(--zenbu-sys-space-control);
904 padding: var(--zenbu-sys-padding-lg); 870 padding: 0 0 var(--zenbu-sys-padding-lg);
905 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary); 871 border: 0;
906 background: var(--mjj-jrpg-panel); 872 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
873 background: transparent;
907 } 874 }
908 875
909 .jrpg-resume-dossier .info > p { 876 .jrpg-resume-dossier .info > p {
910 color: var(--mjj-jrpg-primary); 877 color: var(--mjj-jrpg-primary);
911 font-size: var(--zenbu-sys-font-size-xl); 878 font-size: var(--zenbu-sys-font-size-xl);
968 935
969 .jrpg-resume-dossier a { 936 .jrpg-resume-dossier a {
970 color: var(--mjj-jrpg-primary); 937 color: var(--mjj-jrpg-primary);
971 text-decoration-color: var(--mjj-jrpg-accent); 938 text-decoration-color: var(--mjj-jrpg-accent);
972 text-underline-offset: var(--zenbu-sys-space-icon-label); 939 text-underline-offset: var(--zenbu-sys-space-icon-label);
940 }
941
942 .jrpg-resume-dossier a[href="/public/resume.pdf"] {
943 display: none;
973 } 944 }
974 945
975 .jrpg-dialog-actions { 946 .jrpg-dialog-actions {
976 display: grid; 947 display: grid;
977 grid-template-columns: repeat(2, minmax(0, 1fr)); 948 grid-template-columns: repeat(2, minmax(0, 1fr));
1125 .jrpg-functional-tool [hidden] { 1096 .jrpg-functional-tool [hidden] {
1126 display: none; 1097 display: none;
1127 } 1098 }
1128 1099
1129 .jrpg-tool-panes { 1100 .jrpg-tool-panes {
1130 position: relative;
1131 box-sizing: border-box; 1101 box-sizing: border-box;
1132 display: grid; 1102 display: grid;
1133 grid-template-columns: 1103 grid-template-columns: minmax(0, 1fr);
1134 minmax(0, 1fr) 1104 grid-template-rows: repeat(2, minmax(18rem, auto));
1135 calc(var(--zenbu-sys-space-container) * 2)
1136 minmax(0, 1fr);
1137 gap: var(--zenbu-sys-space-control); 1105 gap: var(--zenbu-sys-space-control);
1138 height: 100%; 1106 height: auto;
1139 min-height: 0; 1107 min-height: 0;
1140 padding: var(--zenbu-sys-padding-sm); 1108 padding: var(--zenbu-sys-padding-sm);
1141 } 1109 }
1142 1110
1143 .jrpg-tool-panes::before { 1111 .jrpg-tool-panes::before {
1144 grid-column: 2; 1112 display: none;
1145 grid-row: 1;
1146 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1147 background-image:
1148 radial-gradient(
1149 circle at 50% var(--zenbu-sys-space-content),
1150 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
1151 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
1152 calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
1153 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
1154 ),
1155 radial-gradient(
1156 circle at 50% calc(100% - var(--zenbu-sys-space-content)),
1157 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
1158 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
1159 calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
1160 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
1161 ),
1162 linear-gradient(
1163 90deg,
1164 var(--mjj-jrpg-surface-sunken),
1165 var(--mjj-jrpg-surface-raised) 45%,
1166 var(--mjj-jrpg-frame) 50%,
1167 var(--mjj-jrpg-surface-raised) 55%,
1168 var(--mjj-jrpg-surface-sunken)
1169 ),
1170 var(--mjj-jrpg-art);
1171 background-position: center;
1172 background-size: auto, auto, auto, cover;
1173 box-shadow:
1174 inset 0 0 0 var(--zenbu-sys-stroke-width)
1175 var(--mjj-jrpg-info),
1176 0 0 var(--zenbu-sys-space-related)
1177 color-mix(in srgb, var(--mjj-jrpg-primary) 65%, transparent);
1178 content: "";
1179 image-rendering: pixelated;
1180 } 1113 }
1181 1114
1182 .jrpg-tool-window:first-of-type { 1115 .jrpg-tool-window:first-of-type {
1183 grid-column: 1; 1116 grid-column: 1;
1184 grid-row: 1; 1117 grid-row: 1;
1185 } 1118 }
1186 1119
1187 .jrpg-tool-window:last-of-type { 1120 .jrpg-tool-window:last-of-type {
1188 grid-column: 3; 1121 grid-column: 1;
1189 grid-row: 1; 1122 grid-row: 2;
1190 } 1123 }
1191 1124
1192 .jrpg-tool-pane { 1125 .jrpg-tool-pane {
1193 display: grid; 1126 display: grid;
1194 grid-template-rows: auto minmax(0, 1fr) auto; 1127 grid-template-rows: auto minmax(0, 1fr) auto;
1979 1912
1980 .jrpg-archive-dialog { 1913 .jrpg-archive-dialog {
1981 box-sizing: border-box; 1914 box-sizing: border-box;
1982 min-width: min(22rem, calc(100vw - var(--zenbu-sys-space-content))); 1915 min-width: min(22rem, calc(100vw - var(--zenbu-sys-space-content)));
1983 max-width: min(26rem, calc(100vw - var(--zenbu-sys-space-content))); 1916 max-width: min(26rem, calc(100vw - var(--zenbu-sys-space-content)));
1984 padding: var(--zenbu-sys-padding-lg); 1917 }
1985 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); 1918
1986 border-radius: 0; 1919 mjj-window-modal [data-archive-rename-dialog] {
1987 background: var(--mjj-jrpg-surface-raised); 1920 height: auto;
1988 color: var(--mjj-jrpg-text);
1989 box-shadow:
1990 inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent),
1991 var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0 var(--mjj-jrpg-accent);
1992 }
1993
1994 .jrpg-archive-dialog::backdrop {
1995 background: color-mix(in srgb, var(--mjj-jrpg-canvas) 84%, transparent);
1996 }
1997
1998 .jrpg-archive-dialog[open] {
1999 display: grid;
2000 grid-template-rows: auto auto auto;
2001 gap: var(--zenbu-sys-space-group);
2002 animation: mjj-jrpg-dialog-open var(--zenbu-sys-motion-duration-layout)
2003 var(--zenbu-sys-motion-ease-enter);
2004 } 1921 }
2005 1922
2006 .jrpg-archive-dialog-title { 1923 .jrpg-archive-dialog-title {
2007 margin: 0; 1924 margin: 0;
2008 color: var(--mjj-jrpg-primary); 1925 color: var(--mjj-jrpg-primary);
2274 font-size: var(--zenbu-sys-font-size-sm); 2191 font-size: var(--zenbu-sys-font-size-sm);
2275 text-shadow: none; 2192 text-shadow: none;
2276 } 2193 }
2277 2194
2278 /* Hamburger button: transparent overlay over baked art */ 2195 /* Hamburger button: transparent overlay over baked art */
2279 .jrpg-mobile-destination-owner > .jrpg-mobile-menu-btn { 2196 .jrpg-mobile-destination-owner > zen-dialog > .jrpg-mobile-menu-btn {
2280 display: grid; 2197 display: grid;
2281 place-items: center; 2198 place-items: center;
2282 position: absolute; 2199 position: absolute;
2283 z-index: 5; 2200 z-index: 5;
2284 inset: 2201 inset:
2379 background: transparent; 2296 background: transparent;
2380 color: var(--mjj-jrpg-text); 2297 color: var(--mjj-jrpg-text);
2381 cursor: pointer; 2298 cursor: pointer;
2382 } 2299 }
2383 2300
2384 .jrpg-mobile-destination-content { 2301 mjj-window-modal .jrpg-mobile-destination-content {
2385 min-width: 0; 2302 min-width: 0;
2386 min-height: 0; 2303 min-height: 0;
2387 overflow: hidden; 2304 padding: 0;
2305 overflow-x: auto;
2306 overflow-y: scroll;
2307 scrollbar-gutter: stable;
2388 } 2308 }
2389 2309
2390 .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) { 2310 .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) {
2391 box-sizing: border-box; 2311 box-sizing: border-box;
2392 position: static; 2312 position: static;
2536 } 2456 }
2537 2457
2538 .jrpg-login-dialog { 2458 .jrpg-login-dialog {
2539 box-sizing: border-box; 2459 box-sizing: border-box;
2540 width: min(24rem, calc(100vw - var(--zenbu-sys-space-content))); 2460 width: min(24rem, calc(100vw - var(--zenbu-sys-space-content)));
2541 padding: var(--zenbu-sys-padding-xl); 2461 height: auto;
2542 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
2543 border-radius: 0;
2544 background: var(--mjj-jrpg-surface-raised);
2545 color: var(--mjj-jrpg-text);
2546 box-shadow:
2547 inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent),
2548 var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0
2549 var(--mjj-jrpg-accent);
2550 }
2551
2552 .jrpg-login-dialog::backdrop {
2553 background: color-mix(in srgb, var(--mjj-jrpg-canvas) 84%, transparent);
2554 }
2555
2556 .jrpg-login-dialog[open] {
2557 display: grid;
2558 grid-template-rows: auto auto minmax(0, 1fr);
2559 gap: var(--zenbu-sys-space-group);
2560 animation: mjj-jrpg-dialog-open var(--zenbu-sys-motion-duration-layout)
2561 var(--zenbu-sys-motion-ease-enter);
2562 } 2462 }
2563 2463
2564 .jrpg-login-dialog-header { 2464 .jrpg-login-dialog-header {
2565 display: flex; 2465 display: flex;
2566 align-items: center; 2466 align-items: center;
2567 justify-content: space-between; 2467 justify-content: space-between;
2568 gap: var(--zenbu-sys-space-group); 2468 gap: var(--zenbu-sys-space-group);
2569 padding-bottom: var(--zenbu-sys-padding-md);
2570 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
2571 } 2469 }
2572 2470
2573 .jrpg-login-dialog-header h2 { 2471 .jrpg-login-dialog-header h2 {
2574 margin: 0; 2472 margin: 0;
2575 color: var(--mjj-jrpg-primary); 2473 color: var(--mjj-jrpg-primary);