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

Side by Side Diff: chrome/browser/resources/file_manager/css/file_manager.css

Issue 12221082: Add gear menu to /downloads and /external_storage. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Cleaned up. Created 7 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 | Annotate | Revision Log
« no previous file with comments | « no previous file | chrome/browser/resources/file_manager/js/drive_banners.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 { 5 html {
6 height: 100%; 6 height: 100%;
7 } 7 }
8 8
9 html.col-resize * { 9 html.col-resize * {
10 cursor: col-resize !important; 10 cursor: col-resize !important;
(...skipping 607 matching lines...) Expand 10 before | Expand all | Expand 10 after
618 height: 57px; 618 height: 57px;
619 overflow: hidden; 619 overflow: hidden;
620 padding-left: 57px; /* Make space for the icon. */ 620 padding-left: 57px; /* Make space for the icon. */
621 } 621 }
622 622
623 .downloads-warning[hidden] { 623 .downloads-warning[hidden] {
624 height: 0; 624 height: 0;
625 } 625 }
626 626
627 /* Drive space warning banner. */ 627 /* Drive space warning banner. */
628 .drive-space-warning { 628 .volume-space-warning {
629 -webkit-box-align: center; 629 -webkit-box-align: center;
630 -webkit-box-orient: horizontal; 630 -webkit-box-orient: horizontal;
631 -webkit-transition: height 70ms linear; 631 -webkit-transition: height 70ms linear;
632 background-image: url(chrome://resources/images/clouds.png); 632 background-image: url(chrome://resources/images/clouds.png);
633 background-repeat: repeat-x; 633 background-repeat: repeat-x;
634 background-size: 150px 44px; 634 background-size: 150px 44px;
635 border-top: 1px solid rgba(0, 0, 0, 0.1); 635 border-top: 1px solid rgba(0, 0, 0, 0.1);
636 color: #333; 636 color: #333;
637 display: -webkit-box; 637 display: -webkit-box;
638 font-size: 13px; 638 font-size: 13px;
639 height: 44px; 639 height: 44px;
640 overflow: hidden; 640 overflow: hidden;
641 position: relative; 641 position: relative;
642 } 642 }
643 643
644 .drive-space-warning[hidden] { 644 .volume-space-warning[hidden] {
645 border-top-width: 0; 645 border-top-width: 0;
646 height: 0; 646 height: 0;
647 } 647 }
648 648
649 .drive-space-warning .drive-icon { 649 .volume-space-warning .drive-icon {
650 background-image: -webkit-image-set( 650 background-image: -webkit-image-set(
651 url('../images/files/ui/drive_logo.png') 1x, 651 url('../images/files/ui/drive_logo.png') 1x,
652 url('../images/files/ui/2x/drive_logo.png') 2x); 652 url('../images/files/ui/2x/drive_logo.png') 2x);
653 background-position: center; 653 background-position: center;
654 background-repeat: no-repeat; 654 background-repeat: no-repeat;
655 background-size: 25px 22px; 655 background-size: 25px 22px;
656 height: 44px; 656 height: 44px;
657 width: 50px; 657 width: 50px;
658 } 658 }
659 659
660 .drive-space-warning .drive-text { 660 .volume-space-warning .drive-text {
661 margin-right: 11px; 661 margin-right: 11px;
662 } 662 }
663 663
664 /* The cr.ui.Grid representing the detailed file list. */ 664 /* The cr.ui.Grid representing the detailed file list. */
665 .thumbnail-grid { 665 .thumbnail-grid {
666 overflow-y: auto; 666 overflow-y: auto;
667 width: 100%; 667 width: 100%;
668 } 668 }
669 669
670 body[type='full-page'] .thumbnail-frame > .img-container { 670 body[type='full-page'] .thumbnail-frame > .img-container {
(...skipping 630 matching lines...) Expand 10 before | Expand all | Expand 10 after
1301 2. width % 8 == 0 (to minimize rounding errors in the centering code) */ 1301 2. width % 8 == 0 (to minimize rounding errors in the centering code) */
1302 #drag-container .img-container { 1302 #drag-container .img-container {
1303 height: 64px; 1303 height: 64px;
1304 width: 64px; 1304 width: 64px;
1305 } 1305 }
1306 1306
1307 menu.file-context-menu { 1307 menu.file-context-menu {
1308 z-index: 4; 1308 z-index: 4;
1309 } 1309 }
1310 1310
1311 menu.chrome-menu > hr { 1311 menu.chrome-menu {
1312 min-width: 200px;
1313 }
1314
1315 menu.chrome-menu hr {
1312 color: transparent; 1316 color: transparent;
1313 font-size: 0; 1317 font-size: 0;
1314 } 1318 }
1315 1319
1316 input.common.pin[type='checkbox']:checked::after { 1320 input.common.pin[type='checkbox']:checked::after {
1317 background-image: -webkit-image-set( 1321 background-image: -webkit-image-set(
1318 url('../images/files/ui/pin.png') 1x, 1322 url('../images/files/ui/pin.png') 1x,
1319 url('../images/files/ui/2x/pin.png') 2x); 1323 url('../images/files/ui/2x/pin.png') 2x);
1320 background-position: 4px 0; 1324 background-position: 4px 0;
1321 } 1325 }
(...skipping 30 matching lines...) Expand all
1352 color: #333; 1356 color: #333;
1353 display: none; 1357 display: none;
1354 left: 0; 1358 left: 0;
1355 padding-left: 50px; 1359 padding-left: 50px;
1356 padding-top: 20px; 1360 padding-top: 20px;
1357 position: absolute; 1361 position: absolute;
1358 right: 0; 1362 right: 0;
1359 top: 0; 1363 top: 0;
1360 } 1364 }
1361 1365
1362 .dialog-container[drive='mounting'] #unmounted-panel, 1366 body[drive='mounting'] .dialog-container #unmounted-panel,
1363 .dialog-container[drive='error'] #unmounted-panel, 1367 body[drive='error'] .dialog-container #unmounted-panel,
1364 .dialog-container[unformatted] #format-panel { 1368 body[unformatted] .dialog-container #format-panel {
1365 display: block; 1369 display: block;
1366 } 1370 }
1367 1371
1368 .dialog-container[drive='unmounted'] .filelist-panel, 1372 body[drive='unmounted'] .dialog-container .filelist-panel,
1369 .dialog-container[drive='mounting'] .filelist-panel, 1373 body[drive='mounting'] .dialog-container .filelist-panel,
1370 .dialog-container[drive='error'] .filelist-panel, 1374 body[drive='error'] .dialog-container .filelist-panel,
1371 .dialog-container[unformatted] .filelist-panel { 1375 body[unformatted] .dialog-container .filelist-panel {
1372 /* Hide file list when Drive is not mounted. 1376 /* Hide file list when Drive is not mounted.
1373 Use opacity to avoid manual resizing.*/ 1377 Use opacity to avoid manual resizing.*/
1374 opacity: 0; 1378 opacity: 0;
1375 } 1379 }
1376 1380
1377 #unmounted-panel > *, 1381 #unmounted-panel > *,
1378 #format-panel > * { 1382 #format-panel > * {
1379 -webkit-box-align: center; 1383 -webkit-box-align: center;
1380 -webkit-box-orient: horizontal; 1384 -webkit-box-orient: horizontal;
1381 -webkit-box-pack: start; 1385 -webkit-box-pack: start;
1382 display: none; 1386 display: none;
1383 height: 22px; 1387 height: 22px;
1384 margin-bottom: 10px; 1388 margin-bottom: 10px;
1385 } 1389 }
1386 1390
1387 #unmounted-panel > .loading { 1391 #unmounted-panel > .loading {
1388 position: relative; 1392 position: relative;
1389 } 1393 }
1390 1394
1391 #unmounted-panel > .loading > .spinner-box { 1395 #unmounted-panel > .loading > .spinner-box {
1392 bottom: 0; 1396 bottom: 0;
1393 position: absolute; 1397 position: absolute;
1394 right: 100%; 1398 right: 100%;
1395 top: 0; 1399 top: 0;
1396 width: 40px; 1400 width: 40px;
1397 } 1401 }
1398 1402
1399 [unformatted] #format-panel > .error, 1403 body[unformatted] #format-panel > .error,
1400 [drive='mounting'] #unmounted-panel > .loading, 1404 body[drive='mounting'] #unmounted-panel > .loading,
1401 [drive='mounting'] #unmounted-panel > .progress, 1405 body[drive='mounting'] #unmounted-panel > .progress,
1402 [drive='error'] #unmounted-panel > .error, 1406 body[drive='error'] #unmounted-panel > .error,
1403 #format-panel > #format-button, 1407 #format-panel > #format-button,
1404 #unmounted-panel.retry-enabled > .retry, 1408 #unmounted-panel.retry-enabled > .retry,
1405 #unmounted-panel.retry-enabled > .learn-more { 1409 #unmounted-panel.retry-enabled > .learn-more {
1406 display: -webkit-box; 1410 display: -webkit-box;
1407 } 1411 }
1408 1412
1409 #unmounted-panel > .progress { 1413 #unmounted-panel > .progress {
1410 color: #999; 1414 color: #999;
1411 margin-top: -10px; 1415 margin-top: -10px;
1412 } 1416 }
(...skipping 17 matching lines...) Expand all
1430 body[type='open-file'] [visibleif]:not([visibleif~='open-file']), 1434 body[type='open-file'] [visibleif]:not([visibleif~='open-file']),
1431 body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']), 1435 body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']),
1432 body[type='full-page'] [visibleif]:not([visibleif~='full-page']) { 1436 body[type='full-page'] [visibleif]:not([visibleif~='full-page']) {
1433 display: none; 1437 display: none;
1434 } 1438 }
1435 1439
1436 body:not([ctrl-pressing]) [required_attr='ctrl-pressing'] { 1440 body:not([ctrl-pressing]) [required_attr='ctrl-pressing'] {
1437 display: none; 1441 display: none;
1438 } 1442 }
1439 1443
1440 #drive-settings::before { 1444 body:not([drive]) [required_drive] {
1445 display: none;
1446 }
1447
1448 #gear-button::before {
1441 background-image: url('../images/files/ui/settings.svg'); 1449 background-image: url('../images/files/ui/settings.svg');
1442 background-position: 20px center; 1450 background-position: 20px center;
1443 background-repeat: no-repeat; 1451 background-repeat: no-repeat;
1444 bottom: 0; 1452 bottom: 0;
1445 content: ''; 1453 content: '';
1446 left: 0; 1454 left: 0;
1447 opacity: 0.75; 1455 opacity: 0.75;
1448 position: absolute; 1456 position: absolute;
1449 right: 0; 1457 right: 0;
1450 top: 0; 1458 top: 0;
1451 } 1459 }
1452 1460
1453 #drive-settings:hover::before { 1461 #gear-button:hover::before {
1454 opacity: 1; 1462 opacity: 1;
1455 } 1463 }
1456 1464
1457 1465
1458 #drive-settings { 1466 #gear-button {
1459 overflow: hidden; 1467 overflow: hidden;
1460 text-align: left; 1468 text-align: left;
1461 width: 54px; 1469 width: 54px;
1462 } 1470 }
1463 1471
1464 #drive-settings span.disclosureindicator { 1472 #gear-button span.disclosureindicator {
1465 float: none; 1473 float: none;
1466 margin-left: 42px; 1474 margin-left: 42px;
1467 } 1475 }
1468 1476
1469 /* To animate the #drive-settings element to invisibility we set every property
1470 that affects its horizontal size to 0. */
1471 .dialog-container:not([drive]) #drive-settings {
1472 border-color: transparent; /* Changing only the color to preserve layout. */
1473 border-left-width: 0;
1474 border-right-width: 0;
1475 margin: 0;
1476 min-width: 0;
1477 padding: 0;
1478 width: 0;
1479 }
1480
1481 .dialog-container:not([drive]) #drive-settings > * {
1482 display: none;
1483 }
1484
1485 .buttonbar > * { 1477 .buttonbar > * {
1486 position: relative; 1478 position: relative;
1487 } 1479 }
1488 1480
1489 .buttonbar .tooltip { 1481 .buttonbar .tooltip {
1490 right: -12px; 1482 right: -12px;
1491 top: 35px; 1483 top: 35px;
1492 } 1484 }
1493 1485
1494 /* Tooltips */ 1486 /* Tooltips */
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
1564 } 1556 }
1565 1557
1566 .dialog-container:not([drive-welcome='page']) #no-search-results[show] { 1558 .dialog-container:not([drive-welcome='page']) #no-search-results[show] {
1567 display: block; 1559 display: block;
1568 } 1560 }
1569 1561
1570 #downloads-root-context-menu { 1562 #downloads-root-context-menu {
1571 min-width: 250px; 1563 min-width: 250px;
1572 } 1564 }
1573 1565
1574 #drive-space-info, 1566 #volume-space-info,
1575 #downloads-space-info { 1567 #downloads-space-info {
1576 -webkit-box-pack: justify; 1568 -webkit-box-pack: justify;
1577 display: -webkit-box; 1569 display: -webkit-box;
1578 } 1570 }
1579 1571
1580 #drive-space-info-label, 1572 #volume-space-info-label,
1581 #downloads-space-info-label { 1573 #downloads-space-info-label {
1582 display: block; 1574 display: block;
1583 } 1575 }
1584 1576
1585 #drive-space-info > div, 1577 #volume-space-info > div,
1586 #downloads-space-info > div { 1578 #downloads-space-info > div {
1587 -webkit-box-flex: 1; 1579 -webkit-box-flex: 1;
1588 border: 1px solid rgb(192, 192, 192); 1580 border: 1px solid rgb(192, 192, 192);
1589 display: block; 1581 display: block;
1590 height: 11px; 1582 height: 11px;
1591 margin: 8px 0 9px 10px; 1583 margin: 8px 0 9px 10px;
1592 min-width: 30px; 1584 min-width: 30px;
1593 } 1585 }
1594 1586
1595 #drive-space-info-bar[pending], 1587 #volume-space-info-bar[pending],
1596 #downloads-space-info-bar[pending] { 1588 #downloads-space-info-bar[pending] {
1597 -webkit-animation-duration: 800ms; 1589 -webkit-animation-duration: 800ms;
1598 -webkit-animation-iteration-count: infinite; 1590 -webkit-animation-iteration-count: infinite;
1599 -webkit-animation-name: bg; 1591 -webkit-animation-name: bg;
1600 -webkit-animation-timing-function: linear; 1592 -webkit-animation-timing-function: linear;
1601 background-color: rgb(192, 192, 192); 1593 background-color: rgb(192, 192, 192);
1602 background-image: -webkit-linear-gradient(315deg, transparent, 1594 background-image: -webkit-linear-gradient(315deg, transparent,
1603 transparent 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, 1595 transparent 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%,
1604 transparent 66%, transparent); 1596 transparent 66%, transparent);
1605 background-position: 0 0; 1597 background-position: 0 0;
1606 background-repeat: repeat-x; 1598 background-repeat: repeat-x;
1607 background-size: 16px 8px; 1599 background-size: 16px 8px;
1608 } 1600 }
1609 1601
1610 #drive-space-info-bar, 1602 #volume-space-info-bar,
1611 #downloads-space-info-bar { 1603 #downloads-space-info-bar {
1612 background-color: rgb(192, 192, 192); 1604 background-color: rgb(192, 192, 192);
1613 border: 1px solid rgb(255, 255, 255); 1605 border: 1px solid rgb(255, 255, 255);
1614 box-sizing: border-box; 1606 box-sizing: border-box;
1615 height: 100%; 1607 height: 100%;
1616 width: 50%; 1608 width: 50%;
1617 } 1609 }
1618 1610
1619 #list-container .table-header-inner { 1611 #list-container .table-header-inner {
1620 height: 100%; 1612 height: 100%;
(...skipping 13 matching lines...) Expand all
1634 1626
1635 #default-action-dialog { 1627 #default-action-dialog {
1636 min-width: 300px; 1628 min-width: 300px;
1637 width: auto; 1629 width: auto;
1638 } 1630 }
1639 1631
1640 .drive-welcome-wrapper { 1632 .drive-welcome-wrapper {
1641 /* drive_welcome.css will override it once loaded. */ 1633 /* drive_welcome.css will override it once loaded. */
1642 display: none; 1634 display: none;
1643 } 1635 }
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/file_manager/js/drive_banners.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698