| Index: chrome/browser/resources/welcome/win10/inline.html
|
| diff --git a/chrome/browser/resources/welcome/win10/inline.html b/chrome/browser/resources/welcome/win10/inline.html
|
| index dd31a55412a93ab89147521a1491b35f30ee5d1f..9956ee2da192a43adb3c90407720c76b0d00d250 100644
|
| --- a/chrome/browser/resources/welcome/win10/inline.html
|
| +++ b/chrome/browser/resources/welcome/win10/inline.html
|
| @@ -17,13 +17,250 @@
|
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
|
| <link rel="stylesheet" href="/welcome.css">
|
|
|
| - <script src="/welcome.js"></script>
|
| -</head>
|
| -<body>
|
| - <!-- TODO(tmartino): Create a dom-module and transfer contents of inline.css
|
| - inside.-->
|
| - <template is="dom-bind" id="inline-app">
|
| - <div class="content">
|
| + <dom-module id="welcome-win10-inline">
|
| + <template>
|
| + <style include="action-link">
|
| + :host {
|
| + align-items: flex-start;
|
| + display: inline-flex;
|
| + flex-direction: column;
|
| + padding: 4em 1.5em 1.5em 1.5em;
|
| + }
|
| +
|
| + a {
|
| + color: var(--google-blue-500);
|
| + text-decoration: none;
|
| + }
|
| +
|
| + ol {
|
| + margin: 0;
|
| + padding: 0;
|
| + }
|
| +
|
| + strong {
|
| + font-weight: 500;
|
| + }
|
| +
|
| + .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;
|
| + }
|
| + }
|
| + </style>
|
| <div class="header-logo"></div>
|
| <div class="heading">$i18n{headerText}</div>
|
| <div class="sections">
|
| @@ -90,7 +327,11 @@
|
| <paper-button class="button" on-tap="onContinue">
|
| $i18n{continueText}
|
| </paper-button>
|
| - </div>
|
| - </template>
|
| + </template>
|
| + <script src="/welcome.js"></script>
|
| + </dom-module>
|
| +</head>
|
| +<body>
|
| + <welcome-win10-inline></welcome-win10-inline>
|
| </body>
|
| </html>
|
|
|
Chromium Code Reviews
Issue 2733433002:
[Win10 FRE] Make inlined-image more Polymer-friendly to fix <action-link> CSS inclusion. (Closed)
