/*
* A FILE SHOWN AS A WEB OR A PRESENTATION (brief AP, 2026-10-07) - the stylesheet of core/vk/showcase.php. His words: "Quisiera poder marcar en el item que el elemento es una web o una presentacion, entonces se
* aplicaria un diseño asi en el espacio de la imagen del thumbail del grid (fotos)." and, for the videos, "que sea un gif igual en movimiento pero con el frame añadido en thumbnial. pero si lo puedes solucionar
* en html mejor".
*
* His three pictures are one treatment: the first screen of a website shown as a ROUNDED CARD, a soft shadow under it, floating in the middle of a BACKDROP of its own colour - even margins (about 9 % at the sides,
* 20 % above and below), no browser bar, no device. A file marked in its edit window carries, on the link of its picture (parts/category_items.php), the classes
* vkFr vkFrW a web: the TOP of the preview, cropped to a landscape card (VK_SHOW_RATIO 1.65, object-fit: cover, object-position: top) - a tall full-page capture shows its first screen
* vkFr vkFrP a presentation: the WHOLE preview, in its own ratio (contain), and the card hugs it
* vkFr vkFrD a document (2026-10-12): the sheet - a PDF's first page, any document's preview - from 30 px under the frame's top, taller than the frame, so its foot is cut
* and --vk-fr-bg, the backdrop's colour (made once from the preview, or the hub's colour: core/vk/showcase.php). Nothing is a new picture: it is the card's own ![]()
- a video's moving GIF too - moved into the frame.
*
* - THE BOX is the picture's box (.SeeDetail) as the card has always had it, with the backdrop for its background and a ratio of its own, 6 : 5, so it is as tall as it is at the first paint and
* before a picture has arrived - Packery lays the grid out once, and «load more» and a body swapped by vk_nav.js cannot move it. It keeps the card's size rule (never taller than half the window).
* - THE CARD is the ![]()
, placed by the box's own size: container query units (cqw, cqh) where there are any, so it keeps its 1.65 : 1 and its margins at every size of card and a very tall box (half of the
* window is the ceiling) only makes the margins bigger at the sides; percentages where there are none. Its corners and its shadow grow with the card (3.1 % of its width: 14 px on the 450 px of his pictures).
* - THE SLIDES of a card with versions (brief AI, view/js/vk_slides.js) change the picture INSIDE the frame: each layer is the backdrop with its own framed ![]()
.
* - the box keeps its backdrop in the light and in the dark look: it is the picture's colour, not the app's, so the two rules that paint the picture's box in dark (view/css/vk_dark.css) lose to it here.
*/
/* ---------------------------------------------------------------- the box */
.containernews .capsaitem .SeeDetail.vkFr{
display: block;
position: relative;
width: 100%;
aspect-ratio: 6 / 5;
max-height: 50vh;
min-height: 0;
padding: 0;
overflow: hidden;
border-radius: 6px; /* halved 2026-10-10 (was 12px), his "reduce the border radius ... the ones with website looking thumbnail item", "si, la mitad" */
background: var(--vk-fr-bg, #1f1f26) !important; /* his: the backdrop is the picture's colour, in the light look and in the dark one (vk_dark.css paints the box with a token) */
}
/* ---------------------------------------------------------------- the card: the picture, and the slides' pictures */
.containernews .capsaitem .SeeDetail.vkFr > img,
.containernews .capsaitem .SeeDetail.vkFr .vkSl-fimg{
position: absolute;
z-index: 1;
float: none;
margin: auto;
inset: 20% 9%; /* where there are no container units (below): the margins of his pictures */
width: 82%;
height: 60% !important;
max-width: none;
max-height: none;
object-fit: cover;
object-position: 50% 0; /* the top: a tall capture shows its first screen */
border: 0;
border-radius: 4px !important; /* !important: .grupoa img says 0 (style.css); halved 2026-10-10 (was 8px) */
background: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, .38), 0 1px 4px rgba(0, 0, 0, .28) !important; /* !important: .png_background img says none (style.css) */
transform: none !important; /* the grid zooms every picture on hover (style.css): here the card lifts a little instead */
transition: transform .2s ease-in-out;
}
.containernews .capsaitem .SeeDetail.vkFr:hover > img,
.containernews .capsaitem .SeeDetail.vkFr:hover .vkSl-fimg{ transform: scale(1.035) !important; }
/* a presentation: the whole slide, in its own ratio, inside the same frame; the card is the slide, so its corners and shadow hug it */
.containernews .capsaitem .SeeDetail.vkFrP > img,
.containernews .capsaitem .SeeDetail.vkFrP .vkSl-fimg{
inset: 0;
width: auto;
height: auto !important;
max-width: 82%;
max-height: 60%;
object-fit: contain;
}
/* A DOCUMENT (2026-10-12, his values and his words: "implementa este tipo de estilo por si queremos aplicarlo a un pdf o a cualquier topo de documento que lo requierea. en el thumnail. Debe de ser
aplicable como "presentacion "website" dentro del detalle de edicion del item" - «Se muestra como: … Documento» in the file's edit window): the sheet in its own ratio, 86 % of the frame's width at most,
122 % of its height at most - taller than the frame, whose overflow cuts its foot - 30 px under the frame's top, centred across. */
.containernews .capsaitem .SeeDetail.vkFrD > img,
.containernews .capsaitem .SeeDetail.vkFrD .vkSl-fimg{
inset: 0;
width: auto;
height: auto !important;
max-width: 86%;
max-height: 122%;
margin-top: 30px;
object-fit: contain;
}
/* container query units: the card's size from the box's own, so it holds its ratio and its margins on a card of any width, and on a box that the window's half has made shorter than 6 : 5 */
@supports (width: 1cqw){
.containernews .capsaitem .SeeDetail.vkFr{ container-type: size; }
.containernews .capsaitem .SeeDetail.vkFr > img,
.containernews .capsaitem .SeeDetail.vkFr .vkSl-fimg{
/* his values (2026-10-09, "implementa esto adecuadamente", with 4px and 18px struck out of the clamp): the corner from the card's width alone, no shadow, no
background (was clamp(4px, 3.1cqw, 18px) and a two-layer shadow) */
border-radius: 2.55cqw !important; /* his 5.1cqw halved, 2026-10-10 ("si, la mitad") */
box-shadow: none !important;
background: none !important;
}
.containernews .capsaitem .SeeDetail.vkFrW > img,
.containernews .capsaitem .SeeDetail.vkFrW .vkSl-fimg{
inset: 0;
width: min(82cqw, 99cqh);
height: calc(min(82cqw, 99cqh) / 1.65) !important;
}
.containernews .capsaitem .SeeDetail.vkFrP > img,
.containernews .capsaitem .SeeDetail.vkFrP .vkSl-fimg{
max-width: 82cqw;
max-height: 60cqh;
}
.containernews .capsaitem .SeeDetail.vkFrD > img,
.containernews .capsaitem .SeeDetail.vkFrD .vkSl-fimg{
max-width: 86cqw;
max-height: 122cqh;
margin-top: 30px;
}
}
/* ---------------------------------------------------------------- the widest card: the capture 15 % larger
His words, 2026-10-10: "At the same time increte its image a 15% more by when is occuping the widest size he is permited to" - and, asked which size: "solo la de 2/3". On a card
two thirds of the row wide (.WiDerItemPlus) the capture grows 15 % in its frame, still centred: 82 % x 60 % of the box -> 94.3 % x 69 %; a presentation and a wide capture
by the same factor. The other sizes keep theirs. */
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFr:not(.vkFrP):not(.vkFrW):not(.vkFrD) > img,
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFr:not(.vkFrP):not(.vkFrW):not(.vkFrD) .vkSl-fimg{
inset: 15.5% 2.85%;
width: 94.3%;
height: 69% !important;
}
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFrP > img,
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFrP .vkSl-fimg{
max-width: 94.3%;
max-height: 69%;
}
@supports (width: 1cqw){
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFrW > img,
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFrW .vkSl-fimg{
width: min(94.3cqw, 113.85cqh); /* both limits x1.15: on this card it is the frame's HEIGHT that binds (max-height 50vh) */
height: calc(min(94.3cqw, 113.85cqh) / 1.65) !important;
}
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFrP > img,
.containernews .capsaitem.WiDerItemPlus .SeeDetail.vkFrP .vkSl-fimg{
max-width: 94.3cqw;
max-height: 69cqh;
}
}
/* ---------------------------------------------------------------- THE CARD'S WEB AS A TAB ON ITS PICTURE (2026-10-12)
His words, with the grid marked at each picture's foot: "No tiene que ser un icono de la fila, tiene que haber un boton ... El boton tiene que ser como un aleron . es un rectangulo situado donde
ves. las juntas de abajo a la ixquierda y de arriba a la derecha estan recondeadas unidas al borde del contenedor ... utilizes las esquinas reodndeadas que tienes en el header" (core/vk/file_web.php
vk_fw_card_tab_html, view/js/vk_fwtab.js). A tab of the card's own colour set into the picture's bottom right corner, as if the card came up into the picture: its top left corner round, and its two
joints - with the picture's foot on its left, with the picture's right edge above it - rounded inward, the way the header's corners meet the panel (a quarter circle cut out of a small square of the
card's colour). Any card that draws a picture: framed or not, the panel's and the landing's. */
.containernews .capsaitem .SeeDetail:has(> .vkFwTab){ position: relative; }
.containernews .capsaitem .SeeDetail > .vkFwTab{
--vk-fwtab-bg: var(--vk-surface, #ffffff);
position: absolute; right: 0; bottom: 0; z-index: 4;
display: inline-flex; align-items: center; gap: 7px; height: 34px; max-width: 72%; padding: 0 12px 0 14px;
border-top-left-radius: 12px; background: var(--vk-fwtab-bg);
font-family: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
color: var(--vk-text, #16161a); cursor: pointer; transform: none !important;
}
.containernews .capsaitem .SeeDetail > .vkFwTab::before,
.containernews .capsaitem .SeeDetail > .vkFwTab::after{
content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
background: radial-gradient(circle at 0 0, transparent 11.5px, var(--vk-fwtab-bg) 12px);
}
.containernews .capsaitem .SeeDetail > .vkFwTab::before{ left: -12px; bottom: 0; } /* the joint with the picture's foot, on its left */
.containernews .capsaitem .SeeDetail > .vkFwTab::after{ right: 0; bottom: 100%; } /* the joint with the picture's right edge, above it */
.vkFwTab .fa{ font-size: 13px; color: var(--vk-hl, var(--vk-violet, #6e1fd1)); }
.vkFwTab-host{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vkFwTab-go{ color: var(--vk-soft, #5f5e6b); transition: transform .15s ease, color .15s ease; }
.vkFwTab:hover .vkFwTab-go, .vkFwTab:focus-visible .vkFwTab-go{ color: var(--vk-hl, var(--vk-violet, #6e1fd1)); transform: translate(2px, -2px); }
.vkFwTab:focus-visible{ outline: 2px solid var(--vk-hl, var(--vk-violet, #6e1fd1)) !important; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce){ .vkFwTab-go{ transition: none; } }
/* ---------------------------------------------------------------- the versions' slides, inside the frame */
.containernews .capsaitem .SeeDetail.vkFr .vkSl-pic{ background: var(--vk-fr-bg, #1f1f26) !important; } /* each layer is the backdrop again: it hides the card's own picture until it has faded out */
@media (prefers-reduced-motion: reduce){
.containernews .capsaitem .SeeDetail.vkFr > img, .containernews .capsaitem .SeeDetail.vkFr .vkSl-fimg{ transition: none; }
}
/* ---------------------------------------------------------------- the choice in the file's edit window: «Se muestra como: Normal · Web · Presentación»
The window's own rules (style.css: .modalcommon.co label floats every label at the full width, .modalcommon input[type=...]) are answered here, one by one, so three pills sit on one line. */
.modalcommon .vkShowAs{ float: left; width: 100%; margin: 4px 0 14px 0; }
.modalcommon .vkShowAs-row{ display: flex; flex-wrap: wrap; gap: 6px; clear: both; width: 100%; }
.modalcommon.co .vkShowAs .vkShowAs-opt{
position: relative; float: none; width: auto; margin: 0; cursor: pointer;
font-weight: 700; font-size: 12px; line-height: 1;
}
.vkShowAs-opt input[type="radio"]{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vkShowAs-opt span{
display: inline-block; padding: 9px 15px; border-radius: 999px;
color: var(--vk-text, #16161a); background: var(--vk-field, #efeef4);
box-shadow: inset 0 0 0 1px transparent;
transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.vkShowAs-opt:hover span{ background: var(--vk-fieldh, #e9e8ee); }
.vkShowAs-opt input:checked + span{ color: var(--vk-brand-ink, #ffffff); background: var(--vk-brand, #0f52ff); }
.vkShowAs-opt input:focus-visible + span{ box-shadow: 0 0 0 2px var(--vk-surface, #ffffff), 0 0 0 4px var(--vk-brand, #0f52ff); }
.vkShowAs-hint{ display: block; clear: both; margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }