@eclipse-glsp/client/css/tool-palette.css

A sprotty-based client for GLSP

/********************************************************************************
 * Copyright (c) 2019-2021 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
 ********************************************************************************/

/* Css for main container */
.tool-palette {
    position: absolute;
    right: 45px;
    top: 35px;
    text-align: center;
    width: fit-content;
    display: block;
    z-index: 1000;
    border-style: solid;
    border-width: 0px;
    border-color: #bbb;
    border-radius: 5px;
    color: black;
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */

    box-shadow:
        4px 0 4px 0 rgba(0, 0, 0, 0.2),
        0 4px 4px 0 rgba(0, 0, 0, 0.19);
    font-size: 14px;
}

/* Css for header compartment */

.palette-header {
    padding: 0.4em;
    text-align: left;
    background: rgb(151, 160, 165);
    border: 1px solid rgba(60, 60, 60, 0.6);
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.header-icon {
    display: none;
    align-items: center;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 3px;
}

.header-tools i {
    border: 1px solid transparent;
    padding: 0.15em;
    margin-right: 0.15em;
}

.header-tools i:hover {
    background: #dfdfdf;
}

.header-tools .clicked {
    background: #bddaef;
    border: 1px solid rgba(60, 60, 60, 0.6);
}

/*Css for palette body compartment */

.palette-body {
    background: rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(60, 60, 60, 0.6);
}

.tool-group {
    text-align: left;
    background: #ededee;
}

.group-header {
    background: rgb(187, 193, 196);
    display: flex;
    align-items: center;
}

.group-header:hover {
    background: rgb(187, 193, 196);
}

.group-header i {
    padding: 0.4em;
}

.tool-button {
    background: rgb(252, 253, 253);
    padding: 0.4em;
    display: flex;
    align-items: center;
}

.tool-button i {
    margin-right: 0.4em;
}

.tool-button:hover {
    background: rgb(220, 223, 224);
}

.tool-button.clicked {
    background: rgb(163, 201, 219);
}

.tool-button.collapsed {
    display: none;
}

.collapsible-palette {
    overflow: auto;
    transition: max-height 0.2s ease-out;
}

.minimize-palette-button {
    position: absolute;
    right: 20px;
    top: 35px;
    z-index: 1000;
    color: rgb(58, 63, 65);
}

.minimize-palette-button .codicon::before {
    font-size: 20px;
}

.search-input {
    box-sizing: border-box;
    background: rgb(252, 253, 253);
    color: black;
    border: 1px solid rgb(187, 193, 196);
    padding: 4px;
    width: 100%;
    margin: 3px 0;
}