ui/login/screen_container.css

   1 /* Copyright 2014 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 #outer-container {
   7   -webkit-box-align: center;
   8   -webkit-box-pack: center;
   9   -webkit-perspective: 1px; /* Workaround, see http://crbug.com/360567 */
  10   bottom: 51px;  /* Leave space for the header bar */
  11   display: -webkit-box;
  12   left: 0;
  13   min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */
  14   position: absolute;
  15   right: 0;
  16   top: 0;
  17 }
  18
  19 .oobe-display #outer-container {
  20   -webkit-perspective: 600px;
  21 }
  22
  23 #scroll-container {
  24   bottom: 0;        /* Allows content overlap with control bar. */
  25   left: 0;
  26   overflow-x: hidden;
  27   overflow-y: auto;
  28   position: absolute;
  29   right: 0;
  30   top: 0;
  31 }
  32
  33 #scroll-container::-webkit-scrollbar {
  34   display: none;
  35 }
  36
  37 #inner-container {
  38   border-radius: 2px;
  39   padding: 0;
  40   position: relative;
  41 }
  42
  43 #inner-container.animation {
  44   overflow: hidden;
  45 }
  46
  47 #inner-container.disabled {
  48   opacity: 0.4;
  49   pointer-events: none;
  50 }
  51
  52 /* Screens that have a border and background. */
  53 #oobe.auto-enrollment-check #inner-container,
  54 #oobe.autolaunch #inner-container,
  55 #oobe.confirm-password #inner-container,
  56 #oobe.connect #inner-container,
  57 #oobe.debugging #inner-container,
  58 #oobe.enrollment #inner-container,
  59 #oobe.eula #inner-container,
  60 #oobe.fatal-error #inner-container,
  61 #oobe.gaia-signin #inner-container,
  62 #oobe.hid-detection #inner-container,
  63 #oobe.kiosk-enable #inner-container,
  64 #oobe.oauth-enrollment #inner-container,
  65 #oobe.password-changed #inner-container,
  66 #oobe.reset #inner-container,
  67 #oobe.supervised-user-creation #inner-container,
  68 #oobe.supervised-user-creation-dialog #inner-container,
  69 #oobe.terms-of-service #inner-container,
  70 #oobe.update #inner-container,
  71 #oobe.user-image #inner-container,
  72 #oobe.wrong-hwid #inner-container {
  73   background: white;
  74   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
  75               0 4px 23px 5px rgba(0, 0, 0, 0.2),
  76               0 2px 6px rgba(0, 0, 0, 0.15);
  77 }
  78
  79 #oobe.error-message #inner-container,
  80 #oobe.tpm-error-message #inner-container {
  81   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
  82               0 4px 23px 5px rgba(0, 0, 0, 0.2),
  83               0 2px 6px rgba(0, 0, 0, 0.15);
  84
  85 }
  86
  87 #oobe.account-picker.flying-pods #inner-container {
  88   -webkit-transition: width 180ms ease,
  89                       height 180ms ease;
  90 }
  91
  92 /* Only play this animation when 'down' class is removed. */
  93 .oobe-display #inner-container:not(.down) {
  94   -webkit-transition: -webkit-transform 200ms ease-in-out;
  95 }
  96
  97 .oobe-display #inner-container.down {
  98   -webkit-transform: translateY(50px) rotateX(-2.5deg);
  99 }
 100
 101 #step-logo {
 102   -webkit-margin-start: 17px;
 103   display: -webkit-box;
 104   position: absolute;
 105   top: 15px;
 106 }
 107
 108 #close-button-item {
 109   -webkit-margin-start: 17px;
 110   display: flex;
 111   position: absolute;
 112   right: 15px;
 113   top: 15px;
 114   width: 30px;
 115   height: 30px;
 116   z-index: 1;
 117 }
 118
 119 #progress-dots {
 120   -webkit-box-pack: center;
 121   -webkit-transition: opacity 200ms ease-in-out,
 122                       visibility 200ms ease-in-out;
 123   display: -webkit-box;
 124   margin-top: 15px;
 125 }
 126
 127 /* Hidden for the duration of initial transition. */
 128 .oobe-display #progress-dots.down {
 129   visibility: hidden;
 130 }
 131
 132 .progdot {
 133   -webkit-margin-end: 12px;
 134   background: white;
 135   height: 10px;
 136   opacity: 0.4;
 137   width: 10px;
 138 }
 139
 140 .progdot-active {
 141   opacity: 0.5;
 142 }
 143
 144 #account-picker-dot,
 145 #app-launch-splash-dot,
 146 #auto-enrollment-check-dot,
 147 #autolaunch-dot,
 148 #confirm-password-dot,
 149 #controller-pairing-dot,
 150 #debugging-dot,
 151 #enrollment-dot,
 152 #error-message-dot,
 153 #fatal-error-dot,
 154 #hid-detection-dot,
 155 #host-pairing-dot,
 156 #kiosk-enable-dot,
 157 #oauth-enrollment-dot,
 158 #password-changed-dot,
 159 #reset-dot,
 160 #supervised-user-creation-dot,
 161 #supervised-user-creation-dialog-dot,
 162 #terms-of-service-dot,
 163 #tpm-error-message-dot,
 164 #wrong-hwid-dot {
 165   display: none;
 166 }
 167
 168 #oobe.connect #connect-dot,
 169 #oobe.enrollment #gaia-signin-dot,
 170 #oobe.enrollment #signin-dot,
 171 #oobe.eula #eula-dot,
 172 #oobe.gaia-signin #gaia-signin-dot,
 173 #oobe.oauth-enrollment #gaia-signin-dot,
 174 #oobe.oauth-enrollment #signin-dot,
 175 #oobe.signin #signin-dot,
 176 #oobe.update #update-dot,
 177 #oobe.user-image #user-image-dot {
 178   opacity: 1;
 179 }
 180
 181 #oobe.debugging #progress-dots,
 182 #oobe.reset #progress-dots,
 183 #oobe.host-pairing #progress-dots,
 184 #oobe.controller-pairing #progress-dots {
 185   visibility: hidden;
 186 }
 187
 188 body:not(.oobe-display) #inner-container {
 189   height: 262px;
 190   padding: 0;
 191   width: 1100px;
 192 }
 193
 194 body:not(.oobe-display) #progress-dots {
 195   display: none;
 196 }
 197
 198 #outer-container.fullscreen,
 199 #outer-container.fullscreen #oobe,
 200 #outer-container.fullscreen #oobe #inner-container {
 201   height: 100%;
 202   width: 100%;
 203 }
 204
 205 html[build=chrome] #header-sections {
 206   -webkit-margin-start: -48px;
 207   margin-top: -1px;
 208 }
 209
 210 html[build=chromium] #header-sections {
 211   -webkit-margin-start: 5px;
 212   margin-top: -1px;
 213 }
 214
 215 .header-section {
 216   color: rgb(119, 120, 123);  /* Should matching text color of the logo. */
 217   display: none;
 218   font-size: 23px;
 219   line-height: 31px;
 220   text-transform: lowercase;
 221   width: 23em;
 222 }
 223
 224 .header-section::before {
 225   /* Divider in header between product name and title,
 226    * like "[Product name] > [step header]". */
 227   content: '\00A0\203A\00A0\00A0';
 228 }