From fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 03:14:29 +0200 Subject: Merging upstream version 125.0.1. Signed-off-by: Daniel Baumann --- .../newtab/css/activity-stream-linux.css | 176 +++++++++++++++++++-- 1 file changed, 163 insertions(+), 13 deletions(-) (limited to 'browser/components/newtab/css/activity-stream-linux.css') diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index 336c7573ab..8773159737 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -142,6 +142,9 @@ input { .icon.icon-info { background-image: url("chrome://global/skin/icons/info.svg"); } +.icon.icon-help { + background-image: url("chrome://global/skin/icons/help.svg"); +} .icon.icon-new-window { background-image: url("chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg"); } @@ -722,7 +725,20 @@ main section { inset-inline-end: -6px; } .top-site-outer.placeholder .tile { - box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + cursor: default; +} +.top-site-outer.placeholder.add-button .tile { + background-color: var(--button-background-color); +} +.top-site-outer.placeholder.add-button .tile .icon-wrapper { + background-image: url("chrome://global/skin/icons/plus-20.svg"); + background-size: cover; + background-repeat: no-repeat; + height: 20px; + width: 20px; + fill: var(--icon-color); + -moz-context-properties: fill; } .top-site-outer .title { color: var(--newtab-text-primary-color); @@ -1699,12 +1715,21 @@ main section { appearance: none; background-color: var(--newtab-element-secondary-color); } +.home-section .section .sponsored-checkbox:hover { + background-color: var(--newtab-element-secondary-hover-color); +} .home-section .section .sponsored-checkbox:checked { -moz-context-properties: fill; fill: var(--newtab-primary-element-text-color); background: url("chrome://global/skin/icons/check.svg") center no-repeat; background-color: var(--newtab-primary-action-background); } +.home-section .section .sponsored-checkbox:checked:hover { + background-color: var(--newtab-primary-element-hover-color); +} +.home-section .section .sponsored-checkbox:checked:active { + background-color: var(--newtab-primary-element-active-color); +} @media (forced-colors: active) { .home-section .section .sponsored-checkbox:checked { fill: #000; @@ -1731,6 +1756,9 @@ main section { background-origin: content-box; background-color: var(--newtab-background-color-secondary); } +.home-section .section .selector:hover { + background-color: var(--newtab-element-secondary-hover-color); +} .home-section .section .selector:dir(rtl) { background-position-x: left; } @@ -1747,6 +1775,22 @@ main section { .home-section .section .more-info-top-wrapper .check-wrapper { margin-top: 10px; } +.home-section .sponsored-content-info { + display: flex; + gap: var(--space-small); + font-size: var(--font-size-small); + border-radius: var(--border-radius-medium); + background-color: var(--newtab-element-secondary-color); + padding: var(--space-small) var(--space-large); +} +.home-section .sponsored-content-info .icon-help { + flex-shrink: 0; + color: var(--color-accent-primary); + height: 20px; +} +.home-section .sponsored-content-info a { + color: var(--newtab-primary-action-background); +} .home-section .divider { border-top: 1px var(--newtab-border-color) solid; margin: 0 -16px; @@ -3518,6 +3562,12 @@ main section { opacity: 1; transform: scale(1); } +.ds-card.active header, .ds-card:focus-within header, .ds-card:hover header { + color: var(--newtab-primary-action-background); +} +.ds-card:active header { + color: var(--newtab-primary-element-active-color); +} .ds-card .img { height: 0; padding-top: 50%; @@ -3527,26 +3577,17 @@ main section { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); } .ds-card .ds-card-link { + position: absolute; height: 100%; - display: flex; - flex-direction: column; + width: 100%; text-decoration: none; } -.ds-card .ds-card-link:hover header { - color: var(--newtab-primary-action-background); -} .ds-card .ds-card-link:focus { border: 0; outline: 0; box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); transition: none; } -.ds-card .ds-card-link:focus header { - color: var(--newtab-primary-action-background); -} -.ds-card .ds-card-link:active header { - color: var(--newtab-primary-element-active-color); -} .ds-card .meta { display: flex; flex-direction: column; @@ -3623,7 +3664,7 @@ main section { flex-wrap: wrap; justify-content: space-between; align-items: center; - column-gap: var(--space-small); + gap: 0 var(--space-small); margin-top: 0; } .ds-card.ds-card-cta-button.variant-a .story-cta-button, .ds-card.ds-card-cta-button.variant-b .story-cta-button { @@ -3667,7 +3708,10 @@ main section { color: var(--newtab-text-secondary-color); inset-inline-start: 0; margin-top: 12px; + display: flex; + gap: var(--space-large); position: relative; + pointer-events: none; } .story-footer .story-sponsored-label span { display: inline-block; @@ -4203,6 +4247,112 @@ main section { transition: box-shadow 150ms; } +.feature-highlight { + position: relative; + pointer-events: auto; + z-index: 1; +} +.feature-highlight .feature-highlight-modal { + position: absolute; + display: flex; + opacity: 0; + visibility: hidden; + cursor: default; + justify-content: space-between; + border-radius: var(--border-radius-small); + background: var(--newtab-background-color-secondary); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + width: 298px; + transition: opacity 0.3s, visibility 0.3s; +} +.feature-highlight .feature-highlight-modal .icon-dismiss { + flex-shrink: 0; + cursor: pointer; + background-size: 12px; + height: 12px; + width: 12px; + margin: var(--space-medium); + color: var(--icon-color); + border: none; +} +.feature-highlight .feature-highlight-modal .message-icon { + margin-block: var(--space-large); + margin-inline: var(--space-large) var(--space-medium); +} +.feature-highlight .feature-highlight-modal.opened { + opacity: 1; + visibility: visible; +} +.feature-highlight .feature-highlight-modal::after { + content: ""; + position: absolute; + height: 24px; + width: 24px; + background: var(--newtab-background-color-secondary); + box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15); +} +.feature-highlight .feature-highlight-modal.inset-block-start { + inset-block-end: 100%; + margin-bottom: var(--space-xlarge); +} +.feature-highlight .feature-highlight-modal.inset-block-start::after { + inset-block-end: -12px; + transform: rotate(45deg); +} +.feature-highlight .feature-highlight-modal.inset-block-end { + inset-block-start: 100%; + margin-top: var(--space-xlarge); +} +.feature-highlight .feature-highlight-modal.inset-block-end::after { + inset-block-start: -12px; + transform: rotate(225deg); +} +.feature-highlight .feature-highlight-modal.inset-inline-start { + inset-inline-end: calc(var(--space-xxlarge) * -1); +} +.feature-highlight .feature-highlight-modal.inset-inline-start::after { + inset-inline-end: calc(var(--space-xxlarge) - 12px); +} +.feature-highlight .feature-highlight-modal.inset-inline-end { + inset-inline-start: calc(var(--space-xxlarge) * -1); +} +.feature-highlight .feature-highlight-modal.inset-inline-end::after { + inset-inline-start: calc(var(--space-xxlarge) - 12px); +} +.feature-highlight .feature-highlight-modal p { + font-size: var(--font-size-small); + font-weight: normal; + margin: var(--space-large) 0; +} +.feature-highlight .toggle-button { + border: none; + padding: 0; +} + +.sponsored-content-highlight { + float: inline-end; +} +.sponsored-content-highlight .sponsored-message-icon { + background-image: url("chrome://activity-stream/content/data/content/assets/sponsor-message-icon.svg"); + background-size: 18px; + height: 18px; + width: 18px; +} +.sponsored-content-highlight .icon-help { + cursor: pointer; + height: 20px; + width: 20px; + background-size: 20px; + color: var(--icon-color); + vertical-align: text-bottom; +} +.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after { + margin-inline-end: 11px; +} +.sponsored-content-highlight .feature-highlight-modal.inset-inline-end::after { + margin-inline-start: 9px; +} + .ASRouterButton { font-weight: 600; font-size: 14px; -- cgit v1.2.3