/* ============================================================================ WORKSPACE PINNING ============================================================================ Turns the sidebar's "Workspace" group into a personal shortcut list: a hover-only pin (or unpin, on a row already pinned) on every sidebar item, and a "Customize Workspace" popover on the group's own title button listing what is pinned and what is available. Nothing here restyles the sidebar. Every value below is either lifted from vryno-sidebar-customize.css (same 22px control, same 6px radius, same popover shell, same grey ramp) or inherited outright, so the new controls read as parts of the sidebar that were always there. The row button in particular is invisible until its row is hovered -- the sidebar at rest looks byte-for-byte as it did before. The popover is appended to , not nested in the row it belongs to. The sidebar is a fixed 200px column inside a SimpleBar scroll area, so anything absolutely positioned within it is clipped the instant it would extend past that column -- the same reason vryno-sidebar-customize.css gives for its own popover. ============================================================================ */ /* ---- the hover pin / unpin on a sidebar item ---------------------------- */ /* The row is the positioning context and needs room on the right for the button. Padding rather than margin on the anchor, so the row's own hover background still spans the full width. */ .sidebar .sidebar-menu>ul li>ul>li { position: relative; } .vr-ws-dots { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gray-500, #707070); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease, background-color .15s ease, color .15s ease; z-index: 2; } .vr-ws-dots i { font-size: 15px; line-height: 1; } /* Revealed on row hover and on keyboard focus. */ .sidebar .sidebar-menu>ul li>ul>li:hover>.vr-ws-dots, .vr-ws-dots:focus-visible { opacity: .8; pointer-events: auto; } /* Scoped as tightly as the reveal rule above, or that rule's opacity: .8 wins on specificity and the button never brightens under the pointer -- it stayed at the same .8 as the rest of the revealed row, so there was no feedback that the thing was hoverable at all. */ .vr-ws-dots:hover, .sidebar .sidebar-menu>ul li>ul>li:hover>.vr-ws-dots:hover { opacity: 1; background: rgba(130, 130, 150, .16); color: var(--primary, #482dc1); } /* Pin is an add, so it takes the brand colour on hover; unpin is a remove and stays neutral, so the two do not look like the same click twice. The icon itself already says which is which (ti-pin vs ti-pinned-off) -- this only keeps the colour from claiming otherwise. */ .vr-ws-dots[data-pinned="1"]:hover { color: var(--gray-900, #1c1b2d); } /* An active (purple) row carries white text, so the button has to follow it or it disappears into the fill. */ .sidebar .sidebar-menu>ul li>ul>li>a.active~.vr-ws-dots { color: #fff; } .sidebar .sidebar-menu>ul li>ul>li>a.active~.vr-ws-dots:hover { background: rgba(255, 255, 255, .22); color: #fff; } /* Keep the label clear of the button while the row is hovered. Only while hovered, so nothing shifts for rows nobody is pointing at, and only on rows that actually have a button. */ .sidebar .sidebar-menu>ul li>ul>li:has(>.vr-ws-dots):hover>a { padding-right: 32px; } /* No room for it at icon-only width -- same treatment the section button gets in vryno-sidebar-customize.css, including coming back once Hover View has expanded the column to readable width again. */ .mini-sidebar .sidebar .vr-ws-dots { display: none; } .expand-menu.mini-sidebar .sidebar .vr-ws-dots { display: inline-flex; } /* The row button used to open a one-item ⋯ menu (.vr-ws-menu) to pin or unpin. The button now does it on the click itself, so that menu -- and everything that styled it -- is gone. */ /* ---- Customize Workspace popover --------------------------------------- Same shell as .vr-sc-pop (fixed, 264px, 10px radius, same shadow) but a little wider and taller: it lists every pinnable page in the product, not one section's handful of items. */ .vr-ws-pop { position: fixed; width: 300px; max-height: min(520px, calc(100vh - 24px)); display: none; flex-direction: column; z-index: 100000; background: var(--white, #fff); border: 0; border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 20, 40, .18); } .vr-ws-pop.vr-ws-open { display: flex; } .vr-ws-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--gray-100, #ececec); flex-shrink: 0; } .vr-ws-pop-title { font-size: 13px; font-weight: 600; color: var(--gray-900, #1c1b2d); } .vr-ws-pop-close { border: 0; background: none; color: var(--gray-500, #707070); width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .vr-ws-pop-close:hover { background: var(--gray-100, #ececec); } .vr-ws-search { position: relative; padding: 8px 12px; flex-shrink: 0; } .vr-ws-search i { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--gray-400, #b3b3bd); pointer-events: none; } .vr-ws-search input { width: 100%; height: 32px; padding: 0 8px 0 28px; border: 1px solid var(--gray-200, #e6e6ec); border-radius: 8px; background: var(--white, #fff); font-size: 12.5px; color: var(--gray-900, #1c1b2d); } .vr-ws-search input:focus { outline: none; border-color: var(--primary, #482dc1); } .vr-ws-body { overflow-y: auto; /* Stops the wheel chaining to the page once this list hits its end. A page scroll counts as an outside scroll and closes the popover (it would move the trigger), so without this, reaching the bottom of the list and carrying on scrolling would shut it. */ overscroll-behavior: contain; padding: 2px 8px 8px; flex: 1; min-height: 0; } .vr-ws-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400, #9a9aa6); padding: 10px 4px 5px; } .vr-ws-sec:first-child { padding-top: 4px; } .vr-ws-sec .vr-ws-sec-n { font-weight: 600; letter-spacing: normal; } /* An app's name inside the Available list -- a second, quieter level under the "Available" heading, so 80-odd entities stay scannable. */ .vr-ws-grp { font-size: 11px; font-weight: 600; color: var(--gray-500, #707070); padding: 8px 4px 3px; display: flex; align-items: center; gap: 6px; } .vr-ws-grp i { font-size: 13px; color: var(--gray-400, #b3b3bd); } .vr-ws-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; background: var(--white, #fff); } .vr-ws-row:hover { background: #eeeeee; } .vr-ws-row.vr-ws-pinned-row { cursor: grab; } .vr-ws-row.vr-ws-dragging { opacity: .35; } .vr-ws-drag { color: var(--gray-400, #b3b3bd); font-size: 14px; flex-shrink: 0; width: 14px; text-align: center; } .vr-ws-check { color: var(--primary, #482dc1); font-size: 15px; flex-shrink: 0; width: 16px; text-align: center; } .vr-ws-icon { font-size: 14px; color: var(--gray-500, #707070); flex-shrink: 0; width: 16px; text-align: center; } .vr-ws-label { font-size: 13px; color: var(--gray-900, #1c1b2d); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pin / Unpin: text-free at rest so the list is a clean column of names, labelled on hover of its row. */ .vr-ws-act { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 20px; background: none; font-size: 11.5px; font-weight: 600; color: var(--gray-500, #707070); cursor: pointer; flex-shrink: 0; opacity: 0; transition: opacity .12s ease; } .vr-ws-act i { font-size: 13px; } .vr-ws-row:hover .vr-ws-act, .vr-ws-act:focus-visible { opacity: 1; } .vr-ws-act-pin { color: var(--primary, #482dc1); border-color: var(--primary, #482dc1); } .vr-ws-act-pin:hover { background: var(--primary, #482dc1); color: #fff; } .vr-ws-act-unpin:hover { border-color: var(--gray-200, #e6e6ec); background: var(--white, #fff); color: var(--gray-900, #1c1b2d); } .vr-ws-empty { font-size: 12px; color: var(--gray-500, #707070); padding: 12px 6px; text-align: center; } .vr-ws-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--gray-100, #ececec); flex-shrink: 0; } .vr-ws-reset { font-size: 12px; color: var(--primary, #482dc1); cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; } .vr-ws-done { font-size: 12px; padding: 4px 12px; } /* ---- drag feedback in the sidebar itself -------------------------------- Reordering is offered in both places someone would try it: the popover's Pinned list and the real Workspace rows. */ .sidebar .sidebar-menu>ul li>ul>li.vr-ws-sb-dragging { opacity: .4; } .sidebar .sidebar-menu>ul li>ul>li.vr-ws-sb-over>a { box-shadow: inset 0 2px 0 0 var(--primary, #482dc1); } .sidebar .sidebar-menu>ul li>ul>li.vr-ws-sb-over-after>a { box-shadow: inset 0 -2px 0 0 var(--primary, #482dc1); }