/* THE DARK LOOK OF THE OLD AND THE THIRD-PARTY STYLESHEETS (brief D, 2026-10-03). * * The app's own stylesheets (view/css/vk_*.css, sidebar_tree.css) read their colours from the tokens of view/css/vk_theme.css and need nothing here. What does not - style.css (10,900 lines, * 1,200 !important), Bootstrap 3, select2, the date picker, the uploader's queue, foundation.css - is painted here, every rule under html[data-theme="dark"], so light is exactly what it was. * * Linked after the last vk_*.css and BEFORE the inline brand block of view/custom/styles_custom.php: his colours (--vk-main, the header, the right-hand bar, his buttons) are not touched * here and win over anything here at the same weight. Pictures stay pictures: a preview, a file type's placeholder, a thumbnail, a PDF page and the light frame of a transparent picture * are left as they are - what is around them goes dark. */ /* ---------------------------------------------------------------- the page */ html[data-theme="dark"] body{ background: var(--vk-page) !important; color: var(--vk-text); } html[data-theme="dark"] .whiteback{ background: var(--vk-page); } html[data-theme="dark"] .countitems .appendcount{ color: var(--vk-soft); } /* ---------------------------------------------------------------- the header's search (the box; the button beside it is the brand's) */ html[data-theme="dark"] header .secondline form input[type="search"]{ background: var(--vk-field); color: var(--vk-text); } html[data-theme="dark"] header .secondline form input[type="search"]::placeholder{ color: var(--vk-faint); } /* ---------------------------------------------------------------- Bootstrap 3: windows, fields, menus, buttons */ html[data-theme="dark"] .modal-content{ background-color: var(--vk-surface); color: var(--vk-text); border-color: var(--vk-line); } html[data-theme="dark"] .clos, html[data-theme="dark"] .close{ color: var(--vk-soft); text-shadow: none; } html[data-theme="dark"] .clos:hover, html[data-theme="dark"] .close:hover{ color: var(--vk-text); } html[data-theme="dark"] .form-control{ background-color: var(--vk-field); color: var(--vk-text); border-color: var(--vk-line-strong); } html[data-theme="dark"] .form-control::placeholder{ color: var(--vk-faint); } html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] fieldset[disabled] .form-control{ background-color: var(--vk-fieldh); color: var(--vk-soft); } html[data-theme="dark"] .dropdown-menu{ background-color: var(--vk-surface); border-color: var(--vk-line); } html[data-theme="dark"] .dropdown-menu > li > a{ color: var(--vk-text); } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus{ background-color: var(--vk-field); color: var(--vk-text); } html[data-theme="dark"] .dropdown-menu .divider{ background-color: var(--vk-line); } html[data-theme="dark"] .btn-default{ background-color: var(--vk-field); border-color: var(--vk-line-strong); color: var(--vk-text); } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus{ background-color: var(--vk-fieldh); color: var(--vk-text); } html[data-theme="dark"] .input-group-addon{ background-color: var(--vk-fieldh); border-color: var(--vk-line-strong); color: var(--vk-text); } html[data-theme="dark"] .popover{ background-color: var(--vk-surface); border-color: var(--vk-line); } html[data-theme="dark"] .popover-title{ background-color: var(--vk-field); border-color: var(--vk-line); color: var(--vk-text); } html[data-theme="dark"] .popover-content{ color: var(--vk-text); } html[data-theme="dark"] .well{ background-color: var(--vk-field); border-color: var(--vk-line); } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td{ border-color: var(--vk-line); } html[data-theme="dark"] hr{ border-color: var(--vk-line); } /* ---------------------------------------------------------------- the file cards of the grid (style.css .containernews .capsaitem, written 2026-09-28) */ html[data-theme="dark"] .containernews .capsaitem{ background: var(--vk-surface); } html[data-theme="dark"] .containernews .capsaitem .SeeDetail{ background: var(--vk-field); } html[data-theme="dark"] .containernews .capsaitem .vkSl-pic, html[data-theme="dark"] .containernews .capsaitem .vkSl-pic.is-el{ background-color: var(--vk-field); } /* a version's picture on the thumbnail: the box's own colour, as above (view/css/vk_slides.css) */ html[data-theme="dark"] .containernews .capsaitem .details .refere.regular, html[data-theme="dark"] .containernews .capsaitem .refere.regular.draggeritem{ background: var(--vk-field); color: var(--vk-text); } html[data-theme="dark"] .containernews .capsaitem .refere.regular.draggeritem i{ color: var(--vk-soft) !important; } html[data-theme="dark"] .containernews .capsaitem .contcatoptions .buttonscategory i{ color: var(--vk-text); } html[data-theme="dark"] .containernews .capsaitem .details .cred, html[data-theme="dark"] .containernews .capsaitem .details .vkCardName{ color: var(--vk-soft); } html[data-theme="dark"] .vkHead-organize{ background: var(--vk-field); color: var(--vk-text); } html[data-theme="dark"] .vkHead-organize:hover{ background: var(--vk-fieldh); } /* ---------------------------------------------------------------- the file's detail (the layer that slides in from the right) */ html[data-theme="dark"] .watch_item_modal{ background: var(--vk-surface); } html[data-theme="dark"] .watch_item_modal .casing{ background: var(--vk-page); } html[data-theme="dark"] .watch_item_modal .casing img.mainImg, html[data-theme="dark"] .vkZoomIn-pic img{ background-color: #e8e8e8; } /* a picture is a picture: a transparent one keeps its light frame (the grid's is #e8e8e8 too), and its stage goes dark */ html[data-theme="dark"] .watch_item_modal .modal_accept{ background: var(--vk-field); color: var(--vk-text); } /* ---------------------------------------------------------------- the tick boxes: drawn by ::after (style.css), white or grey-to-white; only the empty ones - a ticked one is his colour (styles_custom.php) */ html[data-theme="dark"] input[type="checkbox"]:not(:checked)::after, html[data-theme="dark"] #selectall[type="checkbox"]:not(:checked)::after, html[data-theme="dark"] #selectall2[type="checkbox"]:not(:checked)::after, html[data-theme="dark"] ul.menucatstop input[type="checkbox"]:not(:checked)::after, html[data-theme="dark"] .assignc input[type="checkbox"]:not(:checked)::after, html[data-theme="dark"] .checkedcheck[type="checkbox"]:not(:checked)::after{ background-color: var(--vk-field); background-image: none; border-color: var(--vk-line-strong); } /* ---------------------------------------------------------------- the dark pills, toasts, the dock and the black buttons: #25252d with a #30303a ring, so they do not vanish on #17171c / #121216 */ html[data-theme="dark"] .vkToast, html[data-theme="dark"] .vkUp, html[data-theme="dark"] .vkZoomIn-seg, html[data-theme="dark"] .vkZoomIn-load, html[data-theme="dark"] .vkSes-new{ box-shadow: 0 0 0 1px var(--vk-line), 0 10px 28px rgba(0, 0, 0, .45); } html[data-theme="dark"] .vkHead-upload, html[data-theme="dark"] #userscat .vkAcc-copy, html[data-theme="dark"] #userscat .vkAcc-create, html[data-theme="dark"] #userscat .vkAcc-save, html[data-theme="dark"] .vkDash .vkPeople .vkAcc-copy, html[data-theme="dark"] .vkDash .vkPeople .vkPeople-copy, html[data-theme="dark"] #systemsettings .vkSet-btn.is-main, html[data-theme="dark"] #systemsettings .vkSet-sesNew, html[data-theme="dark"] .vkBinRestore, html[data-theme="dark"] .vkNotePop-btn--main, html[data-theme="dark"] .watch_item_modal .vkVer-btn--dark, html[data-theme="dark"] .watch_item_modal .vkVer-upload--dark, html[data-theme="dark"] .vkPeople-chip--hub, html[data-theme="dark"] .boxCont .boxInn.vkHubChip, html[data-theme="dark"] .containernews .vkCardNotes{ box-shadow: inset 0 0 0 1px var(--vk-line); } /* ---------------------------------------------------------------- Bootstrap's tooltip */ html[data-theme="dark"] .tooltip-inner{ background-color: var(--vk-fieldh); color: var(--vk-text); border: 1px solid var(--vk-line); } html[data-theme="dark"] .tooltip.top .tooltip-arrow{ border-top-color: var(--vk-fieldh); } html[data-theme="dark"] .tooltip.right .tooltip-arrow{ border-right-color: var(--vk-fieldh); } html[data-theme="dark"] .tooltip.bottom .tooltip-arrow{ border-bottom-color: var(--vk-fieldh); } html[data-theme="dark"] .tooltip.left .tooltip-arrow{ border-left-color: var(--vk-fieldh); } /* ---------------------------------------------------------------- the bin's page numbers */ html[data-theme="dark"] #pagination{ background: var(--vk-surface); } html[data-theme="dark"] #pagination li a{ color: var(--vk-text); } html[data-theme="dark"] #pagination li a:hover{ background: var(--vk-fieldh); } /* ---------------------------------------------------------------- the uploader's window (plupload's queue: its own stylesheet, its pictures stay) */ html[data-theme="dark"] .plupload_container{ background-image: none; background-color: var(--vk-surface); } html[data-theme="dark"] .plupload_container input{ background-color: var(--vk-field); color: var(--vk-text); border-color: var(--vk-line-strong); } html[data-theme="dark"] .plupload_scroll .plupload_filelist{ background: var(--vk-field); } html[data-theme="dark"] .plupload_filelist li{ background: var(--vk-field) none; border-bottom-color: var(--vk-line); color: var(--vk-text); } html[data-theme="dark"] li.plupload_uploading{ background: var(--vk-ok-tint) none; } html[data-theme="dark"] li.plupload_done{ color: var(--vk-faint); } html[data-theme="dark"] .plupload_filelist_header, html[data-theme="dark"] .plupload_filelist_footer{ background: var(--vk-fieldh); color: var(--vk-text); border-color: var(--vk-line); } html[data-theme="dark"] .plupload_file_status, html[data-theme="dark"] .plupload_file_status span{ color: var(--vk-soft); } /* its two buttons (Add Files, Start Upload) are drawn on a light sprite image (img/buttons.png): they stay light chips, with their own dark text */ html[data-theme="dark"] .plupload_progress_container{ background: var(--vk-surface); border-color: var(--vk-line-strong); } /* ---------------------------------------------------------------- select2 4 (its own stylesheet) */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple{ background-color: var(--vk-field); border-color: var(--vk-line-strong); } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--vk-text); } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder{ color: var(--vk-faint); } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: var(--vk-soft) transparent transparent transparent; } html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-color: transparent transparent var(--vk-soft) transparent; } html[data-theme="dark"] .select2-dropdown{ background-color: var(--vk-surface); border-color: var(--vk-line-strong); color: var(--vk-text); } html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field{ background-color: var(--vk-field); color: var(--vk-text); border-color: var(--vk-line-strong); } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true]{ background-color: var(--vk-fieldh); color: var(--vk-text); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice{ background-color: var(--vk-fieldh); border-color: var(--vk-line-strong); color: var(--vk-text); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{ color: var(--vk-soft); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-search__field{ color: var(--vk-text); } html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single{ background-color: var(--vk-fieldh); } /* ---------------------------------------------------------------- the date picker (bootstrap-datepicker 1.3) and the tag box (bootstrap-tagsinput) */ html[data-theme="dark"] .datepicker.dropdown-menu, html[data-theme="dark"] .datepicker{ background-color: var(--vk-surface); border-color: var(--vk-line); color: var(--vk-text); } html[data-theme="dark"] .datepicker table tr td.day:hover, html[data-theme="dark"] .datepicker table tr td span:hover, html[data-theme="dark"] .datepicker table tr th.datepicker-switch:hover, html[data-theme="dark"] .datepicker table tr th.prev:hover, html[data-theme="dark"] .datepicker table tr th.next:hover, html[data-theme="dark"] .datepicker table tfoot tr th:hover{ background: var(--vk-fieldh); color: var(--vk-text); } html[data-theme="dark"] .datepicker table tr td.old, html[data-theme="dark"] .datepicker table tr td.new{ color: var(--vk-faint); } html[data-theme="dark"] .datepicker table tr td.disabled, html[data-theme="dark"] .datepicker table tr td.disabled:hover{ color: var(--vk-faint); background: none; } html[data-theme="dark"] .bootstrap-tagsinput{ background-color: var(--vk-field); border-color: var(--vk-line-strong); color: var(--vk-text); box-shadow: none; } html[data-theme="dark"] .bootstrap-tagsinput input{ color: var(--vk-text); background: transparent; } /* a link on a tinted box (the amber and the green boxes of "Web remota"): the approved violet is 4.2-4.4 : 1 there, a step lighter reads at 4.8 and over (#b08af5; since his lightening of 2026-10-03, #c2a1f8 - the same step through his curve) */ html[data-theme="dark"] #vkRemote .vkRem-step .vkRem-link, html[data-theme="dark"] #vkRemote .vkRem-stepAct .vkRem-link, html[data-theme="dark"] #vkRemote .vkRem-more > summary{ color: #c2a1f8; } /* ---------------------------------------------------------------- the old dashboard of a hub's own user, and the edit window's boxes (style.css, 2016-2019) */ html[data-theme="dark"] .box_dasboard, html[data-theme="dark"] .box_dasboard_hand, html[data-theme="dark"] .average_panel, html[data-theme="dark"] .charts{ background-color: var(--vk-surface); color: var(--vk-text); } html[data-theme="dark"] .box_dasboard{ box-shadow: 0 0 13px rgba(0, 0, 0, .5); } html[data-theme="dark"] .box_dasboard.filelist a, html[data-theme="dark"] .average_panel li{ background-color: var(--vk-field); color: var(--vk-text); } html[data-theme="dark"] .caja1, html[data-theme="dark"] .caja2, html[data-theme="dark"] .caja3, html[data-theme="dark"] .caja4, html[data-theme="dark"] .caja5{ background-color: var(--vk-field); } /* ---------------------------------------------------------------- selects, which the browser would draw its own grey: the colour of a field */ html[data-theme="dark"] select{ background-color: var(--vk-field); color: var(--vk-text); } /* ---------------------------------------------------------------- the phone's own pieces: the menu button and the count and search at the foot (style.css, under 1200 px) */ html[data-theme="dark"] .barfootmovil, html[data-theme="dark"] .opensidebar, html[data-theme="dark"] .openheader, html[data-theme="dark"] .mobilehide{ background: var(--vk-surface); } html[data-theme="dark"] .barfootmovil .opensidebar i, html[data-theme="dark"] .openheader i{ color: var(--vk-text); } html[data-theme="dark"] .movilheaderhidden .countitems{ background: var(--vk-surface); border-color: var(--vk-line); color: var(--vk-soft); } html[data-theme="dark"] .movilheaderhidden .searchmovil, html[data-theme="dark"] .movilheaderhidden .searchmovil .form-group{ border-color: var(--vk-line); } /* ---------------------------------------------------------------- the sound card's waves: the bars are inside the card's link and `.capsaitem a i { color: #000 }` (style.css) paints them black, so --vk-waves-color never reached them; in dark they take the colour the waves were meant to have (the soft token, as the detail's waves do) */ html[data-theme="dark"] .capsaitem .vkWaves-bars i{ color: var(--vk-waves-color, var(--vk-soft)); } /* ---------------------------------------------------------------- the layer that shows while files are dragged over the page (and over a file's detail): a veil of the page's own colour, not a white one */ html[data-theme="dark"] .modal_drop_upload{ background-color: rgba(var(--vk-surface-rgb), .78); } html[data-theme="dark"] #modal_drop_upload{ background: rgba(var(--vk-surface-rgb), .78) !important; } /* style.css 519 gives the page's own layer a light grey with !important */ html[data-theme="dark"] .modal_drop_upload_v{ background-color: rgba(var(--vk-surface-rgb), .9); } html[data-theme="dark"] .modal_drop_upload .upload_wrapper, html[data-theme="dark"] .modal_drop_upload_v .upload_wrapper{ background: var(--vk-surface) !important; } html[data-theme="dark"] #CloseIdo, html[data-theme="dark"] .versions_available{ background: var(--vk-field); } html[data-theme="dark"] .modal_drop_upload .plupload_scroll{ background: var(--vk-surface) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_filelist li{ background: var(--vk-field) !important; border-color: var(--vk-line) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_filelist li:hover{ background: var(--vk-fieldh) !important; border-color: var(--vk-line-strong) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_name{ color: var(--vk-text) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_size{ color: var(--vk-soft) !important; background: var(--vk-fieldh) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_progress{ background: var(--vk-line) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_filelist_footer{ background: var(--vk-fieldh) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_thumb{ background: var(--vk-fieldh) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_percent{ background: var(--vk-accent-tint) !important; color: var(--vk-link) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_action a{ background-color: var(--vk-line-strong) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_file_action a:hover{ background: var(--vk-err-tint) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_button.plupload_add{ background: var(--vk-field) !important; color: var(--vk-text) !important; border-color: var(--vk-line-strong) !important; } html[data-theme="dark"] .modal_drop_upload .plupload_scroll .plupload_filelist_footer{ border-top-color: var(--vk-line) !important; } /* ---------------------------------------------------------------- "Ordenar carpetas", the copy-name window and the bulk download's list (style.css, 2026-09-28 / 2026-10-02) */ html[data-theme="dark"] .vkOrg-card{ background: var(--vk-surface); box-shadow: 0 0 0 1px var(--vk-line), 0 24px 60px rgba(0, 0, 0, .5); } html[data-theme="dark"] .vkOrg-title, html[data-theme="dark"] .vkOrg-state, html[data-theme="dark"] .vkOrg-list li{ color: var(--vk-text); } html[data-theme="dark"] .vkOrg-text, html[data-theme="dark"] .vkOrg-dirs{ color: var(--vk-soft); } html[data-theme="dark"] .vkOrg-list li{ border-bottom-color: var(--vk-line); } html[data-theme="dark"] .vkOrg-list li.is-quiet{ color: var(--vk-faint); } html[data-theme="dark"] .vkOrg-list li.is-warn{ color: var(--vk-err); } html[data-theme="dark"] .vkOrg-dirs{ background: var(--vk-field); } html[data-theme="dark"] .vkOrg-go[disabled]{ background: var(--vk-line-strong); } html[data-theme="dark"] .vkOrg-close{ background: var(--vk-field); color: var(--vk-text); } html[data-theme="dark"] .vkOrg-all{ background: var(--vk-violet-tint); color: var(--vk-violet); } html[data-theme="dark"] .vkDup-label, html[data-theme="dark"] .vkDup-check{ color: var(--vk-text); } html[data-theme="dark"] .vkDup-name{ background: var(--vk-field); color: var(--vk-text); border-color: var(--vk-line-strong); } html[data-theme="dark"] #masiv .vkMass-files li{ border-top-color: rgba(var(--vk-ink-rgb), .12); } /* ---------------------------------------------------------------- the toolbar of a selection (header) and the floating bulk-download button: their white pieces */ html[data-theme="dark"] #moveItems_head{ background: var(--vk-field) !important; } html[data-theme="dark"] #moveItems_head i{ color: var(--vk-text) !important; } html[data-theme="dark"] .massivedownload{ border-color: var(--vk-surface); } /* ================================================================ HIS MOCKUP OF 2026-10-03 - dark only, light is untouched His words: "tienes que modificar el diseño y los detalles que he cambiado en la versión dark. solo para la versión dark. ... los bordes redondeados superiores del body son fijos, el buscador del árbol es redondeado como ves, he quitado el borde del right del sidebar, las cajas no tienen borde, como ves, el color de la marca se substituye por el gris que te he puesto aquí (ejemplo: header/sidebar), el buscador de la derecha del header tiene el mismo fondo que el header y el logo no tiene fondo blanco. verás también que la línea de botones debajo del header de la derecha está más próxima al header, proporcional a la distancia al sidebar de la derecha. Este mockup está hecho a conciencia." Every number here was measured on his picture, pixel by pixel, against the page as it was; the colours themselves are his lightening, in view/css/vk_theme.css. The logo's light plate that stood above is gone ("el logo no tiene fondo blanco"). */ /* the brand colour is the frame's grey: the header and its 10 px band, the right-hand bar, the header's search and its button, the sidebar's «Nuevo» - a hub's user wears the hub's colour there (inc/header.php), and the same grey takes its place */ html[data-theme="dark"] header{ background: var(--vk-surface) !important; } html[data-theme="dark"] header .secondline{ border-top-color: var(--vk-surface) !important; border-left-color: var(--vk-surface) !important; } html[data-theme="dark"] .sidebarblock{ background: var(--vk-surface) !important; } /* the bar of the filters chosen (search, type...) above a page of files: no box at all, only its chips (his "quita esta caja", 2026-10-07 - it was a white strip in dark); a chip keeps the colour written on it (the search chip: the brand colour), one without a colour of its own a raised tone */ html[data-theme="dark"] .breadcrumbs{ background: transparent !important; } html[data-theme="dark"] .boxCont .boxInn.cat:not([style*="background"]){ background: var(--vk-raised, #26262d) !important; color: var(--vk-text, #f2f2f5); } html[data-theme="dark"] .boxCont .boxInn.subcat{ color: var(--vk-soft, #a5a5b2); } /* its icons on that dark surface (2026-10-07, his report: a person whose hub's first Primary is a light colour - Todobazar's red - saw them black: they took --vk-brand-ink, the ink for the brand colour the bar has in light, black for a light colour). Light text here; a dark accent chosen in Ajustes still wins (core/vk/hub_brand.php vk_accent_bar_icons_css(), printed after this file) */ html[data-theme="dark"] .sidebarblock a, html[data-theme="dark"] .sidebarblock a > i, html[data-theme="dark"] .sidebarblock a > .fa, html[data-theme="dark"] .sidebarblock a > svg, html[data-theme="dark"] .sidebarblock button > i, html[data-theme="dark"] .sidebarblock .notifc > i{ color: var(--vk-text, #f2f2f5); } /* and the header's search button above it (his "te olvidaste de la lupa del buscador de la esquina derecha superior"): its dark look has a dark background, and styles_custom.php paints its icon in the brand colour's ink with !important - black for a light hub colour */ html[data-theme="dark"] header .formsearchmovil .bnt-primary, html[data-theme="dark"] header .formsearchmovil .bnt-primary i{ color: var(--vk-text, #f2f2f5) !important; } html[data-theme="dark"] header .secondline .form-group, html[data-theme="dark"] header .formsearchmovil .searchmovil .form-group, html[data-theme="dark"] header .secondline .form-control, html[data-theme="dark"] header .secondline form input[type="search"], html[data-theme="dark"] header .secondline button.btn, html[data-theme="dark"] header .secondline button.btn:hover, html[data-theme="dark"] header .secondline button.btn:focus, html[data-theme="dark"] header .secondline button.btn:active{ background: var(--vk-surface) !important; } html[data-theme="dark"] .vkTree-new, html[data-theme="dark"] .vkTree-new:hover{ background: var(--vk-surface) !important; color: #ffffff !important; } /* the order chosen (A-Z / Manual): his grey, white on it */ html[data-theme="dark"] .vkTree-seg button[aria-pressed="true"]{ background: #2a2a31 !important; color: #ffffff !important; } /* «Publicar cambios» when there is something to publish: his near-black, flat, white on it - no blue, no ring, no glow */ @media (max-width: 1125px){ /* the icon on the corner, as before; the wide key is his «Get Started Now» (vk_settings.css, 2026-10-08) */ html[data-theme="dark"] header .secondline .vkPubBtn[data-state="lit"]{ border-color: #121212; background: #121212; color: #ffffff; box-shadow: none; } html[data-theme="dark"] header .secondline .vkPubBtn[data-state="lit"]:hover{ border-color: #2a2a31; background: #2a2a31; } } @media (min-width: 1126px){ /* nothing to publish: the same raised key in the header's own dark grey */ html[data-theme="dark"] header .secondline .vkPubBtn:not([data-state="lit"]){ background: linear-gradient(180deg, #303139 0%, #2a2b32 100%); color: rgba(226, 228, 236, .62); 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 4px #25262c, 0 -1px 0 4px #34353d, 0 8px 14px 2px rgba(0, 0, 0, .45); } html[data-theme="dark"] header .secondline .vkPubBtn:not([disabled]):not([data-state="lit"]):hover{ color: rgba(236, 238, 244, .9); background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%); } } /* the sidebar's right edge: no line */ html[data-theme="dark"] .vkTree{ border-right: 0; } /* the sidebar's search, a rounded field standing free: 21 px from the sidebar's left edge (it was 9), 15 px from its right edge (it ran into the page), 49 px tall, 11 px corners all round. The glass, the «+» and the x keep their spacing and stand 6 px further in, so the glass is 24 px from the field's right edge as the text is 26 px from its left. */ html[data-theme="dark"] .vkTree-search{ margin: 0 15px 0 12px; } html[data-theme="dark"] #vkTreeSearch, html[data-theme="dark"] #vkTreeSearch:focus{ height: 49px; border-radius: 11px; } html[data-theme="dark"] #vkTreeSearch{ padding-right: 80px; } /* his values, 2026-10-08 ("implementa esto", two pictures: the tree's search at rest and with the keyboard in it). The rest also holds while it has the focus (his first picture keeps the pill and its dark fill there; the rules above gave the focus 11 px corners) */ html[data-theme="dark"] #vkTreeSearch, html[data-theme="dark"] #vkTreeSearch:focus{border-radius: 99px;background: linear-gradient( 90deg, #15151ac2, #151519);border-bottom: solid 2px #33333c;border-left: solid 1px #2f2f2f8f;} /* to and from the focus, gently (his "haz que el :focus action tenga interpolacion de estado con el estado normal, ligera", 2026-10-08) */ html[data-theme="dark"] #vkTreeSearch{ transition: box-shadow .3s ease, border-color .3s ease; } @media (prefers-reduced-motion: reduce){ html[data-theme="dark"] #vkTreeSearch{ transition: none; } } html[data-theme="dark"] #vkTreeSearch:focus { outline: 0; box-shadow: 0px -3px 70px #323240; border-bottom: solid 2px #383853 !important; border-left: solid 1px #383853f2 !important; } html[data-theme="dark"] #vkTreeSearch:not(:placeholder-shown){ padding-right: 108px; } html[data-theme="dark"] .vkTree-searchIcon{ right: 24px; } html[data-theme="dark"] .vkTree .vkTree-deep{ right: 45px; } html[data-theme="dark"] .vkTree .vkTree-clear{ right: 73px; } /* the boxes have no border: the hubs' cards, the cards of a hub's brand colours and links, «Colores y enlaces» and «Dar acceso a una persona», and the dashboard's figures and panels («Subir archivos» keeps its ring and «⋯» its line, as in his picture). A box still shows its line while the pointer is on it, as it did. */ html[data-theme="dark"] .vkCard:not(:hover):not(:focus-visible), html[data-theme="dark"] .vkCard--static, html[data-theme="dark"] .vkBrand-sw:not(:hover):not(.is-copied):not(.is-failed), html[data-theme="dark"] .vkBrand-link:not(:hover):not(:focus-visible), html[data-theme="dark"] .vkHead-brand:not(:hover), html[data-theme="dark"] .vkHead-give:not(:hover), html[data-theme="dark"] .vkKpi, html[data-theme="dark"] .vkPanel{ border-color: transparent; } /* the hub cards' own colour, his value (2026-10-08, "implementa: .vkCard { background: #282830;}"); the dark look only - in the light look the card keeps its white and its dark text */ html[data-theme="dark"] .vkCard{ background: #282830; } /* the body's top corners, rounded 19 px and FIXED where the header meets the sidebar and the right-hand bar: the page scrolls under them. Drawn by the two fixed bars themselves, so they stay put, and only where both bars stand beside the page (from 1126 px; under it the sidebar is a drawer and the right-hand bar a corner of the header). */ @media (min-width: 1126px){ html[data-theme="dark"] .vkTree::before, html[data-theme="dark"] .sidebarblock::before{ content: ""; position: absolute; top: 0; width: 16px; height: 16px; pointer-events: none; } /* a sharp 16 px curve (his "arregla estos redondeados borrosos, tienen que estar bien definidos", 2026-10-08): his 13.5 -> 19 px gradient of the same morning left a 5.5 px blur whose middle sat at 16 px, and a step where the curve met the 19 px box's edge; now the curve is the box's own size and its edge half a pixel */ html[data-theme="dark"] .vkTree::before{ left: 100%; background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--vk-surface) 16px); } html[data-theme="dark"] .sidebarblock::before{ right: 100%; background: radial-gradient(circle at 0 100%, transparent 15.5px, var(--vk-surface) 16px); } } /* the buttons of a page's head (Colores y enlaces, Dar acceso, Subir archivos, the folder, ⋯) 38 px higher, in the band of the path, as near the header as they are to the right-hand bar: 17 px under the header, 19 px from the bar, his picture. They keep their place in the row (a transform), so the title still stops where they begin. Only where the path stands right above the head and the window is wide enough for the path and the buttons side by side (from 1600 px); narrower, they stay where they were. */ @media (min-width: 1600px){ html[data-theme="dark"] .vkPath + .vkHead > .vkHead-top > .vkHead-actions{ transform: translateY(-54px); } /* 38 + the 16 px the head came down (2026-10-08, view/css/sidebar_tree.css) */ /* (the rule that took the buttons over a hub's banner is gone with brief CE, 2026-10-12: view/css/sidebar_tree.css) */ } /* ================================================================ THE DARK LOOK'S ACCENT (2026-10-03). His words: "me gustaria que los colores de highlights en el modo oscuro pudieran ser customizables", then, pointing at the file detail's «Reduce», its zoom and comment buttons and the current version's card: "esto tambien lo incluyes no?". One colour for the whole installation, «Acento del modo oscuro» in Ajustes del sistema: view/custom/styles_custom.php prints --vk-violet (and its tint, line and channels, so every accent text, ring and soft background follows by itself) and --vk-hl / --vk-hl-h / --vk-hl-ink for the FILLED highlights below, which had their colour written in. With no accent set none of these variables exists and each falls back to what the dark look had. */ html[data-theme="dark"] .expandBig_style{ background: var(--vk-hl, blue); color: var(--vk-hl-ink, #ffffff); } /* «Expand» / «Reduce» on a file's detail */ html[data-theme="dark"] .watch_item_modal .vkNotesAdd.is-on, html[data-theme="dark"] .watch_item_modal .vkZoomOpen.is-on{ background: var(--vk-hl, #6e1fd1) !important; } html[data-theme="dark"] .watch_item_modal .vkNotesToggle[aria-pressed="true"]{ background: var(--vk-hl, var(--vk-violet)) !important; } html[data-theme="dark"] .watch_item_modal .vkNotesAdd.is-on, html[data-theme="dark"] .watch_item_modal .vkNotesAdd.is-on i, html[data-theme="dark"] .watch_item_modal .vkZoomOpen.is-on, html[data-theme="dark"] .watch_item_modal .vkZoomOpen.is-on i, html[data-theme="dark"] .watch_item_modal .vkNotesToggle[aria-pressed="true"], html[data-theme="dark"] .watch_item_modal .vkNotesToggle[aria-pressed="true"] i{ color: var(--vk-hl-ink, #ffffff) !important; } html[data-theme="dark"] .vkPin{ background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); } html[data-theme="dark"] .vkPin:hover, html[data-theme="dark"] .vkPin.is-open{ background: var(--vk-hl-h, #4f1697); } html[data-theme="dark"] .vkNoteFilter-btn.is-on, html[data-theme="dark"] .vkNotes-count, html[data-theme="dark"] .vkVer-badge, html[data-theme="dark"] .containernews .vkCardVer, html[data-theme="dark"] .vkNoteList-num, html[data-theme="dark"] #userscat .vkAcc-create{ background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); } html[data-theme="dark"] .vkNotePop-btn--main:hover, html[data-theme="dark"] #userscat .vkAcc-create:hover, html[data-theme="dark"] .breadcrumbs .vkGive:hover, html[data-theme="dark"] .vkSes-new:hover, html[data-theme="dark"] #systemsettings .vkSet-btn.is-main:hover:not(:disabled), html[data-theme="dark"] #systemsettings .vkSet-sesNew:hover{ border-color: var(--vk-hl-h, #4f1697); background: var(--vk-hl-h, #4f1697); color: var(--vk-hl-ink, #ffffff); } html[data-theme="dark"] #userscat .vkGive-to:hover{ background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); } html[data-theme="dark"] #vkCover .vkCv-thumb.is-on::after, html[data-theme="dark"] #vkPublic .vkPub-thumb.is-on::after{ background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); } /* ---------------------------------------------------------------- «Personas con enlace» redrawn (2026-10-03): «Tema» pressed as the tree's «A-Z | Manual» is, and the switch, on, in the accent */ html[data-theme="dark"] .vkPeople-theme button[aria-pressed="true"]{ background: #2a2a31; color: #ffffff; } html[data-theme="dark"] .vkPeople-switch input:checked + .vkPeople-switchTrack{ background: var(--vk-hl, #6e1fd1); } /* ---------------------------------------------------------------- the PSD / PSB download button and its menu (2026-10-03, his words: "en el dark mode que se vea blanco, y el dropbody diseñalo acorde nuestro estilo dark, con bordes redondeados"). The icon white as the card's other icons (style.css paints it #000 with !important). The menu is drawn for both looks in style.css (after .buttonunfold) with the tokens, as the app's menus are; here only its deeper shadow */ html[data-theme="dark"] .containernews .capsaitem .contcatoptions .buttonunfold i, html[data-theme="dark"] .containernews .capsaitem .contcatoptions .buttonunfold:hover i{ color: var(--vk-text) !important; } html[data-theme="dark"] .containernews .capsaitem .dropdwn{ box-shadow: 0 14px 34px rgba(0, 0, 0, .45); } /* the right-hand bar's icons white in the dark look, in every state (his words, 2026-10-08: "Los iconos de los botones de la sidebar de la derecha de la app, siempre tienen que ser blancos si esta el dark mode") - they were the text's near-white (241, 240, 245) and could take other colours on hover or when on */ html[data-theme="dark"] .sidebarblock > a, html[data-theme="dark"] .sidebarblock > a:hover, html[data-theme="dark"] .sidebarblock > a:focus, html[data-theme="dark"] .sidebarblock > a i, html[data-theme="dark"] .sidebarblock > a:hover i, html[data-theme="dark"] .sidebarblock > a:focus i, html[data-theme="dark"] .sidebarblock > a[aria-pressed="true"] i, html[data-theme="dark"] .sidebarblock > a.active i, html[data-theme="dark"] .sidebarblock > a.is-on i{ color: #ffffff !important; } /* the tree's list, his values (2026-10-08, "implementa esto"): a dark fade from its top, rounded top corners, 8 px in from each side - the dark look only, as its colours are the dark look's (the light look keeps its list as it was). Retouched by him 2026-10-09 ("implement this"): the fade at 175deg and darker further down, corners 18 px, top 9 px (was linear-gradient(180deg, #18181dd1, #1a1a1f00, transparent), 25px, 10px) */ html[data-theme="dark"] .vkTree-list{ background: linear-gradient(175deg, #18181dd1, #1a1a1ff0, #00000000, transparent); border-radius: 18px 18px 0px 0px; margin-left: 8px; margin-right: 8px; padding-top: 9px; } /* >>> dark type icons (_project/tools/dark_type_icons.py) */ /* THE TYPE ICONS IN THE DARK LOOK (2026-10-10, his words: "cuando detectes que en el darkmode , mide por contraste, en este caso al ser el thumnail blanco no hace estetica con la app. asi que el sistema tiene que saber como comportarse"): a file with no picture of its own shows a white tile with its type's icon; in the dark look it shows that icon's dark twin instead - the white turned black, every colour measured against it and lifted where it would not read. Matched on the address, so every place that draws one (the grid, the detail, the lists) takes it; the light look is untouched. Written by _project/tools/dark_type_icons.py. */ html[data-theme="dark"] img[src*="samplesfile/3d.jpg"]{ content: url("../custom/img/samplesfile/3d-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/blender.jpg"]{ content: url("../custom/img/samplesfile/blender-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/customImage.jpg"]{ content: url("../custom/img/samplesfile/customImage-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/icon_id.jpg"]{ content: url("../custom/img/samplesfile/icon_id-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/icon_id_template.jpg"]{ content: url("../custom/img/samplesfile/icon_id_template-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/icon_id_transfer.jpg"]{ content: url("../custom/img/samplesfile/icon_id_transfer-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/iconkeep.png"]{ content: url("../custom/img/samplesfile/iconkeep-dark.png"); } html[data-theme="dark"] img[src*="samplesfile/matterlogo.png"]{ content: url("../custom/img/samplesfile/matterlogo-dark.png"); } html[data-theme="dark"] img[src*="samplesfile/sample3d-model.jpg"]{ content: url("../custom/img/samplesfile/sample3d-model-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleaidocument.jpg"]{ content: url("../custom/img/samplesfile/sampleaidocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplecss.jpg"]{ content: url("../custom/img/samplesfile/samplecss-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampledefault.jpg"]{ content: url("../custom/img/samplesfile/sampledefault-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampledesign.jpg"]{ content: url("../custom/img/samplesfile/sampledesign-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampledoc.jpg"]{ content: url("../custom/img/samplesfile/sampledoc-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleepsdocument.jpg"]{ content: url("../custom/img/samplesfile/sampleepsdocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleexcel.jpg"]{ content: url("../custom/img/samplesfile/sampleexcel-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplegif.jpg"]{ content: url("../custom/img/samplesfile/samplegif-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplehtml.jpg"]{ content: url("../custom/img/samplesfile/samplehtml-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleicodocument.jpg"]{ content: url("../custom/img/samplesfile/sampleicodocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleimg.jpg"]{ content: url("../custom/img/samplesfile/sampleimg-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplejpg.jpg"]{ content: url("../custom/img/samplesfile/samplejpg-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplejs.jpg"]{ content: url("../custom/img/samplesfile/samplejs-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplemd.jpg"]{ content: url("../custom/img/samplesfile/samplemd-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplemp3document.jpg"]{ content: url("../custom/img/samplesfile/samplemp3document-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleotf.jpg"]{ content: url("../custom/img/samplesfile/sampleotf-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplepdfdocument.jpg"]{ content: url("../custom/img/samplesfile/samplepdfdocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplephp.jpg"]{ content: url("../custom/img/samplesfile/samplephp-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplepng.jpg"]{ content: url("../custom/img/samplesfile/samplepng-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplepsddocument.jpg"]{ content: url("../custom/img/samplesfile/samplepsddocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplerardocument.jpg"]{ content: url("../custom/img/samplesfile/samplerardocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplesounddocument.jpg"]{ content: url("../custom/img/samplesfile/samplesounddocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplesvgdocument.jpg"]{ content: url("../custom/img/samplesfile/samplesvgdocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampletifdocument.jpg"]{ content: url("../custom/img/samplesfile/sampletifdocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplevideodocument.jpg"]{ content: url("../custom/img/samplesfile/samplevideodocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/sampleword.jpg"]{ content: url("../custom/img/samplesfile/sampleword-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/samplezipdocument.jpg"]{ content: url("../custom/img/samplesfile/samplezipdocument-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/videosymbol.jpg"]{ content: url("../custom/img/samplesfile/videosymbol-dark.jpg"); } html[data-theme="dark"] img[src*="samplesfile/videosymbol.png"]{ content: url("../custom/img/samplesfile/videosymbol-dark.png"); } /* <<< dark type icons */