/* sidebar-modern.css — modern reskin for the existing Metronic sidebar. Loaded ONLY when the modern skin is active (see Views/Shared/_Layout.cshtml, gated on modernSkinOn), so the classic sidebar is left completely untouched. Pure visual layer — no menu markup or Metronic JS is modified: - rounded "pill" rows + tuned spacing/typography - menu icons injected via CSS ::before. The top-level
  • items carry stable numeric ids (id="0".."9"), and the icon glyphs come from the already-loaded Simple-Line-Icons font — so NO new image assets are required. - the original teal sidebar background (#55a0b3) is KEPT; only the foreground (text/icon) colours are tuned for contrast on that background. */ .page-sidebar { border-right: 1px solid rgba(255,255,255,.12); } /* ---- Sidebar width (modern skin only) --------------------------------------- rules.css splits the layout 20% / 80% (sidebar / content) for BOTH skins. Here we narrow just the modern menu and hand the freed width back to the content. To make it wider/narrower, change the single value below. ~185px is about the "red line"; below ~185px the longest labels start to wrap. */ :root { --ae-sidebar-w: 265px; } body:not(.full-mode) .page-sidebar { width: var(--ae-sidebar-w) !important; } body:not(.full-mode) .page-content-wrapper { width: calc(100% - var(--ae-sidebar-w)) !important; } /* Full-page mode (the .full-mode-btn toggler adds body.full-mode). rules.css only sets the sidebar to width:0%, which isn't enough for the modern skin: the flex menu rows overflow the zero-width box and stay visible. Clip them and drop the divider so the toggler hides the modern menu just like the classic one. */ body.full-mode .page-sidebar { width: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; border-right: 0 !important; } .page-sidebar-menu { padding:6px 8px 12px 8px !important; background:transparent !important; } .page-sidebar-menu > li { margin-bottom:2px; } .page-sidebar-menu > li > a { display:flex !important; align-items:center; gap:8px; padding:9px 8px !important; border-radius:8px; color:rgba(255,255,255,.92) !important; background:transparent !important; font-size:13.5px; border:none !important; } .page-sidebar-menu > li > a:hover { background:rgba(255,255,255,.12) !important; color:#ffffff !important; } .page-sidebar-menu > li.open > a { background:rgba(255,255,255,.16) !important; color:#ffffff !important; font-weight:600; } .page-sidebar-menu > li.active > a, .page-sidebar-menu > li.active.open > a { background:#255568 !important; color:#ffffff !important; font-weight:600; } /* Existing icons (Home + custom items) tuned for the teal background. */ .page-sidebar-menu > li > a > i { font-size:16px !important; width:16px; color:rgba(255,255,255,.85) !important; margin:0 !important; } /* Inject an icon for each top-level section that has none. Numeric ids can't be written as #0 in CSS, so match via [id="…"]. Glyphs = Simple-Line-Icons. */ .page-sidebar-menu > li[id="2"] > a::before, .page-sidebar-menu > li[id="3"] > a::before, .page-sidebar-menu > li[id="8"] > a::before, .page-sidebar-menu > li[id="9"] > a::before { font-family:'Simple-Line-Icons'; font-size:16px; width:16px; display:inline-block; text-align:center; line-height:1; color:rgba(255,255,255,.85); -webkit-font-smoothing:antialiased; } .page-sidebar-menu > li[id="9"] > a::before { content:"\e063"; } /* Live auction — microphone */ .page-sidebar-menu > li[id="2"] > a::before { content:"\e084"; } /* Auction import — cloud-upload */ .page-sidebar-menu > li[id="3"] > a::before { content:"\e09a"; } /* Settings — settings */ .page-sidebar-menu > li[id="8"] > a::before { content:"\e04c"; } /* Catalog — book-open */ /* Some items use inline-SVG icons instead of a font glyph: Lot management (QR), Auction management (gavel), Invoicing (doc+euro), Manage text (doc+pencil), Bidder management (raised hand, filled). Rendered via CSS mask so the shape is painted with the sidebar text colour (background-color:currentColor) — so they stay white and follow hover/active like the text. The mask SVGs are solid black (mask uses alpha only); colour comes from currentColor. */ .page-sidebar-menu > li[id="0"] > a::before, .page-sidebar-menu > li[id="1"] > a::before, .page-sidebar-menu > li[id="4"] > a::before, .page-sidebar-menu > li[id="5"] > a::before, .page-sidebar-menu > li[id="6"] > a::before { content:""; width:16px; height:16px; display:inline-block; flex:0 0 auto; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .page-sidebar-menu > li[id="5"] > a::before { /* Bidder management — raised hand */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'translate(12%2012)%20scale(1.2325)%20translate(-12.7000%20-12.6250)'%3E%3Cpath%20d%3D'M6.9%2020.6%20C6.9%2014.8%208.1%2013.4%2010.6%2013.4%20C12.1%2013.4%2012.9%2014.1%2014.9%2014.1%20C17.4%2014.1%2018.5%2015.6%2018.5%2020.6%20Z'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5415909090909092'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M8.7%2013%20C8%2010.6%208.2%207.4%209.3%205.6'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.759'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'7.4'%20r%3D'3.7'%20fill%3D'black'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'translate(12%2012)%20scale(1.2325)%20translate(-12.7000%20-12.6250)'%3E%3Cpath%20d%3D'M6.9%2020.6%20C6.9%2014.8%208.1%2013.4%2010.6%2013.4%20C12.1%2013.4%2012.9%2014.1%2014.9%2014.1%20C17.4%2014.1%2018.5%2015.6%2018.5%2020.6%20Z'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5415909090909092'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M8.7%2013%20C8%2010.6%208.2%207.4%209.3%205.6'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.759'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'7.4'%20r%3D'3.7'%20fill%3D'black'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .page-sidebar-menu > li[id="0"] > a::before { /* Lot management — QR code */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Crect%20x%3D'3.5'%20y%3D'3.5'%20width%3D'6'%20height%3D'6'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'3.5'%20width%3D'6'%20height%3D'6'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'3.5'%20y%3D'14.5'%20width%3D'6'%20height%3D'6'%20rx%3D'1.2'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'black'%3E%3Crect%20x%3D'5.7'%20y%3D'5.7'%20width%3D'1.6'%20height%3D'1.6'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'16.7'%20y%3D'5.7'%20width%3D'1.6'%20height%3D'1.6'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'5.7'%20y%3D'16.7'%20width%3D'1.6'%20height%3D'1.6'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'14.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'18.5'%20y%3D'14.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'18.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'18.5'%20y%3D'18.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Crect%20x%3D'3.5'%20y%3D'3.5'%20width%3D'6'%20height%3D'6'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'3.5'%20width%3D'6'%20height%3D'6'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'3.5'%20y%3D'14.5'%20width%3D'6'%20height%3D'6'%20rx%3D'1.2'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'black'%3E%3Crect%20x%3D'5.7'%20y%3D'5.7'%20width%3D'1.6'%20height%3D'1.6'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'16.7'%20y%3D'5.7'%20width%3D'1.6'%20height%3D'1.6'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'5.7'%20y%3D'16.7'%20width%3D'1.6'%20height%3D'1.6'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'14.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'18.5'%20y%3D'14.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'14.5'%20y%3D'18.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3Crect%20x%3D'18.5'%20y%3D'18.5'%20width%3D'2'%20height%3D'2'%20rx%3D'.3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .page-sidebar-menu > li[id="1"] > a::before { /* Auction management — gavel */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'translate(12%2012)%20scale(1.4065)%20translate(-14.85%20-9.35)'%3E%3Cg%20transform%3D'rotate(-45%2013%207.5)'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.351'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Crect%20x%3D'7.5'%20y%3D'4.5'%20width%3D'11'%20height%3D'6'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M10.4%204.7v5.6'%2F%3E%3Cpath%20d%3D'M15.6%204.7v5.6'%2F%3E%3Cpath%20d%3D'M13%2010.5v4.8'%2F%3E%3Crect%20x%3D'10.8'%20y%3D'15.2'%20width%3D'4.4'%20height%3D'3.6'%20rx%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'translate(12%2012)%20scale(1.4065)%20translate(-14.85%20-9.35)'%3E%3Cg%20transform%3D'rotate(-45%2013%207.5)'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.351'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Crect%20x%3D'7.5'%20y%3D'4.5'%20width%3D'11'%20height%3D'6'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M10.4%204.7v5.6'%2F%3E%3Cpath%20d%3D'M15.6%204.7v5.6'%2F%3E%3Cpath%20d%3D'M13%2010.5v4.8'%2F%3E%3Crect%20x%3D'10.8'%20y%3D'15.2'%20width%3D'4.4'%20height%3D'3.6'%20rx%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .page-sidebar-menu > li[id="4"] > a::before { /* Invoicing — document + euro */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Cpath%20d%3D'M6.5%203.5h7l4.5%204.5v12a1%201%200%200%201-1%201H6.5a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1z'%2F%3E%3Cpath%20d%3D'M13%203.7V8h4.3'%2F%3E%3Cpath%20d%3D'M14.2%2012.2a3.2%203.2%200%201%200%200%205.2'%2F%3E%3Cpath%20d%3D'M8.6%2013.6h4.2'%2F%3E%3Cpath%20d%3D'M8.4%2015.6h4.2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Cpath%20d%3D'M6.5%203.5h7l4.5%204.5v12a1%201%200%200%201-1%201H6.5a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1z'%2F%3E%3Cpath%20d%3D'M13%203.7V8h4.3'%2F%3E%3Cpath%20d%3D'M14.2%2012.2a3.2%203.2%200%201%200%200%205.2'%2F%3E%3Cpath%20d%3D'M8.6%2013.6h4.2'%2F%3E%3Cpath%20d%3D'M8.4%2015.6h4.2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .page-sidebar-menu > li[id="6"] > a::before { /* Manage text — document + pencil */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Cpath%20d%3D'M13.5%2020.5H6.5a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1h7l4.5%204.5v3'%2F%3E%3Cpath%20d%3D'M13%203.7V8h4.3'%2F%3E%3Cpath%20d%3D'M8.5%2012h4'%2F%3E%3Cpath%20d%3D'M8.5%2015h3'%2F%3E%3Cpath%20d%3D'M20.7%2013.9l-5.1%205.1-2.4.6.6-2.4%205.1-5.1a1.1%201.1%200%200%201%201.6%200l.2.2a1.1%201.1%200%200%201%200%201.6z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20fill%3D'none'%3E%3Cpath%20d%3D'M13.5%2020.5H6.5a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1h7l4.5%204.5v3'%2F%3E%3Cpath%20d%3D'M13%203.7V8h4.3'%2F%3E%3Cpath%20d%3D'M8.5%2012h4'%2F%3E%3Cpath%20d%3D'M8.5%2015h3'%2F%3E%3Cpath%20d%3D'M20.7%2013.9l-5.1%205.1-2.4.6.6-2.4%205.1-5.1a1.1%201.1%200%200%201%201.6%200l.2.2a1.1%201.1%200%200%201%200%201.6z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .page-sidebar-menu .title { flex:1; } .page-sidebar-menu .arrow { color:rgba(255,255,255,.55); transition:transform .18s ease; display:inline-block; } .page-sidebar-menu > li.open > a > .arrow { transform:rotate(90deg); } .page-sidebar-menu ul.sub-menu { margin-left:12px !important; padding-left:14px !important; border-left:1px solid rgba(255,255,255,.18); background:transparent !important; } .page-sidebar-menu ul.sub-menu > li > a { padding:7px 10px !important; font-size:13px !important; color:rgba(255,255,255,.70) !important; border-radius:6px; background:transparent !important; } .page-sidebar-menu ul.sub-menu > li > a:hover { background:rgba(255,255,255,.12) !important; color:#ffffff !important; } .page-sidebar-menu ul.sub-menu > li.active > a { color:#ffffff !important; font-weight:600; background:rgba(255,255,255,.16) !important; } /* "Recent" section (injected by recent-menu.js) — always expanded, never collapses. Force the sub-menu open so a delegated Metronic toggle can't hide it. */ .page-sidebar-menu > li#recent-menu > ul.sub-menu { display:block !important; } .page-sidebar-menu > li#recent-menu > a.ae-recent-head { cursor:default; background:rgba(255,255,255,.16) !important; color:#ffffff !important; font-weight:600; } .page-sidebar-menu > li#recent-menu .ae-recent-more > a { color:rgba(255,255,255,.6) !important; font-size:12px !important; } .page-sidebar-menu > li#recent-menu .ae-recent-more > a:hover { color:#ffffff !important; background:transparent !important; } /* Recent rows: type icon + truncating label on one line. */ .page-sidebar-menu > li#recent-menu ul.sub-menu > li > a { display:flex; align-items:center; gap:8px; } .page-sidebar-menu > li#recent-menu ul.sub-menu > li > a > i { font-size:14px !important; width:14px; text-align:center; color:rgba(255,255,255,.6) !important; flex:0 0 auto; } .page-sidebar-menu > li#recent-menu ul.sub-menu > li > a > svg { width:14px; height:14px; flex:0 0 auto; color:rgba(255,255,255,.6); } .page-sidebar-menu > li#recent-menu .ae-recent-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }