Mercurial

annotate mrjunejune/src/public/mjj-modal.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
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
273
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 :where(mjj-content-modal, mjj-window-modal) {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 display: contents;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 :where(mjj-content-modal, mjj-window-modal) dialog {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 --mjj-modal-border: var(--zenbu-sys-color-border-strong);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 --mjj-modal-shadow:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 inset 0 0 0 var(--zenbu-sys-stroke-width)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 var(--zenbu-sys-color-action-primary-border),
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 var(--zenbu-sys-space-control)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 var(--zenbu-sys-space-control)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 0
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 var(--zenbu-sys-color-danger-border),
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 var(--zenbu-sys-shadow-dialog);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 box-sizing: border-box;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 width: min(
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 calc(100vw - var(--zenbu-sys-space-container)),
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 var(--mjj-modal-width)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 );
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 max-width: none;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 max-height: calc(100dvh - var(--zenbu-sys-space-container));
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 margin: auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 padding: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 overflow: hidden;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 border: var(--zenbu-sys-stroke-width) solid var(--mjj-modal-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 border-radius: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 background: var(--zenbu-sys-color-surface-raised);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 color: var(--zenbu-sys-color-text-primary);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 box-shadow: var(--mjj-modal-shadow);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 :where(mjj-content-modal, mjj-window-modal) dialog::backdrop {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 background: var(--zenbu-sys-color-scrim);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 backdrop-filter: blur(var(--zenbu-sys-stroke-width-emphasis));
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 :where(mjj-content-modal, mjj-window-modal) dialog[open] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 display: grid;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 grid-template-rows: auto minmax(0, 1fr) auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 animation:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 mjj-modal-enter
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 var(--zenbu-sys-motion-duration-layout)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 var(--zenbu-sys-motion-ease-enter);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 :where(mjj-content-modal, mjj-window-modal) [data-modal-header] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 display: grid;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 grid-template-columns: minmax(0, 1fr) auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 align-items: center;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 gap: var(--zenbu-sys-space-group);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 :where(mjj-content-modal, mjj-window-modal) [data-modal-heading] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 display: grid;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 gap: var(--zenbu-sys-space-icon-label);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 min-width: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 :where(mjj-content-modal, mjj-window-modal) [data-modal-kicker] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 margin: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 color: var(--zenbu-sys-color-warning-foreground);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 font-size: var(--zenbu-sys-font-size-xs);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 font-weight: var(--zenbu-sys-font-weight-strong);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 letter-spacing: 0.08em;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 text-transform: uppercase;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 :where(mjj-content-modal, mjj-window-modal) [data-modal-title] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 margin: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 color: var(--zenbu-sys-color-action-primary-background);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 font-family: var(--zenbu-sys-type-title-family);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 font-size: var(--zenbu-sys-type-title-size);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 font-weight: var(--zenbu-sys-type-title-weight);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 line-height: var(--zenbu-sys-type-title-line-height);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 :where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions],
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer-actions] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 display: flex;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 align-items: center;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 gap: var(--zenbu-sys-space-control);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 :where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 justify-content: flex-end;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 display: flex;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 align-items: center;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 justify-content: space-between;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 gap: var(--zenbu-sys-space-group);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] > p {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 margin: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 color: var(--zenbu-sys-color-text-secondary);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 font-size: var(--zenbu-sys-font-size-sm);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 :where(mjj-content-modal, mjj-window-modal) zen-scroll-area[data-cyber-scroll] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 box-sizing: border-box;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 display: block;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 width: 100%;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 height: 100%;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 max-height: none;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 min-width: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 min-height: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 overflow-x: auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 overflow-y: scroll;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 border: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 border-radius: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 background: var(--zenbu-sys-color-surface-default);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 scrollbar-color:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 var(--zenbu-sys-color-action-primary-background)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 scrollbar-width: thin;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 scrollbar-gutter: stable;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 :where(mjj-content-modal, mjj-window-modal)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123 width: var(--zenbu-sys-space-control);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 height: var(--zenbu-sys-space-control);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 :where(mjj-content-modal, mjj-window-modal)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-track {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 border-inline-start: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 var(--zenbu-sys-color-info-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 background: var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 :where(mjj-content-modal, mjj-window-modal)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 border: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
137 var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 border-radius: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139 background: var(--zenbu-sys-color-action-primary-background);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 :where(mjj-content-modal, mjj-window-modal)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
143 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb:hover {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
144 background: var(--zenbu-sys-color-danger-foreground);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 mjj-content-modal {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 --mjj-modal-width: 54rem;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151 mjj-content-modal dialog {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152 --mjj-modal-border: var(--zenbu-sys-color-action-primary-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 mjj-content-modal [data-modal-header] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156 padding:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157 var(--zenbu-sys-padding-xl)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158 var(--zenbu-sys-padding-xl)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159 var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 border-bottom: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161 var(--zenbu-sys-color-danger-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 background: var(--zenbu-sys-color-surface-raised);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 mjj-content-modal [data-modal-body] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 min-height: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167 padding: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168 overflow: auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 background: var(--zenbu-sys-color-surface-default);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 color: var(--zenbu-sys-color-text-primary);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171 font-family: var(--zenbu-sys-type-reading-family);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172 font-size: var(--zenbu-sys-type-reading-size);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 line-height: var(--zenbu-sys-type-reading-line-height);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 mjj-content-modal [data-modal-article] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 display: grid;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
178 gap: var(--zenbu-sys-space-content);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
179 padding:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
180 var(--zenbu-sys-padding-xl)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
181 max(
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 var(--zenbu-sys-padding-xl),
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
183 calc((100% - 42rem) / 2)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
184 );
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187 mjj-content-modal [data-modal-article] > :where(
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
188 h2,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
189 h3,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
190 p,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
191 blockquote,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
192 pre,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
193 ul,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
194 ol
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
195 ) {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
196 margin-block: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
198
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
199 mjj-content-modal [data-modal-body] :where(h2, h3) {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
200 color: var(--zenbu-sys-color-action-primary-background);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 font-family: var(--zenbu-sys-font-family-ui);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
203
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 mjj-content-modal [data-modal-body] [data-modal-description] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 color: var(--zenbu-sys-color-text-secondary);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
206 font-size: var(--zenbu-sys-type-body-large-size);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
207 line-height: var(--zenbu-sys-type-body-large-line-height);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
208 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
209
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
210 mjj-content-modal [data-modal-body] blockquote {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
211 padding:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 var(--zenbu-sys-padding-md)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214 border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 var(--zenbu-sys-color-danger-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216 background: var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
217 color: var(--zenbu-sys-color-text-secondary);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220 mjj-content-modal [data-modal-body] pre {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
221 padding: var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
222 overflow: auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
223 border: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224 var(--zenbu-sys-color-info-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
225 border-radius: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
226 background: var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
227 font-family: var(--zenbu-sys-type-code-family);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
228 font-size: var(--zenbu-sys-type-code-size);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
229 line-height: var(--zenbu-sys-type-code-line-height);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
230 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
231
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232 mjj-content-modal [data-modal-footer] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233 padding:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 var(--zenbu-sys-padding-md)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
235 var(--zenbu-sys-padding-xl);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
236 border-top: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 var(--zenbu-sys-color-danger-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
238 background: var(--zenbu-sys-color-surface-raised);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
239 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
240
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
241 mjj-window-modal {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
242 --mjj-modal-width: 72rem;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
243 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245 mjj-window-modal dialog {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
246 --mjj-modal-border: var(--zenbu-sys-color-info-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
247 height: min(82dvh, 48rem);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248 border-radius: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
249 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
251 mjj-window-modal [data-modal-header] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
252 padding:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
253 var(--zenbu-sys-padding-md)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
254 var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
255 border-bottom: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
256 var(--zenbu-sys-color-action-primary-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
257 background: var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
258 box-shadow: var(--zenbu-sys-shadow-subtle);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
259 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
261 mjj-window-modal [data-modal-body] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
262 min-width: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
263 min-height: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
264 padding: var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
265 overflow: auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
266 background: var(--zenbu-sys-color-surface-default);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
267 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
268
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
269 mjj-window-modal [data-modal-body][data-modal-layout="split"] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
270 display: grid;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
271 grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
272 gap: var(--zenbu-sys-space-group);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
273 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
274
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
275 mjj-window-modal [data-modal-pane] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
276 min-width: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
277 min-height: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
278 padding: var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
279 overflow: auto;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
280 border: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
281 var(--zenbu-sys-color-info-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
282 border-radius: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
283 background: var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
284 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
285
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
286 mjj-window-modal [data-modal-pane="primary"] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
287 border-color: var(--zenbu-sys-color-action-primary-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
288 background: var(--zenbu-sys-color-surface-raised);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
289 box-shadow:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
290 var(--zenbu-sys-space-icon-label)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
291 var(--zenbu-sys-space-icon-label)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
292 0
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
293 var(--zenbu-sys-color-danger-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
294 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
295
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
296 mjj-window-modal [data-modal-footer] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
297 padding:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
298 var(--zenbu-sys-padding-sm)
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
299 var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
300 border-top: var(--zenbu-sys-stroke-width) solid
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
301 var(--zenbu-sys-color-action-primary-border);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
302 background: var(--zenbu-sys-color-surface-sunken);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
303 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
304
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
305 @keyframes mjj-modal-enter {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
306 0% {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
307 clip-path: inset(49% 45%);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
308 opacity: 0.72;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
309 transform: scaleX(0.12);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
310 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
311 45% {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
312 clip-path: inset(49% 0);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
313 opacity: 1;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
314 transform: scaleX(1);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
315 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
316 100% {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
317 clip-path: inset(0);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
318 opacity: 1;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
319 transform: scaleX(1);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
320 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
321 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
322
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
323 @media (max-width: 42rem) {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
324 :where(mjj-content-modal, mjj-window-modal) dialog {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
325 width: calc(100vw - var(--zenbu-sys-space-group));
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
326 max-height: calc(100dvh - var(--zenbu-sys-space-group));
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
327 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
328
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
329 mjj-content-modal [data-modal-header],
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
330 mjj-content-modal [data-modal-footer] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
331 padding-inline: var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
332 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
333
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
334 mjj-content-modal [data-modal-body] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
335 padding: 0;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
336 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
337
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
338 mjj-content-modal [data-modal-article] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
339 padding: var(--zenbu-sys-padding-lg);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
340 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
341
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
342 mjj-window-modal dialog {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
343 height: calc(100dvh - var(--zenbu-sys-space-group));
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
344 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
345
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
346 mjj-window-modal [data-modal-body][data-modal-layout="split"] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
347 grid-template-columns: minmax(0, 1fr);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
348 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
349
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
350 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
351 align-items: stretch;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
352 flex-direction: column;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
353 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
354 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
355
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
356 @media (prefers-reduced-motion: reduce) {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
357 :where(mjj-content-modal, mjj-window-modal) dialog[open] {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
358 animation: none;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
359 }
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
360 }