diff options
Diffstat (limited to 'browser/components/newtab/css/activity-stream-mac.css')
| -rw-r--r-- | browser/components/newtab/css/activity-stream-mac.css | 476 |
1 files changed, 453 insertions, 23 deletions
diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index 416209d511..7b5ef57cb5 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -46,6 +46,16 @@ input { --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent); --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000); --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000); + --newtab-button-background: var(--button-background-color); + --newtab-button-focus-background: var(--newtab-button-background); + --newtab-button-focus-border: var(--focus-outline-color); + --newtab-button-hover-background: var(--button-background-color-hover); + --newtab-button-active-background: var(--button-background-color-active); + --newtab-button-text: var(--button-text-color); + --newtab-button-static-background: #F0F0F4; + --newtab-button-static-focus-background: var(--newtab-button-static-background); + --newtab-button-static-hover-background: #E0E0E6; + --newtab-button-static-active-background: #CFCFD8; --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent); --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent); --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent); @@ -83,6 +93,9 @@ input { --newtab-primary-element-text-color: #2b2a33; --newtab-wordmark-color: #fbfbfe; --newtab-status-success: #7C6; + --newtab-button-static-background: #2B2A33; + --newtab-button-static-hover-background: #52525E; + --newtab-button-static-active-background: #5B5B66; } @media (prefers-contrast) { @@ -96,7 +109,7 @@ input { background-size: 16px; -moz-context-properties: fill; display: inline-block; - color: var(--newtab-text-primary-color); + color: var(--icon-color); fill: currentColor; height: 16px; vertical-align: middle; @@ -146,6 +159,9 @@ input { .icon.icon-info { background-image: url("chrome://global/skin/icons/info.svg"); } +.icon.icon-info-critical { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-info-critical-16.svg"); +} .icon.icon-help { background-image: url("chrome://global/skin/icons/help.svg"); } @@ -226,6 +242,9 @@ input { .icon.icon-webextension { background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); } +.icon.icon-weather { + background-image: url("chrome://browser/skin/weather/sunny.svg"); +} .icon.icon-highlights { background-image: url("chrome://global/skin/icons/highlights.svg"); } @@ -663,12 +682,17 @@ main section { .top-site-outer:is(:hover) .context-menu-button { opacity: 1; } +.top-site-outer.active .context-menu-button { + opacity: 1; + background-color: var(--newtab-button-active-background); +} .top-site-outer .context-menu-button { background-image: url("chrome://global/skin/icons/more.svg"); + background-color: var(--newtab-button-background); border: 0; border-radius: 4px; cursor: pointer; - fill: var(--newtab-text-primary-color); + fill: var(--newtab-button-text); -moz-context-properties: fill; height: 20px; width: 20px; @@ -678,11 +702,16 @@ main section { top: -20px; transition: opacity 200ms; } -.top-site-outer .context-menu-button:is(:active, :focus) { - outline: 0; +.top-site-outer .context-menu-button:hover { + background-color: var(--newtab-button-hover-background); +} +.top-site-outer .context-menu-button:hover:active { + background-color: var(--newtab-button-active-background); +} +.top-site-outer .context-menu-button:focus-visible { + background-color: var(--newtab-button-focus-background); + border-color: var(--newtab-button-focus-border); opacity: 1; - background-color: var(--newtab-element-hover-color); - fill: var(--newtab-primary-action-background); } .top-site-outer .tile { border-radius: 8px; @@ -1679,7 +1708,8 @@ main section { inset-block: 0; inset-inline-end: 0; z-index: 1001; - padding: 16px; + padding-block: 0 var(--space-large); + padding-inline: var(--space-large); overflow: auto; transform: translateX(435px); visibility: hidden; @@ -1706,9 +1736,16 @@ main section { .customize-menu.customize-animate-exit-active { box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); } +.customize-menu .close-button-wrapper { + position: sticky; + top: 0; + padding-block-start: var(--space-large); + background-color: var(--newtab-background-color-secondary); + z-index: 1; +} .customize-menu .close-button { margin-inline-start: auto; - margin-bottom: 28px; + margin-inline-end: var(--space-large); white-space: nowrap; display: block; background-color: var(--newtab-element-secondary-color); @@ -1735,7 +1772,7 @@ main section { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); grid-row-gap: 32px; - padding: 0 16px; + padding: var(--space-large); } .home-section .wallpapers-section h2 { font-size: inherit; @@ -1982,6 +2019,333 @@ main section { text-decoration: none; } +:root { + --newtab-weather-content-font-size: 11px; + --newtab-weather-sponsor-font-size: 8px; +} + +.weather { + font-size: var(--font-size-root); + position: absolute; + left: var(--space-xlarge); + top: var(--space-xlarge); + z-index: 1; +} + +.weatherNotAvailable { + font-size: var(--newtab-weather-content-font-size); + color: var(--text-color-error); + display: flex; + align-items: center; +} +.weatherNotAvailable .icon { + fill: var(--icon-color-critical); + -moz-context-properties: fill; +} + +.weatherCard { + margin-block-end: var(--space-xsmall); + display: flex; + flex-wrap: nowrap; + align-items: stretch; + border-radius: var(--border-radius-medium); + overflow: hidden; +} +.weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText { + visibility: visible; +} +.weatherCard:focus-within { + overflow: visible; +} +.weatherCard:hover { + box-shadow: var(--box-shadow-10); + background: var(--background-color-box); +} +.weatherCard a { + color: var(--text-color); +} + +.weatherSponsorText { + visibility: hidden; + font-size: var(--newtab-weather-sponsor-font-size); + color: var(--text-color-deemphasized); +} + +.weatherInfoLink, .weatherButtonContextMenuWrapper { + appearance: none; + background-color: var(--background-color-ghost); + border: 0; + padding: var(--space-small); + cursor: pointer; +} +.weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover { + background-color: var(--button-background-color-ghost-hover); +} +.weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after { + background-color: transparent; +} +.weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active { + background-color: var(--button-background-color-ghost-active); +} +.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible { + outline: var(--focus-outline); +} +@media (prefers-color-scheme: dark) { + .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper { + background-color: rgba(35, 34, 43, 0.7); + } + .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover { + background-color: var(--newtab-button-static-hover-background); + } + .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active { + background-color: var(--newtab-button-static-active-background); + } +} +@media (prefers-contrast) and (prefers-color-scheme: dark) { + .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper { + background-color: var(--background-color-box); + } +} +@media (prefers-color-scheme: light) { + .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper { + background-color: rgba(255, 255, 255, 0.7); + } + .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover { + background-color: var(--newtab-button-static-hover-background); + } + .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active { + background-color: var(--newtab-button-static-active-background); + } +} +@media (prefers-contrast) and (prefers-color-scheme: light) { + .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper { + background-color: var(--background-color-box); + } +} + +.weatherInfoLink { + display: flex; + gap: var(--space-medium); + padding: var(--space-small) var(--space-medium); + border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); + text-decoration: none; + color: var(--text-color); + min-width: 130px; + max-width: 190px; + text-overflow: ellipsis; +} +@media (min-width: 610px) { + .weatherInfoLink { + min-width: unset; + } +} +.weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after { + background-color: transparent; +} +.weatherInfoLink:focus-visible { + border-radius: var(--border-radius-medium); +} +.weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after { + background-color: transparent; +} + +.weatherButtonContextMenuWrapper { + position: relative; + cursor: pointer; + border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; + display: flex; + align-items: stretch; + width: 50px; + padding: 0; +} +.weatherButtonContextMenuWrapper::after { + content: ""; + left: 0; + top: 10px; + height: calc(100% - 20px); + width: 1px; + background-color: var(--newtab-button-static-background); + display: block; + position: absolute; + z-index: 0; +} +@media (prefers-color-scheme: dark) { + .weatherButtonContextMenuWrapper::after { + background-color: var(--color-gray-70); + } +} +.weatherButtonContextMenuWrapper:hover::after { + background-color: transparent; +} +.weatherButtonContextMenuWrapper:focus-visible { + border-radius: var(--border-radius-medium); +} +.weatherButtonContextMenuWrapper:focus-visible::after { + background-color: transparent; +} + +.weatherButtonContextMenu { + background-image: url("chrome://global/skin/icons/more.svg"); + background-repeat: no-repeat; + background-size: var(--size-item-small) auto; + background-position: center; + background-color: transparent; + cursor: pointer; + fill: var(--icon-color); + -moz-context-properties: fill; + width: 100%; + height: 100%; + border: 0; + appearance: none; + min-width: var(--size-item-large); +} + +.weatherText { + height: min-content; +} + +.weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-small); +} + +.weatherForecastRow { + text-transform: uppercase; + font-weight: var(--font-weight-bold); +} + +.weatherCityRow { + color: var(--text-color-deemphasized); +} + +.weatherCity { + text-overflow: ellipsis; + font-size: var(--font-size-small); +} + +.weatherCityRow + .weatherDetailedSummaryRow { + margin-block-start: var(--space-xsmall); +} + +.weatherDetailedSummaryRow { + font-size: var(--newtab-weather-content-font-size); + gap: var(--space-large); +} + +.weatherHighLowTemps { + display: flex; + gap: var(--space-xxsmall); + text-transform: uppercase; + word-spacing: var(--space-xxsmall); +} + +.weatherTextSummary { + text-align: center; + max-width: 90px; +} + +.weatherTemperature { + font-size: var(--font-size-large); +} + +.weatherIconCol { + width: var(--size-item-large); + height: var(--size-item-large); + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + align-self: center; +} + +.weatherIcon { + width: var(--size-item-large); + height: auto; + vertical-align: middle; +} +@media (prefers-contrast) { + .weatherIcon { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + } +} +.weatherIcon.iconId1 { + content: url("chrome://browser/skin/weather/sunny.svg"); +} +.weatherIcon.iconId2 { + content: url("chrome://browser/skin/weather/mostly-sunny.svg"); +} +.weatherIcon:is(.iconId3, .iconId4, .iconId6) { + content: url("chrome://browser/skin/weather/partly-sunny.svg"); +} +.weatherIcon.iconId5 { + content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); +} +.weatherIcon:is(.iconId7, .iconId8) { + content: url("chrome://browser/skin/weather/cloudy.svg"); +} +.weatherIcon.iconId11 { + content: url("chrome://browser/skin/weather/fog.svg"); +} +.weatherIcon.iconId12 { + content: url("chrome://browser/skin/weather/showers.svg"); +} +.weatherIcon:is(.iconId13, .iconId14) { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); +} +.weatherIcon.iconId15 { + content: url("chrome://browser/skin/weather/thunderstorms.svg"); +} +.weatherIcon:is(.iconId16, .iconId17) { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); +} +.weatherIcon.iconId18 { + content: url("chrome://browser/skin/weather/rain.svg"); +} +.weatherIcon:is(.iconId19, .iconId20, .iconId25) { + content: url("chrome://browser/skin/weather/flurries.svg"); +} +.weatherIcon.iconId21 { + content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); +} +.weatherIcon:is(.iconId22, .iconId23) { + content: url("chrome://browser/skin/weather/snow.svg"); +} +.weatherIcon:is(.iconId24, .iconId31) { + content: url("chrome://browser/skin/weather/ice.svg"); +} +.weatherIcon:is(.iconId26, .iconId29) { + content: url("chrome://browser/skin/weather/freezing-rain.svg"); +} +.weatherIcon.iconId30 { + content: url("chrome://browser/skin/weather/hot.svg"); +} +.weatherIcon.iconId32 { + content: url("chrome://browser/skin/weather/windy.svg"); +} +.weatherIcon.iconId33 { + content: url("chrome://browser/skin/weather/night-clear.svg"); +} +.weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) { + content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); +} +.weatherIcon.iconId37 { + content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); +} +.weatherIcon:is(.iconId39, .iconId40) { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); + height: var(--size-item-large); +} +.weatherIcon:is(.iconId41, .iconId42) { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); +} +.weatherIcon:is(.iconId43, .iconId44) { + content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); +} + /* stylelint-disable max-nesting-depth */ .card-outer { background: var(--newtab-background-color-secondary); @@ -1994,14 +2358,17 @@ main section { } .card-outer .context-menu-button { background-clip: padding-box; - background-color: var(--newtab-background-color-secondary); + background-color: var(--newtab-button-background); background-image: url("chrome://global/skin/icons/more.svg"); background-position: 55%; - border: 1px solid var(--newtab-border-color); + border: 0; + outline: 1px solid var(--newtab-border-color); + outline-width: 0; border-radius: 100%; box-shadow: 0 2px rgba(12, 12, 13, 0.1); cursor: pointer; - fill: var(--newtab-text-primary-color); + color: var(--button-text-color); + fill: var(--newtab-button-text); height: 27px; inset-inline-end: -13.5px; opacity: 0; @@ -2012,10 +2379,21 @@ main section { transition-property: transform, opacity; width: 27px; } -.card-outer .context-menu-button:is(:active, :focus) { +.card-outer .context-menu-button:is(:active, :focus-visible, :hover) { opacity: 1; transform: scale(1); } +.card-outer .context-menu-button:is(:hover) { + background-color: var(--newtab-button-hover-background); +} +.card-outer .context-menu-button:is(:focus-visible) { + outline-color: var(--newtab-button-focus-border); + background-color: var(--newtab-button-focus-background); + outline-width: 4px; +} +.card-outer .context-menu-button:is(:active) { + background-color: var(--newtab-button-active-background); +} .card-outer:is(:focus):not(.placeholder) { border: 0; outline: 0; @@ -2622,6 +3000,15 @@ main section { width: auto; flex-grow: 1; } +.discoverystream-admin .weather-section { + margin-block-end: 24px; +} +.discoverystream-admin .weather-section form { + display: flex; +} +.discoverystream-admin .weather-section form label { + margin-inline-end: 12px; +} .pocket-logged-in-cta { font-size: 13px; @@ -3309,6 +3696,18 @@ main section { .ds-highlights .section .section-list .card-outer a { text-decoration: none; } +.ds-highlights .section .section-list .card-outer .context-menu-button { + background-color: var(--newtab-button-static-background); +} +.ds-highlights .section .section-list .card-outer .context-menu-button:hover { + background-color: var(--newtab-button-static-hover-background); +} +.ds-highlights .section .section-list .card-outer .context-menu-button:hover:active { + background-color: var(--newtab-button-static-active-background); +} +.ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible { + background-color: var(--newtab-button-static-focus-background); +} .ds-highlights .hide-for-narrow { display: block; } @@ -3570,14 +3969,17 @@ main section { .ds-card .context-menu-button, .ds-signup .context-menu-button { background-clip: padding-box; - background-color: var(--newtab-background-color-secondary); + background-color: var(--newtab-button-background); background-image: url("chrome://global/skin/icons/more.svg"); background-position: 55%; - border: 1px solid var(--newtab-border-color); + border: 0; + outline: 1px solid var(--newtab-border-color); + outline-width: 0; border-radius: 100%; box-shadow: 0 2px rgba(12, 12, 13, 0.1); cursor: pointer; - fill: var(--newtab-text-primary-color); + color: var(--button-text-color); + fill: var(--newtab-button-text); height: 27px; inset-inline-end: -13.5px; opacity: 0; @@ -3588,11 +3990,25 @@ main section { transition-property: transform, opacity; width: 27px; } -.ds-card .context-menu-button:is(:active, :focus), -.ds-signup .context-menu-button:is(:active, :focus) { +.ds-card .context-menu-button:is(:active, :focus-visible, :hover), +.ds-signup .context-menu-button:is(:active, :focus-visible, :hover) { opacity: 1; transform: scale(1); } +.ds-card .context-menu-button:is(:hover), +.ds-signup .context-menu-button:is(:hover) { + background-color: var(--newtab-button-hover-background); +} +.ds-card .context-menu-button:is(:focus-visible), +.ds-signup .context-menu-button:is(:focus-visible) { + outline-color: var(--newtab-button-focus-border); + background-color: var(--newtab-button-focus-background); + outline-width: 4px; +} +.ds-card .context-menu-button:is(:active), +.ds-signup .context-menu-button:is(:active) { + background-color: var(--newtab-button-active-background); +} .ds-card .context-menu, .ds-signup .context-menu { opacity: 0; @@ -3667,11 +4083,6 @@ main section { background-size: 15px; fill: #FFF; } -.ds-card .card-stp-button-hover-background .context-menu-button { - position: static; - transition: none; - border-radius: 3px; -} .ds-card .card-stp-button-hover-background .context-menu-position-container { position: relative; } @@ -3694,6 +4105,9 @@ main section { white-space: nowrap; color: #FFF; } +.ds-card .card-stp-button-hover-background .card-stp-button:focus-visible { + outline: 2px solid var(--newtab-button-focus-border); +} .ds-card .card-stp-button-hover-background button, .ds-card .card-stp-button-hover-background .context-menu { pointer-events: auto; @@ -3701,6 +4115,22 @@ main section { .ds-card .card-stp-button-hover-background button { cursor: pointer; } +.ds-card .context-menu-button { + position: static; + transition: none; + border-radius: 3px; + background-color: var(--newtab-button-static-background); +} +.ds-card .context-menu-button:hover { + background-color: var(--newtab-button-static-hover-background); +} +.ds-card .context-menu-button:hover:active { + background-color: var(--newtab-button-static-active-background); +} +.ds-card .context-menu-button:focus-visible { + outline: 2px solid var(--newtab-button-focus-border); + background-color: var(--newtab-button-static-focus-background); +} .ds-card.last-item .card-stp-button-hover-background .context-menu { margin-inline-start: auto; margin-inline-end: 18.5px; |