OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 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 .language-options { | 5 .language-options { |
6 display: -webkit-box; | 6 display: -webkit-box; |
7 margin: 10px 0; | 7 margin: 10px 0; |
8 } | 8 } |
9 | 9 |
10 .language-options-lower-left button, | 10 .language-options-lower-left button, |
11 .language-options-right button { | 11 .language-options-right button { |
12 min-width: 70px; | 12 min-width: 70px; |
13 } | 13 } |
14 | 14 |
15 .language-options h3 { | 15 .language-options h3 { |
16 -webkit-margin-start: 12px; | 16 -webkit-margin-start: 12px; |
17 font-size: 100%; | 17 font-size: 100%; |
18 font-weight: bold; | 18 font-weight: bold; |
19 margin-top: 12px; | 19 margin-top: 12px; |
20 } | 20 } |
21 | 21 |
22 .language-options-contents { | 22 .language-options-contents { |
| 23 -webkit-padding-end: 12px; |
23 -webkit-padding-start: 12px; | 24 -webkit-padding-start: 12px; |
24 -webkit-padding-end: 12px; | |
25 padding-bottom: 10px; | 25 padding-bottom: 10px; |
26 } | 26 } |
27 | 27 |
28 .language-options-header, | 28 .language-options-header, |
29 .language-options-footer { | 29 .language-options-footer { |
30 margin: 10px 0; | 30 margin: 10px 0; |
31 } | 31 } |
32 | 32 |
33 .language-options-left, | 33 .language-options-left, |
34 .language-options-right { | 34 .language-options-right { |
35 border: 1px solid #ccc; | 35 border: 1px solid #ccc; |
| 36 height: 400px; |
| 37 padding: 0; |
36 vertical-align: top; | 38 vertical-align: top; |
37 padding: 0; | |
38 height: 400px; | |
39 } | 39 } |
40 | 40 |
41 .language-options-left { | 41 .language-options-left { |
42 -webkit-box-orient: vertical; | 42 -webkit-box-orient: vertical; |
| 43 background-color: rgb(235, 239, 249); |
43 display: -webkit-box; | 44 display: -webkit-box; |
44 background-color: rgb(235, 239, 249); | |
45 width: 300px; | 45 width: 300px; |
46 } | 46 } |
47 | 47 |
48 /* On OS X we use the native OS spellchecker, so don't display the dictionary */ | 48 /* On OS X we use the native OS spellchecker, so don't display the dictionary */ |
49 /* pane. */ | 49 /* pane. */ |
50 html[os=mac] .language-options-left { | 50 html[os=mac] .language-options-left { |
51 background-color: white; | 51 background-color: white; |
52 } | 52 } |
53 | 53 |
54 html[os=mac] .language-options-right { | 54 html[os=mac] .language-options-right { |
55 visibility: hidden; | 55 visibility: hidden; |
56 } | 56 } |
57 | 57 |
58 .language-options-lower-left { | 58 .language-options-lower-left { |
59 -webkit-box-flex: 0; | 59 -webkit-box-flex: 0; |
60 -webkit-padding-start: 12px; | 60 -webkit-padding-start: 12px; |
61 padding-bottom: 10px; | 61 padding-bottom: 10px; |
62 } | 62 } |
63 | 63 |
64 .language-options-right { | 64 .language-options-right { |
65 /* To share the center line with the left pane. */ | 65 /* To share the center line with the left pane. */ |
66 -webkit-margin-start: -1px; | 66 -webkit-margin-start: -1px; |
67 width: 360px; | 67 width: 360px; |
68 } | 68 } |
69 | 69 |
70 .language-options-notification { | 70 .language-options-notification { |
| 71 background-color: rgb(255, 242, 158); |
| 72 border-bottom: 1px solid #ccc; |
| 73 border-top: 1px solid #ccc; |
71 display: none; | 74 display: none; |
72 background-color: rgb(255, 242, 158); | |
73 border-top: 1px solid #ccc; | |
74 border-bottom: 1px solid #ccc; | |
75 padding: 12px 30px 12px 12px; | 75 padding: 12px 30px 12px 12px; |
76 } | 76 } |
77 | 77 |
78 #language-options-input-method-list button { | 78 #language-options-input-method-list button { |
| 79 -webkit-margin-start: 20px; |
79 display: block; | 80 display: block; |
80 -webkit-margin-start: 20px; | |
81 } | 81 } |
82 | 82 |
83 #language-options-ui-language-button { | 83 #language-options-ui-language-button { |
| 84 -webkit-margin-start: 10px; |
84 width: 95%; | 85 width: 95%; |
85 -webkit-margin-start: 10px; | |
86 } | 86 } |
87 | 87 |
88 #language-options-spell-check-language-button { | 88 #language-options-spell-check-language-button { |
| 89 -webkit-margin-start: 10px; |
89 width: 95%; | 90 width: 95%; |
90 -webkit-margin-start: 10px; | |
91 } | 91 } |
92 | 92 |
93 #language-options-input-method-list label { | 93 #language-options-input-method-list label { |
94 margin: 4px 0; | 94 margin: 4px 0; |
95 } | 95 } |
96 | 96 |
97 #language-options-list { | 97 #language-options-list { |
98 -webkit-box-flex: 1; | 98 -webkit-box-flex: 1; |
99 outline: none; | 99 outline: none; |
100 padding: 1px 0 0; | 100 padding: 1px 0 0; |
101 width: 100%; | 101 width: 100%; |
102 } | 102 } |
103 | 103 |
104 #language-options-list .language-name { | 104 #language-options-list .language-name { |
105 -webkit-box-flex: 1; | 105 -webkit-box-flex: 1; |
106 overflow: hidden; | 106 overflow: hidden; |
107 text-overflow: ellipsis; | 107 text-overflow: ellipsis; |
108 white-space: nowrap; | 108 white-space: nowrap; |
109 } | 109 } |
110 | 110 |
111 #language-options-list li { | 111 #language-options-list li { |
112 -webkit-padding-start: 12px; | 112 -webkit-padding-start: 12px; |
| 113 padding-bottom: 2px; |
113 padding-top: 2px; | 114 padding-top: 2px; |
114 padding-bottom: 2px; | |
115 } | 115 } |
116 | 116 |
117 #language-options-list-dropmarker { | 117 #language-options-list-dropmarker { |
| 118 background-clip: padding-box; |
118 background-color: hsl(214, 91%, 65%); | 119 background-color: hsl(214, 91%, 65%); |
119 background-clip: padding-box; | |
120 border: 3px solid hsl(214, 91%, 65%); | 120 border: 3px solid hsl(214, 91%, 65%); |
121 border-bottom-color: transparent; | 121 border-bottom-color: transparent; |
| 122 border-radius: 0; |
122 border-top-color: transparent; | 123 border-top-color: transparent; |
123 border-radius: 0; | |
124 box-sizing: border-box; | 124 box-sizing: border-box; |
125 display: none; | 125 display: none; |
126 height: 8px; | 126 height: 8px; |
127 overflow: hidden; | 127 overflow: hidden; |
128 pointer-events: none; | 128 pointer-events: none; |
129 position: fixed; | 129 position: fixed; |
130 z-index: 10; | 130 z-index: 10; |
131 } | 131 } |
132 | 132 |
133 #language-options-ui-restart-button { | 133 #language-options-ui-restart-button { |
(...skipping 10 matching lines...) Expand all Loading... |
144 } | 144 } |
145 | 145 |
146 html[os=chromeos] #add-language-overlay-cancel-button { | 146 html[os=chromeos] #add-language-overlay-cancel-button { |
147 /* Place the button in the center. */ | 147 /* Place the button in the center. */ |
148 display: block; | 148 display: block; |
149 margin: auto; | 149 margin: auto; |
150 margin-top: 15px; | 150 margin-top: 15px; |
151 } | 151 } |
152 | 152 |
153 html[os=chromeos] #add-language-overlay-page { | 153 html[os=chromeos] #add-language-overlay-page { |
| 154 padding: 20px; |
154 width: 800px; | 155 width: 800px; |
155 padding: 20px; | |
156 } | 156 } |
157 | 157 |
158 html[os=chromeos] #add-language-overlay-page button.link-button { | 158 html[os=chromeos] #add-language-overlay-page button.link-button { |
159 padding: 0; | 159 padding: 0; |
160 text-align: left; | 160 text-align: left; |
161 } | 161 } |
162 | 162 |
163 html[os=chromeos] #add-language-overlay-page ul { | 163 html[os=chromeos] #add-language-overlay-page ul { |
| 164 margin: 0; |
164 padding: 0; | 165 padding: 0; |
165 margin: 0; | |
166 } | 166 } |
167 | 167 |
168 /* TODO(kochi): This is temporary copy from new_tab.css */ | 168 /* TODO(kochi): This is temporary copy from new_tab.css */ |
169 /* Notification */ | 169 /* Notification */ |
170 | 170 |
171 #notification { | 171 #notification { |
172 position: relative; | 172 -webkit-transition: opacity 150ms; |
173 background-color: hsl(52, 100%, 80%); | 173 background-color: hsl(52, 100%, 80%); |
174 border: 1px solid rgb(211, 211, 211); | 174 border: 1px solid rgb(211, 211, 211); |
175 border-radius: 6px; | 175 border-radius: 6px; |
176 padding: 7px 15px; | 176 color: black; |
177 white-space: nowrap; | |
178 display: table; | 177 display: table; |
| 178 font-weight: bold; |
179 /* Set the height and margin so that the element does not use any vertical | 179 /* Set the height and margin so that the element does not use any vertical |
180 space */ | 180 space. */ |
181 height: 16px; | 181 height: 16px; |
182 margin: -44px auto 12px auto; | 182 margin: -44px auto 12px auto; |
183 font-weight: bold; | |
184 opacity: 0; | 183 opacity: 0; |
| 184 padding: 7px 15px; |
185 pointer-events: none; | 185 pointer-events: none; |
186 -webkit-transition: opacity 150ms; | 186 position: relative; |
| 187 white-space: nowrap; |
187 z-index: 1; | 188 z-index: 1; |
188 color: black; | |
189 } | 189 } |
190 | 190 |
191 #notification > * { | 191 #notification > * { |
192 display: table-cell; | 192 display: table-cell; |
193 max-width: 500px; | 193 max-width: 500px; |
194 overflow: hidden; | 194 overflow: hidden; |
195 text-overflow: ellipsis; | 195 text-overflow: ellipsis; |
196 } | 196 } |
197 | 197 |
198 #notification.show { | 198 #notification.show { |
| 199 -webkit-transition: opacity 1s; |
199 opacity: 1; | 200 opacity: 1; |
200 pointer-events: all; | 201 pointer-events: all; |
201 -webkit-transition: opacity 1s; | |
202 } | 202 } |
203 | 203 |
204 #notification .link { | 204 #notification .link { |
| 205 -webkit-appearance: none; |
| 206 -webkit-padding-start: 20px; |
| 207 background: none; |
| 208 border: 0; |
| 209 color: rgba(0, 102, 204, 0.3); |
205 cursor: pointer; | 210 cursor: pointer; |
206 text-decoration: underline; | 211 text-decoration: underline; |
207 -webkit-appearance: none; | |
208 border: 0; | |
209 background: none; | |
210 color: rgba(0, 102, 204, 0.3); | |
211 -webkit-padding-start: 20px; | |
212 } | 212 } |
213 | 213 |
214 #notification .link-color { | 214 #notification .link-color { |
215 color: rgb(0, 102, 204); | 215 color: rgb(0, 102, 204); |
216 } | 216 } |
217 | 217 |
218 #chewing-max-chi-symbol-len { | 218 #chewing-max-chi-symbol-len { |
| 219 height: 30%; |
219 width: 100px; | 220 width: 100px; |
220 height: 30%; | |
221 } | 221 } |
222 | 222 |
223 #add-language-overlay-page .content-area { | 223 #add-language-overlay-page .content-area { |
224 padding-bottom: 10px; | 224 padding-bottom: 10px; |
225 } | 225 } |
226 | 226 |
227 .text-button, | 227 .text-button, |
228 .text-button:active, | 228 .text-button:active, |
229 .text-button:focus, | 229 .text-button:focus, |
230 .text-button:hover { | 230 .text-button:hover { |
231 -webkit-box-shadow: none; | 231 -webkit-box-shadow: none; |
232 background: transparent none; | 232 background: transparent none; |
233 border-color: transparent; | 233 border-color: transparent; |
234 color: #000; | 234 color: #000; |
235 } | 235 } |
236 | 236 |
237 button[disabled].text-button, | 237 button[disabled].text-button, |
238 button[disabled].text-button:active, | 238 button[disabled].text-button:active, |
239 button[disabled].text-button:focus, | 239 button[disabled].text-button:focus, |
240 button[disabled].text-button:hover { | 240 button[disabled].text-button:hover { |
241 -webkit-box-shadow: none; | 241 -webkit-box-shadow: none; |
242 background: transparent none; | 242 background: transparent none; |
243 border-color: transparent; | 243 border-color: transparent; |
244 color: #AAA; | 244 color: #AAA; |
245 } | 245 } |
OLD | NEW |