extwee 2.3.6 → 2.3.8

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,584 @@
1
+ /* Reset and Base Styles */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
10
+ line-height: 1.6;
11
+ color: #333;
12
+ background-color: #f5f5f5;
13
+ }
14
+
15
+ /* Container */
16
+ .container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ padding: 20px;
20
+ }
21
+
22
+ /* Header */
23
+ header {
24
+ text-align: center;
25
+ margin-bottom: 40px;
26
+ padding: 30px 0;
27
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
28
+ color: white;
29
+ border-radius: 10px;
30
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
31
+ }
32
+
33
+ header h1 {
34
+ font-size: 2.5rem;
35
+ margin-bottom: 10px;
36
+ font-weight: 300;
37
+ }
38
+
39
+ header p {
40
+ font-size: 1.1rem;
41
+ opacity: 0.9;
42
+ max-width: 600px;
43
+ margin: 0 auto;
44
+ }
45
+
46
+ /* Upload Section */
47
+ .upload-section {
48
+ background: white;
49
+ padding: 40px;
50
+ border-radius: 10px;
51
+ box-shadow: 0 2px 20px rgba(0,0,0,0.1);
52
+ margin-bottom: 30px;
53
+ text-align: center;
54
+ }
55
+
56
+ .file-input-container {
57
+ position: relative;
58
+ display: inline-block;
59
+ }
60
+
61
+ #fileInput {
62
+ position: absolute;
63
+ opacity: 0;
64
+ width: 100%;
65
+ height: 100%;
66
+ cursor: pointer;
67
+ }
68
+
69
+ .file-input-label {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ gap: 10px;
74
+ padding: 15px 30px;
75
+ background: #667eea;
76
+ color: white;
77
+ border-radius: 8px;
78
+ cursor: pointer;
79
+ font-size: 1.1rem;
80
+ font-weight: 500;
81
+ transition: all 0.3s ease;
82
+ border: 2px dashed transparent;
83
+ }
84
+
85
+ .file-input-label:hover {
86
+ background: #5a67d8;
87
+ transform: translateY(-2px);
88
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
89
+ }
90
+
91
+ .file-input-icon {
92
+ font-size: 1.3rem;
93
+ }
94
+
95
+ .file-info {
96
+ margin-top: 20px;
97
+ padding: 15px;
98
+ background: #f8f9fa;
99
+ border-radius: 6px;
100
+ font-size: 0.9rem;
101
+ color: #666;
102
+ border-left: 4px solid #667eea;
103
+ }
104
+
105
+ /* Results Section */
106
+ .results-section {
107
+ background: white;
108
+ border-radius: 10px;
109
+ box-shadow: 0 2px 20px rgba(0,0,0,0.1);
110
+ overflow: hidden;
111
+ }
112
+
113
+ /* Tabs */
114
+ .tabs {
115
+ display: flex;
116
+ background: #f8f9fa;
117
+ border-bottom: 1px solid #e9ecef;
118
+ }
119
+
120
+ .tab-button {
121
+ flex: 1;
122
+ padding: 15px 20px;
123
+ background: none;
124
+ border: none;
125
+ cursor: pointer;
126
+ font-size: 1rem;
127
+ font-weight: 500;
128
+ color: #666;
129
+ transition: all 0.3s ease;
130
+ position: relative;
131
+ }
132
+
133
+ .tab-button:hover {
134
+ background: #e9ecef;
135
+ color: #333;
136
+ }
137
+
138
+ .tab-button.active {
139
+ color: #667eea;
140
+ background: white;
141
+ }
142
+
143
+ .tab-button.active::after {
144
+ content: '';
145
+ position: absolute;
146
+ bottom: 0;
147
+ left: 0;
148
+ right: 0;
149
+ height: 3px;
150
+ background: #667eea;
151
+ }
152
+
153
+ /* Tab Content */
154
+ .tab-content {
155
+ display: none;
156
+ padding: 30px;
157
+ }
158
+
159
+ .tab-content.active {
160
+ display: block;
161
+ }
162
+
163
+ /* Stats Grid */
164
+ .stats-grid {
165
+ display: grid;
166
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
167
+ gap: 20px;
168
+ margin-bottom: 40px;
169
+ }
170
+
171
+ .stat-card {
172
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
173
+ color: white;
174
+ padding: 25px;
175
+ border-radius: 10px;
176
+ text-align: center;
177
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
178
+ transition: transform 0.3s ease;
179
+ }
180
+
181
+ .stat-card:hover {
182
+ transform: translateY(-5px);
183
+ }
184
+
185
+ .stat-number {
186
+ font-size: 2.5rem;
187
+ font-weight: bold;
188
+ margin-bottom: 5px;
189
+ }
190
+
191
+ .stat-label {
192
+ font-size: 1rem;
193
+ opacity: 0.9;
194
+ font-weight: 300;
195
+ }
196
+
197
+ /* Story Info */
198
+ .story-info {
199
+ background: #f8f9fa;
200
+ padding: 25px;
201
+ border-radius: 8px;
202
+ border-left: 4px solid #667eea;
203
+ }
204
+
205
+ .story-info h3 {
206
+ margin-bottom: 20px;
207
+ color: #333;
208
+ font-weight: 600;
209
+ }
210
+
211
+ .info-grid {
212
+ display: grid;
213
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
214
+ gap: 15px;
215
+ }
216
+
217
+ .info-item {
218
+ display: flex;
219
+ flex-direction: column;
220
+ gap: 5px;
221
+ }
222
+
223
+ .info-item label {
224
+ font-weight: 600;
225
+ color: #555;
226
+ font-size: 0.9rem;
227
+ text-transform: uppercase;
228
+ letter-spacing: 0.5px;
229
+ }
230
+
231
+ .info-item span {
232
+ color: #333;
233
+ font-size: 1rem;
234
+ word-break: break-all;
235
+ }
236
+
237
+ /* Passages */
238
+ .passages-header {
239
+ display: flex;
240
+ justify-content: space-between;
241
+ align-items: center;
242
+ margin-bottom: 25px;
243
+ flex-wrap: wrap;
244
+ gap: 15px;
245
+ }
246
+
247
+ .passages-header h3 {
248
+ color: #333;
249
+ font-weight: 600;
250
+ }
251
+
252
+ .search-container input {
253
+ padding: 10px 15px;
254
+ border: 2px solid #e9ecef;
255
+ border-radius: 6px;
256
+ font-size: 1rem;
257
+ width: 250px;
258
+ transition: border-color 0.3s ease;
259
+ }
260
+
261
+ .search-container input:focus {
262
+ outline: none;
263
+ border-color: #667eea;
264
+ }
265
+
266
+ .passages-list {
267
+ display: flex;
268
+ flex-direction: column;
269
+ gap: 15px;
270
+ }
271
+
272
+ .passage-item {
273
+ background: #f8f9fa;
274
+ border: 1px solid #e9ecef;
275
+ border-radius: 8px;
276
+ padding: 20px;
277
+ transition: all 0.3s ease;
278
+ }
279
+
280
+ .passage-item:hover {
281
+ border-color: #667eea;
282
+ box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
283
+ }
284
+
285
+ .passage-header {
286
+ display: flex;
287
+ justify-content: space-between;
288
+ align-items: center;
289
+ margin-bottom: 10px;
290
+ flex-wrap: wrap;
291
+ gap: 10px;
292
+ }
293
+
294
+ .passage-name {
295
+ color: #333;
296
+ font-weight: 600;
297
+ font-size: 1.1rem;
298
+ margin: 0;
299
+ }
300
+
301
+ .passage-stats {
302
+ display: flex;
303
+ gap: 15px;
304
+ }
305
+
306
+ .passage-stats .stat {
307
+ font-size: 0.9rem;
308
+ color: #666;
309
+ background: white;
310
+ padding: 4px 8px;
311
+ border-radius: 4px;
312
+ border: 1px solid #e9ecef;
313
+ }
314
+
315
+ .passage-tags {
316
+ margin-bottom: 15px;
317
+ display: flex;
318
+ flex-wrap: wrap;
319
+ gap: 6px;
320
+ }
321
+
322
+ .tag {
323
+ background: #667eea;
324
+ color: white;
325
+ padding: 4px 10px;
326
+ border-radius: 15px;
327
+ font-size: 0.8rem;
328
+ font-weight: 500;
329
+ }
330
+
331
+ .no-tags {
332
+ color: #999;
333
+ font-style: italic;
334
+ font-size: 0.9rem;
335
+ }
336
+
337
+ .passage-preview {
338
+ color: #555;
339
+ line-height: 1.5;
340
+ font-size: 0.95rem;
341
+ }
342
+
343
+ /* Tags */
344
+ .tags-header {
345
+ margin-bottom: 25px;
346
+ }
347
+
348
+ .tags-header h3 {
349
+ color: #333;
350
+ font-weight: 600;
351
+ }
352
+
353
+ .tags-container {
354
+ display: flex;
355
+ flex-direction: column;
356
+ gap: 15px;
357
+ }
358
+
359
+ .tag-stat {
360
+ background: #f8f9fa;
361
+ border: 1px solid #e9ecef;
362
+ border-radius: 8px;
363
+ padding: 20px;
364
+ }
365
+
366
+ .tag-stat-header {
367
+ display: flex;
368
+ justify-content: space-between;
369
+ align-items: center;
370
+ margin-bottom: 10px;
371
+ flex-wrap: wrap;
372
+ gap: 10px;
373
+ }
374
+
375
+ .tag-name {
376
+ font-weight: 600;
377
+ font-size: 1.1rem;
378
+ color: #333;
379
+ padding-left: 10px;
380
+ border-left: 4px solid #667eea;
381
+ }
382
+
383
+ .tag-count {
384
+ background: #667eea;
385
+ color: white;
386
+ padding: 4px 12px;
387
+ border-radius: 15px;
388
+ font-size: 0.9rem;
389
+ font-weight: 500;
390
+ }
391
+
392
+ .tag-passages {
393
+ color: #666;
394
+ line-height: 1.5;
395
+ }
396
+
397
+ .passage-link {
398
+ color: #667eea;
399
+ font-weight: 500;
400
+ cursor: pointer;
401
+ transition: color 0.3s ease;
402
+ }
403
+
404
+ .passage-link:hover {
405
+ color: #5a67d8;
406
+ text-decoration: underline;
407
+ }
408
+
409
+ /* Metadata */
410
+ .metadata-container h3 {
411
+ margin-bottom: 25px;
412
+ color: #333;
413
+ font-weight: 600;
414
+ }
415
+
416
+ .metadata-content {
417
+ display: flex;
418
+ flex-direction: column;
419
+ gap: 30px;
420
+ }
421
+
422
+ .metadata-section h4 {
423
+ color: #667eea;
424
+ font-weight: 600;
425
+ margin-bottom: 15px;
426
+ font-size: 1.1rem;
427
+ border-bottom: 2px solid #e9ecef;
428
+ padding-bottom: 8px;
429
+ }
430
+
431
+ .metadata-list {
432
+ display: grid;
433
+ grid-template-columns: 200px 1fr;
434
+ gap: 10px 20px;
435
+ align-items: start;
436
+ }
437
+
438
+ .metadata-list dt {
439
+ font-weight: 600;
440
+ color: #555;
441
+ text-align: right;
442
+ padding-top: 5px;
443
+ }
444
+
445
+ .metadata-list dd {
446
+ color: #333;
447
+ padding: 5px 0;
448
+ word-break: break-word;
449
+ }
450
+
451
+ /* Error Section */
452
+ .error-section {
453
+ background: white;
454
+ border-radius: 10px;
455
+ box-shadow: 0 2px 20px rgba(0,0,0,0.1);
456
+ padding: 40px;
457
+ text-align: center;
458
+ }
459
+
460
+ .error-message {
461
+ background: #fff5f5;
462
+ border: 1px solid #fed7d7;
463
+ border-radius: 8px;
464
+ padding: 25px;
465
+ border-left: 4px solid #e53e3e;
466
+ }
467
+
468
+ .error-message h3 {
469
+ color: #e53e3e;
470
+ margin-bottom: 10px;
471
+ font-weight: 600;
472
+ }
473
+
474
+ .error-message p {
475
+ color: #c53030;
476
+ font-size: 1rem;
477
+ }
478
+
479
+ /* No Data */
480
+ .no-data {
481
+ text-align: center;
482
+ color: #999;
483
+ font-style: italic;
484
+ padding: 40px;
485
+ font-size: 1.1rem;
486
+ }
487
+
488
+ /* Responsive Design */
489
+ @media (max-width: 768px) {
490
+ .container {
491
+ padding: 15px;
492
+ }
493
+
494
+ header h1 {
495
+ font-size: 2rem;
496
+ }
497
+
498
+ .upload-section {
499
+ padding: 25px;
500
+ }
501
+
502
+ .tab-content {
503
+ padding: 20px;
504
+ }
505
+
506
+ .stats-grid {
507
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
508
+ gap: 15px;
509
+ }
510
+
511
+ .stat-number {
512
+ font-size: 2rem;
513
+ }
514
+
515
+ .info-grid {
516
+ grid-template-columns: 1fr;
517
+ }
518
+
519
+ .metadata-list {
520
+ grid-template-columns: 1fr;
521
+ gap: 5px 0;
522
+ }
523
+
524
+ .metadata-list dt {
525
+ text-align: left;
526
+ font-weight: 600;
527
+ color: #667eea;
528
+ }
529
+
530
+ .passages-header {
531
+ flex-direction: column;
532
+ align-items: stretch;
533
+ }
534
+
535
+ .search-container input {
536
+ width: 100%;
537
+ }
538
+
539
+ .passage-header {
540
+ flex-direction: column;
541
+ align-items: flex-start;
542
+ }
543
+
544
+ .tabs {
545
+ flex-wrap: wrap;
546
+ }
547
+
548
+ .tab-button {
549
+ flex: none;
550
+ min-width: 25%;
551
+ }
552
+ }
553
+
554
+ @media (max-width: 480px) {
555
+ header {
556
+ padding: 20px 15px;
557
+ }
558
+
559
+ header h1 {
560
+ font-size: 1.8rem;
561
+ }
562
+
563
+ .upload-section {
564
+ padding: 20px;
565
+ }
566
+
567
+ .file-input-label {
568
+ padding: 12px 20px;
569
+ font-size: 1rem;
570
+ }
571
+
572
+ .stats-grid {
573
+ grid-template-columns: 1fr;
574
+ }
575
+
576
+ .stat-card {
577
+ padding: 20px;
578
+ }
579
+
580
+ .tab-button {
581
+ padding: 12px 15px;
582
+ font-size: 0.9rem;
583
+ }
584
+ }