github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss (about)

     1  @import 'node_modules/argo-ui/src/styles/config';
     2  
     3  .application-resource-tree {
     4      position: relative;
     5      overflow: hidden;
     6  
     7      &__line {
     8          position: absolute;
     9          z-index: -1;
    10          transition: all 0.2s linear;
    11          border-top: 1px dashed $argo-color-gray-5;
    12      }
    13  
    14      &__edge {
    15          .application-resource-tree__line {
    16              &:last-child {
    17                  &:after {
    18                      content: '\25BA';
    19                      position: absolute;
    20                      color: #A3A3A3;
    21                      font-size: 10px;
    22                      top: -10px;
    23                      transform: rotate(180deg);
    24                  }
    25              }
    26          }
    27      }
    28  
    29      &--network {
    30          .application-resource-tree__line {
    31              background-image: linear-gradient(90deg, $argo-color-teal-5 50%, transparent 50%);
    32              background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    33              background-size: 20px 3px, 0px 0px, 0px 0px, 0px 0px;
    34              background-position: left top, right bottom, left bottom, right top;
    35              animation: network-flow 1s infinite linear;
    36              height: 3px;
    37              border-top: none;
    38          }
    39          @keyframes network-flow {
    40              0% {
    41                  background-position: left 20px top, right 20px bottom , left bottom 20px , right top 20px;
    42              }
    43              100% {
    44                  background-position: left top, right bottom, left bottom, right top;
    45              }
    46          }
    47  
    48          .application-resource-tree__edge {
    49              .application-resource-tree__line {
    50                  &:last-child {
    51                      &:after {
    52                          color: $argo-color-teal-6;
    53                          top: -8px;
    54                      }
    55                  }
    56              }
    57          }
    58      }
    59  
    60      &__node {
    61          position: absolute;
    62          transition: all 0.2s linear;
    63          padding-left: 3.5em;
    64          padding-right: 1em;
    65          margin: 10px;
    66          box-shadow: 1px 1px 1px $argo-color-gray-4;
    67          background-color: white;
    68          border-radius: 4px;
    69          border: 1px solid transparent;
    70          cursor: pointer;
    71  
    72          .icon {
    73              font-size: 2em;
    74          }
    75  
    76          &.active {
    77              border-color: $argo-color-teal-6;
    78          }
    79  
    80          &--orphaned {
    81              background-color: lighten($argo-color-gray-4, 10%);
    82          }
    83  
    84          &--load-balancer {
    85              cursor: default;
    86              background-color: $argo-color-teal-2;
    87          }
    88      }
    89  
    90      &__filtered-indicator {
    91          z-index: -1;
    92      }
    93  
    94      &__node-animation {
    95          position: absolute;
    96          left: 0;
    97          right: 0;
    98          top: 0;
    99          bottom: 0;
   100          animation: shadow-pulse 1s 1;
   101      }
   102  
   103      @keyframes shadow-pulse {
   104          0% {
   105              box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
   106          }
   107          100% {
   108              box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
   109          }
   110      }
   111      &__node-menu {
   112          position: absolute;
   113          right: 0px;
   114          top: 7px;
   115      }
   116  
   117      &__node-content {
   118          overflow: hidden;
   119          text-overflow: ellipsis;
   120          white-space: nowrap;
   121      }
   122  
   123      &__node-kind-icon {
   124          text-align: center;
   125          position: absolute;
   126          left: 0;
   127          top: 8px;
   128          width: 60px;
   129          line-height: 1;
   130          color: $argo-color-gray-5;
   131  
   132          &--big {
   133              background: $argo-color-gray-5;
   134              position: absolute;
   135              width: 65px;
   136              height: 65px;
   137              border-radius: 33px;
   138              left: -20px;
   139              top: -8px;
   140              border: 4px solid white;
   141              text-align: center;
   142              i {
   143                  color: $white-color;
   144                  line-height: 56px;
   145                  font-size: 28px;
   146              }
   147          }
   148      }
   149  
   150      &__node-labels {
   151          position: absolute;
   152          bottom: -14px;
   153          right: 0;
   154      }
   155  
   156      &__node-label {
   157          background-color: $argo-color-gray-4;
   158          border: 1px solid $argo-color-gray-5;
   159          border-radius: 5px;
   160          padding: 0 5px;
   161          font-size: 0.6em;
   162          text-transform: lowercase;
   163          margin-right: 1px;
   164      }
   165  
   166      &__node-kind {
   167          font-size: 0.7em;
   168      }
   169  
   170      &__node-content {
   171          padding: 10px;
   172          line-height: 0.95;
   173      }
   174  
   175      &__node-title {
   176          font-size: 0.8em;
   177      }
   178  
   179      &__node-status-icon {
   180          font-size: 0.8em;
   181          i {
   182              margin-right: 2px;
   183          }
   184      }
   185  }