/** * TheriansHub — Media (rtMedia) en el perfil * * Viste la pestaña Media del perfil (/members/x/media/, rtMedia) como cuadrícula * tipo Instagram en paleta oscura. Solo fotos. Se encola SOLO en esa pestaña * (ver inc/enqueue.php, gate bp_is_current_component('media')). * * Scope: body.th-bp-internal #buddypress (no filtra fuera del shell). EXCEPCIÓN * documentada: el lightbox Magnific Popup se inyecta como hijo de , FUERA * de #buddypress, así que esas reglas se scopean a body.th-bp-internal .mfp-* * (igual contenido al shell; además este archivo solo carga en la pestaña Media). * * Solo tokens semánticos, cero hex. El overlay de hover necesita transparencia: * se deriva de --color-bg con color-mix() (no se hardcodea ningún color). */ /* ---- Contenedor: reset sobre el shell ---- */ body.th-bp-internal #buddypress .rtmedia-container { max-width: none; padding: 0; background: transparent; } /* ---- Lista → cuadrícula de 3 columnas ---- */ body.th-bp-internal #buddypress .rtmedia-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; } /* ---- Cada celda: cuadrada ---- */ body.th-bp-internal #buddypress .rtmedia-list-item { width: auto; /* anula el width % de rtMedia (la cuadrícula controla el tamaño) */ margin: 0; /* anula el margin de rtMedia */ float: none; /* anula el float de rtMedia */ list-style: none; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-2); } /* El cuadrado vive en la PROPIA imagen (aspect-ratio), no en una cadena de height:100% — esa cadena no resuelve contra el aspect-ratio del

y la imagen colapsaba a su altura natural (hueco oscuro). El solo necesita ancho (display:block para anular el inline de rtMedia y que el width resuelva). */ body.th-bp-internal #buddypress .rtmedia-list-item .rtmedia-list-item-a { display: block; width: 100%; } body.th-bp-internal #buddypress .rtmedia-list-item .rtmedia-item-thumbnail { width: 100%; } body.th-bp-internal #buddypress .rtmedia-list-item .rtmedia-item-thumbnail img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; } /* Cuadrícula limpia: sin título ni acciones bajo cada foto */ body.th-bp-internal #buddypress .rtmedia-list-item .rtmedia-item-title, body.th-bp-internal #buddypress .rtmedia-list-item .rtmedia-item-actions { display: none; } /* ---- Hover: overlay oscuro suave + icono "ver" ---- */ /* Overlay derivado de --color-bg con color-mix (transparencia sin hex). */ body.th-bp-internal #buddypress .rtmedia-list-item::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 55%, transparent); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; /* no bloquear el que abre el lightbox */ } /* Icono ojo (Dashicons, ya cargado por rtMedia → sin assets extra). */ body.th-bp-internal #buddypress .rtmedia-list-item::before { content: "\f177"; /* dashicons-visibility */ font-family: dashicons; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--color-text); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 1; } body.th-bp-internal #buddypress .rtmedia-list-item:hover::after, body.th-bp-internal #buddypress .rtmedia-list-item:hover::before { opacity: 1; } /* ---- Área de subida → botón verde de marca ---- */ body.th-bp-internal #buddypress .rtm-upload-button-wrapper button, body.th-bp-internal #buddypress .rtmedia-container .rtmedia-upload-input, body.th-bp-internal #buddypress .rtmedia-container .start-media-upload { background: var(--color-brand); color: var(--color-text); /* near-white en dark; legible sobre verde, sin hex */ border: 1px solid var(--color-brand); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-family: var(--font-sans); cursor: pointer; } body.th-bp-internal #buddypress .rtm-upload-button-wrapper button:hover, body.th-bp-internal #buddypress .rtmedia-container .rtmedia-upload-input:hover, body.th-bp-internal #buddypress .rtmedia-container .start-media-upload:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); } /* ---- Lightbox (Magnific Popup) — base en paleta. Scope body.th-bp-internal porque el popup vive fuera de #buddypress (hijo de ). ---- */ body.th-bp-internal .mfp-bg { background: var(--color-bg); opacity: 0.95; } body.th-bp-internal .mfp-figure img.mfp-img { border-radius: var(--radius-md); } body.th-bp-internal .mfp-close, body.th-bp-internal .mfp-counter, body.th-bp-internal .mfp-arrow { color: var(--color-text); } body.th-bp-internal .mfp-title { color: var(--color-text-muted); }