Use CSS vairables to configure OOBE dialog paddings.

Variables are conditionally set depending on media size.

Bug: 1000606
Change-Id: Iae4ec877910814541cd57c6ce3ffda0620d0a9b0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1827295Reviewed-by: Sergey Poromov <poromov@chromium.org>
Commit-Queue: Denis Kuznetsov <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#700379}

chrome/browser/resources/chromeos/login/oobe_dialog.css

@@ -13,7 +13,10 @@
 }
 
 #header-container {
-  padding: 60px 64px 0 64px;
+  padding-bottom: 0;
+  padding-end: var(--oobe-dialog-content-padding);
+  padding-start: var(--oobe-dialog-content-padding);
+  padding-top: var(--oobe-dialog-content-padding);
 }
 
 #header-container[android] {
@@ -57,7 +60,7 @@
 
 #footer-container {
   overflow-y: auto;
-  padding: 0 64px;
+  padding: 0 var(--oobe-dialog-content-padding);
 }
 
 #footer-container[noFooterPadding] {
@@ -65,8 +68,11 @@
 }
 
 #oobe-bottom {
-  height: 32px;
-  padding: 24px calc(24px - 4px); /* real padding - button margin */
+  height: calc(var(--oobe-dialog-footer-height)
+               - 2 * var(--oobe-dialog-footer-padding));
+  /* Width: real padding - button margin */
+  padding: var(--oobe-dialog-footer-padding)
+           calc(var(--oobe-dialog-footer-padding) - 4px);
   z-index: 1;
 }
 

ui/login/oobe.css

@@ -32,6 +32,21 @@ html[full-screen-dialog] body {
   background-color: white;
 }
 
+/* Padding defaults */
+html {
+  --oobe-dialog-footer-height: 96px;
+  --oobe-dialog-footer-padding: 32px;
+  --oobe-dialog-content-padding: 64px;
+}
+
+@media screen and (max-width: 864px) {
+  html[screen=oobe] {
+    --oobe-dialog-footer-height: 80px;
+    --oobe-dialog-footer-padding: 24px;
+    --oobe-dialog-content-padding: 32px;
+  }
+}
+
 body.solid {
   background-color: white;
 }