Modify file list styles
Align file-list styles with dashboard redesign.
Bug: Issue 8362
Change-Id: I18f8e4e296f5fa1e31286d16463d83ea9ba5cbb0
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index d7eac85..02ca46f 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -40,7 +40,7 @@
outline: none;
}
:host(:hover) {
- background-color: #e8effa;
+ background-color: var(--hover-background-color);
}
:host([needs-review]) {
font-family: var(--font-family-bold);
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index cb854b2..44abe38 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -89,7 +89,6 @@
cursor: pointer;
}
.file-row.expanded {
- background-color: #eeeeee;
border-bottom: 1px solid var(--border-color);
position: -webkit-sticky;
position: sticky;
@@ -99,14 +98,14 @@
z-index: 1;
}
.file-row:hover {
- background-color: #eeeeee;
+ background-color: var(--hover-background-color);
}
- .row {
- /* Needed to provide a spacer for the selected cursor. */
- border-left: .35rem solid transparent;
+ .file-row.selected {
+ background-color: var(--selection-background-color);
}
- .row.selected {
- border-left: .35rem solid var(--color-link);
+ .file-row.expanded,
+ .file-row.expanded:hover {
+ background-color: var(--expanded-background-color);
}
.path {
cursor: pointer;
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index 265705b..355c8cc 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -27,6 +27,8 @@
/* Following are not part of plugin API. */
--selection-background-color: #f1f5fb;
+ --hover-background-color: #e8effa;
+ --expanded-background-color: #eee;
--view-background-color: #fff;
--default-horizontal-margin: 1rem;
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
