@aurea-uds/core 0.8.10 → 0.8.11
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.
- package/dist/aurea.css +20 -0
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -1866,6 +1866,26 @@ img,svg { display:block; }
|
|
|
1866
1866
|
.image-contain { object-fit:contain; background:transparent; }
|
|
1867
1867
|
.image-broken { display:grid; place-items:center; color:var(--muted-foreground); }
|
|
1868
1868
|
|
|
1869
|
+
/* VÍDEO INCORPORADO (achado N-10, 24/09/2026). A caixa é a mesma superfície do `.media-player` —
|
|
1870
|
+
raio de cartão, borda e o fundo `--media-canvas` —, então um trailer do YouTube e um vídeo
|
|
1871
|
+
próprio saem com a mesma moldura na mesma tela. A proporção vem INLINE do componente, como no
|
|
1872
|
+
`.image`; aqui fica só o que não varia. O `<iframe>` é absoluto porque a altura é da caixa, não
|
|
1873
|
+
dele. A fachada é um `<button>` que cobre a caixa inteira: o alvo de clique é o vídeo todo, e o
|
|
1874
|
+
anel de foco é o `:focus-visible` global da casa. A pastilha de tocar é amarela porque é a ação
|
|
1875
|
+
da tela — o mesmo combinado do `Card variant="brand"`: amarelo só para pedir ação. O anel de
|
|
1876
|
+
`--media-scrim` em volta dela não é enfeite: a capa é do consumidor, e numa capa amarela a
|
|
1877
|
+
pastilha sumia — medido na primeira imagem mostrada ao Victor, em 24/09/2026. */
|
|
1878
|
+
.media-embed { display:grid; gap:var(--space-2); min-inline-size:0; }
|
|
1879
|
+
.media-embed-frame { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--media-canvas); }
|
|
1880
|
+
.media-embed-frame>iframe { position:absolute; inset:0; inline-size:100%; block-size:100%; border:0; }
|
|
1881
|
+
.media-embed-facade { position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; border-radius:inherit; background:var(--media-canvas); color:var(--media-foreground); cursor:pointer; }
|
|
1882
|
+
.media-embed-facade>img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
|
|
1883
|
+
.media-embed-play { position:relative; display:grid; place-items:center; inline-size:var(--control-h-lg); block-size:var(--control-h-lg); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-foreground); box-shadow:0 0 0 var(--space-1) var(--media-scrim),var(--shadow-lg); }
|
|
1884
|
+
.media-embed-facade:hover .media-embed-play { transform:scale(1.06); }
|
|
1885
|
+
.media-embed-link { display:inline-flex; align-items:center; gap:var(--space-1); justify-self:start; color:var(--muted-foreground); font-size:var(--text-sm); }
|
|
1886
|
+
.media-embed-link:hover { color:var(--foreground); }
|
|
1887
|
+
.media-embed-link .icon { --step-icon:var(--icon-sm); }
|
|
1888
|
+
|
|
1869
1889
|
/* GALERIA (PLANO-1.0, item L2). A grade se adapta sozinha — `auto-fill` com um mínimo, e não um
|
|
1870
1890
|
número de colunas —, porque quem sabe quanta largura existe é o contêiner, não o componente.
|
|
1871
1891
|
`--gallery-min` é a válvula, no idioma do `--carousel-slide` e do `--qr-size`.
|