| <!doctype html> |
| <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading" |
| $i18n{dark} $i18n{newprintpreviewlayout}> |
| <head> |
| <meta charset="utf-8"> |
| <if expr="not optimize_webui"> |
| <base href="chrome://print"> |
| </if> |
| <style> |
| html { |
| background: rgb(232, 234, 237); /* --google-grey-200 */ |
| /* Remove 300ms delay for 'click' event, when using touch interface. */ |
| touch-action: manipulation; |
| } |
| |
| html[dark] { |
| background: rgb(189, 193, 198); /* --google-grey-400 */ |
| } |
| |
| html[new-print-preview-layout] { |
| background: rgb(218, 220, 224); /* --google-grey-refresh-300 */ |
| } |
| |
| html[new-print-preview-layout][dark] { |
| background: rgb(95, 99, 104); /* --google-grey-refresh-700 */ |
| } |
| |
| html, |
| body { |
| height: 100%; |
| margin: 0; |
| overflow: hidden; |
| width: 100%; |
| } |
| |
| .loading body { |
| display: flex; |
| } |
| |
| [new-print-preview-layout].loading body { |
| flex-direction: row-reverse; |
| } |
| |
| .loading body::before { |
| background: white; |
| border-bottom-width: 0; |
| border-color: rgb(232, 234, 237); |
| border-inline-end-width: 1px; |
| border-inline-start-width: 0; |
| border-style: solid; |
| border-top-width: 0; |
| content: ''; |
| display: block; |
| height: 100%; |
| width: 384px; /* --print-preview-sidebar-width */ |
| } |
| |
| [new-print-preview-layout].loading body::before { |
| border-inline-end-width: 0; |
| border-inline-start-width: 1px; |
| } |
| |
| [dark].loading body::before { |
| background: rgb(40, 41, 44); |
| border-color: rgba(255, 255, 255, .04); |
| } |
| </style> |
| </head> |
| <body> |
| <script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js"> |
| </script> |
| <print-preview-app></print-preview-app> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> |
| <link rel="import" href="ui/app.html"> |
| <link rel="import" href="chrome://resources/html/dark_mode.html"> |
| </body> |
| </html> |
