Commit 5a0eca39 authored by Esmael El-Moslimany's avatar Esmael El-Moslimany Committed by Chromium LUCI CQ

WebUI NTP: most-visited, fix focus ring and adjust tile spacing

See https://bugs.chromium.org/p/chromium/issues/detail?id=1167463#c7 for
screenshots of change. The total vertical space saving is 36px.

Bug: 1167463
Change-Id: I82eb57e7a56202024b9fc1ed31ca2b3d2292fa21
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2637186
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: default avatarMoe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845382}
parent 89f2b714
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
} }
ntp-realbox { ntp-realbox {
margin-bottom: 32px; margin-bottom: 16px;
} }
ntp-realbox, ntp-realbox,
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
--icon-button-color: var(--google-grey-600); --icon-button-color: var(--google-grey-600);
--icon-size: 48px; --icon-size: 48px;
--tile-hover-color: rgba(var(--google-grey-900-rgb), .1); --tile-hover-color: rgba(var(--google-grey-900-rgb), .1);
--tile-size: 112px; /* top padding + icon + title margin + title */ --tile-size: 112px;
--title-height: 32px; --title-height: 32px;
} }
...@@ -15,10 +15,12 @@ ...@@ -15,10 +15,12 @@
+ 1px); + 1px);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: calc(var(--row-count) * 128px); height: calc(var(--row-count) * var(--tile-size));
justify-content: center; justify-content: center;
margin-bottom: 8px;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
padding: 2px; /* Padding added so focus rings are not clipped. */
transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;
width: calc(var(--content-width) + 12px); width: calc(var(--content-width) + 12px);
} }
...@@ -60,11 +62,8 @@ ...@@ -60,11 +62,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: var(--tile-size); height: var(--tile-size);
margin-bottom: 16px;
opacity: 1; opacity: 1;
outline: none; outline: none;
padding-bottom: 4px;
padding-top: 12px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
transition-duration: 300ms; transition-duration: 300ms;
...@@ -87,6 +86,8 @@ ...@@ -87,6 +86,8 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
box-shadow: none; box-shadow: none;
justify-content: unset;
padding: 0;
} }
:host(:not([reordering_])) .tile:hover, :host(:not([reordering_])) .tile:hover,
...@@ -100,8 +101,10 @@ ...@@ -100,8 +101,10 @@
background-color: var(--ntp-theme-shortcut-background-color); background-color: var(--ntp-theme-shortcut-background-color);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
flex-shrink: 0;
height: var(--icon-size); height: var(--icon-size);
justify-content: center; justify-content: center;
margin-top: 16px;
width: var(--icon-size); width: var(--icon-size);
} }
...@@ -117,7 +120,7 @@ ...@@ -117,7 +120,7 @@
display: flex; display: flex;
height: var(--title-height); height: var(--title-height);
line-height: calc(var(--title-height) / 2); line-height: calc(var(--title-height) / 2);
margin-top: 12px; margin-top: 6px;
padding: 2px 8px; padding: 2px 8px;
width: 88px; width: 88px;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment