pf2e-spellbook 1.0.0 → 1.1.0
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/dist/icon.svg +3 -3
- package/dist/index.html +561 -269
- package/dist/manifest.webmanifest +2 -2
- package/dist/sw.js +1 -1
- package/package.json +15 -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 +227 -151
- package/src/template.html +31 -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,216 @@
|
|
|
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
|
-
.linklike{background:none;border:none;color:var(--
|
|
169
|
+
.linklike{background:none;border:none;color:var(--info);font-weight:700;text-decoration:underline;padding:0;font-size:inherit;}
|
|
113
170
|
|
|
114
171
|
label.field{display:block;margin:14px 0;}
|
|
115
|
-
label.field .name{display:block;font-weight:700;margin-bottom:6px;font-size:
|
|
172
|
+
label.field .name{display:block;font-weight:700;margin-bottom:6px;font-size:1rem;}
|
|
116
173
|
label.field .hint{display:block;color:var(--muted);font-size:.82rem;font-weight:400;margin-bottom:6px;}
|
|
174
|
+
input,select,textarea{accent-color:var(--accent);}
|
|
117
175
|
input,select{
|
|
118
|
-
width:100%;padding:
|
|
119
|
-
background:var(--
|
|
176
|
+
width:100%;padding:13px;font-size:1.05rem;border-radius:12px;
|
|
177
|
+
background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
|
|
120
178
|
appearance:none;-webkit-appearance:none;
|
|
121
179
|
}
|
|
122
|
-
select{
|
|
180
|
+
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
|
|
181
|
+
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
|
|
123
182
|
background-position:calc(100% - 20px) center,calc(100% - 14px) center;
|
|
124
183
|
background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;}
|
|
184
|
+
input[type="color"]{padding:4px;height:44px;cursor:pointer;}
|
|
125
185
|
.row{display:flex;gap:10px;}
|
|
126
186
|
.row > *{flex:1;}
|
|
127
187
|
|
|
128
188
|
.seg{display:flex;gap:8px;margin:6px 0;}
|
|
129
189
|
.seg button{
|
|
130
|
-
flex:1;padding:
|
|
131
|
-
background:var(--
|
|
190
|
+
flex:1;padding:13px;border-radius:12px;border:1px solid var(--line);
|
|
191
|
+
background:var(--surface-2);color:var(--ink);font-weight:700;
|
|
192
|
+
display:inline-flex;align-items:center;justify-content:center;gap:8px;
|
|
132
193
|
}
|
|
133
|
-
.seg button.on
|
|
134
|
-
.seg button.on.
|
|
194
|
+
.seg button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
|
|
195
|
+
.seg button.on.heal{background:var(--heal);color:#08140d;border-color:var(--heal);}
|
|
196
|
+
.seg button.on.harm{background:var(--harm);color:#1c0709;border-color:var(--harm);}
|
|
135
197
|
|
|
136
198
|
/* ---- Slot picker rows ---- */
|
|
137
199
|
.slotgroup{margin:18px 0;}
|
|
138
|
-
.slotgroup h3{color:var(--
|
|
200
|
+
.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
201
|
.slotrow{display:flex;align-items:center;gap:10px;margin:10px 0;}
|
|
140
202
|
.slotrow .num{
|
|
141
203
|
width:34px;height:34px;flex:0 0 34px;border-radius:50%;
|
|
142
|
-
background:var(--
|
|
204
|
+
background:var(--surface-2);border:1px solid var(--accent-dim);color:var(--accent-text);
|
|
143
205
|
display:flex;align-items:center;justify-content:center;font-weight:800;
|
|
144
206
|
}
|
|
207
|
+
.slotrow .num .icn{width:1.1rem;height:1.1rem;}
|
|
145
208
|
.slotrow select{flex:1;}
|
|
146
209
|
.prep-slot{margin:10px 0;}
|
|
147
210
|
.prep-slot .slotrow{margin:0;}
|
|
148
211
|
.prep-preview{margin:6px 0 0 44px;}
|
|
149
212
|
.prep-preview-inner{
|
|
150
|
-
background:var(--
|
|
213
|
+
background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
|
|
151
214
|
padding:10px 12px;
|
|
152
215
|
}
|
|
153
216
|
.prep-preview .meta{font-size:.85rem;margin:2px 0;}
|
|
@@ -156,123 +219,128 @@ select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),l
|
|
|
156
219
|
|
|
157
220
|
/* ---- Today cast cards ---- */
|
|
158
221
|
.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(--
|
|
222
|
+
background:var(--surface);border:1px solid var(--line);border-radius:14px;
|
|
223
|
+
padding:14px;margin:12px 0;border-left:5px solid var(--line);box-shadow:var(--shadow);
|
|
224
|
+
}
|
|
225
|
+
.cast-card.rank0{border-left-color:var(--rank0);}
|
|
226
|
+
.cast-card.rank1{border-left-color:var(--rank1);}
|
|
227
|
+
.cast-card.rank2{border-left-color:var(--rank2);}
|
|
228
|
+
.cast-card.rank3{border-left-color:var(--rank3);}
|
|
229
|
+
.cast-card.rank4{border-left-color:var(--rank4);}
|
|
230
|
+
.cast-card.rank5{border-left-color:var(--rank5);}
|
|
231
|
+
.cast-card.rank6{border-left-color:var(--rank6);}
|
|
232
|
+
.cast-card.rank7{border-left-color:var(--rank7);}
|
|
233
|
+
.cast-card.rank8{border-left-color:var(--rank8);}
|
|
234
|
+
.cast-card.rank9{border-left-color:var(--rank9);}
|
|
235
|
+
.cast-card.rank10{border-left-color:var(--rank10);}
|
|
173
236
|
.cast-card.heal{border-left-color:var(--heal);}
|
|
174
237
|
.cast-card.harm{border-left-color:var(--harm);}
|
|
175
|
-
.cast-card.spent{opacity:.
|
|
238
|
+
.cast-card.spent{opacity:.45;}
|
|
176
239
|
.cast-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
|
|
177
|
-
.cast-top .nm{font-size:1.
|
|
240
|
+
.cast-top .nm{font-size:1.15rem;font-weight:700;}
|
|
178
241
|
.uses{display:flex;gap:6px;align-items:center;}
|
|
179
|
-
.pip{width:
|
|
180
|
-
.pip.full{background:var(--
|
|
242
|
+
.pip{width:24px;height:24px;border-radius:50%;border:2px solid var(--accent);display:inline-block;}
|
|
243
|
+
.pip.full{background:var(--accent);}
|
|
181
244
|
.pip.spent{background:transparent;opacity:.35;}
|
|
182
245
|
.castbtn{
|
|
183
|
-
padding:10px 16px;border-radius:10px;border:none;background:var(--
|
|
184
|
-
color
|
|
246
|
+
padding:10px 16px;border-radius:10px;border:none;background:var(--accent);
|
|
247
|
+
color:var(--accent-ink);font-weight:800;font-size:1rem;
|
|
185
248
|
}
|
|
186
|
-
.castbtn.zero{background:var(--
|
|
249
|
+
.castbtn.zero{background:var(--surface-2);color:var(--muted);}
|
|
187
250
|
.unlim{font-size:.85rem;color:var(--heal);font-weight:700;}
|
|
188
251
|
.detailsbtn{
|
|
189
|
-
background:none;border:none;color:var(--
|
|
252
|
+
background:none;border:none;color:var(--info);font-weight:700;
|
|
190
253
|
padding:8px 0 0;font-size:.95rem;text-decoration:underline;
|
|
191
254
|
}
|
|
192
255
|
|
|
193
256
|
.susbtn{
|
|
194
|
-
padding:10px 14px;border-radius:10px;border:1px solid var(--
|
|
195
|
-
background
|
|
257
|
+
padding:10px 14px;border-radius:10px;border:1px solid var(--info);
|
|
258
|
+
background:var(--info-bg);color:var(--info-ink);font-weight:800;font-size:.95rem;
|
|
196
259
|
}
|
|
197
|
-
.susbtn.on{background:var(--
|
|
260
|
+
.susbtn.on{background:var(--info);color:var(--surface);}
|
|
198
261
|
.susrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);}
|
|
199
262
|
.susrow:first-of-type{border-top:none;}
|
|
200
263
|
.susrow span{font-weight:700;}
|
|
201
264
|
|
|
202
265
|
.dmgline{margin:4px 0 2px;}
|
|
203
266
|
.dmgchip{
|
|
204
|
-
display:inline-block;background
|
|
205
|
-
color:var(--
|
|
267
|
+
display:inline-block;background:var(--surface-2);border:1px solid var(--line);
|
|
268
|
+
color:var(--ink);font-weight:800;font-size:.92rem;border-radius:8px;padding:2px 10px;
|
|
206
269
|
}
|
|
270
|
+
.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);}
|
|
271
|
+
.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
272
|
|
|
208
273
|
.empty{text-align:center;color:var(--muted);padding:40px 20px;}
|
|
209
274
|
|
|
210
275
|
.filterbar{display:flex;gap:8px;margin:6px 0 14px;flex-wrap:wrap;}
|
|
211
276
|
.chip{
|
|
212
|
-
padding:8px 14px;border-radius:20px;border:1px solid var(--
|
|
213
|
-
background:var(--
|
|
277
|
+
padding:8px 14px;border-radius:20px;border:1px solid var(--line);
|
|
278
|
+
background:var(--surface-2);color:var(--muted);font-weight:700;font-size:.88rem;
|
|
279
|
+
display:inline-flex;align-items:center;gap:6px;
|
|
214
280
|
}
|
|
215
|
-
.chip.on{background:var(--
|
|
281
|
+
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
|
|
216
282
|
#search{margin-bottom:8px;}
|
|
217
283
|
#filterToggle{margin:0 0 8px;}
|
|
218
|
-
#browseFilters{background:var(--
|
|
284
|
+
#browseFilters{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;}
|
|
219
285
|
.fgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0;}
|
|
220
286
|
.fgroup .flabel{font-size:.8rem;color:var(--muted);font-weight:700;min-width:58px;}
|
|
221
287
|
|
|
222
288
|
.sectionhead{
|
|
223
|
-
color:var(--
|
|
289
|
+
color:var(--accent-text);font-size:1.1rem;font-weight:800;margin:22px 0 4px;
|
|
224
290
|
display:flex;align-items:center;gap:10px;
|
|
225
291
|
}
|
|
226
|
-
.sectionhead .count{font-size:.
|
|
292
|
+
.sectionhead .count{font-size:.82rem;color:var(--muted);font-weight:600;}
|
|
227
293
|
.divider{height:1px;background:var(--line);margin:4px 0 6px;}
|
|
228
294
|
|
|
229
295
|
.banner{
|
|
230
|
-
background
|
|
231
|
-
padding:12px 14px;margin:12px 0;color:var(--
|
|
296
|
+
background:var(--accent-soft);border:1px solid var(--accent-dim);border-radius:12px;
|
|
297
|
+
padding:12px 14px;margin:12px 0;color:var(--ink);font-size:.9rem;
|
|
232
298
|
}
|
|
233
|
-
.banner b{color:var(--
|
|
299
|
+
.banner b{color:var(--accent-text);}
|
|
234
300
|
|
|
235
|
-
details.help{background:var(--
|
|
236
|
-
details.help summary{padding:16px 0;font-weight:700;font-size:1.
|
|
301
|
+
details.help{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:12px 0;padding:0 16px;}
|
|
302
|
+
details.help summary{padding:16px 0;font-weight:700;font-size:1.05rem;color:var(--accent-text);cursor:pointer;list-style:none;}
|
|
237
303
|
details.help summary::-webkit-details-marker{display:none;}
|
|
238
304
|
details.help summary::after{content:"＋";float:right;color:var(--muted);}
|
|
239
305
|
details.help[open] summary::after{content:"－";}
|
|
240
306
|
details.help .body{padding:0 0 16px;font-size:1rem;line-height:1.6;color:var(--ink);}
|
|
241
|
-
details.help .body b{color:var(--
|
|
307
|
+
details.help .body b{color:var(--accent-text);}
|
|
242
308
|
|
|
243
309
|
/* ---- Class picker ---- */
|
|
244
310
|
.classcard{
|
|
245
311
|
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);
|
|
312
|
+
background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
|
|
313
|
+
border-radius:var(--radius);padding:16px;margin:12px 0;color:var(--ink);box-shadow:var(--shadow);
|
|
248
314
|
}
|
|
249
315
|
.classcard:active{transform:translateY(1px);}
|
|
250
|
-
.classcard .ic{font-size:
|
|
316
|
+
.classcard .ic{font-size:2rem;line-height:1;display:inline-flex;color:var(--accent-text);}
|
|
251
317
|
.classcard .txt{flex:1;}
|
|
252
|
-
.classcard .nm{font-size:1.
|
|
253
|
-
.classcard .tl{font-size:.
|
|
254
|
-
.classcard .arr{color:var(--
|
|
318
|
+
.classcard .nm{font-size:1.25rem;font-weight:800;color:var(--ink);}
|
|
319
|
+
.classcard .tl{font-size:.88rem;color:var(--muted);margin-top:2px;}
|
|
320
|
+
.classcard .arr{color:var(--muted);font-size:1.3rem;font-weight:800;}
|
|
255
321
|
.previewtag{
|
|
256
322
|
font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;
|
|
257
|
-
background
|
|
323
|
+
background:color-mix(in srgb, var(--harm) 15%, var(--surface));
|
|
324
|
+
border:1px solid color-mix(in srgb, var(--harm) 40%, var(--line));
|
|
325
|
+
color:var(--harm);border-radius:6px;padding:1px 6px;font-weight:700;
|
|
258
326
|
}
|
|
259
327
|
|
|
260
328
|
/* ---- Browse compact rows (tap to expand) ---- */
|
|
261
329
|
.browse-row{
|
|
262
|
-
background:var(--
|
|
330
|
+
background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
|
|
263
331
|
border-radius:12px;margin:8px 0;overflow:hidden;
|
|
264
332
|
}
|
|
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(--
|
|
333
|
+
.browse-row.rank0{border-left-color:var(--rank0);}
|
|
334
|
+
.browse-row.rank1{border-left-color:var(--rank1);}
|
|
335
|
+
.browse-row.rank2{border-left-color:var(--rank2);}
|
|
336
|
+
.browse-row.rank3{border-left-color:var(--rank3);}
|
|
337
|
+
.browse-row.rank4{border-left-color:var(--rank4);}
|
|
338
|
+
.browse-row.rank5{border-left-color:var(--rank5);}
|
|
339
|
+
.browse-row.rank6{border-left-color:var(--rank6);}
|
|
340
|
+
.browse-row.rank7{border-left-color:var(--rank7);}
|
|
341
|
+
.browse-row.rank8{border-left-color:var(--rank8);}
|
|
342
|
+
.browse-row.rank9{border-left-color:var(--rank9);}
|
|
343
|
+
.browse-row.rank10{border-left-color:var(--rank10);}
|
|
276
344
|
.browse-row-head{
|
|
277
345
|
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
|
|
278
346
|
width:100%;text-align:left;background:none;border:none;color:var(--ink);
|
|
@@ -280,74 +348,82 @@ details.help .body b{color:var(--gold);}
|
|
|
280
348
|
}
|
|
281
349
|
.browse-row-head::after{content:"▾";position:absolute;right:14px;top:14px;color:var(--muted);}
|
|
282
350
|
.browse-row-head.open::after{content:"▴";}
|
|
283
|
-
.browse-row-head .brn{font-size:1.
|
|
351
|
+
.browse-row-head .brn{font-size:1.05rem;font-weight:700;}
|
|
284
352
|
.browse-row-head .brmeta{font-size:.82rem;color:var(--muted);}
|
|
285
|
-
.brfocus{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color
|
|
353
|
+
.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
354
|
.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
|
|
355
|
+
.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
356
|
.browse-card{padding:0 12px 4px;}
|
|
289
357
|
.browse-card .card{margin:0 0 10px;}
|
|
290
358
|
|
|
291
359
|
/* ---- Header menu button + character menu ---- */
|
|
292
360
|
.tophead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
|
|
293
361
|
.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(--
|
|
362
|
+
flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);
|
|
363
|
+
border-radius:12px;width:44px;height:44px;font-size:1.3rem;line-height:1;color:var(--accent-text);
|
|
364
|
+
display:inline-flex;align-items:center;justify-content:center;
|
|
296
365
|
}
|
|
297
|
-
.classcard.activechar{border-left-color:var(--
|
|
366
|
+
.classcard.activechar{border-left-color:var(--accent);background:var(--accent-soft);}
|
|
298
367
|
textarea{
|
|
299
|
-
width:100%;padding:
|
|
300
|
-
background:var(--
|
|
368
|
+
width:100%;padding:13px;font-size:1rem;border-radius:12px;line-height:1.4;
|
|
369
|
+
background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
|
|
301
370
|
font-family:inherit;resize:vertical;margin:6px 0;
|
|
302
371
|
}
|
|
303
372
|
|
|
373
|
+
/* ---- Appearance / custom palette ---- */
|
|
374
|
+
.swatchrow{display:flex;align-items:center;gap:10px;margin:8px 0;}
|
|
375
|
+
.swatchrow label{flex:1;font-weight:600;font-size:.95rem;}
|
|
376
|
+
.swatchrow input[type="color"]{flex:0 0 56px;width:56px;}
|
|
377
|
+
|
|
304
378
|
/* ---- Repertoire builder (spontaneous) ---- */
|
|
305
379
|
.rep-row .slotrow{gap:8px;}
|
|
306
380
|
.sigstar{
|
|
307
381
|
width:38px;height:38px;flex:0 0 38px;border-radius:10px;
|
|
308
|
-
background:var(--
|
|
382
|
+
background:var(--surface-2);border:1px solid var(--accent-dim);color:var(--muted);
|
|
309
383
|
font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;
|
|
310
384
|
}
|
|
311
|
-
.sigstar.on{background:var(--
|
|
385
|
+
.sigstar.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
|
|
312
386
|
.rmrow{
|
|
313
387
|
width:38px;height:38px;flex:0 0 38px;border-radius:10px;
|
|
314
|
-
background:var(--
|
|
388
|
+
background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-weight:700;
|
|
315
389
|
}
|
|
316
|
-
.focus-checklist{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--
|
|
390
|
+
.focus-checklist{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--surface-2);}
|
|
317
391
|
.fcheck{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;}
|
|
318
392
|
.fcheck:last-child{border-bottom:none;}
|
|
319
393
|
.fcheck input{width:22px;height:22px;flex:0 0 22px;}
|
|
320
394
|
.fcheck .fcname{flex:1;font-weight:600;}
|
|
321
|
-
.fcheck .fcrank{font-size:.75rem;color:var(--muted);background:var(--
|
|
395
|
+
.fcheck .fcrank{font-size:.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 7px;}
|
|
322
396
|
|
|
323
397
|
.btn.addrow{
|
|
324
398
|
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(--
|
|
399
|
+
font-size:.95rem;font-weight:700;border-radius:10px;box-shadow:none;
|
|
400
|
+
background:var(--surface-2);color:var(--accent-text);border:1px solid var(--accent-dim);
|
|
327
401
|
}
|
|
328
402
|
.slottag{
|
|
329
|
-
|
|
330
|
-
|
|
403
|
+
display:inline-flex;align-items:center;gap:4px;
|
|
404
|
+
font-size:.85rem;background:var(--surface-2);border:1px solid var(--accent-dim);
|
|
405
|
+
color:var(--accent-text);border-radius:6px;padding:1px 6px;margin-right:4px;
|
|
331
406
|
}
|
|
407
|
+
.slottag .icn{width:.95rem;height:.95rem;}
|
|
332
408
|
|
|
333
409
|
/* ---- Bottom nav ---- */
|
|
334
410
|
nav.bottom{
|
|
335
411
|
position:fixed;bottom:0;left:0;right:0;z-index:30;
|
|
336
|
-
background
|
|
412
|
+
background:var(--surface);border-top:1px solid var(--line);
|
|
337
413
|
display:flex;justify-content:space-around;
|
|
338
414
|
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
|
|
339
415
|
}
|
|
340
416
|
nav.bottom button{
|
|
341
417
|
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:.
|
|
418
|
+
display:flex;flex-direction:column;align-items:center;gap:3px;
|
|
419
|
+
padding:8px 2px;font-size:.7rem;font-weight:700;
|
|
344
420
|
}
|
|
345
|
-
nav.bottom button .ic{font-size:1.
|
|
346
|
-
nav.bottom button.on{color:var(--
|
|
421
|
+
nav.bottom button .ic{font-size:1.4rem;line-height:1;display:inline-flex;}
|
|
422
|
+
nav.bottom button.on{color:var(--accent-text);}
|
|
347
423
|
.toast{
|
|
348
424
|
position:fixed;bottom:96px;left:50%;transform:translateX(-50%);
|
|
349
|
-
background:var(--
|
|
425
|
+
background:var(--accent);color:var(--accent-ink);font-weight:800;padding:12px 20px;
|
|
350
426
|
border-radius:30px;z-index:50;opacity:0;transition:opacity .25s;pointer-events:none;
|
|
351
|
-
box-shadow:0 4px 16px rgba(0,0,0,.
|
|
427
|
+
box-shadow:0 4px 16px rgba(0,0,0,.35);
|
|
352
428
|
}
|
|
353
429
|
.toast.show{opacity:1;}
|