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