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

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

<style include="cr-shared-style diagnostics-shared">
  :host-context(body.jelly-enabled) #banner {
    background-color: var(--cros-sys-primary_container);
  }

  #banner {
    align-items: center;
    background-color: var(--cros-highlight-color);
    display: flex;
    height: 56px;
    position: sticky;
    top: 0;
    width: 100vw;
    z-index: 1;
  }

  #bannerIcon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    fill: var(--cros-color-prominent);
    padding-inline-end: 16px;
    padding-inline-start: 40px;
  }

  .elevation-2 {
    box-shadow: var(--diagnostics-box-shadow-elevation-2);
  }
</style>
<div id="banner" hidden$="[[!bannerMessage]]" class$="[[scrollingClass]]">
  <iron-icon icon="diagnostics:info" id="bannerIcon"></iron-icon>
  <span id="bannerMsg" class="diagnostics-caution-banner-font">[[bannerMessage]]</span>
</div>