chrome/browser/resources/extensions/drop_overlay.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui/drag_wrapper.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="drag_and_drop_handler.html">

<dom-module id="extensions-drop-overlay">
  <template>
    <style include="cr-hidden-style">
      :host {
        align-items: center;
        background-color: rgba(241, 241, 241, .9);
        color: var(--cr-secondary-text-color);
        display: flex;
        height: 100%;
        justify-content: center;
        position: absolute;
        width: 100%;
        z-index: 10;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          /* TODO(dbeam): share with cr-dialog dialog::backdrop? */
          background-color: rgba(0, 0, 0, .6);
        }
      }

      #container {
        align-items: center;
        display: flex;
        flex-direction: column;
      }

      iron-icon {
        height: 64px;
        margin-bottom: 16px;
        width: 64px;
      }

      #text {
        color: #6e6e6e;
        font-size: 123.1%;
        font-weight: 500;
      }
    </style>
    <div id="container">
      <iron-icon icon="cr:extension"></iron-icon>
      <div id="text">$i18n{dropToInstall}</div>
    </div>
  </template>
  <script src="drop_overlay.js"></script>
</dom-module>