@charset "UTF-8"; /* 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-button-primary-color: #0060DF; --newtab-button-secondary-color: inherit; --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-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-text-tertiary-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-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-icon-color: rgba(12, 12, 13, 0.4); --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-card-active-outline-color: #D7D7DB; --newtab-card-background-color: #FFF; --newtab-card-hairline-color: rgba(0, 0, 0, 0.1); --newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); --newtab-snippets-background-color: #FFF; --newtab-snippets-hairline-color: transparent; } .dark-theme { --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-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-text-tertiary-color: rgba(249, 249, 250, 0.6); --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-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-icon-color: rgba(249, 249, 250, 0.6); --newtab-topsites-background-color: #38383D; --newtab-topsites-icon-shadow: none; --newtab-topsites-label-color: rgba(249, 249, 250, 0.8); --newtab-card-active-outline-color: #4A4A4F; --newtab-card-background-color: #38383D; --newtab-card-hairline-color: rgba(249, 249, 250, 0.1); --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); } .icon { background-position: center center; background-repeat: no-repeat; background-size: 16px; -moz-context-properties: fill; display: inline-block; fill: var(--newtab-icon-primary-color); height: 16px; vertical-align: middle; width: 16px; } .icon.icon-spacer { margin-inline-end: 8px; } .icon.icon-small-spacer { margin-inline-end: 6px; } .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 { fill: var(--newtab-icon-secondary-color); background-image: url("../data/content/assets/glyph-cancel-16.svg"); } .icon.icon-delete { background-image: url("../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("../data/content/assets/glyph-modal-delete-32.svg"); background-size: 32px; height: 32px; width: 32px; } .icon.icon-dismiss { background-image: url("../data/content/assets/glyph-dismiss-16.svg"); } .icon.icon-info { background-image: url("../data/content/assets/glyph-info-16.svg"); } .icon.icon-import { background-image: url("../data/content/assets/glyph-import-16.svg"); } .icon.icon-new-window { background-image: url("../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://browser/skin/settings.svg"); } .icon.icon-pin { background-image: url("../data/content/assets/glyph-pin-16.svg"); } .icon.icon-pin:dir(rtl) { transform: scaleX(-1); } .icon.icon-unpin { background-image: url("../data/content/assets/glyph-unpin-16.svg"); } .icon.icon-unpin:dir(rtl) { transform: scaleX(-1); } .icon.icon-edit { background-image: url("../data/content/assets/glyph-edit-16.svg"); } .icon.icon-pocket { background-image: url("../data/content/assets/glyph-pocket-16.svg"); } .icon.icon-historyItem { background-image: url("../data/content/assets/glyph-historyItem-16.svg"); } .icon.icon-trending { background-image: url("../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("../data/content/assets/glyph-topsites-16.svg"); } .icon.icon-pin-small { background-image: url("../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://browser/skin/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("../data/content/assets/glyph-open-file-16.svg"); } .icon.icon-download-folder { background-image: url("../data/content/assets/glyph-download-icon.svg"); background-size: 100%; } .icon.icon-webextension { background-image: url("../data/content/assets/glyph-webextension-16.svg"); } .icon.icon-highlights { background-image: url("../data/content/assets/glyph-highlights-16.svg"); } .icon.icon-arrowhead-down { background-image: url("../data/content/assets/glyph-arrowhead-down-16.svg"); } .icon.icon-arrowhead-down-small { background-image: url("../data/content/assets/glyph-arrowhead-down-12.svg"); background-size: 12px; height: 12px; width: 12px; } .icon.icon-arrowhead-forward-small { background-image: url("../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("../data/content/assets/glyph-arrowhead-down-16.svg"); transform: rotate(180deg); } .icon.icon-add { background-image: url("../data/content/assets/glyph-add-16.svg"); } .icon.icon-minimize { background-image: url("../data/content/assets/glyph-minimize-16.svg"); } .icon.icon-maximize { background-image: url("../data/content/assets/glyph-maximize-16.svg"); } html { height: 100%; } body, #root { min-height: 100vh; } body { background-color: var(--newtab-background-color); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif; font-size: 16px; overflow-y: scroll; } h1, h2 { font-weight: normal; } a { text-decoration: none; } .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .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), .actions button:hover: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; } #snippets-container { z-index: 1; } .outer-wrapper { color: var(--newtab-text-primary-color); display: flex; flex-grow: 1; min-height: 100vh; padding: 30px 32px 32px; } .outer-wrapper.fixed-to-top { display: block; } .outer-wrapper a { color: var(--newtab-link-primary-color); } main { margin: auto; padding-bottom: 68px; width: 274px; } @media (min-width: 482px) { main { width: 402px; } } @media (min-width: 610px) { main { width: 530px; } } @media (min-width: 866px) { main { width: 786px; } } @media (min-width: 1122px) { main { width: 1042px; } } main section { margin-bottom: 20px; position: relative; } .base-content-fallback { height: 100vh; } .body-wrapper .section-title, .body-wrapper .sections-list .section:last-of-type, .body-wrapper .topic { opacity: 0; } .body-wrapper.on .section-title, .body-wrapper.on .sections-list .section:last-of-type, .body-wrapper.on .topic { opacity: 1; } .non-collapsible-section { padding: 0 25px; } .prefs-button button { background-color: transparent; border: 0; cursor: pointer; fill: var(--newtab-icon-primary-color); offset-inline-end: 15px; padding: 15px; position: fixed; top: 15px; z-index: 12001; } .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); } .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 a { color: var(--newtab-text-conditional-color); text-decoration: underline; } .top-sites { margin-bottom: 2px; } .top-sites-list { list-style: none; margin: 0 -16px; padding: 0; } @media (max-width: 482px) { .top-sites-list :nth-child(2n+1) .context-menu { margin-inline-end: auto; margin-inline-start: auto; offset-inline-end: auto; offset-inline-start: -32px; } .top-sites-list :nth-child(2n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; offset-inline-end: 0; offset-inline-start: auto; } } @media (min-width: 482px) and (max-width: 610px) { .top-sites-list :nth-child(3n+2) .context-menu, .top-sites-list :nth-child(3n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-inline-start: auto; } } @media not all and (min-width: 1122px) { .top-sites-list .hide-for-narrow { display: none; } } .top-sites-list li { margin: 0 0 8px; } .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.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; } .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button { opacity: 1; transform: scale(1); } .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 .top-site-inner > a:-moz-any(.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; } .top-site-outer .context-menu-button { background-clip: padding-box; background-color: var(--newtab-contextmenu-button-color); background-image: url("chrome://browser/skin/page-action.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; offset-inline-end: -13.5px; opacity: 0; position: absolute; top: -13.5px; transform: scale(0.25); transition-duration: 200ms; transition-property: transform, opacity; width: 27px; } .top-site-outer .context-menu-button:-moz-any(:active, :focus) { opacity: 1; transform: scale(1); } .top-site-outer .tile { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), var(--newtab-card-shadow); height: 96px; position: relative; width: 96px; 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::before { content: attr(data-fallback); } .top-site-outer .screenshot { background-color: #FFF; background-position: top left; background-size: cover; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 1s; width: 100%; } .top-site-outer .screenshot.active { opacity: 1; } .top-site-outer .top-site-icon { background-color: var(--newtab-topsites-background-color); background-position: center center; background-repeat: no-repeat; border-radius: 6px; box-shadow: var(--newtab-topsites-icon-shadow); position: absolute; } .top-site-outer .rich-icon { background-size: cover; height: 100%; offset-inline-start: 0; top: 0; width: 100%; } .top-site-outer .default-icon { background-size: 32px; bottom: -6px; height: 42px; offset-inline-end: -6px; width: 42px; align-items: center; display: flex; font-size: 20px; justify-content: center; } .top-site-outer .default-icon[data-fallback]::before { content: attr(data-fallback); } .top-site-outer .title { color: var(--newtab-topsites-label-color); font: message-box; height: 30px; line-height: 30px; text-align: center; width: 96px; position: relative; } .top-site-outer .title .icon { fill: var(--newtab-icon-tertiary-color); offset-inline-start: 0; position: absolute; top: 10px; } .top-site-outer .title span { height: 30px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-site-outer .title.pinned span { padding: 0 13px; } .top-site-outer .edit-button { background-image: url("../data/content/assets/glyph-edit-16.svg"); } .top-site-outer.placeholder .tile { box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); } .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; position: fixed; right: 0; top: 40px; width: 274px; } @media (min-width: 482px) { .edit-topsites-wrapper .modal { width: 402px; } } @media (min-width: 610px) { .edit-topsites-wrapper .modal { width: 530px; } } @media (min-width: 866px) { .edit-topsites-wrapper .modal { width: 786px; } } .topsite-form .form-input-container { max-width: 492px; margin: 0 auto; padding: 32px; } .topsite-form .form-input-container .top-site-outer { padding: 0; margin: 24px 0 0; margin-inline-start: 32px; pointer-events: none; } .topsite-form .form-input-container .section-title { text-transform: none; font-size: 16px; margin: 0 0 16px; } .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%; offset-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 .enable-custom-image-input:hover { text-decoration: underline; } .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%; offset-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']:focus { border: 1px solid var(--newtab-textbox-focus-color); box-shadow: var(--newtab-textbox-focus-boxshadow); } .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; offset-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; offset-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: 482px) { .topsite-form .fields-and-preview { flex-direction: column; } .topsite-form .fields-and-preview .top-site-outer { margin-inline-start: 0; } } @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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-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; offset-inline-end: 0; offset-inline-start: auto; } } @media (min-width: 1122px) and (max-width: 1570px) { .sections-list .section-list :nth-child(3n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; offset-inline-end: 0; offset-inline-start: auto; } } @media (min-width: 1122px) { .sections-list .section-list { grid-template-columns: repeat(auto-fit, 309px); } } .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; } } .topic { color: var(--newtab-section-navigation-text-color); font-size: 12px; line-height: 1.6; margin-top: 12px; } @media (min-width: 866px) { .topic { line-height: 16px; } } .topic ul { margin: 0; padding: 0; } @media (min-width: 866px) { .topic ul { display: inline; padding-inline-start: 12px; } } .topic ul li { display: inline-block; } .topic ul li::after { content: '•'; padding: 8px; } .topic ul li:last-child::after { content: none; } .topic .topic-link { color: var(--newtab-link-secondary-color); font-weight: bold; } .topic .topic-read-more { color: var(--newtab-link-secondary-color); font-weight: bold; } @media (min-width: 866px) { .topic .topic-read-more { float: right; } .topic .topic-read-more:dir(rtl) { float: left; } } .topic .topic-read-more::after { background: url("../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; } .topic .topic-read-more:dir(rtl)::after { transform: scaleX(-1); } .topic::after { clear: both; content: ''; display: table; } .search-wrapper { cursor: default; display: flex; height: 35px; margin-bottom: 20px; position: relative; width: 100%; } .search-wrapper input { background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 8px center/18px no-repeat; 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: 36px; padding-inline-start: 34px; width: 100%; } .search-wrapper input:dir(rtl) { background-position-x: right 8px; } .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: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%; offset-inline-end: 0; position: absolute; width: 36px; } .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); } .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); } .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; offset-inline-start: 100%; position: absolute; top: 6.75px; z-index: 10000; } .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 { align-items: center; color: inherit; cursor: pointer; display: flex; line-height: 16px; outline: none; padding: 3px 12px; white-space: nowrap; } .context-menu > ul > li > a:-moz-any(:focus, :hover) { background: var(--newtab-element-hover-color); } .context-menu > ul > li > a:active { background: var(--newtab-element-active-color); } .context-menu > ul > li > a.disabled { opacity: 0.4; pointer-events: none; } .confirmation-dialog .modal { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); left: 50%; margin-left: -200px; position: fixed; 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; } .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://browser/skin/page-action.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; offset-inline-end: -13.5px; opacity: 0; position: absolute; top: -13.5px; transform: scale(0.25); transition-duration: 200ms; transition-property: transform, opacity; width: 27px; } .card-outer .context-menu-button:-moz-any(: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 .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:-moz-any(.active, :focus) .card { box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; } .card-outer > a:-moz-any(.active, :focus) .card-title { color: var(--newtab-link-primary-color); } .card-outer:-moz-any(:hover, :focus, .active):not(.placeholder) { box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; outline: none; } .card-outer:-moz-any(:hover, :focus, .active):not(.placeholder) .context-menu-button { opacity: 1; transform: scale(1); } .card-outer:-moz-any(:hover, :focus, .active):not(.placeholder) .card-title { color: var(--newtab-link-primary-color); } .card-outer:-moz-any(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name { display: none; } .card-outer:-moz-any(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate { display: block; } .card-outer .card-preview-image-outer { border-radius: 3px 3px 0 0; height: 122px; overflow: hidden; position: relative; } .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-details.no-image { padding-top: 16px; } .card-outer .card-text { max-height: 78px; overflow: hidden; } .card-outer .card-text.no-image { max-height: 192px; } .card-outer .card-text.no-host-name, .card-outer .card-text.no-context { max-height: 97px; } .card-outer .card-text.no-image.no-host-name, .card-outer .card-text.no-image.no-context { max-height: 211px; } .card-outer .card-text.no-host-name.no-context { max-height: 116px; } .card-outer .card-text.no-image.no-host-name.no-context { max-height: 230px; } .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; } .card-outer .card-host-name.alternate { display: none; } .card-outer .card-download-icon { float: inline-end; margin-inline-start: 15px; margin-top: 2px; } .card-outer .card-download-icon.icon-download-folder { height: 36px; width: 36px; } .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-tertiary-color); display: flex; font-size: 11px; left: 0; padding: 9px 16px 9px 14px; position: absolute; right: 0; } .card-outer .card-context-icon { fill: var(--newtab-icon-tertiary-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) { .card-outer { height: 370px; } .card-outer .card-preview-image-outer { height: 155px; } .card-outer .card-details { padding: 13px 16px 12px; } .card-outer .card-text { max-height: 140px; } .card-outer .card-host-name { font-size: 12px; padding-bottom: 5px; } .card-outer .card-download-icon.icon-download-folder { height: 54px; width: 54px; } .card-outer .card-title { font-size: 17px; line-height: 23px; margin-bottom: 0; } .card-outer .card-text:not(.no-description) .card-title { max-height: 69px; } .card-outer .card-description { font-size: 15px; line-height: 23px; } .card-outer .card-context { bottom: 4px; font-size: 14px; } } .manual-migration-container { color: var(--newtab-text-conditional-color); font-size: 13px; line-height: 15px; margin-bottom: 20px; text-align: center; } @media (min-width: 610px) { .manual-migration-container { display: flex; justify-content: space-between; text-align: left; } } .manual-migration-container p { margin: 0; } @media (min-width: 610px) { .manual-migration-container p { align-self: center; display: flex; justify-content: space-between; } } .manual-migration-container .icon { display: none; } @media (min-width: 610px) { .manual-migration-container .icon { align-self: center; display: block; fill: var(--newtab-icon-secondary-color); margin-inline-end: 6px; } } .manual-migration-actions { border: 0; display: block; flex-wrap: nowrap; } @media (min-width: 610px) { .manual-migration-actions { display: flex; justify-content: space-between; padding: 0; } } .manual-migration-actions button { align-self: center; height: 26px; margin: 0; margin-inline-start: 20px; padding: 0 12px; } .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; text-transform: uppercase; } .collapsible-section .section-title span { color: var(--newtab-section-header-text-color); display: inline-block; fill: var(--newtab-section-header-text-color); vertical-align: middle; } .collapsible-section .section-title .click-target { cursor: pointer; vertical-align: top; white-space: nowrap; } .collapsible-section .section-title .collapsible-arrow { margin-inline-start: 8px; margin-top: -1px; } .collapsible-section .section-top-bar { height: 19px; margin-bottom: 13px; position: relative; } .collapsible-section .section-top-bar .context-menu-button { background: url("chrome://browser/skin/page-action.svg") no-repeat right center; border: 0; cursor: pointer; fill: var(--newtab-section-header-text-color); height: 100%; offset-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:-moz-any(:active, :focus, :hover) { fill: #0C0C0D; 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; offset-inline-end: 0; offset-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 .section-disclaimer { color: var(--newtab-text-conditional-color); font-size: 13px; margin-bottom: 16px; position: relative; } .collapsible-section .section-disclaimer .section-disclaimer-text { display: inline-block; min-height: 26px; width: calc(100% - 130px); } @media (max-width: 610px) { .collapsible-section .section-disclaimer .section-disclaimer-text { width: 224px; } } .collapsible-section .section-disclaimer a { color: var(--newtab-link-primary-color); font-weight: bold; padding-left: 3px; } .collapsible-section .section-disclaimer button { background: var(--newtab-button-secondary-color); border: 1px solid #B1B1B3; border-radius: 4px; cursor: pointer; margin-top: 2px; max-width: 130px; min-height: 26px; offset-inline-end: 0; } .collapsible-section .section-disclaimer button:hover:not(.dismiss) { box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; } @media (min-width: 482px) { .collapsible-section .section-disclaimer button { position: absolute; } } .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; } .asrouter-admin { max-width: 996px; margin: 0 auto; font-size: 14px; display: inherit; padding: 0 0 92px; } .asrouter-admin h1 { font-weight: 200; font-size: 32px; } .asrouter-admin table { border-collapse: collapse; width: 100%; } .asrouter-admin .message-item:first-child td { border-top: 1px solid var(--newtab-border-secondary-color); } .asrouter-admin .message-item td { vertical-align: top; border-bottom: 1px solid var(--newtab-border-secondary-color); padding: 8px; } .asrouter-admin .message-item td:first-child { border-left: 1px solid var(--newtab-border-secondary-color); } .asrouter-admin .message-item td:last-child { border-right: 1px solid var(--newtab-border-secondary-color); } .asrouter-admin .message-item.current .message-id span { background: #FFE900; padding: 2px 5px; } .dark-theme .asrouter-admin .message-item.current .message-id span { color: #000; } .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 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; } .ASRouterButton { white-space: nowrap; border-radius: 4px; border: 1px solid var(--newtab-border-secondary-color); background-color: var(--newtab-button-secondary-color); font-family: inherit; padding: 8px 15px; margin-left: 12px; color: inherit; } .SnippetBaseContainer { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--newtab-snippets-background-color); color: var(--newtab-text-primary-color); font-size: 12px; line-height: 16px; 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 .innerWrapper { margin: 0 auto; display: flex; align-items: center; padding: 12px 25px; padding-inline-end: 36px; max-width: 786px; } @media (min-width: 866px) { .SnippetBaseContainer .innerWrapper { padding-inline-end: 25px; } } @media (min-width: 1122px) { .SnippetBaseContainer .innerWrapper { max-width: 1042px; } } .SnippetBaseContainer .blockButton { display: none; background: none; border: 0; position: absolute; top: 50%; offset-inline-end: 12px; height: 16px; width: 16px; background-image: url("resource://activity-stream/data/content/assets/glyph-dismiss-16.svg"); -moz-context-properties: fill; fill: var(--newtab-icon-primary-color); opacity: 0.5; margin-top: -8px; padding: 0; cursor: pointer; } @media (min-width: 766px) { .SnippetBaseContainer .blockButton { offset-inline-end: 24px; } } .SnippetBaseContainer:hover .blockButton { display: block; } .SimpleSnippet .title { display: inline; font-size: inherit; margin: 0; } .SimpleSnippet .body { display: inline; margin: 0; } .SimpleSnippet .icon { height: 42px; width: 42px; margin-inline-end: 12px; flex-shrink: 0; } /*# sourceMappingURL=activity-stream-linux.css.map */