src/chrome/browser/resources/chromeos/login/screen_container.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 #outer-container {
   7   -webkit-box-align: center;
   8   -webkit-box-pack: center;
   9   -webkit-perspective: 600px;
  10   bottom: 51px;  /* Leave space for the header bar */
  11   display: -webkit-box;
  12   left: 0;
  13   position: absolute;
  14   right: 0;
  15   top: 0;
  16 }
  17
  18 #inner-container {
  19   border-radius: 2px;
  20   padding: 0;
  21   position: relative;
  22 }
  23
  24 #inner-container.animation {
  25   overflow: hidden;
  26 }
  27
  28 /* Screens that have a border and background. */
  29 #oobe.autolaunch #inner-container,
  30 #oobe.connect #inner-container,
  31 #oobe.enrollment #inner-container,
  32 #oobe.eula #inner-container,
  33 #oobe.gaia-signin #inner-container,
  34 #oobe.kiosk-enable #inner-container,
  35 #oobe.oauth-enrollment #inner-container,
  36 #oobe.reset #inner-container,
  37 #oobe.update #inner-container,
  38 #oobe.user-image #inner-container,
  39 #oobe.managed-user-creation-dialog #inner-container,
  40 #oobe.managed-user-creation #inner-container,
  41 #oobe.password-changed #inner-container,
  42 #oobe.terms-of-service #inner-container,
  43 #oobe.wrong-hwid #inner-container,
  44 #oobe.confirm-password #inner-container,
  45 #oobe.fatal-error #inner-container {
  46   background: white;
  47   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
  48               0 4px 23px 5px rgba(0, 0, 0, 0.2),
  49               0 2px 6px rgba(0, 0, 0, 0.15);
  50 }
  51
  52 #oobe.error-message #inner-container,
  53 #oobe.tpm-error-message #inner-container {
  54   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
  55               0 4px 23px 5px rgba(0, 0, 0, 0.2),
  56               0 2px 6px rgba(0, 0, 0, 0.15);
  57
  58 }
  59
  60 #oobe.account-picker.flying-pods #inner-container {
  61   -webkit-transition: width 180ms ease,
  62                       height 180ms ease;
  63 }
  64
  65 /* Only play this animation when 'down' class is removed. */
  66 .oobe-display #inner-container:not(.down) {
  67   -webkit-transition: -webkit-transform 200ms ease-in-out;
  68 }
  69
  70 .oobe-display #inner-container.down {
  71   -webkit-transform: translateY(50px) rotateX(-2.5deg);
  72 }
  73
  74 #step-logo {
  75   -webkit-margin-start: 17px;
  76   display: -webkit-box;
  77   position: absolute;
  78   top: 15px;
  79 }
  80
  81 #progress-dots {
  82   -webkit-box-pack: center;
  83   -webkit-margin-before: 15px;
  84   display: -webkit-box;
  85 }
  86
  87 /* Hidden for the duration of initial transition. */
  88 .oobe-display #progress-dots.down {
  89   visibility: hidden;
  90 }
  91
  92 .progdot {
  93   -webkit-margin-end: 12px;
  94   background: white;
  95   height: 10px;
  96   opacity: 0.4;
  97   width: 10px;
  98 }
  99
 100 .progdot-active {
 101   opacity: 0.5;
 102 }
 103
 104 #account-picker-dot,
 105 #app-launch-splash-dot,
 106 #autolaunch-dot,
 107 #enrollment-dot,
 108 #kiosk-enable-dot,
 109 #oauth-enrollment-dot,
 110 #reset-dot,
 111 #error-message-dot,
 112 #tpm-error-message-dot,
 113 #password-changed-dot,
 114 #managed-user-creation-dot,
 115 #managed-user-creation-dialog-dot,
 116 #terms-of-service-dot,
 117 #wrong-hwid-dot,
 118 #confirm-password-dot,
 119 #fatal-error-dot {
 120   display: none;
 121 }
 122
 123 #oobe.connect #connect-dot,
 124 #oobe.enrollment #gaia-signin-dot,
 125 #oobe.enrollment #signin-dot,
 126 #oobe.eula #eula-dot,
 127 #oobe.gaia-signin #gaia-signin-dot,
 128 #oobe.oauth-enrollment #gaia-signin-dot,
 129 #oobe.oauth-enrollment #signin-dot,
 130 #oobe.signin #signin-dot,
 131 #oobe.update #update-dot,
 132 #oobe.user-image #user-image-dot {
 133   opacity: 1;
 134 }
 135
 136 body:not(.oobe-display) #inner-container {
 137   height: 262px;
 138   padding: 0;
 139   width: 1100px;
 140 }
 141
 142 body:not(.oobe-display) #progress-dots {
 143   display: none;
 144 }
 145
 146 #outer-container.fullscreen,
 147 #outer-container.fullscreen #oobe,
 148 #outer-container.fullscreen #oobe #inner-container {
 149   height: 100%;
 150   width: 100%;
 151 }
 152
 153 html[build=chrome] #header-sections {
 154   -webkit-margin-start: -48px;
 155   margin-top: -1px;
 156 }
 157
 158 html[build=chromium] #header-sections {
 159   -webkit-margin-start: 5px;
 160   margin-top: -1px;
 161 }
 162
 163 .header-section {
 164   color: rgb(119, 120, 123);  /* Should matching text color of the logo. */
 165   display: none;
 166   font-size: 23px;
 167   line-height: 31px;
 168   text-transform: lowercase;
 169   width: 23em;
 170 }
 171
 172 .header-section::before {
 173   /* Divider in header between product name and title,
 174    * like "[Product name] > [step header]". */
 175   content: '\00A0\203A\00A0\00A0';
 176 }
 177