1/* Copyright (c) 2012 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/* Google Drive welcome banners.*/
6.drive-welcome-wrapper {
7  /* This image looks good in high DPI as is. */
8  background-image: url(chrome://resources/images/clouds.png);
9  background-repeat: repeat-x;
10  color: #333;
11}
12
13.drive-welcome-icon {
14  background-image: -webkit-image-set(
15    url('../images/files/ui/drive_logo.png') 1x,
16    url('../images/files/ui/2x/drive_logo.png') 2x);
17  background-repeat: no-repeat;
18}
19
20.drive-welcome-links {
21  display: flex;
22  flex-direction: row;
23}
24
25.drive-welcome-button {
26  -webkit-user-select: none;
27  background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
28  border: 1px solid rgba(0,0,0,0.1);
29  border-radius: 2px;
30  color: #444;
31  cursor: default;
32  display: inline-block;
33  font-size: 13px;
34  font-weight: bold;
35  height: 27px;
36  line-height: 27px;
37  padding: 0 8px;
38  text-align: center;
39  transition: all 218ms;
40}
41
42.drive-welcome-button:hover {
43  background-image: linear-gradient(to bottom, #f8f8f8, #f1f1f1);
44  border-color: #C6C6C6;
45  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
46  color: #222;
47  transition: all 0;
48}
49
50.drive-welcome-button:active {
51  background-image: linear-gradient(to bottom, #f6f6f6, #f1f1f1);
52  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
53}
54
55
56.drive-welcome-button.drive-welcome-start {
57  background-image:
58    linear-gradient(to bottom, rgb(77, 144, 254), rgb(71, 135, 237));
59  border-color: rgb(48, 121, 237);
60  color: white;
61  text-decoration: none;
62}
63
64.drive-welcome-button.drive-welcome-start:hover {
65  background-image:
66    linear-gradient(to bottom, rgb(77, 144, 254), rgb(53, 122, 232));
67  border-color: rgb(47, 91, 183);
68  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
69}
70
71/* Header welcome banner. */
72.drive-welcome.header {
73  flex: none;
74  height: 100px;
75  overflow: hidden;
76  position: relative;
77  transition: height 180ms ease, visibility 0 linear 180ms;
78}
79
80.dialog-container:not([drive-welcome='header']) .drive-welcome.header {
81  height: 0;
82  visibility: hidden;
83}
84
85.drive-welcome.header .drive-welcome-wrapper {
86  background-size: 308px 100px;
87  bottom: 0;
88  display: flex;
89  flex-direction: row;
90  left: 0;
91  position: absolute;
92  right: 0;
93  top: 0;
94}
95
96.drive-welcome.header .drive-welcome-icon {
97  background-position: center 18px;
98  background-size: 51px 44px;
99  flex: none;
100  width: 120px;
101}
102
103.drive-welcome.header .drive-welcome-message {
104  display: flex;
105  flex: auto;
106  flex-direction: column;
107}
108
109.drive-welcome.header .drive-welcome-title {
110  font-size: 140%;
111  margin-bottom: 4px;
112  margin-top: 14px;
113  overflow: hidden;
114  text-overflow: ellipsis;
115  white-space: nowrap;
116}
117
118.drive-welcome.header .drive-welcome-text {
119  margin-bottom: 6px;
120  overflow: hidden;
121  text-overflow: ellipsis;
122  white-space: nowrap;
123}
124
125.drive-welcome.header .drive-welcome-dismiss {
126  display: none;
127}
128
129/* Full page welcome banner. */
130.drive-welcome.page {
131  bottom: 0;
132  flex: none;
133  left: 0;
134  position: absolute;
135  right: 0;
136  top: 0;
137}
138
139.dialog-container:not([drive-welcome='page']) .drive-welcome.page {
140  display: none;
141}
142
143.drive-welcome.page .cr-dialog-close {
144  display: none;
145}
146
147.drive-welcome.page .drive-welcome-wrapper {
148  align-items: center;
149  background-size: 520px 173px;
150  bottom: 0;
151  display: flex;
152  flex-direction: column;
153  font-size: 120%;
154  left: 0;
155  overflow: hidden;
156  position: absolute;
157  right: 0;
158  top: 0;
159}
160
161.drive-welcome.page .drive-welcome-icon {
162  background-position: center center;
163  height: 240px;
164  left: 0;
165  right: 0;
166  top: 0;
167  width: 100%;
168}
169
170.drive-welcome.page .drive-welcome-message {
171  margin-left: 10px;
172  margin-right: 10px;
173  max-width: 525px;
174}
175
176.drive-welcome.page .drive-welcome-title {
177  font-size: 133%;
178  margin-bottom: 30px;
179  text-align: center;
180}
181
182.drive-welcome.page .drive-welcome-text {
183  margin-bottom: 24px;
184}
185
186.drive-welcome.page .drive-welcome-dismiss {
187  margin-left: 20px;
188}
189
190body:not([type='full-page']) .drive-welcome.page .drive-welcome-wrapper {
191  background-position: 0 0;
192}
193
194body:not([type='full-page']) .drive-welcome.page .drive-welcome-icon {
195  height: 200px;
196}
197