/* * THE PUBLIC LANDING, AS THE APP ITSELF (brief BK, 2026-10-09; brief BK2, 2026-10-10: a working demo of it; brief BS, 2026-10-11: the admin's structure and effects). Markup: parts/landing.php; behaviour: * search/js/vk_landing.js (and, loaded on the first need, search/js/vk_demo.js + vk_demo_rail.js with search/css/vk_demo.css); the hubs: core/vk/landing.php; the start page, the dashboard and the bell: * core/vk/landing_shell.php; the tree, what a hub, a search and a detail answer: core/vk/landing_demo.php. * * Since brief BS this page wears the ADMIN'S OWN markup and stylesheets from its first paint - Bootstrap and Font Awesome, view/css/vk_theme.css, style.css, sidebar_tree.css, vk_dashboard.css, vk_settings.css (the key of * «Publicar cambios»), vk_bell.css, vk_radar.css, vk_dark.css, vk_logopanel.css, vk_mono.css and the installation's own colours (view/custom/styles_custom.php) - so the header (header .secondline), the right-hand bar * (.sidebarblock), the tree, the columns (.detailphoto) and the cards are the panel's classes drawn by the panel's CSS. This file is only what the landing adds or does differently: the page's frame, the two keys of a * phone, «Pedir acceso», and the phone layout he asked for. Light and dark answer to html[data-theme], which follows the visitor's system. */ html{ background: var(--vk-page, #e6e6e6); } .vkL *, .vkL *::before, .vkL *::after{ box-sizing: border-box; } .vkL [hidden]{ display: none !important; } .vkSr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .vkL :focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; } /* the two keys of a phone are the landing's own (the tree's drawer and the search's fold): not on a desktop */ .vkL-menu, .vkL-findOpen{ display: none; } /* what the panel's page does through script.js (ajustesIniciales: the first page's column gets the window's height and a margin as tall as the header, inline) and the landing does here */ @media (min-width: 1126px){ #vkLHome{ margin-top: 90px; min-height: calc(100vh - 90px); } } /* ------------------------------------------------------------------ the demo's chips and marks on the admin's head */ .vkL .vkLd-web{ color: var(--vk-violet-4f1697, #4f1697); font-size: 12.5px; font-weight: 600; margin-left: 10px; } .vkL .vkLd-web:hover{ text-decoration: underline; } /* ------------------------------------------------------------------ «Pedir acceso» in the admin's window style (his words, 2026-10-10: "En publicar cambios haz el modal del estilo del admin"): the values measured on «Web pública» (view/css/vk_public.css, style.css .modalcommon, vk_modalkeys.css) - the white card of 20 px, the title and the tabs in Departure Mono, the pixel cross, the fields of 42 px, the main key in the app's blue; light and dark. The form, its fields, the honeypot, the signed time and the three languages are search/js/vk_signup.js's, unchanged. */ /* since brief BS the window is Bootstrap's .modal.fade (parts/ask_dialog.php with $vkAskModal): the slide and the backdrop are the admin's windows' own; this is its card and its width */ body.vkLanding .vkAskModal{ font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 1.45; color-scheme: light; } html[data-theme="dark"] body.vkLanding .vkAskModal{ color-scheme: dark; } body.vkLanding .vkAskModal .vkAskDialog{ width: 560px; max-width: calc(100% - 30px); margin: 15px auto 40px; } /* THE ADMIN'S WINDOWS DO NOT SLIDE (measured 2026-10-11 on «Web pública», frame by frame): the window fades in over .15 s on the backdrop, which is at its .8 from the first frame (style.css .modal-backdrop), and the dialog is already in place - their card floats, so the dialog has no height and Bootstrap's translate(0,-25%) moves nothing. The landing's windows (this one and the demo's, search/js/vk_demo.js) are the same .modal.fade, so the slide is taken off the same way and they open and close as the admin's do. */ .vkAskModal.fade .modal-dialog, .vkLdModal.fade .modal-dialog{ -webkit-transform: none; transform: none; } body.vkLanding .vkAsk-card{ position: relative; float: none; width: 100%; margin: 0; padding: 32px 36px 30px; border: 0; border-radius: 20px; background: #ffffff; color: #16161a; box-shadow: 0 5px 45px rgba(0, 0, 0, .2); text-align: left; } html[data-theme="dark"] body.vkLanding .vkAsk-card{ background: #1e1e24; color: #f1f0f5; } .vkAskModal *, .vkAskModal *::before, .vkAskModal *::after{ box-sizing: border-box; } body.vkLanding .vkAsk-x{ top: 0; right: 14px; width: 46px; height: 78px; margin: 0; padding: 1px 6px; border-radius: 0; background: none; color: #999999; font-family: var(--vk-departure, 'Departure Mono', ui-monospace, Consolas, monospace); font-size: 53px; line-height: 75px; } html[data-theme="dark"] body.vkLanding .vkAsk-x{ color: #b5b4c0; } body.vkLanding .vkAsk-x:hover{ background: none; opacity: .7; } body.vkLanding .vkAsk-x:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: -4px; } body.vkLanding .vkAsk-title{ margin: 0 56px 8px 0; font-family: var(--vk-departure, 'Departure Mono', ui-monospace, Consolas, monospace); font-size: 24px; font-weight: 700; line-height: 1.1; color: inherit; } body.vkLanding .vkAsk-lead{ margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: #5f5e6b; } html[data-theme="dark"] body.vkLanding .vkAsk-lead{ color: #b5b4c0; } body.vkLanding .vkAsk-note{ margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); font-size: 13px; font-weight: 600; } html[data-theme="dark"] body.vkLanding .vkAsk-note{ background: #2a2536; color: #d9c8f6; } body.vkLanding .vkAsk-field > span{ margin: 0 0 6px; font-size: 13px; font-weight: 600; color: inherit; } body.vkLanding .vkAsk-field input, body.vkLanding .vkAsk-field select, body.vkLanding .vkAsk-field textarea{ height: 42px; padding: 0 12px; border: 1px solid #dddce5; border-radius: 10px; background: #ffffff; color: #16161a; font-size: 13.5px; } body.vkLanding .vkAsk-field textarea{ height: auto; min-height: 84px; padding: 10px 12px; } html[data-theme="dark"] body.vkLanding .vkAsk-field input, html[data-theme="dark"] body.vkLanding .vkAsk-field textarea{ background: #1e1e24; color: #f1f0f5; border-color: #3d3d4a; } body.vkLanding .vkAsk-field input:focus, body.vkLanding .vkAsk-field select:focus, body.vkLanding .vkAsk-field textarea:focus{ border-color: var(--vk-violet, #6e1fd1); box-shadow: 0 0 0 3px rgba(110, 31, 209, .16); } body.vkLanding .vkAsk-field.is-bad input{ border-color: #d32f2f; } body.vkLanding .vkAsk-error{ border-radius: 10px; font-size: 13px; } body.vkLanding .vkAsk-send{ --vk-key: var(--vk-brand, #0f52ff); display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 112px; height: 44px; margin: 8px 0 0; padding: 0 26px; border: 1px solid transparent; border-radius: 10px; font-family: var(--vk-departure, 'Departure Mono', ui-monospace, Consolas, monospace); font-size: 13px; font-weight: 600; color: var(--vk-brand-ink, #ffffff); background: linear-gradient(180deg, color-mix(in srgb, var(--vk-key) 78%, #ffffff) 0%, var(--vk-key) 55%, color-mix(in srgb, var(--vk-key) 86%, #000000) 100%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .14), 0 0 0 1px color-mix(in srgb, var(--vk-key) 75%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 12%, #ffffff), 0 -1px 0 3px color-mix(in srgb, var(--vk-key) 22%, #ffffff), 0 6px 12px 1px color-mix(in srgb, var(--vk-key) 26%, transparent); } html[data-theme="dark"] body.vkLanding .vkAsk-send{ box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 0 0 1px color-mix(in srgb, var(--vk-key) 55%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 22%, #1e1e24), 0 -1px 0 3px color-mix(in srgb, var(--vk-key) 38%, #1e1e24), 0 6px 12px 1px rgba(0, 0, 0, .42); } body.vkLanding .vkAsk-send:hover{ background: linear-gradient(180deg, color-mix(in srgb, var(--vk-key) 78%, #ffffff) 0%, var(--vk-key) 55%, color-mix(in srgb, var(--vk-key) 86%, #000000) 100%); filter: brightness(1.08); } body.vkLanding .vkAsk-send:active{ transform: translateY(1px); } body.vkLanding .vkAsk-done{ border-radius: 10px; font-size: 14px; } html[data-theme="dark"] body.vkLanding .vkAsk-done{ background: #17301f; color: #bfe8cb; } /* «Pedir acceso» keeps its Montserrat on every field whatever the panel's mono face says (vk_mono.css), as before */ .vkAskModal button, .vkAskModal input, .vkAskModal select, .vkAskModal textarea{ font-family: 'Montserrat', sans-serif !important; font-synthesis: none; } body.vkLanding .vkAsk-title, body.vkLanding .vkAsk-x, body.vkLanding .vkAsk-send{ font-family: var(--vk-departure, 'Departure Mono', ui-monospace, Consolas, monospace) !important; } html[data-theme="dark"] .vkAsk-field select{ background-color: #1e1e24; color: #f1f0f5; } /* ------------------------------------------------------------------ a phone or a tablet (1125 px, the panel's own breakpoint): the tree is the drawer (the panel's), the bar a dock at the foot, the search folds into its key */ @media (min-width: 1126px){ .vkL-scrim{ display: none; } } @media (max-width: 1125px){ /* the drawer: the panel's (sidebar_tree.css: from the top, calc(100% - 60px) wide, at most 400) kept off the screen until the key opens it; its own dimming is replaced by the scrim below */ .vkL .vkTree{ transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } .vkL .vkTree::after{ display: none; } .vkL.is-tree-open .vkTree{ transform: none; visibility: visible; transition: transform .2s ease; } /* the menu's hubs search off the window's top: the 20 px the person's phone view has (view/css/vk_phonebar.css; his words, 2026-10-11: "te cargaste el epacio del top con el buscador del menu. devuelvelo!") */ .vkL .vkTree-top{ padding-top: 20px; } .vkL-scrim{ position: fixed; inset: 0; z-index: 9990; background: rgba(22, 22, 26, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } .vkL.is-tree-open .vkL-scrim{ opacity: 1; visibility: visible; transition: opacity .2s ease; } } @media (prefers-reduced-motion: reduce){ .vkL .vkTree, .vkL-scrim{ transition: none !important; } } /* THE PHONE, HIS WAY (2026-10-10, with a picture of the landing at phone width, the icon strip and the header circled): "1. Topbar pasa al bottom 0px. con el mismo color de backgound the tiene y más padding para que respire del frame del viewport. 2. header pasa al top 0px del header. 3. Al header quitale el background y ponselo en none. que solo queden visibles los botones 4. haz que los botons respiren un poco mas d elos border del viwport." (brief BS §0 keeps it: «the phone layout of 8c70363».) On the admin's own markup: the icon strip (.sidebarblock) is a dock at the foot of the screen - its own colour, more room around its icons, the phone's safe area below; the header (the panel's blue corner of 1125 px and under) sits at the very top with no ground of its own - the tree's key, the logo, the search's key, the bell and «Publicar cambios» are all that show - and the keys keep 16 px from the screen's edges. The search folds into its key; the tree is the drawer above. What sat at the foot (the demo's toast) rises above the dock; the page leaves room for it. */ @media (max-width: 1125px){ :root{ --vkL-dock: calc(66px + env(safe-area-inset-bottom, 0px)); } /* the header: a row of keys over the page, nothing of its own */ html body.vkLanding header.vkL-head, html[data-theme="dark"] body.vkLanding header.vkL-head{ top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; z-index: 1003 !important; pointer-events: none; } html body.vkLanding header.vkL-head .secondline{ float: none; width: 100%; height: 0; border: 0 !important; border-radius: 0; background: none !important; pointer-events: none; } /* the keys: the raised key of the panel's chips (sidebar_tree.css .vkHead .vkChip), in the app's light and dark */ html body.vkLanding header.vkL-head .vkL-menu, html body.vkLanding header.vkL-head .vkL-findOpen, html body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state], html body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state]:focus, html body.vkLanding header.vkL-head .secondline .vkBellBtn, html body.vkLanding header.vkL-head .secondline .vkBellBtn:focus, html body.vkLanding header.vkL-head .secondline .vkBellBtn[data-has]{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px; cursor: pointer; pointer-events: auto; font-size: 17px; line-height: 1; color: var(--vk-soft-3c3b46, #3c3b46); -webkit-tap-highlight-color: transparent; background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%); box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9), 0 0 0 1px #d6dbe2, 0 0 0 3px #eef1f4, 0 -1px 0 3px #dfe4ea, 0 6px 10px 1px rgba(30, 45, 65, .14); transition: background .15s ease, transform .15s ease; } html body.vkLanding header.vkL-head .vkL-menu:hover, html body.vkLanding header.vkL-head .vkL-findOpen:hover, html body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state]:hover, html body.vkLanding header.vkL-head .secondline .vkBellBtn:hover, html body.vkLanding header.vkL-head .secondline .vkBellBtn[aria-expanded="true"]{ background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%); color: var(--vk-text, #16161a); border: 0; } html body.vkLanding header.vkL-head .vkL-menu:active, html body.vkLanding header.vkL-head .vkL-findOpen:active, html body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state]:active, html body.vkLanding header.vkL-head .secondline .vkBellBtn:active{ transform: translateY(1px); } html body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state] .fa{ color: var(--vk-hl, var(--vk-violet, #6e1fd1)); font-size: 17px; } html[data-theme="dark"] body.vkLanding header.vkL-head .vkL-menu, html[data-theme="dark"] body.vkLanding header.vkL-head .vkL-findOpen, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state], html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state]:focus, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn:focus, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn[data-has]{ color: #ffffff; background: linear-gradient(180deg, #303139 0%, #2a2b32 100%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 0 0 1px #16161b, 0 0 0 3px #25262c, 0 -1px 0 3px #34353d, 0 6px 12px 1px rgba(0, 0, 0, .45); } html[data-theme="dark"] body.vkLanding header.vkL-head .vkL-menu:hover, html[data-theme="dark"] body.vkLanding header.vkL-head .vkL-findOpen:hover, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state]:hover, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn:hover, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn[aria-expanded="true"]{ background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%); color: #ffffff; } html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state] .fa{ color: #ffffff; } html body.vkLanding header.vkL-head .vkL-menu .vkI, html body.vkLanding header.vkL-head .vkL-findOpen .vkI{ color: inherit; } /* where each key stands - HIS PICTURE OF 2026-10-11 ("vista movil en la homepage publica. Lo quiero asi." / "lo he movido yo los elementos, es una mejora!"), measured on it at 484 px: the logo alone at the left; at the right the search's key, «Publicar cambios» 12 px after it and the bell's radar, bare, 24 px after that; the tree's key leaves the top for the dock's last place, at the screen's corner */ html body.vkLanding header.vkL-head .vkL-menu{ position: fixed; top: auto; left: auto; right: 7px; bottom: calc(7px + env(safe-area-inset-bottom, 0px)); width: 62px; height: 50px; min-width: 62px; border-radius: 12px; } html body.vkLanding header.vkL-head .vkL-findOpen{ position: fixed; top: 12px; right: 149px; } html body.vkLanding header.vkL-head .secondline .vkBellWrap{ position: fixed; top: 12px; right: 32px; left: auto; z-index: 1003; float: none; margin: 0; } html body.vkLanding header.vkL-head .secondline .vkPubBtnWrap{ position: fixed; top: 12px; right: 97px; left: auto; z-index: 1003; float: none; margin: 0; } /* the bell is the radar alone, as the admin's on a phone: no key around it, in any state */ html body.vkLanding header.vkL-head .secondline .vkBellBtn, html body.vkLanding header.vkL-head .secondline .vkBellBtn:focus, html body.vkLanding header.vkL-head .secondline .vkBellBtn[data-has], html body.vkLanding header.vkL-head .secondline .vkBellBtn:hover, html body.vkLanding header.vkL-head .secondline .vkBellBtn[aria-expanded="true"], html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn:focus, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn[data-has], html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn:hover, html[data-theme="dark"] body.vkLanding header.vkL-head .secondline .vkBellBtn[aria-expanded="true"]{ background: none; box-shadow: none; border-radius: 50%; } /* round: its beating glow (vk_radar.css) is the radar's, not a key's */ html body.vkLanding header.vkL-head .secondline .vkBellBtn .vkBellRadar, html body.vkLanding header.vkL-head .secondline .vkBellBtn > *:not(.vkBellCount){ pointer-events: none; } html body.vkLanding header.vkL-head .secondline .vkBellCount{ top: -6px; right: -6px; border-color: var(--vk-page, #e6e6e6); } /* the logo: shown here (the panel hides it from 1180 px down; his phone layout keeps it), round and in its bezel, 34 px, after the tree's key */ html body.vkLanding header.vkL-head .secondline .logo.vkLogoPanel{ position: fixed; top: 12px; left: 20px; z-index: 1003; float: none; width: auto; height: 40px; margin: 0; padding: 0; display: flex; align-items: center; overflow: visible; background: none; pointer-events: none; } html body.vkLanding header.vkL-head .secondline .logo.vkLogoPanel a{ pointer-events: auto; display: flex; align-items: center; } html body.vkLanding header.vkL-head .secondline img.logoHeader{ display: block !important; margin: 0 7px !important; } html body.vkLanding header.vkL-head .secondline img.logoHeader.vkLogo-forDark{ display: none !important; } html[data-theme="dark"] body.vkLanding header.vkL-head .secondline img.logoHeader.vkLogo-forDark{ display: block !important; } html[data-theme="dark"] body.vkLanding header.vkL-head .secondline img.logoHeader.vkLogo-forLight{ display: none !important; } /* the search, folded into its key: a panel across the top, under the keys */ .vkL.is-find header .movilheaderhidden{ display: block !important; position: fixed; top: 64px; bottom: auto; left: 0; right: 0; width: auto; height: auto; margin: 0; padding: 10px 12px 12px; z-index: 100000; /* above the selection's column (.editers_laptop, 99999) */ background: var(--vk-surface, #ffffff); border-bottom: 1px solid var(--vk-line, #e4e3ea); box-shadow: 0 10px 24px rgba(30, 20, 60, .14); pointer-events: auto; } .vkL.is-find header .movilheaderhidden .countitems, .vkL.is-find header .movilheaderhidden .number{ display: none; } .vkL.is-find header .movilheaderhidden form{ float: none; width: 100%; margin: 0; } .vkL.is-find header .movilheaderhidden .searchmovil{ float: none !important; width: 100% !important; } .vkL.is-find header .movilheaderhidden .form-group{ display: flex; align-items: center; float: none; width: 100%; height: 48px; margin: 0; padding: 0 4px 0 16px; border-radius: 13px; background: var(--vk-field, #efeef4) !important; } .vkL.is-find header .movilheaderhidden input[type="search"]{ flex: 1 1 auto; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none !important; box-shadow: none; font-size: 14px; color: var(--vk-text, #16161a); } .vkL.is-find header .movilheaderhidden .form-group:focus-within{ box-shadow: 0 0 0 2px var(--vk-violet, #6e1fd1); } .vkL.is-find header .movilheaderhidden button[type="submit"]{ float: none; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none !important; color: var(--vk-soft, #5f5e6b); } /* the select-all box and the icons of a selection (the panel's own column at the right edge, style.css .editers_laptop): under the keys, not on them */ html body.vkLanding header.vkL-head .editers_laptop{ top: 62px; right: 22px; pointer-events: none; } /* 22: the select-all box's right edge on the pages' 24 px line */ html body.vkLanding header.vkL-head .editers_laptop > *{ pointer-events: auto; } /* the icon strip: a dock at the foot of the screen, in its own colour, with room around its icons */ html body.vkLanding .sidebarblock{ top: auto !important; bottom: 0; left: 0; right: 0; width: auto; height: var(--vkL-dock); display: flex; justify-content: space-around; align-items: stretch; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 0; } html body.vkLanding .sidebarblock > a{ flex: 1 1 0; float: none; width: auto; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; } /* his picture: the dock keeps its five places - the report, the people, the web, the settings and, in the fifth, the tree's key (above); the bin is not on a phone's dock */ html body.vkLanding .sidebarblock{ padding-right: calc(14px + (100% - 28px) / 5); } html body.vkLanding .sidebarblock > a.vkBinSwitch{ display: none; } /* and the start page stands 16 px further from each side and 6 px lower than the panel's (his picture) - and so does every page opened inside it, a group, a hub, a section, a search (his words, 2026-10-11: "la idea es que respetaras tambien los margenes de los elemetos en toda la web publica, omo en el home! para movil") */ html body.vkLanding #vkLHome{ padding: 6px 16px 0 !important; } /* !important: style.css's phone .detailphoto puts its top and right at 0 with !important */ html body.vkLanding #vkLView > .detailphoto{ padding-top: 6px !important; padding-right: 16px !important; padding-left: 16px !important; } /* the page: under the keys at the top (the panel's own 58 px of margin for its strip), clear of the dock at the foot */ html body.vkLanding #vkLMain{ padding-top: 8px; padding-bottom: calc(var(--vkL-dock) + 24px); } /* 8 px more than the panel's: its strip is 48 px tall, the keys here reach 56 with their bezel */ body.vkLanding .vkLd-toast{ bottom: calc(var(--vkL-dock) + 14px); } } @media (prefers-reduced-motion: reduce){ html body.vkLanding header.vkL-head .vkL-menu, html body.vkLanding header.vkL-head .vkL-findOpen, html body.vkLanding header.vkL-head .secondline .vkPubBtn[data-state], html body.vkLanding header.vkL-head .secondline .vkBellBtn{ transition: none; } } /* THE FILE'S DETAIL ON THE PUBLIC WEB (his words, 2026-10-11, with a picture of it on a phone: "en el detalle (es web publica), los botones ahi molestan siempre. ponlos arriba. y elimina ese boton azul qu etacho (en ese caso azul), pero que no aparezca en ningun caso, queda mal"). The hub's name key (.hookCompany, in the hub's colour) is never shown here, at any width. On a phone or a narrow tablet (800 px, where the detail has no side rail) the column of round buttons lies down in a row at the top of the detail, under the bell and the cross, across the screen: their size and the gap between them shrink so that nine fit from 320 px up, the pair of comments one pill sideways; a wider zoomed picture keeps the panel's own row (view/css/vk_notes.css .vkZoomRow). */ body.vkLanding .watch_item_modal .hookCompany{ display: none !important; } @media (max-width: 800px){ body.vkLanding{ --vkLdB: min(40px, calc((100vw - 64px) / 9)); --vkLdG: clamp(4px, calc((100vw - 32px - 9 * var(--vkLdB)) / 8), 12px); } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions{ top: 6px; left: 0; right: 0; width: auto; padding: 0 16px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions::-webkit-scrollbar{ display: none; } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions > div{ flex-direction: row; flex-wrap: nowrap; gap: var(--vkLdG); } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions > div > :first-child{ margin-left: auto; } /* centred, and an overflow still starts at the left edge */ html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions > div > :last-child{ margin-right: auto; } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions .downloadbnts{ float: none; flex: 0 0 auto; box-sizing: border-box; width: var(--vkLdB); height: var(--vkLdB); min-width: 0; margin-top: 0; margin-bottom: 0; padding: 0; justify-content: center; align-items: center; } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions .vkNotesToggle.vkPair-top.downloadbnts{ border-radius: 99px 0 0 99px; } html body.vkLanding .watch_item_modal:not(.vkZoomRow) .vkDetail > .button_actions .vkNotesAdd.vkPair-bottom.downloadbnts{ border-radius: 0 99px 99px 0; margin-left: calc(-1 * var(--vkLdG)); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); } } /* A ROW PUT INSIDE ANOTHER (brief BU, 2026-10-12; search/js/vk_landing_drag.js): the admin's own drag (view/css/sidebar_tree.css .is-hubdrop, #vkDropLine, #vkHubMove) in the visitor's language - the row a dragged row would go inside of says so with the label the page wrote (--vk-ld-droplabel, parts/landing.php), where the panel's CSS has it in Spanish - and the grip can be held by a finger: the page does not scroll under it. */ .vkL-tree .vkNode.is-hubdrop > .vkRow::after{ content: var(--vk-ld-droplabel, 'Soltar para meterlo dentro'); } .vkL-tree .vkRow-grip{ touch-action: none; } @media (pointer: coarse){ .vkTree.vkL-tree[data-order="manual"] .vkNode > .vkRow > .vkRow-grip{ width: 26px; margin-left: -8px; } } /* a finger: a grip wide enough to be the target of a touch (the row's own name and chevron give way by the 8 px the grip takes) */ /* A HUB'S OR GROUP'S PAGE WITH ITS BANNER ON TOP, ON THE PUBLIC WEB (brief CE, 2026-10-12; his mockup is of this very page - group «Moxprotocol» in English). The page is the admin's markup drawn by the admin's CSS (view/css/sidebar_tree.css "A HUB'S OR GROUP'S PAGE WITH ITS BANNER ON TOP": the banner 4 px in from the panel's edges, its own path and keys hidden) and the line that stands on the banner is the admin's too (view/js/vk_stickhead.js, which this page loads). The one difference: the admin's document stands 1 px higher than this one (its body is at y -1), so the banner climbs 1 px more here to be 4 px under the header, as there. Narrower than 1126 px nothing changes (his phone layout of 2026-10-11 stays: the banner under the path, the keys in the head). */ @media (min-width: 1126px){ body.vkLanding .vkHead--banner > .vkHead-banner{ margin-top: -21px; } } /* ...and so the band starts 2 px lower here than in the panel (87 against 85, under the same 90 px header): it is cut 3 px from its top, not 5, and is 183 px, so the 180 px seen start right under the header with no strip between them, as in the panel (view/css/sidebar_tree.css, his "altur de 180px" and "bordes redondeados de 14px"; measured at 1875, 2026-10-12) */ @media (min-width: 1126px){ body.vkLanding .vkHead--banner{ --vkBannerH: 233px; } /* his 230 px seen (2026-10-12), 3 under the header */ body.vkLanding .vkHead--banner > .vkHead-banner{ clip-path: inset(3px 67px 0 10px round 14px); } } /* his -22px (view/css/sidebar_tree.css), 1 px less: this document stands 1 px lower */ /* THE START PAGE'S ROW OF PUBLIC LABELS (brief CF, 2026-10-12; core/vk/landing_shell.php vk_ls_home_chips(), search/js/vk_landing_labels.js): the admin's own .vkHl (view/css/sidebar_tree.css), at the right of the title and centred on it. The brief for this page: below 1126 px the keys wrap UNDER the title (the panel keeps them beside it, wrapping in their own box, down to 600 px): the head wraps, the row takes a line of its own. */ @media (max-width: 1125px){ body.vkLanding .vkHead--home > .vkHead-top{ flex-wrap: wrap; row-gap: 6px; } body.vkLanding .vkHead--home > .vkHead-top > .vkHl{ flex: 1 0 100%; max-width: none; justify-content: flex-start; align-self: stretch; margin: 4px 0 0; } } /* A FILE'S DETAIL ON A PHONE SHOWS THE TIRA ONLY (2026-10-13, his words: "el modo de viata por defecto (los dema sno se muestran) en el detalle de los archivos es la Tira. Los botones de Historia y fuentes escondelos"): search/js/vk_demo.js asks for the Tira at 1125 px and under, and «Historial» and «Fuentes» are not offered there */ @media (max-width: 1125px){ body.vkLanding .watch_item_modal .vkVer-viewBtn:not([data-view="B"]){ display: none; } } /* NO HOVER ON THE HUB CARDS ON A PHONE (his words, 2026-10-13: "puedes quitaar los hovers de los hubs en el movil"): a finger's tap leaves the hover behind - the card lifted 2 px, its green border and glow, the arrow pushed (view/css/sidebar_tree.css, his view/custom/mi-estilo.css) - so at 1125 px and under the card stays as it is at rest; the keyboard's focus ring (focus-visible) is not a hover and stays */ @media (max-width: 1125px){ html body.vkLanding .vkCard.vkCard:hover{ transform: none; box-shadow: none; border-color: var(--vk-line-soft-ecebf2, #ecebf2); } html[data-theme="dark"] body.vkLanding .vkCard.vkCard:hover{ border-color: transparent; } html body.vkLanding .vkCard.vkCard:hover .vkCard-arrow{ transform: none; } } /* THE BREADCRUMBS IN SIGHT WHILE A PAGE IS SCROLLED, ON A PHONE (his words, 2026-10-14: "haz que cuando se scrollee, y haya breadcrumbs, estas aparezcan fijas donde te digo al scrollear. Que aparezcan de arriba cuando se scrollee ... En la vista de movil."): search/js/vk_crumbfix.js writes the copy (.vkPathFix) and says when it shows; here its place - right of the logo, centred on the select-all box (61 px down, 29 px tall), ending just before it (the script sets `right` and the room) - and its coming down from above. His breadcrumbs' look (.vkPath li, his mi-estilo.css) is its own. */ @media (max-width: 1125px){ body.vkLanding .vkPath.vkPathFix{ position: fixed; top: 61px; right: 16px; left: auto; z-index: 1002; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; white-space: nowrap; opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; } body.vkLanding .vkPath.vkPathFix.is-on{ opacity: 1; transform: none; pointer-events: auto; } body.vkLanding .vkPath.vkPathFix > li{ flex: 0 0 auto; min-width: 0; } body.vkLanding .vkPath.vkPathFix > li:last-child{ flex: 0 1 auto; overflow: hidden; } /* where you are, alone and still too long: an ellipsis */ body.vkLanding .vkPath.vkPathFix > li:last-child > a{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* NOT SHOWN ANY MORE (2026-10-16, brief CW; his words: "do not include in movile view the breadcrumbs"): a phone draws no breadcrumbs at all, so there is nothing to keep in sight - the page's own are hidden (view/css/sidebar_tree.css) and search/js/vk_crumbfix.js makes no copy. The rules above stay for the day he asks for them back; this one keeps the copy off at every width, whatever else is written. */ body.vkLanding .vkPath.vkPathFix{ display: none !important; } /* A PHONE'S BACK KEY AND A CHILD HUB'S PARENT (2026-10-17, his words with two pictures: "coloca dentro de un hub hijo el titulo del hub al que pertenece. y a bajo en el bottom coloca una flecha que tiempre tira atras a la pagina anterior si se apreta (excepto si estas en la home, que no aparece)", then "mejor hazlo asi, cooca la flecha a la izquierda y tira un poco mas a la derecha la lupa"): the arrow at the bar's left edge (its centre 18 px in), the lens 38 px further right while the arrow is there (html.vkL-hasBack, search/js/vk_landing.js) - on the start page the lens keeps its place. His view/custom/mi-estilo.css places the lens (left 25 px): the class on outweighs it. Nothing of this above 1125 px: a computer has its breadcrumbs. */ .vkL-back, .vkHead-parents{ display: none; } @media (max-width: 1125px){ html body.vkLanding header.vkL-head button.vkL-back:not([hidden]){ display: flex; align-items: center; justify-content: center; position: fixed; left: 0; bottom: 14px; top: auto; right: auto; width: 36px; height: 40px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #58A99C; cursor: pointer; -webkit-tap-highlight-color: transparent; pointer-events: auto; /* the header lets taps through (pointer-events: none); each key takes them back */ } html body.vkLanding header.vkL-head button.vkL-back:active{ transform: scale(.92); } html.vkL-hasBack body.vkLanding header.vkL-head .vkL-findOpen{ left: 63px; } /* the hub's line - and its parent's above it on a child hub's section (his second picture) - in the room under the circle, the title where it was */ html body.vkLanding .vkHead-titles > .vkHead-parents{ display: block; margin: 0 0 6px; width: max-content; max-width: calc(100vw - 92px); } /* in the flow, over the title (his second picture: the title under its lines); as wide as the panel lets it, not the title's width */ html body.vkLanding .vkHead-parents > .vkHead-parent{ display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; font-family: var(--vk-departure, "Departure Mono", ui-monospace, Consolas, monospace) !important; font-size: 13px; line-height: 1.3; color: #5E7A92; text-decoration: none; } html body.vkLanding .vkHead-parents > .vkHead-parent:hover, html body.vkLanding .vkHead-parents > .vkHead-parent:focus-visible{ color: #8FA9BF; } @media (prefers-reduced-motion: reduce){ html body.vkLanding header.vkL-head button.vkL-back:active{ transform: none; } } } @media (prefers-reduced-motion: reduce){ body.vkLanding .vkPath.vkPathFix{ transition: none; transform: none; } }