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. */
6 /* It's necessary to put this here instead of in body in order to get the
7 background-size of 100% to work properly */
13 /* Don't highlight links when they're tapped. Safari has bugs here that
14 show up as flicker when dragging in some situations */
15 -webkit-tap-highlight-color: transparent;
16 /* Don't allow selecting text - can occur when dragging */
17 -webkit-user-select: none;
18 background-size: auto 100%;
22 /* [hidden] does display:none, but its priority is too low in some cases. */
24 display: none !important;
27 #notification-container {
28 -webkit-transition: opacity 200ms;
37 html[dir='rtl'] #notification-container {
41 #notification-container.card-changed {
42 -webkit-transition: none;
46 #notification-container.inactive {
47 -webkit-transition: opacity 200ms;
52 display: inline-block;
58 display: inline-block;
62 #notification > div > div,
64 display: inline-block;
67 /* NOTE: This is in the probable case that we start stuffing 16x16 data URI'd
68 * icons in the promo notification responses. */
69 #notification > span > img {
73 #notification .close-button {
74 -webkit-margin-start: 8px; /* Matching value in TilePage#repositionTile_. */
79 background: no-repeat;
80 background-color: transparent;
81 /* TODO(estade): this should animate between states. */
82 background-image: -webkit-image-set(
83 url('../../../../ui/resources/default_100_percent/close_2.png') 1x,
84 url('../../../../ui/resources/default_200_percent/close_2.png') 2x);
87 display: inline-block;
95 background-image: -webkit-image-set(
96 url('../../../../ui/resources/default_100_percent/close_2_hover.png') 1x,
97 url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x);
100 .close-button:active {
101 background-image: -webkit-image-set(
102 url('../../../../ui/resources/default_100_percent/close_2_pressed.png')
104 url('../../../../ui/resources/default_200_percent/close_2_pressed.png')
109 -webkit-margin-start: 0.5em;
113 /* Must match #footer height. */
116 /* We want this to fill the window except for the region used
123 body.bare-minimum #card-slider-frame {
128 /* fill the apps-frame */
129 display: -webkit-box;
137 /* Leave room for the scrollbar. */
145 /* For themes that right-align their images, we flip the attribution to the
146 * left to avoid conflicts. We also do this for bare-minimum mode since there
147 * can be conflicts with the recently closed menu. */
148 html[themegravity='right'] #attribution,
149 body.bare-minimum #attribution,
150 html[dir='rtl'] #attribution {
156 #attribution > span {
161 background-image: linear-gradient(
162 rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
173 /* TODO(estade): remove this border hack and replace with a webkit-gradient
174 * border-image on #footer once WebKit supports border-image-slice.
175 * See https://bugs.webkit.org/show_bug.cgi?id=20127 */
181 -webkit-align-items: center;
182 -webkit-justify-content: space-between;
183 display: -webkit-flex;
187 #footer-content > * {
192 display: inline-block;
198 #promo-bubble-anchor {
207 body.bare-minimum #footer {
208 background: transparent;
215 html[dir='rtl'] body.bare-minimum #footer {
220 body.bare-minimum #footer-border,
221 body.bare-minimum #logo-img,
222 body.bare-minimum #dot-list {
227 -webkit-transition: none !important;
230 /* Login Status. **************************************************************/
233 -webkit-box-shadow: none;
234 background: transparent none;
239 /* Leave room for the scrollbar. */
251 html[dir='rtl'] #login-container {
257 -webkit-padding-end: 37px;
258 background-position: right center;
259 background-repeat: no-repeat;
263 html[dir='rtl'] .login-status-icon {
264 background-position-x: left;
269 text-decoration: underline;
272 #login-status-bubble-contents {
276 #login-status-message-container {
280 #login-status-learn-more {
281 display: inline-block;
285 -webkit-box-align: center;
286 -webkit-box-orient: horizontal;
287 -webkit-box-pack: end;
288 display: -webkit-box;
291 #login-status-advanced-container {
295 #login-status-dismiss {
299 /* Trash. *********************************************************************/
302 -webkit-padding-start: 10px;
303 -webkit-transition: top 200ms, opacity 0;
304 -webkit-transition-delay: 0, 200ms;
314 html[dir='rtl'] #trash {
319 #footer.showing-trash-mode #trash {
320 -webkit-transition-delay: 0, 0;
321 -webkit-transition-duration: 0, 200ms;
326 #footer.showing-trash-mode #trash.drag-target {
330 #trash > .trash-text {
331 -webkit-padding-end: 7px;
332 -webkit-padding-start: 30px;
333 border: 1px dashed #7f7f7f;
335 display: inline-block;
348 html[dir='rtl'] #trash > .lid,
349 html[dir='rtl'] #trash > .can {
353 #footer.showing-trash-mode #trash.drag-target .lid {
354 -webkit-transform: rotate(-45deg);
357 html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
358 -webkit-transform: rotate(45deg);
362 /* The font attributes match the nav inputs. */
365 pointer-events: none;
370 /* Page switcher buttons. *****************************************************/
373 -webkit-transition: width 150ms, right 150ms, background-color 150ms;
374 background-color: transparent;
388 /* Footer buttons. ************************************************************/
390 #chrome-web-store-link {
392 -webkit-padding-end: 12px;
393 /* Match transition delay of recently closed button. */
394 -webkit-transition-delay: 100ms;
397 display: inline-block;
399 text-decoration: none;
403 #chrome-web-store-title {
404 -webkit-padding-end: 36px;
405 -webkit-padding-start: 15px;
406 background: url('chrome://theme/IDR_WEBSTORE_ICON_24') right 50% no-repeat;
407 display: inline-block;
411 #chrome-web-store-link:hover {
415 html[dir='rtl'] #chrome-web-store-title {
416 background-position-x: left;
419 #vertical-separator {
421 background-color: rgb(178, 178, 178);
425 vertical-align: middle;
429 /* Show the separator only if one of the menus is visible. */
430 .footer-menu-button:not([hidden]) ~ #chrome-web-store-link:not([hidden])
431 ~ #vertical-separator {
432 display: inline-block;
435 /* In trash mode, hide the menus and web store link. */
436 #footer.showing-trash-mode .menu-container {
437 -webkit-transition-delay: 0;
442 #footer .menu-container {
443 -webkit-align-items: center;
444 -webkit-flex-direction: row;
445 -webkit-justify-content: flex-end;
446 /* Put menus in a box so the order can easily be swapped. */
447 display: -webkit-flex;
450 min-width: -webkit-min-content;
453 #recently-closed-menu-button {
457 #other-sessions-menu-button {
461 .other-sessions-promo-message {
466 .other-sessions-promo-message:only-child {
470 .other-sessions-promo-message p {