sprotty/css/command-palette.css

A next-gen framework for graphical views

/********************************************************************************
 * Copyright (c) 2019 EclipseSource and others.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * This Source Code may also be made available under the following Secondary
 * Licenses when the conditions for such availability set forth in the Eclipse
 * Public License v. 2.0 are satisfied: GNU General Public License, version 2
 * with the GNU Classpath Exception which is available at
 * https://www.gnu.org/software/classpath/license.html.
 *
 * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 ********************************************************************************/
.command-palette {
    transition: opacity 0.3s linear;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    align-items: center;
}

.command-palette input {
    width: 100%;
    display: flex;
}

.command-palette span.loading {
    position: absolute;
    right: 5px;
}

.command-palette-suggestions {
    background: white;
    z-index: 1000;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(60, 60, 60, 0.6);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.command-palette-suggestions .icon {
    padding-right: 0.3em;
    display: flex;
    align-self: center;
}

.command-palette-suggestions em {
    font-weight: bold;
    font-style: normal;
}

.command-palette-suggestions > div {
    padding: 0 4px;
    display: flex;
}

.command-palette-suggestions .group {
    background: #eee;
}

.command-palette-suggestions > div:hover:not(.group),
.command-palette-suggestions > div.selected {
    cursor: pointer;
}

.command-palette-suggestions > div:hover:not(.group) {
    background: #e0e0e0;
}
.command-palette-suggestions > div.selected {
    background: #bbdefb;
}