chrome/browser/resources/user_manager/user_manager.css

   1 /* Copyright 2013 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file.
   4  */
   5
   6 /* Overrides for the desktop user manager screen. */
   7
   8 .oobe-display {
   9   background-color: #eee;
  10 }
  11
  12 #outer-container {
  13   min-height: 0;
  14 }
  15
  16 .bubble.faded {
  17   opacity: 0;
  18 }
  19
  20 .pod {
  21   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  22   height: 226px;
  23   /* On non-retina desktop, the text is blurry if we use the scale3d()
  24   inherited from user_pod_row.js */
  25   transform: scale(0.9);
  26 }
  27
  28 podrow[ncolumns='6'] .pod {
  29   transform: scale(0.8);
  30 }
  31
  32 /* Because of crbug.com/406529, the text in the .name div is janky if there's
  33 both a transform:scale and a transition:opacity applied to a div, so we must
  34 apply the opacity change to the children instead. */
  35 .pod.faded {
  36   opacity: 1;
  37 }
  38
  39 .pod.faded .user-image-pane,
  40 .pod.faded .main-pane {
  41   opacity: .4;
  42 }
  43
  44 .pod.hovered:not(.focused) {
  45   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  46 }
  47
  48 .pod.focused {
  49   box-shadow: 0 16px 21px rgba(0, 0, 0, 0.2);
  50   transform: scale(1) !important;
  51 }
  52
  53 .pod.focused.locked {
  54   box-shadow: 0 12px 21px rgba(0, 0, 0, 0.2);
  55   height: 220px;
  56 }
  57
  58 .user-image-pane {
  59   border-top-left-radius: 2px;
  60   border-top-right-radius: 2px;
  61   height: 180px;
  62   left: 0;
  63   top: 0;
  64   width: 180px;
  65 }
  66
  67 html[dir=rtl] .user-image-pane {
  68   right: 0;
  69 }
  70
  71 .pod .name {
  72   margin-top: 12px;
  73 }
  74
  75 .pod .user-image {
  76   height: 180px;
  77   width: 180px;
  78 }
  79
  80 .pod input[type='password'] {
  81   height: 45px;  /* 1px shorter as to not overlap the pod's rounded corners */
  82   top: 1px;
  83 }
  84
  85 .pod .indicator-container {
  86   background-color: rgba(255, 255, 255, 0.85);
  87   border-radius: 16px;
  88   height: 32px;
  89   left: 8px;
  90   position: absolute;
  91   top: 8px;
  92 }
  93
  94 html[dir=rtl] .pod .indicators {
  95   left: auto;
  96   right: 8px;
  97 }
  98
  99 .pod .indicator {
 100   background-position: center;
 101   background-repeat: no-repeat;
 102   background-size: 18px;
 103   display: none;
 104   float: left;
 105   height: 32px;
 106   width: 32px;
 107 }
 108
 109 /* Using -webkit-mask on the indicators allows us to tweak the color. */
 110 .pod .indicator-container > div {
 111   -webkit-mask-position: center;
 112   -webkit-mask-repeat: no-repeat;
 113   -webkit-mask-size: 24px;
 114 }
 115
 116 .pod.locked .locked-indicator {
 117   -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg);
 118   background-color: #757575;
 119   display: initial;
 120 }
 121
 122 .pod.legacy-supervised .legacy-supervised-indicator {
 123   -webkit-mask-image:
 124       url(../../../../ui/webui/resources/images/supervisor_account.svg);
 125   background-color: rgb(66, 133, 244);
 126   display: initial;
 127 }
 128
 129 .pod.child .child-indicator {
 130   -webkit-mask-image:
 131       url(../../../../ui/webui/resources/images/account_child_invert.svg);
 132   background-color: rgb(66, 133, 244);
 133   display: initial;
 134 }
 135
 136 .main-pane {
 137   left: 0;
 138   top: 0;
 139 }
 140
 141 html[dir=rtl] .main-pane {
 142   right: 0;
 143 }
 144
 145 .name-container,
 146 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
 147   top: 180px;
 148   width: 180px;
 149 }
 150
 151 .pod.focused:not(.locked) .name-container {
 152   display: block;
 153 }
 154
 155 .pod .name {
 156   color: #363636;
 157   font-size: 15px;
 158   margin-top: 11px;
 159 }
 160
 161 .pod.focused:not(.locked) .auth-container {
 162   display: none;
 163 }
 164
 165 .pod.focused.locked .password-entry-container {
 166   display: flex;
 167   flex: auto;
 168 }
 169
 170 .action-box-area {
 171   background-color: #f5f5f5;
 172   height: 24px;
 173   /* Because of crbug.com/406529, the text in the .name div is janky if there's
 174   an opacity transition in this div. */
 175   transition: none;
 176   width: 24px;
 177 }
 178
 179 .action-box-button,
 180 .action-box-button:hover,
 181 .action-box-area.active .action-box-button {
 182   background-image: none;
 183   border-left: 6px solid transparent;
 184   border-right: 6px solid transparent;
 185   border-top: 6px solid #989898;
 186   height: 0;
 187   left: 6px;
 188   margin: 0;
 189   position: absolute;
 190   top: 9px;
 191   width: 0;
 192 }
 193
 194 .action-box-button:hover,
 195 .action-box-area.active .action-box-button {
 196   border-top: 6px solid #4c4c4c;
 197 }
 198
 199 .action-box-remove-user-warning .remove-warning-button {
 200   height: 30px;
 201 }
 202
 203 .action-box-remove-user-warning .remove-warning-button:focus {
 204   /* Override the default blue border inherited from
 205   button.custom-appearance:focus. */
 206   border: 1px solid transparent !important;
 207   box-shadow: inset 0 0 0 1px #fff;
 208 }