Restyled Files.app's file list, including scrollbars.

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 10 matching lines @@
   display: -webkit-box;
   height: 100%;
   margin: 0;
   opacity: 0;
   padding: 0;
   width: 100%;
 }
 
 body.loaded {
   /* Do not use display:none because list will calculate metrics incorrectly. */
-  /*display: -webkit-box;*/
+  /* display: -webkit-box;*/
   opacity: 1;
 }
 
 /* Drop opacity of selected rows to give a visual feedback on copy/cut
  * operation. */
 .blink {
   opacity: 0.8;
 }
 
 body[new-ui] ::-webkit-scrollbar {
-  height: 8px;
+  height: 0;
+  width: 0;
+}
+
+/* TODO(mtomasz): Flip scrollbars to the opposite side for RTL languages. */
+body[new-ui] .scrollbar-vertical {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 10px;
+  z-index: 1000;
+}
+
+body[new-ui] .scrollbar-button {
+  -webkit-transition: opacity 100ms;
+  background-color: black;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+  height: 50%;
+  margin-right: 2px;
+  opacity: 0;
+  position: absolute;
   width: 8px;
 }
 
-body[new-ui] ::-webkit-scrollbar-track {
-  padding: 5px;
+body[new-ui] :hover > .scrollbar-vertical > .scrollbar-button {
+  opacity: 0.3;
 }
 
-body[new-ui] ::-webkit-scrollbar-thumb {
-  background-color: rgb(180, 180, 180);
+body[new-ui] .scrollbar-vertical > .scrollbar-button:hover {
+  opacity: 0.4;
+}
+
+body[new-ui] .scrollbar-vertical > .scrollbar-button.pressed {
+  opacity: 0.5;
 }
 
 #butter-bar-container {
   -webkit-box-pack: center;
   display: -webkit-box;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
@@ skipping 923 matching lines @@
   background-position: 5px center;
   background-repeat: no-repeat;
   background-size: 16px 16px;
   line-height: 39px;
   padding-left: 26px;
 }
 
 #list-container list > *,
 #list-container grid > *,
 #default-actions-list > * {
+  background-color: transparent;
   background-image: none;
   border-radius: 0;
 }
 
-#list-container list > [selected],
-#list-container grid > [selected],
-#default-actions-list > [selected] {
+#list-container list > li[selected],
+#list-container grid > li[selected],
+#default-actions-list > li[selected] {
   background-color: #dedede;
 }
 
-body[new-ui] #list-container list > [selected],
-body[new-ui] #list-container grid > [selected],
-body[new-ui] #default-actions-list > [selected] {
+body[new-ui] #list-container list > li[selected],
+body[new-ui] #list-container grid > li[selected],
+body[new-ui] #default-actions-list > li[selected] {
   background-color: rgb(225, 225, 225);
 }
 
-#list-container list:focus > [selected],
-#list-container grid:focus > [selected],
-#default-actions-list:focus > [selected] {
+#list-container list:focus > li[selected],
+#list-container grid:focus > li[selected],
+#default-actions-list:focus > li[selected] {
   background-color: rgb(203, 219, 241);
 }
 
-body[new-ui] #list-container list:focus > [selected],
-body[new-ui] #list-container grid:focus > [selected],
-body[new-ui] #default-actions-list:focus > [selected] {
+body[new-ui] #list-container list:focus > li[selected],
+body[new-ui] #list-container grid:focus > li[selected],
+body[new-ui] #default-actions-list:focus > li[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 {
+#list-container list > li.accepts[selected],
+#list-container grid > li.accepts[selected],
+#list-container list > li[selected]:hover,
+#list-container grid > li[selected]:hover,
+#default-actions-list > li[selected]:hover {
   background-color: rgb(193, 211, 236);
 }
 
-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 {
+body[new-ui] #list-container list > li.accepts[selected],
+body[new-ui] #list-container grid > li.accepts[selected],
+body[new-ui] #list-container list > li[selected]:hover,
+body[new-ui] #list-container grid > li[selected]:hover,
+body[new-ui] #default-actions-list > li[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 {
+body[new-ui] #list-container list:focus > li.accepts[selected],
+body[new-ui] #list-container grid:focus > li.accepts[selected],
+body[new-ui] #list-container list:focus > li[selected]:hover,
+body[new-ui] #list-container grid:focus > li[selected]:hover,
+body[new-ui] #default-actions-list:focus > li[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 {
+#list-container list > li.accepts,
+#list-container grid > li.accepts,
+#list-container list > li:hover,
+#list-container grid > li:hover,
+#default-actions-list > li:hover {
   background-color: #f1f1f1;
 }
 
 #list-container.nohover list > :not([selected]):hover,
 #list-container.nohover grid > :not([selected]):hover,
 #list-container.nohover grid > .accepts {
   background-color: transparent;
 }
 
-#directory-tree .tree-item.accepts > .tree-row,
-#list-container list > .accepts,
-#list-container grid > .accepts {
+#directory-tree .tree-item.accepts > li.tree-row,
+#list-container list > li.accepts,
+#list-container grid > li.accepts {
   -webkit-animation: acceptsBlink 200ms linear 1s 3;
 }
 
 @-webkit-keyframes acceptsBlink {
   0% {
     background-color: transparent;
   }
   50% {
   }
 }
 
+.table-row-cell .selection-label {
+  -webkit-margin-end: 10px;
+}
+
 .table-row-cell .filename-label,
 .thumbnail-item .filename-label,
 /* Show ellipsis in cells. The name column has different structure and overrides
    this rule. */
 .table-row-cell > div {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ skipping 159 matching lines @@
 }
 
 /* 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;
+  display: none;
 }
 
 /* Container for a table header. */
 .table-header {
   -webkit-box-sizing: border-box;
   background-color: #f5f5f5;
   border-bottom: 1px #d2d2d2 solid;
   height: 27px;
 }
 
@@ skipping 81 matching lines @@
 }
 
 #select-all-checkbox {
   -webkit-margin-end: 7px;
   -webkit-margin-start: 2px;
   margin-bottom: 0;
   margin-top: 0;
   vertical-align: middle;
 }
 
+body[new-ui] #select-all-checkbox {
+  -webkit-margin-end: 13px;
+  -webkit-margin-start: 3px;
+  vertical-align: middle;
+}
+
 #list-container li.table-row:hover .file-checkbox,
 #list-container li.table-row:hover .pin,
 #list-container li.thumbnail-item:hover .file-checkbox {
   opacity: 0.6;
 }
 
 #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;
 }
 
+body[new-ui] #list-container list:focus li.table-row[selected] .file-checkbox {
+  -webkit-filter: contrast(300%) invert(100%);
+}
+
 #list-container li.table-row,
 #default-actions-list li {
   border: 1px solid white;
   border-left-width: 0;
   border-right-width: 0;
   height: 39px;
   padding-bottom: 1px;
   padding-top: 1px;
 }
 
@@ skipping 566 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;
 }