Versión inicial del plugin FP Genocide Maps (v1.5.2)
CPT geep_map + shortcode [geep_maps] para la sección Architecture of Genocide de la home: acordeón exclusivo con imagen por mapa, lightbox con botón de compartir y enlaces #map-<slug>. Soporte WPML (EN/AR) con herencia de la imagen del idioma original y CSS RTL.
This commit is contained in:
@@ -0,0 +1,262 @@
|
||||
/*
|
||||
* FP Genocide Maps — front-end styles.
|
||||
*
|
||||
* Replicates 1:1 the CSS Divi 5 generated for the original "texto mapa" row
|
||||
* (row_3 / column_5 / column_6 / image_2 / toggle_0..7 on page 1834), so the
|
||||
* section looks identical to the hand-built Divi version it replaces.
|
||||
* Color/radius values reference the site's Divi global variables with their
|
||||
* current values as fallbacks.
|
||||
*/
|
||||
|
||||
/* --- Layout: replicates row_3's two flex columns (14/24 + 2/5, 2% gap). --- */
|
||||
.geep-maps {
|
||||
display: flex;
|
||||
column-gap: 2%;
|
||||
row-gap: 10px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.geep-maps-col-map {
|
||||
width: calc(58.3333% - 2% * 0.41667); /* .et_flex_column_14_24 with 2% gap */
|
||||
}
|
||||
|
||||
.geep-maps-col-toggles {
|
||||
width: calc(40% - 2% * 0.6); /* .et_flex_column_2_5 with 2% gap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
padding-left: 10px; /* column_6 */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.geep-maps {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.geep-maps-col-map,
|
||||
.geep-maps-col-toggles {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Map image: replicates the Divi image module (image_2). --- */
|
||||
.geep-maps-image {
|
||||
display: flex;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.geep-maps-image-wrap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: var(--gvid-4up6riitl2, 40px);
|
||||
}
|
||||
|
||||
.geep-map-img {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.geep-map-img.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.geep-map-img.is-active.is-shown {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --- Toggles: replicates the 8 Divi toggle modules (toggle_0..7). --- */
|
||||
.geep-toggle {
|
||||
background-color: var(--gcid-primary-color, #d96c5d);
|
||||
padding: 10px 2px 0 5px;
|
||||
border: 0 solid #333;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.geep-toggle.geep-toggle--first {
|
||||
padding: 0 2px 2px 5px; /* toggle_0 had slightly different padding */
|
||||
}
|
||||
|
||||
.geep-toggle-title {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0 0 0 40px;
|
||||
word-wrap: break-word;
|
||||
/* Same line spacing as the intro paragraph above the section. */
|
||||
line-height: var(--gvid-pfs7jbw9ep, 1.4em);
|
||||
}
|
||||
|
||||
.geep-toggle--close .geep-toggle-title {
|
||||
color: var(--gcid-mpn8tovm4t, #fff5f0) !important;
|
||||
}
|
||||
|
||||
.geep-toggle--open .geep-toggle-title {
|
||||
color: var(--gcid-heading-color, #424242) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Checkbox-style marker: identical size and position in both states so
|
||||
* nothing shifts when a map is selected; the open one is filled white.
|
||||
*/
|
||||
.geep-toggle-title::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--gcid-secondary-color, #ffffff);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.geep-toggle--open .geep-toggle-title::before {
|
||||
background: var(--gcid-secondary-color, #ffffff);
|
||||
}
|
||||
|
||||
.geep-toggle-content {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
/* Align the excerpt with the title text (which sits after the marker). */
|
||||
padding-left: 40px;
|
||||
color: var(--gcid-secondary-color, #ffffff);
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.geep-toggle--close .geep-toggle-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Keep content visible while the open/close animation is running. */
|
||||
.geep-toggle .geep-toggle-content.geep-animating {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.geep-toggle-content p:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- RTL (Arabic): mirror icon and paddings. --- */
|
||||
.rtl .geep-maps-col-toggles {
|
||||
padding-left: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.rtl .geep-toggle-title {
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
|
||||
.rtl .geep-toggle-title::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rtl .geep-toggle-content {
|
||||
padding-left: 0;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* --- Lightbox: click the map to view it larger + share its URL. --- */
|
||||
.geep-maps-image-wrap {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.geep-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999999;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3vh 3vw;
|
||||
}
|
||||
|
||||
.geep-lightbox.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.geep-lightbox-noscroll,
|
||||
.geep-lightbox-noscroll body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.geep-lightbox-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(20, 20, 20, 0.85);
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.geep-lightbox-inner {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
max-width: 94vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.geep-lightbox-img {
|
||||
max-width: 100%;
|
||||
max-height: calc(94vh - 60px);
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.geep-lightbox-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.geep-lightbox-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--gcid-mpn8tovm4t, #fff5f0);
|
||||
color: var(--gcid-heading-color, #424242);
|
||||
border: 0;
|
||||
border-radius: 40px;
|
||||
padding: 10px 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.geep-lightbox-btn:hover {
|
||||
background: var(--gcid-secondary-color, #ffffff);
|
||||
}
|
||||
|
||||
.geep-lightbox-close {
|
||||
padding: 10px 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.geep-lightbox-toast {
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--gcid-heading-color, #424242);
|
||||
color: var(--gcid-secondary-color, #ffffff);
|
||||
border-radius: 40px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Reference in New Issue
Block a user