@eclipse-glsp/client/css/glsp-sprotty.css

A sprotty-based client for GLSP

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

:root {
    --glsp-error-foreground: red;
    --glsp-warning-foreground: yellow;
    --glsp-info-foreground: lightblue;
    --glsp-issue-background: rgb(255 255 255 / 85%);
}

.sprotty {
    padding: 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.sprotty svg text::selection {
    background: none;
}

.sprotty-hidden {
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
}

.sprotty-popup {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: absolute;
    background: white;
    border-radius: 5px;
    border: 1px solid;
    max-width: 400px;
    min-width: 100px;
    z-index: 1;
    pointer-events: none;
}

.sprotty-popup > div {
    margin: 10px;
}

.sprotty-popup-closed {
    display: none;
}

.sprotty-resize-handle {
    /* radius does not work in Firefox */
    r: 5px;
    fill: #1d80d1;
    stroke: none;
    z-index: 1000;
}

.sprotty-resize-handle.selected {
    fill: #1d80d1;
}

.sprotty-resize-handle.active {
    fill: #1d80d1;
}

.sprotty-edge {
    fill: none;
    stroke-width: 1.5px;
}

.sprotty-edge.selected {
    stroke-width: 1.5px;
}

.sprotty-edge.mouseover:not(.selected) path {
    stroke-width: 1.5px;
}

.sprotty-node:not(.selected) {
    stroke-width: 0px;
}

.sprotty-node.mouseover:not(.selected),
.sprotty-edge.mouseover:not(.selected) {
    opacity: 60%;
}

.sprotty-node.selected,
.sprotty-edge.selected {
    stroke: #1d80d1;
    stroke-width: 1.5px;
}

.sprotty-edge.mouseover:not(.selected) .arrow,
.sprotty-edge.selected .arrow {
    stroke-dashoffset: none;
    stroke-dasharray: none;
}

.sprotty .node-creation-mode {
    cursor: copy;
}

.sprotty .overlap-forbidden-mode {
    cursor: not-allowed;
}

.sprotty .default-mode {
    cursor: default;
}

.sprotty .edge-modification-not-allowed-mode {
    cursor: no-drop;
}

.sprotty .edge-creation-select-source-mode {
    cursor: pointer;
}

.sprotty .edge-creation-select-target-mode,
.sprotty .edge-reconnect-select-target-mode {
    cursor: crosshair;
}

.sprotty .edge-check-pending-mode {
    cursor: wait;
}

.sprotty .move-mode {
    cursor: move;
}

.sprotty .resize-nesw-mode {
    cursor: nesw-resize;
}

.sprotty .resize-nwse-mode {
    cursor: nwse-resize;
}

.sprotty .resize-nw-mode {
    cursor: nw-resize;
}

.sprotty .resize-w-mode {
    cursor: n-resize;
}

.sprotty .resize-ne-mode {
    cursor: ne-resize;
}

.sprotty .resize-e-mode {
    cursor: e-resize;
}

.sprotty .resize-se-mode {
    cursor: se-resize;
}

.sprotty .resize-s-mode {
    cursor: s-resize;
}

.sprotty .resize-sw-mode {
    cursor: sw-resize;
}

.sprotty .resize-w-mode {
    cursor: w-resize;
}

.sprotty .element-deletion-mode {
    cursor: pointer;
}

.sprotty .marquee-mode {
    cursor: crosshair;
}

.sprotty-node.marquee {
    fill: lightgray;
    opacity: 0.2;
}

.sprotty-edge > .sprotty-routing-handle {
    r: 5px;
    fill: #1d80d1;
    stroke: none;
    z-index: 1000;
}

.sprotty-edge > .sprotty-routing-handle[data-kind='line'] {
    opacity: 0.35;
}

.sprotty-edge > .sprotty-routing-handle.selected {
    fill: #1d80d1;
}

.sprotty-edge > .sprotty-routing-handle.mouseover {
    stroke: #1d80d1a1;
    stroke-width: 1;
}

.sprotty-missing {
    stroke-width: 1;
    stroke: #f00;
    fill: #f00;
    font-size: 14pt;
    text-anchor: middle;
}

.sprotty g .movement-not-allowed > .sprotty-node {
    stroke: var(--glsp-error-foreground);
    stroke-width: 1.5px;
}

.sprotty .sprotty-resize-handle.movement-not-allowed {
    stroke: var(--glsp-error-foreground);
    fill: var(--glsp-error-foreground);
}

.sprotty .error > .sprotty-node {
    filter: drop-shadow(0px 0px 2px var(--glsp-error-foreground));
}

.sprotty .warning > .sprotty-node {
    filter: drop-shadow(0px 0px 2px var(--glsp-warning-foreground));
}

.sprotty .info > .sprotty-node {
    filter: drop-shadow(0px 0px 2px var(--glsp-info-foreground));
}

.sprotty svg {
    border-style: solid;
    border-width: 1px;
    border-color: #bbb;
}

.sprotty text {
    stroke-width: 0;
    stroke: #000;
    fill: #000;
    font-family: sans-serif;
    font-size: 8pt;
    text-anchor: middle;
}

.glsp-projection {
    width: 40%;
    opacity: 1;
}

.sprotty.sprotty-hidden .sprotty-projection-bar {
    visibility: hidden;
}

.sprotty-projection-bar.vertical.bordered-projection-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
}

.sprotty-projection-bar.horizontal.bordered-projection-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
}

.sprotty-projection-bar.horizontal .sprotty-projection,
.sprotty-projection-bar.horizontal .sprotty-viewport {
    position: absolute;
    height: 100%;
    top: 0;
}

.sprotty-projection-bar.vertical .sprotty-projection,
.sprotty-projection-bar.vertical .sprotty-viewport {
    position: absolute;
    width: 100%;
    left: 0;
}

.projection-scroll-bar {
    position: absolute;
    background: transparent;
    background-color: #aaa;
    z-index: 1;
    opacity: 0.3;
    transition: opacity 0.8s linear;
}

.sprotty-viewport {
    z-index: 1;
    border-style: solid;
    border-width: 2px;
}

.bordered-projection-bar {
    border-left: 1px solid rgba(212, 212, 212, 0.2);
    border-top: 1px solid rgba(212, 212, 212, 0.2);
    fill: transparent;
}

.ui-extension.hidden {
    display: none;
    opacity: 0;
}