/* ========================================== ULTRAKIT COMMAND PALETTE ========================================== */ .ultrakit-cmd-wrapper { --cmd-a: #6c5ce7; display: inline-block; max-width: 100%; box-sizing: border-box; font-family: inherit; } .ultrakit-cmd-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 0 !important; box-sizing: border-box; background: #ffffff; color: #6b6b85 !important; border: 1.5px solid #e6e6f0; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .ultrakit-cmd-trigger:hover { border-color: var(--cmd-a); box-shadow: 0 8px 22px color-mix(in srgb, var(--cmd-a) 20%, transparent); } .ultrakit-cmd-trigger svg { flex-shrink: 0; width: 18px; height: 18px; } .cmd-t-field { min-width: 260px; padding: 0 12px !important; height: 46px; border-radius: 14px; } .cmd-t-field .ultrakit-cmd-ttext { flex: 1; text-align: left; } .ultrakit-cmd-kbd { padding: 3px 8px; border-radius: 7px; background: #f0eff9; border: 1px solid #e0dff0; color: #6b6b85; font-family: inherit; font-size: 11.5px; font-weight: 800; line-height: 1.2; } .cmd-t-icon { justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: var(--cmd-a) !important; } /* popup (lives on ) */ .ukcmd-overlay { --cmd-a: #6c5ce7; --cmd-w: 620px; --cmd-z: 100000; position: fixed; inset: 0; z-index: var(--cmd-z); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(15,15,35,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; font-family: inherit; box-sizing: border-box; } .ukcmd-overlay *, .ukcmd-overlay *::before, .ukcmd-overlay *::after { box-sizing: border-box; } .ukcmd-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .ukcmd-box { --bg: #ffffff; --tx: #1a1a2e; --mu: #7a7a95; --bd: #ececf4; --hv: color-mix(in srgb, var(--cmd-a) 10%, transparent); width: min(var(--cmd-w), 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg); color: var(--tx); border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,0.4); overflow: hidden; transform: translateY(-14px) scale(0.98); transition: transform 0.25s cubic-bezier(.22,.9,.3,1); } .is-open .ukcmd-box { transform: none; } .ukcmd-dark .ukcmd-box { --bg: #17172d; --tx: #ffffff; --mu: #9a9ac0; --bd: rgba(255,255,255,0.08); } .ukcmd-glass .ukcmd-box { --bg: rgba(255,255,255,0.72); --bd: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); } .ukcmd-head { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--bd); } .ukcmd-head svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--cmd-a); } .ukcmd-input { flex: 1; height: 62px; padding: 0 !important; background: transparent !important; color: var(--tx) !important; border: 0 !important; box-shadow: none !important; outline: none; font-family: inherit; font-size: 17px; font-weight: 500; } .ukcmd-esc { padding: 3px 8px; border-radius: 7px; background: var(--hv); color: var(--mu); font-size: 11px; font-weight: 800; } .ukcmd-list { overflow-y: auto; padding: 8px; overscroll-behavior: contain; } .ukcmd-group { padding: 12px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mu); } .ukcmd-item { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; color: var(--tx) !important; text-decoration: none !important; cursor: pointer; transition: background 0.12s ease; } .ukcmd-item.is-active, .ukcmd-item:hover { background: var(--hv); } .ukcmd-ico { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hv); color: var(--cmd-a); } .ukcmd-ico svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ukcmd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ukcmd-label { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ukcmd-label mark { background: color-mix(in srgb, #ffd43b 60%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } .ukcmd-hint { font-size: 12.5px; color: var(--mu); } .ukcmd-enter { opacity: 0; font-size: 12px; font-weight: 800; color: var(--mu); } .ukcmd-item.is-active .ukcmd-enter { opacity: 1; } .ukcmd-empty { padding: 40px 20px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--mu); } .ukcmd-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--bd); font-size: 12px; font-weight: 600; color: var(--mu); } .ukcmd-foot kbd { padding: 1px 6px; border-radius: 5px; background: var(--hv); font-family: inherit; font-weight: 800; margin-right: 4px; } @media (max-width: 600px) { .ukcmd-overlay { padding-top: 8vh; } .ukcmd-foot { display: none; } .cmd-t-field { min-width: 0; } .ultrakit-cmd-kbd { display: none; } }