github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss

@import 'node_modules/argo-ui/src/styles/config';
@import 'node_modules/argo-ui/src/styles/theme';

.application-resource-tree {
    position: relative;
    overflow: hidden;

    &__line {
        position: absolute;
        z-index: -1;
        transition: all 0.2s linear;
        border-top: 1px dashed $argo-color-gray-5;
    }

    &__edge {
        .application-resource-tree__line {
            &:last-child {
                &:after {
                    content: '\25BA';
                    position: absolute;
                    color: #A3A3A3;
                    font-size: 10px;
                    top: -9px;
                    transform: rotate(180deg);
                }
            }
        }
    }

    &--network {
        .application-resource-tree__line {
            background-image: linear-gradient(90deg, $argo-color-teal-5 50%, transparent 50%);
            background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
            background-size: 20px 3px, 0px 0px, 0px 0px, 0px 0px;
            background-position: left top, right bottom, left bottom, right top;
            animation: network-flow 1s infinite linear;
            height: 3px;
            border-top: none;
        }
        @keyframes network-flow {
            0% {
                background-position: left 20px top, right 20px bottom , left bottom 20px , right top 20px;
            }
            100% {
                background-position: left top, right bottom, left bottom, right top;
            }
        }

        .application-resource-tree__edge {
            .application-resource-tree__line {
                &:last-child {
                    &:after {
                        content: none;
                    }
                }
            }
        }
    }

    $pod-size: 25px;
    $gutter: 3px;
    $pods-per-row: 8;
    $pods-per-column: 4;
    $max-rows: 5;
    $num-stats: 2;

    &__node {
        position: absolute;
        transition: all 0.2s linear;
        padding-left: 3.5em;
        padding-right: 1em;
        margin: 10px;
        box-shadow: 1px 1px 1px $argo-color-gray-4;
        @include themify($themes) {
            background-color: themed('background-2');
            color: themed('text-2');
        }
        border-radius: 4px;
        border: 1px solid transparent;
        cursor: pointer;

        .theme-dark & {
            box-shadow: 1px 1px 1px $argo-color-gray-7;
        }

        .icon {
            font-size: 2em;
        }

        .icon-background
        {
            color: $argo-color-gray-4;
        }

        .fa-filter {
            margin-left: 8px;
            padding: 2px;
        }

        &.active {
            border-color: $argo-color-teal-6;
        }

        &--orphaned {
            @include themify($themes) {
                background-color: themed('light-argo-gray-2') !important;
            }
        }

        &--grouped-node {
            cursor: default;
        }

        &__top-part {
            cursor: pointer;
        }

        &--load-balancer {
            cursor: default;
            background-color: $argo-color-teal-2;
        }

        &--expansion {
            position: absolute;
            flex-shrink: 0px;
            z-index: 10;
            font-size: 0.5em;
            padding: 2px;
            box-shadow: 1px 1px 1px $argo-color-gray-4;
            @include themify($themes) {
                background-color: themed('background-2');
            }
            margin-top: 9px;
            margin-left: 215px;

            .theme-dark & {
                box-shadow: 1px 1px 1px $argo-color-gray-7;
            }
        }

        &--podgroup--expansion {
            position: absolute;
            flex-shrink: 0px;
            z-index: 10;
            font-size: 0.5em;
            padding: 2px;
            box-shadow: 1px 1px 1px $argo-color-gray-4;
            background-color: white;
            margin-left: 215px;
            @include themify($themes) {
                background-color: themed('background-2');
            }

            .theme-dark & {
                box-shadow: 1px 1px 1px $argo-color-gray-7;
            }
        }

        &--pod {
            @include themify($themes) {
                background-color: themed('pod-cyan') !important;
            }
        }

        &--lower-section {
            left: 8px;
            right: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            $pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
            $pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
            $padding: 1px;
            $stat-width: 1px;
            padding: $padding;
            transition: all 1s linear;
            position: absolute;

            &__pod-group {
                $pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
                $pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
                padding: $padding;
                width: $pod-container-width + 2 * $padding;

                &__label {
                    margin-top: 1em;
                    font-size: 10px;
                    text-align: center;
                }
                &__pod-container {
                    flex-direction: column;
                    width: $pod-container-width;
                    margin-top: auto;
                    &__pods {
                        display: flex;
                        flex-wrap: wrap;
                        width: 100%;
                        background-color: $argo-color-gray-3;
                        border-radius: 3px;
                        align-items: center;
                        padding: $gutter * 2;
                        margin-right: -1 * $gutter;
                        margin-bottom: -1 * $gutter;
                    }
                }

                &__pod {
                    border-radius: 3px;
                    width: $pod-size;
                    height: $pod-size;
                    margin: $gutter;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: $argo-color-gray-5;
                    transition: all 0.2s ease-in-out;
                    i.fa {
                        color: white !important;
                    }
                    &--succeeded,
                    &--healthy {
                        background-color: $argo-success-color;
                        &:hover {
                            background-color: $argo-success-color-dark;
                        }
                    }
                    &--pending,
                    &--suspended {
                        background-color: $argo-status-warning-color;
                        &:hover {
                            background-color: darken($argo-status-warning-color, 10%);
                        }
                    }
                    &--running,
                    &--progressing {
                        background-color: $argo-running-color;
                        &:hover {
                            background-color: $argo-running-color-dark;
                        }
                    }
                    &--failed,
                    &--degraded {
                        background-color: $argo-failed-color;
                        border: 2px solid rgba(0, 0, 0, 0.3);
                        &:hover {
                            background-color: $argo-failed-color-dark;
                        }
                    }
                    &--unknown,
                    &--missing {
                        background-color: $argo-color-gray-5;
                        &:hover {
                            background-color: $argo-color-gray-6;
                        }
                    }
                    &__star-icon {
                        background: none;
                        color: #ffce25;
                        display: block;
                        left: 20px;
                        margin: 0px;
                        position: absolute;
                        top: -5px;
                    }
                    &__stat-tooltip {
                        text-align: left;

                        i {
                            display: inline-block;
                            height: 1em;
                            width: 1em;
                            border-radius: 5px;
                        }
                    }

                    &__stat-icon-app {
                        background-color: $argo-color-teal-7;
                    }

                    &__stat-icon-neighbors {
                        background-color: $argo-color-gray-6;
                    }

                    &__stat {
                        &__bar {
                            background-color: $argo-color-gray-4;
                            height: $max-rows * $pod-size;
                            width: $stat-width;
                            position: relative;
                            border-radius: 2px;
                            margin: 0 $gutter * 2;
                            overflow: hidden;
                            cursor: pointer;

                            &--fill {
                                position: absolute;
                                background-color: $argo-color-teal-7;
                                width: 100%;
                                bottom: 0;
                            }

                            &--neighbors {
                                background-color: $argo-color-gray-6;
                            }

                            &:hover > &--fill {
                                background-color: $argo-color-teal-8;
                            }

                            &:hover &--neighbors {
                                background-color: $argo-color-gray-7;
                            }
                        }
                    }
                }
            }
        }
    }

    &__filtered-indicator {
        z-index: -1;
    }

    &__node-animation {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        animation: shadow-pulse 1s 1;
        pointer-events: none;
    }

    @keyframes shadow-pulse {
        0% {
            box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
        }
        100% {
            box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
        }
    }
    &__node-menu {
        position: absolute;
        right: 0px;
        top: 7px;
    }

    &__node-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__node-kind-icon {
        text-align: center;
        position: absolute;
        left: 0;
        top: 8px;
        width: 60px;
        line-height: 1;
        color: $argo-color-gray-7;

        &--big {
            background: $argo-color-gray-5;
            position: absolute;
            width: 65px;
            height: 65px;
            border-radius: 33px;
            left: -20px;
            top: -8px;
            text-align: center;

            @include themify($themes) {
                border: 4px solid themed('background-2');
            }

            i {
                color: $white-color;
                line-height: 56px;
                font-size: 28px;
            }
        }
    }

    &__node-labels {
        position: absolute;
        bottom: -14px;
        right: 0;
    }

    &__node-label {
        background-color: $argo-color-gray-4;
        color: $argo-color-gray-7;
        border: 1px solid $argo-color-gray-5;
        border-radius: 5px;
        padding: 0 5px;
        font-size: 0.6em;
        text-transform: lowercase;
        margin-right: 1px;
    }


    &__node-kind {
        font-size: 0.7em;
        color: $argo-color-gray-6;
    }

    &__node-content {
        padding: 10px 20px 10px 10px;
        line-height: 0.95;
        display: flex;
        flex-direction: column;
    }

    &__node-title {
        font-size: 0.8em;
        padding-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;

    }

    &__fullname {
        white-space: normal
    }

    &__node-status-icon {
        font-size: 0.8em;
        i, svg {
            margin-right: 2px;
        }
    }
    &__direction-left {
        direction: ltl;
    }
    &__direction-right {
        direction: rtl;
    }
    &__direction-center-left {
        overflow: hidden;
        padding-top: 15px;
        padding-left: 15px;

    }

}