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 |