Chromium Code Reviews| 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 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 } |
| OLD | NEW |