| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright (c) 2011 The Chromium Authors. All rights reserved. | 2 * Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| 3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
| 4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
| 5 */ | 5 */ |
| 6 | 6 |
| 7 /* Outer frame of the dialog. */ | 7 /* Outer frame of the dialog. */ |
| 8 body { | 8 body { |
| 9 -webkit-box-flex: 1; | 9 -webkit-box-flex: 1; |
| 10 -webkit-box-orient: vertical; | 10 -webkit-box-orient: vertical; |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 93 background-image: -webkit-linear-gradient(top, #fff,#f6f6f6); | 93 background-image: -webkit-linear-gradient(top, #fff,#f6f6f6); |
| 94 border-bottom: 1px #d6d9e3 solid; | 94 border-bottom: 1px #d6d9e3 solid; |
| 95 color: #42506c; | 95 color: #42506c; |
| 96 font-size: 15px; | 96 font-size: 15px; |
| 97 font-weight: bold; | 97 font-weight: bold; |
| 98 height: 32px; | 98 height: 32px; |
| 99 padding-top: 8px; | 99 padding-top: 8px; |
| 100 padding-bottom: 8px; | 100 padding-bottom: 8px; |
| 101 } | 101 } |
| 102 | 102 |
| 103 /* Main part of the dialog between header and footer. */ | |
| 104 .dialog-container { | |
| 105 display: -webkit-box; | |
| 106 -webkit-box-orient: horizontal; | |
| 107 -webkit-box-align: stretch; | |
| 108 overflow: hidden; | |
| 109 -webkit-box-flex: 1; | |
| 110 } | |
| 111 | |
| 112 /* List/grid and preview are inside this container. */ | |
| 113 .dialog-main { | |
| 114 -webkit-box-flex: 1; | |
| 115 display:-webkit-box; | |
| 116 -webkit-box-orient: vertical; | |
| 117 -webkit-box-align: stretch; | |
| 118 } | |
| 119 | |
| 120 /* Roots list at the left. */ | |
| 121 .dialog-sidebar { | |
| 122 position: relative; | |
| 123 -webkit-box-flex: 0; | |
| 124 width: 200px; | |
| 125 margin-left: -200px; | |
| 126 background-color: rgba(240, 240, 240, 1); | |
| 127 margin-bottom: 15px; | |
| 128 margin-top: 15px; | |
| 129 -webkit-border-top-right-radius: 4px; | |
| 130 -webkit-border-top-left-radius: 4px; | |
| 131 -webkit-border-bottom-left-radius: 4px; | |
| 132 -webkit-transition: margin-left 180ms ease; | |
| 133 overflow: hidden; | |
| 134 } | |
| 135 | |
| 136 .dialog-container[sidebar] .dialog-sidebar { | |
| 137 margin-left: 15px; | |
| 138 } | |
| 139 | |
| 140 /* Roots list at the left. */ | |
| 141 list.roots-list { | |
| 142 width: 100%; | |
| 143 } | |
| 144 | |
| 145 list.roots-list > * { | |
| 146 border: none; | |
| 147 border-radius: 0; | |
| 148 line-height: 35px; | |
| 149 margin: 0; | |
| 150 padding: 0 5px; | |
| 151 background-color: rgba(240,240,240,1); | |
| 152 } | |
| 153 | |
| 154 list.roots-list > [lead], | |
| 155 list.roots-list > [selected], | |
| 156 list.roots-list > [anchor] { | |
| 157 background-color: hsl(214,91%,89%); | |
| 158 } | |
| 159 | |
| 160 list.roots-list > [lead]:hover, | |
| 161 list.roots-list > [selected]:hover, | |
| 162 list.roots-list > [anchor]:hover { | |
| 163 background-color: hsl(214,91%,87%); | |
| 164 } | |
| 165 | |
| 166 list.roots-list li.root-item { | |
| 167 display: -webkit-box; | |
| 168 -webkit-box-align: center; | |
| 169 -webkit-box-pack: start; | |
| 170 } | |
| 171 | |
| 172 li.root-item > * { | |
| 173 display: block; | |
| 174 margin-right: 5px; | |
| 175 } | |
| 176 | |
| 177 li.root-item > .text { | |
| 178 max-width: 130px; | |
| 179 overflow: hidden; | |
| 180 text-overflow: ellipsis; | |
| 181 white-space: nowrap; | |
| 182 } | |
| 183 | |
| 184 li.root-item > .spacer { | |
| 185 -webkit-box-flex: 1; | |
| 186 } | |
| 187 | |
| 188 img.root-eject { | |
| 189 opacity: 0.5; | |
| 190 cursor: pointer; | |
| 191 width: 15px; | |
| 192 height: 12px; | |
| 193 } | |
| 194 | |
| 195 img.root-eject:hover { | |
| 196 opacity: 1; | |
| 197 } | |
| 198 | |
| 199 /* Breadcrumbs and things under the title but above the list view. */ | 103 /* Breadcrumbs and things under the title but above the list view. */ |
| 200 .dialog-header { | 104 .dialog-header { |
| 201 -webkit-box-orient: horizontal; | 105 -webkit-box-orient: horizontal; |
| 202 -webkit-box-align: center; | 106 -webkit-box-align: center; |
| 203 display: -webkit-box; | 107 display: -webkit-box; |
| 204 margin-top: 15px; | 108 margin: 15px; |
| 205 margin-right: 15px; | |
| 206 margin-bottom: 4px; | 109 margin-bottom: 4px; |
| 207 margin-left: 15px; | 110 } |
| 208 -webkit-transition: all 180ms ease; | |
| 209 } | |
| 210 | 111 |
| 211 /* Container for the detail and thumbnail (not implemented yet) list views. */ | 112 /* Container for the detail and thumbnail (not implemented yet) list views. */ |
| 212 .dialog-container[sidebar] .dialog-header { | |
| 213 margin-left: 0; | |
| 214 } | |
| 215 | |
| 216 /* Close sidebar button. */ | |
| 217 div.close-sidebar { | |
| 218 cursor: pointer; | |
| 219 position: absolute; | |
| 220 right: 0; | |
| 221 top: 2px; | |
| 222 display: none; | |
| 223 z-index: 10; | |
| 224 background-color: white; | |
| 225 border: 1px solid rgba(200,200,200,1); | |
| 226 width: 13px; | |
| 227 height: 24px; | |
| 228 } | |
| 229 | |
| 230 div.close-sidebar:hover { | |
| 231 background-color: rgba(240,240,240,1); | |
| 232 } | |
| 233 | |
| 234 /* Open sidebar button. */ | |
| 235 div.open-sidebar { | |
| 236 cursor: pointer; | |
| 237 margin-right: 10px; | |
| 238 background-color: white; | |
| 239 width: 13px; | |
| 240 height: 24px; | |
| 241 } | |
| 242 | |
| 243 div.open-sidebar:hover { | |
| 244 background-color: rgba(240,240,240,1); | |
| 245 } | |
| 246 | |
| 247 .dialog-container[sidebar] div.open-sidebar { | |
| 248 display: none;; | |
| 249 } | |
| 250 | |
| 251 .dialog-container[sidebar] div.close-sidebar { | |
| 252 display: block; | |
| 253 } | |
| 254 | |
| 255 /* Container for the detail and thumbnail list views. */ | |
| 256 .dialog-body { | 113 .dialog-body { |
| 257 -webkit-box-orient: vertical; | 114 -webkit-box-orient: vertical; |
| 258 -webkit-box-flex: 1; | 115 -webkit-box-flex: 1; |
| 259 border: 1px #aaa solid; | 116 border: 1px #aaa solid; |
| 260 border-radius: 4px; | 117 border-radius: 4px; |
| 261 display: -webkit-box; | 118 display: -webkit-box; |
| 262 margin-right: 15px; | 119 margin: 15px; |
| 263 margin-bottom: 15px; | 120 margin-top: 0; |
| 264 margin-left: 15px; | |
| 265 overflow: hidden; | 121 overflow: hidden; |
| 266 -webkit-transition: all 180ms ease; | |
| 267 } | |
| 268 | |
| 269 .dialog-container[sidebar] .dialog-body { | |
| 270 -webkit-border-top-left-radius: 0; | |
| 271 -webkit-border-bottom-left-radius: 0; | |
| 272 margin-left: 0; | |
| 273 } | 122 } |
| 274 | 123 |
| 275 /* Container for the ok/cancel buttons. */ | 124 /* Container for the ok/cancel buttons. */ |
| 276 .dialog-footer { | 125 .dialog-footer { |
| 277 -webkit-box-orient: horizontal; | 126 -webkit-box-orient: horizontal; |
| 278 display: -webkit-box; | 127 display: -webkit-box; |
| 279 margin: 15px; | 128 margin: 15px; |
| 280 margin-top: 0; | 129 margin-top: 0; |
| 281 } | 130 } |
| 282 | 131 |
| 283 /* The container for breadcrumb elements. */ | 132 /* The container for breadcrumb elements. */ |
| 284 .breadcrumbs { | 133 .breadcrumbs { |
| 285 -webkit-box-orient: horizontal; | 134 -webkit-box-orient: horizontal; |
| 286 -webkit-box-flex: 1; | 135 -webkit-box-flex: 1; |
| 287 display: -webkit-box; | 136 display: -webkit-box; |
| 288 -webkit-box-align: center; | |
| 289 font-size: 15px; | 137 font-size: 15px; |
| 290 line-height: 15px; | 138 line-height: 15px; |
| 291 height: 18px; | 139 height: 18px; |
| 292 overflow: hidden; | 140 overflow: hidden; |
| 293 text-overflow: ellipsis; | 141 text-overflow: ellipsis; |
| 294 white-space: nowrap; | 142 white-space: nowrap; |
| 295 } | 143 } |
| 296 | 144 |
| 297 .dialog-container[sidebar] .breadcrumbs { | |
| 298 margin-left: 10px; | |
| 299 } | |
| 300 | |
| 301 /* Icon at the start of breadcrumb path. Corresponds to the root selected. */ | |
| 302 .breadcrumb-icon { | |
| 303 margin-right: 5px; | |
| 304 display: block; | |
| 305 } | |
| 306 | |
| 307 .dialog-container[sidebar] .breadcrumb-icon { | |
| 308 display: none; | |
| 309 } | |
| 310 | |
| 311 /* A single directory name in the list of path breadcrumbs. */ | 145 /* A single directory name in the list of path breadcrumbs. */ |
| 312 .breadcrumb-path { | 146 .breadcrumb-path { |
| 313 color: #265692; | 147 color: #265692; |
| 314 cursor: pointer; | 148 cursor: pointer; |
| 315 font-size: 14px; | 149 font-size: 14px; |
| 316 } | 150 } |
| 317 | 151 |
| 318 /* The final breadcrumb, representing the current directory. */ | 152 /* The final breadcrumb, representing the current directory. */ |
| 319 .breadcrumb-last { | 153 .breadcrumb-last { |
| 320 color: #666; | 154 color: #666; |
| (...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 369 padding: 15px; | 203 padding: 15px; |
| 370 } | 204 } |
| 371 | 205 |
| 372 .downloads-warning div { | 206 .downloads-warning div { |
| 373 display: -webkit-box; | 207 display: -webkit-box; |
| 374 -webkit-box-flex: 1; | 208 -webkit-box-flex: 1; |
| 375 } | 209 } |
| 376 | 210 |
| 377 /* The cr.ui.Grid representing the detailed file list. */ | 211 /* The cr.ui.Grid representing the detailed file list. */ |
| 378 .thumbnail-grid { | 212 .thumbnail-grid { |
| 379 width: 100%; | 213 position: absolute; |
| 214 top: 0; |
| 215 left: 0; |
| 216 border: 0; |
| 380 overflow-y: scroll; | 217 overflow-y: scroll; |
| 381 } | 218 } |
| 382 | 219 |
| 383 /* An item in the thumbnail view. */ | 220 /* An item in the thumbnail view. */ |
| 384 .thumbnail-item { | 221 .thumbnail-item { |
| 385 margin-top: 10px; | 222 margin-top: 10px; |
| 386 margin-left: 10px; | 223 margin-left: 10px; |
| 387 width: 120px; | 224 width: 120px; |
| 388 height: 145px; | 225 height: 145px; |
| 389 text-align: center; | 226 text-align: center; |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 424 } | 261 } |
| 425 | 262 |
| 426 /* Text box used for renaming in the thumbnail list. */ | 263 /* Text box used for renaming in the thumbnail list. */ |
| 427 .thumbnail-grid input.rename { | 264 .thumbnail-grid input.rename { |
| 428 -webkit-margin-start: -2px; | 265 -webkit-margin-start: -2px; |
| 429 position: absolute; | 266 position: absolute; |
| 430 } | 267 } |
| 431 | 268 |
| 432 /* The cr.ui.Table representing the detailed file list. */ | 269 /* The cr.ui.Table representing the detailed file list. */ |
| 433 .detail-table { | 270 .detail-table { |
| 434 width: 100%; | 271 position: absolute; |
| 272 top: 0; |
| 273 left: 0; |
| 435 border: 0; | 274 border: 0; |
| 436 } | 275 } |
| 437 | 276 |
| 438 /* Bottom pane describing current selection. */ | 277 /* Bottom pane describing current selection. */ |
| 439 .preview-panel { | 278 .preview-panel { |
| 440 -webkit-box-orient: horizontal; | 279 -webkit-box-orient: horizontal; |
| 441 display: -webkit-box; | 280 display: -webkit-box; |
| 442 height: 61px; | 281 height: 61px; |
| 443 background-color: #F0F0F0; | 282 background-color: #F0F0F0; |
| 444 padding: 0px 14px 0px 14px; | 283 padding: 0px 14px 0px 14px; |
| (...skipping 339 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 784 /* Overlay pane covering the entire file manager window (e.g. image editor)*/ | 623 /* Overlay pane covering the entire file manager window (e.g. image editor)*/ |
| 785 .overlay-pane { | 624 .overlay-pane { |
| 786 position: absolute; | 625 position: absolute; |
| 787 top: 0; | 626 top: 0; |
| 788 left: 0; | 627 left: 0; |
| 789 width: 100%; | 628 width: 100%; |
| 790 height: 100%; | 629 height: 100%; |
| 791 border: none; | 630 border: none; |
| 792 z-index: 100; | 631 z-index: 100; |
| 793 } | 632 } |
| OLD | NEW |