pure-react-ui 1.5.8 → 1.5.9

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.
@@ -1,125 +1,394 @@
1
- /* Kanban Board Container */
1
+ /* Kanban Container */
2
+ .pure-kanban-container {
3
+ min-height: 100vh;
4
+ background-color: #ffffff;
5
+ }
6
+
7
+ /* Header */
8
+ .pure-kanban-header {
9
+ background-color: #0747A6;
10
+ color: #ffffff;
11
+ position: sticky;
12
+ top: 0;
13
+ z-index: 50;
14
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
15
+ }
16
+
17
+ .pure-kanban-header__top {
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ padding: 0.5rem 1.5rem;
22
+ border-bottom: 1px solid #0052CC;
23
+ }
24
+
25
+ .pure-kanban-header__left {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 1.5rem;
29
+ }
30
+
31
+ .pure-kanban-header__logo {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 0.5rem;
35
+ }
36
+
37
+ .pure-kanban-header__logo-icon {
38
+ width: 32px;
39
+ height: 32px;
40
+ background-color: #ffffff;
41
+ border-radius: 4px;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ }
46
+
47
+ .pure-kanban-header__logo-text {
48
+ font-weight: 700;
49
+ font-size: 1.125rem;
50
+ }
51
+
52
+ .pure-kanban-header__nav {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 0.25rem;
56
+ }
57
+
58
+ .pure-kanban-header__nav-item {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 0.5rem;
62
+ padding: 0.5rem 0.75rem;
63
+ background: transparent;
64
+ border: none;
65
+ color: #ffffff;
66
+ font-size: 0.875rem;
67
+ cursor: pointer;
68
+ border-radius: 4px;
69
+ transition: background-color 0.2s;
70
+ }
71
+
72
+ .pure-kanban-header__nav-item:hover {
73
+ background-color: #0052CC;
74
+ }
75
+
76
+ .pure-kanban-header__nav-item--active {
77
+ background-color: #0052CC;
78
+ font-weight: 600;
79
+ }
80
+
81
+ .pure-kanban-header__right {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 0.75rem;
85
+ }
86
+
87
+ .pure-kanban-header__action {
88
+ position: relative;
89
+ padding: 0.5rem;
90
+ background: transparent;
91
+ border: none;
92
+ color: #ffffff;
93
+ cursor: pointer;
94
+ border-radius: 50%;
95
+ transition: background-color 0.2s;
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ }
100
+
101
+ .pure-kanban-header__action:hover {
102
+ background-color: #0052CC;
103
+ }
104
+
105
+ .pure-kanban-header__notification-dot {
106
+ position: absolute;
107
+ top: 0.25rem;
108
+ right: 0.25rem;
109
+ width: 8px;
110
+ height: 8px;
111
+ background-color: #FF5630;
112
+ border-radius: 50%;
113
+ }
114
+
115
+ .pure-kanban-header__user {
116
+ width: 32px;
117
+ height: 32px;
118
+ background-color: #0052CC;
119
+ border-radius: 50%;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ font-weight: 600;
124
+ font-size: 0.875rem;
125
+ }
126
+
127
+ .pure-kanban-header__project {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: space-between;
131
+ padding: 0.75rem 1.5rem;
132
+ background-color: #0052CC;
133
+ }
134
+
135
+ .pure-kanban-header__project-left {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 1rem;
139
+ }
140
+
141
+ .pure-kanban-header__project-title {
142
+ margin: 0;
143
+ font-size: 1.25rem;
144
+ font-weight: 700;
145
+ }
146
+
147
+ .pure-kanban-header__project-badge {
148
+ font-size: 0.875rem;
149
+ background-color: #0747A6;
150
+ padding: 0.25rem 0.75rem;
151
+ border-radius: 9999px;
152
+ }
153
+
154
+ .pure-kanban-header__project-right {
155
+ display: flex;
156
+ align-items: center;
157
+ gap: 0.5rem;
158
+ font-size: 0.875rem;
159
+ opacity: 0.9;
160
+ }
161
+
162
+ .pure-kanban-header__separator {
163
+ opacity: 0.6;
164
+ }
165
+
166
+ /* Toolbar */
167
+ .pure-kanban-toolbar {
168
+ display: flex;
169
+ align-items: center;
170
+ justify-content: space-between;
171
+ padding: 0.75rem 1.5rem;
172
+ border-bottom: 1px solid #E5E7EB;
173
+ background-color: #ffffff;
174
+ position: sticky;
175
+ top: 104px;
176
+ z-index: 40;
177
+ gap: 1rem;
178
+ }
179
+
180
+ .pure-kanban-toolbar__left {
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 0.75rem;
184
+ flex: 1;
185
+ }
186
+
187
+ .pure-kanban-toolbar__search {
188
+ position: relative;
189
+ flex: 1;
190
+ max-width: 28rem;
191
+ }
192
+
193
+ .pure-kanban-toolbar__search svg {
194
+ position: absolute;
195
+ left: 0.75rem;
196
+ top: 50%;
197
+ transform: translateY(-50%);
198
+ pointer-events: none;
199
+ }
200
+
201
+ .pure-kanban-toolbar__search-input {
202
+ width: 100%;
203
+ padding: 0.5rem 0.75rem 0.5rem 2.5rem;
204
+ border: 1px solid #D1D5DB;
205
+ border-radius: 6px;
206
+ font-size: 0.875rem;
207
+ outline: none;
208
+ transition: all 0.2s;
209
+ }
210
+
211
+ .pure-kanban-toolbar__search-input:focus {
212
+ border-color: #0052CC;
213
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
214
+ }
215
+
216
+ .pure-kanban-toolbar__filter-btn {
217
+ display: flex;
218
+ align-items: center;
219
+ gap: 0.5rem;
220
+ padding: 0.5rem 1rem;
221
+ border: 1px solid #D1D5DB;
222
+ border-radius: 6px;
223
+ background-color: #ffffff;
224
+ font-size: 0.875rem;
225
+ font-weight: 500;
226
+ cursor: pointer;
227
+ transition: all 0.2s;
228
+ }
229
+
230
+ .pure-kanban-toolbar__filter-btn:hover {
231
+ background-color: #F9FAFB;
232
+ }
233
+
234
+ .pure-kanban-toolbar__select {
235
+ padding: 0.5rem 0.75rem;
236
+ border: 1px solid #D1D5DB;
237
+ border-radius: 6px;
238
+ font-size: 0.875rem;
239
+ background-color: #ffffff;
240
+ cursor: pointer;
241
+ outline: none;
242
+ transition: all 0.2s;
243
+ }
244
+
245
+ .pure-kanban-toolbar__select:focus {
246
+ border-color: #0052CC;
247
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
248
+ }
249
+
250
+ .pure-kanban-toolbar__right {
251
+ display: flex;
252
+ align-items: center;
253
+ gap: 0.5rem;
254
+ }
255
+
256
+ .pure-kanban-toolbar__create-btn {
257
+ display: flex;
258
+ align-items: center;
259
+ gap: 0.5rem;
260
+ padding: 0.5rem 1rem;
261
+ background-color: #0747A6;
262
+ color: #ffffff;
263
+ border: none;
264
+ border-radius: 6px;
265
+ font-size: 0.875rem;
266
+ font-weight: 500;
267
+ cursor: pointer;
268
+ transition: background-color 0.2s;
269
+ }
270
+
271
+ .pure-kanban-toolbar__create-btn:hover {
272
+ background-color: #0052CC;
273
+ }
274
+
275
+ .pure-kanban-toolbar__more-btn {
276
+ padding: 0.5rem;
277
+ border: 1px solid #D1D5DB;
278
+ border-radius: 6px;
279
+ background-color: #ffffff;
280
+ cursor: pointer;
281
+ transition: all 0.2s;
282
+ }
283
+
284
+ .pure-kanban-toolbar__more-btn:hover {
285
+ background-color: #F9FAFB;
286
+ }
287
+
288
+ /* Kanban Board */
2
289
  .pure-kanban {
3
290
  display: flex;
4
291
  gap: 1rem;
5
- padding: 1rem;
292
+ padding: 1.5rem;
6
293
  overflow-x: auto;
7
294
  overflow-y: hidden;
8
- min-height: 600px;
295
+ min-height: calc(100vh - 200px);
9
296
  background-color: #F4F5F7;
10
- position: relative;
11
297
  }
12
298
 
13
299
  /* Kanban Column */
14
300
  .pure-kanban-column {
15
- flex: 0 0 300px;
301
+ flex: 0 0 320px;
16
302
  display: flex;
17
303
  flex-direction: column;
18
- background-color: #F4F5F7;
19
- border-radius: 8px;
20
304
  min-height: 100%;
21
- transition: background-color 0.2s ease;
22
305
  }
23
306
 
24
307
  .pure-kanban-column--drag-over {
25
308
  background-color: #E3FCEF;
309
+ border-radius: 8px;
26
310
  }
27
311
 
28
- /* Column Header */
29
312
  .pure-kanban-column__header {
30
313
  display: flex;
31
314
  align-items: center;
32
315
  justify-content: space-between;
33
- padding: 0.75rem 1rem;
34
- background-color: #FFFFFF;
35
- border-top: 3px solid #0052CC;
36
- border-radius: 8px 8px 0 0;
37
- margin-bottom: 0.5rem;
38
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
316
+ padding: 0.5rem 0.5rem;
317
+ margin-bottom: 0.75rem;
39
318
  }
40
319
 
41
- .pure-kanban-column__title-wrapper {
320
+ .pure-kanban-column__header-left {
42
321
  display: flex;
43
322
  align-items: center;
44
323
  gap: 0.5rem;
45
- flex: 1;
46
324
  }
47
325
 
48
326
  .pure-kanban-column__title {
49
327
  margin: 0;
50
- font-size: 0.875rem;
51
- font-weight: 600;
52
- color: #172B4D;
328
+ font-size: 0.75rem;
329
+ font-weight: 700;
330
+ color: #6B778C;
53
331
  text-transform: uppercase;
54
- letter-spacing: 0.5px;
332
+ letter-spacing: 0.05em;
55
333
  }
56
334
 
57
335
  .pure-kanban-column__count {
58
- display: inline-flex;
59
- align-items: center;
60
- justify-content: center;
61
- min-width: 24px;
62
- height: 24px;
63
- padding: 0 6px;
64
336
  background-color: #DFE1E6;
65
- border-radius: 12px;
66
- font-size: 0.75rem;
67
- font-weight: 600;
68
337
  color: #42526E;
69
- }
70
-
71
- .pure-kanban-column__limit {
72
338
  font-size: 0.75rem;
73
- color: #6B778C;
339
+ font-weight: 600;
340
+ padding: 0.125rem 0.5rem;
341
+ border-radius: 12px;
342
+ min-width: 24px;
343
+ text-align: center;
74
344
  }
75
345
 
76
- .pure-kanban-column__add-button {
77
- display: flex;
78
- align-items: center;
79
- justify-content: center;
80
- width: 24px;
81
- height: 24px;
82
- padding: 0;
346
+ .pure-kanban-column__add-btn {
347
+ padding: 0.25rem;
83
348
  background: transparent;
84
349
  border: none;
85
- border-radius: 4px;
86
350
  color: #6B778C;
87
351
  cursor: pointer;
88
- transition: all 0.2s ease;
352
+ border-radius: 4px;
353
+ transition: all 0.2s;
354
+ display: flex;
355
+ align-items: center;
356
+ justify-content: center;
89
357
  }
90
358
 
91
- .pure-kanban-column__add-button:hover {
92
- background-color: #EBECF0;
93
- color: #172B4D;
359
+ .pure-kanban-column__add-btn:hover {
360
+ background-color: #E5E7EB;
94
361
  }
95
362
 
96
363
  /* Column Body */
97
- .pure-kanban-column__body {
364
+ .pure-kanban-column-body {
98
365
  flex: 1;
99
366
  display: flex;
100
367
  flex-direction: column;
101
368
  gap: 0.5rem;
102
369
  padding: 0.5rem;
370
+ background-color: #F4F5F7;
371
+ border-radius: 8px;
372
+ min-height: 400px;
373
+ max-height: calc(100vh - 300px);
103
374
  overflow-y: auto;
104
375
  overflow-x: hidden;
105
- max-height: calc(100vh - 200px);
106
- min-height: 400px;
107
376
  }
108
377
 
109
- .pure-kanban-column__body::-webkit-scrollbar {
378
+ .pure-kanban-column-body::-webkit-scrollbar {
110
379
  width: 8px;
111
380
  }
112
381
 
113
- .pure-kanban-column__body::-webkit-scrollbar-track {
382
+ .pure-kanban-column-body::-webkit-scrollbar-track {
114
383
  background: transparent;
115
384
  }
116
385
 
117
- .pure-kanban-column__body::-webkit-scrollbar-thumb {
386
+ .pure-kanban-column-body::-webkit-scrollbar-thumb {
118
387
  background: #DFE1E6;
119
388
  border-radius: 4px;
120
389
  }
121
390
 
122
- .pure-kanban-column__body::-webkit-scrollbar-thumb:hover {
391
+ .pure-kanban-column-body::-webkit-scrollbar-thumb:hover {
123
392
  background: #B3BAC5;
124
393
  }
125
394
 
@@ -140,197 +409,203 @@
140
409
  font-size: 0.875rem;
141
410
  }
142
411
 
143
- .pure-kanban-column__empty-add-button {
412
+ .pure-kanban-column__empty-add-btn {
144
413
  padding: 0.5rem 1rem;
145
- background-color: #FFFFFF;
414
+ background-color: #ffffff;
146
415
  border: 1px dashed #DFE1E6;
147
416
  border-radius: 4px;
148
417
  color: #0052CC;
149
418
  font-size: 0.875rem;
150
419
  font-weight: 500;
151
420
  cursor: pointer;
152
- transition: all 0.2s ease;
421
+ transition: all 0.2s;
153
422
  }
154
423
 
155
- .pure-kanban-column__empty-add-button:hover {
424
+ .pure-kanban-column__empty-add-btn:hover {
156
425
  background-color: #F4F5F7;
157
426
  border-color: #0052CC;
158
427
  }
159
428
 
160
- /* Card Wrapper */
161
- .pure-kanban-card-wrapper {
429
+ /* Task Wrapper */
430
+ .pure-kanban-task-wrapper {
162
431
  position: relative;
163
432
  transition: margin 0.2s ease;
164
433
  }
165
434
 
166
- .pure-kanban-card-wrapper--drag-over {
435
+ .pure-kanban-task-wrapper--drag-over {
167
436
  margin-bottom: 60px;
168
437
  }
169
438
 
170
- /* Kanban Card */
171
- .pure-kanban-card {
172
- position: relative;
173
- background-color: #FFFFFF;
174
- border-radius: 4px;
439
+ /* Task Card */
440
+ .pure-kanban-task {
441
+ background-color: #ffffff;
442
+ border-radius: 8px;
175
443
  padding: 0.75rem;
176
444
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
177
445
  cursor: grab;
178
446
  transition: all 0.2s ease;
179
- margin-bottom: 0.5rem;
447
+ border: 1px solid #E5E7EB;
180
448
  }
181
449
 
182
- .pure-kanban-card:hover {
450
+ .pure-kanban-task:hover {
183
451
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
452
+ border-color: #0052CC;
184
453
  transform: translateY(-1px);
185
454
  }
186
455
 
187
- .pure-kanban-card:active {
456
+ .pure-kanban-task:active {
188
457
  cursor: grabbing;
189
458
  }
190
459
 
191
- .pure-kanban-card--dragging {
460
+ .pure-kanban-task--dragging {
192
461
  opacity: 0.5;
193
- transform: rotate(5deg);
194
- }
195
-
196
- /* Priority Indicator */
197
- .pure-kanban-card__priority {
198
- position: absolute;
199
- top: 0;
200
- left: 0;
201
- width: 4px;
202
- height: 100%;
203
- border-radius: 4px 0 0 4px;
462
+ transform: rotate(2deg);
204
463
  }
205
464
 
206
- /* Card Header */
207
- .pure-kanban-card__header {
465
+ .pure-kanban-task__header {
208
466
  display: flex;
209
467
  align-items: flex-start;
210
468
  justify-content: space-between;
211
- gap: 0.5rem;
212
469
  margin-bottom: 0.5rem;
213
470
  }
214
471
 
215
- .pure-kanban-card__title {
216
- margin: 0;
217
- font-size: 0.875rem;
218
- font-weight: 500;
219
- color: #172B4D;
220
- line-height: 1.4;
221
- flex: 1;
222
- word-break: break-word;
472
+ .pure-kanban-task__type-wrapper {
473
+ display: flex;
474
+ align-items: center;
475
+ gap: 0.5rem;
223
476
  }
224
477
 
225
- .pure-kanban-card__actions {
478
+ .pure-kanban-task__type-icon {
479
+ padding: 0.25rem;
480
+ border-radius: 4px;
226
481
  display: flex;
227
- gap: 0.25rem;
228
- opacity: 0;
229
- transition: opacity 0.2s ease;
482
+ align-items: center;
483
+ justify-content: center;
230
484
  }
231
485
 
232
- .pure-kanban-card:hover .pure-kanban-card__actions {
233
- opacity: 1;
486
+ .pure-kanban-task__id {
487
+ font-size: 0.75rem;
488
+ font-weight: 500;
489
+ color: #6B778C;
234
490
  }
235
491
 
236
- .pure-kanban-card__action {
237
- display: flex;
238
- align-items: center;
239
- justify-content: center;
240
- width: 20px;
241
- height: 20px;
242
- padding: 0;
492
+ .pure-kanban-task__more {
493
+ padding: 0.25rem;
243
494
  background: transparent;
244
495
  border: none;
245
- border-radius: 3px;
246
496
  color: #6B778C;
247
497
  cursor: pointer;
248
- transition: all 0.2s ease;
498
+ border-radius: 4px;
499
+ opacity: 0;
500
+ transition: all 0.2s;
501
+ display: flex;
502
+ align-items: center;
503
+ justify-content: center;
249
504
  }
250
505
 
251
- .pure-kanban-card__action:hover {
252
- background-color: #EBECF0;
253
- color: #172B4D;
506
+ .pure-kanban-task:hover .pure-kanban-task__more {
507
+ opacity: 1;
254
508
  }
255
509
 
256
- /* Card Description */
257
- .pure-kanban-card__description {
258
- margin: 0 0 0.75rem 0;
259
- font-size: 0.8125rem;
260
- color: #6B778C;
261
- line-height: 1.5;
262
- word-break: break-word;
510
+ .pure-kanban-task__more:hover {
511
+ background-color: #F4F5F7;
512
+ }
513
+
514
+ .pure-kanban-task__title {
515
+ margin: 0 0 0.5rem 0;
516
+ font-size: 0.875rem;
517
+ font-weight: 500;
518
+ color: #172B4D;
519
+ line-height: 1.4;
263
520
  display: -webkit-box;
264
- -webkit-line-clamp: 3;
521
+ -webkit-line-clamp: 2;
265
522
  -webkit-box-orient: vertical;
266
523
  overflow: hidden;
267
524
  }
268
525
 
269
- /* Card Footer */
270
- .pure-kanban-card__footer {
271
- display: flex;
272
- align-items: center;
273
- justify-content: space-between;
274
- gap: 0.5rem;
275
- margin-top: 0.5rem;
276
- }
277
-
278
- .pure-kanban-card__tags {
526
+ .pure-kanban-task__labels {
279
527
  display: flex;
280
528
  flex-wrap: wrap;
281
529
  gap: 0.25rem;
282
- flex: 1;
530
+ margin-bottom: 0.75rem;
283
531
  }
284
532
 
285
- .pure-kanban-card__tag {
533
+ .pure-kanban-task__label {
286
534
  display: inline-block;
287
535
  padding: 0.125rem 0.5rem;
288
- background-color: #DFE1E6;
289
- border-radius: 3px;
536
+ background-color: #F4F5F7;
537
+ color: #42526E;
290
538
  font-size: 0.6875rem;
291
539
  font-weight: 500;
292
- color: #42526E;
540
+ border-radius: 3px;
293
541
  white-space: nowrap;
294
542
  }
295
543
 
296
- .pure-kanban-card__tag--more {
297
- background-color: #EBECF0;
544
+ .pure-kanban-task__label-more {
545
+ font-size: 0.75rem;
298
546
  color: #6B778C;
547
+ padding: 0 0.25rem;
548
+ }
549
+
550
+ .pure-kanban-task__footer {
551
+ display: flex;
552
+ align-items: center;
553
+ justify-content: space-between;
554
+ margin-top: 0.75rem;
555
+ padding-top: 0.5rem;
556
+ border-top: 1px solid #F4F5F7;
557
+ }
558
+
559
+ .pure-kanban-task__footer-left {
560
+ display: flex;
561
+ align-items: center;
562
+ gap: 0.5rem;
299
563
  }
300
564
 
301
- /* Card Meta */
302
- .pure-kanban-card__meta {
565
+ .pure-kanban-task__story-points {
566
+ font-size: 0.75rem;
567
+ font-weight: 600;
568
+ color: #42526E;
569
+ background-color: #F4F5F7;
570
+ padding: 0.125rem 0.5rem;
571
+ border-radius: 3px;
572
+ }
573
+
574
+ .pure-kanban-task__footer-right {
303
575
  display: flex;
304
576
  align-items: center;
305
577
  gap: 0.5rem;
306
578
  }
307
579
 
308
- .pure-kanban-card__assignee {
580
+ .pure-kanban-task__meta-item {
309
581
  display: flex;
310
582
  align-items: center;
311
- justify-content: center;
583
+ gap: 0.25rem;
584
+ color: #6B778C;
585
+ font-size: 0.75rem;
586
+ }
587
+
588
+ .pure-kanban-task__assignee {
312
589
  width: 24px;
313
590
  height: 24px;
314
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
315
591
  border-radius: 50%;
592
+ background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
593
+ display: flex;
594
+ align-items: center;
595
+ justify-content: center;
316
596
  font-size: 0.75rem;
317
597
  font-weight: 600;
318
- color: #FFFFFF;
598
+ color: #ffffff;
319
599
  cursor: pointer;
320
- transition: transform 0.2s ease;
600
+ transition: transform 0.2s;
321
601
  }
322
602
 
323
- .pure-kanban-card__assignee:hover {
603
+ .pure-kanban-task__assignee:hover {
324
604
  transform: scale(1.1);
325
605
  }
326
606
 
327
- .pure-kanban-card__due-date {
328
- font-size: 0.875rem;
329
- cursor: pointer;
330
- }
331
-
332
607
  /* Drop Indicator */
333
- .pure-kanban-card__drop-indicator {
608
+ .pure-kanban-task__drop-indicator {
334
609
  height: 2px;
335
610
  background-color: #0052CC;
336
611
  border-radius: 2px;
@@ -347,51 +622,344 @@
347
622
  }
348
623
  }
349
624
 
350
- /* Responsive Design */
351
- @media (max-width: 768px) {
352
- .pure-kanban {
353
- padding: 0.5rem;
354
- gap: 0.5rem;
355
- }
625
+ /* Modal */
626
+ .pure-kanban-modal-overlay {
627
+ position: fixed;
628
+ inset: 0;
629
+ background-color: rgba(0, 0, 0, 0.5);
630
+ display: flex;
631
+ align-items: center;
632
+ justify-content: center;
633
+ z-index: 50;
634
+ padding: 1rem;
635
+ }
356
636
 
357
- .pure-kanban-column {
358
- flex: 0 0 280px;
359
- }
637
+ .pure-kanban-modal {
638
+ background-color: #ffffff;
639
+ border-radius: 8px;
640
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
641
+ width: 100%;
642
+ max-width: 80rem;
643
+ max-height: 90vh;
644
+ overflow: hidden;
645
+ display: flex;
646
+ }
360
647
 
361
- .pure-kanban-column__body {
362
- max-height: calc(100vh - 150px);
363
- }
648
+ .pure-kanban-modal__main {
649
+ flex: 1;
650
+ overflow-y: auto;
651
+ }
652
+
653
+ .pure-kanban-modal__content {
654
+ padding: 1.5rem;
655
+ }
656
+
657
+ .pure-kanban-modal__header {
658
+ display: flex;
659
+ align-items: flex-start;
660
+ justify-content: space-between;
661
+ margin-bottom: 1.5rem;
662
+ }
663
+
664
+ .pure-kanban-modal__header-left {
665
+ display: flex;
666
+ align-items: flex-start;
667
+ gap: 0.75rem;
668
+ }
669
+
670
+ .pure-kanban-modal__type-icon {
671
+ padding: 0.5rem;
672
+ border-radius: 4px;
673
+ display: flex;
674
+ align-items: center;
675
+ justify-content: center;
676
+ }
677
+
678
+ .pure-kanban-modal__id {
679
+ display: block;
680
+ font-size: 0.875rem;
681
+ color: #6B778C;
682
+ font-weight: 500;
683
+ margin-bottom: 0.25rem;
684
+ }
685
+
686
+ .pure-kanban-modal__title {
687
+ margin: 0;
688
+ font-size: 1.5rem;
689
+ font-weight: 600;
690
+ color: #172B4D;
691
+ }
692
+
693
+ .pure-kanban-modal__close {
694
+ padding: 0.5rem;
695
+ background: transparent;
696
+ border: none;
697
+ color: #6B778C;
698
+ cursor: pointer;
699
+ border-radius: 4px;
700
+ transition: all 0.2s;
701
+ }
702
+
703
+ .pure-kanban-modal__close:hover {
704
+ background-color: #F4F5F7;
705
+ }
706
+
707
+ .pure-kanban-modal__section {
708
+ margin-bottom: 1.5rem;
709
+ }
710
+
711
+ .pure-kanban-modal__section-title {
712
+ font-size: 0.875rem;
713
+ font-weight: 600;
714
+ color: #42526E;
715
+ margin-bottom: 0.5rem;
716
+ display: flex;
717
+ align-items: center;
718
+ gap: 0.5rem;
719
+ }
720
+
721
+ .pure-kanban-modal__description {
722
+ background-color: #F4F5F7;
723
+ padding: 1rem;
724
+ border-radius: 8px;
725
+ color: #42526E;
726
+ line-height: 1.6;
727
+ }
728
+
729
+ .pure-kanban-modal__labels {
730
+ display: flex;
731
+ flex-wrap: wrap;
732
+ gap: 0.5rem;
733
+ }
734
+
735
+ .pure-kanban-modal__label {
736
+ background-color: #F4F5F7;
737
+ color: #42526E;
738
+ padding: 0.25rem 0.75rem;
739
+ border-radius: 6px;
740
+ font-weight: 500;
741
+ font-size: 0.875rem;
742
+ }
743
+
744
+ .pure-kanban-modal__comment-box {
745
+ border: 1px solid #E5E7EB;
746
+ border-radius: 8px;
747
+ padding: 1rem;
748
+ }
749
+
750
+ .pure-kanban-modal__comment-input {
751
+ width: 100%;
752
+ padding: 0.5rem;
753
+ border: 1px solid #E5E7EB;
754
+ border-radius: 4px;
755
+ font-size: 0.875rem;
756
+ resize: vertical;
757
+ outline: none;
758
+ transition: all 0.2s;
759
+ }
760
+
761
+ .pure-kanban-modal__comment-input:focus {
762
+ border-color: #0052CC;
763
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
764
+ }
765
+
766
+ .pure-kanban-modal__comment-actions {
767
+ display: flex;
768
+ justify-content: flex-end;
769
+ margin-top: 0.5rem;
770
+ }
771
+
772
+ .pure-kanban-modal__comment-btn {
773
+ padding: 0.5rem 1rem;
774
+ background-color: #0747A6;
775
+ color: #ffffff;
776
+ border: none;
777
+ border-radius: 4px;
778
+ font-size: 0.875rem;
779
+ font-weight: 500;
780
+ cursor: pointer;
781
+ transition: background-color 0.2s;
364
782
  }
365
783
 
366
- /* Dark mode support (optional) */
367
- @media (prefers-color-scheme: dark) {
784
+ .pure-kanban-modal__comment-btn:hover {
785
+ background-color: #0052CC;
786
+ }
787
+
788
+ .pure-kanban-modal__activity {
789
+ display: flex;
790
+ flex-direction: column;
791
+ gap: 0.75rem;
792
+ }
793
+
794
+ .pure-kanban-modal__activity-item {
795
+ display: flex;
796
+ gap: 0.75rem;
797
+ }
798
+
799
+ .pure-kanban-modal__activity-avatar {
800
+ width: 32px;
801
+ height: 32px;
802
+ border-radius: 50%;
803
+ background-color: #D1D5DB;
804
+ flex-shrink: 0;
805
+ }
806
+
807
+ .pure-kanban-modal__activity-content {
808
+ flex: 1;
809
+ }
810
+
811
+ .pure-kanban-modal__activity-name {
812
+ font-weight: 600;
813
+ color: #172B4D;
814
+ }
815
+
816
+ .pure-kanban-modal__activity-text {
817
+ color: #6B778C;
818
+ }
819
+
820
+ .pure-kanban-modal__activity-time {
821
+ font-size: 0.75rem;
822
+ color: #6B778C;
823
+ margin-top: 0.25rem;
824
+ }
825
+
826
+ /* Sidebar */
827
+ .pure-kanban-modal__sidebar {
828
+ width: 320px;
829
+ border-left: 1px solid #E5E7EB;
830
+ background-color: #F4F5F7;
831
+ padding: 1.5rem;
832
+ overflow-y: auto;
833
+ }
834
+
835
+ .pure-kanban-modal__sidebar-section {
836
+ margin-bottom: 1.5rem;
837
+ }
838
+
839
+ .pure-kanban-modal__label-text {
840
+ display: block;
841
+ font-size: 0.75rem;
842
+ font-weight: 600;
843
+ color: #6B778C;
844
+ text-transform: uppercase;
845
+ letter-spacing: 0.05em;
846
+ margin-bottom: 0.5rem;
847
+ }
848
+
849
+ .pure-kanban-modal__select {
850
+ width: 100%;
851
+ padding: 0.5rem 0.75rem;
852
+ border: 1px solid #E5E7EB;
853
+ border-radius: 6px;
854
+ font-size: 0.875rem;
855
+ background-color: #ffffff;
856
+ cursor: pointer;
857
+ outline: none;
858
+ transition: all 0.2s;
859
+ }
860
+
861
+ .pure-kanban-modal__select:focus {
862
+ border-color: #0052CC;
863
+ box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
864
+ }
865
+
866
+ .pure-kanban-modal__assignee-display,
867
+ .pure-kanban-modal__reporter-display,
868
+ .pure-kanban-modal__priority-display,
869
+ .pure-kanban-modal__story-points-display,
870
+ .pure-kanban-modal__due-date-display {
871
+ display: flex;
872
+ align-items: center;
873
+ gap: 0.5rem;
874
+ padding: 0.5rem;
875
+ border: 1px solid #E5E7EB;
876
+ border-radius: 6px;
877
+ background-color: #ffffff;
878
+ font-size: 0.875rem;
879
+ }
880
+
881
+ .pure-kanban-modal__assignee-avatar {
882
+ width: 32px;
883
+ height: 32px;
884
+ border-radius: 50%;
885
+ background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
886
+ display: flex;
887
+ align-items: center;
888
+ justify-content: center;
889
+ font-size: 0.875rem;
890
+ font-weight: 600;
891
+ color: #ffffff;
892
+ }
893
+
894
+ .pure-kanban-modal__sidebar-actions {
895
+ padding-top: 1.5rem;
896
+ border-top: 1px solid #E5E7EB;
897
+ display: flex;
898
+ flex-direction: column;
899
+ gap: 0.5rem;
900
+ }
901
+
902
+ .pure-kanban-modal__action-btn {
903
+ display: flex;
904
+ align-items: center;
905
+ justify-content: center;
906
+ gap: 0.5rem;
907
+ width: 100%;
908
+ padding: 0.5rem 1rem;
909
+ border: none;
910
+ border-radius: 6px;
911
+ font-size: 0.875rem;
912
+ font-weight: 500;
913
+ cursor: pointer;
914
+ transition: all 0.2s;
915
+ }
916
+
917
+ .pure-kanban-modal__action-btn--primary {
918
+ background-color: #0747A6;
919
+ color: #ffffff;
920
+ }
921
+
922
+ .pure-kanban-modal__action-btn--primary:hover {
923
+ background-color: #0052CC;
924
+ }
925
+
926
+ .pure-kanban-modal__action-btn--danger {
927
+ background-color: #ffffff;
928
+ color: #DE350B;
929
+ border: 1px solid #FFEBE6;
930
+ }
931
+
932
+ .pure-kanban-modal__action-btn--danger:hover {
933
+ background-color: #FFEBE6;
934
+ }
935
+
936
+ /* Responsive */
937
+ @media (max-width: 768px) {
368
938
  .pure-kanban {
369
- background-color: #1D2125;
939
+ padding: 0.5rem;
940
+ gap: 0.5rem;
370
941
  }
371
942
 
372
943
  .pure-kanban-column {
373
- background-color: #1D2125;
374
- }
375
-
376
- .pure-kanban-column__header {
377
- background-color: #22272B;
378
- border-top-color: #4C9AFF;
944
+ flex: 0 0 280px;
379
945
  }
380
946
 
381
- .pure-kanban-column__title {
382
- color: #B6C2CF;
947
+ .pure-kanban-header__nav {
948
+ display: none;
383
949
  }
384
950
 
385
- .pure-kanban-card {
386
- background-color: #22272B;
951
+ .pure-kanban-toolbar {
952
+ flex-wrap: wrap;
387
953
  }
388
954
 
389
- .pure-kanban-card__title {
390
- color: #B6C2CF;
955
+ .pure-kanban-modal {
956
+ flex-direction: column;
957
+ max-height: 95vh;
391
958
  }
392
959
 
393
- .pure-kanban-card__description {
394
- color: #8C9CB8;
960
+ .pure-kanban-modal__sidebar {
961
+ width: 100%;
962
+ border-left: none;
963
+ border-top: 1px solid #E5E7EB;
395
964
  }
396
965
  }
397
-