src/chrome/browser/resources/chromeos/login/oobe_screen.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  * This contains common styling for all the OOBE screens.
   6  */
   7
   8 .step {
   9   box-sizing: border-box;
  10   position: absolute;
  11 }
  12
  13 .step.animated:not(.faded) {
  14   -webkit-transition: -webkit-transform 200ms ease-in-out,
  15                       opacity 200ms ease-in-out,
  16                       visibility 200ms ease-in-out;
  17 }
  18
  19 .step.hidden {
  20   visibility: hidden;
  21 }
  22
  23 .faded,
  24 .left,
  25 .right {
  26   opacity: 0;
  27 }
  28
  29 .step.right {
  30   -webkit-transform: translateX(50px);
  31 }
  32
  33 .step.left {
  34   -webkit-transform: translateX(-50px)
  35 }
  36
  37 .step.fullscreen {
  38   height: 100%;
  39   left: 0;
  40   right: 0;
  41   top: 0;
  42   width: 100%;
  43 }
  44
  45 .step-controls {
  46   bottom: 21px;
  47   box-sizing: border-box;
  48   display: flex;
  49   height: 28px;
  50   justify-content: flex-end;
  51   padding-right: 34px;  /* Double the padding of .step */
  52   position: absolute;
  53   width: 100%;
  54 }
  55
  56 html[dir=rtl] .step-controls {
  57   /* Hack as -webkit-padding-end doesn't catch direction. crbug.com/363836 */
  58   padding-left: 34px;
  59 }
  60
  61 .animation .step-controls button {
  62   /* Don't grey out disabled buttons during animation. */
  63   color: buttontext !important;
  64 }
  65
  66 .step.loading .step-contents,
  67 .step.loading .step-controls,
  68 .step.loading .step-extra-controls {
  69   visibility: hidden;
  70 }
  71
  72 .step:not(.loading) #user-images-loading {
  73   visibility: hidden;
  74 }
  75
  76 .step:not(.loading) #eula-busy {
  77   visibility: hidden;
  78 }
  79
  80 /* Center spinner wrapper vertically and horizontally.
  81  * Vertical centering uses top: 50% and negative margin
  82  * instead of top: 0; bottom: 0 due to http://crbug.com/155320.
  83  */
  84 .step-loading {
  85   -webkit-align-items: center;
  86   -webkit-justify-content: center;
  87   display: -webkit-flex;
  88   left: 0;
  89   margin-top: -8px;
  90   position: absolute;
  91   right: 0;
  92   top: 50%;
  93 }
  94
  95 /* Fixes perfomance problem caused by http://crbug.com/229405 . */
  96 .step.hidden .throbber,
  97 .step.hidden .spinner,
  98 .step.hidden .inline-spinner {
  99   display: none;
 100 }
 101
 102 #security-info a,
 103 #eula a,
 104 .step-extra-controls a {
 105   color: rgb(49, 106, 197); /* same as 'Learn more' link */
 106   font-size: 12px;
 107   text-decoration: none;
 108 }
 109
 110 .step-extra-controls {
 111   bottom: 26px;
 112   left: 49px;
 113   position: absolute;
 114 }
 115
 116 /* EULA screen extra controls have 2 elements
 117    so they require different alignment. */
 118 #eula-extra-controls {
 119   bottom: 17px;
 120 }
 121
 122 #security-info a:focus,
 123 #eula a:focus,
 124 .step-extra-controls a:focus {
 125   -webkit-transition: outline-color 200ms;
 126   /* Note: May use 1px solid here. */
 127   outline-color: rgb(77, 144, 254);
 128 }
 129
 130 .step-extra-controls > *:not(:first-child) {
 131   -webkit-margin-before: 7px;
 132 }
 133
 134 html[dir=rtl] .step-extra-controls {
 135   left: auto;
 136   right: 49px;
 137 }
 138
 139 #oobe.autolaunch #autolaunch-confirm-button,
 140 #oobe.autolaunch #autolaunch-cancel-button,
 141 #oobe.connect #continue-button,
 142 #oobe.eula #accept-button,
 143 #oobe.eula #back-button,
 144 #oobe.kiosk-enable #kiosk-cancel-button,
 145 #oobe.kiosk-enable #kiosk-enable-button,
 146 #oobe.signin #signin-button,
 147 #oobe.user-image #ok-button {
 148   display: block;
 149 }
 150
 151 #autolaunch-confirm-button,
 152 #back-button,
 153 #kiosk-enable-button,
 154 #reset-button,
 155 #password-changed-back-button,
 156 #tos-back-button {
 157   -webkit-margin-end: 8px;
 158 }
 159
 160 .menu-area {
 161   margin: 5px;
 162 }
 163
 164 .menu-control {
 165   color: #444;
 166   font-family: inherit;
 167   line-height: 20px;
 168   position: relative;
 169   width: 250px;
 170 }
 171
 172 html[highlight=strong] #security-info a:focus,
 173 html[highlight=strong] #eula a:focus,
 174 html[highlight=strong] .step-extra-controls a:focus,
 175 html[highlight=strong] .menu-control:focus,
 176 html[highlight=strong] input[type='button']:focus,
 177 html[highlight=strong] button:focus {
 178   box-shadow: 0 0 23px rgb(77, 144, 254) !important;
 179 }
 180