Google Chrome - Overlay popups

overlay-pops.html

<div id="overlay-container-1" class="overlay">
  <div id="spelling-confirm-overlay" class="page" hidden="" style="max-height: 351.90000000000003px;">
  <div class="close-button"></div>
  <h1 i18n-content="spellingConfirmOverlay">Ask Google for Suggestions</h1>
  <div class="content-area">
    <span id="spelling-confirm-text" i18n-content="spellingConfirmMessage">Google Chrome can provide smarter spell-checking by sending what you type in the browser to Google servers, allowing you to use the same spell-checking technology used by Google search.</span>
    <a id="spelling-confirm-learn-more" target="_blank" i18n-content="learnMore" i18n-values="href:privacyLearnMoreURL" href="https://support.google.com/chrome/?p=settings_privacy">Learn more</a>
  </div>
  <div class="action-area">
    <div class="button-strip">
      <button id="spelling-confirm-cancel" i18n-content="spellingConfirmDisable" class="cancel-button">No Thanks</button>
      <button id="spelling-confirm-ok" i18n-content="spellingConfirmEnable">Enable</button>
    </div>
  </div>
</div>

  <div id="startup-overlay" class="page" hidden="" style="max-height: 351.90000000000003px;">
  <div class="close-button"></div>
  <h1 i18n-content="startupPagesOverlay">Startup pages</h1>
  <!-- This <input> element is always hidden. It needs to be here so that
       its 'controlled-by' attribute will get set when the urls preference is
       managed by a policy, so that the managed prefs bar will show up.
  -->
  <input type="text" pref="session.urls_to_restore_on_startup" hidden="">
  <div class="content-area">
    <list id="startupPagesList" role="list" tabindex="0" inlineeditable=""><div class="spacer" style="height: 0px;"></div><div role="listitem" class="deletable-item"><div><div class="title favicon-cell weakrtl">Add a new page</div><div class="url weakrtl"><input type="text" class="weakrtl" placeholder="Enter URL..."></div></div><button class="raw-button row-delete-button custom-appearance" disabled=""></button></div><div class="spacer" style="height: 0px;"></div></list>
  </div>
  <div class="action-area">
    <span class="hbox stretch">
      <button id="startupUseCurrentButton" i18n-content="startupUseCurrent">Use current pages</button>
    </span>
    <div class="button-strip">
      <button id="startup-overlay-cancel" i18n-content="cancel">Cancel</button>
      <button id="startup-overlay-confirm" i18n-content="ok">OK</button>
    </div>
  </div>
  <div id="startupPagesListDropmarker"></div>
<list role="list" tabindex="0" class="autocomplete-suggestions" hidden=""><div class="spacer"></div><div class="spacer"></div></list></div>

  <div id="sync-setup-overlay" class="page" style="max-height: 351.90000000000003px;" hidden="">
  <div class="close-button"></div>
  <div id="sync-setup-login" hidden="">
    <div id="promo-title-container" hidden="">
      <h1 i18n-content="promoTitle">Sign in to Chrome</h1>
      <h2>
        <span i18n-content="promoTitleShort">Sign in to get your bookmarks, history, and settings on all your devices.</span>
        <a id="promo-learn-more" i18n-content="promoLearnMore" i18n-values="href:promoLearnMoreURL" href="https://support.google.com/chrome/?p=settings_sign_in&amp;hl=en-US">Learn more</a>
      </h2>
    </div>
    <div class="sync-main-content">
      <div id="sync-setup-login-content-column">
        <h1 id="sync-setup-overlay-title" i18n-content="syncSetupOverlay">Sign in with your Google Account</h1>
        <div class="sign-in">
          <div id="top-blurb-error" class="reset-hidden" hidden="">
            <span id="error-signing-in" i18n-content="errorSigningIn">Error signing in.</span>
            <span id="error-custom" hidden=""></span>
          </div>
          <div class="signin-box">
            <div id="signin-header">
              <h2 i18n-content="signinHeader">Sign in and sync</h2>
              <div id="signin-header-logo"></div>
            </div>
            <form id="gaia-login-form">
              <div id="email-row" class="reset-shown">
                <label for="gaia-email" i18n-content="emailLabel">Email</label>
                <input id="gaia-email" type="text" name="email" value="" class="reset-enabled reset-shown reset-value" autocomplete="off">
              </div>
              <div id="email-readonly-row" class="reset-hidden">
                <strong class="email-label" i18n-content="emailLabel">Email</strong>
                <div id="email-readonly"></div>
              </div>
              <div id="errormsg-0-email" class="errormsg reset-hidden" i18n-content="cannotBeBlank" hidden="">Required field cannot be left blank</div>
              <div id="password-row" class="reset-shown">
                <label>
                  <strong class="password-label" i18n-content="passwordLabel">Password</strong>
                  <input id="gaia-passwd" type="password" name="passwd" class="reset-enabled reset-value" autocomplete="off">
                </label>
                <div id="errormsg-0-password" class="errormsg reset-hidden" i18n-content="cannotBeBlank" hidden="">Required field cannot be left blank</div>
              </div>
              <div id="access-code-input-row" class="access-code-row reset-hidden" hidden="">
                <label>
                  <strong i18n-content="enterAccessCode">Enter your application-specific password:</strong>
                  <a i18n-values="href:getAccessCodeURL" i18n-content="getAccessCodeHelp" target="_blank" class="account-link" href="https://accounts.google.com/IssuedAuthSubTokens?hl=en">What's this?</a>
                  <input id="access-code" type="password" name="accessCode" class="reset-enabled reset-value">
                </label>
              </div>
              <div id="otp-input-row" class="otp-row reset-hidden" hidden="">
                <label>
                  <strong i18n-content="enterOtp">Enter your verification code:</strong>
                  <a i18n-values="href:getOtpURL" i18n-content="getOtpHelp" target="_blank" class="account-link" href="https://support.google.com/accounts/bin/answer.py?answer=1070457">What's this?</a>
                  <input id="otp" type="text" name="otp" class="reset-enabled reset-value">
                </label>
              </div>
              <div id="errormsg-1-password" class="errormsg reset-hidden" hidden="">
                <span i18n-content="invalidCredentials">Invalid user name or password.</span>
                <a i18n-values="href:invalidPasswordHelpURL" class="help-link" target="_blank" href="https://support.google.com/accounts/bin/answer.py?ctx=ch&amp;answer=27444">?</a>
              </div>
              <div id="errormsg-different-email" class="errormsg reset-hidden" hidden="">
                <span id="different-email">You were previously signed in with a different account, signing in will merge your data. Consider creating a new Chrome user via the <a href="chrome://settings/search#Users" target="_parent">settings page</a> for your Chrome stuff.</span>
              </div>
              <div id="errormsg-fatal" class="errormsg reset-hidden" hidden="">
                <span i18n-content="unrecoverableError">Oops, Sync has stopped working.</span>
                <a i18n-values="href:unrecoverableErrorHelpURL" i18n-content="errorLearnMore" target="_blank" href="https://www.google.com/support/chrome/bin/answer.py?answer=1181420">Learn more</a>
              </div>
              <div id="errormsg-0-access-code" class="errormsg reset-hidden" i18n-content="invalidAccessCode" hidden="">Invalid application-specific password.</div>
              <div id="errormsg-0-otp" class="errormsg reset-hidden" i18n-content="invalidOtp" hidden="">Invalid verification code.</div>
              <div id="asp-warning-div" class="errormsg reset-hidden" hidden="">
                <span i18n-values=".innerHTML:aspWarningText">Enter your Google Account password first,
        <br>
        not an application specific password.</span>
              </div>
              <div id="captcha-div" class="reset-hidden" hidden="">
                <div id="captcha-wrapper">
                  <div id="captcha-image"></div>
                </div>
                <div>
                  <label>
                    <strong i18n-content="captchaInstructions">Enter the letters above</strong>
                    <input id="captcha-value" type="text" name="captchaValue" value="" class="reset-disabled reset-value">
                  </label>
                </div>
              </div>
              <div id="errormsg-0-connection" class="errormsg reset-hidden" i18n-content="couldNotConnect" hidden="">Could not connect to the server</div>
              <div id="action-area">
                <input id="sign-in" type="submit" class="custom-appearance" i18n-content="signin"></input>
                <div id="create-account-div" i18n-values=".innerHTML:createAccountLinkHTML">or <a id="create-account-link" target="_blank" class="account-link" href="https://accounts.google.com/NewAccount?service=chromiumsync&amp;hl=en-US">Create a Google Account</a></div>
                <div id="logging-in-throbber" class="throbber" style="visibility: hidden;"></div>
              </div>
              <div id="ga-fprow">
                  <a id="cannot-access-account-link" i18n-values="href:cannotAccessAccountURL" target="_blank" i18n-content="cannotAccessAccount" class="account-link" href="https://support.google.com/accounts/bin/answer.py?answer=48598">Can't access your account?</a>
              </div>
            </form>
          </div>
        </div> <!-- sign-in -->
        <div id="cancel-space-no-captcha"></div>
        <div class="action-area">
          <div class="button-strip">
            <button id="sync-setup-cancel" type="reset" i18n-content="cancel">Cancel</button>
          </div>
        </div>
        <div id="promo-skip" hidden="">
          <button id="promo-skip-button" type="reset" i18n-content="promoSkipButton" class="link-button">Skip for now</button>
          <button id="promo-advanced" i18n-content="promoAdvanced" class="link-button">Advanced...</button>
        </div>
      </div>
    </div>
  </div>
  <div id="sync-setup-configure">
    <div id="confirm-sync-preferences" hidden="">
      <h1 i18n-content="confirmSyncPreferences">Confirm sync settings</h1>
      <div id="sync-instructions-container" class="content-area">
        <span i18n-content="chooseDataTypesInstructions">Google Chrome securely syncs your data with your Google account. Keep everything synced or customize synced data types and encryption settings.</span>
        <a id="encryption-help-link" target="_blank" i18n-values="href:syncEverythingHelpURL" i18n-content="learnMore" href="https://support.google.com/chrome/?p=settings_sync_all">Learn more</a>
      </div>
      <div>
        <div class="action-area">
          <div class="action-area-link-container">
            <a id="customize-link" href="#" i18n-content="customizeLinkLabel" class="reset-opaque reset-shown">Advanced</a>
          </div>
          <div id="confirm-everything-throbber" class="throbber" style="visibility: hidden;"></div>
          <div class="button-strip">
            <input id="confirm-everything-cancel" type="button" i18n-values="value:cancel" value="Cancel">
            <input id="confirm-everything-ok" type="button" i18n-values="value:syncEverything" value="OK, sync everything">
          </div>
        </div>
      </div>
    </div>
    <div id="customize-sync-preferences">
      <h1 i18n-content="syncSetupConfigureTitle">Advanced sync settings</h1>
      <form id="choose-data-types-form">
        <div id="sync-configure-content" class="content-area">
          <div id="sync-select-container">
            <select id="sync-select-datatypes">
              <option i18n-content="syncAllDataTypes" selected="">Sync everything</option>
              <option i18n-content="chooseDataTypes">Choose what to sync</option>
            </select>
            <div id="choose-data-types-body">
              <div id="apps-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="apps-checkbox" type="checkbox" disabled="">
                  <span i18n-content="apps" i18n-values="title:apps" title="Apps">Apps</span>
                </label>
              </div>
              <div id="autofill-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="autofill-checkbox" type="checkbox" disabled="">
                  <span i18n-content="autofill" i18n-values="title:autofill" title="Autofill">Autofill</span>
                </label>
              </div>
              <div class="sync-type-checkbox checkbox">
                <label>
                  <input id="bookmarks-checkbox" type="checkbox" disabled="">
                  <span i18n-content="bookmarks" i18n-values="title:bookmarks" title="Bookmarks">Bookmarks</span>
                </label>
              </div>
              <div id="extensions-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="extensions-checkbox" type="checkbox" disabled="">
                  <span i18n-content="extensions" i18n-values="title:extensions" title="Extensions">Extensions</span>
                </label>
              </div>
              <div id="omnibox-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="typed-urls-checkbox" type="checkbox" disabled="">
                  <span i18n-content="typedURLs" i18n-values="title:typedURLs" title="Omnibox History">Omnibox History</span>
                </label>
              </div>
              <div id="passwords-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="passwords-checkbox" type="checkbox" disabled="">
                  <span i18n-content="passwords" i18n-values="title:passwords" title="Passwords">Passwords</span>
                </label>
              </div>
              <div class="sync-type-checkbox checkbox">
                <label>
                  <input id="preferences-checkbox" type="checkbox" disabled="">
                  <span i18n-content="preferences" i18n-values="title:preferences" title="Settings">Settings</span>
                </label>
              </div>
              <div class="sync-type-checkbox checkbox">
                <label>
                  <input id="themes-checkbox" type="checkbox" disabled="">
                  <span i18n-content="themes" i18n-values="title:themes" title="Themes">Themes</span>
                </label>
              </div>
              <div id="sessions-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="sessions-checkbox" type="checkbox" disabled="">
                  <span i18n-content="openTabs" il8n-values="title:tabs">Open Tabs</span>
                </label>
              </div>
            </div>
          </div>
          <div class="sync-configuration-errors">
            <div id="error-text" i18n-content="syncZeroDataTypesError" class="sync-configuration-error reset-hidden" hidden="">You must select at least one data type to sync.</div>
          </div>
          <div id="customize-sync-encryption" hidden="">
            <hr>
            <h4 i18n-content="encryptedDataTypesTitle">Encrypted data types</h4>
            <div class="sync-customize-section-container">
              <div id="passphrase-encryption-message" i18n-content="passphraseEncryptionMessage">For added security, Google Chrome will encrypt your data.</div>
              <div class="radio">
                <label>
                  <input id="encrypt-sensitive-option" name="encrypt" type="radio" value="sensitive">
                  <span i18n-content="encryptSensitiveOption">Encrypt passwords</span>
                </label>
              </div>
              <div class="radio">
                <label>
                  <input id="encrypt-all-option" name="encrypt" type="radio" value="all">
                  <span i18n-content="encryptAllOption">Encrypt all synced data</span>
                </label>
              </div>
            </div>
            <hr>
            <h4 i18n-content="passphraseSectionTitle">Encryption passphrase</h4>
          </div>
          <div id="customize-sync-encryption-new">
            <hr>
            <h4 i18n-content="encryptionSectionTitle">Encryption options</h4>
            <div id="encryption-section-message" i18n-content="encryptionSectionMessage">For added security, Google Chrome will encrypt your data.</div>
            <div id="sync-new-encryption-section-container">
              <div class="radio">
                <label>
                  <input id="basic-encryption-option" name="encrypt-new" type="radio" value="full">
                  <span i18n-content="basicEncryptionOption">Encrypt synced passwords with your Google credentials</span>
                </label>
              </div>
              <div class="radio">
                <label>
                  <input id="full-encryption-option" name="encrypt-new" type="radio" value="full">
                  <span id="full-encryption-body" i18n-content="fullEncryptionOption">Encrypt all synced data with your own sync passphrase</span>
                </label>
                <a i18n-values="href:encryptionHelpURL" target="_blank" i18n-content="learnMore" href="https://support.google.com/chrome/?p=settings_encryption">Learn more</a>
              </div>
            </div>
          </div>
          <div id="sync-custom-passphrase-container" class="sync-customize-section-container">
            <div id="sync-custom-passphrase-options" hidden="">
              <div class="radio">
                <label>
                  <input id="google-option" name="option" type="radio" value="google">
                  <span i18n-content="googleOption">Use my Google Account password</span>
                </label>
              </div>
              <div class="radio">
                <label>
                  <input id="explicit-option" name="option" type="radio" value="explicit">
                  <span i18n-content="explicitOption">Choose my own passphrase</span>
                </label>
                <a i18n-values="href:encryptionHelpURL" target="_blank" i18n-content="learnMore" href="https://support.google.com/chrome/?p=settings_encryption">Learn more</a>
              </div>
            </div>
            <div id="sync-custom-passphrase" class="reset-hidden" hidden="">
              <div id="sync-passphrase-message">
                <span i18n-content="sectionExplicitMessagePrefix">Only someone with your passphrase can read your encrypted data. The passphrase is not sent to or stored by Google. If you forget your passphrase, you will need to</span>
                <a href="https://www.google.com/settings/chrome/sync/" target="_blank" i18n-content="sectionExplicitMessagePostfix">reset sync</a>
                <span>.</span>
              </div>
              <div class="sync-custom-passphrase-input">
                <input id="custom-passphrase" type="password" class="reset-value" i18n-values="placeholder:passphraseLabel" placeholder="Passphrase">
              </div>
              <div class="sync-custom-passphrase-input">
                <input id="confirm-passphrase" type="password" class="reset-value" i18n-values="placeholder:confirmLabel" placeholder="Confirm passphrase">
              </div>
              <div id="empty-error" class="error" i18n-content="emptyErrorMessage" hidden="">Empty passphrase is not allowed.</div>
              <div id="mismatch-error" class="error" i18n-content="mismatchErrorMessage" hidden="">You must enter the same passphrase twice.</div>
            </div>
          </div>
          <div id="sync-existing-passphrase-container" hidden="">
            <div id="enter-passphrase">
              <span id="normal-body" i18n-content="enterPassphraseBody" hidden="">Your data is encrypted with your sync passphrase. Please enter it below.</span>
              <span id="google-passphrase-needed-body" i18n-content="enterGooglePassphraseBody" hidden="">You already have data that is encrypted using a different version of your Google Account password. Please enter it below.</span>
              <a id="passphrase-learn-more" i18n-content="learnMore" i18n-values="href:syncErrorHelpURL" class="reset-hidden" target="_blank" hidden="" href="https://support.google.com/chrome/?p=settings_sync_error">Learn more</a>
            </div>
            <div id="passphrase-input">
              <input id="passphrase" name="passphrase" type="password" class="reset-value" i18n-values="placeholder:passphraseLabel" placeholder="Passphrase">
              <div id="incorrect-passphrase" class="error" i18n-content="incorrectPassphrase" hidden="">The passphrase you entered is incorrect.</div>
            </div>
            <div id="sync-passphrase-warning" i18n-values=".innerHTML:passphraseRecover" hidden="">If you've forgotten your passphrase, stop and reset Sync via <a href="https://www.google.com/settings/chrome/sync/?hl=en-US" target="_blank">Google Dashboard</a>.</div>
          </div>
        </div>
        <div class="action-area">
          <div class="action-area-link-container">
            <a id="use-default-link" href="#" i18n-content="useDefaultSettings" class="reset-opaque reset-shown">Use default settings</a>
          </div>
          <div id="choose-datatypes-throbber" class="throbber" style="visibility: hidden;"></div>
          <div class="button-strip">
            <input id="choose-datatypes-cancel" type="button" i18n-values="value:cancel" value="Cancel">
            <input id="choose-datatypes-ok" type="submit" i18n-values="value:ok" value="OK">
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="sync-setup-spinner" hidden="">
    <h1 i18n-content="syncSetupSpinnerTitle">Please wait...</h1>
    <div class="action-area button-strip">
      <input id="sync-spinner-cancel" type="button" i18n-values="value:cancel" value="Cancel">
    </div>
  </div>
  <div id="sync-setup-timeout" hidden="">
    <h1 i18n-content="syncSetupTimeoutTitle">Failed to start up the sync backend</h1>
    <div class="content-area">
      <span i18n-content="syncSetupTimeoutContent">Please make sure your network connection is working and if the problem persists, please sign out and sign in again to refresh your credentials.</span>
    </div>
    <div class="action-area button-strip">
      <button id="timeout-ok" i18n-content="ok">OK</button>
    </div>
  </div>
  <div id="sync-setup-stop-syncing" hidden="">
    <h1 i18n-content="stopSyncingTitle">Disconnect your Google Account</h1>
    <div class="content-area">
      <span i18n-values=".innerHTML:stopSyncingExplanation">By disconnecting your Google Account from Google Chrome, your data will remain on this computer but changes will no longer be synced to your Google Account. Data already stored in your Google Account will remain there until you remove it using <a href="https://www.google.com/settings/chrome/sync/?hl=en-US" target="_blank">Google Dashboard</a>.</span>
    </div>
    <div class="action-area button-strip">
      <input id="stop-syncing-cancel" type="button" i18n-values="value:cancel" value="Cancel">
      <input id="stop-syncing-ok" type="button" i18n-values="value:stopSyncingConfirm" value="Disconnect account">
    </div>
  </div>
</div>
</div>

overlay-styles.css

.overlay {
  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-transition: 200ms opacity;
  background-color: rgba(255, 255, 255, 0.75);
  bottom: 0;
  display: -webkit-box;
  left: 0;
  overflow: auto;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
}

/* Used to slide in the overlay. */
.overlay.transparent .page {
  /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
   * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
  -webkit-transform: scale(0.99) translateY(-20px);
}

/* The foreground dialog. */
.overlay .page {
  -webkit-border-radius: 3px;
  -webkit-box-orient: vertical;
  -webkit-transition: 200ms -webkit-transform;
  background: white;
  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  color: #333;
  display: -webkit-box;
  min-width: 400px;
  padding: 0;
  position: relative;
  z-index: 0;
}

/* If the options page is loading don't do the transition. */
.loading .overlay,
.loading .overlay .page {
  -webkit-transition-duration: 0 !important;
}

/* keyframes used to pulse the overlay */
@-webkit-keyframes pulse {
 0% {
   -webkit-transform: scale(1);
 }
 40% {
   -webkit-transform: scale(1.02);
  }
 60% {
   -webkit-transform: scale(1.02);
  }
 100% {
   -webkit-transform: scale(1);
 }
}

.overlay .page.pulse {
  -webkit-animation-duration: 180ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
}

.overlay .page > .close-button {
  background-image: -webkit-image-set(url('chrome://theme/IDR_CLOSE_DIALOG') 1x, url('chrome://theme/IDR_CLOSE_DIALOG@2x') 2x);
  background-position: center;
  background-repeat: no-repeat;
  height: 14px;
  position: absolute;
  right: 7px;
  top: 7px;
  width: 14px;
  z-index: 1;
}

html[dir='rtl'] .overlay .page > .close-button {
  left: 10px;
  right: auto;
}

.overlay .page > .close-button:hover {
  background-image: -webkit-image-set(url('chrome://theme/IDR_CLOSE_DIALOG_H') 1x, url('chrome://theme/IDR_CLOSE_DIALOG_H@2x') 2x);
}

.overlay .page > .close-button:active {
  background-image: -webkit-image-set(url('chrome://theme/IDR_CLOSE_DIALOG_P') 1x, url('chrome://theme/IDR_CLOSE_DIALOG_P@2x') 2x);
}

.overlay .page h1 {
  -webkit-padding-end: 24px;
  -webkit-user-select: none;
  color: #333;
  /* 120% of the body's font-size of 84% is 16px. This will keep the relative
   * size between the body and these titles consistent. */
  font-size: 120%;
  /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
   * above the top of the page. Use padding instead to make sure that the
   * headers of these pages have the correct spacing, but this should not be
   * necessary. See http://crbug.com/119029. */
  margin: 0;
  padding: 14px 17px 14px;
  text-shadow: white 0 1px 2px;
}