META-INF.dirigible.dev-tools.ui.listWidget.css Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of dirigible-components-resources-dev-tools

There is a newer version: 10.6.27

Show newest version

/*
 * Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.list {
    flex: auto 0 1;
    overflow-y: auto;
    border: 1px solid rgb(231, 231, 231);
    flex-direction: column;
}

.list-separator {
    background: rgb(231, 231, 231);
    height: 1px;
}

.list-item {
    flex: none;
    min-height: 30px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.list-item:hover {
    background: hsl(0, 0%, 96%);
}

.list-widget-input-validation-error {
    color: var(--input-validation-error);
    margin: 0 5px;
}

.controls-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
}

.controls-gradient {
    flex: 0 1 50px;
}

.list-item:hover .controls-gradient {
    background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 96%));
}

.controls-buttons {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: auto;
    visibility: hidden;
}

.list-item:hover .controls-buttons {
    background-color: hsl(0, 0%, 96%);
    visibility: visible;
}

.editor-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: none;
    background: hsl(0, 0%, 96%);
    overflow: hidden;
}

.editor-content {
    flex: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.editor-buttons {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
}

.editor-buttons > button {
    flex: none;
    margin-right: 10px;
}

.editor-content input {
    margin-right: 10px;
}

.editor-content input.error-input {
    background-color: white;
}

@media (forced-colors: active) {
    .list-item:hover .controls-buttons {
        background-color: Canvas;
    }
    .list-item:hover {
        forced-color-adjust: none;
        background: Highlight;
    }
    .list-item:hover * {
        color: HighlightText;
    }
    .list-item:hover .controls-gradient {
        background-image: unset;
    }
}