/* ============================================================================ SIDEBAR SECTION CUSTOMIZE ============================================================================ Every sidebar section (Workspace, a module's own groups such as Bookings / Manage) gets a subtle sliders icon at the end of its title row. It stays invisible until that row is hovered or its popover is open, so the sidebar looks exactly as it always has until someone goes looking for it. The popover itself is appended to and positioned with JS (see vryno-sidebar-customize.js) rather than nested under the sidebar, because the sidebar is a fixed 200px column wrapped in a SimpleBar scroll area -- anything absolutely positioned inside it gets clipped the moment it would extend past that column. ============================================================================ */ .sidebar .sidebar-menu>ul li.menu-title { justify-content: space-between; } .vr-sc-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--menu-title-color); /* opacity: 0.6; */ background: transparent; border: 0; opacity: 1; transition: opacity .15s ease, background-color .15s ease, color .15s ease; text-transform: none; letter-spacing: normal; font-weight: 400; flex-shrink: 0; cursor: pointer; margin-left: 8px; } .sidebar .sidebar-menu>ul li.menu-title:hover .vr-sc-btn, .vr-sc-btn.vr-sc-btn-active { opacity: .85; } .vr-sc-btn:hover, .vr-sc-btn.vr-sc-btn-active { background: rgba(130, 130, 150, .16); color: var(--primary, #482dc1); opacity: 1; } .vr-sc-btn i { font-size: 13px; } .mini-sidebar .sidebar .sidebar-menu>ul li.menu-title .vr-sc-btn { display: none; } /* Hover View is a mini-sidebar that widens back out over the page on hover (theme-script.js/script.js add .expand-menu alongside .mini-sidebar while the pointer is over it). There's no room for the button -- or the label it belongs to -- at icon-only width, so it stays hidden by the rule above; once hovering has actually expanded the section back to its full, readable width, bring the button back too, same as it's always shown in the Default layout. */ .expand-menu.mini-sidebar .sidebar .sidebar-menu>ul li.menu-title .vr-sc-btn { display: inline-flex; } /* ---- popover ------------------------------------------------------------ */ .vr-sc-pop { position: fixed; width: 264px; max-height: min(420px, calc(100vh - 24px)); overflow-y: auto; z-index: 100000; padding: 10px; display: none; background: var(--white, #fff); border: 0; border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 20, 40, .18); } .vr-sc-pop.vr-sc-open { display: block; } .vr-sc-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--gray-100, #ececec); } .vr-sc-pop-title { font-size: 13px; font-weight: 600; color: var(--gray-900, #1c1b2d); } .vr-sc-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; } .vr-sc-pop-close:hover { background: var(--gray-100, #ececec); } .vr-sc-hint { font-size: 11px; color: var(--gray-500, #707070); padding: 4px 2px 8px; } .vr-sc-list { display: flex; flex-direction: column; gap: 1px; } .vr-sc-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: grab; background: var(--white, #fff); } .vr-sc-row:hover { background: #f5f5f5; } .vr-sc-row.vr-sc-dragging { opacity: .35; } .vr-sc-row.vr-sc-locked { cursor: default; } .vr-sc-drag { color: var(--gray-400, #b3b3bd); font-size: 14px; flex-shrink: 0; width: 14px; text-align: center; } .vr-sc-row input[type=checkbox] { margin: 0; flex-shrink: 0; accent-color: var(--primary, #482dc1); } .vr-sc-icon { font-size: 14px; color: var(--gray-500, #707070); flex-shrink: 0; width: 16px; text-align: center; } .vr-sc-label { font-size: 13px; color: var(--gray-900, #1c1b2d); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vr-sc-locked .vr-sc-label { color: var(--gray-700, #4b4b58); } .vr-sc-lock { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--gray-400, #9a9aa6); display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; white-space: nowrap; } .vr-sc-lock i { font-size: 11px; } .vr-sc-drop-line { height: 2px; background: var(--primary, #482dc1); border-radius: 2px; margin: 3px 6px; } .vr-sc-pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--gray-100, #ececec); } .vr-sc-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-sc-reset:hover { text-decoration: underline; } */ .vr-sc-done { font-size: 12px; padding: 4px 12px; } .vr-sc-empty { font-size: 12px; color: var(--gray-500, #707070); padding: 10px 4px; text-align: center; }