@gemboss/gem-framework 0.18.13 → 0.18.15

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.
@@ -4,7 +4,7 @@
4
4
  width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;
5
5
  border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);
6
6
  }
7
- .gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }
7
+ .gem-popup-shell__dialog::backdrop { background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
8
8
  .gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }
9
9
  .gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }
10
10
  .gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -27,7 +27,7 @@
27
27
  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel {
28
28
  width: min(420px, 86%); margin: var(--gem-space-xl) 0; background: var(--gem-color-background); border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-sm);
29
29
  }
30
- .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }
30
+ .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--gem-color-scrim, #000) 35%, transparent), color-mix(in srgb, var(--gem-color-scrim, #000) 60%, transparent)); }
31
31
  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,
32
32
  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }
33
33
  .gem-popup-shell__close {
@@ -74,10 +74,10 @@
74
74
  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }
75
75
  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }
76
76
  }
77
- :root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }
77
+ :root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
78
78
  :root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }
79
79
  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }
80
- :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }
80
+ :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
81
81
  @media (min-width: 750px) {
82
82
  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }
83
83
  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }
@@ -1204,7 +1204,7 @@ a {
1204
1204
  .gem-cart-drawer__overlay {
1205
1205
  position: fixed;
1206
1206
  inset: 0;
1207
- background: rgba(0, 0, 0, 0.36);
1207
+ background: color-mix(in srgb, var(--gem-color-scrim, #000) 36%, transparent);
1208
1208
  }
1209
1209
  @keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }
1210
1210
  @keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }