codebay 0.10.1 → 0.11.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.
Files changed (101) hide show
  1. package/.mochi/manifest.json +196 -170
  2. package/.mochi/svelte-client/HydratableIsland-dammyce5.js +1 -0
  3. package/.mochi/svelte-client/_hydrate-AppShell_2rtnxn6pgp2rh-v65ctd99.js +2 -0
  4. package/.mochi/svelte-client/_hydrate-AvatarsView_257s9yq1wwr4f-htjfv8q9.js +14 -0
  5. package/.mochi/svelte-client/_hydrate-InstanceView_2ma45l9bybfhl-v07seqge.js +1 -0
  6. package/.mochi/svelte-client/_hydrate-SettingsView_8hmarwmf8onq-hj9yvqc4.js +38 -0
  7. package/.mochi/svelte-client/chunk-0zkdsrth.js +2 -0
  8. package/.mochi/svelte-client/{chunk-bn731rda.js → chunk-566rqq4c.js} +2 -2
  9. package/.mochi/svelte-client/chunk-79aj59e0.js +2 -0
  10. package/.mochi/svelte-client/{chunk-wvtkwfsh.js → chunk-czkxd74n.js} +1 -1
  11. package/.mochi/svelte-client/{chunk-p20tkpde.js → chunk-hxydjtda.js} +1 -1
  12. package/.mochi/svelte-client/chunk-qx1defbm.js +2 -0
  13. package/.mochi/svelte-client/chunk-r3wxmmc0.js +2 -0
  14. package/.mochi/svelte-client/{chunk-j72r8pkk.js → chunk-vs6pd2b4.js} +2 -2
  15. package/.mochi/svelte-client/{chunk-t0ap7q89.js → chunk-wjagstre.js} +1 -1
  16. package/.mochi/svelte-client/{chunk-0fjx3z3r.js → chunk-y9yy1004.js} +1 -1
  17. package/.mochi/svelte-compile/{App-59cdj86f.server.js → App-mzn3dqjm.server.js} +182 -72
  18. package/.mochi/svelte-compile/{Avatars-fmagfyj2.server.js → Avatars-c0k5jx8q.server.js} +3 -6
  19. package/.mochi/svelte-compile/{Instance-s1gqwzmx.server.js → Instance-hj76qnha.server.js} +4 -4
  20. package/.mochi/svelte-compile/{Settings-k447mt0x.server.js → Settings-tvc5yp08.server.js} +39 -28
  21. package/.mochi/svelte-compile/chunk-ed46m58e.js +22 -0
  22. package/.mochi/svelte-compile/{chunk-th2dbqvc.js → chunk-gz6hv1h5.js} +5 -1
  23. package/.mochi/svelte-compile/chunk-zd49axkf.js +65 -0
  24. package/.mochi/svelte-css/{AppBar-3bxinv4pabv8l.css → AppBar-1gtu2me3fni8e.css} +1 -1
  25. package/.mochi/svelte-css/AvatarEditor-1mjvec6bwdkv8.css +1 -0
  26. package/.mochi/svelte-css/{AvatarsView-2llo48w0wt0xn.css → AvatarsView-26ya4ep5n1ze7.css} +1 -1
  27. package/.mochi/svelte-css/Button-208u50wkms8ya.css +1 -0
  28. package/.mochi/svelte-css/CoinButton-2727devjtsn10.css +1 -0
  29. package/.mochi/svelte-css/CredMenu-7qowd1oxujet.css +1 -0
  30. package/.mochi/svelte-css/DashboardView-17a0b8epjurhb.css +1 -0
  31. package/.mochi/svelte-css/FolderBrowser-i0uj58dph27f.css +1 -0
  32. package/.mochi/svelte-css/HealthBox-r0giuhjn2wj4.css +1 -0
  33. package/.mochi/svelte-css/IdeBar-1mtgemqfuvqzi.css +1 -0
  34. package/.mochi/svelte-css/InstanceCard-25z7nas7y98zk.css +1 -0
  35. package/.mochi/svelte-css/InstanceFilter-2vglmyy0yrbbc.css +1 -0
  36. package/.mochi/svelte-css/InstanceView-32j12hyg8v9u0.css +1 -0
  37. package/.mochi/svelte-css/SettingsCog-1jdeprd3ilczz.css +1 -0
  38. package/.mochi/svelte-css/{SettingsView-n3oy75uonzp2.css → SettingsView-bccw34agd2bj.css} +1 -1
  39. package/.mochi/svelte-css/StatusBadge-2eisdtnrsnfdc.css +1 -0
  40. package/.mochi/svelte-css/TerminalPane-2ywc86rhtmr9l.css +1 -0
  41. package/.mochi/svelte-css/ThemePicker-3fw4synubier0.css +1 -0
  42. package/migrations/0008_config_migrated.sql +1 -0
  43. package/package.json +8 -8
  44. package/src/components/AppBar.svelte +2 -2
  45. package/src/components/AppShell.svelte +71 -7
  46. package/src/components/AvatarEditor.svelte +10 -10
  47. package/src/components/AvatarsView.svelte +0 -0
  48. package/src/components/Button.svelte +13 -9
  49. package/src/components/CoinButton.svelte +2 -2
  50. package/src/components/CredMenu.svelte +8 -6
  51. package/src/components/DashboardView.svelte +2 -2
  52. package/src/components/FolderBrowser.svelte +39 -36
  53. package/src/components/HealthBox.svelte +5 -4
  54. package/src/components/IdeBar.svelte +286 -112
  55. package/src/components/InstanceCard.svelte +7 -7
  56. package/src/components/InstanceFilter.svelte +6 -6
  57. package/src/components/InstanceView.svelte +28 -22
  58. package/src/components/SettingsCog.svelte +4 -3
  59. package/src/components/SettingsView.svelte +7 -11
  60. package/src/components/StatusBadge.svelte +8 -6
  61. package/src/components/TerminalPane.svelte +19 -7
  62. package/src/components/ThemePicker.svelte +150 -8
  63. package/src/components/TopBar.svelte +1 -1
  64. package/src/components/UiShowcase.svelte +303 -64
  65. package/src/lib/db.server.ts +7 -3
  66. package/src/lib/devcontainer.server.ts +187 -33
  67. package/src/lib/docker.server.ts +10 -0
  68. package/src/lib/git.server.ts +28 -0
  69. package/src/lib/instances.server.ts +49 -6
  70. package/src/lib/tab-nav.ts +30 -0
  71. package/src/routes.ts +12 -0
  72. package/src/shell.html +60 -23
  73. package/src/theme.ts +8 -1
  74. package/src/toast.ts +9 -0
  75. package/src/types.ts +7 -0
  76. package/.mochi/svelte-client/HydratableIsland-aebn1fa1.js +0 -1
  77. package/.mochi/svelte-client/_hydrate-AppShell_2rtnxn6pgp2rh-rx6arrv5.js +0 -2
  78. package/.mochi/svelte-client/_hydrate-AvatarsView_257s9yq1wwr4f-jpjdmgpe.js +0 -14
  79. package/.mochi/svelte-client/_hydrate-InstanceView_2ma45l9bybfhl-c9y47dat.js +0 -1
  80. package/.mochi/svelte-client/_hydrate-SettingsView_8hmarwmf8onq-d61feq89.js +0 -38
  81. package/.mochi/svelte-client/chunk-8xvr02wh.js +0 -2
  82. package/.mochi/svelte-client/chunk-9143wy3j.js +0 -2
  83. package/.mochi/svelte-client/chunk-k37wj1jm.js +0 -2
  84. package/.mochi/svelte-client/chunk-pc0fm37c.js +0 -2
  85. package/.mochi/svelte-compile/chunk-3t7v4hk0.js +0 -52
  86. package/.mochi/svelte-compile/chunk-gkjgybb2.js +0 -15
  87. package/.mochi/svelte-css/AvatarEditor-2mdq8ss346drw.css +0 -1
  88. package/.mochi/svelte-css/Button-oharop2xz6am.css +0 -1
  89. package/.mochi/svelte-css/CoinButton-1rej3sh3tkjud.css +0 -1
  90. package/.mochi/svelte-css/CredMenu-9hwgeptp7crb.css +0 -1
  91. package/.mochi/svelte-css/DashboardView-1cy4xpqhja9sx.css +0 -1
  92. package/.mochi/svelte-css/FolderBrowser-2pxp9z1o7zixk.css +0 -1
  93. package/.mochi/svelte-css/HealthBox-er2her0jukwl.css +0 -1
  94. package/.mochi/svelte-css/IdeBar-3bgr3m5z0lpeg.css +0 -1
  95. package/.mochi/svelte-css/InstanceCard-3vnltxnbxkvay.css +0 -1
  96. package/.mochi/svelte-css/InstanceFilter-3q6x0jt0hcgpz.css +0 -1
  97. package/.mochi/svelte-css/InstanceView-1pd7j16bd2b16.css +0 -1
  98. package/.mochi/svelte-css/SettingsCog-jftyadvo64qo.css +0 -1
  99. package/.mochi/svelte-css/StatusBadge-3mq0j7z6aq4j.css +0 -1
  100. package/.mochi/svelte-css/TerminalPane-3bwgk6ulzq6b3.css +0 -1
  101. package/.mochi/svelte-css/ThemePicker-1ir8jyocm8mvi.css +0 -1
package/src/components/AvatarEditor.svelte CHANGED
@@ -265,8 +265,8 @@
265
265
  justify-content: space-between;
266
266
  gap: 12px;
267
267
  padding: 14px 18px;
268
- border-bottom: 1px solid var(--ink);
269
- background: var(--ink);
268
+ border-bottom: 1px solid var(--fill);
269
+ background: var(--fill);
270
270
  }
271
271
  .head h2 {
272
272
  margin: 0;
@@ -275,7 +275,7 @@
275
275
  font-size: 17px;
276
276
  text-transform: uppercase;
277
277
  letter-spacing: 0.06em;
278
- color: var(--bg);
278
+ color: var(--fill-ink);
279
279
  }
280
280
  .head-cancel {
281
281
  display: inline-flex;
@@ -283,9 +283,9 @@
283
283
  gap: 6px;
284
284
  flex: none;
285
285
  padding: 5px 10px;
286
- border: 1px solid var(--bg);
286
+ border: 1px solid var(--fill-ink);
287
287
  background: transparent;
288
- color: var(--bg);
288
+ color: var(--fill-ink);
289
289
  font-family: var(--font-mono);
290
290
  font-size: 11px;
291
291
  text-transform: uppercase;
@@ -293,8 +293,8 @@
293
293
  cursor: pointer;
294
294
  }
295
295
  .head-cancel:hover {
296
- background: var(--bg);
297
- color: var(--ink);
296
+ background: var(--fill-ink);
297
+ color: var(--fill);
298
298
  }
299
299
  .head-cancel:focus-visible {
300
300
  outline: none;
@@ -321,7 +321,7 @@
321
321
  padding: 0 1px 1px 0;
322
322
  background-clip: content-box;
323
323
  background-color: var(--rule-soft);
324
- opacity: 0.4; /* more muted than the paintable off cells — not part of the art */
324
+ opacity: var(--dim); /* more muted than the paintable off cells — not part of the art */
325
325
  }
326
326
  /* A stroke paints by pointer position, so cells need no individual handlers. */
327
327
  .grid {
@@ -415,8 +415,8 @@
415
415
  border-right: none;
416
416
  }
417
417
  .mode.active {
418
- background: var(--ink);
419
- color: var(--bg);
418
+ background: var(--fill);
419
+ color: var(--fill-ink);
420
420
  }
421
421
  .mode:focus-visible {
422
422
  outline: none;
package/src/components/AvatarsView.svelte CHANGED
Binary file
package/src/components/Button.svelte CHANGED
@@ -69,21 +69,21 @@
69
69
  font-weight: 600;
70
70
  text-transform: uppercase;
71
71
  letter-spacing: 0.06em;
72
- border: 1px solid var(--ink);
72
+ border: 1px solid var(--edge);
73
73
  background: var(--bg-card);
74
74
  color: var(--ink);
75
75
  cursor: pointer;
76
76
  text-decoration: none;
77
77
  }
78
78
  .btn:disabled {
79
- opacity: 0.4;
79
+ opacity: var(--dim);
80
80
  cursor: not-allowed;
81
81
  }
82
82
  /* `disabled` has no native effect on an <a> — the href branch above drops the
83
83
  href entirely when disabled, but it still needs the same visual treatment
84
84
  and to be excluded from the tab order / assistive-tech actions. */
85
85
  .btn[aria-disabled='true'] {
86
- opacity: 0.4;
86
+ opacity: var(--dim);
87
87
  cursor: not-allowed;
88
88
  pointer-events: none;
89
89
  }
@@ -119,17 +119,20 @@
119
119
  }
120
120
 
121
121
  .btn.default:hover:not(:disabled) {
122
- background: var(--ink);
123
- color: var(--bg);
122
+ background: var(--fill);
123
+ border-color: var(--fill);
124
+ color: var(--fill-ink);
124
125
  }
125
126
 
126
127
  .btn.primary {
127
128
  font-weight: 700;
128
- background: var(--ink);
129
- color: var(--bg);
129
+ background: var(--fill);
130
+ border-color: var(--fill);
131
+ color: var(--fill-ink);
130
132
  }
131
133
  .btn.primary:hover:not(:disabled) {
132
134
  background: var(--bg-card);
135
+ border-color: var(--edge);
133
136
  color: var(--ink);
134
137
  }
135
138
 
@@ -138,8 +141,9 @@
138
141
  border-style: dashed;
139
142
  }
140
143
  .btn.ghost:hover:not(:disabled) {
141
- background: var(--ink);
142
- color: var(--bg);
144
+ background: var(--fill);
145
+ border-color: var(--fill);
146
+ color: var(--fill-ink);
143
147
  border-style: solid;
144
148
  }
145
149
 
package/src/components/CoinButton.svelte CHANGED
@@ -69,14 +69,14 @@
69
69
  }
70
70
  .coin {
71
71
  display: block;
72
- box-shadow: 2px 2px 0 var(--ink);
72
+ box-shadow: 2px 2px 0 var(--shadow);
73
73
  animation: coin-spin 2.6s ease-in-out infinite;
74
74
  }
75
75
  /* The spin has to stop, or it would override the press transform. */
76
76
  .coin-btn:hover .coin {
77
77
  animation: none;
78
78
  transform: translate(1px, 1px);
79
- box-shadow: 1px 1px 0 var(--ink);
79
+ box-shadow: 1px 1px 0 var(--shadow);
80
80
  }
81
81
  .coin-btn:focus-visible {
82
82
  outline: 2px solid var(--ink);
package/src/components/CredMenu.svelte CHANGED
@@ -88,13 +88,14 @@
88
88
  height: 32px;
89
89
  font-size: 14px;
90
90
  line-height: 1;
91
- border: 1px solid var(--ink);
92
- background: var(--ink);
93
- color: var(--bg);
91
+ border: 1px solid var(--fill);
92
+ background: var(--fill);
93
+ color: var(--fill-ink);
94
94
  cursor: pointer;
95
95
  }
96
96
  .cred:hover {
97
97
  background: var(--bg);
98
+ border-color: var(--edge);
98
99
  color: var(--ink);
99
100
  }
100
101
  /* Auth states: ok = muted green, warn = tasteful yellow, error = outline-only. */
@@ -120,6 +121,7 @@
120
121
  }
121
122
  .cred.error {
122
123
  background: var(--bg);
124
+ border-color: var(--edge);
123
125
  color: var(--ink);
124
126
  }
125
127
  .cred-dropdown {
@@ -146,11 +148,11 @@
146
148
  cursor: pointer;
147
149
  }
148
150
  .cred-row:hover {
149
- background: var(--ink);
150
- color: var(--bg);
151
+ background: var(--fill);
152
+ color: var(--fill-ink);
151
153
  }
152
154
  .cred-row:hover .cred-state {
153
- color: var(--bg);
155
+ color: var(--fill-ink);
154
156
  }
155
157
  .dot {
156
158
  flex: none;
package/src/components/DashboardView.svelte CHANGED
@@ -233,8 +233,8 @@
233
233
  .banner.error {
234
234
  background: var(--bg-card);
235
235
  color: var(--ink);
236
- border: 2px solid var(--ink);
237
- box-shadow: 4px 4px 0 var(--ink);
236
+ border: 2px solid var(--edge);
237
+ box-shadow: 4px 4px 0 var(--shadow);
238
238
  }
239
239
  .empty {
240
240
  text-align: center;
package/src/components/FolderBrowser.svelte CHANGED
@@ -295,7 +295,7 @@
295
295
  .overlay {
296
296
  position: fixed;
297
297
  inset: 0;
298
- background: color-mix(in srgb, var(--ink) 50%, transparent);
298
+ background: var(--scrim);
299
299
  display: grid;
300
300
  place-items: center;
301
301
  padding: 24px;
@@ -308,15 +308,15 @@
308
308
  flex-direction: column;
309
309
  background: var(--bg-card);
310
310
  overflow: hidden;
311
- box-shadow: 8px 8px 0 var(--ink);
311
+ box-shadow: 8px 8px 0 var(--shadow);
312
312
  }
313
313
  .head {
314
314
  display: flex;
315
315
  align-items: center;
316
316
  justify-content: space-between;
317
317
  padding: 14px 18px;
318
- border-bottom: 1px solid var(--ink);
319
- background: var(--ink);
318
+ border-bottom: 1px solid var(--fill);
319
+ background: var(--fill);
320
320
  }
321
321
  .head h2 {
322
322
  margin: 0;
@@ -325,7 +325,7 @@
325
325
  font-size: 17px;
326
326
  text-transform: uppercase;
327
327
  letter-spacing: 0.06em;
328
- color: var(--bg);
328
+ color: var(--fill-ink);
329
329
  }
330
330
  .x {
331
331
  display: inline-flex;
@@ -333,7 +333,7 @@
333
333
  border: none;
334
334
  background: none;
335
335
  cursor: pointer;
336
- color: var(--bg);
336
+ color: var(--fill-ink);
337
337
  }
338
338
  .x:hover {
339
339
  opacity: 0.7;
@@ -353,7 +353,7 @@
353
353
  }
354
354
  .mode-toggle {
355
355
  display: flex;
356
- border: 1px solid var(--ink);
356
+ border: 1px solid var(--edge);
357
357
  }
358
358
  .mode-btn {
359
359
  display: inline-flex;
@@ -371,11 +371,11 @@
371
371
  cursor: pointer;
372
372
  }
373
373
  .mode-btn + .mode-btn {
374
- border-left: 1px solid var(--ink);
374
+ border-left: 1px solid var(--edge);
375
375
  }
376
376
  .mode-btn.active {
377
- background: var(--ink);
378
- color: var(--bg);
377
+ background: var(--fill);
378
+ color: var(--fill-ink);
379
379
  }
380
380
  .clone {
381
381
  padding: 12px 18px;
@@ -425,18 +425,19 @@
425
425
  text-transform: uppercase;
426
426
  letter-spacing: 0.05em;
427
427
  padding: 8px 14px;
428
- border: 1px solid var(--ink);
429
- background: var(--ink);
430
- color: var(--bg);
428
+ border: 1px solid var(--fill);
429
+ background: var(--fill);
430
+ color: var(--fill-ink);
431
431
  cursor: pointer;
432
432
  white-space: nowrap;
433
433
  }
434
434
  .clone-btn:hover:not(:disabled) {
435
435
  background: var(--bg-card);
436
+ border-color: var(--edge);
436
437
  color: var(--ink);
437
438
  }
438
439
  .clone-btn:disabled {
439
- opacity: 0.4;
440
+ opacity: var(--dim);
440
441
  cursor: not-allowed;
441
442
  }
442
443
  .crumbs {
@@ -490,11 +491,12 @@
490
491
  color: var(--ink);
491
492
  }
492
493
  .recent-pick:hover {
493
- background: var(--ink);
494
- color: var(--bg);
494
+ background: var(--fill);
495
+ color: var(--fill-ink);
495
496
  }
496
- .recent-pick:hover .recent-path {
497
- color: var(--bg);
497
+ .recent-pick:hover .recent-path,
498
+ .recent-pick:hover .icon {
499
+ color: var(--fill-ink);
498
500
  }
499
501
  .recent-text {
500
502
  display: flex;
@@ -534,8 +536,8 @@
534
536
  opacity: 1;
535
537
  }
536
538
  .recent-x:hover {
537
- color: var(--bg);
538
- background: var(--ink);
539
+ color: var(--fill-ink);
540
+ background: var(--fill);
539
541
  }
540
542
  .recent-toggle {
541
543
  margin: 4px 6px 2px;
@@ -603,11 +605,11 @@
603
605
  color: var(--ink);
604
606
  }
605
607
  .row .nav:hover {
606
- background: var(--ink);
607
- color: var(--bg);
608
+ background: var(--fill);
609
+ color: var(--fill-ink);
608
610
  }
609
611
  .row .nav:hover .icon {
610
- color: var(--bg);
612
+ color: var(--fill-ink);
611
613
  }
612
614
  .ename {
613
615
  overflow: hidden;
@@ -622,12 +624,12 @@
622
624
  letter-spacing: 0.08em;
623
625
  color: var(--ink);
624
626
  background: transparent;
625
- border: 1px solid var(--ink);
627
+ border: 1px solid var(--edge);
626
628
  padding: 2px 5px;
627
629
  }
628
630
  .row .nav:hover .badge {
629
- color: var(--bg);
630
- border-color: var(--bg);
631
+ color: var(--fill-ink);
632
+ border-color: var(--fill-ink);
631
633
  }
632
634
  .pick-inline {
633
635
  font-family: var(--font-mono);
@@ -636,14 +638,15 @@
636
638
  text-transform: uppercase;
637
639
  letter-spacing: 0.05em;
638
640
  padding: 6px 10px;
639
- border: 1px solid var(--ink);
641
+ border: 1px solid var(--edge);
640
642
  background: var(--bg-card);
641
643
  cursor: pointer;
642
644
  color: var(--ink);
643
645
  }
644
646
  .pick-inline:hover {
645
- background: var(--ink);
646
- color: var(--bg);
647
+ background: var(--fill);
648
+ border-color: var(--fill);
649
+ color: var(--fill-ink);
647
650
  }
648
651
  .muted {
649
652
  padding: 18px;
@@ -672,8 +675,7 @@
672
675
  .warn code {
673
676
  font-family: var(--font-mono);
674
677
  font-size: 0.9em;
675
- /* Intentional white glint to lift the code chip off the amber warn bg — not a palette token. */
676
- background: rgba(255, 255, 255, 0.35);
678
+ background: var(--warn-chip);
677
679
  border: 1px solid var(--warn-line);
678
680
  padding: 0 5px;
679
681
  }
@@ -683,7 +685,7 @@
683
685
  justify-content: space-between;
684
686
  gap: 12px;
685
687
  padding: 14px 18px;
686
- border-top: 1px solid var(--ink);
688
+ border-top: 1px solid var(--edge);
687
689
  }
688
690
  .hint {
689
691
  font-family: var(--font-mono);
@@ -697,18 +699,19 @@
697
699
  text-transform: uppercase;
698
700
  letter-spacing: 0.06em;
699
701
  padding: 9px 16px;
700
- border: 1px solid var(--ink);
701
- background: var(--ink);
702
- color: var(--bg);
702
+ border: 1px solid var(--fill);
703
+ background: var(--fill);
704
+ color: var(--fill-ink);
703
705
  cursor: pointer;
704
706
  white-space: nowrap;
705
707
  }
706
708
  .primary:hover:not(:disabled) {
707
709
  background: var(--bg-card);
710
+ border-color: var(--edge);
708
711
  color: var(--ink);
709
712
  }
710
713
  .primary:disabled {
711
- opacity: 0.4;
714
+ opacity: var(--dim);
712
715
  cursor: not-allowed;
713
716
  }
714
717
  .icon {
package/src/components/HealthBox.svelte CHANGED
@@ -103,7 +103,7 @@
103
103
  }
104
104
  /* Container isn't running yet: gray the panel out instead of loading it. */
105
105
  .healthwrap.dim {
106
- opacity: 0.5;
106
+ opacity: var(--dim-panel);
107
107
  }
108
108
  .health {
109
109
  background: var(--bg-card);
@@ -127,15 +127,16 @@
127
127
  .box {
128
128
  width: 16px;
129
129
  height: 16px;
130
- border: 1px solid var(--ink);
130
+ border: 1px solid var(--edge);
131
131
  display: inline-flex;
132
132
  align-items: center;
133
133
  justify-content: center;
134
134
  color: var(--ink);
135
135
  }
136
136
  .box.ok {
137
- background: var(--ink);
138
- color: var(--bg);
137
+ background: var(--fill);
138
+ border-color: var(--fill);
139
+ color: var(--fill-ink);
139
140
  }
140
141
  .box.bad {
141
142
  background: transparent;