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);
}