| OLD | NEW |
| 1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 4 * | 4 * |
| 5 * Css based bubble. | 5 * Css based bubble. |
| 6 */ | 6 */ |
| 7 | 7 |
| 8 .bubble { | 8 .bubble { |
| 9 -webkit-transition: opacity 200ms ease-in-out; | 9 -webkit-transition: opacity 200ms ease-in-out; |
| 10 background: white; | 10 background: rgba(0, 0, 0, 0.8); |
| 11 border: 1px solid rgba(0, 0, 0, 0.25); | 11 border-radius: 2px; |
| 12 color: rgba(255, 255, 255, 0.87); |
| 12 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | 13 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| 13 font-size: 12px; | 14 font-size: 12px; |
| 14 margin: 2px; | 15 margin: 2px; |
| 15 max-width: 250px; | 16 max-width: 250px; |
| 16 padding: 16px; | 17 padding: 16px; |
| 17 position: absolute; | 18 position: absolute; |
| 18 } | 19 } |
| 19 | 20 |
| 20 .bubble::before { | |
| 21 border-style: solid; | |
| 22 border-width: 8px; | |
| 23 content: ''; | |
| 24 display: block; | |
| 25 position: absolute; | |
| 26 } | |
| 27 | |
| 28 .bubble-top::before { | |
| 29 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; | |
| 30 bottom: -16px; | |
| 31 } | |
| 32 | |
| 33 html[dir=ltr] .bubble-top::before { | |
| 34 left: 17px; | |
| 35 } | |
| 36 | |
| 37 html[dir=rtl] .bubble-top::before { | |
| 38 right: 17px; | |
| 39 } | |
| 40 | |
| 41 html[dir=ltr] .bubble-right::before, | |
| 42 html[dir=rtl] .bubble-left::before { | |
| 43 border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent; | |
| 44 left: -16px; | |
| 45 top: 17px; | |
| 46 } | |
| 47 | |
| 48 .bubble-bottom::before { | |
| 49 border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; | |
| 50 top: -16px; | |
| 51 } | |
| 52 | |
| 53 html[dir=ltr] .bubble-bottom::before { | |
| 54 left: 17px; | |
| 55 } | |
| 56 | |
| 57 html[dir=rtl] .bubble-bottom::before { | |
| 58 right: 17px; | |
| 59 } | |
| 60 | |
| 61 html[dir=ltr] .bubble-left::before, | |
| 62 html[dir=rtl] .bubble-right::before { | |
| 63 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); | |
| 64 right: -16px; | |
| 65 top: 17px; | |
| 66 } | |
| 67 | |
| 68 .bubble::after { | |
| 69 border-style: solid; | |
| 70 border-width: 8px; | |
| 71 content: ''; | |
| 72 display: block; | |
| 73 position: absolute; | |
| 74 } | |
| 75 | |
| 76 .bubble-top::after { | |
| 77 border-color: white transparent transparent transparent; | |
| 78 bottom: -15px; | |
| 79 } | |
| 80 | |
| 81 html[dir=ltr] .bubble-top::after { | |
| 82 left: 17px; | |
| 83 } | |
| 84 | |
| 85 html[dir=rtl] .bubble-top::after { | |
| 86 right: 17px; | |
| 87 } | |
| 88 | |
| 89 html[dir=ltr] .bubble-right::after, | |
| 90 html[dir=rtl] .bubble-left::after { | |
| 91 border-color: transparent white transparent transparent; | |
| 92 left: -15px; | |
| 93 top: 17px; | |
| 94 } | |
| 95 | |
| 96 .bubble-bottom::after { | |
| 97 border-color: transparent transparent white transparent; | |
| 98 top: -15px; | |
| 99 } | |
| 100 | |
| 101 html[dir=ltr] .bubble-bottom::after { | |
| 102 left: 17px; | |
| 103 } | |
| 104 | |
| 105 html[dir=rtl] .bubble-bottom::after { | |
| 106 right: 17px; | |
| 107 } | |
| 108 | |
| 109 html[dir=ltr] .bubble-left::after, | |
| 110 html[dir=rtl] .bubble-right::after { | |
| 111 border-color: transparent transparent transparent white; | |
| 112 right: -15px; | |
| 113 top: 17px; | |
| 114 } | |
| 115 | |
| 116 .error-message-bubble { | 21 .error-message-bubble { |
| 117 -webkit-padding-start: 30px; | 22 -webkit-padding-start: 30px; |
| 118 background: url(chrome://theme/IDR_WARNING) left top no-repeat; | 23 background: url(chrome://theme/IDR_WARNING) left top no-repeat; |
| 119 background-size: 24px; | 24 background-size: 24px; |
| 120 } | 25 } |
| 121 | 26 |
| 122 .error-message-bubble-padding { | 27 .error-message-bubble-padding { |
| 123 margin-bottom: 10px; | 28 margin-bottom: 10px; |
| 124 } | 29 } |
| 125 | 30 |
| 126 html[dir=rtl] .error-message-bubble { | 31 html[dir=rtl] .error-message-bubble { |
| 127 background-position: right top; | 32 background-position: right top; |
| 128 } | 33 } |
| OLD | NEW |