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


ash / webui / scanning / resources / loading_page.html [blame]

<style include="scanning-fonts scanning-shared">
  :host-context(body.jelly-enabled) #noScannersSubtext {
    font: var(--cros-body-1-font);
  }

  :host-context(body.jelly-enabled) h1 {
    font: var(--cros-display-6-font);
  }

  #loadingContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--panel-container-margin-top));
    justify-content: center;
    text-align: center;
  }

  h1 {
    color: var(--scanning-scanners-loading-text-color);
    font-family: var(--scanning-scanners-loading-font-family);
    font-size: var(--scanning-scanners-loading-font-size);
    font-weight: var(--scanning-medium-font-weight);
    line-height: var(--scanning-scanners-loading-line-height);
    margin-bottom: 0;
    margin-top: 32px;
  }

  #noScannersSubtext {
    color: var(--scanning-no-scanners-subtext-color);
    display: inline-block;
    font-family: var(--scanning-no-scanners-subtext-font-family);
    font-size: var(--scanning-no-scanners-subtext-font-size);
    font-weight: var(--scanning-regular-font-weight);
    line-height: var(--scanning-no-scanners-subtext-line-height);
    margin-top: 16px;
  }

  paper-progress {
    --paper-progress-active-color: var(--scanning-progress-bar);
    --paper-progress-container-color: var(--scanning-progress-bar-track);
    border-radius: 4px;
    height: 4px;
    margin-bottom: 80px;
    margin-top: 32px;
    width: 256px;
  }

  #buttonDiv {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  img,
  svg {
    height: 256px;
  }
</style>
<div id="loadingContainer">
  <div id="loadingDiv" hidden="[[noScannersAvailable]]">
    <svg preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 257 256">
      <title>[[i18n('scannersLoadingText')]]</title>
      <use href="svg/illo_loading_scanner.svg#illo_loading_scanner"></use>
    </svg>
    <h1>[[i18n('scannersLoadingText')]]</h1>
    <paper-progress indeterminate></paper-progress>
  </div>
  <div id="noScannersDiv" hidden="[[!noScannersAvailable]]">
    <svg preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 257 256">
      <title>[[i18n('noScannersSubtext')]]</title>
      <use href="svg/illo_no_scanner.svg#illo_no_scanner"></use>
    </svg>
    <h1>[[i18n('noScannersText')]]</h1>
    <span id="noScannersSubtext">[[i18n('noScannersSubtext')]]</span>
    <div id="buttonDiv">
      <cr-button id="learnMoreButton" class="cancel-button"
          on-click="onLearnMoreClick">
        [[i18n('learnMoreButtonLabel')]]
      </cr-button>
      <cr-button id="retryButton" class="action-button"
          on-click="onRetryClick">
        [[i18n('retryButtonLabel')]]
      </cr-button>
    </div>
  </div>
</div>