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

Side by Side Diff: ui/file_manager/file_manager/foreground/css/file_manager.css

Issue 914353004: Update import details panel to comply (mostly) with UX direction. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Respond to review comments. Created 5 years, 10 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
OLDNEW
1 /* Copyright (c) 2014 The Chromium Authors. All rights reserved. 1 /* Copyright (c) 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 /* The order of z-index: 5 /* The order of z-index:
6 * - -1: text-measure 6 * - -1: text-measure
7 * - 2: drag-selection-border 7 * - 2: drag-selection-border
8 * - 3: preview-panel 8 * - 3: preview-panel
9 * - 500: scrollbar 9 * - 500: scrollbar
10 * - 500: splitter 10 * - 500: splitter
(...skipping 331 matching lines...) Expand 10 before | Expand all | Expand 10 after
342 .dialog-header button.icon-button > core-icon { 342 .dialog-header button.icon-button > core-icon {
343 margin: 8px; 343 margin: 8px;
344 } 344 }
345 345
346 #cloud-import-details-button { 346 #cloud-import-details-button {
347 margin-left: -15px; 347 margin-left: -15px;
348 } 348 }
349 349
350 #cloud-import-details { 350 #cloud-import-details {
351 background-color: white; 351 background-color: white;
352 height: 300px; 352 border-radius: 4px;
353 opacity: .85; 353 box-shadow: 2px 2px 6px #555555;
354 padding: 10px; 354 line-height: 1.5em;
355 position: absolute; 355 position: absolute;
356 right: 0px; 356 right: 75px; /* Positioned in relation to the cloud-import toolbar button */
357 top: 49px; 357 top: 38px; /* Positioned just overlapping the top of the toolbar */
358 transition: all 0.2s ease; 358 transition: all 0.2s ease;
359 width: 250px; 359 width: 250px;
360 z-index: 5; 360 z-index: 5;
361 } 361 }
362 362
363 #cloud-import-details.offscreen { 363 #cloud-import-details.hidden {
364 -webkit-transform: translateX(25px);
364 opacity: 0; 365 opacity: 0;
365 right: -202px;
366 } 366 }
367 367
368 #cloud-import-details div { 368 #cloud-import-details .banner {
369 border: 0px 0px 1px 0px solid gray; 369 background-color: #37474F;
370 padding: 10px; 370 border-radius: 4px 4px 0px 0px;
371 color: white;
372 padding: 20px;
373 }
374
375 #cloud-import-details .banner .title {
376 font-size: 122%;
377 font-weight: bold;
378 margin-bottom: 5px;
379 }
380
381 #cloud-import-details .main {
382 display: flex;
383 flex-direction: column;
384 padding: 20px;
385 }
386
387 #cloud-import-details .status {
388 display: flex;
389 flex-direction: row;
390 font-color: #646464;
391 margin-top: .2em;
392 }
393
394 #cloud-import-details .status core-icon {
395 display: block;
396 height: 16px;
397 opacity: .6;
398 width: 16px;
399 }
400
401 #cloud-import-details .status .content {
402 flex: 1;
403 padding-left: 10px;
404 }
405
406 #cloud-import-details .status .content::first-line {
407 font-color: #333333;
408 font-size: 113%;
409 font-weight: bold;
410 }
411
412 #cloud-import-details .status .destination-link {
413 color: #1BA8F3;
414 cursor: pointer;
415 }
416
417 #cloud-import-details paper-button.import {
418 align-self: flex-end;
419 background-color: #1BA8F3;
420 color: white;
421 margin-top: 20px;
371 } 422 }
372 423
373 #files-selected-label { 424 #files-selected-label {
374 display: none; 425 display: none;
375 margin: 0 10px; 426 margin: 0 10px;
376 } 427 }
377 428
378 body.selecting #files-selected-label { 429 body.selecting #files-selected-label {
379 display: block; 430 display: block;
380 } 431 }
(...skipping 1514 matching lines...) Expand 10 before | Expand all | Expand 10 after
1895 padding: 20px 15px; 1946 padding: 20px 15px;
1896 } 1947 }
1897 1948
1898 .text-measure { 1949 .text-measure {
1899 pointer-events: none; 1950 pointer-events: none;
1900 position: absolute; 1951 position: absolute;
1901 top: 0; 1952 top: 0;
1902 visibility: hidden; 1953 visibility: hidden;
1903 z-index: -1; 1954 z-index: -1;
1904 } 1955 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698