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 682 matching lines @@
 
 .user-type-bubble-header {
   font-weight: bold;
   margin-bottom: 14px;
 }
 
 /**** Public account user pod rules *******************************************/
 
 .pod.public-account.expanded {
   width: 500px;
+  height: 230px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort, i.e height should be before width

See https://www.chromium.org/developers/web-development-style-guide, look for
"Alphabetize properties."

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 .pod.public-account.expanded.advanced {
   width: 610px;
+  height: 280px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 .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;
 }
 
 .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 {
   width: 600px;
+  height: 263px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 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;
   display: flex;
   flex: none;
   font-size: 13px;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+  margin-bottom: 4px;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

 }
 
 .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;
+}
+
+.monitoring-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.50;
+  background: black;
+  z-index: 10;

[xiyuan, 2016/11/21 19:38:35]

nit: alpha sort here

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

+}
+
+.monitoring-dialog {
+  position: fixed;
+  margin-left: -160px;

[xiyuan, 2016/11/21 19:38:35]

nit: -webkit-margin-start? xxx-left might not work with RTL

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

+  margin-top: -80px;
+  min-width: 430px;
+  min-height: 170px;
+}
+
+.pod.public-account.expanded.advanced .monitoring-dialog {
+  margin-left: -115px;

[xiyuan, 2016/11/21 19:38:35]

nit: similar here

[Ivan Šandrk, 2016/11/21 21:48:42]

Done.

+  margin-top: -45px;
+}
+
+.monitoring-dialog-button {
+  position: absolute;
+  top: 0px;
+  color: grey;
+  height: 34px;
+  width: 34px;
+}
+
+.monitoring-dialog-title {
+  position: absolute;
+  top: -10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.monitoring-dialog-content {
+  position: absolute;
+  top: 10px;
+  font-size: 13px;
+  color: grey;
+}
+
+.monitoring-dialog-item {
+  display: list-item;
+  margin-left: 16px;
+  margin-bottom: -10px;
+}
+
 .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;
+  font-size: 12px;
+  background-color: rgb(66, 133, 244);
+  color: white;
+  text-transform: none;
+}
+
+.enter-button.keyboard-focus {
+  font-weight: normal;
+}
+
+.horizontal-line {
+  border-bottom: 1px double #cccccc;
+  position: relative;
+  bottom: 8px;
 }
 
 /* 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; }
 }