/* * Vencord, a Discord client mod * Copyright (c) 2025 Vendicated and contributors * SPDX-License-Identifier: GPL-3.0-or-later */ /* cl = vc-command-palette- */ /* stylelint-disable no-descending-specificity */ /* shared layout */ .vc-command-palette-root { width: 540px; border-radius: 12px; color: var(--text-normal, #dcddde); font-family: var(--font-primary); overflow: hidden; opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); transition: opacity 120ms ease-out, transform 120ms ease-out; will-change: transform, opacity; } .vc-command-palette-root-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .vc-command-palette-container { display: flex; flex-direction: column; gap: 12px; padding: 12px; } .vc-command-palette-header { display: flex; flex-direction: column; gap: 8px; } .vc-command-palette-header-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vc-command-palette-title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .vc-command-palette-header-trail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; max-width: 70%; } .vc-command-palette-header-trail-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vc-command-palette-back { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-size: 14px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .vc-command-palette-search { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 0 12px; border: 1px solid transparent; } .vc-command-palette-prompt { font-size: 18px; font-weight: 600; } .vc-command-palette-search input { flex: 1; background: transparent; color: var(--text-normal); font-size: 16px; padding: 12px 0; outline: none; box-shadow: none; width: 464px; border: none !important } .vc-command-picker-search input { width: 100%; } .vc-command-palette-search input::placeholder { color: var(--text-muted); } .vc-command-palette-tag-filter-wrapper { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; } .vc-command-palette-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; } .vc-command-palette-tag-button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .vc-command-palette-tag-label { font-weight: 500; } .vc-command-palette-tag-count, .vc-command-palette-tag-hotkey { font-size: 11px; } .vc-command-palette-tag-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .vc-command-palette-tag-status { font-size: 12px; color: var(--text-muted); padding: 0 6px; } .vc-command-palette-list { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; border-radius: 8px; scrollbar-width: none; } .vc-command-palette-section { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } .vc-command-palette-item { position: relative; display: flex; border: none; background: transparent; text-align: left; font-family: inherit; cursor: pointer; outline: none; color: var(--text-normal); } .vc-command-palette-item:focus-visible { outline: none; } .vc-command-palette-item-content { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; padding: 12px 16px; border-radius: 8px; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .vc-command-palette-item.vc-command-palette-category .vc-command-palette-category-indicator { font-size: 18px; } .vc-command-palette-label { font-weight: 600; } .vc-command-palette-label-danger { color: inherit; } .vc-command-palette-text { display: flex; flex-direction: column; gap: 4px; } .vc-command-palette-description { font-size: 13px; color: var(--text-muted); } .vc-command-palette-meta { font-size: 12px; color: var(--text-muted); } .vc-command-palette-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; } .vc-command-palette-tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .vc-command-palette-pin { font-size: 16px; color: rgb(255 255 255 / 32%); cursor: pointer; user-select: none; transition: color 0.18s ease, transform 0.18s ease; } .vc-command-palette-pin:hover { color: var(--brand-experiment, #5865f2); transform: scale(1.05); } .vc-command-palette-pin-active { color: var(--brand-experiment, #5865f2); } .vc-command-palette-empty { padding: 48px 0; text-align: center; color: var(--text-muted); font-size: 14px; } /* polished theme (so like v2) */ .vc-command-palette-style-polished.vc-command-palette-root { background: linear-gradient(140deg, rgb(31 33 36 / 94%), rgb(16 17 20 / 92%)); border: 1px solid rgb(255 255 255 / 5%); box-shadow: 0 38px 90px rgb(0 0 0 / 55%); backdrop-filter: blur(22px) saturate(115%); border-radius: 14px; } .vc-command-palette-style-polished .vc-command-palette-container { gap: 10px; padding: 14px; } .vc-command-palette-style-polished .vc-command-palette-header { gap: 10px; padding: 12px; border-radius: 12px; background: rgb(49 51 56 / 58%); border: 1px solid rgb(255 255 255 / 6%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); backdrop-filter: blur(16px); } .vc-command-palette-style-polished .vc-command-palette-title { letter-spacing: 0.12em; color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-polished .vc-command-palette-header-trail { padding: 2px 10px 2px 6px; border-radius: 999px; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 10%); color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-polished .vc-command-palette-back { width: 22px; height: 22px; background: rgb(32 34 37 / 85%); border: 1px solid transparent; color: var(--text-normal, #dcddde); } .vc-command-palette-style-polished .vc-command-palette-back:hover, .vc-command-palette-style-polished .vc-command-palette-back:focus-visible { background: rgb(255 255 255 / 18%); box-shadow: 0 6px 14px rgb(0 0 0 / 28%); transform: translateY(-1px); } .vc-command-palette-style-polished .vc-command-palette-search { gap: 10px; padding: 0 14px; border-radius: 10px; background: rgb(20 21 24 / 92%); border: 1px solid rgb(255 255 255 / 6%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); } .vc-command-palette-style-polished .vc-command-palette-prompt { color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-polished .vc-command-palette-tag-button { --tag-chip-color: rgba(88 101 242 / 100%); --tag-chip-glow: rgba(88 101 242 / 24%); padding: 5px 12px; border: 1px solid rgb(255 255 255 / 12%); background: var(--tag-chip-glow, rgb(255 255 255 / 6%)); color: var(--tag-chip-color); backdrop-filter: blur(10px); } .vc-command-palette-style-polished .vc-command-palette-tag-button:hover, .vc-command-palette-style-polished .vc-command-palette-tag-button:focus-visible { transform: translateY(-1px); border-color: rgb(255 255 255 / 18%); box-shadow: 0 8px 18px rgb(0 0 0 / 20%); } .vc-command-palette-style-polished .vc-command-palette-tag-button.vc-command-palette-active { background: linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 4%)), var(--tag-chip-glow, rgba(255 255 255 / 14%)); border-color: var(--tag-chip-color); box-shadow: inset 0 0 0 1px var(--tag-chip-color), 0 10px 24px var(--tag-chip-glow); } .vc-command-palette-style-polished .vc-command-palette-tag-count, .vc-command-palette-style-polished .vc-command-palette-tag-hotkey { color: var(--tag-chip-color); opacity: 0.75; } .vc-command-palette-style-polished .vc-command-palette-tag-button.vc-command-palette-active .vc-command-palette-tag-count, .vc-command-palette-style-polished .vc-command-palette-tag-button.vc-command-palette-active .vc-command-palette-tag-hotkey { color: var(--tag-chip-color); opacity: 1; } .vc-command-palette-style-polished .vc-command-palette-tag-indicator { background: var(--tag-chip-color, rgba(88 101 242 / 100%)); box-shadow: 0 0 0 2px var(--tag-chip-glow, rgba(88 101 242 / 28%)); } .vc-command-palette-style-polished .vc-command-palette-list { gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 6%); background: rgb(14 15 18 / 82%); backdrop-filter: blur(12px); } .vc-command-palette-style-polished .vc-command-palette-section { padding: 6px 10px; color: rgb(255 255 255 / 38%); } .vc-command-palette-style-polished .vc-command-palette-item-content { border-radius: 10px; background: linear-gradient(135deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)); padding: 12px 14px; } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-category .vc-command-palette-item-content { background: linear-gradient(135deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)); border-color: rgb(255 255 255 / 12%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-category .vc-command-palette-category-indicator { color: rgb(255 255 255 / 45%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-pinned .vc-command-palette-item-content { background: linear-gradient(120deg, rgba(var(--brand-experiment-500-rgb, 88 101 242) / 18%), rgba(var(--brand-experiment-500-rgb, 88 101 242) / 6%)); border-color: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 38%); box-shadow: 0 10px 26px rgba(var(--brand-experiment-500-rgb, 88 101 242) / 22%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-selected .vc-command-palette-item-content { background: linear-gradient(100deg, rgba(88 101 242 / 28%), rgba(88 101 242 / 10%)); border-color: rgba(88 101 242 / 55%); box-shadow: 0 12px 30px rgba(88 101 242 / 28%), 0 0 0 1px rgba(88 101 242 / 55%); transform: translate3d(0, -1px, 0); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-chosen .vc-command-palette-item-content { background: linear-gradient(100deg, rgba(67 181 129 / 30%), rgba(67 181 129 / 10%)); border-color: rgba(67 181 129 / 50%); box-shadow: 0 12px 30px rgba(67 181 129 / 25%), 0 0 0 1px rgba(67 181 129 / 50%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-selected.vc-command-palette-chosen .vc-command-palette-item-content { background: linear-gradient(100deg, rgba(67 181 129 / 38%), rgba(67 181 129 / 16%)); border-color: rgba(67 181 129 / 60%); box-shadow: 0 12px 30px rgba(67 181 129 / 32%), 0 0 0 1px rgba(67 181 129 / 60%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-danger .vc-command-palette-item-content { background: linear-gradient(120deg, rgba(237 66 69 / 18%), rgba(237 66 69 / 6%)); border-color: rgba(237 66 69 / 38%); box-shadow: 0 10px 26px rgba(237 66 69 / 22%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-selected.vc-command-palette-danger .vc-command-palette-item-content { background: linear-gradient(100deg, rgba(237 66 69 / 32%), rgba(237 66 69 / 12%)); border-color: rgba(237 66 69 / 62%); box-shadow: 0 12px 30px rgba(237 66 69 / 32%), 0 0 0 1px rgba(237 66 69 / 62%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-danger:is(:hover, :focus-visible) .vc-command-palette-item-content { background: linear-gradient(120deg, rgba(237 66 69 / 22%), rgba(237 66 69 / 10%)); border-color: rgba(237 66 69 / 45%); box-shadow: 0 12px 30px rgba(237 66 69 / 28%); } .vc-command-palette-style-polished .vc-command-palette-item:not(:is(.vc-command-palette-danger, .vc-command-palette-chosen, .vc-command-palette-selected)):hover .vc-command-palette-item-content, .vc-command-palette-style-polished .vc-command-palette-item:not(:is(.vc-command-palette-danger, .vc-command-palette-chosen, .vc-command-palette-selected)):focus-visible .vc-command-palette-item-content { border-color: rgb(255 255 255 / 14%); background: linear-gradient(135deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%)); box-shadow: 0 8px 22px rgb(0 0 0 / 22%); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-pinned:is(:hover, :focus-visible) .vc-command-palette-item-content { background: linear-gradient(120deg, rgba(var(--brand-experiment-500-rgb, 88 101 242) / 22%), rgba(var(--brand-experiment-500-rgb, 88 101 242) / 10%)); border-color: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 45%); box-shadow: 0 12px 30px rgba(var(--brand-experiment-500-rgb, 88 101 242) / 28%); } .vc-command-palette-style-polished .vc-command-palette-tag-chip { --tag-chip-color: rgba(88 101 242 / 100%); --tag-chip-glow: rgba(88 101 242 / 24%); border: 1px solid rgba(255 255 255 / 12%); background: var(--tag-chip-glow, rgba(255 255 255 / 8%)); color: var(--tag-chip-color); font-weight: 600; backdrop-filter: blur(6px); } .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-selected .vc-command-palette-tag-chip, .vc-command-palette-style-polished .vc-command-palette-item.vc-command-palette-chosen .vc-command-palette-tag-chip { border-color: rgba(255 255 255 / 28%); background: linear-gradient(135deg, rgba(255 255 255 / 18%), rgba(255 255 255 / 4%)), var(--tag-chip-glow, rgba(255 255 255 / 12%)); } /* classic theme (v1) */ .vc-command-palette-style-classic.vc-command-palette-root { background: rgb(32 34 37 / 96%); border: 1px solid rgb(79 84 92 / 40%); box-shadow: 0 0 32px rgb(0 0 0 / 45%); backdrop-filter: blur(18px); } .vc-command-palette-style-classic .vc-command-palette-header { background: rgb(46 48 54 / 68%); border-radius: 8px; border: 1px solid rgb(79 84 92 / 40%); padding: 10px 12px; } .vc-command-palette-style-classic .vc-command-palette-title { color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-classic .vc-command-palette-header-trail { color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-classic .vc-command-palette-back { background: rgb(54 57 63); border-color: rgb(30 33 36); color: var(--text-normal); } .vc-command-palette-style-classic .vc-command-palette-back:hover, .vc-command-palette-style-classic .vc-command-palette-back:focus-visible { background: rgb(64 68 75); border-color: rgb(90 92 98 / 50%); transform: translateY(-1px); } .vc-command-palette-style-classic .vc-command-palette-search { background: rgb(46 48 54 / 75%); border-color: rgb(79 84 92 / 45%); } .vc-command-palette-style-classic .vc-command-palette-prompt { color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-classic .vc-command-palette-tag-button { background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 8%); color: var(--text-muted); } .vc-command-palette-style-classic .vc-command-palette-tag-button:hover, .vc-command-palette-style-classic .vc-command-palette-tag-button:focus-visible { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 16%); transform: translateY(-1px); } .vc-command-palette-style-classic .vc-command-palette-tag-button.vc-command-palette-active { background: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 18%); border-color: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 65%); color: var(--text-normal); } .vc-command-palette-style-classic .vc-command-palette-tag-count, .vc-command-palette-style-classic .vc-command-palette-tag-hotkey { color: var(--text-muted); } .vc-command-palette-style-classic .vc-command-palette-tag-button.vc-command-palette-active .vc-command-palette-tag-count, .vc-command-palette-style-classic .vc-command-palette-tag-button.vc-command-palette-active .vc-command-palette-tag-hotkey { color: var(--text-normal); } .vc-command-palette-style-classic .vc-command-palette-tag-indicator { background: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 100%); box-shadow: 0 0 0 2px rgba(var(--brand-experiment-500-rgb, 88 101 242) / 28%); } .vc-command-palette-style-classic .vc-command-palette-list { border: 1px solid rgb(79 84 92 / 35%); background: rgb(17 18 20 / 75%); padding: 0; } .vc-command-palette-style-classic .vc-command-palette-section { padding: 12px 16px 6px; color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-classic .vc-command-palette-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; transition: background 0.18s ease, box-shadow 0.18s ease; } .vc-command-palette-style-classic .vc-command-palette-item-content { position: relative; border-radius: 0; padding: 14px 16px; border-left: 3px solid transparent; transition: color 0.18s ease; z-index: 1; } .vc-command-palette-style-classic .vc-command-palette-item + .vc-command-palette-item .vc-command-palette-item-content, .vc-command-palette-style-classic .vc-command-palette-section + .vc-command-palette-item .vc-command-palette-item-content { border-top: 1px solid rgb(79 84 92 / 35%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-category .vc-command-palette-item-content { background: rgb(255 255 255 / 3%); border: none; } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-category .vc-command-palette-category-indicator { color: var(--text-muted, #a5a6ab); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-pinned::before { background: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 16%); box-shadow: inset 3px 0 0 rgba(var(--brand-experiment-500-rgb, 88 101 242) / 80%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-selected::before { background: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 18%); box-shadow: inset 3px 0 0 rgba(var(--brand-experiment-500-rgb, 88 101 242) / 100%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-selected .vc-command-palette-item-content { transform: translate3d(0, -1px, 0); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-chosen::before { background: rgba(67 181 129 / 24%); box-shadow: inset 3px 0 0 rgba(67 181 129 / 90%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-danger::before { background: rgba(237 66 69 / 16%); box-shadow: inset 3px 0 0 rgba(237 66 69 / 80%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-danger:is(:hover, :focus-visible)::before { background: rgba(237 66 69 / 22%); box-shadow: inset 3px 0 0 rgba(237 66 69 / 90%), inset 0 1px 0 rgba(255 255 255 / 6%), inset 0 -1px 0 rgba(0 0 0 / 25%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-danger:is(:hover, :focus-visible) .vc-command-palette-item-content { color: var(--text-normal, #dcddde); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-selected.vc-command-palette-chosen::before { background: rgba(67 181 129 / 32%); } .vc-command-palette-style-classic .vc-command-palette-item:not(:is(.vc-command-palette-danger, .vc-command-palette-chosen, .vc-command-palette-selected)):hover::before, .vc-command-palette-style-classic .vc-command-palette-item:not(:is(.vc-command-palette-danger, .vc-command-palette-chosen, .vc-command-palette-selected)):focus-visible::before { background: rgb(52 60 108 / 96%); box-shadow: inset 3px 0 0 rgba(var(--brand-experiment-500-rgb, 88 101 242) / 100%), inset 0 1px 0 rgba(255 255 255 / 6%), inset 0 -1px 0 rgba(0 0 0 / 25%); } .vc-command-palette-style-classic .vc-command-palette-item:not(:is(.vc-command-palette-danger, .vc-command-palette-chosen, .vc-command-palette-selected)):hover .vc-command-palette-item-content, .vc-command-palette-style-classic .vc-command-palette-item:not(:is(.vc-command-palette-danger, .vc-command-palette-chosen, .vc-command-palette-selected)):focus-visible .vc-command-palette-item-content { color: var(--text-normal); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-pinned:is(:hover, :focus-visible)::before { background: rgba(var(--brand-experiment-500-rgb, 88 101 242) / 22%); box-shadow: inset 3px 0 0 rgba(var(--brand-experiment-500-rgb, 88 101 242) / 90%); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-pinned:is(:hover, :focus-visible) .vc-command-palette-item-content { color: var(--text-normal, #dcddde); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-selected.vc-command-palette-danger .vc-command-palette-item-content { background: rgba(237 66 69 / 26%); } .vc-command-palette-style-classic .vc-command-palette-tag-chip { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%); color: var(--text-muted); } .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-selected .vc-command-palette-tag-chip, .vc-command-palette-style-classic .vc-command-palette-item.vc-command-palette-chosen .vc-command-palette-tag-chip { color: var(--text-normal); border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 12%); } /* stylelint-enable no-descending-specificity */ /* fuck you css */