/* THE TREE'S «LIMPIO» AND «RECOMENDADO» LOOKS (brief AR, 2026-11-07; core/vk/tree_look.php says what each is, view/js/vk_treerec.js draws the rail and the mirror). EVERY RULE HERE IS SCOPED TO data-vk-look: with «Actual» (or on a person's tree, which has no such attribute) nothing below reaches the page, so the tree draws as it always did. Built in the app's own look - its accent (--vk-hl, the dark look's green; the light look's violet), its tokens, its fonts - and in both looks. */ /* ================================================================ LIMPIO: the whole tree redrawn clean (and the panel's tree of «Recomendado») */ /* ONE ICON PER KIND OF ROW (his «mapa mental»): the hubs and groups keep their round mark (their logo or colour, core/vk/hub_dot.php) and tell apart by shape and size - a group a rounded square, a hub a circle, a hub inside a group a smaller one -; a section, a subsection and a folder each draw their own glyph where the tree drew the same folder three times. The old glyph is hidden (never taken out of the row: the tree's sync rewrites rows from the server's) and the new one is drawn by the row line's ::before, in the soft ink. */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]){ --vkRecI-section: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); --vkRecI-sub: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 17a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.9a2 2 0 0 1-1.69-.9l-.81-1.2a2 2 0 0 0-1.67-.9H8a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2Z'/%3E%3Cpath d='M2 8v11a2 2 0 0 0 2 2h14'/%3E%3C/svg%3E"); --vkRecI-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E"); --vkRec-ac: var(--vk-hl, var(--vk-violet, #6e1fd1)); --vkRec-ac-soft: color-mix(in srgb, var(--vkRec-ac) 16%, transparent); --vkRec-ac-line: color-mix(in srgb, var(--vkRec-ac) 55%, transparent); --vkRec-guide: color-mix(in srgb, var(--vk-line, #3d3d4a) 85%, transparent); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--section, .vkNode--sub) > .vkRow > .vkRow-link > .vkRow-line > .vkI:first-child, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--folder > .vkRow .vkRow-icon > .vkI{ display: none; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--section, .vkNode--sub) > .vkRow > .vkRow-link > .vkRow-line::before, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--folder > .vkRow .vkRow-icon::before{ content: ""; flex: 0 0 auto; width: 16px; height: 16px; background-color: var(--vk-soft, #b5b4c0); -webkit-mask: var(--vkRecI-section) center / contain no-repeat; mask: var(--vkRecI-section) center / contain no-repeat; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--sub > .vkRow > .vkRow-link > .vkRow-line::before{ -webkit-mask-image: var(--vkRecI-sub); mask-image: var(--vkRecI-sub); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--folder > .vkRow .vkRow-icon::before{ -webkit-mask-image: var(--vkRecI-folder); mask-image: var(--vkRecI-folder); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--folder > .vkRow .vkRow-icon{ display: flex; align-items: center; } /* the round marks: a group a rounded square, a hub a circle, a hub in a group a smaller circle */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--group > .vkRow .vkDot{ width: 20px; height: 20px; border-radius: 6px; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--group > .vkRow .vkDot--img img{ border-radius: 0; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--hub > .vkRow .vkDot{ width: 20px; height: 20px; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids .vkNode--hub > .vkRow .vkDot{ width: 16px; height: 16px; } /* names plain: the status is the dot at the end, not the colour of the name (the group's name was the accent) */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--group > .vkRow .vkRow-name{ color: var(--vk-text, #f1f0f5); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--group > .vkRow .vkRow-name, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode--hub > .vkRow .vkRow-name{ font-weight: 600; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--section, .vkNode--sub, .vkNode--folder) > .vkRow .vkRow-name{ font-weight: 500; } /* THE PLACE YOU ARE IN AND ITS PATH (his «camino»): the row a band and a bar in the accent, the rows above it - up to the hub - in the accent's ink, and their guide lines too */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode.is-current > .vkRow{ background: var(--vkRec-ac-soft); box-shadow: inset 3px 0 0 var(--vkRec-ac); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode.is-current > .vkRow .vkRow-name{ color: var(--vk-text, #f1f0f5); font-weight: 700; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode.is-path > .vkRow .vkRow-name{ color: var(--vkRec-ac); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode.is-current > .vkRow .vkRow-line::before{ background-color: var(--vkRec-ac); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode.is-path > .vkRow .vkRow-line::before{ background-color: var(--vkRec-ac); } /* THE GUIDE LINES: a thin line from each child to its parent, with an elbow into the child's row */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids{ position: relative; padding-left: 20px; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids > .vkNode::before{ content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 1px; background: var(--vkRec-guide); pointer-events: none; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids > .vkNode:last-child::before{ bottom: auto; height: 19px; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids > .vkNode::after{ content: ""; position: absolute; left: -9px; top: 18px; width: 9px; height: 1px; background: var(--vkRec-guide); pointer-events: none; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids > .vkNode.is-path::before, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids > .vkNode.is-path::after, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode-kids > .vkNode.is-current::after{ background: var(--vkRec-ac-line); } /* NO STRAIGHT GUIDE LINES IN THE PANEL (his «quita los conectores rectos grises, todos», 2026-11-08, brief MF): the green wires from the rail are the only connectors; the level is said by the position alone (the look «limpio» keeps its lines) */ .vkTree[data-vk-look="recomendado"] .vkNode-kids > .vkNode::before, .vkTree[data-vk-look="recomendado"] .vkNode-kids > .vkNode::after{ content: none; } /* THE DRAG DOTS, THE GLOBE AND THE «⋯» ONLY WHEN THE POINTER IS ON THE ROW (the grip only exists in Manual) */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow-grip{ opacity: 0; transition: opacity .12s ease; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow:hover > .vkRow-grip, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow-grip:focus-visible{ opacity: 1; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow .vkWebGlobe{ opacity: 0; transition: opacity .12s ease; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow:hover .vkWebGlobe, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow .vkWebGlobe:focus-visible{ opacity: 1; } /* a private section's padlock is the ring at the row's end now; the «shared» mark stays */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkTag--icon:not(.vkTag--shared){ display: none; } /* THE STATUS AS A SMALL DOT AT THE END OF THE ROW: public section or hub with its web on = green; private section = a ring; hub with its web off = amber */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode > .vkRow .vkRow-line::after{ content: none; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; margin-left: 2px; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--section, .vkNode--sub)[data-vk-public="1"] > .vkRow .vkRow-line::after, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--hub, .vkNode--group)[data-vk-web="1"][data-vk-onweb="1"] > .vkRow .vkRow-line::after{ content: ""; background: var(--vk-ok, #5fd2a1); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--section, .vkNode--sub)[data-vk-public="0"] > .vkRow .vkRow-line::after{ content: ""; border: 1.5px solid var(--vk-soft, #b5b4c0); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode:is(.vkNode--hub, .vkNode--group)[data-vk-web="1"][data-vk-onweb="0"] > .vkRow .vkRow-line::after{ content: ""; background: var(--vk-warn, #f4c25e); } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow-count{ margin-left: auto; } /* the key to the dots, under the tree (built by view/js/vk_treerec.js) */ .vkTree-legend{ display: none; } .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkTree-legend{ display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 0 0 auto; padding: 9px 14px 10px; margin: 0 8px; border-top: 1px solid var(--vk-line, #3d3d4a); font-size: 11px; color: var(--vk-soft, #b5b4c0); } .vkTree-legend span{ display: inline-flex; align-items: center; gap: 6px; } .vkTree-legend i{ width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; background: var(--vk-ok, #5fd2a1); } .vkTree-legend i.is-ring{ background: none; border: 1.5px solid var(--vk-soft, #b5b4c0); } .vkTree-legend i.is-amber{ background: var(--vk-warn, #f4c25e); } /* the mirror's light on a row (view/js/vk_treerec.js): above the tree's own dimming of the rows */ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkNode.is-mirror > .vkRow{ opacity: 1 !important; background: var(--vkRec-ac-soft); box-shadow: inset 0 0 0 2px var(--vkRec-ac); } @media (prefers-reduced-motion: reduce){ .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow-grip, .vkTree:is([data-vk-look="limpio"], [data-vk-look="recomendado"]) .vkRow .vkWebGlobe{ transition: none; } } /* the card the pointer's row stands for (and the other way): its light. The folder is drawn as a shape, so its light follows the shape; a hub's card is a box */ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) .containernews .capsaitem.vkFolder.is-mirror > .vkfd, html.vkRec:not(#vkLk) .containernews .capsaitem.vkFolder.is-mirror > .vkfd{ --vkfd-line: var(--vk-hl, var(--vk-violet, #6e1fd1)); stroke-width: 2.2; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--vk-hl, var(--vk-violet, #6e1fd1)) 65%, transparent)); } html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) .containernews .capsaitem.vkFolder.is-mirror > .vkfd :is(path, rect, line, polyline, circle):not(.vkfd-tint), html.vkRec:not(#vkLk) .containernews .capsaitem.vkFolder.is-mirror > .vkfd :is(path, rect, line, polyline, circle):not(.vkfd-tint){ stroke: var(--vk-hl, var(--vk-violet, #6e1fd1)); stroke-width: 2.2; } html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) .containernews .capsaitem.vkFolder.is-mirror .vkFold-shape, html.vkRec:not(#vkLk) .containernews .capsaitem.vkFolder.is-mirror .vkFold-shape{ filter: drop-shadow(0 0 9px color-mix(in srgb, var(--vk-hl, var(--vk-violet, #6e1fd1)) 55%, transparent)); } /* a look without the notched frame draws the old shape */ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) .vkCard--hub.is-mirror, html.vkRec:not(#vkLk) .vkCard--hub.is-mirror{ box-shadow: 0 0 0 2px var(--vk-hl, var(--vk-violet, #6e1fd1)); } /* «Ir al original» and «‹ Volver a …» in the head of a section linked into another hub (core/vk/tree_look.php): small keys in the head's row of actions */ .vkHead-orig, .vkHead-back{ display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; white-space: nowrap; text-decoration: none !important; border: 1px solid var(--vk-line, #3d3d4a); background: transparent; color: var(--vk-text, #f1f0f5) !important; font: 600 12.5px 'Montserrat', sans-serif; cursor: pointer; } .vkHead-orig .vkI{ width: 15px; height: 15px; color: var(--vk-hl, var(--vk-violet, #6e1fd1)); } .vkHead-orig:hover, .vkHead-back:hover{ border-color: var(--vk-hl, var(--vk-violet, #6e1fd1)); } .vkHead-back{ background: color-mix(in srgb, var(--vk-hl, var(--vk-violet, #6e1fd1)) 14%, transparent); border-color: color-mix(in srgb, var(--vk-hl, var(--vk-violet, #6e1fd1)) 45%, transparent); } /* ================================================================ RECOMENDADO: rail + panel (from 1126 px; under it the tree is the drawer it always was) */ @media (min-width: 1126px){ /* the rail takes the nav's left 60 px; the panel (search, chips, tools, the open hub's tree) keeps the rest of the width the tree always had */ .vkTree[data-vk-look="recomendado"]{ padding-left: 66px; --vkRailW: 66px; } /* the rail was 60 px; 10 % more (his words: «dale un 10% mas de width a la barra vertical de los hubs padre») - the marks keep their size and stay centred */ .vkTree[data-vk-look="recomendado"] .vkRail{ position: absolute; left: 0; top: 0; bottom: 0; width: var(--vkRailW); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 8px; background: var(--vk-surface, #1e1e24); border-right: 1px solid var(--vk-line-soft, #30303a); } html[data-theme="dark"] .vkTree[data-vk-look="recomendado"] .vkRail{ border-right-color: transparent; } /* the first paint: until the script has drawn the rail, the panel waits (and shows itself anyway after a second, should the script never come) */ .vkTree[data-vk-look="recomendado"]:not([data-vk-rec="1"]) :is(.vkTree-top, .vkTree-list){ visibility: hidden; animation: vkRecShow 0s 1.2s forwards; } @keyframes vkRecShow{ to{ visibility: visible; } } .vkRail-key{ flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--vk-soft, #b5b4c0); transition: background .12s ease, color .12s ease; } .vkRail-key:hover{ background: var(--vk-field, #30303a); color: var(--vk-text, #f1f0f5); } .vkRail-key:focus-visible, .vkRail-hub:focus-visible{ outline: 2px solid var(--vkRec-ac, var(--vk-hl, #6e1fd1)); outline-offset: 2px; } .vkRail-toggle[aria-pressed="true"]{ color: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); } .vkRail-toggle[aria-pressed="true"] rect{ fill: color-mix(in srgb, var(--vkRec-ac, var(--vk-hl, #6e1fd1)) 25%, transparent); } /* THE HOUSE (brief MF, 2026-11-08, view/js/vk_treerec.js): the rail's first key - the administrator's - a link to the front page, drawn as a rail key; it replaced the view switch of brief VT (the logo is the switch now, view/css/vk_appframe.css). The map's own round key of the tool row (.vkTree-map, view/css/vk_map.css) is not shown while the rail has the house: the logo carries it (the looks without a rail keep it). */ .vkTree[data-vk-look="recomendado"] .vkRail > .vkRail-home{ position: relative; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--vk-soft, #b5b4c0); text-decoration: none !important; } .vkTree[data-vk-look="recomendado"] .vkRail > .vkRail-home:hover{ border: 0; background: var(--vk-field, #30303a); color: var(--vk-text, #f1f0f5); } .vkTree[data-vk-look="recomendado"] .vkRail > .vkRail-home svg.vkI{ width: 20px; height: 20px; stroke-width: 2; } .vkTree[data-vk-look="recomendado"]:has(> .vkRail > .vkRail-home) .vkTree-tools > .vkTree-map{ display: none; } /* THE MAP'S SEARCH KEY (brief SB, 2026-11-10; view/js/vk_treerec.js mapSearch): it was the house; it is drawn in the map only - in the library no key and no room for one. With the rail's names showing, the panel's own field is lifted over the rail's first row beside it (left, top and width written by the script) */ html.vkAF:not(.vkMapOn) .vkTree[data-vk-look="recomendado"] .vkRail > .vkRail-msearch{ display: none; } html.vkAF.vkMapOn .vkTree[data-vk-look="recomendado"].is-msearch .vkTree-search{ position: absolute; z-index: 6; margin: 0; box-sizing: border-box; } .vkRail-sep{ flex: 0 0 auto; width: 30px; height: 1px; margin: 2px 0 4px; background: var(--vk-line, #3d3d4a); } .vkRail-hubs{ flex: 1 1 auto; width: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 10px; scrollbar-width: none; } .vkRail-hubs::-webkit-scrollbar{ display: none; } .vkRail-hub{ position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none !important; } .vkRail-mark{ width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--vk-dot, #4a4954); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font: 700 13px/1 'Montserrat', sans-serif; letter-spacing: .02em; transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease; } .vkRail-hub.is-group .vkRail-mark{ border-radius: 12px; } .vkRail-mark.has-logo{ background: var(--vk-dot, #f4f3f8); } .vkRail-mark img{ display: block; width: 100%; height: 100%; object-fit: cover; } .vkRail-ini{ font-style: normal; pointer-events: none; } .vkRail-hub:hover .vkRail-mark{ transform: scale(1.06); } .vkRail-hub.is-active .vkRail-mark{ box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24), 0 0 0 4px var(--vkRec-ac, var(--vk-hl, #6e1fd1)); } .vkRail-hub.is-active::before{ content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); } .vkRail-hub.is-mirror .vkRail-mark{ box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24), 0 0 0 4px var(--vkRec-ac, var(--vk-hl, #6e1fd1)); } .vkRail-hub:is(.is-dropto, .addHightlight) .vkRail-mark{ box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24), 0 0 0 4px var(--vkRec-ac, var(--vk-hl, #6e1fd1)); transform: scale(1.14); } /* a card or a row held over a mark: it would go into that hub */ .vkRail-hub.is-dim .vkRail-mark{ opacity: .28; } .vkRail-hub.is-hit .vkRail-mark{ box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24), 0 0 0 4px #ffe27a; } .vkRail-n{ position: absolute; right: -5px; bottom: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--vk-surface, #1e1e24); color: var(--vk-soft, #b5b4c0); box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24); font: 700 10px/1 'Montserrat', sans-serif; } /* THE OPEN HUB'S NAME CENTRED ON ITS MARK (his words: «centra el label en el centro, verticalmente»): with the figures shown the name sits over them and the pair is centred; with none (or an empty line) the name alone takes both rows of the head and is centred on the mark; a long name wraps to two lines (more is cut) and stays centred */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-name{ white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.25; } .vkTree[data-vk-look="recomendado"][data-vk-meta="0"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-name, .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow:has(.vkRow-meta:empty) .vkRow-name{ grid-row: 1 / 3; align-self: center; } /* the order's options, beside its key (view/js/vk_treerec.js) */ .vkRailMenu{ position: fixed; z-index: 1200; min-width: 160px; padding: 6px; display: flex; flex-direction: column; background: var(--vk-surface, #1e1e24); border: 1px solid var(--vk-line, #3d3d4a); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); font-family: 'Montserrat', sans-serif; color: var(--vk-text, #f1f0f5); } .vkRailMenu-title{ font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vk-soft, #b5b4c0); padding: 8px 10px 6px; } .vkRailMenu-item{ display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 9px; background: transparent; color: inherit; padding: 8px 10px; font: 500 13px 'Montserrat', sans-serif; cursor: pointer; } .vkRailMenu-item:hover, .vkRailMenu-item:focus-visible{ background: color-mix(in srgb, var(--vk-hl, var(--vk-violet, #6e1fd1)) 16%, transparent); outline: none; } .vkRailMenu-item[aria-checked="true"]{ font-weight: 700; } .vkRailMenu-item[aria-checked="true"]::after{ content: "✓"; margin-left: auto; color: var(--vk-hl, var(--vk-violet, #6e1fd1)); } /* the pinned copy of the active mark (view/js/vk_treerec.js), at the edge of the rail's marks it left, in its active look */ .vkRail-pin{ position: absolute; left: 50%; margin-left: -20px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; z-index: 4; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s .22s; } .vkRail-pin.is-on{ opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; } .vkRail-pin .vkRail-mark{ box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24), 0 0 0 4px var(--vkRec-ac, var(--vk-hl, #6e1fd1)), 0 0 0 9px var(--vk-surface, #1e1e24); } .vkRail-pin:focus-visible{ outline: 2px solid var(--vkRec-ac, var(--vk-hl, #6e1fd1)); outline-offset: 4px; } .vkRail-pin:hover .vkRail-mark{ transform: scale(1.06); } /* THE MAP'S RAIL CAN SHOW THE HUBS' NAMES (brief MF phase 3, 2026-11-09; his «coloca un agarrador para que si se clica que descubra los nombres de los hubs padres y el sidebar se haga mas ancho. Que la muesca sea toggleable»): the frame's left notch (view/js/vk_appframe.js) toggles it; the rail then takes --vkSideW (its width, set by view/js/vk_treerec.js; 240 px by default) on the frame's own clock (an ease-out cubic, 280 ms, as the morph), and every hub mark keeps the place it had - so the rail's pieces are anchored to the left where they were centred in its 65 px of content (the same place at 66 px, the same place at any width) - with the hub's name beside it, its line centred on the mark's (his «saca la cantidad de hubs ... ya dice el numero en el logo ... el nombre quedar centrado verticalmente perfecto»: the count stays on the mark's badge). Only in the map (html.vkMapOn): the library's rail is always 66 px. */ html.vkAF .vkTree[data-vk-look="recomendado"] .vkRail{ align-items: flex-start; transition: width var(--vkSideT, .28s) cubic-bezier(.215, .61, .355, 1); } html.vkAF .vkTree[data-vk-look="recomendado"] .vkRail > :is(.vkRail-key, .vkRail-home){ margin-left: 11.5px; } html.vkAF .vkTree[data-vk-look="recomendado"] .vkRail > .vkRail-sep{ margin-left: 17.5px; } html.vkAF .vkTree[data-vk-look="recomendado"] .vkRail-hubs{ align-items: flex-start; padding-left: 12.5px; } html.vkAF .vkTree[data-vk-look="recomendado"] .vkRail-pin{ left: 12.5px; margin-left: 0; } html.vkAF .vkTree[data-vk-look="recomendado"].is-sidedrag .vkRail{ transition: none; } html.vkAF.vkMapOn .vkTree[data-vk-look="recomendado"][data-vk-side] .vkRail{ --vkRailW: var(--vkSideW, 240px); } /* on the rail itself: a custom property written on the tree is inherited by its 10 000 rows (18 ms on section 776) */ .vkRail-lbl{ display: none; } html.vkAF.vkMapOn .vkTree[data-vk-look="recomendado"][data-vk-side] .vkRail-hub .vkRail-lbl{ display: flex; flex-direction: column; justify-content: center; position: absolute; left: 52px; top: 0; bottom: 0; width: calc(var(--vkRailW) - 13px - 52px - 26px); min-width: 0; opacity: var(--vkSideK, 1); transition: opacity .2s ease; font-family: 'Montserrat', sans-serif; line-height: 1.2; color: var(--vk-text, #f1f0f5); text-align: left; } .vkRail-lbl b{ display: block; font-weight: 600; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .vkRail-hub:hover .vkRail-lbl b{ color: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); } .vkRail-hub.is-active .vkRail-lbl b, .vkRail-hub.is-mapring .vkRail-lbl b{ color: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); } html.vkAF.vkMapOn.vkSideOn .vkRailTip{ display: none !important; } /* the names are on the rail: the tooltips would say them twice (a class on html, not :has() - an attribute change under html:has() costs 150 ms on section 776) */ /* the map: the rail stands over the map's canvas (z 999) and under the frame's layer (1000) - while it widens the canvas still has its old edge for a moment. It shows only the rail: the panel it folded is clipped away by view/js/vk_appframe.js, which writes the clip on the tree at every drawing of the frame (it must follow the rail's edge as it moves: a custom property for it would be inherited by the tree's 10 000 rows) */ html.vkAF.vkMapOn:not(.vkaf-morph) #vkTree.vkTree[data-vk-look="recomendado"]{ z-index: 1000 !important; } @media (prefers-reduced-motion: reduce){ html.vkAF .vkTree[data-vk-look="recomendado"] .vkRail{ transition: none; } .vkRail-lbl{ transition: none !important; } } /* the wire from the active mark to the open hub's row (view/js/vk_treerec.js): the accent, rounded, over the gap only */ .vkRail-wire{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; fill: none; stroke: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .18s ease; } .vkRail-wire.is-on{ opacity: .95; } .vkRail-wire.is-on.is-cut{ opacity: .4; } .vkTree[data-vk-rail="shut"] .vkRail-wire{ display: none; } /* the node at a branch's end is not drawn on the row the pointer is on, nor on one a card lights (vk_treerec.js dotsRow): that row's own edge is green already (his «en el hover no hace falta que pongas el punto verde porque esta el border verde de al lado») */ .vkRail-wire .vkRw-dot.is-row{ opacity: 0 !important; transition: stroke-opacity .18s ease, opacity .1s ease !important; } /* THE GHOST OF THE HUB THE PANEL LEFT (brief RG, view/js/vk_treerec.js ghostOf): a copy of the old hub's block that stays over its place for the length of the glitch-out, then goes. It wears the tree's own class and attributes so the look's rules reach it; the script sets where it is (fixed, the block's visible rectangle). Nothing in it takes a pointer. It stands over the tree (z 901 > 900) but covers only the block's own rectangle, which begins where the wire ends. */ .vkTree.vkRecGhost[data-vk-look="recomendado"]{ z-index: 901; display: block; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; overflow: hidden; pointer-events: none; } .vkTree.vkRecGhost[data-vk-look="recomendado"] *{ pointer-events: none !important; } /* the rail's tooltip is Bootstrap's own (the dark look's colours are vk_dark.css's); here its room: a long name wraps, a group's «N hubs» goes under it, and the pointer passes through it */ .vkRailTip{ pointer-events: none; z-index: 1100; } .vkRailTip .tooltip-inner{ max-width: 260px; text-align: left; white-space: normal; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.35; padding: 7px 11px; } .vkRailTip .tooltip-inner b{ display: block; font-weight: 700; overflow-wrap: anywhere; } .vkRailTip-sub{ display: block; margin-top: 1px; font-size: 11px; font-weight: 500; opacity: .75; } /* THE PANEL: the search, the chips and the tools a little tighter; only the open hub below them */ .vkTree[data-vk-look="recomendado"] .vkTree-top{ padding: 12px 10px 6px 6px; gap: 8px; } /* the tools on ONE row: the padlock, the figures, fold and the eye, and «Recientes» as a key at its end. «+ Nuevo» and «A–Z | Manual» are keys of the rail now (view/js/vk_treerec.js presses them: they stay in the tree, unseen) and the «Recientes» row of the list is gone with the room it took */ .vkTree[data-vk-look="recomendado"] .vkTree-tools{ flex-wrap: nowrap; } .vkTree[data-vk-look="recomendado"] .vkTree-tools > :is(.vkTree-new, .vkTree-seg){ display: none; } .vkTree[data-vk-look="recomendado"] .vkTree-recent{ display: none; } .vkTree[data-vk-look="recomendado"] .vkTree-tools > :is(.vkTree-lock, .vkTree-meta, .vkTree-fold, .vkTree-filter){ margin-left: 0 !important; height: 32px; } .vkTree[data-vk-look="recomendado"] .vkTree-tools > .vkTree-recentKey{ position: relative; flex: 0 0 auto; margin-left: auto; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--vk-soft-3c3b46, var(--vk-soft, #b5b4c0)); cursor: pointer; } .vkTree[data-vk-look="recomendado"] .vkTree-recentKey:hover{ border-color: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); color: var(--vk-text, #f1f0f5); } .vkTree[data-vk-look="recomendado"] .vkTree-recentKey.is-on{ color: var(--vkRec-ac, var(--vk-hl, #6e1fd1)); background: var(--vkRec-ac-soft, transparent); } .vkTree[data-vk-look="recomendado"] .vkTree-recentKey:focus-visible{ outline: 2px solid var(--vkRec-ac, var(--vk-hl, #6e1fd1)); outline-offset: 2px; } .vkTree-recentDot{ display: none; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 2px var(--vk-surface, #1e1e24); } .vkTree-recentKey.has-news .vkTree-recentDot{ display: block; } .vkTree[data-vk-look="recomendado"] .vkTree-tools > :is(.vkTree-lock, .vkTree-meta, .vkTree-fold){ width: 32px; } .vkTree[data-vk-look="recomendado"] .vkTree-tools > .vkTree-filter{ width: 32px; } .vkTree[data-vk-look="recomendado"] .vkTree-list{ padding-left: 4px; padding-right: 4px; margin-left: 2px; margin-right: 6px; } .vkTree[data-vk-look="recomendado"] .vkTree-label{ display: none; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode:not(.is-railroot){ display: none; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot.is-nolabel, .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkNode.is-path.is-nolabel, .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkNode.is-current.is-nolabel{ display: block; } /* the hub you are in, and the way to the row you are on, are always shown, even when the chips above leave them out */ /* the open hub: its row is the panel's head (a big mark, the name, its figures), and its children below it, always shown */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids{ display: block; padding-left: 14px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow{ min-height: 62px; margin: 2px 0 10px; padding: 6px 4px 6px 8px; border-radius: 14px; background: color-mix(in srgb, var(--vk-field, #30303a) 55%, transparent); opacity: 1 !important; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow > :is(.vkRow-chev, .vkRow-grip){ display: none !important; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow > .vkRow-link{ padding: 4px 4px 4px 0; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-line{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark name end" "mark meta end"; column-gap: 12px; row-gap: 1px; align-items: center; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-line > .vkDot{ grid-area: mark; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-name{ grid-area: name; font-size: 15px; font-weight: 700; align-self: end; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-meta{ grid-area: meta; margin: 0; padding: 0; align-self: start; flex: none; font-size: 11.5px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-line::after{ grid-area: end; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkWebGlobe{ display: none; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-new{ grid-area: mark; align-self: start; justify-self: end; margin: -3px -3px 0 0; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot.is-current > .vkRow{ box-shadow: inset 3px 0 0 var(--vkRec-ac); background: color-mix(in srgb, var(--vk-field, #30303a) 55%, transparent); } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:not(.vkNode--hub):not(.vkNode--group) > .vkRow .vkRow-name{ font-size: 14.5px; font-weight: 700; } /* the round marks of the panel carry the hub's two letters, as the rail's and its card's do (the letters and their ink are set on the row by the script: --vk-ini, --vkRec-ink) */ .vkTree[data-vk-look="recomendado"] .vkNode:is(.vkNode--hub, .vkNode--group) > .vkRow .vkDot:not(.vkDot--img){ display: inline-flex; align-items: center; justify-content: center; color: var(--vkRec-ink, var(--vk-text, #f1f0f5)); font: 700 9.5px/1 'Montserrat', sans-serif; letter-spacing: .02em; } .vkTree[data-vk-look="recomendado"] .vkNode:is(.vkNode--hub, .vkNode--group) > .vkRow .vkDot:not(.vkDot--img)::after{ content: var(--vk-ini, ""); } .vkTree[data-vk-look="recomendado"] .vkNode-kids .vkNode--hub > .vkRow .vkDot{ width: 22px; height: 22px; } .vkTree[data-vk-look="recomendado"] .vkNode-kids .vkNode--hub > .vkRow .vkDot:not(.vkDot--img){ font-size: 8.5px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow .vkDot{ width: 40px; height: 40px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot.vkNode--group > .vkRow .vkDot{ border-radius: 13px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow .vkDot:not(.vkDot--img){ font-size: 14px; } .vkTree[data-vk-look="recomendado"] .vkNode--group:not(.is-railroot) > .vkRow .vkDot{ width: 24px; height: 24px; } /* room for the names (the rail took 60 px of the tree's width): the arrow a little narrower, the levels a little closer, and the «⋯» over the row's end instead of beside it - it only shows on the row the pointer is on */ .vkTree[data-vk-look="recomendado"] .vkRow-chev{ width: 22px; } .vkTree[data-vk-look="recomendado"] .vkNode-kids{ padding-left: 16px; } .vkTree[data-vk-look="recomendado"] .vkRow > .vkRow-more{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; margin: 0; background: var(--vk-field, #30303a); box-shadow: 0 0 0 3px var(--vk-field, #30303a); } .vkTree[data-vk-look="recomendado"] .vkNode.is-current:not(.menu-open) > .vkRow:not(:hover) > .vkRow-more:not(:focus-visible){ opacity: 0; } .vkTree[data-vk-look="recomendado"] .vkRow > .vkRow-link{ padding-right: 6px; } /* the root's own guide line must not start above its first child */ .vkTree[data-vk-look="recomendado"] .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids{ margin-top: -2px; } /* ---------------------------------------------------------------- the panel hidden: only the rail stands; the grid takes the room */ .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]{ pointer-events: none; background: transparent; border-right: 0; clip-path: inset(0 calc(100% - 84px) 0 0); } .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] .vkRail{ pointer-events: auto; } .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] :is(.vkTree-top, .vkTree-list, .vkTree-legend, .vkMenus){ visibility: hidden; pointer-events: none; } /* a menu a rail key or mark opens (right-click, «+») stands over the page: the shut tree's clip and hidden menus' box let go of it while it is open (brief AR2: it was drawn invisible) */ .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]:has(.vkMenu.is-open){ clip-path: none; } .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] .vkMenus:has(.vkMenu.is-open){ visibility: visible; } .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] .vkMenu.is-open{ visibility: visible; pointer-events: auto; } .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]::before{ content: none !important; } /* the body's top-left corner beside the rail: a rounded inverse corner, so it is never a square angle (his «cuando no esta activa, debe de haber el pseudoelemento con la curvatura esa que teniamos antes para que no se vea un angulo tan recto», 2026-11-07); none while the FIRST tab is the active one: then the tab reads as one piece with the body (his «que quite esta curva ... asi se vera la etiqueta inegrada con el body», same day) */ .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] .vkRail::after{ content: ""; position: absolute; left: 100%; top: 0; width: 16px; height: 16px; pointer-events: none; background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--vk-surface, #1e1e24) 16px); } html:not(.vkAF):has(header .vkTabs .vkTab.is-first.is-active) .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] .vkRail::after, html:is(html).vkTabFirst.vkTabFirst.vkTabFirst.vkTabFirst .vkTree[data-vk-look="recomendado"][data-vk-rail="shut"] .vkRail::after{ content: none; } /* (brief LS: as vk_tabs.css) */ /* the column of the page beside the tree takes the width the tree left: from the rail's edge (it began 3 px after the tree, which was calc(16.7% + 78px) wide) */ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]) .contpujador.detailphoto, html.vkRec.vkRecShut:not(#vkLk) .contpujador.detailphoto, html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]) .detailphoto, html.vkRec.vkRecShut:not(#vkLk) .detailphoto{ width: calc(100% - 74px); } /* ... and the float that held the tree's place (it is what the column sits beside: left as it was, the wider column would be pushed under it) */ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]) #loadmenuCats.yyy, html.vkRec.vkRecShut:not(#vkLk) #loadmenuCats.yyy{ width: 66px; } /* ---------------------------------------------------------------- the floating search (the panel hidden): over all hubs and sections, beside the rail */ .vkRailFind{ position: fixed; left: 76px; top: 104px; z-index: 1200; width: 400px; max-width: calc(100vw - 96px); max-height: calc(100vh - 140px); display: flex; flex-direction: column; gap: 6px; padding: 10px; box-sizing: border-box; background: var(--vk-surface, #1e1e24); border: 1px solid var(--vk-line, #3d3d4a); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); font-family: 'Montserrat', sans-serif; color: var(--vk-text, #f1f0f5); } .vkRailFind-box{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; height: 44px; border-radius: 99px; background: var(--vk-field, #30303a); border: 1px solid transparent; color: var(--vk-soft, #b5b4c0); } .vkRailFind-box:focus-within{ border-color: var(--vk-hl, var(--vk-violet, #6e1fd1)); } .vkRailFind-box input{ flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--vk-text, #f1f0f5); font: 500 13.5px 'Montserrat', sans-serif; -webkit-appearance: none; appearance: none; } .vkRailFind-box input::-webkit-search-cancel-button{ display: none; } .vkRailFind-list{ list-style: none; margin: 0; padding: 0; overflow-y: auto; scrollbar-width: thin; } .vkRailFind-it{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .vkRailFind-it.is-on{ background: color-mix(in srgb, var(--vk-hl, var(--vk-violet, #6e1fd1)) 16%, transparent); box-shadow: inset 3px 0 0 var(--vk-hl, var(--vk-violet, #6e1fd1)); } .vkRailFind-mark{ flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--vk-dot, var(--vk-soft, #b5b4c0)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .vkRailFind-it--section .vkRailFind-mark, .vkRailFind-it--sub .vkRailFind-mark, .vkRailFind-it--folder .vkRailFind-mark{ border-radius: 4px; background: var(--vk-soft, #b5b4c0); opacity: .7; } .vkRailFind-it--group .vkRailFind-mark{ border-radius: 5px; } .vkRailFind-t{ display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .vkRailFind-t b{ font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vkRailFind-t i{ font-style: normal; font-size: 11px; color: var(--vk-soft, #b5b4c0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vkRailFind-none{ padding: 12px; font-size: 13px; color: var(--vk-soft, #b5b4c0); } html:not([data-theme="dark"]) .vkRailFind{ box-shadow: 0 18px 44px rgba(30, 20, 60, .2); } /* THE OPEN HUB'S TREE, PROPOSAL 2 (his «Sí, constrúyela», 2026-11-08, brain 6). His words: «La fila donde muestras el icono del hub padre, realmente lo estamos repitiendo ... dejarla como mero titulo. Y los hubs hijos pasaran a tener más importancia» and then «reduce la distancia en izquierda de los logos de los hubs hijos. Coloca el angle de desplegar en la parte derecha de la caja como ultimo elemento de la linea. Haz un poco mas grandes los logos de los hub hijos y las carpetas tambien ... la silueta del frame que utilizamos en nawtus con las muescas muy muy pequeñas como mascara de recorte». 1. The open hub's row (the rail shows its mark already) is a plain title: no box, no mark, no figures - its name small, spaced, in capitals; in the accent while it is the page you are on. */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow, .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot.is-current > .vkRow{ min-height: 0; margin: 0 0 4px; padding: 0 4px 0 24px; background: transparent; box-shadow: none; } /* 24 px: the title starts where the child hubs' logos start (10 px of room + the 14 px of the kids' indent) (his «Alinea el titulo del hub con las imagenes de los hubs hijo») */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkRow > .vkRow-link{ padding: 4px 4px 4px 0; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-line{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name end"; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-line > .vkDot, .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-meta{ display: none; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-new{ grid-area: end; align-self: center; margin: 0; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-name{ font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; align-self: center; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot.is-current:is(.vkNode--hub, .vkNode--group) > .vkRow .vkRow-name{ opacity: 1; color: var(--vkRec-ac); } /* 2. Under it: the unfold angle is the last thing of each row, at its right (the grip stays the drag handle, unseen, over the guide), so the logos come nearer the guide */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkRow > .vkRow-chev{ order: 9; margin-left: 2px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkRow > .vkRow-more{ order: 8; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkRow > .vkRow-grip{ position: absolute; left: 0; top: 0; bottom: 0; width: 10px; opacity: 0; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkRow > .vkRow-link{ order: 1; flex: 1 1 auto; min-width: 0; padding-left: 4px; } /* THE ROOM AT A ROW'S EDGES AND THE LEVELS ALIGNED (his words over the open hub's panel, 2026-11-08, brief MF). «el hub hijo seleccionado tiene que tener mas espacio entre el logo y el borde al hacer hover»: the mark (or icon) of a direct child stands 10 px in, not 4, so the selected row's green edge (3 px) and a lit row's outline have air beside it; the title above (24 px) and the wire's nodes (they are measured on the mark) follow it. «alinea las carpetas a la primera letra de hub hijo»: the sections and folders under a child hub start where its NAME starts: 10 (the room) + 36 (the mark) + 8 (the gap) - 4 (a nested row's own padding) = 50 px. «mueve el boton de los tres puntos a la izquierda un poco, para dejar sitio al angle»: the «...» stands 26 px from the row's end (the arrow's 22 px and 4 of air), so the arrow is a target of its own and takes the click. */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids > .vkNode > .vkRow > .vkRow-link{ padding-left: 10px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids > .vkNode--hub > .vkNode-kids{ padding-left: 50px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkRow > .vkRow-more{ right: 26px; } /* 3. The child hubs: bigger (36 px logos, 15 px names), the logo cut by the NAWTUS frame's own outline with very very small notches - VKFrame.path(36, 36, {notch: 0.07}) (view/js/vk_eframe.js, brief FM), written here once: the logo is always 36 px */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids > .vkNode--hub > .vkRow > .vkRow-link{ padding-top: 7px; padding-bottom: 7px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids > .vkNode--hub > .vkRow .vkRow-line{ height: 36px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids > .vkNode--hub > .vkRow .vkDot{ width: 36px; height: 36px; min-width: 36px; font-size: 12px; border: 0; border-radius: 0; box-shadow: none; clip-path: path('M6 0L9 0C11 0 11 1.4 12.9 1.4L23.1 1.4C25 1.4 25 0 27 0L30 0A6 6 0 0 1 36 6L36 10.3C36 12.3 34.6 12.3 34.6 14.3L34.6 22.7C34.6 24.6 36 24.6 36 26.6L36 30A6 6 0 0 1 30 36L27 36C25.3 36 25.3 34.8 23.7 34.8L12.3 34.8C10.7 34.8 10.7 36 9 36L6 36A6 6 0 0 1 0 30L0 24.1C0 22.5 1.12 22.5 1.12 21L1.12 12.1C1.12 10.6 0 10.6 0 9L0 6A6 6 0 0 1 6 0Z'); } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids > .vkNode--hub > .vkRow .vkRow-name{ font-size: 15px; font-weight: 600; } /* 4. Its sections and folders: a bigger icon (20 px) and name (14 px) */ .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkNode:is(.vkNode--section, .vkNode--sub) > .vkRow > .vkRow-link > .vkRow-line::before, .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkNode--folder > .vkRow .vkRow-icon::before{ width: 20px; height: 20px; } .vkTree[data-vk-look="recomendado"]:not(.is-searching) .vkTree-nodes > .vkNode.is-railroot > .vkNode-kids .vkNode:is(.vkNode--section, .vkNode--sub, .vkNode--folder) > .vkRow .vkRow-name{ font-size: 14px; } } /* THE HEADER WITH THE PANEL HIDDEN (his words, over his mockup of the hidden panel: «haz este layout cuando la sidebar esta pegada. Ha de ser igual! 100% fiel.» and «solo en el primer boton»): the logo's round mark comes over the rail's column (centred on it, 30 px), and the FIRST tab stands at the rail's right edge - its foot meets the content frame's top-left corner; the tabs after it follow in the strip as ever. Shown again, everything goes back. All in --vkRailT (.22 s), the toggle's own time. Only where the header has tabs (from 1181 px) and the rail stands. */ @media (min-width: 1181px){ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) header .secondline .vkTabs, html.vkRec:not(#vkLk) header .secondline .vkTabs{ transition: margin-left var(--vkRailT, .22s) cubic-bezier(.4, 0, .2, 1); } html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) header .secondline .logo.vkLogoPanel img.logoHeader, html.vkRec:not(#vkLk) header .secondline .logo.vkLogoPanel img.logoHeader{ transition: margin var(--vkRailT, .22s) cubic-bezier(.4, 0, .2, 1), width var(--vkRailT, .22s) ease, height var(--vkRailT, .22s) ease, max-width var(--vkRailT, .22s) ease, max-height var(--vkRailT, .22s) ease; } html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]) header .secondline .vkTabs, html.vkRec.vkRecShut:not(#vkLk) header .secondline .vkTabs{ margin-left: 57.5px; } /* the strip's box starts 8.5 px in: the first tab's edge is the rail's */ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]) header .secondline .logo.vkLogoPanel img.logoHeader, html.vkRec.vkRecShut:not(#vkLk) header .secondline .logo.vkLogoPanel img.logoHeader{ width: 30px; height: 30px; max-width: 30px; max-height: 30px; margin-top: -27px !important; margin-left: 11px; /* centred on the rail: the panel's content starts 7 px in */ } } @media (prefers-reduced-motion: reduce){ html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) header .secondline :is(.vkTabs, .logo.vkLogoPanel img.logoHeader), html.vkRec:not(#vkLk) header .secondline :is(.vkTabs, .logo.vkLogoPanel img.logoHeader){ transition: none !important; } } /* the rail only exists on a computer */ @media (max-width: 1125px){ .vkRail, .vkRail-wire, .vkRailTip, .vkRailFind, .vkRailMenu{ display: none !important; } }