Index: ui/login/md_screen_container.css |
diff --git a/ui/login/md_screen_container.css b/ui/login/md_screen_container.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cd14ace17599cc15e01761660f4cd668b93a4e0b |
--- /dev/null |
+++ b/ui/login/md_screen_container.css |
@@ -0,0 +1,258 @@ |
+/* Copyright 2014 The Chromium Authors. All rights reserved. |
+ * Use of this source code is governed by a BSD-style license that can be |
+ * found in the LICENSE file. |
+ */ |
+ |
+#outer-container { |
+ -webkit-box-align: center; |
+ -webkit-box-pack: center; |
+ bottom: 57px; /* Leave space for the header bar */ |
+ display: -webkit-box; |
+ left: 0; |
+ min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */ |
+ perspective: 1px; /* Workaround, see http://crbug.com/360567 */ |
+ position: absolute; |
+ right: 0; |
+ top: 0; |
+ z-index: 1; |
+} |
+ |
+.oobe-display #outer-container { |
+ bottom: 47px; /* header-bar is 47 pixels high during OOBE */ |
+ perspective: 600px; |
+} |
+ |
+.pin-container.pin-enabled { |
+ opacity: 1; |
+ transition: opacity 200ms ease-in-out 180ms; |
+ visibility: visible; |
+} |
+ |
+.pin-container.pin-disabled { |
+ opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */ |
+ transition: none; |
+ visibility: hidden; /* Needed because pin-keyboard's offsetHeight is |
+ checked to determine if loaded. */ |
+} |
+ |
+#scroll-container { |
+ bottom: 0; /* Allows content overlap with control bar. */ |
+ left: 0; |
+ overflow-x: hidden; |
+ overflow-y: auto; |
+ position: absolute; |
+ right: 0; |
+ top: 0; |
+} |
+ |
+#scroll-container::-webkit-scrollbar { |
+ display: none; |
+} |
+ |
+#inner-container { |
+ border-radius: 2px; |
+ position: relative; |
+} |
+ |
+#inner-container.animation { |
+ overflow: hidden; |
+} |
+ |
+#inner-container.disabled { |
+ opacity: 0.4; |
+ pointer-events: none; |
+} |
+ |
+#oobe-shield { |
+ display: none; |
+} |
+ |
+#oobe-shield[md-mode] { |
+ background-color: rgba(20, 29, 40, .8); /* #141D28 80% */ |
+ display: block; |
+ height: 100%; |
+ left: 0; |
+ position: absolute; |
+ top: 0; |
+ width: 100%; |
+} |
+ |
+#oobe[md-mode] #progress-dots { |
+ display: none; |
+} |
+ |
+/* Screens that have a border and background. */ |
+#oobe.auto-enrollment-check #inner-container, |
+#oobe.autolaunch #inner-container, |
+#oobe.confirm-password #inner-container, |
+#oobe:not([md-mode]).connect #inner-container, |
+#oobe.debugging #inner-container, |
+#oobe.enrollment #inner-container, |
+#oobe:not([md-mode]).eula #inner-container, |
+#oobe.fatal-error #inner-container, |
+#oobe.gaia-signin #inner-container, |
+#oobe.hid-detection #inner-container, |
+#oobe.kiosk-enable #inner-container, |
+#oobe.oauth-enrollment #inner-container, |
+#oobe.password-changed #inner-container, |
+#oobe.ad-password-change #inner-container, |
+#oobe.reset #inner-container, |
+#oobe.supervised-user-creation #inner-container, |
+#oobe.supervised-user-creation-dialog #inner-container, |
+#oobe.terms-of-service #inner-container, |
+#oobe.arc-tos #inner-container, |
+#oobe.update #inner-container, |
+#oobe.user-image #inner-container, |
+#oobe.wrong-hwid #inner-container, |
+#oobe.unrecoverable-cryptohome-error #inner-container { |
+ background: white; |
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), |
+ 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
+ 0 2px 6px rgba(0, 0, 0, 0.15); |
+} |
+ |
+#oobe.error-message #inner-container, |
+#oobe.tpm-error-message #inner-container { |
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), |
+ 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
+ 0 2px 6px rgba(0, 0, 0, 0.15); |
+ |
+} |
+ |
+/* Only play this animation when 'down' class is removed. */ |
+.oobe-display #inner-container:not(.down) { |
+ transition: transform 200ms ease-in-out; |
+} |
+ |
+.oobe-display #inner-container.down { |
+ transform: translateY(50px) rotateX(-2.5deg); |
+} |
+ |
+#oobe:not([md-mode]) #step-logo { |
+ -webkit-margin-start: 17px; |
+ display: -webkit-box; |
+ position: absolute; |
+ top: 15px; |
+} |
+ |
+#oobe[md-mode] #step-logo { |
+ display: none; |
+} |
+ |
+#progress-dots { |
+ -webkit-box-pack: center; |
+ display: -webkit-box; |
+ margin-top: 15px; |
+ transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out; |
+} |
+ |
+#oobe[md-mode] #progress-dots { |
+ display: none; |
+} |
+ |
+/* Hidden for the duration of initial transition. */ |
+.oobe-display #progress-dots.down { |
+ visibility: hidden; |
+} |
+ |
+.progdot { |
+ -webkit-margin-end: 12px; |
+ background: white; |
+ height: 10px; |
+ opacity: 0.4; |
+ width: 10px; |
+} |
+ |
+.progdot-active { |
+ opacity: 0.5; |
+} |
+ |
+#account-picker-dot, |
+#app-launch-splash-dot, |
+#arc-kiosk-splash-dot, |
+#auto-enrollment-check-dot, |
+#autolaunch-dot, |
+#confirm-password-dot, |
+#controller-pairing-dot, |
+#debugging-dot, |
+#device-disabled-dot, |
+#enrollment-dot, |
+#error-message-dot, |
+#fatal-error-dot, |
+#hid-detection-dot, |
+#host-pairing-dot, |
+#kiosk-enable-dot, |
+#oauth-enrollment-dot, |
+#password-changed-dot, |
+#reset-dot, |
+#supervised-user-creation-dialog-dot, |
+#supervised-user-creation-dot, |
+#terms-of-service-dot, |
+#arc-tos-dot, |
+#tpm-error-message-dot, |
+#wrong-hwid-dot, |
+#unrecoverable-cryptohome-error-dot { |
+ display: none; |
+} |
+ |
+#oobe.connect #connect-dot, |
+#oobe.enrollment #gaia-signin-dot, |
+#oobe.enrollment #signin-dot, |
+#oobe.eula #eula-dot, |
+#oobe.gaia-signin #gaia-signin-dot, |
+#oobe.oauth-enrollment #gaia-signin-dot, |
+#oobe.oauth-enrollment #signin-dot, |
+#oobe.signin #signin-dot, |
+#oobe.update #update-dot, |
+#oobe.user-image #user-image-dot { |
+ opacity: 1; |
+} |
+ |
+#oobe.debugging #progress-dots, |
+#oobe.reset #progress-dots, |
+#oobe.host-pairing #progress-dots, |
+#oobe.controller-pairing #progress-dots { |
+ visibility: hidden; |
+} |
+ |
+body:not(.oobe-display) #inner-container { |
+ height: 262px; |
+ padding: 0; |
+ width: 1100px; |
+} |
+ |
+body:not(.oobe-display) #progress-dots { |
+ display: none; |
+} |
+ |
+#outer-container.fullscreen, |
+#outer-container.fullscreen #oobe, |
+#outer-container.fullscreen #oobe #inner-container { |
+ height: 100%; |
+ width: 100%; |
+} |
+ |
+html[build=chrome] #header-sections { |
+ -webkit-margin-start: -48px; |
+ margin-top: -1px; |
+} |
+ |
+html[build=chromium] #header-sections { |
+ -webkit-margin-start: 5px; |
+ margin-top: -1px; |
+} |
+ |
+.header-section { |
+ color: rgb(119, 120, 123); /* Should matching text color of the logo. */ |
+ display: none; |
+ font-size: 23px; |
+ line-height: 31px; |
+ text-transform: lowercase; |
+ width: 23em; |
+} |
+ |
+.header-section::before { |
+ /* Divider in header between product name and title, |
+ * like "[Product name] > [step header]". */ |
+ content: '\00A0\203A\00A0\00A0'; |
+} |