{ "version": 3, "file": "activity-stream-windows.css", "sources": [ "../content-src/styles/activity-stream-windows.scss", "../content-src/styles/_activity-stream.scss", "../content-src/styles/_normalize.scss", "../content-src/styles/_variables.scss", "../content-src/styles/_theme.scss", "../content-src/styles/_icons.scss", "../content-src/styles/_mixins.scss", "../content-src/components/Base/_Base.scss", "../content-src/components/ErrorBoundary/_ErrorBoundary.scss", "../content-src/components/TopSites/_TopSites.scss", "../content-src/components/Sections/_Sections.scss", "../content-src/components/Topics/_Topics.scss", "../content-src/components/Search/_Search.scss", "../content-src/components/ContextMenu/_ContextMenu.scss", "../content-src/components/ConfirmDialog/_ConfirmDialog.scss", "../content-src/components/Card/_Card.scss", "../content-src/components/ManualMigration/_ManualMigration.scss", "../content-src/components/CollapsibleSection/_CollapsibleSection.scss", "../content-src/components/ASRouterAdmin/ASRouterAdmin.scss", "../content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss", "../content-src/components/MoreRecommendations/_MoreRecommendations.scss", "../content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss", "../content-src/components/DarkModeMessage/_DarkModeMessage.scss", "../content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss", "../content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss", "../content-src/components/DiscoveryStreamComponents/HorizontalRule/_HorizontalRule.scss", "../content-src/components/DiscoveryStreamComponents/List/_List.scss", "../content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss", "../content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss", "../content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss", "../content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss", "../content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss", "../content-src/asrouter/components/Button/_Button.scss", "../content-src/asrouter/components/SnippetBase/_SnippetBase.scss", "../content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss", "../content-src/asrouter/templates/ReturnToAMO/_ReturnToAMO.scss", "../content-src/asrouter/templates/SimpleSnippet/_SimpleSnippet.scss", "../content-src/asrouter/templates/SubmitFormSnippet/_SubmitFormSnippet.scss", "../content-src/asrouter/templates/OnboardingMessage/_OnboardingMessage.scss", "../content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss", "../content-src/asrouter/templates/StartupOverlay/_StartupOverlay.scss" ], "sourcesContent": [ "/* This is the windows variant */ // sass-lint:disable-line no-css-comments\n\n$os-infopanel-arrow-height: 10px;\n$os-infopanel-arrow-offset-end: 6px;\n$os-infopanel-arrow-width: 20px;\n\n@import './activity-stream';\n", "@import './normalize';\n@import './variables';\n@import './theme';\n@import './icons';\n@import './mixins';\n\nhtml {\n height: 100%;\n}\n\nbody,\n#root { // sass-lint:disable-line no-ids\n min-height: 100vh;\n}\n\nbody {\n background-color: var(--newtab-background-color);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;\n font-size: 16px;\n overflow-y: scroll;\n}\n\nh1,\nh2 {\n font-weight: normal;\n}\n\na {\n text-decoration: none;\n}\n\n// For screen readers\n.sr-only {\n border: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.inner-border {\n border: $border-secondary;\n border-radius: $border-radius;\n height: 100%;\n left: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 100;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.show-on-init {\n opacity: 0;\n transition: opacity 0.2s ease-in;\n\n &.on {\n animation: fadeIn 0.2s;\n opacity: 1;\n }\n}\n\n.actions {\n border-top: $border-secondary;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin: 0;\n padding: 15px 25px 0;\n}\n\n// Default button (grey)\n.button,\n.actions button {\n background-color: var(--newtab-button-secondary-color);\n border: $border-primary;\n border-radius: 4px;\n color: inherit;\n cursor: pointer;\n margin-bottom: 15px;\n padding: 10px 30px;\n white-space: nowrap;\n\n &:hover:not(.dismiss) {\n box-shadow: $shadow-primary;\n transition: box-shadow 150ms;\n }\n\n &.dismiss {\n background-color: transparent;\n border: 0;\n padding: 0;\n text-decoration: underline;\n }\n\n // Blue button\n &.primary,\n &.done {\n background-color: var(--newtab-button-primary-color);\n border: solid 1px var(--newtab-button-primary-color);\n color: $white;\n margin-inline-start: auto;\n }\n}\n\ninput {\n &[type='text'],\n &[type='search'] {\n border-radius: $border-radius;\n }\n}\n\n// Make sure snippets show up above other UI elements\n#snippets-container { // sass-lint:disable-line no-ids\n z-index: 1;\n}\n\n// Components\n@import '../components/Base/Base';\n@import '../components/ErrorBoundary/ErrorBoundary';\n@import '../components/TopSites/TopSites';\n@import '../components/Sections/Sections';\n@import '../components/Topics/Topics';\n@import '../components/Search/Search';\n@import '../components/ContextMenu/ContextMenu';\n@import '../components/ConfirmDialog/ConfirmDialog';\n@import '../components/Card/Card';\n@import '../components/ManualMigration/ManualMigration';\n@import '../components/CollapsibleSection/CollapsibleSection';\n@import '../components/ASRouterAdmin/ASRouterAdmin';\n@import '../components/PocketLoggedInCta/PocketLoggedInCta';\n@import '../components/MoreRecommendations/MoreRecommendations';\n@import '../components/DiscoveryStreamBase/DiscoveryStreamBase';\n@import '../components/DarkModeMessage/DarkModeMessage';\n\n// Discovery Stream Components\n@import '../components/DiscoveryStreamComponents/CardGrid/CardGrid';\n@import '../components/DiscoveryStreamComponents/Hero/Hero';\n@import '../components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule';\n@import '../components/DiscoveryStreamComponents/List/List';\n@import '../components/DiscoveryStreamComponents/Navigation/Navigation';\n@import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle';\n@import '../components/DiscoveryStreamComponents/TopSites/TopSites';\n@import '../components/DiscoveryStreamComponents/DSCard/DSCard';\n@import '../components/DiscoveryStreamComponents/DSMessage/DSMessage';\n\n// AS Router\n@import '../asrouter/components/Button/Button';\n@import '../asrouter/components/SnippetBase/SnippetBase';\n@import '../asrouter/components/ModalOverlay/ModalOverlay';\n@import '../asrouter/templates/ReturnToAMO/ReturnToAMO';\n@import '../asrouter/templates/SimpleSnippet/SimpleSnippet';\n@import '../asrouter/templates/SubmitFormSnippet/SubmitFormSnippet';\n@import '../asrouter/templates/OnboardingMessage/OnboardingMessage';\n@import '../asrouter/templates/EOYSnippet/EOYSnippet';\n@import '../asrouter/templates/StartupOverlay/StartupOverlay';\n", "html {\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\n*::-moz-focus-inner {\n border: 0;\n}\n\nbody {\n margin: 0;\n}\n\nbutton,\ninput {\n background-color: inherit;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n}\n\n[hidden] {\n display: none !important; // sass-lint:disable-line no-important\n}\n", "// Photon colors from http://design.firefox.com/photon/visuals/color.html\n$blue-40: #45A1FF;\n$blue-50: #0A84FF;\n$blue-60: #0060DF;\n$blue-70: #003EAA;\n$blue-80: #002275;\n$grey-10: #F9F9FA;\n$grey-20: #EDEDF0;\n$grey-30: #D7D7DB;\n$grey-40: #B1B1B3;\n$grey-50: #737373;\n$grey-60: #4A4A4F;\n$grey-70: #38383D;\n$grey-80: #2A2A2E;\n$grey-90: #0C0C0D;\n$teal-70: #008EA4;\n$teal-80: #005A71;\n$red-60: #D70022;\n$yellow-50: #FFE900;\n\n// Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity\n$grey-10-10: rgba($grey-10, 0.1);\n$grey-10-20: rgba($grey-10, 0.2);\n$grey-10-30: rgba($grey-10, 0.3);\n$grey-10-40: rgba($grey-10, 0.4);\n$grey-10-50: rgba($grey-10, 0.5);\n$grey-10-60: rgba($grey-10, 0.6);\n$grey-10-80: rgba($grey-10, 0.8);\n$grey-10-95: rgba($grey-10, 0.95);\n$grey-20-60: rgba($grey-20, 0.6);\n$grey-20-80: rgba($grey-20, 0.8);\n$grey-30-60: rgba($grey-30, 0.6);\n$grey-60-60: rgba($grey-60, 0.6);\n$grey-60-70: rgba($grey-60, 0.7);\n$grey-80-95: rgba($grey-80, 0.95);\n$grey-90-10: rgba($grey-90, 0.1);\n$grey-90-20: rgba($grey-90, 0.2);\n$grey-90-30: rgba($grey-90, 0.3);\n$grey-90-40: rgba($grey-90, 0.4);\n$grey-90-50: rgba($grey-90, 0.5);\n$grey-90-60: rgba($grey-90, 0.6);\n$grey-90-70: rgba($grey-90, 0.7);\n$grey-90-80: rgba($grey-90, 0.8);\n$grey-90-90: rgba($grey-90, 0.9);\n\n$black: #000;\n$black-5: rgba($black, 0.05);\n$black-10: rgba($black, 0.1);\n$black-12: rgba($black, 0.12);\n$black-15: rgba($black, 0.15);\n$black-20: rgba($black, 0.2);\n$black-25: rgba($black, 0.25);\n$black-30: rgba($black, 0.3);\n\n// Other colors\n$white: #FFF;\n$white-10: rgba($white, 0.1);\n$pocket-teal: #50BCB6;\n$pocket-red: #EF4056;\n$bookmark-icon-fill: #0A84FF;\n$download-icon-fill: #12BC00;\n$pocket-icon-fill: #D70022;\n$email-input-focus: rgba($blue-50, 0.3);\n$email-input-invalid: rgba($red-60, 0.3);\n$aw-extra-blue-1: #004EC2;\n$aw-extra-blue-2: #0080FF;\n$aw-extra-blue-3: #00C7FF;\n$about-welcome-gradient: linear-gradient(to bottom, $blue-70 40%, $aw-extra-blue-1 60%, $blue-60 80%, $aw-extra-blue-2 90%, $aw-extra-blue-3 100%);\n$about-welcome-extra-links: #676F7E;\n$firefox-wordmark-default-color: #363959;\n$firefox-wordmark-darktheme-color: $white;\n\n// Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html\n$photon-easing: cubic-bezier(0.07, 0.95, 0, 1);\n\n$border-radius: 3px;\n\n// Grid related styles\n$base-gutter: 32px;\n$section-horizontal-padding: 25px;\n$section-vertical-padding: 10px;\n$section-spacing: 40px - $section-vertical-padding * 2;\n$grid-unit: 96px; // 1 top site\n\n$icon-size: 16px;\n$smaller-icon-size: 12px;\n$larger-icon-size: 32px;\n\n$searchbar-width-small: $grid-unit * 2 + $base-gutter * 1;\n$searchbar-width-medium: $grid-unit * 4 + $base-gutter * 3;\n$searchbar-width-large: $grid-unit * 6 + $base-gutter * 5;\n\n$wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $section-horizontal-padding * 2; // 2 top sites\n$wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $section-horizontal-padding * 2; // 4 top sites\n$wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $section-horizontal-padding * 2; // 6 top sites\n$wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $section-horizontal-padding * 2; // 8 top sites\n// For the breakpoints, we need to add space for the scrollbar to avoid weird\n// layout issues when the scrollbar is visible. 16px is wide enough to cover all\n// OSes and keeps it simpler than a per-OS value.\n$scrollbar-width: 16px;\n\n// Breakpoints\n$break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width;\n$break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width;\n$break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width;\n\n$section-title-font-size: 13px;\n\n$card-width: $grid-unit * 2 + $base-gutter;\n$card-height: 266px;\n$card-preview-image-height: 122px;\n$card-title-margin: 2px;\n$card-text-line-height: 19px;\n// Larger cards for wider screens:\n$card-width-large: 309px;\n$card-height-large: 370px;\n$card-preview-image-height-large: 155px;\n// Compact cards for Highlights\n$card-height-compact: 160px;\n$card-preview-image-height-compact: 108px;\n\n$topic-margin-top: 12px;\n\n$context-menu-button-size: 27px;\n$context-menu-button-boxshadow: 0 2px $grey-90-10;\n$context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20;\n$context-menu-font-size: 14px;\n$context-menu-border-radius: 5px;\n$context-menu-outer-padding: 5px;\n$context-menu-item-padding: 3px 12px;\n\n$error-fallback-font-size: 12px;\n$error-fallback-line-height: 1.5;\n\n$image-path: '../data/content/assets/';\n\n$snippets-container-height: 120px;\n\n$textbox-shadow-size: 4px;\n\n@mixin fade-in {\n box-shadow: inset $inner-box-shadow, $shadow-primary;\n transition: box-shadow 150ms;\n}\n\n@mixin fade-in-card {\n box-shadow: $shadow-primary;\n transition: box-shadow 150ms;\n}\n\n@mixin context-menu-button {\n .context-menu-button {\n background-clip: padding-box;\n background-color: var(--newtab-contextmenu-button-color);\n background-image: url('chrome://browser/skin/page-action.svg');\n background-position: 55%;\n border: $border-primary;\n border-radius: 100%;\n box-shadow: $context-menu-button-boxshadow;\n cursor: pointer;\n fill: var(--newtab-icon-primary-color);\n height: $context-menu-button-size;\n inset-inline-end: -($context-menu-button-size / 2);\n opacity: 0;\n position: absolute;\n top: -($context-menu-button-size / 2);\n transform: scale(0.25);\n transition-duration: 150ms;\n transition-property: transform, opacity;\n width: $context-menu-button-size;\n\n &:-moz-any(:active, :focus) {\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n\n@mixin context-menu-button-hover {\n .context-menu-button {\n opacity: 1;\n transform: scale(1);\n transition-delay: 333ms;\n }\n}\n\n@mixin context-menu-open-middle {\n .context-menu {\n margin-inline-end: auto;\n margin-inline-start: auto;\n inset-inline-end: auto;\n inset-inline-start: -$base-gutter;\n }\n}\n\n@mixin context-menu-open-left {\n .context-menu {\n margin-inline-end: 5px;\n margin-inline-start: auto;\n inset-inline-end: 0;\n inset-inline-start: auto;\n }\n}\n\n@mixin flip-icon {\n &:dir(rtl) {\n transform: scaleX(-1);\n }\n}\n", "@function textbox-shadow($color) {\n @return 0 0 0 1px $color, 0 0 0 $textbox-shadow-size rgba($color, 0.3);\n}\n\n@mixin textbox-focus($color) {\n --newtab-textbox-focus-color: #{$color};\n --newtab-textbox-focus-boxshadow: #{textbox-shadow($color)};\n}\n\n// scss variables related to the theme.\n$border-primary: 1px solid var(--newtab-border-primary-color);\n$border-secondary: 1px solid var(--newtab-border-secondary-color);\n$inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color);\n$input-border: 1px solid var(--newtab-textbox-border);\n$input-border-active: 1px solid var(--newtab-textbox-focus-color);\n$input-error-border: 1px solid $red-60;\n$input-error-boxshadow: textbox-shadow($red-60);\n$shadow-primary: 0 0 0 5px var(--newtab-card-active-outline-color);\n$shadow-secondary: 0 1px 4px 0 $grey-90-20;\n\n// Default theme\nbody {\n // General styles\n --newtab-background-color: #{$grey-10};\n --newtab-border-primary-color: #{$grey-40};\n --newtab-border-secondary-color: #{$grey-30};\n --newtab-button-primary-color: #{$blue-60};\n --newtab-button-secondary-color: inherit;\n --newtab-element-active-color: #{$grey-30-60};\n --newtab-element-hover-color: #{$grey-20};\n --newtab-icon-primary-color: #{$grey-90-80};\n --newtab-icon-secondary-color: #{$grey-90-60};\n --newtab-icon-tertiary-color: #{$grey-30};\n --newtab-inner-box-shadow-color: #{$black-10};\n --newtab-link-primary-color: #{$blue-60};\n --newtab-link-secondary-color: #{$teal-70};\n --newtab-text-conditional-color: #{$grey-60};\n --newtab-text-primary-color: #{$grey-90};\n --newtab-text-secondary-color: #{$grey-50};\n --newtab-textbox-background-color: #{$white};\n --newtab-textbox-border: #{$grey-90-20};\n @include textbox-focus($blue-60); // sass-lint:disable-line mixins-before-declarations\n\n // Context menu\n --newtab-contextmenu-background-color: #{$grey-10};\n --newtab-contextmenu-button-color: #{$white};\n\n // Modal + overlay\n --newtab-modal-color: #{$white};\n --newtab-overlay-color: #{$grey-20-80};\n\n // Sections\n --newtab-section-header-text-color: #{$grey-50};\n --newtab-section-navigation-text-color: #{$grey-50};\n --newtab-section-active-contextmenu-color: #{$grey-90};\n\n // Search\n --newtab-search-border-color: transparent;\n --newtab-search-dropdown-color: #{$white};\n --newtab-search-dropdown-header-color: #{$grey-10};\n --newtab-search-header-background-color: #{$grey-10-95};\n --newtab-search-icon-color: #{$grey-90-40};\n --newtab-search-wordmark-color: #{$firefox-wordmark-default-color};\n\n // Top Sites\n --newtab-topsites-background-color: #{$white};\n --newtab-topsites-icon-shadow: inset #{$inner-box-shadow};\n --newtab-topsites-label-color: inherit;\n\n // Cards\n --newtab-card-active-outline-color: #{$grey-30};\n --newtab-card-background-color: #{$white};\n --newtab-card-hairline-color: #{$black-10};\n --newtab-card-placeholder-color: #{$grey-30};\n --newtab-card-shadow: 0 1px 4px 0 #{$grey-90-10};\n\n // Snippets\n --newtab-snippets-background-color: #{$white};\n --newtab-snippets-hairline-color: transparent;\n\n &[lwt-newtab-brighttext]:not(.force-light-theme) {\n // General styles\n --newtab-background-color: #{$grey-80};\n --newtab-border-primary-color: #{$grey-10-80};\n --newtab-border-secondary-color: #{$grey-10-10};\n --newtab-button-primary-color: #{$blue-60};\n --newtab-button-secondary-color: #{$grey-70};\n --newtab-element-active-color: #{$grey-10-20};\n --newtab-element-hover-color: #{$grey-10-10};\n --newtab-icon-primary-color: #{$grey-10-80};\n --newtab-icon-secondary-color: #{$grey-10-40};\n --newtab-icon-tertiary-color: #{$grey-10-40};\n --newtab-inner-box-shadow-color: #{$grey-10-20};\n --newtab-link-primary-color: #{$blue-40};\n --newtab-link-secondary-color: #{$pocket-teal};\n --newtab-text-conditional-color: #{$grey-10};\n --newtab-text-primary-color: #{$grey-10};\n --newtab-text-secondary-color: #{$grey-10-80};\n --newtab-textbox-background-color: #{$grey-70};\n --newtab-textbox-border: #{$grey-10-20};\n @include textbox-focus($blue-40); // sass-lint:disable-line mixins-before-declarations\n\n // Context menu\n --newtab-contextmenu-background-color: #{$grey-60};\n --newtab-contextmenu-button-color: #{$grey-80};\n\n // Modal + overlay\n --newtab-modal-color: #{$grey-80};\n --newtab-overlay-color: #{$grey-90-80};\n\n // Sections\n --newtab-section-header-text-color: #{$grey-10-80};\n --newtab-section-navigation-text-color: #{$grey-10-80};\n --newtab-section-active-contextmenu-color: #{$white};\n\n // Search\n --newtab-search-border-color: #{$grey-10-20};\n --newtab-search-dropdown-color: #{$grey-70};\n --newtab-search-dropdown-header-color: #{$grey-60};\n --newtab-search-header-background-color: #{$grey-80-95};\n --newtab-search-icon-color: #{$grey-10-60};\n --newtab-search-wordmark-color: #{$firefox-wordmark-darktheme-color};\n\n // Top Sites\n --newtab-topsites-background-color: #{$grey-70};\n --newtab-topsites-icon-shadow: none;\n --newtab-topsites-label-color: #{$grey-10-80};\n\n // Cards\n --newtab-card-active-outline-color: #{$grey-60};\n --newtab-card-background-color: #{$grey-70};\n --newtab-card-hairline-color: #{$grey-10-10};\n --newtab-card-placeholder-color: #{$grey-60};\n --newtab-card-shadow: 0 1px 8px 0 #{$grey-90-20};\n\n // Snippets\n --newtab-snippets-background-color: #{$grey-70};\n --newtab-snippets-hairline-color: #{$white-10};\n }\n}\n", ".icon {\n background-position: center center;\n background-repeat: no-repeat;\n background-size: $icon-size;\n -moz-context-properties: fill;\n display: inline-block;\n fill: var(--newtab-icon-primary-color);\n height: $icon-size;\n vertical-align: middle;\n width: $icon-size;\n\n &.icon-spacer {\n margin-inline-end: 8px;\n }\n\n &.icon-small-spacer {\n margin-inline-end: 6px;\n }\n\n &.icon-bookmark-added {\n background-image: url('chrome://browser/skin/bookmark.svg');\n }\n\n &.icon-bookmark-hollow {\n background-image: url('chrome://browser/skin/bookmark-hollow.svg');\n }\n\n &.icon-clear-input {\n fill: var(--newtab-icon-secondary-color);\n background-image: url('#{$image-path}glyph-cancel-16.svg');\n }\n\n &.icon-delete {\n background-image: url('#{$image-path}glyph-delete-16.svg');\n }\n\n &.icon-search {\n background-image: url('chrome://browser/skin/search-glass.svg');\n }\n\n &.icon-modal-delete {\n flex-shrink: 0;\n background-image: url('#{$image-path}glyph-modal-delete-32.svg');\n background-size: $larger-icon-size;\n height: $larger-icon-size;\n width: $larger-icon-size;\n }\n\n &.icon-dismiss {\n background-image: url('#{$image-path}glyph-dismiss-16.svg');\n }\n\n &.icon-info {\n background-image: url('#{$image-path}glyph-info-16.svg');\n }\n\n &.icon-import {\n background-image: url('#{$image-path}glyph-import-16.svg');\n }\n\n &.icon-new-window {\n @include flip-icon;\n background-image: url('#{$image-path}glyph-newWindow-16.svg');\n }\n\n &.icon-new-window-private {\n background-image: url('chrome://browser/skin/privateBrowsing.svg');\n }\n\n &.icon-settings {\n background-image: url('chrome://browser/skin/settings.svg');\n }\n\n &.icon-pin {\n @include flip-icon;\n background-image: url('#{$image-path}glyph-pin-16.svg');\n }\n\n &.icon-unpin {\n @include flip-icon;\n background-image: url('#{$image-path}glyph-unpin-16.svg');\n }\n\n &.icon-edit {\n background-image: url('#{$image-path}glyph-edit-16.svg');\n }\n\n &.icon-pocket {\n background-image: url('#{$image-path}glyph-pocket-16.svg');\n }\n\n &.icon-pocket-save {\n background-image: url('#{$image-path}glyph-pocket-save-16.svg');\n }\n\n &.icon-history-item {\n background-image: url('chrome://browser/skin/history.svg');\n }\n\n &.icon-trending {\n background-image: url('#{$image-path}glyph-trending-16.svg');\n transform: translateY(2px); // trending bolt is visually top heavy\n }\n\n &.icon-now {\n background-image: url('chrome://browser/skin/history.svg');\n }\n\n &.icon-topsites {\n background-image: url('#{$image-path}glyph-topsites-16.svg');\n }\n\n &.icon-pin-small {\n @include flip-icon;\n background-image: url('#{$image-path}glyph-pin-12.svg');\n background-size: $smaller-icon-size;\n height: $smaller-icon-size;\n width: $smaller-icon-size;\n }\n\n &.icon-check {\n background-image: url('chrome://global/skin/icons/check.svg');\n }\n\n &.icon-download {\n background-image: url('chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar');\n }\n\n &.icon-copy {\n background-image: url('chrome://browser/skin/edit-copy.svg');\n }\n\n &.icon-open-file {\n background-image: url('#{$image-path}glyph-open-file-16.svg');\n }\n\n &.icon-webextension {\n background-image: url('#{$image-path}glyph-webextension-16.svg');\n }\n\n &.icon-highlights {\n background-image: url('#{$image-path}glyph-highlights-16.svg');\n }\n\n &.icon-arrowhead-down {\n background-image: url('#{$image-path}glyph-arrowhead-down-16.svg');\n }\n\n &.icon-arrowhead-down-small {\n background-image: url('#{$image-path}glyph-arrowhead-down-12.svg');\n background-size: $smaller-icon-size;\n height: $smaller-icon-size;\n width: $smaller-icon-size;\n }\n\n &.icon-arrowhead-forward-small {\n background-image: url('#{$image-path}glyph-arrowhead-down-12.svg');\n background-size: $smaller-icon-size;\n height: $smaller-icon-size;\n transform: rotate(-90deg);\n width: $smaller-icon-size;\n\n &:dir(rtl) {\n transform: rotate(90deg);\n }\n }\n\n &.icon-arrowhead-up {\n background-image: url('#{$image-path}glyph-arrowhead-down-16.svg');\n transform: rotate(180deg);\n }\n\n &.icon-add {\n background-image: url('#{$image-path}glyph-add-16.svg');\n }\n\n &.icon-minimize {\n background-image: url('#{$image-path}glyph-minimize-16.svg');\n }\n\n &.icon-maximize {\n background-image: url('#{$image-path}glyph-maximize-16.svg');\n }\n}\n", "// Shared styling of article images shown as background\n@mixin image-as-background {\n background-color: var(--newtab-card-placeholder-color);\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: 4px;\n box-shadow: inset 0 0 0 0.5px $black-15;\n}\n\n// Note: lineHeight and fontSize should be unitless but can be derived from pixel values\n@mixin limit-visibile-lines($line-count, $line-height, $font-size) {\n font-size: $font-size * 1px;\n line-height: $line-height * 1px;\n max-height: 1em * $line-count * $line-height / $font-size;\n overflow: hidden;\n}\n", ".outer-wrapper {\n color: var(--newtab-text-primary-color);\n display: flex;\n flex-grow: 1;\n min-height: 100vh;\n padding: ($section-spacing + $section-vertical-padding) $base-gutter $base-gutter;\n\n &.fixed-to-top {\n display: block;\n }\n\n &.only-search {\n display: block;\n padding-top: 134px;\n }\n\n a {\n color: var(--newtab-link-primary-color);\n }\n}\n\n.force-light-theme {\n --newtab-background-color: #{$grey-10} !important; // sass-lint:disable-line no-important\n --newtab-text-primary-color: #{$grey-90} !important; // sass-lint:disable-line no-important\n}\n\nmain {\n margin: auto;\n // Offset the snippets container so things at the bottom of the page are still\n // visible when snippets are visible. Adjust for other spacing.\n padding-bottom: $snippets-container-height - $section-spacing - $base-gutter;\n width: $wrapper-default-width;\n\n @media (min-width: $break-point-medium) {\n width: $wrapper-max-width-medium;\n }\n\n @media (min-width: $break-point-large) {\n width: $wrapper-max-width-large;\n }\n\n @media (min-width: $break-point-widest) {\n width: $wrapper-max-width-widest;\n }\n\n section {\n margin-bottom: $section-spacing;\n position: relative;\n }\n\n .hide-main & {\n visibility: hidden;\n }\n\n}\n\n.ds-outer-wrapper-search-alignment {\n main {\n // This override is to ensure while Discovery Stream loads,\n // the search bar does not jump around. (it sticks to the top)\n margin: 0 auto;\n }\n}\n\n.ds-outer-wrapper-breakpoint-override {\n main {\n // Override Activity Stream breakpoints for Discovery Stream.\n // Right now Discovery Stream doesn't have any breakpoints,\n // and Activity Stream breakpoints do some wonky things.\n width: 1042px;\n }\n\n &:not(.fixed-search) {\n .search-wrapper .search-inner-wrapper {\n width: $searchbar-width-large;\n }\n }\n}\n\n.base-content-fallback {\n // Make the error message be centered against the viewport\n height: 100vh;\n}\n\n.body-wrapper {\n // Hide certain elements so the page structure is fixed, e.g., placeholders,\n // while avoiding flashes of changing content, e.g., icons and text\n $selectors-to-hide: '\n .section-title,\n .sections-list .section:last-of-type,\n .topics\n ';\n\n #{$selectors-to-hide} {\n opacity: 0;\n }\n\n &.on {\n #{$selectors-to-hide} {\n opacity: 1;\n }\n }\n}\n\n.non-collapsible-section {\n padding: 0 $section-horizontal-padding;\n}\n\n.prefs-button {\n button {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n fill: var(--newtab-icon-primary-color);\n inset-inline-end: 15px;\n padding: 15px;\n position: fixed;\n top: 15px;\n z-index: 1000;\n\n &:hover,\n &:focus {\n background-color: var(--newtab-element-hover-color);\n }\n\n &:active {\n background-color: var(--newtab-element-active-color);\n }\n }\n}\n", ".as-error-fallback {\n align-items: center;\n border-radius: $border-radius;\n box-shadow: inset $inner-box-shadow;\n color: var(--newtab-text-conditional-color);\n display: flex;\n flex-direction: column;\n font-size: $error-fallback-font-size;\n justify-content: center;\n justify-items: center;\n line-height: $error-fallback-line-height;\n\n &.borderless-error {\n box-shadow: none;\n }\n\n a {\n color: var(--newtab-text-conditional-color);\n text-decoration: underline;\n }\n}\n", "$top-sites-size: $grid-unit;\n$top-sites-border-radius: 6px;\n$top-sites-title-height: 30px;\n$top-sites-vertical-space: 8px;\n$screenshot-size: cover;\n$rich-icon-size: 96px;\n$default-icon-wrapper-size: 42px;\n$default-icon-size: 32px;\n$default-icon-offset: 6px;\n$half-base-gutter: $base-gutter / 2;\n$hover-transition-duration: 150ms;\n\n.top-sites {\n // Take back the margin from the bottom row of vertical spacing as well as the\n // extra whitespace below the title text as it's vertically centered.\n margin-bottom: $section-spacing - ($top-sites-vertical-space + $top-sites-title-height / 3);\n}\n\n.top-sites-list {\n list-style: none;\n margin: 0 (-$half-base-gutter);\n padding: 0;\n\n // Two columns\n @media (max-width: $break-point-medium) {\n :nth-child(2n+1) {\n @include context-menu-open-middle;\n }\n\n :nth-child(2n) {\n @include context-menu-open-left;\n }\n }\n\n // Four columns\n @media (min-width: $break-point-medium) and (max-width: $break-point-large) {\n :nth-child(4n) {\n @include context-menu-open-left;\n }\n }\n @media (min-width: $break-point-medium) and (max-width: $break-point-medium + $card-width) {\n :nth-child(4n+3) {\n @include context-menu-open-left;\n }\n }\n\n // Six columns\n @media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) {\n :nth-child(6n) {\n @include context-menu-open-left;\n }\n }\n @media (min-width: $break-point-large) and (max-width: $break-point-large + $card-width) {\n :nth-child(6n+5) {\n @include context-menu-open-left;\n }\n }\n\n // Eight columns\n @media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) {\n :nth-child(8n) {\n @include context-menu-open-left;\n }\n }\n @media (min-width: $break-point-widest) and (max-width: $break-point-widest + $card-width) {\n :nth-child(8n+7) {\n @include context-menu-open-left;\n }\n }\n\n .hide-for-narrow {\n display: none;\n }\n\n @media (min-width: $break-point-medium) {\n .hide-for-narrow {\n display: inline-block;\n }\n }\n\n @media (min-width: $break-point-large) {\n .hide-for-narrow {\n display: none;\n }\n }\n\n @media (min-width: $break-point-widest) {\n .hide-for-narrow {\n display: inline-block;\n }\n }\n\n li {\n margin: 0 0 $top-sites-vertical-space;\n }\n\n &:not(.dnd-active) {\n .top-site-outer:-moz-any(.active, :focus, :hover) {\n .tile {\n @include fade-in;\n }\n\n @include context-menu-button-hover;\n }\n }\n}\n\n// container for drop zone\n.top-site-outer {\n padding: 0 $half-base-gutter;\n display: inline-block;\n\n // container for context menu\n .top-site-inner {\n position: relative;\n\n > a {\n color: inherit;\n display: block;\n outline: none;\n\n &:-moz-any(.active, :focus) {\n .tile {\n @include fade-in;\n }\n }\n }\n }\n\n @include context-menu-button;\n\n .tile { // sass-lint:disable-block property-sort-order\n border-radius: $top-sites-border-radius;\n box-shadow: inset $inner-box-shadow, var(--newtab-card-shadow);\n cursor: pointer;\n height: $top-sites-size;\n position: relative;\n width: $top-sites-size;\n\n // For letter fallback\n align-items: center;\n color: var(--newtab-text-secondary-color);\n display: flex;\n font-size: 32px;\n font-weight: 200;\n justify-content: center;\n text-transform: uppercase; // sass-lint:disable-line no-disallowed-properties\n transition: box-shadow $hover-transition-duration;\n\n &::before {\n content: attr(data-fallback);\n }\n }\n\n .screenshot {\n background-color: $white;\n background-position: top left;\n background-size: $screenshot-size;\n border-radius: $top-sites-border-radius;\n box-shadow: inset $inner-box-shadow;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n transition: opacity 1s;\n width: 100%;\n\n &.active {\n opacity: 1;\n }\n }\n\n // Some common styles for all icons (rich and default) in top sites\n .top-site-icon {\n background-color: var(--newtab-topsites-background-color);\n background-position: center center;\n background-repeat: no-repeat;\n border-radius: $top-sites-border-radius;\n box-shadow: var(--newtab-topsites-icon-shadow);\n position: absolute;\n }\n\n .rich-icon {\n background-size: cover;\n height: 100%;\n inset-inline-start: 0;\n top: 0;\n width: 100%;\n }\n\n .default-icon,\n .search-topsite {\n background-size: $default-icon-size;\n bottom: -$default-icon-offset;\n height: $default-icon-wrapper-size;\n inset-inline-end: -$default-icon-offset;\n width: $default-icon-wrapper-size;\n\n // for corner letter fallback\n align-items: center;\n display: flex;\n font-size: 20px;\n justify-content: center;\n\n &[data-fallback]::before {\n content: attr(data-fallback);\n }\n }\n\n .search-topsite {\n background-image: url('#{$image-path}glyph-search-16.svg');\n background-size: 26px;\n background-color: $blue-60;\n border-radius: $default-icon-wrapper-size;\n -moz-context-properties: fill;\n fill: $white;\n box-shadow: var(--newtab-card-shadow);\n transition-duration: $hover-transition-duration;\n transition-property: background-size, bottom, inset-inline-end, height, width;\n }\n\n &:hover .search-topsite {\n $hover-icon-wrapper-size: $default-icon-wrapper-size + 4;\n $hover-icon-offset: -$default-icon-offset - 3;\n\n background-size: 28px;\n border-radius: $hover-icon-wrapper-size;\n bottom: $hover-icon-offset;\n height: $hover-icon-wrapper-size;\n inset-inline-end: $hover-icon-offset;\n width: $hover-icon-wrapper-size;\n }\n\n // We want all search shortcuts to have a white background in case they have transparency.\n &.search-shortcut {\n .rich-icon {\n background-color: $white;\n }\n }\n\n .title {\n color: var(--newtab-topsites-label-color);\n font: message-box;\n height: $top-sites-title-height;\n line-height: $top-sites-title-height;\n text-align: center;\n width: $top-sites-size;\n position: relative;\n\n .icon {\n fill: var(--newtab-icon-tertiary-color);\n inset-inline-start: 0;\n position: absolute;\n top: 10px;\n }\n\n span {\n height: $top-sites-title-height;\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.pinned {\n span {\n padding: 0 13px;\n }\n }\n }\n\n .edit-button {\n background-image: url('#{$image-path}glyph-edit-16.svg');\n }\n\n &.placeholder {\n .tile {\n box-shadow: inset $inner-box-shadow;\n }\n\n .screenshot {\n display: none;\n }\n }\n\n &.dragged {\n .tile {\n background: $grey-20;\n box-shadow: none;\n\n *,\n &::before {\n display: none;\n }\n }\n\n .title {\n visibility: hidden;\n }\n }\n}\n\n.edit-topsites-wrapper {\n .modal {\n box-shadow: $shadow-secondary;\n left: 0;\n margin: 0 auto;\n max-height: calc(100% - 40px);\n overflow-y: auto;\n overflow-x: hidden;\n position: fixed;\n right: 0;\n top: 40px;\n width: $wrapper-default-width;\n\n @media (min-width: $break-point-medium) {\n width: $wrapper-max-width-medium;\n }\n\n @media (min-width: $break-point-large) {\n width: $wrapper-max-width-large;\n }\n }\n}\n\n.topsite-form {\n $form-width: 300px;\n $form-spacing: 32px;\n\n .section-title {\n font-size: 16px;\n margin: 0 0 16px;\n }\n\n .form-input-container {\n max-width: $form-width + 3 * $form-spacing + $rich-icon-size;\n margin: 0 auto;\n padding: $form-spacing;\n\n .top-site-outer {\n pointer-events: none;\n }\n }\n\n .search-shortcuts-container {\n max-width: 700px;\n margin: 0 auto;\n padding: $form-spacing;\n\n > div {\n margin-inline-end: -39px;\n }\n\n .top-site-outer {\n margin-inline-start: 0;\n margin-inline-end: 39px;\n }\n }\n\n .top-site-outer {\n padding: 0;\n margin: 24px 0 0;\n margin-inline-start: $form-spacing;\n }\n\n .fields-and-preview {\n display: flex;\n }\n\n label {\n font-size: $section-title-font-size;\n }\n\n .form-wrapper {\n width: 100%;\n\n .field {\n position: relative;\n\n .icon-clear-input {\n position: absolute;\n transform: translateY(-50%);\n top: 50%;\n inset-inline-end: 8px;\n }\n }\n\n .url {\n input:dir(ltr) {\n padding-right: 32px;\n }\n\n input:dir(rtl) {\n padding-left: 32px;\n\n &:not(:placeholder-shown) {\n direction: ltr;\n text-align: right;\n }\n }\n }\n\n .enable-custom-image-input {\n display: inline-block;\n font-size: 13px;\n margin-top: 4px;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n .custom-image-input-container {\n margin-top: 4px;\n\n .loading-container {\n width: 16px;\n height: 16px;\n overflow: hidden;\n position: absolute;\n transform: translateY(-50%);\n top: 50%;\n inset-inline-end: 8px;\n }\n\n // This animation is derived from Firefox's tab loading animation\n // See https://searchfox.org/mozilla-central/rev/b29daa46443b30612415c35be0a3c9c13b9dc5f6/browser/themes/shared/tabs.inc.css#208-216\n .loading-animation {\n @keyframes tab-throbber-animation {\n 100% { transform: translateX(-960px); }\n }\n\n @keyframes tab-throbber-animation-rtl {\n 100% { transform: translateX(960px); }\n }\n\n width: 960px;\n height: 16px;\n -moz-context-properties: fill;\n fill: $blue-50;\n background-image: url('chrome://browser/skin/tabbrowser/loading.svg');\n animation: tab-throbber-animation 1.05s steps(60) infinite;\n\n &:dir(rtl) {\n animation-name: tab-throbber-animation-rtl;\n }\n }\n }\n\n input {\n &[type='text'] {\n background-color: var(--newtab-textbox-background-color);\n border: $input-border;\n margin: 8px 0;\n padding: 0 8px;\n height: 32px;\n width: 100%;\n font-size: 15px;\n\n &:focus {\n border: $input-border-active;\n box-shadow: var(--newtab-textbox-focus-boxshadow);\n }\n\n &[disabled] {\n border: $input-border;\n box-shadow: none;\n opacity: 0.4;\n }\n }\n }\n\n .invalid {\n input {\n &[type='text'] {\n border: $input-error-border;\n box-shadow: $input-error-boxshadow;\n }\n }\n }\n\n .error-tooltip {\n animation: fade-up-tt 450ms;\n background: $red-60;\n border-radius: 2px;\n color: $white;\n inset-inline-start: 3px;\n padding: 5px 12px;\n position: absolute;\n top: 44px;\n z-index: 1;\n\n // tooltip caret\n &::before {\n background: $red-60;\n bottom: -8px;\n content: '.';\n height: 16px;\n inset-inline-start: 12px;\n position: absolute;\n text-indent: -999px;\n top: -7px;\n transform: rotate(45deg);\n white-space: nowrap;\n width: 16px;\n z-index: -1;\n }\n }\n }\n\n .actions {\n justify-content: flex-end;\n\n button {\n margin-inline-start: 10px;\n margin-inline-end: 0;\n }\n }\n\n @media (max-width: $break-point-medium) {\n .fields-and-preview {\n flex-direction: column;\n\n .top-site-outer {\n margin-inline-start: 0;\n }\n }\n }\n\n // prevent text selection of keyword label when clicking to select\n .title {\n -moz-user-select: none;\n }\n\n // CSS styled checkbox\n [type='checkbox']:not(:checked),\n [type='checkbox']:checked {\n inset-inline-start: -9999px;\n position: absolute;\n }\n\n [type='checkbox']:not(:checked) + label,\n [type='checkbox']:checked + label {\n cursor: pointer;\n display: block;\n position: relative;\n }\n\n $checkbox-offset: -8px;\n\n [type='checkbox']:not(:checked) + label::before,\n [type='checkbox']:checked + label::before {\n background: var(--newtab-background-color);\n border: $input-border;\n border-radius: $border-radius;\n content: '';\n height: 21px;\n left: $checkbox-offset;\n position: absolute;\n top: $checkbox-offset;\n width: 21px;\n z-index: 1;\n\n [dir='rtl'] & {\n left: auto;\n right: $checkbox-offset;\n }\n }\n\n // checkmark\n [type='checkbox']:not(:checked) + label::after,\n [type='checkbox']:checked + label::after {\n background: url('chrome://global/skin/icons/check.svg') no-repeat center center; // sass-lint:disable-line no-url-domains\n content: '';\n height: 21px;\n left: $checkbox-offset;\n position: absolute;\n top: $checkbox-offset;\n width: 21px;\n -moz-context-properties: fill;\n fill: var(--newtab-link-primary-color);\n z-index: 2;\n\n [dir='rtl'] & {\n left: auto;\n right: $checkbox-offset;\n }\n }\n\n // when selected, highlight the tile\n [type='checkbox']:checked + label {\n .tile {\n box-shadow: 0 0 0 2px var(--newtab-link-primary-color);\n }\n }\n\n // checkmark changes\n [type='checkbox']:not(:checked) + label::after {\n opacity: 0;\n }\n\n [type='checkbox']:checked + label::after {\n opacity: 1;\n }\n\n // accessibility\n [type='checkbox']:checked:focus + label::before,\n [type='checkbox']:not(:checked):focus + label::before {\n border: 1px dotted var(--newtab-link-primary-color);\n }\n}\n\n//used for tooltips below form element\n@keyframes fade-up-tt {\n 0% {\n opacity: 0;\n transform: translateY(15px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n", ".sections-list {\n .section-list {\n display: grid;\n grid-gap: $base-gutter;\n grid-template-columns: repeat(auto-fit, $card-width);\n margin: 0;\n\n @media (max-width: $break-point-medium) {\n @include context-menu-open-left;\n }\n\n @media (min-width: $break-point-medium) and (max-width: $break-point-large) {\n :nth-child(2n) {\n @include context-menu-open-left;\n }\n }\n\n @media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) {\n :nth-child(3n) {\n @include context-menu-open-left;\n }\n }\n\n @media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) {\n // 3n for normal cards, 4n for compact cards\n :nth-child(3n),\n :nth-child(4n) {\n @include context-menu-open-left;\n }\n }\n }\n\n .section-empty-state {\n border: $border-secondary;\n border-radius: $border-radius;\n display: flex;\n height: $card-height;\n width: 100%;\n\n .empty-state {\n margin: auto;\n max-width: 350px;\n\n .empty-state-icon {\n background-position: center;\n background-repeat: no-repeat;\n background-size: 50px 50px;\n -moz-context-properties: fill;\n display: block;\n fill: var(--newtab-icon-secondary-color);\n height: 50px;\n margin: 0 auto;\n width: 50px;\n }\n\n .empty-state-message {\n color: var(--newtab-text-primary-color);\n font-size: 13px;\n margin-bottom: 0;\n text-align: center;\n }\n }\n\n @media (min-width: $break-point-widest) {\n height: $card-height-large;\n }\n }\n}\n\n.top-stories-bottom-container {\n color: var(--newtab-section-navigation-text-color);\n font-size: 12px;\n line-height: 1.6;\n margin-top: $topic-margin-top;\n display: flex;\n justify-content: space-between;\n\n a {\n color: var(--newtab-link-secondary-color);\n font-weight: bold;\n\n &.more-recommendations {\n font-weight: normal;\n font-size: 13px;\n }\n }\n\n .wrapper-topics,\n .wrapper-cta + .wrapper-more-recommendations {\n @media (max-width: $break-point-large - 1) {\n display: none;\n }\n }\n\n @media (max-width: $break-point-medium - 1) {\n .wrapper-cta {\n text-align: center;\n\n .pocket-logged-in-cta {\n display: block;\n margin-inline-end: 0;\n\n .pocket-cta-button {\n max-width: none;\n display: block;\n margin-inline-end: 0;\n margin: 5px 0 10px;\n }\n }\n }\n\n .wrapper-more-recommendations {\n width: 100%;\n\n .more-recommendations {\n justify-content: center;\n\n &::after {\n display: none;\n }\n }\n }\n }\n}\n\n@media (min-width: $break-point-widest) {\n .sections-list {\n // Compact cards stay the same size but normal cards get bigger.\n .normal-cards {\n .section-list {\n grid-template-columns: repeat(auto-fit, $card-width-large);\n }\n }\n }\n}\n", ".topics {\n ul {\n margin: 0;\n padding: 0;\n @media (min-width: $break-point-large) {\n display: inline;\n padding-inline-start: 12px;\n }\n }\n\n ul li {\n display: inline-block;\n\n &::after {\n content: '•';\n padding: 8px;\n }\n\n &:last-child::after {\n content: none;\n }\n }\n}\n", "$search-height: 48px;\n$search-icon-size: 24px;\n$search-icon-padding: 12px;\n$search-icon-width: 2 * $search-icon-padding + $search-icon-size -2;\n$search-button-width: 48px;\n$glyph-forward: url('chrome://browser/skin/forward.svg');\n\n.search-wrapper {\n padding: 34px 0 64px;\n\n @media (max-height: 700px) {\n & {\n padding: 0 0 30px;\n }\n }\n\n .only-search & {\n padding: 0 0 64px;\n }\n\n .logo-and-wordmark {\n $logo-size: 97px;\n $wordmark-size: 142px;\n\n align-items: center;\n display: flex;\n justify-content: center;\n margin-bottom: 49px;\n\n .logo {\n background: url('chrome://branding/content/icon128.png') no-repeat center center;\n background-size: $logo-size;\n display: inline-block;\n height: $logo-size;\n width: $logo-size;\n }\n\n .wordmark {\n background: url('#{$image-path}firefox-wordmark.svg') no-repeat center center;\n background-size: $wordmark-size;\n -moz-context-properties: fill;\n display: inline-block;\n fill: var(--newtab-search-wordmark-color);\n height: $logo-size;\n margin-inline-start: 15px;\n width: $wordmark-size;\n }\n\n @media (max-width: $break-point-medium - 1) {\n $logo-size-small: 64px;\n $wordmark-small-size: 100px;\n\n .logo {\n background-size: $logo-size-small;\n height: $logo-size-small;\n width: $logo-size-small;\n }\n\n .wordmark {\n background-size: $wordmark-small-size;\n height: $logo-size-small;\n width: $wordmark-small-size;\n }\n }\n }\n\n .search-inner-wrapper {\n cursor: default;\n display: flex;\n height: $search-height;\n margin: 0 auto;\n position: relative;\n width: $searchbar-width-small;\n\n @media (min-width: $break-point-medium) {\n width: $searchbar-width-medium;\n }\n\n @media (min-width: $break-point-large) {\n width: $searchbar-width-large;\n }\n }\n\n input {\n background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat;\n background-size: $search-icon-size;\n border: solid 1px var(--newtab-search-border-color);\n box-shadow: $shadow-secondary, 0 0 0 1px $black-15;\n font-size: 15px;\n -moz-context-properties: fill;\n fill: var(--newtab-search-icon-color);\n padding: 0;\n padding-inline-end: $search-button-width;\n padding-inline-start: $search-icon-width;\n width: 100%;\n\n &:dir(rtl) {\n background-position-x: right $search-icon-padding;\n }\n }\n\n &:hover input {\n box-shadow: $shadow-secondary, 0 0 0 1px $black-25;\n }\n\n .search-inner-wrapper:active input,\n input:focus {\n border: $input-border-active;\n box-shadow: var(--newtab-textbox-focus-boxshadow);\n }\n\n .search-button {\n background: $glyph-forward no-repeat center center;\n background-size: 16px 16px;\n border: 0;\n border-radius: 0 $border-radius $border-radius 0;\n -moz-context-properties: fill;\n fill: var(--newtab-search-icon-color);\n height: 100%;\n inset-inline-end: 0;\n position: absolute;\n width: $search-button-width;\n\n &:focus,\n &:hover {\n background-color: $grey-90-10;\n cursor: pointer;\n }\n\n &:active {\n background-color: $grey-90-20;\n }\n\n &:dir(rtl) {\n transform: scaleX(-1);\n }\n }\n}\n\n.search-handoff-button {\n background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat;\n background-size: $search-icon-size;\n border: solid 1px var(--newtab-search-border-color);\n border-radius: 3px;\n box-shadow: $shadow-secondary, 0 0 0 1px $black-15;\n cursor: text;\n font-size: 15px;\n padding: 0;\n padding-inline-end: 48px;\n padding-inline-start: 46px;\n opacity: 1;\n transition: opacity 500ms;\n width: 100%;\n\n &:dir(rtl) {\n background-position-x: right $search-icon-padding;\n }\n\n &:hover {\n box-shadow: $shadow-secondary, 0 0 0 1px $black-25;\n }\n\n .fake-focus & {\n border: $input-border-active;\n box-shadow: var(--newtab-textbox-focus-boxshadow);\n\n .fake-caret {\n display: block;\n }\n }\n\n .search-hidden & {\n opacity: 0;\n visibility: hidden;\n }\n\n .fake-editable:focus {\n outline: none;\n caret-color: transparent;\n }\n\n .fake-editable {\n color: transparent;\n height: 100%;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n\n .fake-textbox {\n opacity: 0.54;\n text-align: start;\n }\n\n .fake-caret {\n animation: caret-animation 1.3s steps(5, start) infinite;\n background: var(--newtab-text-primary-color);\n display: none;\n inset-inline-start: 47px;\n height: 17px;\n position: absolute;\n top: 16px;\n width: 1px;\n\n @keyframes caret-animation {\n to {\n visibility: hidden;\n }\n }\n }\n}\n\n@media (min-height: 701px) {\n .fixed-search {\n main {\n padding-top: 146px;\n }\n\n .search-wrapper {\n $search-header-bar-height: 95px;\n $search-height: 35px;\n $search-icon-size: 16px;\n $search-icon-padding: 16px;\n\n background-color: var(--newtab-search-header-background-color);\n border-bottom: solid 1px var(--newtab-border-secondary-color);\n height: $search-header-bar-height;\n left: 0;\n padding: 30px 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 9;\n\n .search-inner-wrapper {\n height: $search-height;\n }\n\n input {\n background-position-x: $search-icon-padding;\n background-size: $search-icon-size;\n\n &:dir(rtl) {\n background-position-x: right $search-icon-padding;\n }\n }\n }\n\n .search-handoff-button {\n background-position-x: $search-icon-padding;\n background-size: $search-icon-size;\n\n &:dir(rtl) {\n background-position-x: right $search-icon-padding;\n }\n\n .fake-caret {\n top: 10px;\n }\n }\n }\n}\n\n@at-root {\n // Adjust the style of the contentSearchUI-generated table\n .contentSearchSuggestionTable {\n background-color: var(--newtab-search-dropdown-color);\n border: 0;\n box-shadow: $context-menu-shadow;\n transform: translateY($textbox-shadow-size);\n\n .contentSearchHeader {\n background-color: var(--newtab-search-dropdown-header-color);\n color: var(--newtab-text-secondary-color);\n }\n\n .contentSearchHeader,\n .contentSearchSettingsButton {\n border-color: var(--newtab-border-secondary-color);\n }\n\n .contentSearchSuggestionsList {\n border: 0;\n }\n\n .contentSearchOneOffsTable {\n background-color: var(--newtab-search-dropdown-header-color);\n border-top: solid 1px var(--newtab-border-secondary-color);\n }\n\n .contentSearchSearchWithHeaderSearchText {\n color: var(--newtab-text-primary-color);\n }\n\n .contentSearchSuggestionsContainer {\n background-color: var(--newtab-search-dropdown-color);\n }\n\n .contentSearchSuggestionRow {\n &.selected {\n background: var(--newtab-element-hover-color);\n color: var(--newtab-text-primary-color);\n\n &:active {\n background: var(--newtab-element-active-color);\n }\n\n .historyIcon {\n fill: var(--newtab-icon-secondary-color);\n }\n }\n }\n\n .contentSearchOneOffsTable {\n .contentSearchSuggestionsContainer {\n background-color: var(--newtab-search-dropdown-header-color);\n }\n }\n\n .contentSearchOneOffItem {\n // Make the border slightly shorter by offsetting from the top and bottom\n $border-offset: 18%;\n\n background-image: none;\n border-image: linear-gradient(transparent $border-offset, var(--newtab-border-secondary-color) $border-offset, var(--newtab-border-secondary-color) 100% - $border-offset, transparent 100% - $border-offset) 1;\n border-inline-end: 1px solid;\n position: relative;\n\n &.selected {\n background: var(--newtab-element-hover-color);\n }\n\n &:active {\n background: var(--newtab-element-active-color);\n }\n }\n\n .contentSearchSettingsButton {\n &:hover {\n background: var(--newtab-element-hover-color);\n color: var(--newtab-text-primary-color);\n }\n }\n }\n\n .contentSearchHeaderRow > td > img,\n .contentSearchSuggestionRow > td > .historyIcon {\n margin-inline-start: 7px;\n margin-inline-end: 15px;\n }\n}\n", ".context-menu {\n background: var(--newtab-contextmenu-background-color);\n border-radius: $context-menu-border-radius;\n box-shadow: $context-menu-shadow;\n display: block;\n font-size: $context-menu-font-size;\n margin-inline-start: 5px;\n inset-inline-start: 100%;\n position: absolute;\n top: ($context-menu-button-size / 4);\n z-index: 8;\n\n > ul {\n list-style: none;\n margin: 0;\n padding: $context-menu-outer-padding 0;\n\n > li {\n margin: 0;\n width: 100%;\n\n &.separator {\n border-bottom: $border-secondary;\n margin: $context-menu-outer-padding 0;\n }\n\n > a {\n align-items: center;\n color: inherit;\n cursor: pointer;\n display: flex;\n line-height: 16px;\n outline: none;\n padding: $context-menu-item-padding;\n white-space: nowrap;\n\n &:-moz-any(:focus, :hover) {\n background: var(--newtab-element-hover-color);\n }\n\n &:active {\n background: var(--newtab-element-active-color);\n }\n\n &.disabled {\n opacity: 0.4;\n pointer-events: none;\n }\n }\n }\n }\n}\n", ".confirmation-dialog {\n .modal {\n box-shadow: 0 2px 2px 0 $black-10;\n left: 0;\n margin: auto;\n position: fixed;\n right: 0;\n top: 20%;\n width: 400px;\n }\n\n section {\n margin: 0;\n }\n\n .modal-message {\n display: flex;\n padding: 16px;\n padding-bottom: 0;\n\n p {\n margin: 0;\n margin-bottom: 16px;\n }\n }\n\n .actions {\n border: 0;\n display: flex;\n flex-wrap: nowrap;\n padding: 0 16px;\n\n button {\n margin-inline-end: 16px;\n padding-inline-end: 18px;\n padding-inline-start: 18px;\n white-space: normal;\n width: 50%;\n\n &.done {\n margin-inline-end: 0;\n margin-inline-start: 0;\n }\n }\n }\n\n .icon {\n margin-inline-end: 16px;\n }\n}\n\n.modal-overlay {\n background: var(--newtab-overlay-color);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 11001;\n}\n\n.modal {\n background: var(--newtab-modal-color);\n border: $border-secondary;\n border-radius: 5px;\n font-size: 15px;\n z-index: 11002;\n}\n", ".card-outer {\n @include context-menu-button;\n background: var(--newtab-card-background-color);\n border-radius: $border-radius;\n display: inline-block;\n height: $card-height;\n margin-inline-end: $base-gutter;\n position: relative;\n width: 100%;\n\n &.placeholder {\n background: transparent;\n\n .card {\n box-shadow: inset $inner-box-shadow;\n }\n\n .card-preview-image-outer,\n .card-context {\n display: none;\n }\n }\n\n .card {\n border-radius: $border-radius;\n box-shadow: var(--newtab-card-shadow);\n height: 100%;\n }\n\n > a {\n color: inherit;\n display: block;\n height: 100%;\n outline: none;\n position: absolute;\n width: 100%;\n\n &:-moz-any(.active, :focus) {\n .card {\n @include fade-in-card;\n }\n\n .card-title {\n color: var(--newtab-link-primary-color);\n }\n }\n }\n\n &:-moz-any(:hover, :focus, .active):not(.placeholder) {\n @include fade-in-card;\n @include context-menu-button-hover;\n outline: none;\n\n .card-title {\n color: var(--newtab-link-primary-color);\n }\n\n .alternate ~ .card-host-name {\n display: none;\n }\n\n .card-host-name.alternate {\n display: block;\n }\n }\n\n .card-preview-image-outer {\n background-color: $grey-30;\n border-radius: $border-radius $border-radius 0 0;\n height: $card-preview-image-height;\n overflow: hidden;\n position: relative;\n\n [lwt-newtab-brighttext]:not(.force-light-theme) & {\n background-color: $grey-60;\n }\n\n &::after {\n border-bottom: 1px solid var(--newtab-card-hairline-color);\n bottom: 0;\n content: '';\n position: absolute;\n width: 100%;\n }\n\n .card-preview-image {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n height: 100%;\n opacity: 0;\n transition: opacity 1s $photon-easing;\n width: 100%;\n\n &.loaded {\n opacity: 1;\n }\n }\n }\n\n .card-details {\n padding: 15px 16px 12px;\n }\n\n .card-text {\n max-height: 4 * $card-text-line-height + $card-title-margin;\n overflow: hidden;\n\n &.no-host-name,\n &.no-context {\n max-height: 5 * $card-text-line-height + $card-title-margin;\n }\n\n &.no-host-name.no-context {\n max-height: 6 * $card-text-line-height + $card-title-margin;\n }\n\n &:not(.no-description) .card-title {\n max-height: 3 * $card-text-line-height;\n overflow: hidden;\n }\n }\n\n .card-host-name {\n color: var(--newtab-text-secondary-color);\n font-size: 10px;\n overflow: hidden;\n padding-bottom: 4px;\n text-overflow: ellipsis;\n text-transform: uppercase; // sass-lint:disable-line no-disallowed-properties\n white-space: nowrap;\n }\n\n .card-host-name.alternate { display: none; }\n\n .card-title {\n font-size: 14px;\n font-weight: 600;\n line-height: $card-text-line-height;\n margin: 0 0 $card-title-margin;\n word-wrap: break-word;\n }\n\n .card-description {\n font-size: 12px;\n line-height: $card-text-line-height;\n margin: 0;\n overflow: hidden;\n word-wrap: break-word;\n }\n\n .card-context {\n bottom: 0;\n color: var(--newtab-text-secondary-color);\n display: flex;\n font-size: 11px;\n inset-inline-start: 0;\n padding: 9px 16px 9px 14px;\n position: absolute;\n }\n\n .card-context-icon {\n fill: var(--newtab-text-secondary-color);\n height: 22px;\n margin-inline-end: 6px;\n }\n\n .card-context-label {\n flex-grow: 1;\n line-height: 22px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n.normal-cards {\n .card-outer {\n // Wide layout styles\n @media (min-width: $break-point-widest) {\n $line-height: 23px;\n height: $card-height-large;\n\n .card-preview-image-outer {\n height: $card-preview-image-height-large;\n }\n\n .card-details {\n padding: 13px 16px 12px;\n }\n\n .card-text {\n max-height: 6 * $line-height + $card-title-margin;\n }\n\n .card-host-name {\n font-size: 12px;\n padding-bottom: 5px;\n }\n\n .card-title {\n font-size: 17px;\n line-height: $line-height;\n margin-bottom: 0;\n }\n\n .card-text:not(.no-description) {\n .card-title {\n max-height: 3 * $line-height;\n }\n }\n\n .card-description {\n font-size: 15px;\n line-height: $line-height;\n }\n\n .card-context {\n bottom: 4px;\n font-size: 14px;\n }\n }\n }\n}\n\n.compact-cards {\n $card-detail-vertical-spacing: 12px;\n $card-title-font-size: 12px;\n\n .card-outer {\n height: $card-height-compact;\n\n .card-preview-image-outer {\n height: $card-preview-image-height-compact;\n }\n\n .card-details {\n padding: $card-detail-vertical-spacing 16px;\n }\n\n .card-host-name {\n line-height: 10px;\n }\n\n .card-text {\n .card-title,\n &:not(.no-description) .card-title {\n font-size: $card-title-font-size;\n line-height: $card-title-font-size + 1;\n max-height: $card-title-font-size + 5;\n overflow: hidden;\n padding: 0 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .card-description {\n display: none;\n }\n\n .card-context {\n $icon-size: 16px;\n $container-size: 32px;\n background-color: var(--newtab-card-background-color);\n border-radius: $container-size / 2;\n clip-path: inset(-1px -1px $container-size - ($card-height-compact - $card-preview-image-height-compact - 2 * $card-detail-vertical-spacing));\n height: $container-size;\n width: $container-size;\n padding: ($container-size - $icon-size) / 2;\n top: $card-preview-image-height-compact - $icon-size;\n inset-inline-end: 12px;\n inset-inline-start: auto;\n\n &::after {\n border: 1px solid var(--newtab-card-hairline-color);\n border-bottom: 0;\n border-radius: ($container-size / 2) + 1 ($container-size / 2) + 1 0 0;\n content: '';\n position: absolute;\n height: ($container-size + 2) / 2;\n width: $container-size + 2;\n top: -1px;\n left: -1px;\n }\n\n .card-context-icon {\n margin-inline-end: 0;\n height: $icon-size;\n width: $icon-size;\n\n &.icon-bookmark-added {\n fill: $bookmark-icon-fill;\n }\n\n &.icon-download {\n fill: $download-icon-fill;\n }\n\n &.icon-pocket {\n fill: $pocket-icon-fill;\n }\n }\n\n .card-context-label {\n display: none;\n }\n }\n }\n\n @media not all and (min-width: $break-point-widest) {\n .hide-for-narrow {\n display: none;\n }\n }\n}\n", ".manual-migration-container {\n color: var(--newtab-text-conditional-color);\n font-size: 13px;\n line-height: 15px;\n margin-bottom: $section-spacing;\n text-align: center;\n\n @media (min-width: $break-point-medium) {\n display: flex;\n justify-content: space-between;\n text-align: left;\n }\n\n p {\n margin: 0;\n @media (min-width: $break-point-medium) {\n align-self: center;\n display: flex;\n justify-content: space-between;\n }\n }\n\n .icon {\n display: none;\n @media (min-width: $break-point-medium) {\n align-self: center;\n display: block;\n fill: var(--newtab-icon-secondary-color);\n margin-inline-end: 6px;\n }\n }\n}\n\n.manual-migration-actions {\n border: 0;\n display: block;\n flex-wrap: nowrap;\n\n @media (min-width: $break-point-medium) {\n display: flex;\n justify-content: space-between;\n padding: 0;\n }\n\n button {\n align-self: center;\n height: 26px;\n margin: 0;\n margin-inline-start: 20px;\n padding: 0 12px;\n }\n}\n", ".collapsible-section {\n padding: $section-vertical-padding $section-horizontal-padding;\n transition-delay: 100ms;\n transition-duration: 100ms;\n transition-property: background-color;\n\n .section-title {\n font-size: $section-title-font-size;\n font-weight: bold;\n margin: 0;\n\n span {\n color: var(--newtab-section-header-text-color);\n display: inline-block;\n fill: var(--newtab-section-header-text-color);\n vertical-align: middle;\n }\n\n .click-target-container {\n // Center \"How it works\" for \"mobile\" viewport\n @media (max-width: $break-point-medium - 1) {\n display: block;\n\n .learn-more-link-wrapper {\n display: block;\n text-align: center;\n\n .learn-more-link {\n margin-inline-start: 0;\n }\n }\n }\n\n vertical-align: top;\n\n .click-target {\n cursor: pointer;\n white-space: nowrap;\n }\n }\n\n .collapsible-arrow {\n margin-inline-start: 8px;\n margin-top: -1px;\n }\n }\n\n .section-top-bar {\n min-height: 19px;\n margin-bottom: 13px;\n position: relative;\n\n .context-menu-button {\n background: url('chrome://browser/skin/page-action.svg') no-repeat right center;\n border: 0;\n cursor: pointer;\n fill: var(--newtab-section-header-text-color);\n height: 100%;\n inset-inline-end: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n transition-duration: 200ms;\n transition-property: opacity;\n width: $context-menu-button-size;\n\n &:-moz-any(:active, :focus, :hover) {\n fill: $grey-90;\n opacity: 1;\n }\n }\n\n .context-menu {\n top: 16px;\n }\n\n @media (max-width: $break-point-widest + $card-width * 1.5) {\n @include context-menu-open-left;\n }\n }\n\n &:hover,\n &.active {\n .section-top-bar {\n .context-menu-button {\n opacity: 1;\n }\n }\n }\n\n &.active {\n background: var(--newtab-element-hover-color);\n border-radius: 4px;\n\n .section-top-bar {\n .context-menu-button {\n fill: var(--newtab-section-active-contextmenu-color);\n }\n }\n }\n\n .learn-more-link {\n font-size: 11px;\n margin-inline-start: 12px;\n\n a span {\n color: var(--newtab-link-secondary-color);\n }\n }\n\n .section-body-fallback {\n height: $card-height;\n }\n\n .section-body {\n // This is so the top sites favicon and card dropshadows don't get clipped during animation:\n $horizontal-padding: 7px;\n margin: 0 (-$horizontal-padding);\n padding: 0 $horizontal-padding;\n\n &.animating {\n overflow: hidden;\n pointer-events: none;\n }\n }\n\n &.animation-enabled {\n .section-title {\n .collapsible-arrow {\n transition: transform 0.5s $photon-easing;\n }\n }\n\n .section-body {\n transition: max-height 0.5s $photon-easing;\n }\n }\n\n &.collapsed {\n .section-body {\n max-height: 0;\n overflow: hidden;\n }\n }\n\n // Hide first story card for the medium breakpoint to prevent orphaned third story\n &[data-section-id='topstories'] .card-outer:first-child {\n @media (min-width: $break-point-medium) and (max-width: $break-point-large - 1) {\n display: none;\n }\n }\n}\n\n", "\n.asrouter-admin {\n $border-color: var(--newtab-border-secondary-color);\n $monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;\n $sidebar-width: 240px;\n margin: 0 auto;\n font-size: 14px;\n padding-left: $sidebar-width;\n display: flex;\n color: var(--newtab-text-primary-color);\n\n .sidebar {\n inset-inline-start: 0;\n position: fixed;\n width: $sidebar-width;\n padding: 30px 20px;\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li a {\n padding: 10px 34px;\n display: block;\n color: var(--lwt-sidebar-text-color);\n\n &:hover {\n background: var(--newtab-textbox-background-color);\n }\n }\n }\n\n\n h1 {\n font-weight: 200;\n font-size: 32px;\n }\n\n h2 .button {\n font-size: 14px;\n padding: 6px 12px;\n margin-inline-start: 5px;\n margin-bottom: 0;\n }\n\n table {\n border-collapse: collapse;\n width: 100%;\n }\n\n .sourceLabel {\n background: var(--newtab-textbox-background-color);\n padding: 2px 5px;\n border-radius: 3px;\n\n &.isDisabled {\n background: $email-input-invalid;\n color: $red-60;\n }\n }\n\n .message-item {\n &:first-child td {\n border-top: 1px solid $border-color;\n }\n\n td {\n vertical-align: top;\n border-bottom: 1px solid $border-color;\n padding: 8px;\n\n\n\n &.min {\n width: 1%;\n white-space: nowrap;\n }\n\n &:first-child {\n border-left: 1px solid $border-color;\n }\n\n &:last-child {\n border-right: 1px solid $border-color;\n }\n }\n\n &.current {\n .message-id span {\n background: $yellow-50;\n padding: 2px 5px;\n\n [lwt-newtab-brighttext]:not(.force-light-theme) & {\n color: $black;\n }\n }\n }\n\n &.blocked {\n .message-id,\n .message-summary {\n opacity: 0.5;\n }\n\n .message-id {\n opacity: 0.5;\n }\n }\n\n .message-id {\n font-family: $monospace;\n font-size: 12px;\n }\n }\n\n .providerUrl {\n font-size: 12px;\n }\n\n pre {\n background: var(--newtab-textbox-background-color);\n margin: 0;\n padding: 8px;\n font-size: 12px;\n max-width: 750px;\n overflow: auto;\n font-family: $monospace;\n }\n\n .errorState {\n border: 1px solid $red-60;\n }\n\n .helpLink {\n padding: 10px;\n display: flex;\n background: $yellow-50;\n border-radius: 3px;\n color: $grey-90;\n\n a {\n text-decoration: underline;\n }\n }\n\n .dsEnabled {\n padding: 10px;\n font-size: 16px;\n margin-bottom: 20px;\n border: 1px solid $border-color;\n }\n\n .ds-component {\n margin-bottom: 20px;\n }\n\n .optOutNote {\n font-size: 12px;\n margin-inline-start: 4px;\n }\n}\n\n", ".pocket-logged-in-cta {\n $max-button-width: 130px;\n $min-button-height: 18px;\n font-size: 13px;\n margin-inline-end: 20px;\n display: flex;\n align-items: flex-start;\n\n .pocket-cta-button {\n white-space: nowrap;\n background: $blue-60;\n letter-spacing: -0.34px;\n color: $white;\n border-radius: 4px;\n cursor: pointer;\n max-width: $max-button-width;\n // The button height is 2px taller than the rest of the cta text.\n // So I move it up by 1px to align with the rest of the cta text.\n margin-top: -1px;\n min-height: $min-button-height;\n padding: 0 8px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: 11px;\n margin-inline-end: 10px;\n }\n\n .cta-text {\n font-weight: normal;\n font-size: 13px;\n line-height: 1.230769231; // (16 / 13) –> 16px computed\n }\n\n .pocket-cta-button,\n .cta-text {\n vertical-align: top;\n }\n}\n", ".more-recommendations {\n display: flex;\n align-items: center;\n white-space: nowrap;\n line-height: 1.230769231; // (16 / 13) -> 16px computed\n\n &::after {\n background: url('#{$image-path}topic-show-more-12.svg') no-repeat center center;\n content: '';\n -moz-context-properties: fill;\n display: inline-block;\n fill: var(--newtab-link-secondary-color);\n height: 16px;\n margin-inline-start: 5px;\n vertical-align: top;\n width: 12px;\n }\n\n &:dir(rtl)::after {\n transform: scaleX(-1);\n }\n}\n", ".discovery-stream.ds-layout {\n $columns: 12;\n --gridColumnGap: 48px;\n --gridRowGap: 24px;\n display: grid;\n grid-template-columns: repeat($columns, 1fr);\n grid-column-gap: var(--gridColumnGap);\n grid-row-gap: var(--gridRowGap);\n width: 936px;\n margin: 0 auto;\n\n @while $columns > 0 {\n .ds-column-#{$columns} {\n grid-column-start: auto;\n grid-column-end: span $columns;\n }\n\n $columns: $columns - 1;\n }\n\n .ds-column-grid {\n display: grid;\n grid-row-gap: var(--gridRowGap);\n }\n}\n\n.ds-header {\n color: $grey-50;\n font-size: 13px;\n font-weight: 600;\n line-height: 20px;\n margin: 8px 0;\n\n .icon {\n fill: var(--newtab-text-secondary-color);\n }\n}\n", ".ds-message-container {\n display: none;\n color: $grey-50;\n font-size: 13px;\n justify-content: center;\n margin: 0 auto 40px;\n width: 936px;\n\n p {\n margin: 0;\n align-self: center;\n line-height: 20px;\n display: flex;\n }\n\n .icon {\n align-self: center;\n fill: var(--newtab-icon-secondary-color);\n margin-inline-end: 6px;\n width: 20px;\n height: 20px;\n }\n\n .ds-message-actions {\n align-self: center;\n border: 0;\n padding: 0;\n\n button {\n height: 24px;\n margin: 0;\n margin-inline-start: 20px;\n padding: 0 20px;\n\n &.dismiss {\n padding: 0;\n }\n }\n }\n}\n\n.force-light-theme {\n &[lwt-newtab-brighttext] {\n .ds-message-container {\n display: flex;\n }\n }\n}\n", "$col4-header-line-height: 20;\n$col4-header-font-size: 14;\n\n.ds-card-grid {\n display: grid;\n grid-gap: 24px;\n margin: 16px 0;\n\n .ds-card {\n background: $white;\n border-radius: 4px;\n }\n\n &.ds-card-grid-border {\n .ds-card {\n box-shadow: var(--newtab-card-shadow);\n\n &:hover {\n box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);\n transition: box-shadow 150ms;\n outline: none;\n }\n\n .img-wrapper .img {\n border-radius: 4px 4px 0 0;\n }\n }\n }\n\n &.ds-card-grid-no-border {\n .ds-card {\n background: none;\n\n .meta {\n padding: 16px 0;\n }\n }\n }\n\n // \"2/3 width layout\"\n .ds-column-5 &,\n .ds-column-6 &,\n .ds-column-7 &,\n .ds-column-8 & {\n grid-template-columns: repeat(2, 1fr);\n }\n\n // \"Full width layout\"\n .ds-column-9 &,\n .ds-column-10 &,\n .ds-column-11 &,\n .ds-column-12 & {\n grid-template-columns: repeat(4, 1fr);\n\n &.ds-card-grid-divisible-by-3 {\n grid-template-columns: repeat(3, 1fr);\n\n .title {\n font-size: 17px;\n line-height: 24px;\n }\n }\n\n &.ds-card-grid-divisible-by-4 .title {\n @include limit-visibile-lines(3, 20, 14);\n }\n }\n}\n", "$card-header-in-hero-font-size: 14;\n$card-header-in-hero-line-height: 20;\n\n.ds-hero {\n .img {\n @include image-as-background;\n }\n\n header {\n font-weight: 600;\n }\n\n p {\n line-height: 1.538;\n margin: 8px 0;\n }\n\n .excerpt {\n @include limit-visibile-lines(3, 20, 14);\n margin: 4px 0 8px;\n }\n\n .ds-list {\n border-top: 0;\n padding-top: 0;\n }\n\n .ds-card {\n border: 0;\n padding-bottom: 20px;\n\n p {\n margin-top: 4px;\n }\n\n &:hover {\n border: 0;\n box-shadow: none;\n border-radius: 0;\n }\n\n .meta {\n padding: 0;\n }\n\n .img-wrapper {\n margin: 0 0 12px;\n }\n }\n\n .img-wrapper {\n margin: 0 0 12px;\n }\n\n // \"1/3 width layout\" (aka \"Mobile First\")\n .wrapper {\n color: $grey-50;\n display: block;\n margin: 12px 0 16px;\n padding: 16px 0;\n border-top: $border-secondary;\n border-bottom: $border-secondary;\n\n @at-root .ds-hero-no-border .wrapper {\n border-top: 0;\n border-bottom: 0;\n padding: 0 0 8px;\n }\n\n &:hover .meta header {\n color: $blue-60;\n }\n\n &:active .meta header {\n color: $blue-70;\n }\n\n .img-wrapper {\n width: 100%;\n }\n\n .img {\n height: 0;\n padding-top: 50%; // 2:1 aspect ratio\n }\n\n .meta {\n display: block;\n flex-direction: column;\n justify-content: space-between;\n\n header {\n @include limit-visibile-lines(4, 28, 22);\n color: $grey-90;\n }\n\n .context {\n color: $teal-70;\n }\n\n .source {\n font-size: 13px;\n color: $teal-80;\n margin-bottom: 0;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n }\n }\n\n // \"2/3 width layout\"\n .ds-column-5 &,\n .ds-column-6 &,\n .ds-column-7 &,\n .ds-column-8 & {\n .wrapper {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-column-gap: 24px;\n\n .img-wrapper {\n margin: 0;\n grid-column: 2;\n grid-row: 1;\n }\n\n .meta {\n grid-column: 1;\n grid-row: 1;\n display: flex;\n }\n\n .img {\n height: 0;\n padding-top: 100%; // 1:1 aspect ratio\n }\n }\n\n .cards {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-column-gap: 24px;\n }\n }\n\n // \"Full width layout\"\n .ds-column-9 &,\n .ds-column-10 &,\n .ds-column-11 &,\n .ds-column-12 & {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-column-gap: 24px;\n\n &.ds-hero-border {\n border-top: $border-secondary;\n padding: 20px 0;\n\n .ds-card:nth-child(-n+2) {\n border-bottom: $border-secondary;\n margin-bottom: 20px;\n }\n }\n\n .wrapper {\n border-top: 0;\n border-bottom: 0;\n margin: 0;\n padding: 0 0 20px;\n display: flex;\n flex-direction: column;\n\n .img-wrapper {\n margin: 0;\n }\n\n .img {\n margin-bottom: 16px;\n height: 0;\n padding-top: 50%; // 2:1 aspect ratio\n }\n\n .meta {\n flex-grow: 1;\n display: flex;\n padding: 0 24px 0 0;\n\n header {\n @include limit-visibile-lines(3, 28, 22);\n margin: 0 0 8px;\n }\n\n .source {\n margin-bottom: 0;\n }\n }\n }\n\n .cards {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-column-gap: 24px;\n\n .title {\n @include limit-visibile-lines(3, 20, 14);\n }\n }\n }\n}\n", ".ds-hr {\n border: 0;\n height: 0;\n border-top: $border-secondary;\n}\n", "// Type sizes\n$bordered-spacing: 16px;\n$item-font-size: 14;\n$item-image-size: 72px;\n$item-line-height: 20;\n\n// XXX this is gross, and attaches the bottom-border to the item above.\n// Ideally, we'd attach the top-border to the item that needs it.\n// Unfortunately the border needs to go _above_ the row gap as currently\n// set up, which means that some refactoring will be required to do this.\n@mixin bottom-border-except-last-grid-row($columns) {\n .ds-list-item:not(:nth-last-child(-n+#{$columns})) {\n border-bottom: $border-secondary;\n margin-bottom: -1px; // cancel out the pixel we used for the border\n padding-bottom: $bordered-spacing;\n }\n}\n\n@mixin set-item-sizes($font-size, $line-height, $image-size) {\n .ds-list-item {\n // XXX see if we really want absolute units, maybe hoist somewhere central?\n font-size: $font-size * 1px;\n line-height: $line-height * 1px;\n }\n\n .ds-list-item-title {\n @include limit-visibile-lines(3, $line-height, $font-size);\n }\n\n .ds-list-image {\n min-width: $image-size;\n width: $image-size;\n }\n}\n\n.ds-list {\n display: grid;\n grid-row-gap: 24px;\n grid-column-gap: 24px;\n\n // reset some stuff from