pf2e-spellbook 1.0.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/bin/cli.mjs +86 -0
- package/dist/icon.svg +3 -3
- package/dist/index.html +568 -269
- package/dist/manifest.webmanifest +2 -2
- package/dist/sw.js +1 -1
- package/package.json +22 -4
- package/src/classes.js +74 -35
- package/src/engine.js +229 -67
- package/src/icon.svg +3 -3
- package/src/manifest.webmanifest +2 -2
- package/src/styles.css +229 -151
- package/src/template.html +36 -16
- package/tools/test.mjs +102 -5
package/src/icon.svg
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Spellbook">
|
|
2
|
-
<rect width="512" height="512" rx="104" fill="#
|
|
3
|
-
<g fill="none" stroke="#
|
|
2
|
+
<rect width="512" height="512" rx="104" fill="#1d2027"/>
|
|
3
|
+
<g fill="none" stroke="#7b6cf0" stroke-width="22" stroke-linejoin="round" stroke-linecap="round">
|
|
4
4
|
<path d="M256 152 C220 128 168 128 130 146 L130 372 C168 354 220 354 256 380 C292 354 344 354 382 372 L382 146 C344 128 292 128 256 152 Z"/>
|
|
5
5
|
<line x1="256" y1="152" x2="256" y2="380"/>
|
|
6
6
|
</g>
|
|
7
|
-
<path d="M366 96 l12 30 30 12 -30 12 -12 30 -12 -30 -30 -12 30 -12 z" fill="#
|
|
7
|
+
<path d="M366 96 l12 30 30 12 -30 12 -12 30 -12 -30 -30 -12 30 -12 z" fill="#e8eaf0"/>
|
|
8
8
|
</svg>
|
package/src/manifest.webmanifest
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
"scope": ".",
|
|
7
7
|
"display": "standalone",
|
|
8
8
|
"orientation": "portrait",
|
|
9
|
-
"background_color": "#
|
|
10
|
-
"theme_color": "#
|
|
9
|
+
"background_color": "#14161b",
|
|
10
|
+
"theme_color": "#14161b",
|
|
11
11
|
"icons": [
|
|
12
12
|
{ "src": "icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
|
|
13
13
|
]
|
package/src/styles.css
CHANGED
|
@@ -1,153 +1,218 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
THEME TOKENS
|
|
3
|
+
Base tokens flip with [data-theme]; --accent (+ --accent-ink) are
|
|
4
|
+
set by JS per class or per custom palette. Accent shades derive via
|
|
5
|
+
color-mix(), so one hue recolours the whole UI.
|
|
6
|
+
============================================================ */
|
|
1
7
|
:root{
|
|
2
|
-
--
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
8
|
+
/* accent — JS overrides --accent and --accent-ink on <html> */
|
|
9
|
+
--accent:#6c7a89;
|
|
10
|
+
--accent-ink:#ffffff;
|
|
11
|
+
--accent-dim:color-mix(in srgb, var(--accent) 55%, var(--line));
|
|
12
|
+
--accent-soft:color-mix(in srgb, var(--accent) 15%, transparent);
|
|
13
|
+
--accent-text:var(--accent);
|
|
14
|
+
|
|
15
|
+
/* fixed rank spectrum (left border bars), shared by both modes */
|
|
16
|
+
--rank0:#b58fd6; --rank1:#7fb0d6; --rank2:#6f9c8f; --rank3:#d6a86f;
|
|
17
|
+
--rank4:#d68f8f; --rank5:#9cc46a; --rank6:#c9c05a; --rank7:#6fb6d6;
|
|
18
|
+
--rank8:#c98fd6; --rank9:#d6a0c0; --rank10:var(--accent);
|
|
19
|
+
|
|
13
20
|
--radius:16px;
|
|
14
|
-
--tap:#3c2c1b;
|
|
15
21
|
}
|
|
22
|
+
|
|
23
|
+
/* ---- Dark (default) ---- */
|
|
24
|
+
:root, :root[data-theme="dark"]{
|
|
25
|
+
color-scheme:dark;
|
|
26
|
+
--bg:#14161b;
|
|
27
|
+
--surface:#1d2027;
|
|
28
|
+
--surface-2:#262a33;
|
|
29
|
+
--ink:#e8eaf0;
|
|
30
|
+
--muted:#9aa1b0;
|
|
31
|
+
--line:#2f3440;
|
|
32
|
+
--heal:#5bbf7e;
|
|
33
|
+
--harm:#d9637a;
|
|
34
|
+
--info:#6fa8dc;
|
|
35
|
+
--info-bg:color-mix(in srgb, var(--info) 22%, var(--surface));
|
|
36
|
+
--info-ink:#d6e8fb;
|
|
37
|
+
--accent-text:var(--accent);
|
|
38
|
+
--shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* ---- Light ---- */
|
|
42
|
+
:root[data-theme="light"]{
|
|
43
|
+
color-scheme:light;
|
|
44
|
+
--bg:#f5f6f8;
|
|
45
|
+
--surface:#ffffff;
|
|
46
|
+
--surface-2:#eef0f4;
|
|
47
|
+
--ink:#1b1e24;
|
|
48
|
+
--muted:#5d6470;
|
|
49
|
+
--line:#dfe3ea;
|
|
50
|
+
--heal:#2f9e5b;
|
|
51
|
+
--harm:#c43a57;
|
|
52
|
+
--info:#2b6cb0;
|
|
53
|
+
--info-bg:color-mix(in srgb, var(--info) 12%, var(--surface));
|
|
54
|
+
--info-ink:#0b3a68;
|
|
55
|
+
--accent-text:color-mix(in srgb, var(--accent) 72%, #000);
|
|
56
|
+
--shadow:0 1px 2px rgba(20,30,50,.08), 0 4px 14px rgba(20,30,50,.06);
|
|
57
|
+
}
|
|
58
|
+
|
|
16
59
|
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
|
|
17
60
|
html,body{margin:0;padding:0;}
|
|
61
|
+
html{background:var(--bg);}
|
|
18
62
|
body{
|
|
19
63
|
background:var(--bg);
|
|
20
64
|
color:var(--ink);
|
|
21
65
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
22
|
-
font-size:
|
|
66
|
+
font-size:18px;
|
|
23
67
|
line-height:1.5;
|
|
24
68
|
padding-bottom:84px; /* room for nav */
|
|
25
69
|
-webkit-text-size-adjust:100%;
|
|
26
70
|
}
|
|
27
|
-
h1,h2,h3{margin:0 0 .4em;line-height:1.2;}
|
|
28
|
-
h1{font-size:1.5rem;color:var(--
|
|
29
|
-
h2{font-size:1.
|
|
71
|
+
h1,h2,h3{margin:0 0 .4em;line-height:1.2;letter-spacing:-.01em;}
|
|
72
|
+
h1{font-size:1.5rem;color:var(--ink);font-weight:800;}
|
|
73
|
+
h2{font-size:1.2rem;color:var(--ink);font-weight:700;}
|
|
30
74
|
p{margin:.4em 0;}
|
|
31
75
|
.wrap{max-width:560px;margin:0 auto;padding:16px 14px;}
|
|
32
76
|
.hide{display:none !important;}
|
|
33
77
|
|
|
78
|
+
/* smooth theme + interaction transitions */
|
|
79
|
+
button,.chip,.card,.cast-card,.classcard,.browse-row,input,select,textarea,
|
|
80
|
+
.stat,nav.bottom button,details.help{
|
|
81
|
+
transition:background-color .15s ease, border-color .15s ease, color .15s ease;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* inline SVG icons inherit accent via currentColor */
|
|
85
|
+
.icn{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.14em;}
|
|
86
|
+
|
|
34
87
|
/* ---- Header ---- */
|
|
35
88
|
header.top{
|
|
36
|
-
background:linear-gradient(180deg
|
|
37
|
-
border-bottom:
|
|
89
|
+
background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
|
|
90
|
+
border-bottom:1px solid var(--line);
|
|
38
91
|
padding:14px 16px;
|
|
39
92
|
position:sticky;top:0;z-index:20;
|
|
40
93
|
}
|
|
41
|
-
header.top h1{margin:0;font-size:1.
|
|
42
|
-
header.top
|
|
43
|
-
.
|
|
94
|
+
header.top h1{margin:0;font-size:1.3rem;display:flex;align-items:center;gap:10px;}
|
|
95
|
+
header.top h1 #charIcon{display:inline-flex;color:var(--accent-text);font-size:1.5rem;}
|
|
96
|
+
header.top .sub{color:var(--muted);font-size:.88rem;margin-top:2px;}
|
|
97
|
+
.statbar{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
|
|
44
98
|
.stat{
|
|
45
|
-
background:var(--
|
|
46
|
-
border-radius:12px;padding:
|
|
99
|
+
background:var(--surface-2);border:1px solid var(--line);
|
|
100
|
+
border-radius:12px;padding:8px 12px;flex:1;min-width:90px;text-align:center;
|
|
47
101
|
}
|
|
48
|
-
.stat .lbl{font-size:.
|
|
49
|
-
.stat .val{font-size:1.4rem;font-weight:
|
|
102
|
+
.stat .lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}
|
|
103
|
+
.stat .val{font-size:1.4rem;font-weight:800;color:var(--accent-text);}
|
|
50
104
|
|
|
51
105
|
/* ---- Cards ---- */
|
|
52
106
|
.card{
|
|
53
|
-
background:var(--
|
|
107
|
+
background:var(--surface);
|
|
54
108
|
border:1px solid var(--line);
|
|
55
109
|
border-radius:var(--radius);
|
|
56
110
|
padding:16px;margin:14px 0;
|
|
57
|
-
box-shadow:
|
|
58
|
-
}
|
|
59
|
-
.card.rank0{border-left:
|
|
60
|
-
.card.rank1{border-left:
|
|
61
|
-
.card.rank2{border-left:
|
|
62
|
-
.card.rank3{border-left:
|
|
63
|
-
.card.rank4{border-left:
|
|
64
|
-
.card.rank5{border-left:
|
|
65
|
-
.card.rank6{border-left:
|
|
66
|
-
.card.rank7{border-left:
|
|
67
|
-
.card.rank8{border-left:
|
|
68
|
-
.card.rank9{border-left:
|
|
69
|
-
.card.rank10{border-left:
|
|
70
|
-
.card.heal{border-left:
|
|
71
|
-
.card.harm{border-left:
|
|
111
|
+
box-shadow:var(--shadow);
|
|
112
|
+
}
|
|
113
|
+
.card.rank0{border-left:5px solid var(--rank0);}
|
|
114
|
+
.card.rank1{border-left:5px solid var(--rank1);}
|
|
115
|
+
.card.rank2{border-left:5px solid var(--rank2);}
|
|
116
|
+
.card.rank3{border-left:5px solid var(--rank3);}
|
|
117
|
+
.card.rank4{border-left:5px solid var(--rank4);}
|
|
118
|
+
.card.rank5{border-left:5px solid var(--rank5);}
|
|
119
|
+
.card.rank6{border-left:5px solid var(--rank6);}
|
|
120
|
+
.card.rank7{border-left:5px solid var(--rank7);}
|
|
121
|
+
.card.rank8{border-left:5px solid var(--rank8);}
|
|
122
|
+
.card.rank9{border-left:5px solid var(--rank9);}
|
|
123
|
+
.card.rank10{border-left:5px solid var(--rank10);}
|
|
124
|
+
.card.heal{border-left:5px solid var(--heal);}
|
|
125
|
+
.card.harm{border-left:5px solid var(--harm);}
|
|
72
126
|
|
|
73
127
|
.spell-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
|
|
74
|
-
.spell-name{font-size:1.
|
|
128
|
+
.spell-name{font-size:1.25rem;font-weight:700;color:var(--ink);margin:0;}
|
|
75
129
|
.rankpill{
|
|
76
|
-
background:var(--
|
|
77
|
-
border-radius:20px;padding:3px 12px;font-size:.
|
|
130
|
+
background:var(--surface-2);border:1px solid var(--accent-dim);color:var(--accent-text);
|
|
131
|
+
border-radius:20px;padding:3px 12px;font-size:.82rem;font-weight:700;white-space:nowrap;
|
|
78
132
|
}
|
|
79
133
|
.actions{
|
|
80
134
|
display:inline-flex;align-items:center;gap:6px;
|
|
81
|
-
background
|
|
135
|
+
background:var(--info-bg);border:1px solid var(--info);color:var(--info-ink);
|
|
82
136
|
border-radius:8px;padding:2px 10px;font-size:.85rem;font-weight:700;margin:8px 8px 4px 0;
|
|
83
137
|
}
|
|
84
138
|
.save-tag{
|
|
85
|
-
display:inline-block;
|
|
139
|
+
display:inline-block;
|
|
140
|
+
background:color-mix(in srgb, var(--harm) 15%, var(--surface));
|
|
141
|
+
border:1px solid color-mix(in srgb, var(--harm) 45%, var(--line));
|
|
142
|
+
color:var(--harm);
|
|
86
143
|
border-radius:8px;padding:2px 10px;font-size:.85rem;font-weight:700;margin:8px 8px 4px 0;
|
|
87
144
|
}
|
|
88
|
-
.meta{font-size:.
|
|
145
|
+
.meta{font-size:.9rem;color:var(--muted);margin:6px 0;}
|
|
89
146
|
.meta b{color:var(--ink);font-weight:600;}
|
|
90
147
|
.traits{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
|
|
91
148
|
.trait{
|
|
92
|
-
background
|
|
93
|
-
font-size:.
|
|
149
|
+
background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
|
|
150
|
+
font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;
|
|
94
151
|
padding:2px 8px;border-radius:6px;
|
|
95
152
|
}
|
|
96
|
-
.desc{font-size:
|
|
153
|
+
.desc{font-size:1rem;line-height:1.55;margin-top:8px;}
|
|
97
154
|
.heighten{
|
|
98
|
-
margin-top:10px;padding:10px 12px;background:var(--
|
|
99
|
-
border-radius:10px;font-size:.
|
|
155
|
+
margin-top:10px;padding:10px 12px;background:var(--surface-2);
|
|
156
|
+
border-radius:10px;font-size:.92rem;color:var(--muted);
|
|
100
157
|
}
|
|
101
|
-
.heighten b{color:var(--
|
|
158
|
+
.heighten b{color:var(--accent-text);}
|
|
102
159
|
|
|
103
160
|
/* ---- Buttons / inputs ---- */
|
|
104
161
|
button{font-family:inherit;font-size:1.05rem;cursor:pointer;}
|
|
105
162
|
.btn{
|
|
106
|
-
display:block;width:100%;padding:
|
|
107
|
-
background:var(--
|
|
108
|
-
margin:14px 0;letter-spacing:.
|
|
163
|
+
display:block;width:100%;padding:15px;border-radius:12px;border:none;
|
|
164
|
+
background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:1.1rem;
|
|
165
|
+
margin:14px 0;letter-spacing:.2px;box-shadow:var(--shadow);
|
|
109
166
|
}
|
|
110
|
-
.btn.secondary{background:var(--
|
|
167
|
+
.btn.secondary{background:var(--surface-2);color:var(--accent-text);border:1px solid var(--accent-dim);box-shadow:none;}
|
|
111
168
|
.btn:active{transform:translateY(1px);}
|
|
112
|
-
.
|
|
169
|
+
a.btn{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center;}
|
|
170
|
+
a.btn .icn{width:1.15em;height:1.15em;}
|
|
171
|
+
.linklike{background:none;border:none;color:var(--info);font-weight:700;text-decoration:underline;padding:0;font-size:inherit;}
|
|
113
172
|
|
|
114
173
|
label.field{display:block;margin:14px 0;}
|
|
115
|
-
label.field .name{display:block;font-weight:700;margin-bottom:6px;font-size:
|
|
174
|
+
label.field .name{display:block;font-weight:700;margin-bottom:6px;font-size:1rem;}
|
|
116
175
|
label.field .hint{display:block;color:var(--muted);font-size:.82rem;font-weight:400;margin-bottom:6px;}
|
|
176
|
+
input,select,textarea{accent-color:var(--accent);}
|
|
117
177
|
input,select{
|
|
118
|
-
width:100%;padding:
|
|
119
|
-
background:var(--
|
|
178
|
+
width:100%;padding:13px;font-size:1.05rem;border-radius:12px;
|
|
179
|
+
background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
|
|
120
180
|
appearance:none;-webkit-appearance:none;
|
|
121
181
|
}
|
|
122
|
-
select{
|
|
182
|
+
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
|
|
183
|
+
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
|
|
123
184
|
background-position:calc(100% - 20px) center,calc(100% - 14px) center;
|
|
124
185
|
background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;}
|
|
186
|
+
input[type="color"]{padding:4px;height:44px;cursor:pointer;}
|
|
125
187
|
.row{display:flex;gap:10px;}
|
|
126
188
|
.row > *{flex:1;}
|
|
127
189
|
|
|
128
190
|
.seg{display:flex;gap:8px;margin:6px 0;}
|
|
129
191
|
.seg button{
|
|
130
|
-
flex:1;padding:
|
|
131
|
-
background:var(--
|
|
192
|
+
flex:1;padding:13px;border-radius:12px;border:1px solid var(--line);
|
|
193
|
+
background:var(--surface-2);color:var(--ink);font-weight:700;
|
|
194
|
+
display:inline-flex;align-items:center;justify-content:center;gap:8px;
|
|
132
195
|
}
|
|
133
|
-
.seg button.on
|
|
134
|
-
.seg button.on.
|
|
196
|
+
.seg button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
|
|
197
|
+
.seg button.on.heal{background:var(--heal);color:#08140d;border-color:var(--heal);}
|
|
198
|
+
.seg button.on.harm{background:var(--harm);color:#1c0709;border-color:var(--harm);}
|
|
135
199
|
|
|
136
200
|
/* ---- Slot picker rows ---- */
|
|
137
201
|
.slotgroup{margin:18px 0;}
|
|
138
|
-
.slotgroup h3{color:var(--
|
|
202
|
+
.slotgroup h3{color:var(--accent-text);font-size:1.05rem;border-bottom:1px solid var(--line);padding-bottom:6px;display:flex;align-items:center;gap:8px;}
|
|
139
203
|
.slotrow{display:flex;align-items:center;gap:10px;margin:10px 0;}
|
|
140
204
|
.slotrow .num{
|
|
141
205
|
width:34px;height:34px;flex:0 0 34px;border-radius:50%;
|
|
142
|
-
background:var(--
|
|
206
|
+
background:var(--surface-2);border:1px solid var(--accent-dim);color:var(--accent-text);
|
|
143
207
|
display:flex;align-items:center;justify-content:center;font-weight:800;
|
|
144
208
|
}
|
|
209
|
+
.slotrow .num .icn{width:1.1rem;height:1.1rem;}
|
|
145
210
|
.slotrow select{flex:1;}
|
|
146
211
|
.prep-slot{margin:10px 0;}
|
|
147
212
|
.prep-slot .slotrow{margin:0;}
|
|
148
213
|
.prep-preview{margin:6px 0 0 44px;}
|
|
149
214
|
.prep-preview-inner{
|
|
150
|
-
background:var(--
|
|
215
|
+
background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
|
|
151
216
|
padding:10px 12px;
|
|
152
217
|
}
|
|
153
218
|
.prep-preview .meta{font-size:.85rem;margin:2px 0;}
|
|
@@ -156,123 +221,128 @@ select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),l
|
|
|
156
221
|
|
|
157
222
|
/* ---- Today cast cards ---- */
|
|
158
223
|
.cast-card{
|
|
159
|
-
background:var(--
|
|
160
|
-
padding:14px;margin:12px 0;border-left:
|
|
161
|
-
}
|
|
162
|
-
.cast-card.rank0{border-left-color
|
|
163
|
-
.cast-card.rank1{border-left-color
|
|
164
|
-
.cast-card.rank2{border-left-color
|
|
165
|
-
.cast-card.rank3{border-left-color
|
|
166
|
-
.cast-card.rank4{border-left-color
|
|
167
|
-
.cast-card.rank5{border-left-color
|
|
168
|
-
.cast-card.rank6{border-left-color
|
|
169
|
-
.cast-card.rank7{border-left-color
|
|
170
|
-
.cast-card.rank8{border-left-color
|
|
171
|
-
.cast-card.rank9{border-left-color
|
|
172
|
-
.cast-card.rank10{border-left-color:var(--
|
|
224
|
+
background:var(--surface);border:1px solid var(--line);border-radius:14px;
|
|
225
|
+
padding:14px;margin:12px 0;border-left:5px solid var(--line);box-shadow:var(--shadow);
|
|
226
|
+
}
|
|
227
|
+
.cast-card.rank0{border-left-color:var(--rank0);}
|
|
228
|
+
.cast-card.rank1{border-left-color:var(--rank1);}
|
|
229
|
+
.cast-card.rank2{border-left-color:var(--rank2);}
|
|
230
|
+
.cast-card.rank3{border-left-color:var(--rank3);}
|
|
231
|
+
.cast-card.rank4{border-left-color:var(--rank4);}
|
|
232
|
+
.cast-card.rank5{border-left-color:var(--rank5);}
|
|
233
|
+
.cast-card.rank6{border-left-color:var(--rank6);}
|
|
234
|
+
.cast-card.rank7{border-left-color:var(--rank7);}
|
|
235
|
+
.cast-card.rank8{border-left-color:var(--rank8);}
|
|
236
|
+
.cast-card.rank9{border-left-color:var(--rank9);}
|
|
237
|
+
.cast-card.rank10{border-left-color:var(--rank10);}
|
|
173
238
|
.cast-card.heal{border-left-color:var(--heal);}
|
|
174
239
|
.cast-card.harm{border-left-color:var(--harm);}
|
|
175
|
-
.cast-card.spent{opacity:.
|
|
240
|
+
.cast-card.spent{opacity:.45;}
|
|
176
241
|
.cast-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
|
|
177
|
-
.cast-top .nm{font-size:1.
|
|
242
|
+
.cast-top .nm{font-size:1.15rem;font-weight:700;}
|
|
178
243
|
.uses{display:flex;gap:6px;align-items:center;}
|
|
179
|
-
.pip{width:
|
|
180
|
-
.pip.full{background:var(--
|
|
244
|
+
.pip{width:24px;height:24px;border-radius:50%;border:2px solid var(--accent);display:inline-block;}
|
|
245
|
+
.pip.full{background:var(--accent);}
|
|
181
246
|
.pip.spent{background:transparent;opacity:.35;}
|
|
182
247
|
.castbtn{
|
|
183
|
-
padding:10px 16px;border-radius:10px;border:none;background:var(--
|
|
184
|
-
color
|
|
248
|
+
padding:10px 16px;border-radius:10px;border:none;background:var(--accent);
|
|
249
|
+
color:var(--accent-ink);font-weight:800;font-size:1rem;
|
|
185
250
|
}
|
|
186
|
-
.castbtn.zero{background:var(--
|
|
251
|
+
.castbtn.zero{background:var(--surface-2);color:var(--muted);}
|
|
187
252
|
.unlim{font-size:.85rem;color:var(--heal);font-weight:700;}
|
|
188
253
|
.detailsbtn{
|
|
189
|
-
background:none;border:none;color:var(--
|
|
254
|
+
background:none;border:none;color:var(--info);font-weight:700;
|
|
190
255
|
padding:8px 0 0;font-size:.95rem;text-decoration:underline;
|
|
191
256
|
}
|
|
192
257
|
|
|
193
258
|
.susbtn{
|
|
194
|
-
padding:10px 14px;border-radius:10px;border:1px solid var(--
|
|
195
|
-
background
|
|
259
|
+
padding:10px 14px;border-radius:10px;border:1px solid var(--info);
|
|
260
|
+
background:var(--info-bg);color:var(--info-ink);font-weight:800;font-size:.95rem;
|
|
196
261
|
}
|
|
197
|
-
.susbtn.on{background:var(--
|
|
262
|
+
.susbtn.on{background:var(--info);color:var(--surface);}
|
|
198
263
|
.susrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);}
|
|
199
264
|
.susrow:first-of-type{border-top:none;}
|
|
200
265
|
.susrow span{font-weight:700;}
|
|
201
266
|
|
|
202
267
|
.dmgline{margin:4px 0 2px;}
|
|
203
268
|
.dmgchip{
|
|
204
|
-
display:inline-block;background
|
|
205
|
-
color:var(--
|
|
269
|
+
display:inline-block;background:var(--surface-2);border:1px solid var(--line);
|
|
270
|
+
color:var(--ink);font-weight:800;font-size:.92rem;border-radius:8px;padding:2px 10px;
|
|
206
271
|
}
|
|
272
|
+
.dmgchip.dmg{background:color-mix(in srgb, var(--harm) 15%, var(--surface));border-color:color-mix(in srgb, var(--harm) 40%, var(--line));color:var(--harm);}
|
|
273
|
+
.dmgchip.heal{background:color-mix(in srgb, var(--heal) 15%, var(--surface));border-color:color-mix(in srgb, var(--heal) 40%, var(--line));color:var(--heal);}
|
|
207
274
|
|
|
208
275
|
.empty{text-align:center;color:var(--muted);padding:40px 20px;}
|
|
209
276
|
|
|
210
277
|
.filterbar{display:flex;gap:8px;margin:6px 0 14px;flex-wrap:wrap;}
|
|
211
278
|
.chip{
|
|
212
|
-
padding:8px 14px;border-radius:20px;border:1px solid var(--
|
|
213
|
-
background:var(--
|
|
279
|
+
padding:8px 14px;border-radius:20px;border:1px solid var(--line);
|
|
280
|
+
background:var(--surface-2);color:var(--muted);font-weight:700;font-size:.88rem;
|
|
281
|
+
display:inline-flex;align-items:center;gap:6px;
|
|
214
282
|
}
|
|
215
|
-
.chip.on{background:var(--
|
|
283
|
+
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
|
|
216
284
|
#search{margin-bottom:8px;}
|
|
217
285
|
#filterToggle{margin:0 0 8px;}
|
|
218
|
-
#browseFilters{background:var(--
|
|
286
|
+
#browseFilters{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;}
|
|
219
287
|
.fgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0;}
|
|
220
288
|
.fgroup .flabel{font-size:.8rem;color:var(--muted);font-weight:700;min-width:58px;}
|
|
221
289
|
|
|
222
290
|
.sectionhead{
|
|
223
|
-
color:var(--
|
|
291
|
+
color:var(--accent-text);font-size:1.1rem;font-weight:800;margin:22px 0 4px;
|
|
224
292
|
display:flex;align-items:center;gap:10px;
|
|
225
293
|
}
|
|
226
|
-
.sectionhead .count{font-size:.
|
|
294
|
+
.sectionhead .count{font-size:.82rem;color:var(--muted);font-weight:600;}
|
|
227
295
|
.divider{height:1px;background:var(--line);margin:4px 0 6px;}
|
|
228
296
|
|
|
229
297
|
.banner{
|
|
230
|
-
background
|
|
231
|
-
padding:12px 14px;margin:12px 0;color:var(--
|
|
298
|
+
background:var(--accent-soft);border:1px solid var(--accent-dim);border-radius:12px;
|
|
299
|
+
padding:12px 14px;margin:12px 0;color:var(--ink);font-size:.9rem;
|
|
232
300
|
}
|
|
233
|
-
.banner b{color:var(--
|
|
301
|
+
.banner b{color:var(--accent-text);}
|
|
234
302
|
|
|
235
|
-
details.help{background:var(--
|
|
236
|
-
details.help summary{padding:16px 0;font-weight:700;font-size:1.
|
|
303
|
+
details.help{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:12px 0;padding:0 16px;}
|
|
304
|
+
details.help summary{padding:16px 0;font-weight:700;font-size:1.05rem;color:var(--accent-text);cursor:pointer;list-style:none;}
|
|
237
305
|
details.help summary::-webkit-details-marker{display:none;}
|
|
238
306
|
details.help summary::after{content:"＋";float:right;color:var(--muted);}
|
|
239
307
|
details.help[open] summary::after{content:"－";}
|
|
240
308
|
details.help .body{padding:0 0 16px;font-size:1rem;line-height:1.6;color:var(--ink);}
|
|
241
|
-
details.help .body b{color:var(--
|
|
309
|
+
details.help .body b{color:var(--accent-text);}
|
|
242
310
|
|
|
243
311
|
/* ---- Class picker ---- */
|
|
244
312
|
.classcard{
|
|
245
313
|
display:flex;align-items:center;gap:14px;width:100%;text-align:left;
|
|
246
|
-
background:var(--
|
|
247
|
-
border-radius:var(--radius);padding:16px;margin:12px 0;color:var(--ink);
|
|
314
|
+
background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
|
|
315
|
+
border-radius:var(--radius);padding:16px;margin:12px 0;color:var(--ink);box-shadow:var(--shadow);
|
|
248
316
|
}
|
|
249
317
|
.classcard:active{transform:translateY(1px);}
|
|
250
|
-
.classcard .ic{font-size:
|
|
318
|
+
.classcard .ic{font-size:2rem;line-height:1;display:inline-flex;color:var(--accent-text);}
|
|
251
319
|
.classcard .txt{flex:1;}
|
|
252
|
-
.classcard .nm{font-size:1.
|
|
253
|
-
.classcard .tl{font-size:.
|
|
254
|
-
.classcard .arr{color:var(--
|
|
320
|
+
.classcard .nm{font-size:1.25rem;font-weight:800;color:var(--ink);}
|
|
321
|
+
.classcard .tl{font-size:.88rem;color:var(--muted);margin-top:2px;}
|
|
322
|
+
.classcard .arr{color:var(--muted);font-size:1.3rem;font-weight:800;}
|
|
255
323
|
.previewtag{
|
|
256
324
|
font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;
|
|
257
|
-
background
|
|
325
|
+
background:color-mix(in srgb, var(--harm) 15%, var(--surface));
|
|
326
|
+
border:1px solid color-mix(in srgb, var(--harm) 40%, var(--line));
|
|
327
|
+
color:var(--harm);border-radius:6px;padding:1px 6px;font-weight:700;
|
|
258
328
|
}
|
|
259
329
|
|
|
260
330
|
/* ---- Browse compact rows (tap to expand) ---- */
|
|
261
331
|
.browse-row{
|
|
262
|
-
background:var(--
|
|
332
|
+
background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
|
|
263
333
|
border-radius:12px;margin:8px 0;overflow:hidden;
|
|
264
334
|
}
|
|
265
|
-
.browse-row.rank0{border-left-color
|
|
266
|
-
.browse-row.rank1{border-left-color
|
|
267
|
-
.browse-row.rank2{border-left-color
|
|
268
|
-
.browse-row.rank3{border-left-color
|
|
269
|
-
.browse-row.rank4{border-left-color
|
|
270
|
-
.browse-row.rank5{border-left-color
|
|
271
|
-
.browse-row.rank6{border-left-color
|
|
272
|
-
.browse-row.rank7{border-left-color
|
|
273
|
-
.browse-row.rank8{border-left-color
|
|
274
|
-
.browse-row.rank9{border-left-color
|
|
275
|
-
.browse-row.rank10{border-left-color:var(--
|
|
335
|
+
.browse-row.rank0{border-left-color:var(--rank0);}
|
|
336
|
+
.browse-row.rank1{border-left-color:var(--rank1);}
|
|
337
|
+
.browse-row.rank2{border-left-color:var(--rank2);}
|
|
338
|
+
.browse-row.rank3{border-left-color:var(--rank3);}
|
|
339
|
+
.browse-row.rank4{border-left-color:var(--rank4);}
|
|
340
|
+
.browse-row.rank5{border-left-color:var(--rank5);}
|
|
341
|
+
.browse-row.rank6{border-left-color:var(--rank6);}
|
|
342
|
+
.browse-row.rank7{border-left-color:var(--rank7);}
|
|
343
|
+
.browse-row.rank8{border-left-color:var(--rank8);}
|
|
344
|
+
.browse-row.rank9{border-left-color:var(--rank9);}
|
|
345
|
+
.browse-row.rank10{border-left-color:var(--rank10);}
|
|
276
346
|
.browse-row-head{
|
|
277
347
|
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
|
|
278
348
|
width:100%;text-align:left;background:none;border:none;color:var(--ink);
|
|
@@ -280,74 +350,82 @@ details.help .body b{color:var(--gold);}
|
|
|
280
350
|
}
|
|
281
351
|
.browse-row-head::after{content:"▾";position:absolute;right:14px;top:14px;color:var(--muted);}
|
|
282
352
|
.browse-row-head.open::after{content:"▴";}
|
|
283
|
-
.browse-row-head .brn{font-size:1.
|
|
353
|
+
.browse-row-head .brn{font-size:1.05rem;font-weight:700;}
|
|
284
354
|
.browse-row-head .brmeta{font-size:.82rem;color:var(--muted);}
|
|
285
|
-
.brfocus{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color
|
|
355
|
+
.brfocus{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-text);border:1px solid var(--accent-dim);border-radius:5px;padding:0 5px;vertical-align:middle;}
|
|
286
356
|
.formerly{font-size:.72rem;font-style:italic;font-weight:600;color:var(--muted);white-space:nowrap;}
|
|
287
|
-
.ritualtag{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;font-weight:800;background
|
|
357
|
+
.ritualtag{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;font-weight:800;background:var(--accent-soft);border:1px solid var(--accent-dim);color:var(--accent-text);border-radius:6px;padding:1px 7px;}
|
|
288
358
|
.browse-card{padding:0 12px 4px;}
|
|
289
359
|
.browse-card .card{margin:0 0 10px;}
|
|
290
360
|
|
|
291
361
|
/* ---- Header menu button + character menu ---- */
|
|
292
362
|
.tophead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
|
|
293
363
|
.menubtn{
|
|
294
|
-
flex:0 0 auto;background:var(--
|
|
295
|
-
border-radius:12px;width:44px;height:44px;font-size:1.3rem;line-height:1;color:var(--
|
|
364
|
+
flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);
|
|
365
|
+
border-radius:12px;width:44px;height:44px;font-size:1.3rem;line-height:1;color:var(--accent-text);
|
|
366
|
+
display:inline-flex;align-items:center;justify-content:center;
|
|
296
367
|
}
|
|
297
|
-
.classcard.activechar{border-left-color:var(--
|
|
368
|
+
.classcard.activechar{border-left-color:var(--accent);background:var(--accent-soft);}
|
|
298
369
|
textarea{
|
|
299
|
-
width:100%;padding:
|
|
300
|
-
background:var(--
|
|
370
|
+
width:100%;padding:13px;font-size:1rem;border-radius:12px;line-height:1.4;
|
|
371
|
+
background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
|
|
301
372
|
font-family:inherit;resize:vertical;margin:6px 0;
|
|
302
373
|
}
|
|
303
374
|
|
|
375
|
+
/* ---- Appearance / custom palette ---- */
|
|
376
|
+
.swatchrow{display:flex;align-items:center;gap:10px;margin:8px 0;}
|
|
377
|
+
.swatchrow label{flex:1;font-weight:600;font-size:.95rem;}
|
|
378
|
+
.swatchrow input[type="color"]{flex:0 0 56px;width:56px;}
|
|
379
|
+
|
|
304
380
|
/* ---- Repertoire builder (spontaneous) ---- */
|
|
305
381
|
.rep-row .slotrow{gap:8px;}
|
|
306
382
|
.sigstar{
|
|
307
383
|
width:38px;height:38px;flex:0 0 38px;border-radius:10px;
|
|
308
|
-
background:var(--
|
|
384
|
+
background:var(--surface-2);border:1px solid var(--accent-dim);color:var(--muted);
|
|
309
385
|
font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;
|
|
310
386
|
}
|
|
311
|
-
.sigstar.on{background:var(--
|
|
387
|
+
.sigstar.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
|
|
312
388
|
.rmrow{
|
|
313
389
|
width:38px;height:38px;flex:0 0 38px;border-radius:10px;
|
|
314
|
-
background:var(--
|
|
390
|
+
background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-weight:700;
|
|
315
391
|
}
|
|
316
|
-
.focus-checklist{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--
|
|
392
|
+
.focus-checklist{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--surface-2);}
|
|
317
393
|
.fcheck{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;}
|
|
318
394
|
.fcheck:last-child{border-bottom:none;}
|
|
319
395
|
.fcheck input{width:22px;height:22px;flex:0 0 22px;}
|
|
320
396
|
.fcheck .fcname{flex:1;font-weight:600;}
|
|
321
|
-
.fcheck .fcrank{font-size:.75rem;color:var(--muted);background:var(--
|
|
397
|
+
.fcheck .fcrank{font-size:.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 7px;}
|
|
322
398
|
|
|
323
399
|
.btn.addrow{
|
|
324
400
|
display:inline-block;width:auto;padding:10px 16px;margin:4px 0 0 44px;
|
|
325
|
-
font-size:.95rem;font-weight:700;border-radius:10px;
|
|
326
|
-
background:var(--
|
|
401
|
+
font-size:.95rem;font-weight:700;border-radius:10px;box-shadow:none;
|
|
402
|
+
background:var(--surface-2);color:var(--accent-text);border:1px solid var(--accent-dim);
|
|
327
403
|
}
|
|
328
404
|
.slottag{
|
|
329
|
-
|
|
330
|
-
|
|
405
|
+
display:inline-flex;align-items:center;gap:4px;
|
|
406
|
+
font-size:.85rem;background:var(--surface-2);border:1px solid var(--accent-dim);
|
|
407
|
+
color:var(--accent-text);border-radius:6px;padding:1px 6px;margin-right:4px;
|
|
331
408
|
}
|
|
409
|
+
.slottag .icn{width:.95rem;height:.95rem;}
|
|
332
410
|
|
|
333
411
|
/* ---- Bottom nav ---- */
|
|
334
412
|
nav.bottom{
|
|
335
413
|
position:fixed;bottom:0;left:0;right:0;z-index:30;
|
|
336
|
-
background
|
|
414
|
+
background:var(--surface);border-top:1px solid var(--line);
|
|
337
415
|
display:flex;justify-content:space-around;
|
|
338
416
|
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
|
|
339
417
|
}
|
|
340
418
|
nav.bottom button{
|
|
341
419
|
flex:1;background:none;border:none;color:var(--muted);
|
|
342
|
-
display:flex;flex-direction:column;align-items:center;gap:
|
|
343
|
-
padding:8px 2px;font-size:.
|
|
420
|
+
display:flex;flex-direction:column;align-items:center;gap:3px;
|
|
421
|
+
padding:8px 2px;font-size:.7rem;font-weight:700;
|
|
344
422
|
}
|
|
345
|
-
nav.bottom button .ic{font-size:1.
|
|
346
|
-
nav.bottom button.on{color:var(--
|
|
423
|
+
nav.bottom button .ic{font-size:1.4rem;line-height:1;display:inline-flex;}
|
|
424
|
+
nav.bottom button.on{color:var(--accent-text);}
|
|
347
425
|
.toast{
|
|
348
426
|
position:fixed;bottom:96px;left:50%;transform:translateX(-50%);
|
|
349
|
-
background:var(--
|
|
427
|
+
background:var(--accent);color:var(--accent-ink);font-weight:800;padding:12px 20px;
|
|
350
428
|
border-radius:30px;z-index:50;opacity:0;transition:opacity .25s;pointer-events:none;
|
|
351
|
-
box-shadow:0 4px 16px rgba(0,0,0,.
|
|
429
|
+
box-shadow:0 4px 16px rgba(0,0,0,.35);
|
|
352
430
|
}
|
|
353
431
|
.toast.show{opacity:1;}
|