/* ── Media library toolbar alignment ───────────────────────────────────────── The buttons above the file list did not sit on a common baseline: the view-mode toggles on the left rendered ~50px tall while Upload, Toggle edit mode, Toggle select all and the Selected-actions popout rendered ~66px. Cause: custom.min.css sets `display:block` on the icon inside every .viewType_btn:not(.vexc) — and on #entry-action-buttons i.icon-menu. A block icon forces the button's label onto a SECOND line, so those buttons grew by roughly the height of one text row. The view-mode toggles escape it because they carry .vexc (excluded by that rule) and hold an icon with no label, so they stay single-line. Nothing was wrong with the widths — it was the icon's display mode splitting some buttons over two lines and not others. The fix puts the icon back inline so icon and label share one line, then pins one height for the whole row. Scoped to #wrapper.tpl_files: tpl_body.tpl puts the page-display class on #wrapper, NOT on , so a body-scoped rule would silently never match. The id also outranks the long .tpl_files .filter .btn-group… chains in custom.min.css. !important is on the icon display because that source rule lives in a minified vendor stylesheet whose selector list we do not control and which would otherwise win. */ #wrapper.tpl_files .viewType_btn:not(.vexc) span i, #wrapper.tpl_files #entry-action-buttons i.icon-menu { display: inline-block !important; line-height: inherit !important; vertical-align: middle; margin-right: 5px; } #wrapper.tpl_files .btn-group.viewType .viewType_btn, #wrapper.tpl_files #entry-action-buttons { height: 34px; line-height: 32px; box-sizing: border-box; /* or the padding below would re-inflate them */ vertical-align: middle; } #wrapper.tpl_files .viewType_btn:not(.vexc), #wrapper.tpl_files #entry-action-buttons { padding: 0 10px; } /* ── Selected-actions popout position ──────────────────────────────────────── custom.min.css places this dropdown with fixed vertical offsets (`margin-top:22px`, and 13px in the .sortings context). Those numbers were tuned for the old two-line ~66px button, so once the button collapsed to a single 34px line the menu detached and floated ~21px below it. Anchoring to top:100% ties the menu to the button's own height instead of a magic number, so it stays flush if the button size ever changes again. Only the vertical placement is overridden — right/left/margin-left are left to the existing rules so the library, sortings and playlist contexts each keep their own horizontal alignment. */ #wrapper.tpl_files #entry-action-buttons .dl-menu { top: 100% !important; margin-top: 2px !important; } /* ── Toolbar: one scrolling row ────────────────────────────────────────────── The toolbar is built from TWO sibling sections, not one:
media-type tabs (Videos…Blogs)
Add New, Toggle Edit, Toggle Select All, Selection Actions Because they are separate sections they always stacked as two lines, and the second floated right — measured on a 2994px capture the tabs began at x=126 and the action row at x=1100. No selector can merge two siblings, so library_toolbar.js moves both into a single .vs-tb-strip and this styles that strip as one non-wrapping row that scrolls horizontally, with arrows for the overflow. Every button keeps the same height and baseline, and nothing is pushed onto a second, differently-aligned line. */ #wrapper.tpl_files .vs-tb-strip { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; } #wrapper.tpl_files .vs-tb-strip::-webkit-scrollbar { height: 0; display: none; } /* The sections and their groups carried float:left / .pull-right, which is what split them across two lines; as flex items they sit in the one row. */ #wrapper.tpl_files .vs-tb-strip > section, #wrapper.tpl_files .vs-tb-strip .btn-group.viewType { float: none !important; flex: 0 0 auto; /* natural width — never squashed to fit */ margin-bottom: 0 !important; } #wrapper.tpl_files .vs-tb-strip > section { display: flex; align-items: center; gap: 8px; width: auto !important; } #wrapper.tpl_files .vs-tb-strip .d-flex { flex-wrap: nowrap; } /* The promo placeholder is empty here and would otherwise eat row space. */ #wrapper.tpl_files .vs-tb-strip .promo:empty { display: none; } /* Arrows, injected by library_toolbar.js, shown only when the row overflows. */ #wrapper.tpl_files .vs-tb-wrap { position: relative; } #wrapper.tpl_files .vs-tb-arrow { position: absolute; top: 0; bottom: 0; width: 34px; z-index: 5; display: none; align-items: center; justify-content: center; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; background: rgba(255,255,255,.92); color: #505050; box-shadow: 0 0 10px rgba(0,0,0,.18); } #wrapper.tpl_files .vs-tb-arrow.is-on { display: flex; } #wrapper.tpl_files .vs-tb-arrow-l { left: 0; } #wrapper.tpl_files .vs-tb-arrow-r { right: 0; } #wrapper.tpl_files .vs-tb-arrow:hover { background: #fff; } body.enhanced-mode #wrapper.tpl_files .vs-tb-arrow { background: #3d1d3f; color: #FFC90E; box-shadow: 0 0 10px rgba(0,0,0,.45); } body.enhanced-mode #wrapper.tpl_files .vs-tb-arrow:hover { background: #562b58; } /* The Selection Actions dropdown is a child of the strip, and a scroll container clips its children. (overflow-y:visible does not help: per spec, if one axis is not visible the other computes to auto.) The JS sets this class while the menu is open so it can paint over the page. */ #wrapper.tpl_files .vs-tb-strip.vs-tb-menuopen { overflow: visible; } /* ── No filled panels behind toolbar buttons ───────────────────────────────── class.files.php renders Toggle Edit Mode with .active already applied, and the current media type (Videos) carries .active too, so both sat inside a lighter filled box while their neighbours had none — the toolbar read as randomly highlighted rather than as a row of equals. Only the resting/active fill is cleared. :hover is deliberately left alone, so the buttons still respond to the pointer. */ #wrapper.tpl_files .vs-tb-strip .viewType_btn, #wrapper.tpl_files .vs-tb-strip .viewType_btn.active, #wrapper.tpl_files .vs-tb-strip .viewType_btn-default, #wrapper.tpl_files .vs-tb-strip .viewType_btn-default.active, #wrapper.tpl_files .vs-tb-strip .viewType_btn:active, #wrapper.tpl_files .vs-tb-strip #entry-action-buttons { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; } /* The groups themselves also carry a panel background in places. */ #wrapper.tpl_files .vs-tb-strip .btn-group.viewType, #wrapper.tpl_files .vs-tb-strip > section { background: transparent !important; box-shadow: none !important; }