diff --git a/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js b/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js index a9adbe8275..e862269503 100644 --- a/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js +++ b/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js @@ -24,7 +24,7 @@ export function RemoteMessagingFramework ({ message, primaryAction, secondaryAct )}

{titleText}

-

{descriptionText}

+

{descriptionText}

{messageType === 'big_two_action' && (
{primaryAction && message.primaryActionText.length > 0 && ( diff --git a/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.module.css b/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.module.css index 66ce4bbed8..c685128a19 100644 --- a/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.module.css +++ b/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.module.css @@ -9,18 +9,12 @@ align-items: flex-start; font-family: system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto; color: var(--color-black); - line-height: 1.25rem; + &.icon { padding-left: var(--sp-2); } - /* &:hover { - .dismissBtn { - opacity: 1; - } - } */ - @media screen and (prefers-color-scheme: dark) { background-color: var(--color-white-at-6); color: var(--color-white-at-84); @@ -46,6 +40,10 @@ line-height: normal; } +/* .description:first-line { + line-height: normal; +} */ + .btnBlock { margin-left: var(--sp-3); align-self: center; @@ -66,10 +64,6 @@ border-radius: 6px; text-wrap: nowrap; - * { - user-select: none; - } - &:hover { background-color: var(--color-black-at-9); cursor: pointer; @@ -89,8 +83,8 @@ } &:focus-visible { - outline: 2px solid var(--ddg-color-primary); - border: 1px solid white; + /* box-shadow: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--color-blue-50); */ + box-shadow: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color); } @media screen and (prefers-color-scheme: dark) { @@ -116,8 +110,8 @@ } &:focus-visible { - outline: 2px solid var(--ddg-color-primary); - border: 1px solid white; + /* box-shadow: 0px 0px 0px 1px var(--color-blue-90), 0px 0px 0px 3px var(--color-white); */ + box-shadow: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white); } } } @@ -126,6 +120,7 @@ .primary { background-color: var(--ddg-color-primary); color: var(--color-white); + position: relative; &:hover { @@ -136,6 +131,10 @@ background-color: var(--color-blue-70); } + /* &:focus-visible { + box-shadow: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--color-blue-50); + } */ + @media screen and (prefers-color-scheme: dark) { color: var(--color-black-at-84); background-color: var(--color-blue-20); @@ -153,9 +152,9 @@ color: var(--color-black-at-84); } - &:focus-visible { + /* &:focus-visible { box-shadow: 0px 0px 0px 1px var(--color-blue-90), 0px 0px 0px 3px var(--color-white); - } + } */ } } @@ -172,21 +171,12 @@ color: var(--color-black-at-60); border: none; border-radius: 50%; - /* opacity: 0; */ - - * { - user-select: none; - } &:active { background-color: var(--color-black-at-18); color: var(--color-black-at-84); } - /* &:focus-visible { - opacity: 1; - } */ - &:hover { background-color: var(--color-black-at-9); }