@canopy-iiif/app 1.10.3 → 1.10.4

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.
@@ -183,7 +183,7 @@
183
183
  padding: 0;
184
184
  display: flex;
185
185
  flex-direction: row;
186
- overflow-y: scroll;
186
+ overflow: hidden;
187
187
  }
188
188
 
189
189
  &__modal-panel {
@@ -195,6 +195,8 @@
195
195
  gap: 1.6181rem;
196
196
  flex-grow: 1;
197
197
  z-index: 1;
198
+ max-height: 100vh;
199
+ overflow-y: auto;
198
200
  }
199
201
 
200
202
  &__modal-actions {
@@ -274,20 +276,40 @@ body[data-canopy-gallery-locked="1"] {
274
276
  overflow: hidden;
275
277
  }
276
278
 
277
- .canopy-gallery--popup-medium {
278
- .canopy-gallery__modal-scrim {
279
- min-height: 100vh;
279
+ .canopy-gallery--popup-window {
280
+ .canopy-gallery__modal {
280
281
  display: flex;
281
282
  align-items: center;
282
283
  justify-content: center;
283
- padding: clamp(1.5rem, 3vw, 3rem);
284
- background: rgba(15, 23, 42, 0.85);
284
+ padding: clamp(1.25rem, 4vw, 2.5rem);
285
+ background: #0006;
286
+ }
287
+
288
+ .canopy-gallery__modal-scrim {
289
+ width: 80vw;
290
+ height: calc(100vh - 4rem);
291
+ max-width: 80vw;
292
+ max-height: calc(100vh - 4rem);
293
+ border-radius: var(--canopy-gallery-radius, 1rem);
294
+ box-shadow: 0 25px 80px rgba(15, 23, 42, 0.4);
295
+ background: var(--color-gray-50);
296
+ overflow: hidden;
297
+ display: flex;
298
+ }
299
+
300
+ .canopy-gallery__modal-actions {
301
+ width: clamp(5rem, 18vw, 8rem);
302
+ max-width: clamp(5rem, 18vw, 8rem);
303
+ background: var(--color-gray-100);
304
+ border-right: 1px solid var(--color-gray-200);
285
305
  }
286
306
 
287
307
  .canopy-gallery__modal-panel {
288
- width: min(960px, calc(100% - clamp(2rem, 4vw, 4rem)));
289
- height: auto;
290
- max-height: min(90vh, 960px);
308
+ width: auto;
309
+ height: 100%;
310
+ max-width: none;
311
+ flex: 1 1 auto;
312
+ background: transparent;
291
313
  }
292
314
  }
293
315
 
@@ -3490,7 +3490,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
3490
3490
  padding: 0;
3491
3491
  display: flex;
3492
3492
  flex-direction: row;
3493
- overflow-y: scroll;
3493
+ overflow: hidden;
3494
3494
  }
3495
3495
  .canopy-gallery__modal-panel {
3496
3496
  position: relative;
@@ -3501,6 +3501,8 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
3501
3501
  gap: 1.6181rem;
3502
3502
  flex-grow: 1;
3503
3503
  z-index: 1;
3504
+ max-height: 100vh;
3505
+ overflow-y: auto;
3504
3506
  }
3505
3507
  .canopy-gallery__modal-actions {
3506
3508
  display: flex;
@@ -3570,18 +3572,36 @@ body[data-canopy-gallery-locked="1"] {
3570
3572
  overflow: hidden;
3571
3573
  }
3572
3574
 
3573
- .canopy-gallery--popup-medium .canopy-gallery__modal-scrim {
3574
- min-height: 100vh;
3575
+ .canopy-gallery--popup-window .canopy-gallery__modal {
3575
3576
  display: flex;
3576
3577
  align-items: center;
3577
3578
  justify-content: center;
3578
- padding: clamp(1.5rem, 3vw, 3rem);
3579
- background: rgba(15, 23, 42, 0.85);
3579
+ padding: clamp(1.25rem, 4vw, 2.5rem);
3580
+ background: rgba(0, 0, 0, 0.4);
3581
+ }
3582
+ .canopy-gallery--popup-window .canopy-gallery__modal-scrim {
3583
+ width: 80vw;
3584
+ height: calc(100vh - 4rem);
3585
+ max-width: 80vw;
3586
+ max-height: calc(100vh - 4rem);
3587
+ border-radius: var(--canopy-gallery-radius, 1rem);
3588
+ box-shadow: 0 25px 80px rgba(15, 23, 42, 0.4);
3589
+ background: var(--color-gray-50);
3590
+ overflow: hidden;
3591
+ display: flex;
3580
3592
  }
3581
- .canopy-gallery--popup-medium .canopy-gallery__modal-panel {
3582
- width: min(960px, 100% - clamp(2rem, 4vw, 4rem));
3583
- height: auto;
3584
- max-height: min(90vh, 960px);
3593
+ .canopy-gallery--popup-window .canopy-gallery__modal-actions {
3594
+ width: clamp(5rem, 18vw, 8rem);
3595
+ max-width: clamp(5rem, 18vw, 8rem);
3596
+ background: var(--color-gray-100);
3597
+ border-right: 1px solid var(--color-gray-200);
3598
+ }
3599
+ .canopy-gallery--popup-window .canopy-gallery__modal-panel {
3600
+ width: auto;
3601
+ height: 100%;
3602
+ max-width: none;
3603
+ flex: 1 1 auto;
3604
+ background: transparent;
3585
3605
  }
3586
3606
 
3587
3607
  .canopy-gallery--popup-full .canopy-gallery__modal-scrim {