chrome/browser/resources/pdf/elements/viewer-thumbnail.html

<style>
  :host {
    --focus-border-color: var(--google-blue-300);
    display: block;
  }

  :host(:focus) {
    outline: none;
  }

  #thumbnail {
    align-items: center;
    display: inline-flex;
    height: 140px;
    justify-content: center;
    margin-bottom: 12px;
    margin-inline-end: auto;
    margin-inline-start: auto;
    width: 108px;
  }

  :host([is-active]) #thumbnail {
    --active-background-color: white;
    background-color: var(--active-background-color);
    box-shadow: 0 0 0 6px var(--focus-border-color);
  }

  :host(:focus-visible) #thumbnail {
    box-shadow: 0 0 0 2px var(--focus-border-color);
  }

  :host([is-active]:focus-visible) #thumbnail {
    box-shadow: 0 0 0 8px var(--focus-border-color);
  }

  canvas {
    display: block;
    opacity: 0.5;
  }

  :host([is-active]) canvas {
    opacity: 1;
  }

  :host([is-active]) canvas:hover,
  canvas:hover {
    opacity: 0.7;
  }

  #pageNumber {
    line-height: 1;
  }
</style>
<div id="thumbnail" on-click="onClick_"></div>
<div id="pageNumber">[[pageNumber]]</div>