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

Unified Diff: chrome/browser/resources/md_history/history_item.html

Issue 2206363003: [MD History] Use proper shadows for cards. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@remove_rounding
Patch Set: address comment, fix test Created 4 years, 4 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 side-by-side diff with in-line comments
Download patch
Index: chrome/browser/resources/md_history/history_item.html
diff --git a/chrome/browser/resources/md_history/history_item.html b/chrome/browser/resources/md_history/history_item.html
index 1089636bc3ca52a0a38bd76bbcafee8bfb77df2f..2d3a9b46028b2fd84c9ed16e9e2d24584fb0b918 100644
--- a/chrome/browser/resources/md_history/history_item.html
+++ b/chrome/browser/resources/md_history/history_item.html
@@ -20,10 +20,7 @@
}
:host(:not([embedded])) #main-container {
- background: #fff;
- border-color: var(--card-border-color);
- border-style: solid;
- border-width: 0 1px;
+ position: relative;
}
:host(:not([embedded])) #sizing-container {
@@ -34,14 +31,7 @@
margin-top: var(--first-card-padding-top);
}
- :host([is-card-start]) #main-container {
- border-radius: 2px 2px 0 0;
- border-top-width: 1px;
- }
-
:host([is-card-end]) #main-container {
- border-bottom-width: 2px;
- border-radius: 0 0 2px 2px;
margin-bottom: var(--card-padding-between);
}
@@ -136,10 +126,34 @@
-webkit-margin-start: 77px;
height: 15px;
}
+
+ #background {
+ background: #fff;
+ bottom: -1px; /* Prevents shadow artifacts when zoomed */
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: -1;
+ }
+
+ :host([embedded]) #background {
+ display: none;
+ }
+
+ :host([is-card-start]) #background {
+ border-radius: 2px 2px 0 0;
+ }
+
+ :host([is-card-end]) #background {
+ border-radius: 0 0 2px 2px;
+ bottom: 0;
+ }
</style>
<div id="sizing-container">
<div id="main-container">
+ <div id="background"></div>
<div id="date-accessed" class="card-title">
[[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
</div>

Powered by Google App Engine
This is Rietveld 408576698