Initial redesign of the Files.app's main window.

chrome/browser/resources/file_manager/css/file_manager.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html {
   height: 100%;
 }
 
 html.col-resize * {
   cursor: col-resize !important;
@@ skipping 143 matching lines @@
 /* List/grid and preview are inside this container. */
 .dialog-main {
   -webkit-box-align: stretch;
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
 /* Directory tree at the left. */
 .dialog-sidebar {
+  -webkit-border-end: 1px solid rgb(170, 170, 170);
   -webkit-box-flex: 0;
+  -webkit-box-orient: vertical;
   background-color: #e6e6e6;
-  border-right: 1px solid rgb(170, 170, 170);
   display: -webkit-box;
   max-width: 50%;
   min-width: 45px;
   overflow: hidden;
   position: relative;
   width: 168px;
 }
 
+body[new-ui] .dialog-sidebar {
+  -webkit-border-end: 1px solid rgb(200, 200, 200);
+  background-color: #f1f1f1;
+  min-width: 100px;
+  width: 200px;
+}
+
+body[new-ui] .dialog-sidebar-header {
+  -webkit-app-region: drag;
+  -webkit-box-flex: 0;
+  display: -webkit-box;
+  height: 30px;  /* Keep in sync with #dialog-header. */
+  line-height: 30px;
+  margin: 7px;
+}
+
+body[new-ui] .dialog-sidebar-header #app-name {
+  -webkit-margin-start: 10px;
+  color: #303030;
+  font-size: 130%;
+}
+
+body[new-ui] .dialog-sidebar-contents {
+  -webkit-box-flex: 1;
+  border-top: 1px solid rgb(200, 200, 200);
+  display: -webkit-box;
+  position: relative;
+}
+
+body[new-ui] .dialog-sidebar-footer {
+  -webkit-box-flex: 0;
+  display: -webkit-box;
+}
+
 /* A vertical splitter between the roots list and the file list. It is actually
   a transparent area centered on the roots list right border.*/
 div.sidebar-splitter {
   -webkit-box-flex: 0;
   cursor: col-resize;
   margin-left: -3px;
   margin-right: -3px;
   position: relative;
   width: 6px;
-  z-index: 2;
+  z-index: 100;
 }
 
 #directory-tree {
   bottom: 0;
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 #directory-tree .tree-row {
-  background-color: #e6e6e6;
+  -webkit-border-radius: 0;
   background-image: none;
   border: none;
   display: -webkit-box;
   line-height: 39px;
   margin: 0;
   padding: 0 3px;
 }
 
+body[new-ui] #directory-tree .tree-row {
+  cursor: pointer;
+}
+
 /* For rows of subitems (non-top items) */
 #directory-tree .tree-children .tree-row {
   line-height: 31px;
 }
 
 #directory-tree .tree-row > .expand-icon {
   height: 37px;
   left: 3px;
   margin: -13px;
   top: 0;
@@ skipping 12 matching lines @@
 #directory-tree .tree-row > .label {
   -webkit-box-flex: 1;
   display: block;
   margin: 0 3px;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
 
 #directory-tree .tree-row:hover {
   background-color: rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.05);
+}
+
+body[new-ui] #directory-tree .tree-row:hover {
+  background-color: transparent;
 }
 
 #directory-tree .tree-item.accepts > .tree-row,
 #directory-tree .tree-row[lead][selected],
 #directory-tree .tree-row[lead],
 #directory-tree .tree-row[selected],
 #directory-tree .tree-row[anchor] {
   background-color: rgb(204, 204, 204);
 }
 
+body[new-ui] #directory-tree .tree-item.accepts > .tree-row,
+body[new-ui] #directory-tree .tree-row[lead][selected],
+body[new-ui] #directory-tree .tree-row[lead],
+body[new-ui] #directory-tree .tree-row[selected],
+body[new-ui] #directory-tree .tree-row[anchor] {
+  background-color: rgb(225, 225, 225);
+}
+
 #directory-tree:focus .tree-item.accepts > .tree-row,
 #directory-tree:focus .tree-row[lead][selected],
 #directory-tree:focus .tree-row[lead],
 #directory-tree:focus .tree-row[selected],
 #directory-tree:focus .tree-row[anchor] {
   background-color: rgb(193, 209, 232);
 }
 
-#directory-tree .tree-item.accepts > .tree-row:hover,
-#directory-tree .tree-row[lead]:hover,
-#directory-tree .tree-row[lead][selected]:hover,
-#directory-tree .tree-row[selected]:hover,
-#directory-tree .tree-row[anchor]:hover {
-  background-color: rgb(192, 192, 192);
+body[new-ui] #directory-tree:focus .tree-item.accepts > .tree-row,
+body[new-ui] #directory-tree:focus .tree-row[lead][selected],
+body[new-ui] #directory-tree:focus .tree-row[lead],
+body[new-ui] #directory-tree:focus .tree-row[selected],
+body[new-ui] #directory-tree:focus .tree-row[anchor] {
+  background-color: rgb(77, 144, 254);
+  color: white;
 }
 
 #directory-tree:hover .tree-item.accepts > .tree-row:hover,
 #directory-tree:hover .tree-row[lead]:hover,
 #directory-tree:hover .tree-row[lead][selected]:hover,
 #directory-tree:hover .tree-row[selected]:hover,
 #directory-tree:hover .tree-row[anchor]:hover {
   background-color: rgb(177, 193, 216);
 }
 
+body[new-ui] #directory-tree:hover .tree-item.accepts > .tree-row:hover,
+body[new-ui] #directory-tree:hover .tree-row[lead]:hover,
+body[new-ui] #directory-tree:hover .tree-row[lead][selected]:hover,
+body[new-ui] #directory-tree:hover .tree-row[selected]:hover,
+body[new-ui] #directory-tree:hover .tree-row[anchor]:hover {
+  background-color: rgb(225, 225, 225);
+}
+
+body[new-ui] #directory-tree:focus:hover .tree-item.accepts > .tree-row:hover,
+body[new-ui] #directory-tree:focus:hover .tree-row[lead]:hover,
+body[new-ui] #directory-tree:focus:hover .tree-row[lead][selected]:hover,
+body[new-ui] #directory-tree:focus:hover .tree-row[selected]:hover,
+body[new-ui] #directory-tree:focus:hover .tree-row[anchor]:hover {
+  background-color: rgb(77, 144, 254);
+  color: white;
+}
+
 #directory-tree .tree-row > div.root-eject {
   /* The transition commented out to work around crbug.com/157813 */
   /*-webkit-transition: opacity 70ms linear;*/
   background-image: -webkit-image-set(
     url('../images/files/ui/eject.png') 1x,
     url('../images/files/ui/2x/eject.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
   height: 20px;
@@ skipping 19 matching lines @@
   pointer-events: none;
 }
 
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-margin-end: 7px;
   -webkit-transition: all 180ms ease;
   display: -webkit-box;
+  height: 30px;
   margin-bottom: 7px;
   margin-top: 7px;
 }
 
+body[new-ui] .dialog-header {
+  -webkit-app-region: drag;
+}
+
+body[new-ui] .dialog-header #search-box,
+body[new-ui] .dialog-header #autocomplete-list,
+body[new-ui] .dialog-header .buttonbar {
+  -webkit-app-region: no-drag;
+}
+
 body[maximized][type='full-page'] .dialog-header {
   -webkit-padding-end: 75px;
 }
 
 /* Container for the detail and thumbnail list views. */
 .dialog-body {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   -webkit-transition: all 180ms ease;
   border-top: 1px solid #d4d4d4;
@@ skipping 97 matching lines @@
 
 /* A single directory name in the list of path breadcrumbs. */
 .breadcrumb-path {
   color: rgb(38, 86, 146);
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+body[new-ui] .breadcrumb-path:not(.breadcrumb-last) {
+  -webkit-app-region: no-drag;
+}
+
 #search-breadcrumbs .breadcrumb-path {
   color: #888;
 }
 
 #search-breadcrumbs .breadcrumb-path:hover {
   color: #666;
 }
 
 /* The final breadcrumb, representing the current directory. */
 .breadcrumb-last {
   color: black;
   cursor: default;
 }
 
 /* The > arrow between breadcrumbs. */
 
 .breadcrumbs .separator {
   background-image: -webkit-image-set(
     url('../images/files/ui/breadcrumb-separator.png') 1x,
     url('../images/files/ui/2x/breadcrumb-separator.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   height: 10px;
   overflow: hidden;
   width: 25px;
 }
 
 .dialog-header div[role=button] {
+  -webkit-border-radius: 2px;
   -webkit-transition: border-color 130ms linear;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
   border: 1px solid transparent;
-  border-radius: 2px;
   height: 29px;
   width: 29px;
 }
 
 .dialog-header div[role=button]:focus {
   -webkit-transition: border-color 200ms;
   border-color: rgb(77, 144, 254);
   outline: none;
 }
 
@@ skipping 252 matching lines @@
   text-decoration: underline;
 }
 
 body[type='full-page'] list .filename-label > :hover,
 .breadcrumb-path:not(.breadcrumb-last):hover,
 .breadcrumb-path.accepts {
   color: rgb(17, 85, 204);
   text-decoration: underline;
 }
 
+body[new-ui][type='full-page'] list .filename-label > :hover {
+  color: inherit;
+  text-decoration: underline;
+}
+
 .breadcrumb-path.accepts {
   -webkit-animation: acceptsBlinkText 200ms linear 1s 3;
 }
 
 @-webkit-keyframes acceptsBlinkText {
   0% {
     color: white;
   }
   50% {
   }
@@ skipping 115 matching lines @@
   background-image: none;
   border-radius: 0;
 }
 
 #list-container list > [selected],
 #list-container grid > [selected],
 #default-actions-list > [selected] {
   background-color: #dedede;
 }
 
-#list-container list > li.table-row[selected],
-#default-actions-list > li[selected] {
-  border-top: 1px solid #dedede;
+body[new-ui] #list-container list > [selected],
+body[new-ui] #list-container grid > [selected],
+body[new-ui] #default-actions-list > [selected] {
+  background-color: rgb(225, 225, 225);
 }
 
 #list-container list:focus > [selected],
 #list-container grid:focus > [selected],
 #default-actions-list:focus > [selected] {
   background-color: rgb(203, 219, 241);
 }
 
-#list-container list:focus > li.table-row[selected],
-#default-actions-list:focus > li[selected] {
-  border-top: 1px solid rgb(224, 233, 247);
+body[new-ui] #list-container list:focus > [selected],
+body[new-ui] #list-container grid:focus > [selected],
+body[new-ui] #default-actions-list:focus > [selected] {
+  background-color: rgb(77, 144, 254);
 }
 
 #list-container list > .accepts[selected],
 #list-container grid > .accepts[selected],
 #list-container list > [selected]:hover,
 #list-container grid > [selected]:hover,
 #default-actions-list > [selected]:hover {
   background-color: rgb(193, 211, 236);
-  border-color: hsl(214, 91%, 85%);
+}
+
+body[new-ui] #list-container list > .accepts[selected],
+body[new-ui] #list-container grid > .accepts[selected],
+body[new-ui] #list-container list > [selected]:hover,
+body[new-ui] #list-container grid > [selected]:hover,
+body[new-ui] #default-actions-list > [selected]:hover {
+  background-color: rgb(215, 215, 215);
+}
+
+body[new-ui] #list-container list:focus > .accepts[selected],
+body[new-ui] #list-container grid:focus > .accepts[selected],
+body[new-ui] #list-container list:focus > [selected]:hover,
+body[new-ui] #list-container grid:focus > [selected]:hover,
+body[new-ui] #default-actions-list:focus > [selected]:hover {
+  background-color: rgb(48, 125, 254);
 }
 
 #list-container list > .accepts,
 #list-container grid > .accepts,
 #list-container list > :hover,
 #list-container grid > :hover,
 #default-actions-list > :hover {
   background-color: #f1f1f1;
-  border-color: hsl(214, 91%, 85%);
 }
 
 #list-container.nohover list > :not([selected]):hover,
 #list-container.nohover grid > :not([selected]):hover,
 #list-container.nohover grid > .accepts {
   background-color: transparent;
-  border-color: transparent;
 }
 
 #directory-tree .tree-item.accepts > .tree-row,
 #list-container list > .accepts,
 #list-container grid > .accepts {
   -webkit-animation: acceptsBlink 200ms linear 1s 3;
 }
 
 @-webkit-keyframes acceptsBlink {
   0% {
@@ skipping 51 matching lines @@
 .detail-table {
   border: 0;
   width: 100%;
 }
 
 /* Bottom pane describing current selection. */
 .preview-panel {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-transform: translate(0, 0);
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
   display: -webkit-box;
   height: 61px;
   opacity: 1;
   padding: 0 16px 0 7px;
   position: relative;
   z-index: 3;
 }
 
+body[new-ui] .preview-panel {
+  background-color: white;
+  border-top: 1px solid #d4d4d4;
+}
+
 .preview-panel[visibility=hiding] {
   /* Using all seems to cause preview panel and checkbox flicking issue. */
   -webkit-transform: translate(0, 5px);
   -webkit-transition: opacity 220ms ease;
    opacity: 0;
 }
 
 .preview-panel[visibility=hidden] {
   display: none;
   opacity: 0;
 }
 
 .preview-thumbnails {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
   padding-left: 39px;
 }
 
 .preview-thumbnails > .thumbnail {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  background-color: #F2F2F2;
+  background-color: #f2f2f2;
   border: 1px solid #fff;
   height: 45px;
   margin: 0 0 0 -39px;  /* Show 7 pixels of the overlapped image */
   position: relative;
   width: 45px;
 }
 
+body[new-ui] .preview-thumbnails > .thumbnail {
+  background-color: white;
+}
+
 .preview-thumbnails > .thumbnail > .img-container {
   background-size: 45px 45px;
   height: 45px;
   overflow: hidden;
   position: relative;
   width: 45px;
 }
 
 .preview-thumbnails > .popup {
   -webkit-transform: translate(0, 3px) scale(0.95);
-  background-color: #F2F2F2;
+  background-color: #f2f2f2;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #F0F0F0,
               0 0 0 2px #D0D0D0,
               2px 2px 6px rgba(0, 0, 0, 0.2);
   margin: 6px 0 0 -40px;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
@@ skipping 22 matching lines @@
   border: 0;
 }
 
 /* Table splitter element */
 .table-header-splitter {
   -webkit-border-start: 1px #d4d4d4 solid;
   background-color: inherit;
   height: 27px;
 }
 
+body[new-ui] .table-header-splitter {
+  -webkit-border-start: none;
+  height: 40px;
+  width: 10px;
+}
+
 /* Container for a table header. */
 .table-header {
   -webkit-box-sizing: border-box;
   background-color: #f5f5f5;
   border-bottom: 1px #d2d2d2 solid;
   height: 27px;
 }
 
+body[new-ui] .table-header {
+  background-color: transparent;
+  border-bottom: none;
+  height: 40px;
+}
+
 .table-header-sort-image-desc::after {
   -webkit-padding-start: 13px;
   background-image: -webkit-image-set(
     url('../images/files/ui/sort_desc.png') 1x,
     url('../images/files/ui/2x/sort_desc.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   color: #888;
   content: '\00a0';
   position: relative;
   top: 1px;
 }
 
 .table-header-sort-image-asc::after {
   -webkit-padding-start: 13px;
   background-image: -webkit-image-set(
     url('../images/files/ui/sort_asc.png') 1x,
     url('../images/files/ui/2x/sort_asc.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   color: #888;
   content: '\00a0';
   position: relative;
   top: -1px;
 }
 
-
 .preview-container .table-header {
   border-radius: 0 4px 0 0;
 }
 
 /* Text label in a table header. */
 .table-header-label {
   line-height: 27px;
 }
 
+body[new-ui] .table-header-label {
+  color: rgb(100, 100, 100);
+  line-height: 40px;
+}
+
 .table-row-cell > * {
   -webkit-box-align: center;
   -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
   margin: 0;
   padding: 0 10px;
 }
 
+body[new-ui] .table-row-cell {
+  color: rgb(100, 100, 100);
+}
+
 .table-row-cell > .detail-name {
   display: -webkit-box;
 }
 
+body[new-ui] .table-row-cell > .detail-name {
+  color: rgb(0, 0, 0);
+}
+
+
+body[new-ui] #list-container list:focus > [selected] .table-row-cell,
+body[new-ui] #list-container list:focus > [selected] .detail-name {
+  color: white;
+}
+
 .table-row-cell {
   -webkit-box-align: center;
 }
 
 .file-checkbox {
   -webkit-margin-end: 0;
   -webkit-margin-start: 0;
   position: relative;
   z-index: 2;
 }
@@ skipping 13 matching lines @@
 }
 
 #list-container li.table-row[selected] .file-checkbox,
 #list-container li.table-row[selected] .pin,
 #list-container li.thumbnail-item[selected] .file-checkbox {
   opacity: 1.0 !important;
 }
 
 #list-container li.table-row,
 #default-actions-list li {
-  border: none;
-  border-top: 1px solid transparent;
+  border: 1px solid white;
+  border-left-width: 0;
+  border-right-width: 0;
   height: 39px;
   padding-bottom: 1px;
   padding-top: 1px;
 }
 
+body[new-ui] #list-container li.table-row {
+  height: 30px;
+}
+
 /* The icon in the name column. See file_types.css for specific icons. */
 .detail-icon {
   height: 24px;
   width: 24px;
 }
 
 .metadata-item {
   -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
   -webkit-padding-start: 8px;
@@ skipping 499 matching lines @@
 }
 
 #list-container .table-header-inner {
   height: 100%;
 }
 
 #list-container .table-header-cell:hover {
   background-color: #ececec;
 }
 
+body[new-ui] #list-container .table-header-cell:hover {
+  background-color: inherit;
+}
+
 button:focus {
   outline-color: rgb(77, 144, 254);
 }
 
 #new-folder {
   margin-right: 30px;
 }
 
 #default-action-dialog {
   min-width: 300px;
@@ skipping 43 matching lines @@
 }
 
 list.autocomplete-suggestions[hasElementFocus] > [selected],
 list.autocomplete-suggestions[hasElementFocus] > [lead],
 list.autocomplete-suggestions:not([hasElementFocus]) > [selected],
 list.autocomplete-suggestions:not([hasElementFocus]) > [lead] {
   background-color: rgb(238, 238, 238);
   background-image: none;
   border: 1px solid white;
 }