Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(25)

Side by Side Diff: chrome/browser/resources/bookmark_manager/css/bmm.css

Issue 9958101: [WebUI] Fix rest of CSS style nits in misc. dirs so I can turn on CSS checker. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: estade review Created 8 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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 html, body { 5 html,
6 body {
7 cursor: default;
8 height: 100%;
6 margin: 0; 9 margin: 0;
10 overflow: hidden;
7 width: 100%; 11 width: 100%;
8 height: 100%;
9 cursor: default;
10 overflow: hidden;
11 } 12 }
12 13
13 list { 14 list {
14 display: block; 15 display: block;
15 overflow-x: hidden; 16 overflow-x: hidden;
16 overflow-y: visible; /* let the container do the scrolling */ 17 overflow-y: visible; /* let the container do the scrolling */
17 } 18 }
18 19
19 list > * { 20 list > * {
21 -webkit-padding-end: 20px;
22 -webkit-padding-start: 3px;
20 color: hsl(0, 0%, 70%); 23 color: hsl(0, 0%, 70%);
Tyler Breisacher (Chromium) 2012/04/03 18:09:36 Generally, we prefer "0" to "0%" but I guess for h
Dan Beam 2012/04/03 19:42:01 There already is one: Exception: 0% values in l
21 padding: 0 3px; 24 display: -webkit-box;
22 -webkit-padding-end: 20px; 25 padding-bottom: 0;
26 padding-top: 0;
23 text-decoration: none; 27 text-decoration: none;
24 white-space: nowrap; 28 white-space: nowrap;
25 display: -webkit-box;
26 } 29 }
27 30
28 list > * > * { 31 list > * > * {
29 box-sizing: border-box;
30 -webkit-padding-start: 20px; 32 -webkit-padding-start: 20px;
31 background: 0 50% no-repeat; 33 background: 0 50% no-repeat;
34 box-sizing: border-box;
32 overflow: hidden; 35 overflow: hidden;
33 text-overflow: ellipsis; 36 text-overflow: ellipsis;
34 white-space: pre; /* Don't collapse whitespace */ 37 white-space: pre; /* Don't collapse whitespace */
35 } 38 }
36 39
37 list > * > .label { 40 list > * > .label {
38 -webkit-transition: all .15s; 41 -webkit-transition: all 150ms;
39 color: black; 42 color: black;
40 display: inline-block; /* We need to use inline-block here due to RTL. */ 43 display: inline-block; /* We need to use inline-block here due to RTL. */
41 } 44 }
42 45
43 list > * > .url { 46 list > * > .url {
44 display: none;
45 -webkit-box-flex: 1; 47 -webkit-box-flex: 1;
46 direction: ltr; /* URLs always read LTR */ 48 direction: ltr; /* URLs always read LTR */
49 display: none;
47 } 50 }
48 51
49 list > :hover > .url, 52 list > :hover > .url,
50 list > [selected] > .url { 53 list > [selected] > .url {
51 display: block; 54 display: block;
52 } 55 }
53 56
54 /* Handle proper padding for URL field in an RTL context, where field order is 57 /* Handle proper padding for URL field in an RTL context, where field order is
55 * |div.url||div.label| - so we need padding at the right of URL, not at the 58 * |div.url||div.label| - so we need padding at the right of URL, not at the
56 * left. And since url is always LTR, that is padding at the end, not the start. 59 * left. And since url is always LTR, that is padding at the end, not the start.
57 */ 60 */
58 html[dir=rtl] .url { 61 html[dir=rtl] .url {
59 -webkit-padding-end: 20px; 62 -webkit-padding-end: 20px;
60 -webkit-padding-start: 0; 63 -webkit-padding-start: 0;
61 } 64 }
62 65
63 html[dir=rtl] list .label { 66 html[dir=rtl] list .label {
64 background-position: 100% 50%; 67 background-position: 100% 50%;
65 } 68 }
66 69
67 list > .folder > .label { 70 list > .folder > .label {
68 background-image: url("../../../../../ui/resources/folder_closed.png"); 71 background-image: url('../../../../../ui/resources/folder_closed.png');
69 } 72 }
70 73
71 /* We need to ensure that even empty labels take up space */ 74 /* We need to ensure that even empty labels take up space */
72 list > * > .label:empty:after, 75 list > * > .label:empty:after,
73 list > * > .url:empty:after { 76 list > * > .url:empty:after {
74 content: " "; 77 content: ' ';
75 white-space: pre; 78 white-space: pre;
76 } 79 }
77 80
78 list > .folder > .url:empty:after { 81 list > .folder > .url:empty:after {
79 content: ""; 82 content: '';
80 } 83 }
81 84
82 list > * > button { 85 list > * > button {
83 -webkit-transition: opacity .15s; 86 -webkit-transition: opacity 150ms;
84 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; 87 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
85 border: 1px solid hsl(214, 91%, 85%); 88 border: 1px solid hsl(214, 91%, 85%);
86 border-radius: 3px; 89 border-radius: 3px;
87 bottom: 1px; 90 bottom: 1px;
88 display: none; 91 display: none;
89 overflow: hidden; 92 overflow: hidden;
90 padding: 0; 93 padding: 0;
91 position: absolute; 94 position: absolute;
92 right: 3px; 95 right: 3px;
93 top: 1px; 96 top: 1px;
94 width: 15px; 97 width: 15px;
95 } 98 }
96 99
97 list > [selected]:hover > button, 100 list > [selected]:hover > button,
98 list > * > button[menu-shown] { 101 list > * > button[menu-shown] {
99 border-color: hsl(214, 91%, 65%); 102 border-color: hsl(214, 91%, 65%);
100 } 103 }
101 104
102 list > :hover > button { 105 list > :hover > button {
103 display: block; 106 display: block;
104 } 107 }
105 108
106 list > * > button:hover, 109 list > * > button:hover,
107 list > * > button[menu-shown] { 110 list > * > button[menu-shown] {
108 display: block; 111 display: block;
109 } 112 }
110 113
111 html[dir=rtl] list > * > button { 114 html[dir=rtl] list > * > button {
115 left: 3px;
112 right: auto; 116 right: auto;
113 left: 3px;
114 } 117 }
115 118
116 /* Edit mode */ 119 /* Edit mode */
117 120
118 list [editing] .label input, 121 list [editing] .label input,
119 list [editing] .url input { 122 list [editing] .url input {
123 -webkit-margin-end: 4px;
124 -webkit-margin-start: -4px;
125 -webkit-padding-end: 3px;
126 -webkit-padding-start: 1px;
120 /* Do not inherit the line-height */ 127 /* Do not inherit the line-height */
121 font-family: inherit; 128 font-family: inherit;
122 font-size: inherit; 129 font-size: inherit;
123 font-weight: inherit; 130 font-weight: inherit;
124 margin: 0; 131 margin-bottom: 0;
125 -webkit-margin-start: -4px; 132 margin-top: 0;
126 -webkit-margin-end: 4px;
127 max-width: 40%; 133 max-width: 40%;
128 padding: 0; 134 padding-bottom: 0;
129 -webkit-padding-start: 1px; 135 padding-top: 0;
130 -webkit-padding-end: 3px;
131 text-decoration: none; 136 text-decoration: none;
132 } 137 }
133 138
134 .tree-item [editing] input { 139 .tree-item [editing] input {
135 -webkit-margin-start: -3px;
136 -webkit-padding-end: 7px;
137 margin: 0; 140 margin: 0;
138 padding: 0; 141 padding: 0;
139 <if expr="is_macosx"> 142 <if expr="is_macosx">
140 padding-top: 1px; 143 padding-top: 1px;
141 </if> 144 </if>
142 } 145 }
143 146
144 <if expr="is_macosx"> 147 <if expr="is_macosx">
145 list .label input, 148 list .label input,
146 list .url input { 149 list .url input {
147 outline: none; 150 outline: none;
148 } 151 }
149 </if> 152 </if>
150 153
151 list > [editing] { 154 list > [editing] {
152 overflow: visible; 155 overflow: visible;
153 } 156 }
154 157
155 list [editing] .label, 158 list [editing] .label,
156 list [editing] .url, 159 list [editing] .url,
157 list [editing] > * { 160 list [editing] > * {
161 display: inline;
158 overflow: visible; 162 overflow: visible;
159 display: inline;
160 } 163 }
161 164
162 list [editing] .url { 165 list [editing] .url {
163 -webkit-padding-start: 10px; 166 -webkit-padding-start: 10px;
164 } 167 }
165 168
166 /* end editing */ 169 /* end editing */
167 170
168 html[dir=rtl] list > .folder > .label { 171 html[dir=rtl] list > .folder > .label {
169 background-image: url("../../../../../ui/resources/folder_closed_rtl.png"); 172 background-image: url('../../../../../ui/resources/folder_closed_rtl.png');
170 } 173 }
171 174
172 <if expr="is_macosx"> 175 <if expr="is_macosx">
173 list > .folder > .label, 176 list > .folder > .label,
174 .tree-label, 177 .tree-label,
175 .tree-row[may-have-children] > .tree-label, 178 .tree-row[may-have-children] > .tree-label,
176 .tree-item[expanded] > .tree-row > .tree-label { 179 .tree-item[expanded] > .tree-row > .tree-label {
177 background-image: url("../../../../app/theme/bookmark_bar_folder_mac.png"); 180 background-image: url('../../../../app/theme/bookmark_bar_folder_mac.png');
178 } 181 }
179 </if> 182 </if>
180 183
181 .main { 184 .main {
185 bottom: 0;
186 display: -webkit-box;
187 left: 0;
182 position: absolute; 188 position: absolute;
183 display: -webkit-box; 189 right: 0;
184 top: 79px; 190 top: 79px;
185 left: 0;
186 right: 0;
187 bottom: 0;
188 } 191 }
189 192
190 .main > * { 193 .main > * {
191 height: 100%; 194 height: 100%;
192 } 195 }
193 196
194 #tree-container { 197 #tree-container {
198 -webkit-padding-end: 5px;
199 -webkit-padding-start: 10px;
200 box-sizing: border-box;
201 /* min-width and max-width are used by the split pane. */
202 max-width: 50%;
203 min-width: 50px;
204 overflow: auto;
205 padding-bottom: 5px;
206 padding-top: 5px;
195 width: 200px; 207 width: 200px;
196 /* min-width and max-width are used by the split pane. */
197 min-width: 50px;
198 max-width: 50%;
199 overflow: auto;
200 box-sizing: border-box;
201 padding: 5px;
202 -webkit-padding-start: 10px;
203 } 208 }
204 209
205 #tree { 210 #tree {
211 display: inline-block;
206 min-width: 100%; 212 min-width: 100%;
207 overflow: visible; /* let the container do the scrolling */ 213 overflow: visible; /* let the container do the scrolling */
208 display: inline-block;
209 } 214 }
210 215
211 #list { 216 #list {
212 -webkit-box-flex: 1; 217 -webkit-box-flex: 1;
213 box-sizing: border-box; 218 box-sizing: border-box;
214 padding: 5px; 219 padding: 5px;
215 } 220 }
216 221
217 .splitter { 222 .splitter {
223 background-color: rgb(235, 239, 249);
224 cursor: e-resize;
218 width: 5px; 225 width: 5px;
219 background-color: #ebeff9;
220 cursor: e-resize;
221 <if expr="is_macosx"> 226 <if expr="is_macosx">
222 cursor: col-resize; 227 cursor: col-resize;
223 </if> 228 </if>
224 } 229 }
225 230
226 .logo { 231 .logo {
227 -webkit-appearance: none; 232 -webkit-appearance: none;
233 background: url('../images/bookmarks_section_32.png') no-repeat 50% 50%;
228 border: 0; 234 border: 0;
229 background: url("../images/bookmarks_section_32.png") no-repeat 50% 50%; 235 cursor: pointer;
236 float: left;
237 height: 32px;
238 margin: 10px;
230 width: 32px; 239 width: 32px;
231 height: 32px;
232 cursor: pointer;
233 margin: 10px;
234 float: left;
235 } 240 }
236 241
237 .header form { 242 .header form {
238 float: left; 243 float: left;
239 margin: 14px 2px; 244 margin: 14px 2px 0 2px;
240 margin-bottom: 0;
241 width: 171px; 245 width: 171px;
242 } 246 }
243 247
244 .header { 248 .header {
245 min-width: 400px; 249 min-width: 400px;
246 } 250 }
247 251
248 html[dir=rtl] .logo, 252 html[dir=rtl] .logo,
249 html[dir=rtl] .header > div, 253 html[dir=rtl] .header > div,
250 html[dir=rtl] .header form { 254 html[dir=rtl] .header form {
251 float: right; 255 float: right;
252 } 256 }
253 257
254 input[type='search'] { 258 input[type='search'] {
255 -webkit-margin-end: 2px; 259 -webkit-margin-end: 2px;
256 -webkit-margin-start: 2px; 260 -webkit-margin-start: 2px;
257 width: 100%; 261 width: 100%;
258 } 262 }
259 263
260 #drop-overlay { 264 #drop-overlay {
261 position: absolute; 265 background-color: hsla(214, 91%, 85%, .5);
262 display: none; 266 border: 1px solid hsl(214, 91%, 85%);
263 pointer-events: none;
264 border: 1px solid hsl(214, 91%, 85%);;
265 border-radius: 3px; 267 border-radius: 3px;
266 box-sizing: border-box; 268 box-sizing: border-box;
267 background-color: hsla(214, 91%, 85%, .5); 269 display: none;
268 overflow: hidden; 270 overflow: hidden;
271 pointer-events: none;
272 position: absolute;
269 z-index: -1; 273 z-index: -1;
270 } 274 }
271 275
272 #drop-overlay.line { 276 #drop-overlay.line {
277 background-clip: padding-box;
278 background-color: black;
273 border: 3px solid black; 279 border: 3px solid black;
280 border-bottom-color: transparent;
281 border-radius: 0;
274 border-top-color: transparent; 282 border-top-color: transparent;
275 border-bottom-color: transparent;
276 background-color: black;
277 background-clip: padding-box;
278 height: 8px; 283 height: 8px;
279 border-radius: 0;
280 z-index: 10; 284 z-index: 10;
281 } 285 }
282 286
283 .summary { 287 .summary {
284 background-color: #ebeff9; 288 background-color: rgb(235, 239, 249);
285 border-top: 1px solid #9cc2ef; 289 border-top: 1px solid rgb(156, 194, 239);
290 clear: both;
286 padding: 5px 10px; 291 padding: 5px 10px;
287 clear: both;
288 white-space: nowrap; 292 white-space: nowrap;
289 } 293 }
290 294
291 .summary > * { 295 .summary > * {
296 display: inline-block;
292 font-size: 100%; 297 font-size: 100%;
293 display: inline-block;
294 margin: 0; 298 margin: 0;
295 } 299 }
296 300
297 .summary button { 301 .summary button {
298 -webkit-appearance: none; 302 -webkit-appearance: none;
303 -webkit-margin-start: 10px;
304 -webkit-padding-end: 11px;
305 -webkit-padding-start: 0;
306 background: -webkit-canvas(drop-down-arrow) right middle no-repeat;
299 background: transparent; 307 background: transparent;
300 border: 0; 308 border: 0;
301 font: inherit; 309 font: inherit;
302 padding: 0; 310 padding-bottom: 0;
303 background: -webkit-canvas(drop-down-arrow) 100% 50% no-repeat; 311 padding-top: 0;
304 -webkit-padding-end: 11px;
305 -webkit-margin-start: 10px;
306 } 312 }
307 313
308 html[dir=rtl] .summary button { 314 html[dir=rtl] .summary button {
309 background-position: 0 50%; 315 background-position: top middle;
310 } 316 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698