diff --git a/chrome/browser/resources/new_tab_page/realbox/realbox.html b/chrome/browser/resources/new_tab_page/realbox/realbox.html index 6f77d909ed5ad..73d9bc0f2fc3c 100644 --- a/chrome/browser/resources/new_tab_page/realbox/realbox.html +++ b/chrome/browser/resources/new_tab_page/realbox/realbox.html @@ -3,6 +3,9 @@ --ntp-realbox-border-radius: calc(0.5 * var(--ntp-realbox-height)); --ntp-realbox-height: 44px; --ntp-realbox-shadow: 0 1px 6px 0 var(--color-realbox-shadow); + --ntp-realbox-icon-width: 26px; + --ntp-realbox-inner-icon-margin: 8px; + --ntp-realbox-voice-icon-offset: 16px; border-radius: var(--ntp-realbox-border-radius); box-shadow: var(--ntp-realbox-shadow); font-size: 16px; @@ -13,6 +16,10 @@ --ntp-realbox-shadow: 0 2px 6px 0 var(--color-realbox-shadow); } + :host([realbox-lens-search-enabled_]) { + --ntp-realbox-voice-icon-offset: 53px; + } + @media (forced-colors: active) { :host { border: 1px solid ActiveBorder; @@ -50,7 +57,7 @@ font-size: inherit; height: 100%; outline: none; - padding-inline-end: 44px; + padding-inline-end: calc(var(--ntp-realbox-voice-icon-offset) + var(--ntp-realbox-icon-width) + var(--ntp-realbox-inner-icon-margin)); padding-inline-start: 52px; position: relative; width: 100%; @@ -118,7 +125,7 @@ pointer-events: auto; position: absolute; right: 16px; - width: 26px; + width: var(--ntp-realbox-icon-width); } :host([single-colored-icons]) #voiceSearchButton, @@ -146,12 +153,12 @@ } :host([realbox-lens-search-enabled_]):host-context([dir='rtl']) #voiceSearchButton { - left: 53px; + left: var(--ntp-realbox-voice-icon-offset); right: unset; } :host([realbox-lens-search-enabled_]) #voiceSearchButton { - right: 53px; + right: var(--ntp-realbox-voice-icon-offset); } :host-context([dir='rtl']) .realbox-icon-button { @@ -164,7 +171,7 @@ } :-webkit-any(input, ntp-realbox-icon, .realbox-icon-button) { - z-index: 100; + z-index: 100; } ntp-realbox-dropdown { @@ -188,22 +195,18 @@ - - - + \ No newline at end of file