[Win10 FRE] Make inlined-image more Polymer-friendly to fix <action-link> CSS inclusion.

chrome/browser/resources/welcome/win10/inline.css

Index: chrome/browser/resources/welcome/win10/inline.css
diff --git a/chrome/browser/resources/welcome/win10/inline.css b/chrome/browser/resources/welcome/win10/inline.css
index 1b4ad1d84dd99cc7e43981843b7c4b199ce9c7aa..13e1025a4206a1e1af96f23d32f949e10b730e28 100644
--- a/chrome/browser/resources/welcome/win10/inline.css
+++ b/chrome/browser/resources/welcome/win10/inline.css
@@ -3,6 +3,7 @@
  * found in the LICENSE file. */
 
 body {
+  align-items: center;
   box-sizing: border-box;
   color: var(--paper-grey-900);
   display: flex;
@@ -12,240 +13,3 @@ body {
   margin: 0;
   min-height: 100vh;
 }
-
-a {
-  color: var(--google-blue-500);
-  cursor: pointer;
-  text-decoration: none;
-}
-
-ol {
-  margin: 0;
-  padding: 0;
-}
-
-strong {
-  font-weight: 500;
-}
-
-.content {
-  margin: 0 auto;
-  padding: 4em 1.5em 1.5em 1.5em;
-}
-
-.header-logo {
-  content: url(chrome://welcome-win10/logo-large.png);
-  height: 4em;
-}
-
-.heading {
-  font-size: 2.125em;
-  padding-bottom: 2rem;
-  padding-top: 1rem;
-}
-
-.sections {
-  margin-bottom: 2em;
-}
-
-.section.expandable {
-  border-top: 1px solid var(--google-grey-300);
-}
-
-.section.expandable:last-child {
-  border-bottom: 1px solid var(--google-grey-300);
-}
-
-.section.expandable .section-heading {
-  color: var(--google-blue-500);
-  cursor: pointer;
-}
-
-.section-heading {
-  align-items: center;
-  display: flex;
-  padding: 1.5em 0;
-}
-
-.section-heading-text {
-  flex: 1;
-  font-weight: 500;
-}
-
-.section.expandable .section-heading-text {
-  font-weight: normal;
-}
-
-.section.expandable.expanded .section-heading-text {
-  font-weight: 500;
-}
-
-.section-heading-expand {
-  height: 1.25em;
-  transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms;
-  width: 1.25em;
-}
-
-.section.expandable.expanded .section-heading-expand {
-  transform: rotate(180deg);
-  transition-delay: 150ms;
-}
-
-.section-steps {
-  overflow: hidden;
-}
-
-.section-steps li {
-  -webkit-margin-start: 1.25em;
-  -webkit-padding-start: 1em;
-  margin-bottom: 1em;
-}
-
-.section-steps li:last-child {
-  margin-bottom: 1em;
-}
-
-.section.expandable .section-steps {
-  max-height: 0;
-  opacity: 0;
-  transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, opacity 150ms;
-  visibility: hidden;
-}
-
-.section.expandable.expanded .section-steps {
-  max-height: 28.75em;
-  opacity: 1;
-  transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
-              opacity 150ms 250ms;
-  visibility: visible;
-}
-
-.button {
-  -webkit-font-smoothing: antialiased;
-  background: var(--google-blue-500);
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
-  color: #fff;
-  display: inline-block;
-  font-size: .8125em;
-  font-weight: 500;
-  line-height: 2.25rem;
-  padding: 0 1em;
-  text-align: center;
-  transition: 300ms cubic-bezier(.4, .2, 0, 1);
-  will-change: box-shadow;
-}
-
-.button:hover {
-  background: var(--paper-blue-a400);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .24)
-}
-
-.logo-small {
-  content: url(chrome://welcome-win10/logo-small.png);
-  display: inline;
-  height: 1.25em;
-  vertical-align: top;
-  width: 1.25em;
-}
-
-.screenshot {
-  display: block;
-  height: 440px;
-  margin: 0 auto;
-  max-width: 100%;
-  position: relative;
-  top: -96px;
-  width: 720px;
-}
-
-.screenshot-image {
-  box-shadow:  0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
-  height: 48vw;
-  margin: 1em 0;
-  max-height: 300px;
-  max-width: 400px;
-  min-height: 150px;
-  min-width: 200px;
-  position: relative;
-  width: 64vw;
-}
-
-#default-image {
-  background: url(chrome://welcome-win10/default.webp);
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-#taskbar-image {
-  background: url(chrome://welcome-win10/pin.webp);
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.screenshot-overlay {
-  box-sizing: border-box;
-  line-height: 0;
-  position: absolute;
-}
-
-#browser-overlay {
-  left: 41%;
-  top: 81%;
-}
-
-#edge-overlay {
-  left: 49%;
-  top: 88%;
-}
-
-#taskbar-overlay {
-  left: 31%;
-  top: 73%;
-}
-
-#taskbar-overlay div {
-  color: #ccc;
-  font-family: Tahoma, Verdana, Segoe, sans-serif;
-  font-weight: 500;
-}
-
-#icon-overlay {
-  background-image: url(chrome://welcome-win10/logo-small.png);
-  background-size: cover;
-  height: 8%;
-  left: 46%;
-  top: 90%;
-  width: 6%;
-}
-
-/* These values are precisely set so that the text over the screenshot starts
- * scaling at the same time the image starts scaling too. */
-@media (max-width: 626px) {
-  #browser-overlay {
-    font-size: 1.28vw;
-  }
-
-  #edge-overlay {
-    font-size: 1.44vw;
-  }
-
-  #taskbar-overlay {
-    font-size: 1.95vw;
-  }
-}
-
-/* Font-sizes used when the screenshot exactly reaches its max size. */
-@media (min-width: 626px) {
-  #browser-overlay {
-    font-size: 8px;
-  }
-
-  #edge-overlay {
-    font-size: 9px;
-  }
-
-  #taskbar-overlay {
-    font-size: 12.2px;
-  }
-}