1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135


ash / webui / diagnostics_ui / resources / text_badge.html [blame]

<style include="diagnostics-shared">
  :host-context(body.jelly-enabled) .error {
    background-color: var(--cros-sys-error_container);
    color: var(--cros-sys-on_error_container);
  }

  :host-context(body.jelly-enabled) .queued,
  :host-context(body.jelly-enabled) .skipped,
  :host-context(body.jelly-enabled) .stopped  {
    background-color: var(--cros-sys-disabled_container);
    color: var(--cros-sys-disabled);
  }

  :host-context(body.jelly-enabled) .running {
    background-color: var(--cros-sys-progress_container);
    color: var(--cros-sys-on_progress_container);
  }

  :host-context(body.jelly-enabled) .success {
    background-color: var(--cros-sys-positive_container);
    color: var(--cros-sys-on_positive_container);
  }

  :host-context(body.jelly-enabled) .warning {
    background-color: var(--cros-sys-warning_container);
    color: var(--cros-sys-on_warning_container);
  }

  :host-context(body.jelly-enabled) #textBadge {
    font: var(--cros-annotation-2-font);
  }

  .error {
    background-color: var(--google-red-50);
    color: var(--cros-text-color-alert);
  }

  .queued,
  .skipped,
  .stopped {
    background-color: var(--google-grey-200);
    color: var(--cros-text-color-secondary);
  }

  .running {
    background-color: var(--google-blue-50);
    color: var(--cros-text-color-prominent);
  }

  .success {
    background-color: var(--google-green-50);
    color: var(--cros-text-color-positive);
  }

  .warning {
    background-color: var(--google-yellow-50);
    color: var(--cros-text-color-warning);
  }

  #textBadge {
    border-radius: 4px;
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 11px;
    font-weight: var(--diagnostics-medium-font-weight);
    height: 20px;
    letter-spacing: .8px;
    line-height: 16px;
    padding: 2px 6px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media (prefers-color-scheme: dark) {
    :host-context(body.jelly-enabled) .error {
      background-color: var(--cros-sys-error_container);
      color: var(--cros-sys-on_error_container);
    }

    :host-context(body.jelly-enabled) .queued,
    :host-context(body.jelly-enabled) .skipped,
    :host-context(body.jelly-enabled) .stopped  {
      background-color: var(--cros-sys-disabled_container);
      color: var(--cros-sys-disabled);
    }

    :host-context(body.jelly-enabled) .running {
      background-color: var(--cros-sys-progress_container);
      color: var(--cros-sys-on_progress_container);
    }

    :host-context(body.jelly-enabled) .success {
      background-color: var(--cros-sys-positive_container);
      color: var(--cros-sys-on_positive_container);
    }

    :host-context(body.jelly-enabled) .warning {
      background-color: var(--cros-sys-warning_container);
      color: var(--cros-sys-on_warning_container);
    }

    .error {
      background-color:
          rgba(var(--google-red-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-red-200);
    }

    .queued,
    .skipped,
    .stopped {
      background-color:
          rgba(var(--google-grey-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-grey-200);
    }

    .running {
      background-color:
          rgba(var(--google-blue-300-rgb), var(--cros-second-tone-opacity));
      color: var(--cros-text-color-prominent);
    }

    .success {
      background-color:
          rgba(var(--google-green-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-green-200);
    }

    .warning {
      background-color:
        rgba(var(--google-yellow-300-rgb), var(--cros-second-tone-opacity));
      color: var(--google-yellow-200);
    }
  }
</style>

<span id="textBadge" class$="[[badgeType]]" hidden$="[[hidden]]">[[value]]</span>