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   display: none;
 103   float: left;
 104   height: 32px;
 105   width: 32px;
 106 }
 107
 108 .pod.locked .locked-indicator {
 109   background-image: -webkit-image-set(
 110       url(chrome://theme/IDR_ICON_PROFILES_LOCKED) 1x,
 111       url(chrome://theme/IDR_ICON_PROFILES_LOCKED@2x) 2x);
 112   display: initial;
 113 }
 114
 115 .pod.legacy-supervised .legacy-supervised-indicator {
 116   background-image: -webkit-image-set(
 117       url(chrome://theme/IDR_ICON_PROFILES_LEGACY_SUPERVISED) 1x,
 118       url(chrome://theme/IDR_ICON_PROFILES_LEGACY_SUPERVISED@2x) 2x);
 119   display: initial;
 120 }
 121
 122 .pod.child .child-indicator {
 123   background-image: -webkit-image-set(
 124       url(chrome://theme/IDR_ICON_PROFILES_CHILD) 1x,
 125       url(chrome://theme/IDR_ICON_PROFILES_CHILD@2x) 2x);
 126   display: initial;
 127 }
 128
 129 .main-pane {
 130   left: 0;
 131   top: 0;
 132 }
 133
 134 html[dir=rtl] .main-pane {
 135   right: 0;
 136 }
 137
 138 .name-container,
 139 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
 140   top: 180px;
 141   width: 180px;
 142 }
 143
 144 .pod.focused:not(.locked) .name-container {
 145   display: block;
 146 }
 147
 148 .pod .name {
 149   color: #363636;
 150   font-size: 15px;
 151   margin-top: 11px;
 152 }
 153
 154 .pod.focused:not(.locked) .auth-container {
 155   display: none;
 156 }
 157
 158 .pod.focused.locked .password-entry-container {
 159   display: flex;
 160   flex: auto;
 161 }
 162
 163 .action-box-area {
 164   background-color: #f5f5f5;
 165   height: 24px;
 166   /* Because of crbug.com/406529, the text in the .name div is janky if there's
 167   an opacity transition in this div. */
 168   transition: none;
 169   width: 24px;
 170 }
 171
 172 .action-box-button,
 173 .action-box-button:hover,
 174 .action-box-area.active .action-box-button {
 175   background-image: none;
 176   border-left: 6px solid transparent;
 177   border-right: 6px solid transparent;
 178   border-top: 6px solid #989898;
 179   height: 0;
 180   left: 6px;
 181   margin: 0;
 182   position: absolute;
 183   top: 9px;
 184   width: 0;
 185 }
 186
 187 .action-box-button:hover,
 188 .action-box-area.active .action-box-button {
 189   border-top: 6px solid #4c4c4c;
 190 }
 191
 192 .action-box-remove-user-warning .remove-warning-button {
 193   height: 30px;
 194 }
 195
 196 .action-box-remove-user-warning .remove-warning-button:focus {
 197   /* Override the default blue border inherited from
 198   button.custom-appearance:focus. */
 199   border: 1px solid transparent !important;
 200   box-shadow: inset 0 0 0 1px #fff;
 201 }