/* ========================================================= RatedTunes Sidebar Clean CSS SINGLE SOURCE OF TRUTH Loaded after rt-custom_new.css ========================================================= */ :root { --rt-sidebar-height: 850px; } /* Sidebar panel */ html body .ms_sidemenu_wrapper { position: absolute !important; top: 14px !important; left: 18px !important; width: 250px !important; height: var(--rt-sidebar-height) !important; min-height: var(--rt-sidebar-height) !important; max-height: var(--rt-sidebar-height) !important; margin: 0 !important; overflow: hidden !important; border-radius: 42px !important; border: 3px solid rgba(0, 170, 255, 1) !important; background: radial-gradient(circle at 22% 8%, rgba(0,190,255,.14), transparent 28%), linear-gradient(180deg, #071626 0%, #03101d 52%, #020913 100%) !important; box-shadow: -1px 0 20px rgba(0, 220, 255, 1), 0 0 20px rgba(0, 170, 255, 0.95), inset 4px 1px 20px rgba(0, 120, 255, 0.82), inset 2px 0 0 20px rgba(16, 0, 255, 0.54) !important; } /* Inner metal frame */ html body .ms_sidemenu_wrapper::before { content: '' !important; position: absolute !important; inset: 18px 14px 18px 14px !important; border-radius: 34px !important; border: 5px solid rgba(15, 141, 199, 0.78) !important; background: linear-gradient( 135deg, rgb(86 96 161), #44242470 22%, #195c9f78 76%, rgba(0, 170, 255, .08) ) !important; box-shadow: inset 0 0 0 1px rgba(56, 0, 255, 0.44), inset 0 0 42px rgb(9 14 20), 0 0 34px rgba(0, 150, 255, .22), 0 0 160px rgba(0, 120, 255, .22) !important; filter: brightness(0.5) saturate(2) !important; pointer-events: none !important; z-index: 1 !important; } /* Hide old logo/nav */ html body .ms_logo, html body .ms_logo_inner, html body .logo_inner, html body .ms_nav_close, html body .ms_sidemenu_wrapper .nav_heading { display: none !important; } /* Logo */ html body #rt-sidebar-logo { position: relative !important; z-index: 5 !important; display: block !important; padding: 35px 0 34px !important; text-align: center !important; } html body #rt-sidebar-logo img { width: 180px !important; max-width: 82% !important; height: auto !important; display: block !important; margin: 0 auto !important; opacity: 1 !important; visibility: visible !important; filter: brightness(2) drop-shadow(0 0 12px rgba(0, 26, 255, 1)) !important; } /* Nav position */ html body .ms_nav_wrapper { position: absolute !important; top: 160px !important; left: 0 !important; right: 0 !important; bottom: 18px !important; height: auto !important; overflow: visible !important; z-index: 5 !important; } /* Menu wrapper */ html body .ms_sidemenu_wrapper ul, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu { position: relative !important; z-index: 5 !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 60px 25px 0 24px !important; list-style: none !important; } /* Menu item */ html body .ms_sidemenu_wrapper ul li, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li { display: block !important; height: 31px !important; min-height: 31px !important; max-height: 31px !important; margin: 0 0 8px 0 !important; padding: 0 !important; list-style: none !important; } /* Menu link normal */ html body .ms_sidemenu_wrapper ul li a, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a { position: relative !important; z-index: 6 !important; display: flex !important; align-items: center !important; height: 31px !important; min-height: 31px !important; max-height: 31px !important; padding: 0 10px 0 14px !important; color: #8799ad !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; line-height: 31px !important; white-space: nowrap !important; border: 1px solid transparent !important; border-radius: 20px !important; background: transparent !important; transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, filter 0.22s ease !important; } /* Icon */ html body .ms_sidemenu_wrapper ul li a i, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a i { width: 16px !important; min-width: 16px !important; margin-right: 10px !important; color: #8799ad !important; font-family: FontAwesome !important; font-size: 14px !important; transition: color 0.22s ease, text-shadow 0.22s ease, transform 0.22s ease !important; } /* Text */ html body .ms_sidemenu_wrapper ul li a span, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a span { color: #8799ad !important; transition: color 0.22s ease, text-shadow 0.22s ease, transform 0.22s ease !important; } /* Menu hover / active glow */ html body .ms_sidemenu_wrapper ul li a:hover, html body .ms_sidemenu_wrapper ul li.active a, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a:hover, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li.active a { color: #ffffff !important; background: linear-gradient( 90deg, rgba(0, 140, 255, .24) 0%, rgba(0, 120, 255, .12) 34%, rgba(0, 0, 0, 0) 100% ) !important; border-color: rgba(90, 190, 255, 1) !important; box-shadow: /* 0 0 10px rgba(0, 240, 255, 1), 0 0 15px rgba(0, 220, 255, 1), 0 0 10px 2px rgba(0, 190, 255, .92), 0 0 10px 2px rgba(0, 140, 255, .72), inset 0 0 200px rgba(0, 120, 255, .42) !important; */ backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; /* transform: translateX(3px) !important; */ /* filter: brightness(1.05) saturate(1.12) !important; */ } /* Hover text and icons */ html body .ms_sidemenu_wrapper ul li a:hover span, html body .ms_sidemenu_wrapper ul li.active a span, html body .ms_sidemenu_wrapper ul li a:hover i, html body .ms_sidemenu_wrapper ul li.active a i, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a:hover span, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li.active a span, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a:hover i, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li.active a i { color: #ffffff !important; /* text-shadow: 0 0 6px rgba(0, 240, 255, .90), 0 0 14px rgba(0, 160, 255, .60) !important; } */ /* ========================================================= LAYOUT 2 ORIGINAL SIDEBAR BACKGROUND — FINAL Correct file: rt-sidebar-clean.css ========================================================= */ html body .ms_sidemenu_wrapper { background: linear-gradient( 90deg, rgba(0, 220, 255, .18) 0%, rgba(0, 120, 255, .10) 18%, rgba(0, 0, 0, 0) 42% ), linear-gradient( 180deg, #071626 0%, #03101d 52%, #020913 100% ) !important; } /* Menu hover / active glow */ html body .ms_sidemenu_wrapper ul li a:hover, html body .ms_sidemenu_wrapper ul li.active a, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li a:hover, html body .ms_sidemenu_wrapper ul.rt-sidebar-menu li.active a { color: #ffffff !important; background: linear-gradient( 90deg, rgba(0, 140, 255, 0.24) 0%, rgba(0, 120, 255, 0.12) 34%, rgba(0, 0, 0, 0) 100% ) !important; border-color: rgba(90, 190, 255, 1) !important; /* Внешнее и внутреннее свечение menu item */ box-shadow: 0 0 10px rgba(0, 240, 255, 1), 0 0 15px rgba(0, 220, 255, 1), 0 0 10px 2px rgba(0, 190, 255, 0.92), 0 0 10px 2px rgba(0, 140, 255, 0.72), inset 0 0 200px rgba(0, 120, 255, 0.42) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }