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