PS - Adjusting Public Session login pod for expanded whitelisting

ui/login/account_picker/user_pod_row.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
@@ skipping 681 matching lines @@
 }
 
 .user-type-bubble-header {
   font-weight: bold;
   margin-bottom: 14px;
 }
 
 /**** Public account user pod rules *******************************************/
 
 .pod.public-account.expanded {
+  height: 230px;
   width: 500px;
 }
 
 .pod.public-account.expanded.advanced {
+  height: 280px;
   width: 610px;
 }
 
 .pod.public-account.focused .name-container {
   display: flex;
 }
 
 .pod.public-account.expanded .name-container {
-  transform: translateY(-34px);
+  display: none;
 }
 
 .pod.public-account .learn-more-container {
   display: block;
   flex: none;
 }
 
 .pod.public-account .learn-more {
-  top: 15px;
+  top: 22px;
 }
 
 .expanded-pane {
   display: none;
 }
 
 .pod.public-account.animating .expanded-pane,
 .pod.public-account.expanded .expanded-pane {
   display: block;
   font-size: 12px;
   margin: 10px;
   overflow: hidden;
   z-index: 1;
 }
 
 .expanded-pane-contents {
   display: flex;
   flex-direction: column;
   float: right;
-  height: 193px;
+  height: 213px;
   width: 490px;
 }
 
 .pod.public-account.transitioning-to-advanced .expanded-pane-contents {
   transition: width 180ms;
 }
 
 .pod.public-account.expanded.advanced .expanded-pane-contents {
+  height: 263px;
   width: 600px;
 }
 
 html[dir=rtl] .expanded-pane-contents {
   float: left;
 }
 
 .side-container {
   -webkit-margin-start: 200px;
   flex: auto;
 }
 
 .expanded-pane-name {
   font-size: 19px;
   margin-bottom: 11px;
   margin-top: -2px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.expanded-pane-container {
+  color: grey;
+}
+
 .reminder {
-  font-weight: bold;
+  margin-top: 20px;
 }
 
 .language-and-input-section {
   display: none;
 }
 
 .pod.public-account.transitioning-to-advanced .language-and-input-section {
   display: block;
   opacity: 0;
   transition: opacity 180ms ease 180ms;
@@ skipping 22 matching lines @@
 .select-container {
   flex: auto;
 }
 
 .language-select,
 .keyboard-select {
   width: 100%;
 }
 
 .bottom-container {
-  -webkit-margin-start: 10px;
+  -webkit-margin-start: 20px;
+  align-items: center;
   display: flex;
+  flex-direction: row-reverse;
   flex: none;
   font-size: 13px;
+  justify-content: space-between;
+  margin-bottom: 4px;
 }
 
 .expanded-pane-learn-more-container,
 .enter-button {
   flex: none;
 }
 
 .expanded-pane-learn-more,
 .pod.public-account .learn-more {
   background-image: url(../../webui/resources/images/business.svg);
   background-size: 18px;
   height: 18px;
+  margin-top: -10px;
   position: relative;
   width: 18px;
 }
 
 .expanded-pane-learn-more {
   top: 5px;
 }
 
 .info {
   flex: auto;
-  margin: 5px 10px;
+  margin: -10px 25px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.monitoring-container {
+  margin-top: 35px;
+}
+
+.monitoring-learn-more {
+  color: rgb(49, 106, 197);
+  text-decoration: none;
+}
+
+.cr-dialog-shield {
+  background: black;
+}
+
+.shown > .cr-dialog-shield {
+  opacity: 0.5;
+}
+
+.cr-dialog-buttons {

[xiyuan, 2016/11/22 19:02:32]

cr.ui.dialogs is used in a few other places in login webui [1]. Can we be more
specific here to avoid affecting them? Think we might need to be more specific
for other cr-dialog-xxx rules too.

[1]:
https://cs.chromium.org/search/?q=cr.ui.dialogs+file:/login/.*%5C.js&sq=packa...

+  display: none;
+}
+
+.cr-dialog-frame {
+  height: 170px;
+  left: -46px;
+  padding: 0px;
+  position: relative;
+  top: -24px;
+  width: 430px;
+}
+
+.cr-dialog-advanced .cr-dialog-frame {
+  left: -110px;
+  top: 0px;
+}
+
+.cr-dialog-close {
+  color: grey;
+  height: 34px;
+  position: absolute;
+  top: 0px;
+  width: 34px;
+}
+
+.cr-dialog-title {
+  font-size: 16px;
+  font-weight: bold;
+  left: 20px;
+  position: absolute;
+  top: 15px;
+}
+
+.cr-dialog-text {
+  color: grey;
+  font-size: 13px;
+  overflow: visible;
+  position: absolute;
+  top: 20px;
+}
+
+.cr-dialog-item {
+  -webkit-margin-start: 42px;
+  display: list-item;
+  margin-bottom: -6px;
+}
+
 .language-and-input-container {
   -webkit-margin-end: 25px;
   flex: none;
 }
 
 .language-and-input {
   color: rgb(49, 106, 197);
-  position: relative;
   text-decoration: none;
-  top: 4px;
 }
 
 .pod.public-account.expanded.advanced .language-and-input-container {
   display: none;
 }
 
 .enter-button {
-  font-size: 14px;
+  background-color: rgb(66, 133, 244);
+  color: white;
+  font-size: 12px;
+  text-transform: none;
+}
+
+.enter-button.keyboard-focus {
+  font-weight: normal;
+}
+
+.horizontal-line {
+  border-bottom: 1px double #cccccc;
+  bottom: 8px;
+  position: relative;
 }
 
 /* Animations for the animated ellipsis: */
 .animated-ellipsis-component0 {
   -webkit-animation: ellipsis-component0 1.5s infinite;
 }
 
 @-webkit-keyframes ellipsis-component0 {
   0% { opacity: 0; }
   25% { opacity: 1; }
@@ skipping 18 matching lines @@
   -webkit-animation: ellipsis-component2 1.5s infinite;
 }
 
 @-webkit-keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }