Home | History | Annotate | Download | only in css 
      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 .bubble {
      6   position: absolute;
      7   white-space: normal;
      8   /* Height is dynamic, width fixed. */
      9   width: 300px;
     10   z-index: 9999;
     11 }
     12 
     13 .bubble-content {
     14   color: black;
     15   line-height: 150%;
     16   margin: 1px;
     17   padding: 8px 11px 12px;
     18   position: relative;
     19   z-index: 3;
     20 }
     21 
     22 /* When the close button is there, we need more padding on the right of the
     23  * bubble. */
     24 .bubble-close:not([hidden]) ~ .bubble-content {
     25   -webkit-padding-end: 22px;
     26 }
     27 
     28 .bubble-close {
     29   height: 16px;
     30   position: absolute;
     31   right: 6px;
     32   top: 6px;
     33   width: 16px;
     34   z-index: 4;
     35 }
     36 
     37 html[dir='rtl'] .bubble-close {
     38   left: 6px;
     39   right: auto;
     40 }
     41 
     42 .bubble-close {
     43   background-image: -webkit-image-set(
     44       url('../../../resources/default_100_percent/close_2.png') 1x,
     45       url('../../../resources/default_200_percent/close_2.png') 2x);
     46 }
     47 
     48 .bubble-close:hover {
     49   background-image: -webkit-image-set(
     50       url('../../../resources/default_100_percent/close_2_hover.png') 1x,
     51       url('../../../resources/default_200_percent/close_2_hover.png') 2x);
     52 }
     53 
     54 .bubble-close:active {
     55   background-image: -webkit-image-set(
     56       url('../../../resources/default_100_percent/close_2_pressed.png') 1x,
     57       url('../../../resources/default_200_percent/close_2_pressed.png') 2x);
     58 }
     59 
     60 .bubble-shadow {
     61   bottom: 0;
     62   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     63   left: 0;
     64   position: absolute;
     65   right: 0;
     66   top: 0;
     67   z-index: 1;
     68 }
     69 
     70 .bubble-arrow {
     71   -webkit-transform: rotate(45deg);
     72   box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
     73   height: 15px;
     74   position: absolute;
     75   width: 15px;
     76   z-index: 2;
     77 }
     78 
     79 .bubble-content,
     80 .bubble-arrow {
     81   background: white;
     82 }
     83 
     84 .bubble-shadow,
     85 .bubble-arrow {
     86   border: 1px solid rgba(0, 0, 0, 0.3);
     87 }
     88 
     89 .bubble-shadow,
     90 .bubble-content {
     91   border-radius: 6px;
     92   box-sizing: border-box;
     93 }
     94 
     95 .auto-close-bubble {
     96   position: fixed;
     97 }
     98