File size: 6,241 Bytes
3fe363c | 1 2 | .menu-container{grid-area:menu;width:14.375rem;will-change:width;transform:translateZ(0);transition:width ease-in-out 0.3s;position:relative;overflow:auto;border-right:0.0625rem solid var(--bg-light)}.menu-container .scrollbar{overflow-y:auto;overflow-x:hidden;height:100%;padding:0 1rem;display:flex;gap:1rem;flex-direction:column;justify-content:flex-start;-ms-overflow-style:none;scrollbar-width:none}.menu-container .scrollbar::-webkit-scrollbar{display:none}.menu-container .bot-selection{position:relative;width:100%;margin-top:0.625rem;background:rgba(255,255,255,0.02);border-radius:0.75rem;border:1px solid rgba(255,255,255,0.05);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;backdrop-filter:blur(10px)}.menu-container .bot-selection:hover{background:rgba(255,255,255,0.05);border-color:var(--primary);box-shadow:0 0 15px rgba(255,187,0,0.1)}.menu-container .bot-selection:hover .options{height:5.625rem}.menu-container .bot-selection:hover .selected>span{transform:rotate(0deg)}.menu-container .bot-selection .selected{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0.625rem 0.75rem;border-radius:0.75rem;border:none}.menu-container .bot-selection .selected>span{transform:rotate(180deg);font-size:1.15rem;color:var(--text-muted);transition:transform 0.3s ease}.menu-container .bot-selection .left{display:flex;align-items:center;gap:0.75rem}.menu-container .bot-selection img#bot-avatar{width:3.25rem;height:3.25rem;border-radius:50%;border:2px solid var(--primary);box-shadow:0 0 12px rgba(255,187,0,0.4);object-fit:cover;transition:all 0.3s ease}.menu-container .bot-selection .bot-info{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.menu-container .bot-selection .bot-info .greeting{font-size:0.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.75px;font-weight:500}.menu-container .bot-selection .bot-info .bot-name{font-size:0.95rem;font-weight:700;color:var(--text);letter-spacing:0.25px}.menu-container .bot-selection .bot-info .bot-status{font-size:0.65rem;color:#22c55e;display:flex;align-items:center;gap:4px;font-weight:600}.menu-container .bot-selection .bot-info .bot-status::before{content:'';display:inline-block;width:5px;height:5px;background:#22c55e;border-radius:50%;box-shadow:0 0 6px #22c55e;animation:pulse 1.5s infinite}.menu-container .bot-selection .bot-info .bot-status.offline{color:var(--text-muted)}.menu-container .bot-selection .bot-info .bot-status.offline::before{background:var(--text-muted);box-shadow:none;animation:none}.menu-container .bot-selection .options{width:100%;height:0rem;display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:0.5rem;overflow:hidden;will-change:height;transform:translateZ(0);transition:height ease-in-out 0.2s;overflow-y:auto}.menu-container .bot-selection .options .option{display:flex;padding:0.625rem 0.75rem;align-items:center;gap:0.75rem;cursor:pointer}.menu-container .bot-selection .options .option img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.1)}.menu-container .bot-selection .options .option:hover{background-color:var(--bg-dark)}.menu-container .bot-selection .options .option p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:0.85rem}.menu-container .top{display:flex;flex-direction:column;gap:0.75rem}.menu-container .bar{background-color:var(--bg-light);padding:0.0625rem;border-radius:0.625rem}.menu-container .section{display:flex;flex-direction:column;overflow:hidden}.menu-container .section .menu-btn{display:flex;align-items:center;padding:0.625rem 0.75rem;gap:0.75rem;transition:all ease-in-out 0.2s;border-radius:0.5rem;cursor:pointer}.menu-container .section .menu-btn p{text-wrap:nowrap;font-size:1rem;color:var(--text-muted)}.menu-container .section .menu-btn span{font-size:1.25rem;color:var(--text-muted)}.menu-container .section .menu-btn:hover{background-color:color-mix(in srgb, var(--bg-light) 80%, white)}.menu-container .section .menu-btn.center{background-color:var(--bg-light);justify-content:center;border-radius:1.25rem;gap:0.3125rem;margin-bottom:0.625rem}.menu-container .section .menu-btn.center p{padding-right:0.3125rem}.menu-container .section .menu-btn.center:hover{background-color:color-mix(in srgb, var(--bg-light) 80%, white)}.menu-container .section .menu-btn.red p{color:#cc8889}.menu-container .section .menu-btn.red span{color:#cc8889}.menu-container .section .menu-btn.active{background-color:var(--bg-light);color:var(--text)}.menu-container .section .menu-btn.active p{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;color:var(--text)}.menu-container .section .menu-btn.active span{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;color:var(--text)}.menu-container.hide{width:4.75rem}.menu-container.hide .bot-selection{background:transparent !important;border:none !important;backdrop-filter:none !important;box-shadow:none !important}.menu-container.hide .bot-selection span{display:none}.menu-container.hide .bot-selection .selected{padding:0.5rem 0;justify-content:center}.menu-container.hide .bot-selection img#bot-avatar{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid var(--primary);box-shadow:0 0 10px rgba(255,187,0,0.4)}.menu-container.hide .bot-selection .left{gap:0}.menu-container.hide .bot-selection .bot-info{display:none !important}.menu-container.hide .section .header span{display:none}.menu-container.hide p{display:none}.menu-container.hide .no-icon{display:none}@media (max-width: 768px){.menu-container{position:fixed;top:0;left:0;width:80vw;max-width:320px;height:100vh;z-index:1002;background:var(--bg);box-shadow:2px 0 16px rgba(0,0,0,0.15);transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-right:none}.menu-container.active{transform:translateX(0)}#menu-overlay.mobile-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);z-index:1001}.menu-container.active+#menu-overlay.mobile-overlay{display:block}}@keyframes pulse{0%{opacity:0.6;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0.6;transform:scale(0.9)}}
|