This commit is contained in:
2026-01-20 13:16:32 +01:00
parent e6a9465195
commit 70d32c7d56
14 changed files with 439 additions and 63 deletions

View File

@@ -2,7 +2,7 @@ function GenerateStyle() {
return (
<style>
{`
.idm_picture__module{
.idm_picture__module{
--photo-prod-box-bg: #fff;
--photo-prod-box-text: #111;
--photo-prod-point-shadow: rgba(255,255,255,.5);
@@ -123,8 +123,8 @@ PULSE ANIMATION
max-width: var(--photo-prod-box-width);
position: absolute;
width: max-content;
box-shadow: 0px 0px 10px 1px #000;
box-shadow: 0px 0px 10px 1px #000;
}
.product_info::before{
content: "";
@@ -135,7 +135,6 @@ PULSE ANIMATION
z-index: -1;
}
.product_info{
bottom: var(--photo-prod-box-dir-t, auto);
top: var(--photo-prod-box-dir-b, auto);
@@ -151,6 +150,115 @@ PULSE ANIMATION
left: var(--photo-prod-box-dir-l-before, auto);
}
.product_info[data-dir-single-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-single-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-single-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-single-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
}
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
}
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
}
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
@media (max-width: 756px) {
.product_info[data-dir-mobile-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-mobile-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-mobile-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-mobile-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-mobile-x="l"][data-dir-mobile-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
}
}
@media (min-width: 757px) and (max-width: 978px) {
.product_info[data-dir-tablet-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-tablet-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-tablet-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-tablet-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
}
@media (min-width: 979px) {
.product_info[data-dir-desktop-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-desktop-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-desktop-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-desktop-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-desktop-x="l"][data-dir-desktop-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
}
}
.idm_picture__product .product_info .product_name{
font-size: 1.6em;
color: var(--photo-prod-box-text);
@@ -165,17 +273,15 @@ PULSE ANIMATION
}
@media(min-width: 979px){
.idm_picture__product:hover .product_info{
:is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
display: flex;
animation: idmShowUp 0.3s ease-in-out;
/* opacity: 1; */
}
}
@media(max-width: 978px){
.idm_picture__product.--show .product_info{
display: flex;
animation: idmShowUp 0.3s ease-in-out;
/* opacity: 1; */
}
}