json_viewer.scss

@import "/src/shared/style/colors.scss";

.list-group-tr {
    list-style-type: none;
    margin: 0;
    padding: 0 0;
}

.list-item-td {
    & > td {
        color: lighten(map-get($map: $theme-colors, $key: "black"), 20%) !important;
        background-color: white !important;
        border: 0;
        padding: 0.2em 0 !important;
    }

    & > td:nth-child(2) {
        text-align: left;
    }

    &:hover > td {
        background-color: map-get($theme-colors, "primary::hover") !important;
    }

    &:hover .icons {
        color: map-get($theme-colors, "black") !important;
        opacity: 100%;
        transition: gap 0.3s;
        gap: 0.7em;
    }

    & > .text-end {
        vertical-align: middle;
        padding-top: 0 !important;
        padding-right: 5px !important;
    }

    & > .text-element {
        max-width: 100px;
    }
}

.list-item-td.object {
    & > td {
        color: map-get($map: $theme-colors, $key: "black") !important;
    }

    &:hover {
        cursor: pointer;
    }
}

.list-item-td:not(.object) > td:first-child {
    border-left: 2px solid black;
    padding-left: 0.2em !important;
}

td .icon {
    font-size: 0.8em;
}

.icons {
    color: lighten(map-get($map: $theme-colors, $key: "dark"), 20%);
    gap: 0.5em;
    opacity: 0%;

    min-width: 3em;
}

span.highlight {
    background-color: darken(yellow, $amount: 0.5);
}