@skillcdn/console-plugin-messenger 0.0.0-stage → 0.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.
@@ -0,0 +1,259 @@
1
+ /* src/web/index.css */
2
+ .pl-messenger-page {
3
+ display: grid;
4
+ gap: var(--sc-space-5);
5
+ padding: var(--sc-space-4);
6
+ color: var(--sc-color-text);
7
+ font-family: var(--sc-font-sans);
8
+ }
9
+ .pl-messenger-page [hidden] {
10
+ display: none;
11
+ }
12
+ .pl-messenger-page .pl-messenger-head {
13
+ margin-bottom: 0;
14
+ padding-bottom: 0;
15
+ border-bottom: 0;
16
+ }
17
+ .pl-messenger-page .pl-messenger-callout {
18
+ margin-bottom: 0;
19
+ }
20
+ .pl-messenger-stack {
21
+ display: grid;
22
+ gap: var(--sc-space-5);
23
+ min-width: 0;
24
+ }
25
+ .pl-messenger-toolbar {
26
+ display: flex;
27
+ flex-wrap: wrap;
28
+ align-items: center;
29
+ gap: var(--sc-space-3);
30
+ }
31
+ .pl-messenger-toolbar select {
32
+ width: auto;
33
+ min-width: 10rem;
34
+ }
35
+ .pl-messenger-panel {
36
+ display: grid;
37
+ gap: var(--sc-space-3);
38
+ min-width: 0;
39
+ margin-bottom: 0;
40
+ padding: var(--sc-space-5);
41
+ }
42
+ .pl-messenger-panel-head {
43
+ display: flex;
44
+ flex-wrap: wrap;
45
+ align-items: center;
46
+ justify-content: space-between;
47
+ gap: var(--sc-space-2) var(--sc-space-4);
48
+ }
49
+ .pl-messenger-panel-title {
50
+ font-size: var(--sc-text-lg);
51
+ font-weight: var(--sc-weight-bold);
52
+ }
53
+ .pl-messenger-subheading {
54
+ margin-top: var(--sc-space-2);
55
+ font-size: var(--sc-text-md);
56
+ font-weight: var(--sc-weight-medium);
57
+ }
58
+ .pl-messenger-line {
59
+ font-size: var(--sc-text-sm);
60
+ }
61
+ .pl-messenger-label {
62
+ color: var(--sc-color-text-muted);
63
+ font-size: var(--sc-text-sm);
64
+ }
65
+ .pl-messenger-mono {
66
+ font-family: var(--sc-font-mono);
67
+ font-size: var(--sc-text-sm);
68
+ overflow-wrap: anywhere;
69
+ }
70
+ .pl-messenger-rule {
71
+ width: 100%;
72
+ margin: var(--sc-space-2) 0;
73
+ border: 0;
74
+ border-top: var(--sc-hairline);
75
+ }
76
+ .pl-messenger-steps {
77
+ display: grid;
78
+ gap: 0;
79
+ margin: 0;
80
+ padding: 0;
81
+ list-style: none;
82
+ counter-reset: pl-messenger-step;
83
+ }
84
+ .pl-messenger-step {
85
+ display: grid;
86
+ gap: var(--sc-space-2);
87
+ padding: var(--sc-space-4) 0 var(--sc-space-4) 2.25rem;
88
+ border-top: var(--sc-hairline);
89
+ position: relative;
90
+ counter-increment: pl-messenger-step;
91
+ }
92
+ .pl-messenger-step:first-child {
93
+ border-top: 0;
94
+ padding-top: var(--sc-space-1);
95
+ }
96
+ .pl-messenger-step::before {
97
+ content: counter(pl-messenger-step);
98
+ position: absolute;
99
+ left: 0;
100
+ top: var(--sc-space-4);
101
+ display: inline-flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ width: 1.5rem;
105
+ height: 1.5rem;
106
+ border-radius: 50%;
107
+ background: var(--sc-color-neutral-subtle);
108
+ color: var(--sc-color-text-muted);
109
+ font-size: var(--sc-text-xs);
110
+ font-weight: var(--sc-weight-bold);
111
+ }
112
+ .pl-messenger-step:first-child::before {
113
+ top: var(--sc-space-1);
114
+ }
115
+ .pl-messenger-step-done::before {
116
+ background: var(--sc-color-success-subtle);
117
+ color: var(--sc-color-success);
118
+ }
119
+ .pl-messenger-step-head {
120
+ display: flex;
121
+ flex-wrap: wrap;
122
+ align-items: center;
123
+ gap: var(--sc-space-2) var(--sc-space-3);
124
+ }
125
+ .pl-messenger-step-title {
126
+ font-size: var(--sc-text-md);
127
+ font-weight: var(--sc-weight-medium);
128
+ }
129
+ .pl-messenger-step-body {
130
+ display: grid;
131
+ gap: var(--sc-space-2);
132
+ min-width: 0;
133
+ max-width: 44rem;
134
+ }
135
+ .pl-messenger-option-card input {
136
+ margin-top: 0.2em;
137
+ }
138
+ .pl-messenger-pills {
139
+ min-width: 0;
140
+ }
141
+ .pl-messenger-pills .pl-messenger-pill {
142
+ position: relative;
143
+ }
144
+ .pl-messenger-pills .pl-messenger-pill input {
145
+ position: absolute;
146
+ width: 1px;
147
+ height: 1px;
148
+ opacity: 0;
149
+ }
150
+ .pl-messenger-pills .pl-messenger-pill:has(input:checked) {
151
+ border-color: var(--sc-color-accent);
152
+ background: var(--sc-color-accent-subtle);
153
+ color: var(--sc-color-accent);
154
+ font-weight: var(--sc-weight-medium);
155
+ }
156
+ .pl-messenger-pills .pl-messenger-pill:has(input:focus-visible) {
157
+ outline: var(--sc-focus-ring);
158
+ outline-offset: 1px;
159
+ }
160
+ .pl-messenger-option-cards {
161
+ display: grid;
162
+ gap: var(--sc-space-2);
163
+ min-width: 0;
164
+ margin: 0;
165
+ padding: 0;
166
+ border: 0;
167
+ }
168
+ .pl-messenger-option-card {
169
+ display: flex;
170
+ align-items: flex-start;
171
+ gap: var(--sc-space-3);
172
+ padding: var(--sc-space-3) var(--sc-space-4);
173
+ border: var(--sc-border);
174
+ border-radius: var(--sc-radius-md);
175
+ background: var(--sc-color-sheet);
176
+ cursor: pointer;
177
+ transition: border-color var(--sc-transition), background var(--sc-transition);
178
+ }
179
+ .pl-messenger-option-card:hover {
180
+ background: var(--sc-color-sheet-hover);
181
+ }
182
+ .pl-messenger-option-card:has(input:checked) {
183
+ border-color: var(--sc-color-accent);
184
+ background: var(--sc-color-accent-subtle);
185
+ }
186
+ .pl-messenger-option-card-text {
187
+ display: grid;
188
+ gap: 0.125rem;
189
+ min-width: 0;
190
+ }
191
+ .pl-messenger-option-card-label {
192
+ font-size: var(--sc-text-sm);
193
+ font-weight: var(--sc-weight-medium);
194
+ }
195
+ .pl-messenger-option-card-hint {
196
+ color: var(--sc-color-text-muted);
197
+ font-size: var(--sc-text-xs);
198
+ }
199
+ .pl-messenger-who {
200
+ display: inline-flex;
201
+ align-items: center;
202
+ gap: var(--sc-space-2);
203
+ min-width: 0;
204
+ }
205
+ .pl-messenger-who-text {
206
+ display: grid;
207
+ min-width: 0;
208
+ line-height: var(--sc-leading-snug);
209
+ }
210
+ .pl-messenger-who-name {
211
+ overflow: hidden;
212
+ font-size: var(--sc-text-sm);
213
+ font-weight: var(--sc-weight-medium);
214
+ text-overflow: ellipsis;
215
+ white-space: nowrap;
216
+ }
217
+ .pl-messenger-who-sub {
218
+ overflow: hidden;
219
+ color: var(--sc-color-text-muted);
220
+ font-size: var(--sc-text-xs);
221
+ text-overflow: ellipsis;
222
+ white-space: nowrap;
223
+ }
224
+ .pl-messenger-scroll {
225
+ overflow-x: auto;
226
+ min-width: 0;
227
+ }
228
+ .pl-messenger-table {
229
+ width: 100%;
230
+ font-size: var(--sc-text-sm);
231
+ }
232
+ .pl-messenger-table th {
233
+ padding: var(--sc-space-2) var(--sc-space-3);
234
+ border-bottom: var(--sc-border);
235
+ color: var(--sc-color-text-muted);
236
+ font-size: var(--sc-text-xs);
237
+ font-weight: var(--sc-weight-medium);
238
+ text-align: left;
239
+ white-space: nowrap;
240
+ }
241
+ .pl-messenger-table td {
242
+ padding: var(--sc-space-2) var(--sc-space-3);
243
+ border-bottom: var(--sc-hairline);
244
+ vertical-align: top;
245
+ }
246
+ .pl-messenger-table tbody tr:last-child td {
247
+ border-bottom: 0;
248
+ }
249
+ .pl-messenger-status {
250
+ min-height: 1.25rem;
251
+ font-size: var(--sc-text-sm);
252
+ overflow-wrap: anywhere;
253
+ }
254
+ .pl-messenger-status:empty {
255
+ display: none;
256
+ }
257
+ .pl-messenger-ok {
258
+ color: var(--sc-color-success);
259
+ }