/* ============================================================
CMS ProtecMedia / Milenium Designer — Skin moderno del editor
Complemento sobre https://cdn2.unitel.bo/v25/css/cms.min.css
Autor de la customización: Dany
OBJETIVO
Modernizar el "chrome" visual del editor (bordes, toppers,
iconos, separación entre componentes) SIN tocar el rol
estructural de las clases que usa el motor de Drag & Drop
(AUI/YUI3) ni el layout de Liferay.
⚠️ CLASES QUE NUNCA SE RENOMBRAN / ELIMINAN / RESTRUCTURAN:
.portlet-boundary .portlet-dropzone .portlet-column
.aui-dd-drop .aui-dd-draggable .portlet-static
.portlet-title .portlet-title-default .portlet-topper
.empty .portlet-nested-portlets
Estas son leídas directamente por el objeto de configuración
que arma Liferay.Layout.init({dragNodes, dropContainer,
dropNodes, invalid, handles, nestedPortletId, ...}) y por los
shims que genera YUI DD en cada operación de arrastre. Todo lo
de abajo solo les agrega estilos (color, sombra, radio,
spacing) — nunca cambia su display/position de forma que
rompa los cálculos de getXY()/offsetWidth() que usa el DnD.
============================================================ */
:root{
--mln-editor-bg-canvas: #f4f5f7;
--mln-editor-border: #d8dbe0;
--mln-editor-accent: #3C56B5; /* mismo azul del indicador nativo de drag&drop, por consistencia */
--mln-editor-accent-soft: #eef1fb;
--mln-editor-group-accent: #0f8a5f; /* verde distintivo para "agrupadores" (nested portlets) */
--mln-editor-group-soft: #eafbf2;
--mln-editor-topper-bg: #1c2333;
--mln-editor-topper-bg-group:#0d3b2d;
--mln-editor-radius: 8px;
--mln-editor-gap: 14px;
--mln-editor-icon-size: 22px;
}
/* Lienzo general: aire y fondo neutro para que cada portlet se
perciba como una tarjeta independiente, no como un bloque pegado */
.signed-in.controls-visible #main-content{
background: var(--mln-editor-bg-canvas);
padding: var(--mln-editor-gap);
}
/* -------------------------------------------------------------
1) SEPARACIÓN CLARA ENTRE PORTLETS
No se toca .portlet-boundary como selector estructural del DnD,
solo se le agregan estilos.
------------------------------------------------------------- */
.signed-in.controls-visible .portlet-boundary{
border: 1px solid var(--mln-editor-border);
border-radius: var(--mln-editor-radius);
background: #fff;
box-shadow: 0 1px 2px rgba(16,24,40,.04);
margin-bottom: var(--mln-editor-gap);
overflow: hidden; /* redondea visualmente el topper; no afecta hit-testing del DnD */
transition: box-shadow .15s ease, border-color .15s ease;
}
.signed-in.controls-visible .portlet-dropzone > .portlet-boundary:last-child{
margin-bottom: 0;
}
.signed-in.controls-visible .portlet-boundary:hover{
box-shadow: 0 2px 8px rgba(16,24,40,.10);
border-color: #b9bfca;
}
/* -------------------------------------------------------------
2) TOPPER (barra de título + iconos) modernizado
------------------------------------------------------------- */
.signed-in.controls-visible .portlet-topper{
background: var(--mln-editor-topper-bg);
padding: 6px 10px;
gap: 10px;
}
.signed-in.controls-visible .portlet-topper .portlet-title{
font-size: 11px;
letter-spacing: .06em;
font-weight: 700;
color: #e7e9ee;
cursor: move; /* refuerza el affordance: acá se agarra para arrastrar (handle real de Liferay.Layout) */
}
.signed-in.controls-visible .portlet-topper .portlet-topper-toolbar .iconsAll{
gap: 8px;
}
.signed-in.controls-visible .portlet-topper .portlet-topper-toolbar .icon{
width: var(--mln-editor-icon-size);
height: var(--mln-editor-icon-size);
background-color: rgba(255,255,255,.92);
border-radius: 50%;
padding: 4px;
box-sizing: border-box;
transition: transform .12s ease, background-color .12s ease;
}
.signed-in.controls-visible .portlet-topper .portlet-topper-toolbar a:hover .icon{
background-color: #fff;
transform: scale(1.08);
}
/* -------------------------------------------------------------
3) NESTED PORTLET = "AGRUPADOR"
Acento verde + controles a la IZQUIERDA. Los selectores usan
combinadores DIRECTOS (>) para no afectar el topper de los
portlets de contenido que viven dentro de sus slots (esos
deben mantener sus íconos a la derecha, comportamiento default).
------------------------------------------------------------- */
.signed-in.controls-visible .portlet-nested-portlets{
border: 1.5px solid var(--mln-editor-group-accent);
background: var(--mln-editor-group-soft);
box-shadow: none;
}
.signed-in.controls-visible .portlet-nested-portlets > .td-portlet > .portlet > .portlet-topper{
background: var(--mln-editor-topper-bg-group);
flex-direction: row-reverse; /* controles a la izquierda, SOLO en el topper propio del agrupador */
justify-content: flex-end;
}
.signed-in.controls-visible .portlet-nested-portlets > .td-portlet > .portlet > .portlet-topper .portlet-title{
margin-left: 4px;
}
/* Insignia decorativa "AGRUPADOR" antes del título — puramente CSS
(::before), no toca el HTML ni requiere cambios en el DOM */
.signed-in.controls-visible .portlet-nested-portlets > .td-portlet > .portlet > .portlet-topper .portlet-title-text::before{
content: "AGRUPADOR ·";
color: #7fe0b8;
margin-right: 6px;
font-weight: 600;
}
/* El contenido interno del agrupador (donde viven los slots) recibe
aire adicional para separar visualmente "grupo" vs "contenido" */
.signed-in.controls-visible .portlet-nested-portlets .portlet-content{
padding: var(--mln-editor-gap);
background: #fff;
}
/* -------------------------------------------------------------
4) DROPZONES VACÍAS (donde se suelta contenido nuevo)
No se toca .empty como marcador que usa JS; solo estilos.
------------------------------------------------------------- */
.signed-in.controls-visible .portlet-column.nopadding{
border: 1.5px dashed #b9bfca;
border-radius: var(--mln-editor-radius);
background: repeating-linear-gradient(
45deg, #fafbfc, #fafbfc 10px, #f2f3f5 10px, #f2f3f5 20px
);
padding: 20px;
min-height: 40px;
transition: border-color .15s ease, background .15s ease;
}
/* Feedback mientras se arrastra algo encima (clases que agrega
dinámicamente dd-ddm-drop.js) */
.signed-in.controls-visible .dd-drop-active-valid{
border-color: var(--mln-editor-accent) !important;
background: var(--mln-editor-accent-soft) !important;
}
.signed-in.controls-visible .dd-drop-active-invalid{
border-color: #d64545 !important;
background: #fdeceb !important;
}
/* -------------------------------------------------------------
5) NOTAS DE COMPATIBILIDAD (documentación, no CSS ejecutable)
-------------------------------------------------------------
- `overflow:hidden` en .portlet-boundary es seguro: solo recorta
visualmente el topper redondeado. Los shims de YUI DD se
generan dinámicamente sobre el nodo real en cada drag y no
dependen del overflow del contenedor para el hit-testing.
- El handle de arrastre configurado por Liferay.Layout sigue
siendo `.portlet-title` / `.portlet-title-default` — no se
tocó esa clase como selector, solo su tipografía/color.
- Los íconos de cerrar/configurar van envueltos en , y
está en la lista `_invalidsDefault` de YUI DD (dd-drag.js) —
por eso un click en los íconos NUNCA dispara un drag. No hace
falta agregar pointer-events ni stopPropagation extra.
- Si en el futuro un nested queda DENTRO de otro nested (nested
anidado), el selector de la sección 3 (con combinador directo
`>`) seguirá aplicando solo al topper propio de cada nivel,
no se "filtra" a los hijos — pero conviene probarlo si aparece
ese caso real.
============================================================ */