github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/applications/components/application-status-panel/application-status-panel.scss (about)

     1  @import 'node_modules/argo-ui/src/styles/config';
     2  @import 'node_modules/foundation-sites/scss/util/util';
     3  @import 'node_modules/argo-ui/src/styles/theme';
     4  
     5  .help-tip {
     6      color: $argo-color-gray-4;
     7  }
     8  
     9  @mixin responsive-widths {
    10      @include breakpoint(large up) {
    11          max-width: 250px;
    12      }
    13      @include breakpoint(xlarge up) {
    14          min-width: 250px;
    15          max-width: 300px;
    16      }
    17      @include breakpoint(xxlarge up) {
    18          min-width: 325px;
    19          max-width: 350px;
    20      }
    21      @include breakpoint(xxxlarge up) {
    22          min-width: 375px;
    23          max-width: 450px;
    24      }
    25  }
    26  
    27  .application-status-panel {
    28      font-size: 0.875em;
    29      @include themify($themes) {
    30          background-color: themed('background-2');
    31          color: themed('text-1');
    32      }
    33      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    34      flex-wrap: nowrap;
    35      flex-shrink: 1;
    36      overflow-x: auto;
    37      padding-bottom: 0.5em;
    38  
    39      $row-width: 250px;
    40  
    41      &__conditions {
    42          display: flex;
    43          max-width: 250px;
    44          margin: auto;
    45          flex-wrap: wrap;
    46          justify-content: center;
    47          line-height: 1.5em;
    48          a {
    49              display: block;
    50              margin-right: 12px;
    51          }
    52      }
    53  
    54      &__more-button {
    55          margin-left: auto;
    56          font-size: 14px;
    57          line-height: 20px;
    58          padding: 0 5px;
    59          cursor: pointer;
    60          color: $argo-color-gray-6;
    61      }
    62  
    63      &__item {
    64          margin-top: 5px;
    65          padding: 5px 20px;
    66          font-size: 0.8em;
    67          line-height: 1.2;
    68          @include themify($themes) {
    69              color: themed('text-1');
    70          }
    71          display: flex;
    72          flex-direction: column;
    73          justify-content: flex-start;
    74          flex-shrink: 0;
    75          flex-grow: 0;
    76  
    77          &__row {
    78              display: flex;
    79              max-width: $row-width;
    80              margin-bottom: 0.25em;
    81              flex-shrink: 1;
    82              div:first-child {
    83                  width: 80px;
    84                  margin-right: 10px;
    85                  text-align: right;
    86              }
    87              div:last-child {
    88                  font-weight: 500;
    89                  width: 100%;
    90                  white-space: nowrap;
    91                  overflow: hidden;
    92                  text-overflow: ellipsis;
    93                  text-align: left;
    94              }
    95  
    96              @include responsive-widths();
    97          }
    98  
    99          &:first-child {
   100              margin-top: 7px;
   101          }
   102  
   103          &:not(:first-child) {
   104              @include themify($themes) {
   105                  border-left: 1px solid themed('border');
   106              }
   107          }
   108  
   109          & {
   110              a.error {
   111                  color: $argo-failed-color-dark;
   112              }
   113          }
   114          & {
   115              a.warning {
   116                  color: $argo-status-warning-color;
   117              }
   118          }
   119          & {
   120              a.info {
   121                  color: $argo-success-color;
   122              }
   123          }
   124  
   125          label {
   126              display: block;
   127              @include themify($themes) {
   128                  color: themed('text-1');
   129              }
   130              font-size: 13px;
   131              margin-right: 10px;
   132          }
   133  
   134          max-width: 100%;
   135          width: auto;
   136      }
   137  
   138      &__item-value {
   139          display: flex;
   140          align-items: center;
   141          margin-bottom: 0.5em;
   142          font-weight: 500;
   143          .fa {
   144              font-size: 1em;
   145          }
   146  
   147          font-size: 2em;
   148          @include themify($themes) {
   149              color: themed('text-1');
   150          }
   151          &--highlight {
   152              color: $argo-color-teal-6;
   153          }
   154  
   155          &--Running a,
   156          &--Terminating a {
   157              color: $argo-running-color;
   158          }
   159  
   160          &--Error a,
   161          &--Failed a {
   162              color: $argo-failed-color;
   163          }
   164  
   165          &--Succeeded a {
   166              color: $argo-success-color;
   167          }
   168  
   169          i {
   170              font-size: 0.6em;
   171          }
   172  
   173          &__revision {
   174              font-size: 14px;
   175              @include themify($themes) {
   176                  color: themed('text-1');
   177              }
   178              font-weight: 500;
   179              padding-left: 8px;
   180              margin-bottom: 2px;
   181          }
   182      }
   183  
   184      &__item-name {
   185          margin: auto 0;
   186          max-width: $row-width;
   187          display: -webkit-box;
   188          -webkit-line-clamp: 2;
   189          -webkit-box-orient: vertical;
   190          i {
   191              position: relative;
   192              top: -2px;
   193          }
   194          @include responsive-widths();
   195      }
   196      &__item-name,
   197      &__item-value {
   198          overflow: hidden;
   199          text-overflow: ellipsis;
   200      }
   201  }