diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /browser/components/newtab/css/activity-stream-linux.css | |
parent | Initial commit. (diff) | |
download | firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/newtab/css/activity-stream-linux.css')
-rw-r--r-- | browser/components/newtab/css/activity-stream-linux.css | 4545 |
1 files changed, 4545 insertions, 0 deletions
diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css new file mode 100644 index 0000000000..86edcbd62d --- /dev/null +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -0,0 +1,4545 @@ +@charset "UTF-8"; +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +/* This is the linux variant */ +html { + box-sizing: border-box; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +*::-moz-focus-inner { + border: 0; } + +body { + margin: 0; } + +button, +input { + background-color: inherit; + color: inherit; + font-family: inherit; + font-size: inherit; } + +[hidden] { + display: none !important; } + +body { + --newtab-background-color: #F9F9FA; + --newtab-border-primary-color: #B1B1B3; + --newtab-border-secondary-color: #D7D7DB; + --newtab-element-active-color: rgba(215, 215, 219, 0.6); + --newtab-element-hover-color: #EDEDF0; + --newtab-icon-primary-color: rgba(12, 12, 13, 0.8); + --newtab-icon-secondary-color: rgba(12, 12, 13, 0.6); + --newtab-icon-tertiary-color: #D7D7DB; + --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1); + --newtab-inner-box-shadow-color-nte: rgba(9, 32, 77, 0.12); + --newtab-tile-shadow-secondary: rgba(29, 17, 51, 0.2); + --newtab-link-primary-color: #0060DF; + --newtab-link-secondary-color: #008EA4; + --newtab-text-conditional-color: #4A4A4F; + --newtab-text-primary-color: #0C0C0D; + --newtab-text-secondary-color: #737373; + --newtab-textbox-background-color: #FFF; + --newtab-textbox-border: rgba(12, 12, 13, 0.2); + --newtab-textbox-focus-color: #0060DF; + --newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3); + --newtab-background-button-color: rgba(223, 223, 223, 0.5); + --newtab-background-button-text-color: #484848; + --newtab-background-button-hover-color: rgba(196, 196, 196, 0.5); + --newtab-background-button-active-color: rgba(151, 151, 151, 0.5); + --newtab-button-primary-color: #0060DF; + --newtab-button-secondary-color: inherit; + --newtab-feed-button-background: #EDEDF0; + --newtab-feed-button-text: #0C0C0D; + --newtab-feed-button-background-faded: rgba(237, 237, 240, 0.6); + --newtab-feed-button-text-faded: rgba(12, 12, 13, 0); + --newtab-feed-button-spinner: #737373; + --newtab-contextmenu-background-color: #F9F9FA; + --newtab-contextmenu-button-color: #FFF; + --newtab-modal-color: #FFF; + --newtab-overlay-color: rgba(237, 237, 240, 0.8); + --newtab-section-header-text-color: #737373; + --newtab-section-navigation-text-color: #737373; + --newtab-section-active-contextmenu-color: #0C0C0D; + --newtab-search-border-color: transparent; + --newtab-search-dropdown-color: #FFF; + --newtab-search-dropdown-header-color: #F9F9FA; + --newtab-search-header-background-color: rgba(249, 249, 250, 0.95); + --newtab-search-icon-color: rgba(12, 12, 13, 0.4); + --newtab-search-wordmark-color: #363959; + --newtab-topsites-background-color: #FFF; + --newtab-topsites-icon-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + --newtab-topsites-label-color: inherit; + --newtab-topsites-outer-card-hover: rgba(0, 0, 0, 0.05); + --newtab-topsites-context-menu-hover: rgba(0, 0, 0, 0.05); + --newtab-card-active-outline-color: #D7D7DB; + --newtab-card-background-color: #FFF; + --newtab-card-hairline-color: rgba(0, 0, 0, 0.1); + --newtab-card-placeholder-color: #D7D7DB; + --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); + --newtab-snippets-background-color: #FFF; + --newtab-snippets-hairline-color: transparent; + --newtab-background-primary-text-color: #151515; + --newtab-focus-outline: rgba(0, 96, 223, 0.25); + --newtab-focus-border: #0060DF; + --newtab-focus-border-selected: rgba(0, 0, 0, 0.15); + --newtab-seperator-line-color: #E1E0E6; + --newtab-primary-action-background: #0060DF; + --newtab-primary-action-background-off: #E9E9E9; + --customize-menu-primary-text-color: #20123A; + --customize-menu-check-fill: #FFF; + --customize-menu-background: #FFF; + --customize-menu-secondary-action-background: #F9F9FA; + --customize-menu-secondary-action-background-hover: #EDEDF0; + --customize-menu-secondary-action-background-active: #E2E2E6; + --customize-menu-seperator-line-color: #E1E0E6; + --customize-menu-first-shadow: rgba(9, 32, 77, 0.12); + --customize-menu-second-shadow: rgba(29, 17, 51, 0.12); + --customize-menu-primary-action-text: #FFF; + --customize-menu-line-color: #716F87; + --newtab-search-first-shadow: rgba(9, 32, 77, 0.12); + --newtab-search-second-shadow: rgba(29, 17, 51, 0.12); + --newtab-search-text-color: #585165; + --newtab-card-first-shadow: rgba(9, 32, 77, 0.12); + --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); + --newtab-wordmark-color: #20123A; } + body[lwt-newtab-brighttext] { + --newtab-background-color: #2A2A2E; + --newtab-border-primary-color: rgba(249, 249, 250, 0.8); + --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); + --newtab-button-primary-color: #0060DF; + --newtab-button-secondary-color: #38383D; + --newtab-element-active-color: rgba(249, 249, 250, 0.2); + --newtab-element-hover-color: rgba(249, 249, 250, 0.1); + --newtab-icon-primary-color: rgba(249, 249, 250, 0.8); + --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4); + --newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4); + --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2); + --newtab-inner-box-shadow-color-nte: rgba(21, 20, 26, 0.5); + --newtab-tile-shadow-secondary: rgba(21, 20, 26, 0.75); + --newtab-link-primary-color: #45A1FF; + --newtab-link-secondary-color: #50BCB6; + --newtab-text-conditional-color: #F9F9FA; + --newtab-text-primary-color: #F9F9FA; + --newtab-text-secondary-color: rgba(249, 249, 250, 0.8); + --newtab-textbox-background-color: #38383D; + --newtab-textbox-border: rgba(249, 249, 250, 0.2); + --newtab-textbox-focus-color: #45A1FF; + --newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3); + --newtab-background-button-color: rgba(80, 80, 80, 0.5); + --newtab-background-button-text-color: #CDCDD4; + --newtab-background-button-hover-color: rgba(114, 114, 114, 0.5); + --newtab-background-button-active-color: rgba(173, 173, 173, 0.5); + --newtab-feed-button-background: #38383D; + --newtab-feed-button-text: #F9F9FA; + --newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6); + --newtab-feed-button-text-faded: rgba(249, 249, 250, 0); + --newtab-feed-button-spinner: #D7D7DB; + --newtab-contextmenu-background-color: #4A4A4F; + --newtab-contextmenu-button-color: #2A2A2E; + --newtab-modal-color: #2A2A2E; + --newtab-overlay-color: rgba(12, 12, 13, 0.8); + --newtab-section-header-text-color: rgba(249, 249, 250, 0.8); + --newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8); + --newtab-section-active-contextmenu-color: #FFF; + --newtab-search-border-color: rgba(249, 249, 250, 0.2); + --newtab-search-dropdown-color: #38383D; + --newtab-search-dropdown-header-color: #4A4A4F; + --newtab-search-header-background-color: rgba(42, 42, 46, 0.95); + --newtab-search-icon-color: rgba(249, 249, 250, 0.6); + --newtab-search-wordmark-color: #FFF; + --newtab-topsites-background-color: #38383D; + --newtab-topsites-icon-shadow: none; + --newtab-topsites-label-color: rgba(249, 249, 250, 0.8); + --newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1); + --newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1); + --newtab-card-active-outline-color: #4A4A4F; + --newtab-card-background-color: #38383D; + --newtab-card-hairline-color: rgba(249, 249, 250, 0.1); + --newtab-card-placeholder-color: #4A4A4F; + --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2); + --newtab-snippets-background-color: #38383D; + --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1); + --newtab-background-primary-text-color: #CDCDD4; + --newtab-focus-outline: rgba(80, 145, 241, 0.5); + --newtab-focus-border: #B5D3FF; + --newtab-focus-border-selected: #B5D3FF; + --newtab-primary-action-background: #4484E2; + --newtab-primary-action-background-off: #6A6A6F; + --newtab-seperator-line-color: #53515F; + --customize-menu-primary-text-color: #E0E0E6; + --customize-menu-check-fill: #E0E0E6; + --customize-menu-background: #38383D; + --customize-menu-secondary-action-background: #515156; + --customize-menu-secondary-action-background-hover: #606065; + --customize-menu-secondary-action-background-active: #6F6F74; + --customize-menu-seperator-line-color: #53515F; + --customize-menu-first-shadow: rgba(21, 20, 26, 0.5); + --customize-menu-second-shadow: rgba(21, 20, 26, 0.75); + --customize-menu-primary-action-text: #E0E0E6; + --customize-menu-line-color: #B9B7CC; + --newtab-search-first-shadow: rgba(21, 20, 26, 0.5); + --newtab-search-second-shadow: rgba(21, 20, 26, 0.75); + --newtab-search-text-color: #B1B1BD; + --newtab-card-first-shadow: rgba(21, 20, 26, 0.5); + --newtab-card-second-shadow: rgba(21, 20, 26, 0.75); + --newtab-wordmark-color: #FFF; } + +.icon { + background-position: center center; + background-repeat: no-repeat; + background-size: 16px; + -moz-context-properties: fill; + display: inline-block; + color: var(--newtab-icon-primary-color); + fill: currentColor; + height: 16px; + vertical-align: middle; + width: 16px; } + .icon.icon-spacer { + margin-inline-end: 8px; } + .icon.icon-small-spacer { + margin-inline-end: 6px; } + .icon.icon-button-style { + fill: var(--newtab-icon-secondary-color); + border: 0; } + .icon.icon-button-style:focus, .icon.icon-button-style:hover { + fill: var(--newtab-text-primary-color); } + .icon.icon-bookmark-added { + background-image: url("chrome://browser/skin/bookmark.svg"); } + .icon.icon-bookmark-hollow { + background-image: url("chrome://browser/skin/bookmark-hollow.svg"); } + .icon.icon-clear-input { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-cancel-16.svg"); } + .icon.icon-delete { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-delete-16.svg"); } + .icon.icon-search { + background-image: url("chrome://browser/skin/search-glass.svg"); } + .icon.icon-modal-delete { + flex-shrink: 0; + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-modal-delete-32.svg"); + background-size: 32px; + height: 32px; + width: 32px; } + .icon.icon-mail { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg"); } + .icon.icon-dismiss { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-dismiss-16.svg"); } + .icon.icon-info { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-info-16.svg"); } + .icon.icon-new-window { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg"); } + .icon.icon-new-window:dir(rtl) { + transform: scaleX(-1); } + .icon.icon-new-window-private { + background-image: url("chrome://browser/skin/privateBrowsing.svg"); } + .icon.icon-settings { + background-image: url("chrome://global/skin/icons/settings.svg"); } + .icon.icon-pin { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg"); } + .icon.icon-pin:dir(rtl) { + transform: scaleX(-1); } + .icon.icon-unpin { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg"); } + .icon.icon-unpin:dir(rtl) { + transform: scaleX(-1); } + .icon.icon-edit { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); } + .icon.icon-pocket { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-16.svg"); } + .icon.icon-pocket-save { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-save-16.svg"); } + .icon.icon-pocket-delete { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg"); } + .icon.icon-pocket-archive { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg"); } + .icon.icon-history-item { + background-image: url("chrome://browser/skin/history.svg"); } + .icon.icon-trending { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-trending-16.svg"); + transform: translateY(2px); } + .icon.icon-now { + background-image: url("chrome://browser/skin/history.svg"); } + .icon.icon-topsites { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-topsites-16.svg"); } + .icon.icon-pin-small { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pin-12.svg"); + background-size: 12px; + height: 12px; + width: 12px; } + .icon.icon-pin-small:dir(rtl) { + transform: scaleX(-1); } + .icon.icon-check { + background-image: url("chrome://global/skin/icons/check.svg"); } + .icon.icon-download { + background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar"); } + .icon.icon-copy { + background-image: url("chrome://browser/skin/edit-copy.svg"); } + .icon.icon-open-file { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg"); } + .icon.icon-webextension { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); } + .icon.icon-highlights { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg"); } + .icon.icon-arrowhead-down { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg"); } + .icon.icon-arrowhead-down-small { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg"); + background-size: 12px; + height: 12px; + width: 12px; } + .icon.icon-arrowhead-forward-small { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg"); + background-size: 12px; + height: 12px; + transform: rotate(-90deg); + width: 12px; } + .icon.icon-arrowhead-forward-small:dir(rtl) { + transform: rotate(90deg); } + .icon.icon-arrowhead-up { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg"); + transform: rotate(180deg); } + .icon.icon-add { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-add-16.svg"); } + .icon.icon-minimize { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg"); } + .icon.icon-maximize { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg"); } + .icon.icon-arrow { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrow.svg"); } + +html { + height: 100%; } + +body, +#root { + min-height: 100vh; } + +#root { + position: relative; } + +body { + background-color: var(--newtab-background-color); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif; + font-size: 16px; } + +.no-scroll { + overflow: hidden; } + +h1, +h2 { + font-weight: normal; } + +a { + text-decoration: none; } + +.inner-border { + border: 1px solid var(--newtab-border-secondary-color); + border-radius: 3px; + height: 100%; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; + z-index: 100; } + +@keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } + +.show-on-init { + opacity: 0; + transition: opacity 0.2s ease-in; } + .show-on-init.on { + animation: fadeIn 0.2s; + opacity: 1; } + +.actions { + border-top: 1px solid var(--newtab-border-secondary-color); + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + margin: 0; + padding: 15px 25px 0; } + +.button, +.actions button { + background-color: var(--newtab-button-secondary-color); + border: 1px solid var(--newtab-border-primary-color); + border-radius: 4px; + color: inherit; + cursor: pointer; + margin-bottom: 15px; + padding: 10px 30px; + white-space: nowrap; } + .button:hover:not(.dismiss), .button:focus:not(.dismiss), + .actions button:hover:not(.dismiss), + .actions button:focus:not(.dismiss) { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } + .button.dismiss, + .actions button.dismiss { + background-color: transparent; + border: 0; + padding: 0; + text-decoration: underline; } + .button.primary, .button.done, + .actions button.primary, + .actions button.done { + background-color: var(--newtab-button-primary-color); + border: solid 1px var(--newtab-button-primary-color); + color: #FFF; + margin-inline-start: auto; } + +input[type='text'], input[type='search'] { + border-radius: 3px; } + +.clamp { + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; } + +.a11y-link-button { + border: 0; + padding: 0; + cursor: pointer; + text-align: unset; + color: var(--newtab-link-primary-color); } + .a11y-link-button:hover, .a11y-link-button:focus { + text-decoration: underline; } + +.outer-wrapper { + color: var(--newtab-text-primary-color); + display: flex; + flex-grow: 1; + min-height: 100vh; + padding: 30px 32px 32px; } + .outer-wrapper.ds-outer-wrapper-breakpoint-override { + padding: 30px 0 32px; } + @media (min-width: 610px) { + .outer-wrapper.ds-outer-wrapper-breakpoint-override { + padding: 30px 32px 32px; } } + .outer-wrapper.only-search { + display: block; + padding-top: 134px; } + .outer-wrapper a { + color: var(--newtab-link-primary-color); } + +main { + margin: auto; + width: 274px; + padding-bottom: 68px; } + main section { + margin-bottom: 20px; + position: relative; } + .hide-main main { + visibility: hidden; } + @media (min-width: 610px) { + main { + width: 530px; } } + @media (min-width: 866px) { + main { + width: 786px; } } + @media (min-width: 1122px) { + main { + width: 1042px; } } + +.below-search-snippet.withButton { + margin: auto; + width: 100%; } + +.ds-outer-wrapper-search-alignment main { + margin: 0 auto; } + +.ds-outer-wrapper-breakpoint-override main { + width: 266px; + padding-bottom: 68px; } + @media (min-width: 610px) { + .ds-outer-wrapper-breakpoint-override main { + width: 510px; } } + @media (min-width: 866px) { + .ds-outer-wrapper-breakpoint-override main { + width: 746px; } } + @media (min-width: 1122px) { + .ds-outer-wrapper-breakpoint-override main { + width: 986px; } } + +.base-content-fallback { + height: 100vh; } + + +.body-wrapper .section-title, +.body-wrapper .sections-list .section:last-of-type, +.body-wrapper .topics { + opacity: 0; } + + +.body-wrapper.on .section-title, +.body-wrapper.on .sections-list .section:last-of-type, +.body-wrapper.on .topics { + opacity: 1; } + +.non-collapsible-section { + padding: 0 25px; } + +.prefs-button button { + background-color: transparent; + border: 0; + border-radius: 2px; + cursor: pointer; + inset-inline-end: 15px; + padding: 15px; + position: fixed; + top: 15px; + z-index: 1000; } + .prefs-button button:hover, .prefs-button button:focus { + background-color: var(--newtab-element-hover-color); } + .prefs-button button:active { + background-color: var(--newtab-element-active-color); } + +@media (max-height: 701px) { + .personalize-button { + position: absolute; + top: 16px; + inset-inline-end: 16px; } } + +@media (min-height: 700px) { + .personalize-button { + position: fixed; + top: 16px; + inset-inline-end: 16px; + z-index: 1000; } } + +.personalize-button { + font-size: 12px; + font-weight: 600; + border: 0; + border-radius: 4px; + background-color: var(--newtab-background-button-color); + color: var(--newtab-background-button-text-color); + padding: 3px 10px; + min-height: 32px; + max-width: 117px; } + .personalize-button:hover { + background-color: var(--newtab-background-button-hover-color); } + .personalize-button:active { + background-color: var(--newtab-background-button-active-color); } + .personalize-button:focus-visible { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } + +.as-error-fallback { + align-items: center; + border-radius: 3px; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + color: var(--newtab-text-conditional-color); + display: flex; + flex-direction: column; + font-size: 12px; + justify-content: center; + justify-items: center; + line-height: 1.5; } + .as-error-fallback.borderless-error { + box-shadow: none; } + .as-error-fallback a { + color: var(--newtab-text-conditional-color); + text-decoration: underline; } + +.top-sites-list { + list-style: none; + margin: 0 -16px; + padding: 0; } + @media (max-width: 610px) { + .top-sites-list > :nth-child(2n+1) .context-menu { + margin-inline-end: auto; + margin-inline-start: auto; + inset-inline-end: auto; + inset-inline-start: -32px; } + .top-sites-list > :nth-child(2n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 610px) and (max-width: 866px) { + .top-sites-list :nth-child(4n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 610px) and (max-width: 834px) { + .top-sites-list :nth-child(4n+3) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 866px) and (max-width: 1314px) { + .top-sites-list :nth-child(6n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 866px) and (max-width: 1090px) { + .top-sites-list :nth-child(6n+5) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 1122px) and (max-width: 1570px) { + .top-sites-list :nth-child(8n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 1122px) and (max-width: 1346px) { + .top-sites-list :nth-child(8n+7) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + .top-sites-list .hide-for-narrow { + display: none; } + @media (min-width: 610px) { + .top-sites-list .hide-for-narrow { + display: inline-block; } } + @media (min-width: 866px) { + .top-sites-list .hide-for-narrow { + display: none; } } + @media (min-width: 1122px) { + .top-sites-list .hide-for-narrow { + display: inline-block; } } + +.top-site-outer { + padding: 0 16px; + display: inline-block; } + .top-site-outer .top-site-inner { + position: relative; } + .top-site-outer .top-site-inner > a { + color: inherit; + display: block; + outline: none; } + .top-site-outer .tile { + border-radius: 4px; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), var(--newtab-card-shadow); + cursor: pointer; + position: relative; + align-items: center; + color: var(--newtab-text-secondary-color); + display: flex; + font-size: 32px; + font-weight: 200; + justify-content: center; + text-transform: uppercase; } + .top-site-outer .tile .icon-wrapper { + border-radius: 4px; + width: 48px; + height: 48px; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + justify-content: center; } + .top-site-outer .tile .icon-wrapper.letter-fallback::before { + content: attr(data-fallback); + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; + font-size: 64px; + font-weight: 800; + transform: rotate(-10deg); + top: 6px; + position: relative; + color: #FFF; } + .top-site-outer .top-site-icon { + background-color: var(--newtab-topsites-background-color); + background-position: center center; + background-repeat: no-repeat; + border-radius: 4px; + position: absolute; } + .top-site-outer .rich-icon { + background-size: cover; + height: 100%; + inset-inline-start: 0; + top: 0; + width: 100%; } + .top-site-outer .default-icon, + .top-site-outer .search-topsite { + background-size: 32px; + height: 42px; + width: 42px; + align-items: center; + display: flex; + font-size: 20px; + justify-content: center; } + .top-site-outer .default-icon[data-fallback]::before, + .top-site-outer .search-topsite[data-fallback]::before { + content: attr(data-fallback); } + .top-site-outer .search-topsite { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-search-16.svg"); + background-size: 26px; + background-color: #0060DF; + border-radius: 42px; + -moz-context-properties: fill; + fill: #FFF; + box-shadow: var(--newtab-card-shadow); + transition-duration: 150ms; + transition-property: background-size, bottom, inset-inline-end, height, width; + height: 42px; + width: 42px; + bottom: -6px; + inset-inline-end: -6px; } + .top-site-outer .title { + color: var(--newtab-topsites-label-color); + font: message-box; + padding-top: 4px; + text-align: center; + position: relative; } + .top-site-outer .title .icon { + fill: var(--newtab-icon-tertiary-color); } + .top-site-outer .title span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .top-site-outer .title .sponsored-label { + color: #737373; + font-size: 0.9em; } + .top-site-outer .title:not(.sponsored) .sponsored-label { + visibility: hidden; } + .top-site-outer.search-shortcut .rich-icon { + background-color: #FFF; } + .top-site-outer .edit-button { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); } + .top-site-outer.placeholder .screenshot { + display: none; } + .top-site-outer.dragged .tile { + background: #EDEDF0; + box-shadow: none; } + .top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before { + display: none; } + .top-site-outer.dragged .title { + visibility: hidden; } + +.edit-topsites-wrapper .modal { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); + left: 0; + margin: 0 auto; + max-height: calc(100% - 40px); + position: fixed; + right: 0; + top: 40px; + width: 274px; } + @media (min-width: 610px) { + .edit-topsites-wrapper .modal { + width: 530px; } } + @media (min-width: 866px) { + .edit-topsites-wrapper .modal { + width: 786px; } } + +.topsite-form .section-title { + font-size: 16px; + margin: 0 0 16px; } + +.topsite-form .form-input-container { + max-width: 492px; + margin: 0 auto; + padding: 32px; } + .topsite-form .form-input-container .top-site-outer { + pointer-events: none; } + +.topsite-form .search-shortcuts-container { + max-width: 700px; + margin: 0 auto; + padding: 32px; } + .topsite-form .search-shortcuts-container > div { + margin-inline-end: -39px; } + .topsite-form .search-shortcuts-container .top-site-outer { + margin-inline-start: 0; + margin-inline-end: 39px; } + +.topsite-form .top-site-outer { + padding: 0; + margin: 24px 0 0; + margin-inline-start: 32px; } + +.topsite-form .fields-and-preview { + display: flex; } + +.topsite-form label { + font-size: 13px; } + +.topsite-form .form-wrapper { + width: 100%; } + .topsite-form .form-wrapper .field { + position: relative; } + .topsite-form .form-wrapper .field .icon-clear-input { + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: 8px; } + .topsite-form .form-wrapper .url input:dir(ltr) { + padding-right: 32px; } + .topsite-form .form-wrapper .url input:dir(rtl) { + padding-left: 32px; } + .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { + direction: ltr; + text-align: right; } + .topsite-form .form-wrapper .enable-custom-image-input { + display: inline-block; + font-size: 13px; + margin-top: 4px; + cursor: pointer; } + .topsite-form .form-wrapper .custom-image-input-container { + margin-top: 4px; } + .topsite-form .form-wrapper .custom-image-input-container .loading-container { + width: 16px; + height: 16px; + overflow: hidden; + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: 8px; } + .topsite-form .form-wrapper .custom-image-input-container .loading-animation { + width: 960px; + height: 16px; + -moz-context-properties: fill; + fill: #0A84FF; + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + animation: tab-throbber-animation 1.05s steps(60) infinite; } + +@keyframes tab-throbber-animation { + 100% { + transform: translateX(-960px); } } + +@keyframes tab-throbber-animation-rtl { + 100% { + transform: translateX(960px); } } + .topsite-form .form-wrapper .custom-image-input-container .loading-animation:dir(rtl) { + animation-name: tab-throbber-animation-rtl; } + .topsite-form .form-wrapper input[type='text'] { + background-color: var(--newtab-textbox-background-color); + border: 1px solid var(--newtab-textbox-border); + margin: 8px 0; + padding: 0 8px; + height: 32px; + width: 100%; + font-size: 15px; } + .topsite-form .form-wrapper input[type='text'][disabled] { + border: 1px solid var(--newtab-textbox-border); + box-shadow: none; + opacity: 0.4; } + .topsite-form .form-wrapper .invalid input[type='text'] { + border: 1px solid #D70022; + box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3); } + .topsite-form .form-wrapper .error-tooltip { + animation: fade-up-tt 450ms; + background: #D70022; + border-radius: 2px; + color: #FFF; + inset-inline-start: 3px; + padding: 5px 12px; + position: absolute; + top: 44px; + z-index: 1; } + .topsite-form .form-wrapper .error-tooltip::before { + background: #D70022; + bottom: -8px; + content: '.'; + height: 16px; + inset-inline-start: 12px; + position: absolute; + text-indent: -999px; + top: -7px; + transform: rotate(45deg); + white-space: nowrap; + width: 16px; + z-index: -1; } + +.topsite-form .actions { + justify-content: flex-end; } + .topsite-form .actions button { + margin-inline-start: 10px; + margin-inline-end: 0; } + +@media (max-width: 610px) { + .topsite-form .fields-and-preview { + flex-direction: column; } + .topsite-form .fields-and-preview .top-site-outer { + margin-inline-start: 0; } } + +.topsite-form .title { + user-select: none; } + +.topsite-form [type='checkbox']:not(:checked), +.topsite-form [type='checkbox']:checked { + inset-inline-start: -9999px; + position: absolute; } + +.topsite-form [type='checkbox']:not(:checked) + label, +.topsite-form [type='checkbox']:checked + label { + cursor: pointer; + display: block; + position: relative; } + +.topsite-form [type='checkbox']:not(:checked) + label::before, +.topsite-form [type='checkbox']:checked + label::before { + background: var(--newtab-background-color); + border: 1px solid var(--newtab-textbox-border); + border-radius: 3px; + content: ''; + height: 21px; + left: -8px; + position: absolute; + top: -8px; + width: 21px; + z-index: 1; } + [dir='rtl'] .topsite-form [type='checkbox']:not(:checked) + label::before, [dir='rtl'] + .topsite-form [type='checkbox']:checked + label::before { + left: auto; + right: -8px; } + +.topsite-form [type='checkbox']:not(:checked) + label::after, +.topsite-form [type='checkbox']:checked + label::after { + background: url("chrome://global/skin/icons/check.svg") no-repeat center center; + content: ''; + height: 21px; + left: -8px; + position: absolute; + top: -8px; + width: 21px; + -moz-context-properties: fill; + fill: var(--newtab-link-primary-color); + z-index: 2; } + [dir='rtl'] .topsite-form [type='checkbox']:not(:checked) + label::after, [dir='rtl'] + .topsite-form [type='checkbox']:checked + label::after { + left: auto; + right: -8px; } + +.topsite-form [type='checkbox']:checked + label .tile { + box-shadow: 0 0 0 2px var(--newtab-link-primary-color); } + +.topsite-form [type='checkbox']:not(:checked) + label::after { + opacity: 0; } + +.topsite-form [type='checkbox']:checked + label::after { + opacity: 1; } + +.topsite-form [type='checkbox']:checked:focus + label::before, +.topsite-form [type='checkbox']:not(:checked):focus + label::before { + border: 1px dotted var(--newtab-link-primary-color); } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-contextmenu-button-color); + background-image: url("chrome://global/skin/icons/more.svg"); + background-position: 55%; + border: 1px solid var(--newtab-border-primary-color); + border-radius: 100%; + box-shadow: 0 2px rgba(12, 12, 13, 0.1); + cursor: pointer; + fill: var(--newtab-icon-primary-color); + height: 27px; + inset-inline-end: -13.5px; + opacity: 0; + position: absolute; + top: -13.5px; + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: 27px; } + .outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button:is(:active, :focus) { + opacity: 1; + transform: scale(1); } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .tile { + height: 96px; + width: 96px; + transition: box-shadow 150ms; } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-icon { + box-shadow: var(--newtab-topsites-icon-shadow); } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .title { + width: 96px; } + .outer-wrapper:not(.newtab-experience) .top-site-outer .title.has-icon span { + padding: 0 13px; } + .outer-wrapper:not(.newtab-experience) .top-site-outer .title .icon { + inset-inline-start: 0; + position: absolute; + top: 0.5em; } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner { + position: relative; } + .outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a { + color: inherit; + display: block; + outline: none; } + .outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .screenshot { + background-color: #FFF; + background-position: top left; + background-size: cover; + border-radius: 4px; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + height: 100%; + opacity: 0; + position: absolute; + top: 0; + left: 0; + transition: opacity 1s; + width: 100%; } + .outer-wrapper:not(.newtab-experience) .top-site-outer .screenshot.active { + opacity: 1; } + +.outer-wrapper:not(.newtab-experience) .top-site-outer .default-icon, +.outer-wrapper:not(.newtab-experience) .top-site-outer .search-topsite { + bottom: -6px; + inset-inline-end: -6px; } + +.outer-wrapper:not(.newtab-experience) .top-site-outer:hover .search-topsite { + background-size: 28px; + border-radius: 46px; + bottom: -9px; + height: 46px; + inset-inline-end: -9px; + width: 46px; } + +.outer-wrapper:not(.newtab-experience) .top-site-outer.placeholder .tile { + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); } + +.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile { + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } + +.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; } + +.outer-wrapper:not(.newtab-experience) .top-sites-list li { + margin: 0 0 8px; } + +.outer-wrapper.newtab-experience .top-site-outer { + width: 120px; + padding-block: 20px 4px; + border-radius: 8px; } + .outer-wrapper.newtab-experience .top-site-outer .context-menu-button { + background-image: url("chrome://global/skin/icons/more.svg"); + border: 0; + border-radius: 4px; + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; } + .outer-wrapper.newtab-experience .top-site-outer .context-menu-button:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); } + .outer-wrapper.newtab-experience .top-site-outer .edit-button { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); } + .outer-wrapper.newtab-experience .top-site-outer .tile { + border-radius: 8px; + box-shadow: 0 3px 8px var(--newtab-inner-box-shadow-color-nte), 0 0 2px var(--newtab-tile-shadow-secondary); + background-color: var(--newtab-topsites-background-color); + justify-content: center; + margin: 0 auto; + height: 80px; + width: 80px; } + .outer-wrapper.newtab-experience .top-site-outer .title { + color: var(--newtab-background-primary-text-color); + padding-top: 8px; + font-size: 12px; } + .outer-wrapper.newtab-experience .top-site-outer .title .icon { + margin-inline-end: 2px; + fill: var(--newtab-background-primary-text-color); } + .outer-wrapper.newtab-experience .top-site-outer .title .sponsored-label { + font-size: 12px; } + .outer-wrapper.newtab-experience .top-site-outer .default-icon, + .outer-wrapper.newtab-experience .top-site-outer .search-topsite { + height: 32px; + width: 32px; } + .outer-wrapper.newtab-experience .top-site-outer .search-topsite { + background-size: 16px; + height: 32px; + width: 32px; } + .outer-wrapper.newtab-experience .top-site-outer.placeholder .tile { + box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); } + +@media (max-width: 610px) { + .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n+1) .context-menu { + margin-inline-end: auto; + margin-inline-start: auto; + inset-inline-end: auto; + inset-inline-start: -32px; } + .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +@media (min-width: 610px) and (max-width: 866px) { + .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +@media (min-width: 610px) and (max-width: 802px) { + .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n+3) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +@media (min-width: 866px) and (max-width: 1250px) { + .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +@media (min-width: 866px) and (max-width: 1058px) { + .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n+5) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +@media (min-width: 1122px) and (max-width: 1506px) { + .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +@media (min-width: 1122px) and (max-width: 1314px) { + .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n+7) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { + background: var(--newtab-topsites-outer-card-hover); } + .outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { + opacity: 1; } + +@keyframes fade-up-tt { + 0% { + opacity: 0; + transform: translateY(15px); } + 100% { + opacity: 1; + transform: translateY(0); } } + +.sections-list .section-list { + display: grid; + grid-gap: 32px; + grid-template-columns: repeat(auto-fit, 224px); + margin: 0; } + @media (max-width: 610px) { + .sections-list .section-list .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 610px) and (max-width: 866px) { + .sections-list .section-list :nth-child(2n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 866px) and (max-width: 1314px) { + .sections-list .section-list :nth-child(3n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + @media (min-width: 1122px) and (max-width: 1570px) { + .sections-list .section-list :nth-child(3n) .context-menu, + .sections-list .section-list :nth-child(4n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + +.sections-list .section-empty-state { + border: 1px solid var(--newtab-border-secondary-color); + border-radius: 3px; + display: flex; + height: 266px; + width: 100%; } + .sections-list .section-empty-state .empty-state { + margin: auto; + max-width: 350px; } + .sections-list .section-empty-state .empty-state .empty-state-icon { + background-position: center; + background-repeat: no-repeat; + background-size: 50px 50px; + -moz-context-properties: fill; + display: block; + fill: var(--newtab-icon-secondary-color); + height: 50px; + margin: 0 auto; + width: 50px; } + .sections-list .section-empty-state .empty-state .empty-state-message { + color: var(--newtab-text-primary-color); + font-size: 13px; + margin-bottom: 0; + text-align: center; } + @media (min-width: 1122px) { + .sections-list .section-empty-state { + height: 370px; } } + +.top-stories-bottom-container { + color: var(--newtab-section-navigation-text-color); + font-size: 12px; + line-height: 1.6; + margin-top: 12px; + display: flex; + justify-content: space-between; } + .top-stories-bottom-container a { + color: var(--newtab-link-secondary-color); + font-weight: bold; } + .top-stories-bottom-container a.more-recommendations { + font-weight: normal; + font-size: 13px; } + @media (max-width: 865px) { + .top-stories-bottom-container .wrapper-topics, + .top-stories-bottom-container .wrapper-cta + .wrapper-more-recommendations { + display: none; } } + @media (max-width: 609px) { + .top-stories-bottom-container .wrapper-cta { + text-align: center; } + .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta { + display: block; + margin-inline-end: 0; } + .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta .pocket-cta-button { + max-width: none; + display: block; + margin-inline-end: 0; + margin: 5px 0 10px; } + .top-stories-bottom-container .wrapper-more-recommendations { + width: 100%; } + .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations { + justify-content: center; } + .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations::after { + display: none; } } + +@media (min-width: 1122px) { + .sections-list .normal-cards .section-list { + grid-template-columns: repeat(auto-fit, 309px); } } + +.topics ul { + margin: 0; + padding: 0; } + @media (min-width: 866px) { + .topics ul { + display: inline; + padding-inline-start: 12px; } } + +.topics ul li { + display: inline-block; } + .topics ul li::after { + content: '•'; + padding: 8px; } + .topics ul li:last-child::after { + content: none; } + +.outer-wrapper.newtab-experience.visible-logo .logo-and-wordmark .wordmark { + fill: var(--newtab-wordmark-color); } + +.outer-wrapper.newtab-experience .search-wrapper { + padding-bottom: 38px; } + .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { + min-height: 52px; + width: 200px; } + @media (min-width: 610px) { + .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { + width: 360px; } } + @media (min-width: 866px) { + .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { + width: 600px; } } + @media (min-width: 1122px) { + .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { + width: 720px; } } + .outer-wrapper.newtab-experience .search-wrapper .search-button:focus { + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); + border: 1px solid var(--newtab-focus-border); + border-radius: 0 8px 8px 0; } + .outer-wrapper.newtab-experience .search-wrapper input:focus { + outline: 0; + border: 1px solid var(--newtab-focus-border); + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } + .outer-wrapper.newtab-experience .search-wrapper.fake-focus .search-handoff-button { + border: 1px solid var(--newtab-focus-border); + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } + .outer-wrapper.newtab-experience .search-wrapper .search-handoff-button, + .outer-wrapper.newtab-experience .search-wrapper input { + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; + background-size: 24px; + padding-inline-start: 52px; + padding-inline-end: 10px; + box-shadow: 0 3px 8px var(--newtab-search-first-shadow), 0 0 2px var(--newtab-search-second-shadow); + border: 1px solid transparent; + border-radius: 8px; + color: var(--newtab-search-text-color); + font-weight: 500; + font-size: 15px; } + .outer-wrapper.newtab-experience .search-wrapper .search-handoff-button { + padding-inline-end: 15px; } + .outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret { + top: 18px; + inset-inline-start: 52px; } + .outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret:dir(rtl) { + background-position-x: right 16px; } + +.search-wrapper { + padding: 34px 0 64px; } + .only-search .search-wrapper { + padding: 0 0 64px; } + .search-wrapper .logo-and-wordmark { + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 48px; } + .search-wrapper .logo-and-wordmark .logo { + background: url("chrome://branding/content/about-logo.png") no-repeat center; + background-size: 82px; + display: inline-block; + height: 82px; + width: 82px; } + @media (min-resolution: 2x) { + .search-wrapper .logo-and-wordmark .logo { + background-image: url("chrome://branding/content/about-logo@2x.png"); } } + .search-wrapper .logo-and-wordmark .wordmark { + background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; + background-size: 134px; + -moz-context-properties: fill; + display: inline-block; + fill: var(--newtab-search-wordmark-color); + height: 82px; + margin-inline-start: 16px; + width: 134px; } + @media (max-width: 609px) { + .search-wrapper .logo-and-wordmark .logo { + background-size: 64px; + height: 64px; + width: 64px; } + .search-wrapper .logo-and-wordmark .wordmark { + background-size: 100px; + height: 64px; + width: 100px; + margin-inline-start: 12px; } } + .search-wrapper .search-inner-wrapper { + cursor: default; + display: flex; + min-height: 48px; + margin: 0 auto; + position: relative; + width: 224px; } + .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { + width: 216px; } + @media (min-width: 610px) { + .search-wrapper .search-inner-wrapper { + width: 480px; } + .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { + width: 460px; } } + @media (min-width: 866px) { + .search-wrapper .search-inner-wrapper { + width: 736px; } + .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { + width: 696px; } } + .search-wrapper input { + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background-size: 24px; + border: solid 1px var(--newtab-search-border-color); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); + font-size: 15px; + -moz-context-properties: fill; + fill: var(--newtab-search-icon-color); + padding: 0; + padding-inline-end: 48px; + padding-inline-start: 46px; + width: 100%; } + .search-wrapper input:dir(rtl) { + background-position-x: right 12px; } + .search-wrapper:hover input { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); } + .search-wrapper .search-inner-wrapper:active input, + .search-wrapper input:focus { + border: 1px solid var(--newtab-textbox-focus-color); + box-shadow: var(--newtab-textbox-focus-boxshadow); } + .search-wrapper .search-button { + background: url("chrome://browser/skin/forward.svg") no-repeat center center; + background-size: 16px 16px; + border: 0; + border-radius: 0 3px 3px 0; + -moz-context-properties: fill; + fill: var(--newtab-search-icon-color); + height: 100%; + inset-inline-end: 0; + position: absolute; + width: 48px; } + .search-wrapper .search-button:focus, .search-wrapper .search-button:hover { + background-color: rgba(12, 12, 13, 0.1); + cursor: pointer; } + .search-wrapper .search-button:active { + background-color: rgba(12, 12, 13, 0.2); } + .search-wrapper .search-button:dir(rtl) { + transform: scaleX(-1); } + +.non-collapsible-section + .below-search-snippet-wrapper { + margin-top: -48px; } + +@media (max-height: 700px) { + .search-wrapper { + padding: 0 0 30px; } + .non-collapsible-section + .below-search-snippet-wrapper { + margin-top: -14px; } + .below-search-snippet-wrapper { + min-height: 0; } } + +.search-handoff-button { + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background-size: 24px; + border: solid 1px var(--newtab-search-border-color); + border-radius: 3px; + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); + cursor: text; + font-size: 15px; + padding: 0; + padding-inline-end: 48px; + padding-inline-start: 46px; + opacity: 1; + transition: opacity 500ms; + width: 100%; } + .search-handoff-button:dir(rtl) { + background-position-x: right 12px; } + .search-handoff-button:hover { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); } + .fake-focus .search-handoff-button { + border: 1px solid var(--newtab-textbox-focus-color); + box-shadow: var(--newtab-textbox-focus-boxshadow); } + .fake-focus .search-handoff-button .fake-caret { + display: block; } + .search-hidden .search-handoff-button { + opacity: 0; + visibility: hidden; } + .search-handoff-button .fake-editable:focus { + outline: none; + caret-color: transparent; } + .search-handoff-button .fake-editable { + color: transparent; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .search-handoff-button .fake-textbox { + opacity: 0.54; + text-align: start; } + .search-handoff-button .fake-caret { + animation: caret-animation 1.3s steps(5, start) infinite; + background: var(--newtab-text-primary-color); + display: none; + inset-inline-start: 47px; + height: 17px; + position: absolute; + top: 16px; + width: 1px; } + +@keyframes caret-animation { + to { + visibility: hidden; } } + +@media (min-height: 701px) { + body:not(.inline-onboarding) .fixed-search main { + padding-top: 146px; } + body:not(.inline-onboarding) .fixed-search.visible-logo main { + padding-top: 276px; } + body:not(.inline-onboarding) .fixed-search .search-wrapper { + border-bottom: solid 1px var(--newtab-border-secondary-color); + padding: 30px 0; + background-color: var(--newtab-search-header-background-color); + min-height: 95px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 9; } + body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper { + min-height: 35px; } + body:not(.inline-onboarding) .fixed-search .search-wrapper input { + background-position-x: 16px; + background-size: 16px; } + body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) { + background-position-x: right 16px; } + body:not(.inline-onboarding) .fixed-search .search-wrapper .search-handoff-button .fake-caret { + top: 14px; } + body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark { + display: none; } + body:not(.inline-onboarding) .fixed-search.newtab-experience main { + padding-top: 124px; } + body:not(.inline-onboarding) .fixed-search.newtab-experience.visible-logo main { + padding-top: 254px; } + body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper { + border-bottom: solid 1px var(--newtab-seperator-line-color); + padding: 27px 0; } + body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper .search-inner-wrapper { + min-height: 45px; } + body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input { + background-position-x: 16px; + background-size: 24px; } + body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input:dir(rtl) { + background-position-x: right 16px; } + body:not(.inline-onboarding) .fixed-search .search-handoff-button { + background-position-x: 12px; + background-size: 24px; } + body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) { + background-position-x: right 12px; } + body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret { + top: 10px; } } + +.contentSearchSuggestionTable { + background-color: var(--newtab-search-dropdown-color); + border: 0; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); + transform: translateY(4px); } + .contentSearchSuggestionTable .contentSearchHeader { + background-color: var(--newtab-search-dropdown-header-color); + color: var(--newtab-text-secondary-color); } + .contentSearchSuggestionTable .contentSearchHeader, + .contentSearchSuggestionTable .contentSearchSettingsButton { + border-color: var(--newtab-border-secondary-color); } + .contentSearchSuggestionTable .contentSearchSuggestionsList { + border: 0; } + .contentSearchSuggestionTable .contentSearchOneOffsTable { + background-color: var(--newtab-search-dropdown-header-color); + border-top: solid 1px var(--newtab-border-secondary-color); } + .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText { + color: var(--newtab-text-primary-color); } + .contentSearchSuggestionTable .contentSearchSuggestionsContainer { + background-color: var(--newtab-search-dropdown-color); } + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected { + background: var(--newtab-element-hover-color); + color: var(--newtab-text-primary-color); } + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active { + background: var(--newtab-element-active-color); } + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { + fill: var(--newtab-icon-secondary-color); } + .contentSearchSuggestionTable .contentSearchOneOffsTable .contentSearchSuggestionsContainer { + background-color: var(--newtab-search-dropdown-header-color); } + .contentSearchSuggestionTable .contentSearchOneOffItem { + background-image: none; + border-image: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; + border-inline-end: 1px solid; + position: relative; } + .contentSearchSuggestionTable .contentSearchOneOffItem.selected { + background: var(--newtab-element-hover-color); } + .contentSearchSuggestionTable .contentSearchOneOffItem:active { + background: var(--newtab-element-active-color); } + .contentSearchSuggestionTable .contentSearchSettingsButton:hover { + background: var(--newtab-element-hover-color); + color: var(--newtab-text-primary-color); } + +.contentSearchHeaderRow > td > img, +.contentSearchSuggestionRow > td > .historyIcon { + margin-inline-start: 7px; + margin-inline-end: 15px; } + +.context-menu { + background: var(--newtab-contextmenu-background-color); + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); + display: block; + font-size: 14px; + margin-inline-start: 5px; + inset-inline-start: 100%; + position: absolute; + top: 6.75px; + z-index: 8; } + .context-menu > ul { + list-style: none; + margin: 0; + padding: 5px 0; } + .context-menu > ul > li { + margin: 0; + width: 100%; } + .context-menu > ul > li.separator { + border-bottom: 1px solid var(--newtab-border-secondary-color); + margin: 5px 0; } + .context-menu > ul > li > a, + .context-menu > ul > li > button { + align-items: center; + color: inherit; + cursor: pointer; + display: flex; + width: 100%; + line-height: 16px; + outline: none; + border: 0; + padding: 3px 12px; + white-space: nowrap; } + .context-menu > ul > li > a:is(:focus, :hover), + .context-menu > ul > li > button:is(:focus, :hover) { + background: var(--newtab-element-hover-color); } + .context-menu > ul > li > a:active, + .context-menu > ul > li > button:active { + background: var(--newtab-element-active-color); } + .context-menu > ul > li > a.disabled, + .context-menu > ul > li > button.disabled { + opacity: 0.4; + pointer-events: none; } + +.confirmation-dialog .modal { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); + left: 0; + margin: auto; + position: fixed; + right: 0; + top: 20%; + width: 400px; } + +.confirmation-dialog section { + margin: 0; } + +.confirmation-dialog .modal-message { + display: flex; + padding: 16px; + padding-bottom: 0; } + .confirmation-dialog .modal-message p { + margin: 0; + margin-bottom: 16px; } + +.confirmation-dialog .actions { + border: 0; + display: flex; + flex-wrap: nowrap; + padding: 0 16px; } + .confirmation-dialog .actions button { + margin-inline-end: 16px; + padding-inline-end: 18px; + padding-inline-start: 18px; + white-space: normal; + width: 50%; } + .confirmation-dialog .actions button.done { + margin-inline-end: 0; + margin-inline-start: 0; } + +.confirmation-dialog .icon { + margin-inline-end: 16px; } + +.modal-overlay { + background: var(--newtab-overlay-color); + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 11001; } + +.modal { + background: var(--newtab-modal-color); + border: 1px solid var(--newtab-border-secondary-color); + border-radius: 5px; + font-size: 15px; + z-index: 11002; } + +.customize-menu { + color: var(--customize-menu-primary-text-color); + background-color: var(--customize-menu-background); + width: 432px; + height: 100%; + position: fixed; + inset-block: 0; + inset-inline-end: 0; + z-index: 1001; + padding: 16px; + transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96); + overflow: auto; + transform: translateX(435px); + visibility: hidden; + cursor: default; } + .customize-menu:dir(rtl) { + transform: translateX(-435px); } + .customize-menu.customize-animate-enter-done { + transform: translateX(0); } + .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active, .customize-menu.customize-animate-enter { + box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow); + transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 1ms; + visibility: visible; } + .customize-menu.customize-animate-exit-active, .customize-menu.customize-animate-exit { + box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow); + transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 1ms 250ms; + visibility: visible; } + .customize-menu.customize-animate-exit-done { + transform: translateX(435px); + transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 1ms 250ms; } + .customize-menu.customize-animate-exit-done:dir(rtl) { + transform: translateX(-435px); } + .customize-menu .close-button { + margin-inline-start: auto; + margin-bottom: 28px; + white-space: nowrap; + display: block; + background-color: var(--customize-menu-secondary-action-background); + padding: 8px 10px; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + color: var(--customize-menu-primary-text-color); + font-size: 13px; + font-weight: 600; } + .customize-menu .close-button:hover { + background-color: var(--customize-menu-secondary-action-background-hover); } + .customize-menu .close-button:hover:active { + background-color: var(--customize-menu-secondary-action-background-active); } + +.grid-skip { + display: contents; } + +.home-section { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, auto); + grid-row-gap: 32px; + padding: 0 16px; } + .home-section .section { + display: grid; + grid-template-rows: auto; + grid-template-columns: auto 26px; } + .home-section .section > div { + grid-area: 1; } + .home-section .section .title { + grid-column: 1 / -1; + margin: 0; + font-weight: 600; + font-size: 16px; + margin-bottom: 10px; } + .home-section .section .subtitle { + margin: 0; + font-size: 14px; } + .home-section .section .sponsored { + font-size: 14px; + margin-inline-start: 5px; } + .home-section .section .check-wrapper { + position: relative; } + .home-section .section .sponsored-checkbox { + margin-inline-start: 2px; + width: 16px; + height: 16px; + vertical-align: middle; + border: 1px solid rgba(0, 0, 0, 0.15); + box-sizing: border-box; + border-radius: 4px; + appearance: none; + background-color: var(--newtab-primary-action-background-off); } + .home-section .section .sponsored-checkbox:checked { + -moz-context-properties: fill; + fill: var(--customize-menu-check-fill); + background: url("chrome://global/skin/icons/check.svg") center no-repeat; + background-color: var(--newtab-primary-action-background); + background-size: 10px; } + .home-section .section .sponsored-checkbox:active + .checkmark { + fill: rgba(0, 0, 0, 0.15); } + .home-section .section .selector { + color: var(--customize-menu-primary-text-color); + width: 118px; + display: block; + border: 1px solid var(--customize-menu-line-color); + border-radius: 4px; + appearance: none; + padding-block: 7px; + padding-inline: 10px 13px; + margin-inline-start: 2px; + -moz-context-properties: fill; + fill: var(--customize-menu-primary-text-color); + background: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg") right no-repeat; + background-size: 8px; + background-origin: content-box; + background-color: var(--customize-menu-background); } + .home-section .section .selector:dir(rtl) { + background-position-x: left; } + .home-section .section .switch { + position: relative; + display: inline-block; + width: 26px; + height: 16px; + grid-column: 2; + margin-top: 2px; } + .home-section .section .switch input { + opacity: 0; + width: 0; + height: 0; } + .home-section .section .slider { + position: absolute; + inset: 0; + transition: transform 250ms; + border-radius: 13px; + border: 1px solid rgba(0, 0, 0, 0.15); + background-color: var(--newtab-primary-action-background-off); } + .home-section .section .slider::before { + position: absolute; + content: ''; + height: 8px; + width: 8px; + inset-inline-start: 3px; + bottom: 3px; + background-color: var(--customize-menu-primary-action-text); + transition: transform 250ms; + border-radius: 50%; + outline: 1px solid rgba(0, 0, 0, 0.15); + -moz-outline-radius: 11px; } + .home-section .section .switch input:focus-visible + .slider { + border: 1px solid var(--newtab-focus-border-selected); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } + .home-section .section .switch input:not(:checked):focus-visible + .slider { + border: 1px solid var(--newtab-focus-border); } + .home-section .section input:checked + .slider { + background-color: var(--newtab-primary-action-background); } + .home-section .section input:checked + .slider::before { + transform: translateX(10px); } + .home-section .section input:checked + .slider:dir(rtl)::before { + transform: translateX(-10px); } + .home-section .section .more-info-top-wrapper, + .home-section .section .more-info-pocket-wrapper { + margin-inline-start: -2px; + overflow: hidden; + transition: max-height 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); } + .home-section .section .more-info-top-wrapper.shrink, + .home-section .section .more-info-pocket-wrapper.shrink { + max-height: 0; } + .home-section .section .more-info-top-wrapper .more-information, + .home-section .section .more-info-pocket-wrapper .more-information { + padding-top: 12px; + position: relative; + transition: top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); } + .home-section .section .more-info-top-wrapper .more-information.expand, + .home-section .section .more-info-pocket-wrapper .more-information.expand { + top: 0; } + .home-section .section .more-info-top-wrapper { + max-height: 78px; } + .home-section .section .more-info-top-wrapper .more-information { + top: -77px; } + .home-section .section .more-info-top-wrapper .check-wrapper { + margin-top: 10px; } + .home-section .section .more-info-pocket-wrapper { + max-height: 35px; } + .home-section .section .more-info-pocket-wrapper .more-information { + top: -35px; } + .home-section .divider { + border-top: 1px var(--customize-menu-seperator-line-color) solid; + margin: 0 -16px; } + .home-section .external-link { + font-size: 14px; + cursor: pointer; + border: 1px solid transparent; + border-radius: 4px; + -moz-context-properties: fill; + fill: var(--customize-menu-primary-text-color); + background: url("chrome://global/skin/icons/settings.svg") left no-repeat; + background-size: 16px; + padding-inline-start: 21px; + margin-bottom: 20px; } + .home-section .external-link:dir(rtl) { + background-position-x: right; } + .home-section .external-link:hover { + text-decoration: underline; } + +.home-section .section .sponsored-checkbox:focus-visible, +.selector:focus-visible, +.external-link:focus-visible, +.close-button:focus-visible { + border: 1px solid var(--newtab-focus-border); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } + +.outer-wrapper.newtab-experience .card-outer { + border-radius: 8px; } + .outer-wrapper.newtab-experience .card-outer:is(:focus):not(.placeholder) { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; } + .outer-wrapper.newtab-experience .card-outer:hover { + box-shadow: none; + transition: none; } + .outer-wrapper.newtab-experience .card-outer .card { + box-shadow: 0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow); + border-radius: 8px; } + .outer-wrapper.newtab-experience .card-outer .card-preview-image-outer { + border-radius: 8px 8px 0 0; } + .outer-wrapper.newtab-experience .card-outer .context-menu-button:is(:active, :focus) { + outline: 0; + fill: var(--newtab-primary-action-background); + border: 1px solid var(--newtab-primary-action-background); } + .outer-wrapper.newtab-experience .card-outer > a:is(:focus) .card { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } + +.outer-wrapper:not(.newtab-experience) .card-outer:is(:hover, :focus, .active):not(.placeholder) { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } + +.card-outer { + background: var(--newtab-card-background-color); + border-radius: 3px; + display: inline-block; + height: 266px; + margin-inline-end: 32px; + position: relative; + width: 100%; } + .card-outer .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-contextmenu-button-color); + background-image: url("chrome://global/skin/icons/more.svg"); + background-position: 55%; + border: 1px solid var(--newtab-border-primary-color); + border-radius: 100%; + box-shadow: 0 2px rgba(12, 12, 13, 0.1); + cursor: pointer; + fill: var(--newtab-icon-primary-color); + height: 27px; + inset-inline-end: -13.5px; + opacity: 0; + position: absolute; + top: -13.5px; + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: 27px; } + .card-outer .context-menu-button:is(:active, :focus) { + opacity: 1; + transform: scale(1); } + .card-outer.placeholder { + background: transparent; } + .card-outer.placeholder .card { + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); } + .card-outer.placeholder .card-preview-image-outer, + .card-outer.placeholder .card-context { + display: none; } + .card-outer .card { + border-radius: 3px; + box-shadow: var(--newtab-card-shadow); + height: 100%; } + .card-outer > a { + color: inherit; + display: block; + height: 100%; + outline: none; + position: absolute; + width: 100%; } + .card-outer > a:is(.active, :focus) .card { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } + .card-outer > a:is(.active, :focus) .card-title { + color: var(--newtab-link-primary-color); } + .card-outer:is(:hover, :focus, .active):not(.placeholder) { + outline: none; } + .card-outer:is(:hover, :focus, .active):not(.placeholder) .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; } + .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title { + color: var(--newtab-link-primary-color); } + .card-outer:is(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name { + display: none; } + .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate { + display: block; } + .card-outer .card-preview-image-outer { + background-color: #D7D7DB; + border-radius: 3px 3px 0 0; + height: 122px; + overflow: hidden; + position: relative; } + [lwt-newtab-brighttext] .card-outer .card-preview-image-outer { + background-color: #4A4A4F; } + .card-outer .card-preview-image-outer::after { + border-bottom: 1px solid var(--newtab-card-hairline-color); + bottom: 0; + content: ''; + position: absolute; + width: 100%; } + .card-outer .card-preview-image-outer .card-preview-image { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 100%; + opacity: 0; + transition: opacity 1s cubic-bezier(0.07, 0.95, 0, 1); + width: 100%; } + .card-outer .card-preview-image-outer .card-preview-image.loaded { + opacity: 1; } + .card-outer .card-details { + padding: 15px 16px 12px; } + .card-outer .card-text { + max-height: 78px; + overflow: hidden; } + .card-outer .card-text.no-host-name, .card-outer .card-text.no-context { + max-height: 97px; } + .card-outer .card-text.no-host-name.no-context { + max-height: 116px; } + .card-outer .card-text:not(.no-description) .card-title { + max-height: 57px; + overflow: hidden; } + .card-outer .card-host-name { + color: var(--newtab-text-secondary-color); + font-size: 10px; + overflow: hidden; + padding-bottom: 4px; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; } + .card-outer .card-host-name.alternate { + display: none; } + .card-outer .card-title { + font-size: 14px; + font-weight: 600; + line-height: 19px; + margin: 0 0 2px; + word-wrap: break-word; } + .card-outer .card-description { + font-size: 12px; + line-height: 19px; + margin: 0; + overflow: hidden; + word-wrap: break-word; } + .card-outer .card-context { + bottom: 0; + color: var(--newtab-text-secondary-color); + display: flex; + font-size: 11px; + inset-inline-start: 0; + padding: 9px 16px 9px 14px; + position: absolute; } + .card-outer .card-context-icon { + fill: var(--newtab-text-secondary-color); + height: 22px; + margin-inline-end: 6px; } + .card-outer .card-context-label { + flex-grow: 1; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +@media (min-width: 1122px) { + .normal-cards .card-outer { + height: 370px; } + .normal-cards .card-outer .card-preview-image-outer { + height: 155px; } + .normal-cards .card-outer .card-details { + padding: 13px 16px 12px; } + .normal-cards .card-outer .card-text { + max-height: 140px; } + .normal-cards .card-outer .card-host-name { + font-size: 12px; + padding-bottom: 5px; } + .normal-cards .card-outer .card-title { + font-size: 17px; + line-height: 23px; + margin-bottom: 0; } + .normal-cards .card-outer .card-text:not(.no-description) .card-title { + max-height: 69px; } + .normal-cards .card-outer .card-description { + font-size: 15px; + line-height: 23px; } + .normal-cards .card-outer .card-context { + bottom: 4px; + font-size: 14px; } } + +.compact-cards .card-outer { + height: 160px; } + .compact-cards .card-outer .card-preview-image-outer { + height: 108px; } + .compact-cards .card-outer .card-details { + padding: 12px 16px; } + .compact-cards .card-outer .card-host-name { + line-height: 10px; } + .compact-cards .card-outer .card-text .card-title, + .compact-cards .card-outer .card-text:not(.no-description) .card-title { + font-size: 12px; + line-height: 13px; + max-height: 17px; + overflow: hidden; + padding: 0 0 4px; + text-overflow: ellipsis; + white-space: nowrap; } + .compact-cards .card-outer .card-description { + display: none; } + .compact-cards .card-outer .card-context { + background-color: var(--newtab-card-background-color); + border-radius: 16px; + clip-path: inset(-1px -1px 4px); + height: 32px; + width: 32px; + padding: 8px; + top: 91px; + inset-inline-end: 12px; + inset-inline-start: auto; } + .compact-cards .card-outer .card-context::after { + border: 1px solid var(--newtab-card-hairline-color); + border-bottom: 0; + border-radius: 17px 17px 0 0; + content: ''; + position: absolute; + height: 17px; + width: 34px; + top: -1px; + left: -1px; } + .compact-cards .card-outer .card-context .card-context-icon { + margin-inline-end: 0; + height: 16px; + width: 16px; } + .compact-cards .card-outer .card-context .card-context-icon.icon-bookmark-added { + fill: #0A84FF; } + .compact-cards .card-outer .card-context .card-context-icon.icon-download { + fill: #12BC00; } + .compact-cards .card-outer .card-context .card-context-icon.icon-pocket { + fill: #D70022; } + .compact-cards .card-outer .card-context .card-context-label { + display: none; } + +@media not all and (min-width: 1122px) { + .compact-cards .hide-for-narrow { + display: none; } } + +.outer-wrapper.newtab-experience .collapsible-section[data-section-id='topsites'] .section-top-bar { + display: none; } + +.outer-wrapper.newtab-experience .collapsible-section .click-target-container .click-target span { + cursor: default; + font-weight: 600; + font-size: 17px; + color: var(--newtab-background-primary-text-color); } + +.outer-wrapper:not(.newtab-experience) .collapsible-section .section-title span { + vertical-align: middle; } + +.collapsible-section { + padding: 10px 25px; + transition-delay: 100ms; + transition-duration: 100ms; + transition-property: background-color; } + .collapsible-section .section-title { + font-size: 13px; + font-weight: bold; + margin: 0; } + .collapsible-section .section-title.grey-title, + .collapsible-section .section-title span { + color: var(--newtab-section-header-text-color); + display: inline-block; + fill: var(--newtab-section-header-text-color); } + .collapsible-section .section-title.grey-title { + vertical-align: middle; } + .collapsible-section .section-title .click-target-container { + vertical-align: top; } + @media (max-width: 609px) { + .collapsible-section .section-title .click-target-container { + display: block; } + .collapsible-section .section-title .click-target-container .learn-more-link-wrapper { + display: block; + text-align: center; } + .collapsible-section .section-title .click-target-container .learn-more-link-wrapper .learn-more-link { + margin-inline-start: 0; } } + .collapsible-section .section-title .click-target-container .click-target { + white-space: nowrap; + cursor: pointer; } + .collapsible-section .section-title .collapsible-arrow { + margin-inline-start: 8px; + margin-top: -1px; } + .collapsible-section .section-top-bar { + min-height: 19px; + margin-bottom: 13px; + position: relative; } + .collapsible-section .section-top-bar .context-menu-button { + background: url("chrome://global/skin/icons/more.svg") no-repeat right center; + border: 0; + cursor: pointer; + fill: var(--newtab-section-header-text-color); + height: 100%; + inset-inline-end: 0; + opacity: 0; + position: absolute; + top: 0; + transition-duration: 200ms; + transition-property: opacity; + width: 27px; } + .collapsible-section .section-top-bar .context-menu-button:is(:active, :focus, :hover) { + fill: var(--newtab-section-header-text-color); + opacity: 1; } + .collapsible-section .section-top-bar .context-menu { + top: 16px; } + @media (max-width: 1458px) { + .collapsible-section .section-top-bar .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } } + .collapsible-section:hover .section-top-bar .context-menu-button, .collapsible-section.active .section-top-bar .context-menu-button { + opacity: 1; } + .collapsible-section.active { + background: var(--newtab-element-hover-color); + border-radius: 4px; } + .collapsible-section.active .section-top-bar .context-menu-button { + fill: var(--newtab-section-active-contextmenu-color); } + .collapsible-section .learn-more-link { + font-size: 11px; + margin-inline-start: 12px; } + .collapsible-section .learn-more-link a { + color: var(--newtab-link-secondary-color); } + .collapsible-section .section-body-fallback { + height: 266px; } + .collapsible-section .section-body { + margin: 0 -7px; + padding: 0 7px; } + .collapsible-section .section-body.animating { + overflow: hidden; + pointer-events: none; } + .collapsible-section.animation-enabled .section-title .collapsible-arrow { + transition: transform 0.5s cubic-bezier(0.07, 0.95, 0, 1); } + .collapsible-section.animation-enabled .section-body { + transition: max-height 0.5s cubic-bezier(0.07, 0.95, 0, 1); } + .collapsible-section.collapsed .section-body { + max-height: 0; + overflow: hidden; } + @media (min-width: 610px) and (max-width: 865px) { + .collapsible-section[data-section-id='topstories'] .card-outer:first-child { + display: none; } } + +.asrouter-toggle { + position: fixed; + top: 50px; + inset-inline-end: 15px; + border: 0; + background: none; + z-index: 1; + border-radius: 2px; } + .asrouter-toggle .icon-devtools { + background-image: url("chrome://browser/skin/developer.svg"); + padding: 15px; } + .asrouter-toggle:dir(rtl) { + transform: scaleX(-1); } + .asrouter-toggle:hover { + background: var(--newtab-element-hover-color); } + .asrouter-toggle.expanded { + background: rgba(0, 0, 0, 0.2); } + +.asrouter-admin { + position: fixed; + top: 0; + inset-inline-start: 0; + width: 100%; + background: var(--newtab-background-color); + height: 100%; + overflow-y: scroll; + margin: 0 auto; + font-size: 14px; + padding-inline-start: 240px; + color: var(--newtab-text-primary-color); } + .asrouter-admin.collapsed { + display: none; } + .asrouter-admin .sidebar { + inset-inline-start: 0; + position: fixed; + width: 240px; + padding: 30px 20px; } + .asrouter-admin .sidebar ul { + margin: 0; + padding: 0; + list-style: none; } + .asrouter-admin .sidebar li a { + padding: 10px 34px; + display: block; + color: var(--lwt-sidebar-text-color); } + .asrouter-admin .sidebar li a:hover { + background: var(--newtab-textbox-background-color); } + .asrouter-admin h1 { + font-weight: 200; + font-size: 32px; } + .asrouter-admin h2 .button, + .asrouter-admin p .button { + font-size: 14px; + padding: 6px 12px; + margin-inline-start: 5px; + margin-bottom: 0; } + .asrouter-admin .general-textarea { + direction: ltr; + width: 740px; + height: 500px; + overflow: auto; + resize: none; + border-radius: 4px; + display: flex; } + .asrouter-admin .wnp-textarea { + direction: ltr; + width: 740px; + height: 500px; + overflow: auto; + resize: none; + border-radius: 4px; + display: flex; } + .asrouter-admin .json-button { + display: inline-flex; + font-size: 10px; + padding: 4px 10px; + margin-bottom: 6px; + margin-inline-end: 4px; } + .asrouter-admin .json-button:hover { + background-color: rgba(237, 237, 240, 0.6); + box-shadow: none; } + .asrouter-admin table { + border-collapse: collapse; + width: 100%; } + .asrouter-admin table.minimal-table { + border-collapse: collapse; + border: 1px solid var(--newtab-border-secondary-color); } + .asrouter-admin table.minimal-table td { + padding: 8px; } + .asrouter-admin table.minimal-table td:first-child { + width: 1%; + white-space: nowrap; } + .asrouter-admin table.minimal-table td:not(:first-child) { + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; } + .asrouter-admin table.errorReporting tr { + border: 1px solid var(--newtab-textbox-background-color); } + .asrouter-admin table.errorReporting td { + padding: 4px; } + .asrouter-admin table.errorReporting td[rowspan] { + border: 1px solid var(--newtab-textbox-background-color); } + .asrouter-admin .sourceLabel { + background: var(--newtab-textbox-background-color); + padding: 2px 5px; + border-radius: 3px; } + .asrouter-admin .sourceLabel.isDisabled { + background: rgba(215, 0, 34, 0.3); + color: #D70022; } + .asrouter-admin .message-item:first-child td { + border-top: 1px solid var(--newtab-border-secondary-color); } + .asrouter-admin .message-item td { + vertical-align: top; + padding: 8px; + border-bottom: 1px solid var(--newtab-border-secondary-color); } + .asrouter-admin .message-item td.min { + width: 1%; + white-space: nowrap; } + .asrouter-admin .message-item td.message-summary { + width: 60%; } + .asrouter-admin .message-item td.button-column { + width: 15%; } + .asrouter-admin .message-item td:first-child { + border-inline-start: 1px solid var(--newtab-border-secondary-color); } + .asrouter-admin .message-item td:last-child { + border-inline-end: 1px solid var(--newtab-border-secondary-color); } + .asrouter-admin .message-item.blocked .message-id, + .asrouter-admin .message-item.blocked .message-summary { + opacity: 0.5; } + .asrouter-admin .message-item.blocked .message-id { + opacity: 0.5; } + .asrouter-admin .message-item .message-id { + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; + font-size: 12px; } + .asrouter-admin .providerUrl { + font-size: 12px; } + .asrouter-admin pre { + background: var(--newtab-textbox-background-color); + margin: 0; + padding: 8px; + font-size: 12px; + max-width: 750px; + overflow: auto; + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; } + .asrouter-admin .errorState { + border: 1px solid #D70022; } + .asrouter-admin .helpLink { + padding: 10px; + display: flex; + background: rgba(0, 0, 0, 0.1); + border-radius: 3px; } + .asrouter-admin .helpLink a { + text-decoration: underline; } + .asrouter-admin .ds-component { + margin-bottom: 20px; } + .asrouter-admin .modalOverlayInner { + height: 80%; } + .asrouter-admin .clearButton { + border: 0; + padding: 4px; + border-radius: 4px; + display: flex; } + .asrouter-admin .clearButton:hover { + background: var(--newtab-element-hover-color); } + .asrouter-admin .collapsed { + display: none; } + .asrouter-admin .icon { + display: inline-table; + cursor: pointer; + width: 18px; + height: 18px; } + +.pocket-logged-in-cta { + font-size: 13px; + margin-inline-end: 20px; + display: flex; + align-items: flex-start; } + .pocket-logged-in-cta .pocket-cta-button { + white-space: nowrap; + background: #0060DF; + letter-spacing: -0.34px; + color: #FFF; + border-radius: 4px; + cursor: pointer; + max-width: 130px; + margin-top: -1px; + min-height: 18px; + padding: 0 8px; + display: inline-flex; + justify-content: center; + align-items: center; + font-size: 11px; + margin-inline-end: 10px; } + .pocket-logged-in-cta .cta-text { + font-weight: normal; + font-size: 13px; + line-height: 1.230769231; } + .pocket-logged-in-cta .pocket-cta-button, + .pocket-logged-in-cta .cta-text { + vertical-align: top; } + +.more-recommendations { + display: flex; + align-items: center; + white-space: nowrap; + line-height: 1.230769231; } + .more-recommendations::after { + background: url("chrome://activity-stream/content/data/content/assets/topic-show-more-12.svg") no-repeat center center; + content: ''; + -moz-context-properties: fill; + display: inline-block; + fill: var(--newtab-link-secondary-color); + height: 16px; + margin-inline-start: 5px; + vertical-align: top; + width: 12px; } + .more-recommendations:dir(rtl)::after { + transform: scaleX(-1); } + +.discovery-stream.ds-layout { + --gridColumnGap: 48px; + --gridRowGap: 24px; + grid-template-columns: repeat(12, 1fr); + grid-column-gap: var(--gridColumnGap); + grid-row-gap: var(--gridRowGap); + margin: 0 auto; } + .discovery-stream.ds-layout .ds-column-12 { + grid-column-start: auto; + grid-column-end: span 12; } + .discovery-stream.ds-layout .ds-column-11 { + grid-column-start: auto; + grid-column-end: span 11; } + .discovery-stream.ds-layout .ds-column-10 { + grid-column-start: auto; + grid-column-end: span 10; } + .discovery-stream.ds-layout .ds-column-9 { + grid-column-start: auto; + grid-column-end: span 9; } + .discovery-stream.ds-layout .ds-column-8 { + grid-column-start: auto; + grid-column-end: span 8; } + .discovery-stream.ds-layout .ds-column-7 { + grid-column-start: auto; + grid-column-end: span 7; } + .discovery-stream.ds-layout .ds-column-6 { + grid-column-start: auto; + grid-column-end: span 6; } + .discovery-stream.ds-layout .ds-column-5 { + grid-column-start: auto; + grid-column-end: span 5; } + .discovery-stream.ds-layout .ds-column-4 { + grid-column-start: auto; + grid-column-end: span 4; } + .discovery-stream.ds-layout .ds-column-3 { + grid-column-start: auto; + grid-column-end: span 3; } + .discovery-stream.ds-layout .ds-column-2 { + grid-column-start: auto; + grid-column-end: span 2; } + .discovery-stream.ds-layout .ds-column-1 { + grid-column-start: auto; + grid-column-end: span 1; } + .discovery-stream.ds-layout .ds-column-grid { + display: grid; + grid-row-gap: var(--gridRowGap); } + .discovery-stream.ds-layout .ds-column-grid > div:empty { + display: none; } + +.ds-header { + margin: 8px 0; } + .ds-header .ds-context { + font-weight: 400; } + +.ds-header, +.ds-layout .section-title span { + color: #737373; + font-size: 13px; + font-weight: 600; + line-height: 20px; } + [lwt-newtab-brighttext] .ds-header, [lwt-newtab-brighttext] + .ds-layout .section-title span { + color: #D7D7DB; } + .ds-header .icon, + .ds-layout .section-title span .icon { + fill: var(--newtab-text-secondary-color); } + +.collapsible-section.ds-layout { + margin: auto; } + .collapsible-section.ds-layout .section-top-bar .learn-more-link a { + color: var(--newtab-link-primary-color); + font-weight: normal; } + .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { + text-decoration: underline; } + +.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { + border-radius: 8px; + box-shadow: 0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow); } + .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { + border-radius: 8px 8px 0 0; } + +.outer-wrapper.newtab-experience .ds-card-grid .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; + border-radius: 8px; } + +.ds-card-grid { + display: grid; + grid-gap: 24px; } + .ds-card-grid .ds-card { + background: #FFF; + border-radius: 4px; } + [lwt-newtab-brighttext] .ds-card-grid .ds-card { + background: none; } + @media (min-width: 866px) { + .ds-column-12 .ds-card-grid.ds-card-grid-hero { + grid-template-columns: repeat(12, 1fr); } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(1) { + grid-column-start: 1; + grid-column-end: span 6; + grid-row-start: 1; + grid-row-end: span 2; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(1) .excerpt { + -webkit-line-clamp: 4; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(2), + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(4) { + grid-column-start: 7; + grid-column-end: span 3; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(3), + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(5) { + grid-column-start: 10; + grid-column-end: span 3; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .excerpt { + display: none; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .meta { + padding: 8px; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .meta .title { + font-size: 13px; + line-height: 19px; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .meta .story-sponsored-label { + -webkit-line-clamp: none; + line-height: 19px; } + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+6) { + grid-column-start: auto; + grid-column-end: span 4; } } + @media (min-width: 1122px) { + .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) { + min-height: 222px; } } + .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); } + [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { + box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1); + background: #38383D; } + .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { + border-radius: 4px 4px 0 0; } + .ds-card-grid.ds-card-grid-no-border .ds-card { + background: none; } + .ds-card-grid.ds-card-grid-no-border .ds-card .meta { + padding: 12px 0; } + .ds-column-5 .ds-card-grid, + .ds-column-6 .ds-card-grid, + .ds-column-7 .ds-card-grid, + .ds-column-8 .ds-card-grid { + grid-template-columns: repeat(2, 1fr); } + .ds-column-9 .ds-card-grid, + .ds-column-10 .ds-card-grid, + .ds-column-11 .ds-card-grid, + .ds-column-12 .ds-card-grid { + grid-template-columns: repeat(1, 1fr); } + @media (min-width: 610px) { + .ds-column-9 .ds-card-grid, + .ds-column-10 .ds-card-grid, + .ds-column-11 .ds-card-grid, + .ds-column-12 .ds-card-grid { + grid-template-columns: repeat(2, 1fr); } } + @media (min-width: 866px) { + .ds-column-9 .ds-card-grid, + .ds-column-10 .ds-card-grid, + .ds-column-11 .ds-card-grid, + .ds-column-12 .ds-card-grid { + grid-template-columns: repeat(3, 1fr); } } + .ds-column-9 .ds-card-grid .title, + .ds-column-10 .ds-card-grid .title, + .ds-column-11 .ds-card-grid .title, + .ds-column-12 .ds-card-grid .title { + font-size: 17px; + line-height: 24px; } + .ds-column-9 .ds-card-grid .excerpt, + .ds-column-10 .ds-card-grid .excerpt, + .ds-column-11 .ds-card-grid .excerpt, + .ds-column-12 .ds-card-grid .excerpt { + font-size: 15px; + -webkit-line-clamp: 3; + line-height: 24px; } + .ds-card-grid.empty { + grid-template-columns: auto; } + +.ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button { + margin: 15px 0 0; + inset-inline-end: 25px; } + +.ds-dismiss.ds-dismiss-ds-collection.hovering { + background: var(--newtab-element-hover-color); } + +.ds-collection-card-grid { + padding: 10px 25px 25px; + margin: 0 0 20px; } + .ds-collection-card-grid .story-footer { + display: none; } + .ds-collection-card-grid .ds-header { + padding: 0 40px 0 0; + margin-bottom: 12px; } + .ds-collection-card-grid .ds-header .title { + color: #0C0C0D; + font-weight: 600; + font-size: 17px; + line-height: 24px; } + [lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .title { + color: #D7D7DB; } + .ds-collection-card-grid .ds-header .ds-context { + color: #737373; + font-weight: normal; + font-size: 13px; + line-height: 24px; } + [lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .ds-context { + color: #B1B1B3; } + +.ds-hero { + position: relative; } + .ds-hero header { + font-weight: 600; } + .ds-hero p { + line-height: 1.538; + margin: 8px 0; } + .ds-hero .excerpt { + font-size: 15px; + -webkit-line-clamp: 3; + line-height: 24px; + color: #0C0C0D; + margin: 0 0 10px; } + [lwt-newtab-brighttext] .ds-hero .excerpt { + color: #F9F9FA; } + .ds-hero .ds-card:not(.placeholder) { + border: 0; + padding-bottom: 20px; } + .ds-hero .ds-card:not(.placeholder):hover { + border: 0; + box-shadow: none; + border-radius: 0; } + .ds-hero .ds-card:not(.placeholder) .meta { + padding: 0; } + .ds-hero .ds-card:not(.placeholder) .img-wrapper { + margin: 0 0 12px; } + .ds-hero .ds-card.placeholder { + margin-bottom: 20px; + padding-bottom: 20px; + min-height: 180px; } + .ds-hero .img-wrapper { + margin: 0 0 12px; } + .ds-hero .ds-hero-item { + position: relative; } + .ds-hero .wrapper { + border-top: 1px solid #D7D7DB; + color: #737373; + display: block; + margin: 12px 0 16px; + padding-top: 16px; + height: 100%; } + [lwt-newtab-brighttext] .ds-hero .wrapper { + border-top: 1px solid #4A4A4F; } + [lwt-newtab-brighttext] .ds-hero .wrapper { + color: #D7D7DB; } + .ds-hero .wrapper:focus { + box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + .ds-hero-no-border .ds-hero-item .wrapper { + border-top: 0; + border-bottom: 0; + padding: 0 0 8px; } + .ds-hero .wrapper:hover .meta header { + color: #0060DF; } + [lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header { + color: #45A1FF; } + .ds-hero .wrapper:active .meta header { + color: #003EAA; } + [lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header { + color: #45A1FF; } + .ds-hero .wrapper .img-wrapper { + width: 100%; } + .ds-hero .wrapper .img { + height: 0; + padding-top: 50%; } + .ds-hero .wrapper .img img { + border-radius: 4px; + box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); } + .ds-hero .wrapper .meta { + display: block; + flex-direction: column; + justify-content: space-between; } + .ds-hero .wrapper .meta .header-and-excerpt { + flex: 1; } + .ds-hero .wrapper .meta header { + font-size: 22px; + -webkit-line-clamp: 4; + line-height: 28px; + color: #0C0C0D; + margin-bottom: 0; } + [lwt-newtab-brighttext] .ds-hero .wrapper .meta header { + color: #FFF; } + .ds-hero .wrapper .meta .context, + .ds-hero .wrapper .meta .source { + margin: 0 0 4px; } + .ds-hero .wrapper .meta .context { + color: #008EA4; } + [lwt-newtab-brighttext] .ds-hero .wrapper .meta .context { + color: #A7FFFE; } + .ds-hero .wrapper .meta .source { + font-size: 13px; + color: #737373; + -webkit-line-clamp: 1; + margin-bottom: 0; } + [lwt-newtab-brighttext] .ds-hero .wrapper .meta .source { + color: #B1B1B3; } + .ds-column-5 .ds-hero .wrapper, + .ds-column-6 .ds-hero .wrapper, + .ds-column-7 .ds-hero .wrapper, + .ds-column-8 .ds-hero .wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 24px; } + .ds-column-5 .ds-hero .wrapper .img-wrapper, + .ds-column-6 .ds-hero .wrapper .img-wrapper, + .ds-column-7 .ds-hero .wrapper .img-wrapper, + .ds-column-8 .ds-hero .wrapper .img-wrapper { + margin: 0; + grid-column: 2; + grid-row: 1; } + .ds-column-5 .ds-hero .wrapper .meta, + .ds-column-6 .ds-hero .wrapper .meta, + .ds-column-7 .ds-hero .wrapper .meta, + .ds-column-8 .ds-hero .wrapper .meta { + grid-column: 1; + grid-row: 1; + display: flex; } + .ds-column-5 .ds-hero .wrapper .img, + .ds-column-6 .ds-hero .wrapper .img, + .ds-column-7 .ds-hero .wrapper .img, + .ds-column-8 .ds-hero .wrapper .img { + height: 0; + padding-top: 100%; } + .ds-column-5 .ds-hero .cards, + .ds-column-6 .ds-hero .cards, + .ds-column-7 .ds-hero .cards, + .ds-column-8 .ds-hero .cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 24px; + grid-auto-rows: min-content; } + .ds-column-9 .ds-hero, + .ds-column-10 .ds-hero, + .ds-column-11 .ds-hero, + .ds-column-12 .ds-hero { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 24px; } + .ds-column-9 .ds-hero.ds-hero-border, + .ds-column-10 .ds-hero.ds-hero-border, + .ds-column-11 .ds-hero.ds-hero-border, + .ds-column-12 .ds-hero.ds-hero-border { + border-top: 1px solid #D7D7DB; + padding: 20px 0; } + [lwt-newtab-brighttext] .ds-column-9 .ds-hero.ds-hero-border, [lwt-newtab-brighttext] + .ds-column-10 .ds-hero.ds-hero-border, [lwt-newtab-brighttext] + .ds-column-11 .ds-hero.ds-hero-border, [lwt-newtab-brighttext] + .ds-column-12 .ds-hero.ds-hero-border { + border-top: 1px solid #4A4A4F; } + .ds-column-9 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2), + .ds-column-10 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2), + .ds-column-11 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2), + .ds-column-12 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2) { + border-bottom: 1px solid #D7D7DB; + margin-bottom: 20px; } + [lwt-newtab-brighttext] .ds-column-9 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2), [lwt-newtab-brighttext] + .ds-column-10 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2), [lwt-newtab-brighttext] + .ds-column-11 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2), [lwt-newtab-brighttext] + .ds-column-12 .ds-hero.ds-hero-border .ds-card:not(.placeholder):nth-child(-n+2) { + border-bottom: 1px solid #4A4A4F; } + .ds-column-9 .ds-hero .wrapper, + .ds-column-10 .ds-hero .wrapper, + .ds-column-11 .ds-hero .wrapper, + .ds-column-12 .ds-hero .wrapper { + border-top: 0; + border-bottom: 0; + margin: 0; + padding: 0 0 20px; + display: flex; + flex-direction: column; } + .ds-column-9 .ds-hero .wrapper .img-wrapper, + .ds-column-10 .ds-hero .wrapper .img-wrapper, + .ds-column-11 .ds-hero .wrapper .img-wrapper, + .ds-column-12 .ds-hero .wrapper .img-wrapper { + margin: 0; } + .ds-column-9 .ds-hero .wrapper .img, + .ds-column-10 .ds-hero .wrapper .img, + .ds-column-11 .ds-hero .wrapper .img, + .ds-column-12 .ds-hero .wrapper .img { + margin-bottom: 12px; + height: 0; + padding-top: 50%; } + .ds-column-9 .ds-hero .wrapper .meta, + .ds-column-10 .ds-hero .wrapper .meta, + .ds-column-11 .ds-hero .wrapper .meta, + .ds-column-12 .ds-hero .wrapper .meta { + flex-grow: 1; + display: flex; + padding: 0 24px 0 0; } + .ds-column-9 .ds-hero .wrapper .meta header, + .ds-column-10 .ds-hero .wrapper .meta header, + .ds-column-11 .ds-hero .wrapper .meta header, + .ds-column-12 .ds-hero .wrapper .meta header { + font-size: 22px; + -webkit-line-clamp: 3; + line-height: 28px; } + .ds-column-9 .ds-hero .wrapper .meta .source, + .ds-column-10 .ds-hero .wrapper .meta .source, + .ds-column-11 .ds-hero .wrapper .meta .source, + .ds-column-12 .ds-hero .wrapper .meta .source { + margin-bottom: 0; } + .ds-column-9 .ds-hero .cards, + .ds-column-10 .ds-hero .cards, + .ds-column-11 .ds-hero .cards, + .ds-column-12 .ds-hero .cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 24px; + grid-auto-rows: min-content; } + [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover, [lwt-newtab-brighttext] + .ds-column-10 .ds-hero .cards .ds-card:hover, [lwt-newtab-brighttext] + .ds-column-11 .ds-hero .cards .ds-card:hover, [lwt-newtab-brighttext] + .ds-column-12 .ds-hero .cards .ds-card:hover { + background: none; } + [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] + .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] + .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] + .ds-column-12 .ds-hero .cards .ds-card:hover .title { + color: #45A1FF; } + [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] + .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] + .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] + .ds-column-12 .ds-hero .cards .ds-card:active .title { + color: #0A84FF; } + .ds-column-9 .ds-hero .cards .ds-card .title, + .ds-column-10 .ds-hero .cards .ds-card .title, + .ds-column-11 .ds-hero .cards .ds-card .title, + .ds-column-12 .ds-hero .cards .ds-card .title { + font-size: 14px; + -webkit-line-clamp: 3; + line-height: 20px; } + [lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] + .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] + .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] + .ds-column-12 .ds-hero .cards .ds-card .title { + color: #FFF; } + .ds-hero.empty { + grid-template-columns: auto; } + +.ds-highlights .section .section-list { + grid-gap: var(--gridRowGap); + grid-template-columns: repeat(1, 1fr); } + @media (min-width: 610px) { + .ds-highlights .section .section-list { + grid-template-columns: repeat(2, 1fr); } } + @media (min-width: 866px) { + .ds-highlights .section .section-list { + grid-template-columns: repeat(4, 1fr); } } + .ds-highlights .section .section-list .card-outer { + height: 175px; } + .ds-highlights .section .section-list .card-outer .card-host-name { + font-size: 13px; + line-height: 20px; + margin-bottom: 2px; + padding-bottom: 0; + text-transform: unset; } + .ds-highlights .section .section-list .card-outer .card-title { + font-size: 14px; + font-weight: 600; + line-height: 20px; + max-height: 20px; } + +.ds-highlights .hide-for-narrow { + display: block; } + +.ds-hr { + border: 0; + border-top: 1px solid #D7D7DB; + height: 0; } + [lwt-newtab-brighttext] .ds-hr { + border-top: 1px solid #4A4A4F; } + +.ds-list { + display: grid; + grid-row-gap: 24px; + grid-column-gap: 24px; + padding-inline-start: 0; } + .ds-list:not(.ds-list-full-width) .ds-list-item { + font-size: 14px; + line-height: 20px; + position: relative; } + .ds-list:not(.ds-list-full-width) .ds-list-item-title { + font-size: 14px; + -webkit-line-clamp: 3; + line-height: 20px; } + .ds-list:not(.ds-list-full-width) .ds-list-image { + min-width: 80px; + width: 80px; } + .ds-column-5 .ds-list:not(.ds-list-full-width), + .ds-column-6 .ds-list:not(.ds-list-full-width), + .ds-column-7 .ds-list:not(.ds-list-full-width), + .ds-column-8 .ds-list:not(.ds-list-full-width) { + grid-template-columns: repeat(2, 1fr); } + .ds-column-9 .ds-list:not(.ds-list-full-width), + .ds-column-10 .ds-list:not(.ds-list-full-width), + .ds-column-11 .ds-list:not(.ds-list-full-width), + .ds-column-12 .ds-list:not(.ds-list-full-width) { + grid-template-columns: repeat(3, 1fr); } + .ds-list:not(.ds-list-full-width).empty { + grid-template-columns: auto; } + .ds-list:not(.ds-list-full-width) .ds-list-item-excerpt { + display: none; } + .ds-list:not(.ds-list-images) .ds-list-image { + display: none; } + .ds-list a { + color: #0C0C0D; } + [lwt-newtab-brighttext] .ds-list a { + color: #F9F9FA; } + +.ds-list-item-link:focus { + box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + +.ds-list-numbers .ds-list-item { + counter-increment: list; } + +.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link { + padding-inline-start: 41px; } + .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before { + background-color: #50BCB6; + border-radius: 32px; + color: #FFF; + content: counter(list); + font-size: 17px; + height: 32px; + line-height: 32px; + margin-inline-start: -41px; + margin-top: 3px; + position: absolute; + text-align: center; + width: 32px; } + [lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before { + background-color: #008EA4; } + .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before { + background-color: #45A1FF; } + [lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before { + background-color: #45A1FF; } + .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before { + background-color: #003EAA; } + [lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before { + background-color: #0060DF; } + +.ds-list-borders { + border-top: 1px solid #D7D7DB; + grid-row-gap: 16px; + padding-top: 16px; } + [lwt-newtab-brighttext] .ds-list-borders { + border-top: 1px solid #4A4A4F; } + .ds-list-borders.ds-list-full-width .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), + .ds-column-1 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), + .ds-column-2 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), + .ds-column-3 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), + .ds-column-4 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)) { + border-bottom: 1px solid #D7D7DB; + margin-bottom: -1px; + padding-bottom: 16px; } + [lwt-newtab-brighttext] .ds-list-borders.ds-list-full-width .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), [lwt-newtab-brighttext] + .ds-column-1 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), [lwt-newtab-brighttext] + .ds-column-2 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), [lwt-newtab-brighttext] + .ds-column-3 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)), [lwt-newtab-brighttext] + .ds-column-4 .ds-list-borders .ds-list-item:not(.placeholder):not(:nth-last-child(-n+1)) { + border-bottom: 1px solid #4A4A4F; } + .ds-column-5 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)), + .ds-column-6 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)), + .ds-column-7 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)), + .ds-column-8 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)) { + border-bottom: 1px solid #D7D7DB; + margin-bottom: -1px; + padding-bottom: 16px; } + [lwt-newtab-brighttext] .ds-column-5 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)), [lwt-newtab-brighttext] + .ds-column-6 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)), [lwt-newtab-brighttext] + .ds-column-7 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)), [lwt-newtab-brighttext] + .ds-column-8 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+2)) { + border-bottom: 1px solid #4A4A4F; } + .ds-column-9 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)), + .ds-column-10 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)), + .ds-column-11 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)), + .ds-column-12 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)) { + border-bottom: 1px solid #D7D7DB; + margin-bottom: -1px; + padding-bottom: 16px; } + [lwt-newtab-brighttext] .ds-column-9 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)), [lwt-newtab-brighttext] + .ds-column-10 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)), [lwt-newtab-brighttext] + .ds-column-11 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)), [lwt-newtab-brighttext] + .ds-column-12 .ds-list-borders:not(.ds-list-full-width) .ds-list-item:not(.placeholder):not(:nth-last-child(-n+3)) { + border-bottom: 1px solid #4A4A4F; } + +.ds-list-full-width .ds-list-item { + font-size: 17px; + line-height: 24px; + position: relative; } + +.ds-list-full-width .ds-list-item-title { + font-size: 17px; + -webkit-line-clamp: 3; + line-height: 24px; } + +.ds-list-full-width .ds-list-image { + min-width: 160px; + width: 160px; } + +.ds-list-item { + display: block; + text-align: start; } + .ds-list-item.placeholder { + background: transparent; + min-height: 80px; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + border-radius: 4px; } + .ds-list-item.placeholder .ds-list-item-link { + cursor: default; } + .ds-list-item.placeholder .ds-list-image { + opacity: 0; } + .ds-list-item .ds-list-item-link { + mix-blend-mode: normal; + display: flex; + justify-content: space-between; + height: 100%; } + .ds-list-item .ds-list-item-excerpt { + font-size: 14px; + -webkit-line-clamp: 2; + line-height: 20px; + color: #737373; + margin: 4px 0 8px; } + [lwt-newtab-brighttext] .ds-list-item .ds-list-item-excerpt { + color: rgba(249, 249, 250, 0.8); } + .ds-list-item p { + font-size: 14px; + line-height: 20px; + margin: 0; } + .ds-list-item .ds-list-item-info { + font-size: 14px; + -webkit-line-clamp: 1; + line-height: 20px; + color: #737373; + font-size: 13px; } + [lwt-newtab-brighttext] .ds-list-item .ds-list-item-info { + color: #B1B1B3; } + .ds-list-item .ds-list-item-title { + font-weight: 600; + margin-bottom: 4px; } + .ds-list-item .ds-list-item-body { + flex: 1; } + .ds-list-item .ds-list-item-text { + display: flex; + flex-direction: column; + justify-content: space-between; } + .ds-list-item .ds-list-image { + height: 80px; + margin-inline-start: 14px; + min-height: 80px; } + .ds-list-item .ds-list-image img { + border-radius: 4px; + box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); } + .ds-list-item:hover .ds-list-item-title { + color: #45A1FF; } + .ds-list-item:active .ds-list-item-title { + color: #003EAA; } + +.outer-wrapper.newtab-experience .ds-navigation { + color: var(--newtab-background-primary-text-color); } + +.ds-navigation { + color: #737373; + padding: 4px 0; + font-weight: 600; + line-height: 22px; + font-size: 11.5px; } + [lwt-newtab-brighttext] .ds-navigation { + color: #D7D7DB; } + @media (min-width: 1122px) { + .ds-navigation { + line-height: 32px; + font-size: 14px; } } + .ds-navigation.ds-navigation-centered { + text-align: center; } + .ds-navigation.ds-navigation-right-aligned { + text-align: end; } + .ds-navigation ul { + display: inline; + margin: 0; + padding: 0; } + .ds-navigation ul li { + display: inline-block; } + .ds-navigation ul li::after { + content: '·'; + padding: 6px; } + .ds-navigation ul li:last-child::after { + content: none; } + .ds-navigation ul li a:hover, .ds-navigation ul li a:active { + text-decoration: underline; } + .ds-navigation ul li a:active { + color: #003EAA; } + .ds-navigation .ds-navigation-header { + padding-inline-end: 6px; } + +.ds-section-title { + text-align: center; + margin-top: 24px; } + .ds-section-title .title { + line-height: 48px; + font-size: 36px; + font-weight: 300; + color: #0C0C0D; } + [lwt-newtab-brighttext] .ds-section-title .title { + color: #FFF; } + .ds-section-title .subtitle { + line-height: 24px; + font-size: 14px; + color: #737373; + margin-top: 4px; } + [lwt-newtab-brighttext] .ds-section-title .subtitle { + color: #D7D7DB; } + +.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer { + padding: 0 12px; } + .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { + box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { + box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { + box-shadow: 0 0 0 5px #D7D7DB; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { + box-shadow: 0 0 0 5px #4A4A4F; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + +.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-sites-list { + margin: 0 -12px; } + +.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } + +.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { + box-shadow: 0 0 0 5px #D7D7DB; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { + box-shadow: 0 0 0 5px #4A4A4F; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + +.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-sites-list { + margin: 0 -12px; } + +.ds-column-5 .ds-top-sites .top-site-outer, +.ds-column-6 .ds-top-sites .top-site-outer, +.ds-column-7 .ds-top-sites .top-site-outer, +.ds-column-8 .ds-top-sites .top-site-outer { + padding: 0 10px; } + +.ds-column-5 .ds-top-sites .top-sites-list, +.ds-column-6 .ds-top-sites .top-sites-list, +.ds-column-7 .ds-top-sites .top-sites-list, +.ds-column-8 .ds-top-sites .top-sites-list { + margin: 0 -10px; } + +.ds-column-5 .ds-top-sites .top-site-inner, +.ds-column-6 .ds-top-sites .top-site-inner, +.ds-column-7 .ds-top-sites .top-site-inner, +.ds-column-8 .ds-top-sites .top-site-inner { + --leftPanelIconWidth: 84.67px; } + .ds-column-5 .ds-top-sites .top-site-inner .tile, + .ds-column-6 .ds-top-sites .top-site-inner .tile, + .ds-column-7 .ds-top-sites .top-site-inner .tile, + .ds-column-8 .ds-top-sites .top-site-inner .tile { + width: var(--leftPanelIconWidth); + height: var(--leftPanelIconWidth); } + .ds-column-5 .ds-top-sites .top-site-inner .title, + .ds-column-6 .ds-top-sites .top-site-inner .title, + .ds-column-7 .ds-top-sites .top-site-inner .title, + .ds-column-8 .ds-top-sites .top-site-inner .title { + width: var(--leftPanelIconWidth); } + +.ds-column-1 .ds-top-sites .top-site-outer, +.ds-column-2 .ds-top-sites .top-site-outer, +.ds-column-3 .ds-top-sites .top-site-outer, +.ds-column-4 .ds-top-sites .top-site-outer { + padding: 0 8px; } + +.ds-column-1 .ds-top-sites .top-sites-list, +.ds-column-2 .ds-top-sites .top-sites-list, +.ds-column-3 .ds-top-sites .top-sites-list, +.ds-column-4 .ds-top-sites .top-sites-list { + margin: 0 -8px; } + +.ds-column-1 .ds-top-sites .top-site-inner, +.ds-column-2 .ds-top-sites .top-site-inner, +.ds-column-3 .ds-top-sites .top-site-inner, +.ds-column-4 .ds-top-sites .top-site-inner { + --rightPanelIconWidth: 82.67px; } + .ds-column-1 .ds-top-sites .top-site-inner .tile, + .ds-column-2 .ds-top-sites .top-site-inner .tile, + .ds-column-3 .ds-top-sites .top-site-inner .tile, + .ds-column-4 .ds-top-sites .top-site-inner .tile { + width: var(--rightPanelIconWidth); + height: var(--rightPanelIconWidth); } + .ds-column-1 .ds-top-sites .top-site-inner .title, + .ds-column-2 .ds-top-sites .top-site-inner .title, + .ds-column-3 .ds-top-sites .top-site-inner .title, + .ds-column-4 .ds-top-sites .top-site-inner .title { + width: var(--rightPanelIconWidth); } + +.ds-hero-item .context-menu-button, +.ds-list-item .context-menu-button, +.ds-card .context-menu-button, +.ds-signup .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-contextmenu-button-color); + background-image: url("chrome://global/skin/icons/more.svg"); + background-position: 55%; + border: 1px solid var(--newtab-border-primary-color); + border-radius: 100%; + box-shadow: 0 2px rgba(12, 12, 13, 0.1); + cursor: pointer; + fill: var(--newtab-icon-primary-color); + height: 27px; + inset-inline-end: -13.5px; + opacity: 0; + position: absolute; + top: -13.5px; + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: 27px; } + .ds-hero-item .context-menu-button:is(:active, :focus), + .ds-list-item .context-menu-button:is(:active, :focus), + .ds-card .context-menu-button:is(:active, :focus), + .ds-signup .context-menu-button:is(:active, :focus) { + opacity: 1; + transform: scale(1); } + +.ds-hero-item .context-menu, +.ds-list-item .context-menu, +.ds-card .context-menu, +.ds-signup .context-menu { + opacity: 0; } + +.ds-hero-item.active .context-menu, +.ds-list-item.active .context-menu, +.ds-card.active .context-menu, +.ds-signup.active .context-menu { + opacity: 1; } + +.ds-hero-item.last-item .context-menu, +.ds-list-item.last-item .context-menu, +.ds-card.last-item .context-menu, +.ds-signup.last-item .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; } + +.ds-hero-item.last-item .context-menu, +.ds-list-item.last-item .context-menu, +.ds-card.last-item .context-menu, +.ds-signup.last-item .context-menu { + opacity: 1; } + +.ds-hero-item:is(:hover, :focus, .active), +.ds-list-item:is(:hover, :focus, .active), +.ds-card:is(:hover, :focus, .active), +.ds-signup:is(:hover, :focus, .active) { + outline: none; } + .ds-hero-item:is(:hover, :focus, .active) .context-menu-button, + .ds-list-item:is(:hover, :focus, .active) .context-menu-button, + .ds-card:is(:hover, :focus, .active) .context-menu-button, + .ds-signup:is(:hover, :focus, .active) .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; } + .ds-hero-item:is(:hover, :focus, .active).ds-card-grid-border, + .ds-list-item:is(:hover, :focus, .active).ds-card-grid-border, + .ds-card:is(:hover, :focus, .active).ds-card-grid-border, + .ds-signup:is(:hover, :focus, .active).ds-card-grid-border { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } + +.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { + box-shadow: 0 0 0 5px #D7D7DB; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { + box-shadow: 0 0 0 5px #4A4A4F; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + +.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { + box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { + box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + +.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { + box-shadow: 0 0 0 5px #D7D7DB; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { + box-shadow: 0 0 0 5px #4A4A4F; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + +.ds-card { + display: flex; + flex-direction: column; + position: relative; } + .ds-card .playhead { + background: #0060DF url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; + border-radius: 20px; + bottom: -16px; + color: rgba(255, 255, 255, 0); + display: flex; + flex-direction: column; + height: 40px; + justify-content: center; + left: 16px; + min-width: 40px; + padding: 0 0 0 40px; + position: absolute; + transition: padding 100ms ease-in-out 0ms, color 100ms linear 100ms; } + .ds-card .playhead:hover { + color: white; + padding: 0 20px 0 40px; } + .ds-card .playhead span { + display: none; } + .ds-card .playhead:hover span { + display: inline; + font-style: normal; + font-weight: 600; + font-size: 13px; } + .ds-card.placeholder { + background: transparent; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + border-radius: 4px; + min-height: 300px; } + .ds-card .img-wrapper { + width: 100%; + position: relative; } + .ds-card .img { + height: 0; + padding-top: 50%; } + .ds-card .img img { + border-radius: 4px; + box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); } + .ds-card .ds-card-link { + height: 100%; + display: flex; + flex-direction: column; } + .ds-card .ds-card-link:hover header { + color: #0060DF; } + [lwt-newtab-brighttext] .ds-card .ds-card-link:hover header { + color: #45A1FF; } + .ds-card .ds-card-link:focus header { + color: #0060DF; } + [lwt-newtab-brighttext] .ds-card .ds-card-link:focus header { + color: #45A1FF; } + .ds-card .ds-card-link:active header { + color: #003EAA; } + [lwt-newtab-brighttext] .ds-card .ds-card-link:active header { + color: #0A84FF; } + .ds-card.video-card .meta { + margin-top: 4px; } + .ds-card .meta { + display: flex; + flex-direction: column; + padding: 12px 16px; + flex-grow: 1; } + .ds-card .meta .info-wrap { + flex-grow: 1; } + .ds-card .meta .title { + font-size: 17px; + -webkit-line-clamp: 3; + line-height: 24px; + font-weight: 600; } + .ds-card .meta .excerpt { + font-size: 14px; + -webkit-line-clamp: 3; + line-height: 20px; } + .ds-card .meta .source { + -webkit-line-clamp: 1; + margin-bottom: 2px; + font-size: 13px; + color: #737373; } + [lwt-newtab-brighttext] .ds-card .meta .source { + color: #B1B1B3; } + .ds-card .meta .cta-button { + width: 100%; + margin: 12px 0 4px; + box-shadow: none; + border-radius: 4px; + height: 32px; + font-size: 14px; + font-weight: 600; + padding: 5px 8px 7px; + border: 0; + color: #0C0C0D; + background: rgba(12, 12, 13, 0.1); } + [lwt-newtab-brighttext] .ds-card .meta .cta-button { + color: #F9F9FA; + background: rgba(12, 12, 13, 0.7); } + .ds-card .meta .cta-button:focus { + background: rgba(12, 12, 13, 0.1); + box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); } + [lwt-newtab-brighttext] .ds-card .meta .cta-button:focus { + background: rgba(12, 12, 13, 0.7); + box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); } + .ds-card .meta .cta-button:hover { + background: rgba(12, 12, 13, 0.2); } + [lwt-newtab-brighttext] .ds-card .meta .cta-button:hover { + background: rgba(12, 12, 13, 0.5); } + .ds-card .meta .cta-button:active { + background: rgba(12, 12, 13, 0.3); } + [lwt-newtab-brighttext] .ds-card .meta .cta-button:active { + background: rgba(12, 12, 13, 0.7); } + .ds-card .meta .cta-link { + font-size: 15px; + font-weight: 600; + line-height: 24px; + height: 24px; + width: auto; + background-size: auto; + background-position: right 1.5px; + padding-right: 9px; + color: #0060DF; + fill: #0060DF; } + [lwt-newtab-brighttext] .ds-card .meta .cta-link { + color: #45A1FF; + fill: #45A1FF; } + .ds-card .meta .cta-link:focus { + box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5); + border-radius: 4px; + outline: 0; } + [lwt-newtab-brighttext] .ds-card .meta .cta-link:focus { + box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5); } + .ds-card .meta .cta-link:active { + color: #003EAA; + fill: #003EAA; + box-shadow: none; } + [lwt-newtab-brighttext] .ds-card .meta .cta-link:active { + color: #0A84FF; + fill: #0A84FF; + box-shadow: none; } + .ds-card .meta .cta-link:hover { + text-decoration: underline; } + .ds-card header { + line-height: 24px; + font-size: 17px; + color: #0C0C0D; } + [lwt-newtab-brighttext] .ds-card header { + color: #F9F9FA; } + .ds-card p { + font-size: 14px; + line-height: 20px; + color: #0C0C0D; + margin: 0; } + [lwt-newtab-brighttext] .ds-card p { + color: #F9F9FA; } + +.outer-wrapper.newtab-experience .ds-card .context-menu-button:is(:active, :focus) { + outline: 0; + fill: var(--newtab-primary-action-background); + border: 1px solid var(--newtab-primary-action-background); } + +.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; } + .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { + color: #0060DF; } + [lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { + color: #45A1FF; } + +.story-footer { + color: var(--newtab-text-secondary-color); + inset-inline-start: 0; + margin-top: 12px; + position: relative; } + .story-footer .story-sponsored-label, + .story-footer .story-view-count, + .story-footer .status-message { + -webkit-line-clamp: 1; + font-size: 13px; + line-height: 24px; + color: #737373; } + [lwt-newtab-brighttext] .story-footer .story-sponsored-label, [lwt-newtab-brighttext] + .story-footer .story-view-count, [lwt-newtab-brighttext] + .story-footer .status-message { + color: #B1B1B3; } + .story-footer .status-message { + display: flex; + align-items: center; + height: 24px; } + .story-footer .status-message .story-badge-icon { + fill: #737373; + height: 16px; + margin-inline-end: 6px; } + [lwt-newtab-brighttext] .story-footer .status-message .story-badge-icon { + fill: #B1B1B3; } + .story-footer .status-message .story-badge-icon.icon-bookmark-removed { + background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg"); } + .story-footer .status-message .story-context-label { + color: #737373; + flex-grow: 1; + font-size: 13px; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + [lwt-newtab-brighttext] .story-footer .status-message .story-context-label { + color: #B1B1B3; } + +.story-animate-enter { + opacity: 0; } + +.story-animate-enter-active { + opacity: 1; + transition: opacity 150ms ease-in 300ms; } + .story-animate-enter-active .story-badge-icon, + .story-animate-enter-active .story-context-label { + animation: color 3s ease-out 0.3s; } + [lwt-newtab-brighttext] .story-animate-enter-active .story-badge-icon, [lwt-newtab-brighttext] + .story-animate-enter-active .story-context-label { + animation: dark-color 3s ease-out 0.3s; } + +@keyframes color { + 0% { + color: #058B00; + fill: #058B00; } + 100% { + color: #737373; + fill: #737373; } } + +@keyframes dark-color { + 0% { + color: #7C6; + fill: #7C6; } + 100% { + color: #B1B1B3; + fill: #B1B1B3; } } + +.story-animate-exit { + position: absolute; + top: 0; + opacity: 1; } + +.story-animate-exit-active { + opacity: 0; + transition: opacity 250ms ease-in; } + +.ds-image { + display: block; + position: relative; + opacity: 0; } + .ds-image.use-transition { + transition: opacity 0.8s; } + .ds-image.loaded { + opacity: 1; } + .ds-image img, + .ds-image .broken-image { + background-color: var(--newtab-card-placeholder-color); + position: absolute; + top: 0; + width: 100%; + height: 100%; + object-fit: cover; } + +.ds-dismiss { + position: relative; + border-radius: 8px; + transition-duration: 250ms; + transition-property: background; } + .ds-dismiss:hover .ds-dismiss-button { + opacity: 1; } + .ds-dismiss .ds-dismiss-button { + border: 0; + cursor: pointer; + height: 32px; + width: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + inset-inline-end: 0; + top: 0; + border-radius: 50%; + background-color: transparent; } + .ds-dismiss .ds-dismiss-button .icon { + fill: #737373; } + [lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button .icon { + fill: #EDEDF0; } + .ds-dismiss .ds-dismiss-button:hover { + background: rgba(12, 12, 13, 0.2); } + [lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover { + background: rgba(12, 12, 13, 0.5); } + [lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover .icon { + fill: #F9F9FA; } + .ds-dismiss .ds-dismiss-button:hover .icon { + fill: #2A2A2E; } + .ds-dismiss .ds-dismiss-button:active { + background: rgba(12, 12, 13, 0.3); } + [lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:active { + background: rgba(12, 12, 13, 0.7); } + .ds-dismiss .ds-dismiss-button:focus { + box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); } + [lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:focus { + box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); } + +.ds-message { + margin: 8px 0 0; } + .ds-message .title { + display: flex; + align-items: center; } + .ds-message .title .glyph { + width: 16px; + height: 16px; + margin: 0 6px 0 0; + -moz-context-properties: fill; + fill: #737373; + background-position: center center; + background-size: 16px; + background-repeat: no-repeat; } + [lwt-newtab-brighttext] .ds-message .title .glyph { + fill: #D7D7DB; } + .ds-message .title .title-text { + line-height: 20px; + font-size: 13px; + color: #737373; + font-weight: 600; + padding-right: 12px; } + [lwt-newtab-brighttext] .ds-message .title .title-text { + color: #D7D7DB; } + .ds-message .title .link { + line-height: 20px; + font-size: 13px; } + .ds-message .title .link:hover, .ds-message .title .link:focus { + text-decoration: underline; } + +.impression-observer { + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; } + +.section-empty-state { + border: 1px solid var(--newtab-border-secondary-color); + border-radius: 4px; + display: flex; + height: 160px; + width: 100%; } + .section-empty-state .empty-state-message { + color: var(--newtab-text-secondary-color); + font-size: 14px; + line-height: 20px; + text-align: center; + margin: auto; + max-width: 936px; } + .section-empty-state .try-again-button { + margin-top: 12px; + padding: 6px 32px; + border-radius: 2px; + border: 0; + background: var(--newtab-feed-button-background); + color: var(--newtab-feed-button-text); + cursor: pointer; + position: relative; + transition: background 0.2s ease, color 0.2s ease; } + .section-empty-state .try-again-button:not(.waiting):focus { + box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus { + box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + .section-empty-state .try-again-button:not(.waiting):hover { + box-shadow: 0 0 0 5px #D7D7DB; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + [lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):hover { + box-shadow: 0 0 0 5px #4A4A4F; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; } + .section-empty-state .try-again-button::after { + content: ''; + height: 20px; + width: 20px; + animation: spinner 1s linear infinite; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + margin: -10px 0 0 -10px; + mask-image: url("chrome://activity-stream/content/data/content/assets/spinner.svg"); + mask-size: 20px; + background: var(--newtab-feed-button-spinner); } + .section-empty-state .try-again-button.waiting { + cursor: initial; + background: var(--newtab-feed-button-background-faded); + color: var(--newtab-feed-button-text-faded); + transition: background 0.2s ease; } + .section-empty-state .try-again-button.waiting::after { + transition: opacity 0.2s ease; + opacity: 1; } + .section-empty-state h2 { + font-size: 15px; + font-weight: 600; + margin: 0; } + .section-empty-state p { + margin: 0; } + +@keyframes spinner { + to { + transform: rotate(360deg); } } + +.ds-dismiss-ds-text-promo { + max-width: 744px; + margin: auto; + overflow: hidden; } + .ds-dismiss-ds-text-promo.hovering { + background: rgba(12, 12, 13, 0.1); } + [lwt-newtab-brighttext] .ds-dismiss-ds-text-promo.hovering { + background: rgba(12, 12, 13, 0.3); } + .ds-dismiss-ds-text-promo .ds-dismiss-button { + margin-inline: 0 18px; + margin-block: 18px 0; } + +.ds-text-promo { + max-width: 640px; + margin: 0; + padding: 18px; } + @media (min-width: 610px) { + .ds-text-promo { + display: flex; + margin: 18px 24px; + padding: 0 32px 0 0; } } + .ds-text-promo .ds-image { + width: 40px; + height: 40px; + flex-shrink: 0; + margin: 0 0 18px; } + @media (min-width: 610px) { + .ds-text-promo .ds-image { + margin: 4px 12px 0 0; } } + .ds-text-promo .ds-image img { + border-radius: 4px; } + .ds-text-promo .text { + line-height: 24px; } + .ds-text-promo h3 { + margin: 0; + font-weight: 600; + font-size: 15px; } + [lwt-newtab-brighttext] .ds-text-promo h3 { + color: #F9F9FA; } + .ds-text-promo .subtitle { + font-size: 13px; + margin: 0; + color: #737373; } + [lwt-newtab-brighttext] .ds-text-promo .subtitle { + color: #B1B1B3; } + +.ds-chevron-link { + color: #0060DF; + display: inline-block; + outline: 0; } + .ds-chevron-link:hover { + text-decoration: underline; } + .ds-chevron-link:active { + color: #003EAA; } + [lwt-newtab-brighttext] .ds-chevron-link:active { + color: #0A84FF; } + .ds-chevron-link:active::after { + background-color: #003EAA; } + [lwt-newtab-brighttext] .ds-chevron-link:active::after { + background-color: #0A84FF; } + .ds-chevron-link:focus { + box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); + border-radius: 2px; } + [lwt-newtab-brighttext] .ds-chevron-link:focus { + box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); } + .ds-chevron-link::after { + content: ' '; + mask: url("chrome://activity-stream/content/data/content/assets/glyph-caret-right.svg") 0 -8px no-repeat; + background-color: #0060DF; + margin: 0 0 0 4px; + width: 5px; + height: 8px; + text-decoration: none; + display: inline-block; } + [lwt-newtab-brighttext] .ds-chevron-link::after { + background-color: #45A1FF; } + +.ds-signup { + max-width: 300px; + margin: 0 auto; + padding: 8px; + position: relative; + text-align: center; + font-size: 17px; + font-weight: 600; } + .ds-signup:hover { + background: var(--newtab-element-hover-color); + border-radius: 4px; } + .ds-signup .icon-mail { + height: 40px; + width: 40px; + margin-inline-end: 8px; + fill: #B1B1B3; + background-size: 30px; + flex-shrink: 0; } + .ds-signup .ds-signup-content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } + .ds-signup .ds-signup-content .ds-chevron-link { + margin-top: 4px; + box-shadow: none; + display: block; + white-space: nowrap; } + @media (min-width: 866px) { + .ds-signup { + min-width: 756px; + width: max-content; + text-align: start; } + .ds-signup .ds-signup-content { + flex-direction: row; } + .ds-signup .ds-signup-content .ds-chevron-link { + margin-top: 0; + display: inline; } } + +.ds-privacy-modal .modal-link { + display: flex; + align-items: center; + margin: 0 0 8px; + border: 0; + padding: 0; + color: #0060DF; + width: max-content; } + .ds-privacy-modal .modal-link:hover { + text-decoration: underline; + cursor: pointer; } + .ds-privacy-modal .modal-link::before { + -moz-context-properties: fill; + fill: #0060DF; + content: ''; + display: inline-block; + width: 16px; + height: 16px; + margin: 0; + margin-inline-end: 8px; + background-position: center center; + background-repeat: no-repeat; + background-size: 16px; } + .ds-privacy-modal .modal-link.modal-link-privacy::before { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-info-16.svg"); } + .ds-privacy-modal .modal-link.modal-link-manage::before { + background-image: url("chrome://global/skin/icons/settings.svg"); } + +.ds-privacy-modal p { + line-height: 24px; } + +.ds-privacy-modal .privacy-notice { + max-width: 572px; + padding: 40px; + margin: auto; } + +.ASRouterButton { + font-weight: 600; + font-size: 14px; + white-space: nowrap; + border-radius: 2px; + border: 0; + font-family: inherit; + padding: 8px 15px; + margin-inline-start: 12px; + color: inherit; + cursor: pointer; } + .tall .ASRouterButton { + margin-inline-start: 20px; } + .ASRouterButton.test-only { + width: 0; + height: 0; + overflow: hidden; + display: block; + visibility: hidden; } + .ASRouterButton.primary { + border: 1px solid var(--newtab-button-primary-color); + background-color: var(--newtab-button-primary-color); + color: #F9F9FA; } + .ASRouterButton.primary:hover { + background-color: #003EAA; } + .ASRouterButton.primary:active { + background-color: #002275; } + .ASRouterButton.secondary { + background-color: rgba(12, 12, 13, 0.1); } + .ASRouterButton.secondary:hover { + background-color: rgba(12, 12, 13, 0.2); } + .ASRouterButton.secondary:active { + background-color: rgba(12, 12, 13, 0.3); } + .ASRouterButton.secondary:focus { + box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); } + .ASRouterButton.slim { + background-color: rgba(12, 12, 13, 0.1); + margin-inline-start: 0; + font-size: 12px; + padding: 6px 12px; } + .ASRouterButton.slim:hover { + background-color: rgba(12, 12, 13, 0.2); } + +[lwt-newtab-brighttext] .secondary { + background-color: rgba(249, 249, 250, 0.1); } + [lwt-newtab-brighttext] .secondary:hover { + background-color: rgba(249, 249, 250, 0.2); } + [lwt-newtab-brighttext] .secondary:active { + background-color: rgba(249, 249, 250, 0.3); } + +[lwt-newtab-brighttext] .footer .secondary { + background-color: rgba(249, 249, 250, 0.3); } + [lwt-newtab-brighttext] .footer .secondary:hover { + background-color: rgba(249, 249, 250, 0.4); } + [lwt-newtab-brighttext] .footer .secondary:active { + background-color: rgba(249, 249, 250, 0.5); } + +.SnippetBaseContainer { + position: fixed; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + background-color: var(--newtab-snippets-background-color); + color: var(--newtab-text-primary-color); + font-size: 14px; + line-height: 20px; + border-top: 1px solid var(--newtab-snippets-hairline-color); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); + display: flex; + align-items: center; } + .SnippetBaseContainer a { + cursor: pointer; + color: var(--newtab-link-primary-color); } + .SnippetBaseContainer a:hover { + text-decoration: underline; } + [lwt-newtab-brighttext] .SnippetBaseContainer a { + font-weight: bold; } + .SnippetBaseContainer input[type='checkbox'] { + margin-inline-start: 0; } + .SnippetBaseContainer .innerWrapper { + margin: 0 auto; + display: flex; + align-items: center; + padding: 12px 25px; + padding-inline-end: 36px; + max-width: 836px; } + @media (min-width: 866px) { + .SnippetBaseContainer .innerWrapper { + padding-inline-end: 25px; } } + @media (min-width: 1122px) { + .SnippetBaseContainer .innerWrapper { + max-width: 1092px; } } + .SnippetBaseContainer .blockButton { + display: none; + background: none; + border: 0; + position: absolute; + top: 50%; + inset-inline-end: 12px; + height: 16px; + width: 16px; + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-dismiss-16.svg"); + -moz-context-properties: fill; + color: inherit; + fill: currentColor; + opacity: 0.5; + margin-top: -8px; + padding: 0; + cursor: pointer; } + .SnippetBaseContainer:hover .blockButton { + display: block; } + .SnippetBaseContainer .icon { + height: 42px; + width: 42px; + margin-inline-end: 12px; + flex-shrink: 0; } + +.snippets-preview-banner { + font-size: 15px; + line-height: 42px; + color: rgba(74, 74, 79, 0.7); + background: rgba(215, 215, 219, 0.6); + text-align: center; + position: absolute; + top: 0; + width: 100%; } + .snippets-preview-banner span { + vertical-align: middle; } + +body:not([lwt-newtab-brighttext]) .icon-dark-theme, +body:not([lwt-newtab-brighttext]) .icon.icon-dark-theme, +body:not([lwt-newtab-brighttext]) .scene2Icon .icon-dark-theme { + display: none; } + +body[lwt-newtab-brighttext] .icon-light-theme, +body[lwt-newtab-brighttext] .icon.icon-light-theme, +body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { + display: none; } + +.activity-stream.modal-open { + overflow: hidden; } + +.modalOverlayOuter { + background: var(--newtab-overlay-color); + height: 100%; + position: fixed; + top: 0; + left: 0; + width: 100%; + display: none; + z-index: 1100; + overflow: auto; } + .modalOverlayOuter.active { + display: flex; } + +.modalOverlayInner { + min-width: min-content; + width: 100%; + max-width: 960px; + position: relative; + margin: auto; + background: var(--newtab-modal-color); + box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3); + border-radius: 4px; + display: none; + z-index: 1100; } + @media (max-width: 960px) { + .modalOverlayInner { + height: 100%; + top: 0; + left: 0; + box-shadow: none; + border-radius: 0; } } + .modalOverlayInner.active { + display: block; } + .modalOverlayInner h2 { + color: #4A4A4F; + text-align: center; + font-weight: 200; + margin-top: 30px; + font-size: 28px; + line-height: 37px; + letter-spacing: -0.13px; } + @media (max-width: 960px) { + .modalOverlayInner h2 { + margin-top: 100px; } } + @media (max-width: 850px) { + .modalOverlayInner h2 { + margin-top: 30px; } } + .modalOverlayInner .footer { + border-top: 1px solid #D7D7DB; + border-radius: 4px; + height: 70px; + width: 100%; + position: absolute; + bottom: 0; + text-align: center; + background-color: #FFF; } + @media (max-width: 850px) and (max-height: 730px) { + .modalOverlayInner .footer { + position: sticky; } } + @media (max-width: 650px) and (max-height: 600px) { + .modalOverlayInner .footer { + position: sticky; } } + .modalOverlayInner .footer .modalButton { + margin-top: 20px; + min-width: 150px; + height: 30px; + padding: 4px 30px 6px; + font-size: 15px; } + .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { + box-shadow: 0 0 0 5px #D7D7DB; + transition: box-shadow 150ms; } + +.below-search-snippet { + margin: 0 auto 16px; } + .below-search-snippet.withButton { + margin: auto; + min-height: 60px; + background-color: transparent; } + .below-search-snippet.withButton .snippet-hover-wrapper { + min-height: 60px; + border-radius: 4px; } + .below-search-snippet.withButton .snippet-hover-wrapper:hover { + background-color: var(--newtab-element-hover-color); } + .below-search-snippet.withButton .snippet-hover-wrapper:hover .blockButton { + display: block; + opacity: 1; } + +.SimpleBelowSearchSnippet { + background-color: transparent; + border: 0; + box-shadow: none; + position: relative; + margin: auto; + z-index: auto; } + @media (min-width: 866px) { + .SimpleBelowSearchSnippet { + width: 736px; } } + .SimpleBelowSearchSnippet.active { + background-color: var(--newtab-element-hover-color); + border-radius: 4px; } + .SimpleBelowSearchSnippet .innerWrapper { + align-items: center; + background-color: transparent; + border-radius: 4px; + box-shadow: var(--newtab-card-shadow); + flex-direction: column; + padding: 16px; + text-align: center; + width: 100%; } + @media (min-width: 610px) { + .SimpleBelowSearchSnippet .innerWrapper { + align-items: flex-start; + background-color: transparent; + border-radius: 4px; + box-shadow: none; + flex-direction: row; + padding: 0; + text-align: inherit; + width: 696px; } } + @media (max-width: 865px) { + .SimpleBelowSearchSnippet .innerWrapper { + margin-inline-start: 0; } } + @media (max-width: 609px) { + .SimpleBelowSearchSnippet .innerWrapper { + margin: auto; } } + .SimpleBelowSearchSnippet .blockButton { + display: block; + inset-inline-end: 10px; + opacity: 1; + top: 50%; } + .SimpleBelowSearchSnippet .blockButton:focus { + box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + border-radius: 2px; } + .SimpleBelowSearchSnippet .title { + font-size: inherit; + margin: 0; } + .SimpleBelowSearchSnippet .title-inline { + display: inline; } + .SimpleBelowSearchSnippet .textContainer { + margin: 10px; + margin-inline-start: 0; + padding-inline-end: 20px; } + .SimpleBelowSearchSnippet .icon { + margin-top: 8px; + margin-inline-start: 12px; + height: 32px; + width: 32px; } + @media (min-width: 610px) { + .SimpleBelowSearchSnippet .icon { + height: 24px; + width: 24px; } } + @media (max-width: 610px) { + .SimpleBelowSearchSnippet .icon { + margin: auto; } } + .SimpleBelowSearchSnippet.withButton { + line-height: 20px; + margin-bottom: 10px; + min-height: 60px; + background-color: transparent; } + @media (max-width: 1123px) { + .SimpleBelowSearchSnippet.withButton .innerWrapper { + margin: 0 40px; } } + .SimpleBelowSearchSnippet.withButton .blockButton { + display: block; + inset-inline-end: -10%; + opacity: 0; + margin: auto; + top: unset; } + .SimpleBelowSearchSnippet.withButton .blockButton:focus { + opacity: 1; + box-shadow: none; } + @media (max-width: 1123px) { + .SimpleBelowSearchSnippet.withButton .blockButton { + inset-inline-end: 2%; } } + .SimpleBelowSearchSnippet.withButton .icon { + width: 42px; + height: 42px; + flex-shrink: 0; + margin: auto 0; + margin-inline-end: 10px; } + @media (max-width: 610px) { + .SimpleBelowSearchSnippet.withButton .icon { + margin: auto; } } + .SimpleBelowSearchSnippet.withButton .buttonContainer { + margin: auto; + margin-inline-end: 0; } + @media (max-width: 610px) { + .SimpleBelowSearchSnippet.withButton .buttonContainer { + margin: auto; } } + @media (max-width: 610px) { + .SimpleBelowSearchSnippet button { + margin: auto; } } + .SimpleBelowSearchSnippet .body { + display: inline; + position: sticky; + transform: translateY(-50%); + margin: 8px 0 0; } + @media (min-width: 610px) { + .SimpleBelowSearchSnippet .body { + margin: 12px 0; } } + .SimpleBelowSearchSnippet .body a { + font-weight: 600; } + +.SimpleSnippet.tall { + padding: 27px 0; } + +.SimpleSnippet p em { + color: #0C0C0D; + font-style: normal; + background: #FFE900; } + +.SimpleSnippet.bold .donation-form-url, +.SimpleSnippet.bold .donation-amount, .SimpleSnippet.takeover .donation-form-url, +.SimpleSnippet.takeover .donation-amount { + padding-top: 8px; + padding-bottom: 8px; } + +.SimpleSnippet.bold { + height: 176px; } + .SimpleSnippet.bold .body { + font-size: 14px; + line-height: 20px; + margin-bottom: 20px; } + .SimpleSnippet.bold .icon { + width: 71px; + height: 71px; } + +.SimpleSnippet.takeover { + height: 344px; } + .SimpleSnippet.takeover .body { + font-size: 16px; + line-height: 24px; + margin-bottom: 35px; } + .SimpleSnippet.takeover .icon { + width: 79px; + height: 79px; } + +.SimpleSnippet .title { + font-size: inherit; + margin: 0; } + +.SimpleSnippet .title-inline { + display: inline; } + +.SimpleSnippet .titleIcon { + background-repeat: no-repeat; + background-size: 14px; + background-position: center; + height: 16px; + width: 16px; + margin-top: 2px; + margin-inline-end: 2px; + display: inline-block; + vertical-align: top; } + +.SimpleSnippet .body { + display: inline; + margin: 0; } + +.SimpleSnippet.tall .icon { + margin-inline-end: 20px; } + +.SimpleSnippet.takeover .icon, .SimpleSnippet.bold .icon { + margin-inline-end: 20px; } + +.SimpleSnippet .icon { + align-self: flex-start; } + +.SimpleSnippet.has-section-header .innerWrapper { + flex-wrap: wrap; + padding-top: 7px; } + +.SimpleSnippet .innerContentWrapper { + align-items: center; + display: flex; } + +.SimpleSnippet .section-header { + flex: 0 0 100%; + margin-bottom: 10px; } + +.SimpleSnippet .section-title { + color: var(--newtab-section-header-text-color); + display: inline-block; + font-size: 13px; + font-weight: bold; + margin: 0; } + .SimpleSnippet .section-title a { + color: var(--newtab-section-header-text-color); + font-weight: inherit; + text-decoration: none; } + .SimpleSnippet .section-title .icon { + height: 16px; + margin-inline-end: 6px; + margin-top: -2px; + width: 16px; } + +.SubmitFormSnippet { + flex-direction: column; + flex: 1 1 100%; + width: 100%; } + .SubmitFormSnippet .disclaimerText { + margin: 5px 0 0; + font-size: 12px; + color: var(--newtab-text-secondary-color); } + .SubmitFormSnippet p { + margin: 0; } + .SubmitFormSnippet.send_to_device_snippet { + text-align: center; } + .SubmitFormSnippet.send_to_device_snippet .message { + font-size: 16px; + margin-bottom: 20px; } + .SubmitFormSnippet.send_to_device_snippet .scene2Title { + font-size: 24px; + display: block; } + .SubmitFormSnippet .ASRouterButton.primary { + flex: 1 1 0; } + .SubmitFormSnippet .scene2Icon { + width: 100%; + margin-bottom: 20px; } + .SubmitFormSnippet .scene2Icon img { + width: 98px; + display: inline-block; } + .SubmitFormSnippet .scene2Title { + font-size: inherit; + margin: 0 0 10px; + font-weight: bold; + display: inline; } + .SubmitFormSnippet form { + display: flex; + flex-direction: column; + width: 100%; } + .SubmitFormSnippet .message { + font-size: 14px; + align-self: stretch; + flex: 0 0 100%; + margin-bottom: 10px; } + .SubmitFormSnippet .privacyNotice { + font-size: 12px; + color: var(--newtab-text-secondary-color); + margin-top: 10px; + display: flex; + flex: 0 0 100%; } + .SubmitFormSnippet .innerWrapper { + max-width: 736px; + flex-wrap: wrap; + justify-items: center; + padding-top: 40px; + padding-bottom: 40px; } + .SubmitFormSnippet .footer { + width: 100%; + margin: 0 auto; + text-align: right; + background-color: var(--newtab-background-color); + padding: 10px 0; } + .SubmitFormSnippet .footer .footer-content { + margin: 0 auto; + max-width: 768px; + width: 100%; + text-align: right; } + [dir='rtl'] .SubmitFormSnippet .footer .footer-content { + text-align: left; } + .SubmitFormSnippet input.mainInput { + border-radius: 2px; + background-color: var(--newtab-textbox-background-color); + border: 1px solid var(--newtab-textbox-border); + padding: 0 8px; + height: 100%; + font-size: 14px; + width: 50%; } + .SubmitFormSnippet input.mainInput.clean:invalid, .SubmitFormSnippet input.mainInput.clean:required { + box-shadow: none; } + .SubmitFormSnippet input.mainInput:focus { + border: 1px solid var(--newtab-textbox-focus-color); + box-shadow: var(--newtab-textbox-focus-boxshadow); } + .SubmitFormSnippet.scene2Alt { + text-align: start; } + .SubmitFormSnippet.scene2Alt .scene2Icon { + flex: 1; + margin-bottom: 0; } + .SubmitFormSnippet.scene2Alt .message { + flex: 5; + margin-bottom: 0; } + .SubmitFormSnippet.scene2Alt .message p { + margin-bottom: 10px; } + .SubmitFormSnippet.scene2Alt .section-header { + width: 100%; } + .SubmitFormSnippet.scene2Alt .section-header .icon { + width: 16px; + height: 16px; } + .SubmitFormSnippet.scene2Alt .section-title { + font-size: 13px; } + .SubmitFormSnippet.scene2Alt .section-title a { + color: var(--newtab-section-header-text-color); + font-weight: inherit; + text-decoration: none; } + .SubmitFormSnippet.scene2Alt .innerWrapper { + padding: 0 0 16px; } + +.submissionStatus { + text-align: center; + font-size: 14px; + padding: 20px 0; } + .submissionStatus .submitStatusTitle { + font-size: 20px; } + +.EOYSnippetForm { + margin: 10px 0 8px; + align-self: start; + font-size: 14px; + display: flex; + align-items: center; } + .EOYSnippetForm .donation-amount, + .EOYSnippetForm .donation-form-url { + white-space: nowrap; + font-size: 14px; + padding: 8px 20px; + border-radius: 2px; } + .EOYSnippetForm .donation-amount { + color: #0C0C0D; + margin-inline-end: 18px; + border: 1px solid #B1B1B3; + padding: 5px 14px; + background: #F9F9FA; + cursor: pointer; } + .EOYSnippetForm input[type='radio'] { + opacity: 0; + margin-inline-end: -18px; } + .EOYSnippetForm input[type='radio']:checked + .donation-amount { + background: #737373; + color: #FFF; + border: 1px solid #4A4A4F; } + .EOYSnippetForm input[type='radio']:checked:focus + .donation-amount, + .EOYSnippetForm input[type='radio']:not(:checked):focus + .donation-amount { + border: 1px dotted var(--newtab-link-primary-color); } + .EOYSnippetForm .monthly-checkbox-container { + display: flex; + width: 100%; } + .EOYSnippetForm .donation-form-url { + margin-inline-start: 18px; + align-self: flex-end; + display: flex; } |