diff options
Diffstat (limited to 'browser/components/newtab/content-src/styles')
10 files changed, 1134 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/styles/_OnboardingImages.scss b/browser/components/newtab/content-src/styles/_OnboardingImages.scss new file mode 100644 index 0000000000..cd7fa48ad2 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_OnboardingImages.scss @@ -0,0 +1,71 @@ +// Used for Trailhead and about:welcome + +.onboardingMessageImage { + &.addons { + background-image: url('chrome://activity-stream/content/data/content/assets/illustration-addons@2x.png'); + } + + &.privatebrowsing { + background-image: url('chrome://activity-stream/content/data/content/assets/illustration-privatebrowsing@2x.png'); + } + + &.screenshots { + background-image: url('chrome://activity-stream/content/data/content/assets/illustration-screenshots@2x.png'); + } + + &.gift { + background-image: url('chrome://activity-stream/content/data/content/assets/illustration-gift@2x.png'); + } + + &.sync { + background-image: url('chrome://activity-stream/content/data/content/assets/illustration-sync@2x.png'); + } + + &.devices { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-devices.svg'); + } + + &.fbcont { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-fbcont.svg'); + } + + &.import { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-import.svg'); + } + + &.ffmonitor { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-ffmonitor.svg'); + } + + &.ffsend { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-ffsend.svg'); + } + + &.lockwise { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-lockwise.svg'); + } + + &.mobile { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-mobile.svg'); + } + + &.pledge { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-pledge.svg'); + } + + &.pocket { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-pocket.svg'); + } + + &.private { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-private.svg'); + } + + &.sendtab { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-sendtab.svg'); + } + + &.tracking { + background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-tracking.svg'); + } +} diff --git a/browser/components/newtab/content-src/styles/_activity-stream.scss b/browser/components/newtab/content-src/styles/_activity-stream.scss new file mode 100644 index 0000000000..702ef9bdd1 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_activity-stream.scss @@ -0,0 +1,179 @@ +@import './normalize'; +@import './variables'; +@import './theme'; +@import './icons'; +@import './mixins'; + +html { + height: 100%; +} + +body, +#root { // sass-lint:disable-line no-ids + min-height: 100vh; +} + +#root { // sass-lint:disable-line no-ids + position: relative; +} + +body { + background-color: var(--newtab-background-color); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif; + font-size: 16px; +} + +.no-scroll { + overflow: hidden; +} + +h1, +h2 { + font-weight: normal; +} + +a { + text-decoration: none; +} + +.inner-border { + border: $border-secondary; + border-radius: $border-radius; + 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; + + &.on { + animation: fadeIn 0.2s; + opacity: 1; + } +} + +.actions { + border-top: $border-secondary; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + margin: 0; + padding: 15px 25px 0; +} + +// Default button (grey) +.button, +.actions button { + background-color: var(--newtab-button-secondary-color); + border: $border-primary; + border-radius: 4px; + color: inherit; + cursor: pointer; + margin-bottom: 15px; + padding: 10px 30px; + white-space: nowrap; + + &:hover:not(.dismiss), + &:focus:not(.dismiss) { + box-shadow: $shadow-primary; + transition: box-shadow 150ms; + } + + &.dismiss { + background-color: transparent; + border: 0; + padding: 0; + text-decoration: underline; + } + + // Blue button + &.primary, + &.done { + background-color: var(--newtab-button-primary-color); + border: solid 1px var(--newtab-button-primary-color); + color: $white; + margin-inline-start: auto; + } +} + +input { + &[type='text'], + &[type='search'] { + border-radius: $border-radius; + } +} + +// These styles are needed for -webkit-line-clamp to work correctly, so reuse +// this class name while separately setting a clamp value via CSS or JS. +.clamp { + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; +} + +// Components +@import '../components/A11yLinkButton/A11yLinkButton'; +@import '../components/Base/Base'; +@import '../components/ErrorBoundary/ErrorBoundary'; +@import '../components/TopSites/TopSites'; +@import '../components/Sections/Sections'; +@import '../components/Topics/Topics'; +@import '../components/Search/Search'; +@import '../components/ContextMenu/ContextMenu'; +@import '../components/ConfirmDialog/ConfirmDialog'; +@import '../components/CustomizeMenu/CustomizeMenu'; +@import '../components/Card/Card'; +@import '../components/CollapsibleSection/CollapsibleSection'; +@import '../components/ASRouterAdmin/ASRouterAdmin'; +@import '../components/PocketLoggedInCta/PocketLoggedInCta'; +@import '../components/MoreRecommendations/MoreRecommendations'; +@import '../components/DiscoveryStreamBase/DiscoveryStreamBase'; + +// Discovery Stream Components +@import '../components/DiscoveryStreamComponents/CardGrid/CardGrid'; +@import '../components/DiscoveryStreamComponents/CollectionCardGrid/CollectionCardGrid'; +@import '../components/DiscoveryStreamComponents/Hero/Hero'; +@import '../components/DiscoveryStreamComponents/Highlights/Highlights'; +@import '../components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule'; +@import '../components/DiscoveryStreamComponents/List/List'; +@import '../components/DiscoveryStreamComponents/Navigation/Navigation'; +@import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle'; +@import '../components/DiscoveryStreamComponents/TopSites/TopSites'; +@import '../components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu'; +@import '../components/DiscoveryStreamComponents/DSCard/DSCard'; +@import '../components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter'; +@import '../components/DiscoveryStreamComponents/DSImage/DSImage'; +@import '../components/DiscoveryStreamComponents/DSDismiss/DSDismiss'; +@import '../components/DiscoveryStreamComponents/DSMessage/DSMessage'; +@import '../components/DiscoveryStreamImpressionStats/ImpressionStats'; +@import '../components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState'; +@import '../components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo'; +@import '../components/DiscoveryStreamComponents/DSSignup/DSSignup'; +@import '../components/DiscoveryStreamComponents/DSPrivacyModal/DSPrivacyModal'; + +// AS Router +@import '../asrouter/components/Button/Button'; +@import '../asrouter/components/SnippetBase/SnippetBase'; +@import '../asrouter/components/ModalOverlay/ModalOverlay'; +@import '../asrouter/templates/SimpleBelowSearchSnippet/SimpleBelowSearchSnippet'; +@import '../asrouter/templates/SimpleSnippet/SimpleSnippet'; +@import '../asrouter/templates/SubmitFormSnippet/SubmitFormSnippet'; +@import '../asrouter/templates/EOYSnippet/EOYSnippet'; diff --git a/browser/components/newtab/content-src/styles/_icons.scss b/browser/components/newtab/content-src/styles/_icons.scss new file mode 100644 index 0000000000..f665dc5fb3 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_icons.scss @@ -0,0 +1,208 @@ +.icon { + background-position: center center; + background-repeat: no-repeat; + background-size: $icon-size; + -moz-context-properties: fill; + display: inline-block; + color: var(--newtab-icon-primary-color); + fill: currentColor; + height: $icon-size; + vertical-align: middle; + width: $icon-size; + + // helper classes + &.icon-spacer { + margin-inline-end: 8px; + } + + &.icon-small-spacer { + margin-inline-end: 6px; + } + + &.icon-button-style { + fill: var(--newtab-icon-secondary-color); + border: 0; + + &:focus, + &:hover { + fill: var(--newtab-text-primary-color); + } + } + + // icon images + &.icon-bookmark-added { + background-image: url('chrome://browser/skin/bookmark.svg'); + } + + &.icon-bookmark-hollow { + background-image: url('chrome://browser/skin/bookmark-hollow.svg'); + } + + &.icon-clear-input { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-cancel-16.svg'); + } + + &.icon-delete { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-delete-16.svg'); + } + + &.icon-search { + background-image: url('chrome://browser/skin/search-glass.svg'); + } + + &.icon-modal-delete { + flex-shrink: 0; + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-modal-delete-32.svg'); + background-size: $larger-icon-size; + height: $larger-icon-size; + width: $larger-icon-size; + } + + &.icon-mail { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg'); + } + + &.icon-dismiss { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-dismiss-16.svg'); + } + + &.icon-info { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-info-16.svg'); + } + + &.icon-new-window { + @include flip-icon; + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg'); + } + + &.icon-new-window-private { + background-image: url('chrome://browser/skin/privateBrowsing.svg'); + } + + &.icon-settings { + background-image: url('chrome://global/skin/icons/settings.svg'); + } + + &.icon-pin { + @include flip-icon; + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg'); + } + + &.icon-unpin { + @include flip-icon; + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg'); + } + + &.icon-edit { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg'); + } + + &.icon-pocket { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-16.svg'); + } + + &.icon-pocket-save { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-save-16.svg'); + } + + &.icon-pocket-delete { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg'); + } + + &.icon-pocket-archive { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg'); + } + + &.icon-history-item { + background-image: url('chrome://browser/skin/history.svg'); + } + + &.icon-trending { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-trending-16.svg'); + transform: translateY(2px); // trending bolt is visually top heavy + } + + &.icon-now { + background-image: url('chrome://browser/skin/history.svg'); + } + + &.icon-topsites { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-topsites-16.svg'); + } + + &.icon-pin-small { + @include flip-icon; + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pin-12.svg'); + background-size: $smaller-icon-size; + height: $smaller-icon-size; + width: $smaller-icon-size; + } + + &.icon-check { + background-image: url('chrome://global/skin/icons/check.svg'); + } + + &.icon-download { + background-image: url('chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar'); + } + + &.icon-copy { + background-image: url('chrome://browser/skin/edit-copy.svg'); + } + + &.icon-open-file { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg'); + } + + &.icon-webextension { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg'); + } + + &.icon-highlights { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg'); + } + + &.icon-arrowhead-down { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg'); + } + + &.icon-arrowhead-down-small { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg'); + background-size: $smaller-icon-size; + height: $smaller-icon-size; + width: $smaller-icon-size; + } + + &.icon-arrowhead-forward-small { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg'); + background-size: $smaller-icon-size; + height: $smaller-icon-size; + transform: rotate(-90deg); + width: $smaller-icon-size; + + &:dir(rtl) { + transform: rotate(90deg); + } + } + + &.icon-arrowhead-up { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg'); + transform: rotate(180deg); + } + + &.icon-add { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-add-16.svg'); + } + + &.icon-minimize { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg'); + } + + &.icon-maximize { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg'); + } + + &.icon-arrow { + background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrow.svg'); + } +} diff --git a/browser/components/newtab/content-src/styles/_mixins.scss b/browser/components/newtab/content-src/styles/_mixins.scss new file mode 100644 index 0000000000..0189408b06 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_mixins.scss @@ -0,0 +1,50 @@ +// Shared styling of article images shown as background +@mixin image-as-background { + background-color: var(--newtab-card-placeholder-color); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 4px; + box-shadow: inset 0 0 0 0.5px $black-15; +} + +// Note: lineHeight and fontSize should be unitless but can be derived from pixel values +// Bug 1550624 to clean up / remove this mixin to avoid duplicate styles +@mixin limit-visible-lines($line-count, $line-height, $font-size) { + font-size: $font-size * 1px; + -webkit-line-clamp: $line-count; + line-height: $line-height * 1px; +} + +@mixin dark-theme-only { + [lwt-newtab-brighttext] & { + @content; + } +} + +@mixin ds-border-top { + @content; + + @include dark-theme-only { + border-top: 1px solid $grey-60; + } + + border-top: 1px solid $grey-30; +} + +@mixin ds-border-bottom { + @content; + + @include dark-theme-only { + border-bottom: 1px solid $grey-60; + } + + border-bottom: 1px solid $grey-30; +} + +@mixin ds-fade-in($halo-color: $blue-50-30) { + box-shadow: 0 0 0 5px $halo-color; + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; +} diff --git a/browser/components/newtab/content-src/styles/_normalize.scss b/browser/components/newtab/content-src/styles/_normalize.scss new file mode 100644 index 0000000000..32f5ef3677 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_normalize.scss @@ -0,0 +1,29 @@ +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; // sass-lint:disable-line no-important +} diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss new file mode 100644 index 0000000000..29e313873e --- /dev/null +++ b/browser/components/newtab/content-src/styles/_theme.scss @@ -0,0 +1,231 @@ +@function textbox-shadow($color) { + @return 0 0 0 1px $color, 0 0 0 $textbox-shadow-size rgba($color, 0.3); +} + +@mixin textbox-focus($color) { + --newtab-textbox-focus-color: #{$color}; + --newtab-textbox-focus-boxshadow: #{textbox-shadow($color)}; +} + +// scss variables related to the theme. +$border-primary: 1px solid var(--newtab-border-primary-color); +$border-secondary: 1px solid var(--newtab-border-secondary-color); +$inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); +$inner-box-shadow-nte: 0 3px 8px var(--newtab-inner-box-shadow-color-nte); +$tile-shadow-second: 0 0 2px var(--newtab-tile-shadow-secondary); +$input-border: 1px solid var(--newtab-textbox-border); +$input-border-active: 1px solid var(--newtab-textbox-focus-color); +$input-error-border: 1px solid $red-60; +$input-error-boxshadow: textbox-shadow($red-60); +$shadow-primary: 0 0 0 5px var(--newtab-card-active-outline-color); +$shadow-secondary: 0 1px 4px 0 $grey-90-20; + +// Default theme +body { + // General styles + --newtab-background-color: #{$grey-10}; + --newtab-border-primary-color: #{$grey-40}; + --newtab-border-secondary-color: #{$grey-30}; + --newtab-element-active-color: #{$grey-30-60}; + --newtab-element-hover-color: #{$grey-20}; + --newtab-icon-primary-color: #{$grey-90-80}; + --newtab-icon-secondary-color: #{$grey-90-60}; + --newtab-icon-tertiary-color: #{$grey-30}; + --newtab-inner-box-shadow-color: #{$black-10}; + --newtab-inner-box-shadow-color-nte: #{$newtab-card-firstshadow}; + --newtab-tile-shadow-secondary: #{$newtab-tile-shadow-secondary}; + + --newtab-link-primary-color: #{$blue-60}; + --newtab-link-secondary-color: #{$teal-70}; + --newtab-text-conditional-color: #{$grey-60}; + --newtab-text-primary-color: #{$grey-90}; + --newtab-text-secondary-color: #{$grey-50}; + --newtab-textbox-background-color: #{$white}; + --newtab-textbox-border: #{$grey-90-20}; + @include textbox-focus($blue-60); // sass-lint:disable-line mixins-before-declarations + + // Background buttons + --newtab-background-button-color: #{$newtab-background-button-default-color}; + --newtab-background-button-text-color: #{$newtab-background-button-default-text-color}; + --newtab-background-button-hover-color: #{$newtab-background-button-default-hover-color}; + --newtab-background-button-active-color: #{$newtab-background-button-default-active-color}; + + // Buttons + --newtab-button-primary-color: #{$blue-60}; + --newtab-button-secondary-color: inherit; + // Feed buttons + --newtab-feed-button-background: #{$grey-20}; + --newtab-feed-button-text: #{$grey-90}; + --newtab-feed-button-background-faded: #{$grey-20-60}; + --newtab-feed-button-text-faded: #{$grey-90-00}; + --newtab-feed-button-spinner: #{$grey-50}; + + + // Context menu + --newtab-contextmenu-background-color: #{$grey-10}; + --newtab-contextmenu-button-color: #{$white}; + + // Modal + overlay + --newtab-modal-color: #{$white}; + --newtab-overlay-color: #{$grey-20-80}; + + // Sections + --newtab-section-header-text-color: #{$grey-50}; + --newtab-section-navigation-text-color: #{$grey-50}; + --newtab-section-active-contextmenu-color: #{$grey-90}; + + // Search + --newtab-search-border-color: transparent; + --newtab-search-dropdown-color: #{$white}; + --newtab-search-dropdown-header-color: #{$grey-10}; + --newtab-search-header-background-color: #{$grey-10-95}; + --newtab-search-icon-color: #{$grey-90-40}; + --newtab-search-wordmark-color: #{$firefox-wordmark-default-color}; + + // Top Sites + --newtab-topsites-background-color: #{$white}; + --newtab-topsites-icon-shadow: inset #{$inner-box-shadow}; + --newtab-topsites-label-color: inherit; + --newtab-topsites-outer-card-hover: #{$newtab-card-hover-color}; + --newtab-topsites-context-menu-hover: #{$newtab-card-hover-color}; + + // Cards + --newtab-card-active-outline-color: #{$grey-30}; + --newtab-card-background-color: #{$white}; + --newtab-card-hairline-color: #{$black-10}; + --newtab-card-placeholder-color: #{$grey-30}; + --newtab-card-shadow: 0 1px 4px 0 #{$grey-90-10}; + + // Snippets + --newtab-snippets-background-color: #{$white}; + --newtab-snippets-hairline-color: transparent; + + // New New Tab + --newtab-background-primary-text-color: #{$newtab-background-primary-text-color}; + --newtab-focus-outline: #{$newtab-focus-outline-color}; + --newtab-focus-border: #{$blue-60}; + --newtab-focus-border-selected: #{$newtab-card-tint}; + --newtab-seperator-line-color: #{$newtab-card-separator-line-color}; + --newtab-primary-action-background: #{$blue-60}; + --newtab-primary-action-background-off: #{$newtab-primary-action-background-off}; + --customize-menu-primary-text-color: #{$newtab-card-primary-text-color}; + --customize-menu-check-fill: #{$white}; + --customize-menu-background: #{$white}; + --customize-menu-secondary-action-background: #{$grey-10}; + --customize-menu-secondary-action-background-hover: #{$grey-20}; + --customize-menu-secondary-action-background-active: #{$newtab-card-secondary-action-background-active}; + --customize-menu-seperator-line-color: #{$newtab-card-separator-line-color}; + --customize-menu-first-shadow: #{$newtab-card-firstshadow}; + --customize-menu-second-shadow: #{$newtab-card-secondshadow}; + --customize-menu-primary-action-text: #{$white}; + --customize-menu-line-color: #{$newtab-card-line-color}; + --newtab-search-first-shadow: #{$newtab-card-firstshadow}; + --newtab-search-second-shadow: #{$newtab-card-secondshadow}; + --newtab-search-text-color: #{$newtab-card-secondary-text-color}; + --newtab-card-first-shadow: #{$newtab-card-firstshadow}; + --newtab-card-second-shadow: #{$newtab-card-secondshadow}; + --newtab-wordmark-color: #{$newtab-wordmark-default-color}; + + &[lwt-newtab-brighttext] { + // General styles + --newtab-background-color: #{$grey-80}; + --newtab-border-primary-color: #{$grey-10-80}; + --newtab-border-secondary-color: #{$grey-10-10}; + --newtab-button-primary-color: #{$blue-60}; + --newtab-button-secondary-color: #{$grey-70}; + --newtab-element-active-color: #{$grey-10-20}; + --newtab-element-hover-color: #{$grey-10-10}; + --newtab-icon-primary-color: #{$grey-10-80}; + --newtab-icon-secondary-color: #{$grey-10-40}; + --newtab-icon-tertiary-color: #{$grey-10-40}; + --newtab-inner-box-shadow-color: #{$grey-10-20}; + --newtab-inner-box-shadow-color-nte: #{$newtab-card-darktheme-firstshadow}; + --newtab-tile-shadow-secondary: #{$newtab-tile-darktheme-shadow-secondary}; + --newtab-link-primary-color: #{$blue-40}; + --newtab-link-secondary-color: #{$pocket-teal}; + --newtab-text-conditional-color: #{$grey-10}; + --newtab-text-primary-color: #{$grey-10}; + --newtab-text-secondary-color: #{$grey-10-80}; + --newtab-textbox-background-color: #{$grey-70}; + --newtab-textbox-border: #{$grey-10-20}; + @include textbox-focus($blue-40); // sass-lint:disable-line mixins-before-declarations + + // Background buttons. + --newtab-background-button-color: #{$newtab-background-button-darktheme-color}; + --newtab-background-button-text-color: #{$newtab-background-button-darktheme-text-color}; + --newtab-background-button-hover-color: #{$newtab-background-button-darktheme-hover-color}; + --newtab-background-button-active-color: #{$newtab-background-button-darktheme-active-color}; + + // Feed buttons + --newtab-feed-button-background: #{$grey-70}; + --newtab-feed-button-text: #{$grey-10}; + --newtab-feed-button-background-faded: #{$grey-70-60}; + --newtab-feed-button-text-faded: #{$grey-10-00}; + --newtab-feed-button-spinner: #{$grey-30}; + + // Context menu + --newtab-contextmenu-background-color: #{$grey-60}; + --newtab-contextmenu-button-color: #{$grey-80}; + + // Modal + overlay + --newtab-modal-color: #{$grey-80}; + --newtab-overlay-color: #{$grey-90-80}; + + // Sections + --newtab-section-header-text-color: #{$grey-10-80}; + --newtab-section-navigation-text-color: #{$grey-10-80}; + --newtab-section-active-contextmenu-color: #{$white}; + + // Search + --newtab-search-border-color: #{$grey-10-20}; + --newtab-search-dropdown-color: #{$grey-70}; + --newtab-search-dropdown-header-color: #{$grey-60}; + --newtab-search-header-background-color: #{$grey-80-95}; + --newtab-search-icon-color: #{$grey-10-60}; + --newtab-search-wordmark-color: #{$firefox-wordmark-darktheme-color}; + + // Top Sites + --newtab-topsites-background-color: #{$grey-70}; + --newtab-topsites-icon-shadow: none; + --newtab-topsites-label-color: #{$grey-10-80}; + --newtab-topsites-outer-card-hover: #{$newtab-card-darktheme-hover-color}; + --newtab-topsites-context-menu-hover: #{$newtab-card-darktheme-hover-color}; + + // Cards + --newtab-card-active-outline-color: #{$grey-60}; + --newtab-card-background-color: #{$grey-70}; + --newtab-card-hairline-color: #{$grey-10-10}; + --newtab-card-placeholder-color: #{$grey-60}; + --newtab-card-shadow: 0 1px 8px 0 #{$grey-90-20}; + + // Snippets + --newtab-snippets-background-color: #{$grey-70}; + --newtab-snippets-hairline-color: #{$white-10}; + + // New New Tab + --newtab-background-primary-text-color: #{$newtab-background-darktheme-primary-text-color}; + --newtab-focus-outline: #{$newtab-darktheme-focus-outline-color}; + --newtab-focus-border: #{$newtab-darktheme-focus-border}; + --newtab-focus-border-selected: #{$newtab-darktheme-focus-border-selected}; + --newtab-primary-action-background: #{$newtab-darktheme-primary-action-background}; + --newtab-primary-action-background-off: #{$newtab-darktheme-primary-action-background-off}; + --newtab-seperator-line-color: #{$newtab-card-darktheme-separator-line-color}; + --customize-menu-primary-text-color: #{$newtab-card-darktheme-primary-text-color}; + --customize-menu-check-fill: #{$newtab-card-darktheme-primary-text-color}; + --customize-menu-background: #{$grey-70}; + --customize-menu-secondary-action-background: #{$newtab-card-darktheme-secondary-action-background}; + --customize-menu-secondary-action-background-hover: #{$newtab-card-darktheme-secondary-action-background-hover}; + --customize-menu-secondary-action-background-active: #{$newtab-card-darktheme-secondary-action-background-active}; + --customize-menu-seperator-line-color: #{$newtab-card-darktheme-separator-line-color}; + --customize-menu-first-shadow: #{$newtab-card-darktheme-firstshadow}; + --customize-menu-second-shadow: #{$newtab-darktheme-card-secondshadow}; + --customize-menu-primary-action-text: #{$newtab-card-darktheme-primary-text-color}; + --customize-menu-line-color: #{$newtab-card-darktheme-line-color}; + --newtab-search-first-shadow: #{$newtab-card-darktheme-firstshadow}; + --newtab-search-second-shadow: #{$newtab-darktheme-card-secondshadow}; + --newtab-search-text-color: #{$newtab-card-darktheme-secondary-text-color}; + --newtab-card-first-shadow: #{$newtab-card-darktheme-firstshadow}; + --newtab-card-second-shadow: #{$newtab-darktheme-card-secondshadow}; + --newtab-wordmark-color: #{$firefox-wordmark-darktheme-color}; + } +} diff --git a/browser/components/newtab/content-src/styles/_variables.scss b/browser/components/newtab/content-src/styles/_variables.scss new file mode 100644 index 0000000000..b43b9fe924 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_variables.scss @@ -0,0 +1,323 @@ +// Photon colors from http://design.firefox.com/photon/visuals/color.html +$blue-40: #45A1FF; +$blue-50: #0A84FF; +$blue-60: #0060DF; +$blue-70: #003EAA; +$blue-80: #002275; +$grey-10: #F9F9FA; +$grey-20: #EDEDF0; +$grey-30: #D7D7DB; +$grey-40: #B1B1B3; +$grey-50: #737373; +$grey-60: #4A4A4F; +$grey-70: #38383D; +$grey-80: #2A2A2E; +$grey-90: #0C0C0D; +$teal-10: #A7FFFE; +$teal-60: #00C8D7; +$teal-70: #008EA4; +$teal-80: #005A71; +$red-60: #D70022; +$yellow-50: #FFE900; +$violet-20: #CB9EFF; + +// Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity +$grey-10-00: rgba($grey-10, 0); +$grey-10-10: rgba($grey-10, 0.1); +$grey-10-20: rgba($grey-10, 0.2); +$grey-10-30: rgba($grey-10, 0.3); +$grey-10-40: rgba($grey-10, 0.4); +$grey-10-50: rgba($grey-10, 0.5); +$grey-10-60: rgba($grey-10, 0.6); +$grey-10-80: rgba($grey-10, 0.8); +$grey-10-95: rgba($grey-10, 0.95); +$grey-20-60: rgba($grey-20, 0.6); +$grey-20-80: rgba($grey-20, 0.8); +$grey-30-60: rgba($grey-30, 0.6); +$grey-60-60: rgba($grey-60, 0.6); +$grey-60-70: rgba($grey-60, 0.7); +$grey-70-40: rgba($grey-70, 0.4); +$grey-70-60: rgba($grey-70, 0.6); +$grey-80-95: rgba($grey-80, 0.95); +$grey-90-00: rgba($grey-90, 0); +$grey-90-10: rgba($grey-90, 0.1); +$grey-90-20: rgba($grey-90, 0.2); +$grey-90-30: rgba($grey-90, 0.3); +$grey-90-40: rgba($grey-90, 0.4); +$grey-90-50: rgba($grey-90, 0.5); +$grey-90-60: rgba($grey-90, 0.6); +$grey-90-70: rgba($grey-90, 0.7); +$grey-90-80: rgba($grey-90, 0.8); +$grey-90-90: rgba($grey-90, 0.9); + +$blue-40-40: rgba($blue-40, 0.4); +$blue-50-50: rgba($blue-50, 0.5); +$blue-50-30: rgba($blue-50, 0.3); +$blue-50-50: rgba($blue-50, 0.5); + +$black: #000; +$black-5: rgba($black, 0.05); +$black-10: rgba($black, 0.1); +$black-12: rgba($black, 0.12); +$black-15: rgba($black, 0.15); +$black-20: rgba($black, 0.2); +$black-25: rgba($black, 0.25); +$black-30: rgba($black, 0.3); + +// Other colors +$white: #FFF; +$white-0: rgba($white, 0); +$white-10: rgba($white, 0.1); +$white-50: rgba($white, 0.5); +$white-60: rgba($white, 0.6); +$white-70: rgba($white, 0.7); +$white-100: rgba($white, 1); +$ghost-white: #FAFAFC; +$pocket-teal: #50BCB6; +$pocket-red: #EF4056; +$shadow-10: rgba(12, 12, 13, 0.1); +$bookmark-icon-fill: #0A84FF; +$download-icon-fill: #12BC00; +$pocket-icon-fill: #D70022; +$email-input-focus: rgba($blue-50, 0.3); +$email-input-invalid: rgba($red-60, 0.3); +$aw-extra-blue-1: #004EC2; +$aw-extra-blue-2: #0080FF; +$aw-extra-blue-3: #00C7FF; +$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%); +$about-welcome-extra-links: #676F7E; +$firefox-wordmark-default-color: #363959; +$firefox-wordmark-darktheme-color: $white; + +// New New Tab Experience colors. +$newtab-background-button-default-color: rgba(223, 223, 223, 0.5); +$newtab-background-button-darktheme-color: rgba(80, 80, 80, 0.5); +$newtab-background-button-default-text-color: #484848; +$newtab-background-button-darktheme-text-color: #CDCDD4; +$newtab-background-button-default-hover-color: rgba(196, 196, 196, 0.5); +$newtab-background-button-darktheme-hover-color: rgba(114, 114, 114, 0.5); +$newtab-background-button-default-active-color: rgba(151, 151, 151, 0.5); +$newtab-background-button-darktheme-active-color: rgba(173, 173, 173, 0.5); +$newtab-background-primary-text-color: #151515; +$newtab-background-darktheme-primary-text-color: #CDCDD4; +$newtab-wordmark-default-color: #20123A; + +$newtab-card-primary-text-color: #20123A; +$newtab-card-darktheme-primary-text-color: #E0E0E6; +$newtab-card-line-color: #716F87; +$newtab-card-darktheme-line-color: #B9B7CC; +$newtab-card-separator-line-color: #E1E0E6; +$newtab-card-darktheme-separator-line-color: #53515F; +$newtab-card-tint: rgba(0, 0, 0, 0.15); +$newtab-card-firstshadow: rgba(9, 32, 77, 0.12); +$newtab-card-darktheme-firstshadow: rgba(21, 20, 26, 0.5); +$newtab-card-secondshadow: rgba(29, 17, 51, 0.12); +$newtab-darktheme-card-secondshadow: rgba(21, 20, 26, 0.75); +$newtab-focus-outline-color: rgba(0, 96, 223, 0.25); +$newtab-darktheme-focus-outline-color: rgba(80, 145, 241, 0.5); +$newtab-darktheme-focus-border: #B5D3FF; +$newtab-darktheme-focus-border-selected: #B5D3FF; +$newtab-darktheme-primary-action-background: #4484E2; +$newtab-primary-action-background-off: #E9E9E9; +$newtab-darktheme-primary-action-background-off: #6A6A6F; +$newtab-card-darktheme-secondary-action-background: #515156; +$newtab-card-darktheme-secondary-action-background-hover: #606065; +$newtab-card-secondary-action-background-active: #E2E2E6; +$newtab-card-darktheme-secondary-action-background-active: #6F6F74; +$newtab-card-darktheme-hover-color: rgba(180, 180, 180, 0.1); +$newtab-card-hover-color: rgba(0, 0, 0, 0.05); +$newtab-tile-shadow-secondary: rgba(29, 17, 51, 0.2); +$newtab-tile-darktheme-shadow-secondary: rgba(21, 20, 26, 0.75); +$newtab-card-secondary-text-color: #585165; +$newtab-card-darktheme-secondary-text-color: #B1B1BD; + +// Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html +$photon-easing: cubic-bezier(0.07, 0.95, 0, 1); + +$border-radius: 3px; +$border-radius-new: 8px; + +// Grid related styles +$base-gutter: 32px; +$section-horizontal-padding: 25px; +$section-vertical-padding: 10px; +$section-spacing: 40px - $section-vertical-padding * 2; +$grid-unit: 96px; // 1 top site +// New Tab Experience grid unit needs to be smaller, but for now we are changing this UI with a pref, so requires duplication. +$grid-unit-small: 80px; // 1 top site + +$icon-size: 16px; +$smaller-icon-size: 12px; +$larger-icon-size: 32px; + +$searchbar-width-small: $grid-unit * 2 + $base-gutter * 1; +$searchbar-width-medium: $grid-unit * 4 + $base-gutter * 3; +$searchbar-width-large: $grid-unit * 6 + $base-gutter * 5; + +$searchbar-width-small-new: ($grid-unit * 2 + $base-gutter * 1) - 24px; +$searchbar-width-medium-new: ($grid-unit * 4 + $base-gutter * 3) - 120px; +$searchbar-width-large-new: ($grid-unit * 6 + $base-gutter * 5) - 136px; +$searchbar-width-largest-new: ($grid-unit * 6 + $base-gutter * 5) - 16px; + +$wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $section-horizontal-padding * 2; // 2 top sites +$wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $section-horizontal-padding * 2; // 4 top sites +$wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $section-horizontal-padding * 2; // 6 top sites +$wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $section-horizontal-padding * 2; // 8 top sites +// For the breakpoints, we need to add space for the scrollbar to avoid weird +// layout issues when the scrollbar is visible. 16px is wide enough to cover all +// OSes and keeps it simpler than a per-OS value. +$scrollbar-width: 16px; + +// Breakpoints +// If updating these breakpoints, don't forget to update uses of DSImage, which +// might choose the right image src to use depending on the viewport size. +$break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width; // 610px +$break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px +$break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px + +$section-title-font-size: 13px; + +$card-width: $grid-unit * 2 + $base-gutter; +$card-width-nte: $grid-unit-small * 2 + $base-gutter; + +$card-height: 266px; +$card-preview-image-height: 122px; +$card-title-margin: 2px; +$card-text-line-height: 19px; +// Larger cards for wider screens: +$card-width-large: 309px; +$card-height-large: 370px; +$card-preview-image-height-large: 155px; +// Compact cards for Highlights +$card-height-compact: 160px; +$card-preview-image-height-compact: 108px; + +$topic-margin-top: 12px; + +$context-menu-button-size: 27px; +$context-menu-button-boxshadow: 0 2px $grey-90-10; +$context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20; +$context-menu-font-size: 14px; +$context-menu-border-radius: 5px; +$context-menu-outer-padding: 5px; +$context-menu-item-padding: 3px 12px; + +$error-fallback-font-size: 12px; +$error-fallback-line-height: 1.5; + +$image-path: 'chrome://activity-stream/content/data/content/assets/'; + +$snippets-container-height: 120px; + +$textbox-shadow-size: 4px; + +$customize-menu-slide-bezier: cubic-bezier(0.46, 0.03, 0.52, 0.96); +$customize-menu-expand-bezier: cubic-bezier(0.82, 0.085, 0.395, 0.895); +$customize-menu-border-tint: 1px solid $newtab-card-tint; + +@mixin fade-in { + box-shadow: inset $inner-box-shadow, $shadow-primary; + transition: box-shadow 150ms; +} + +@mixin fade-in-card { + box-shadow: $shadow-primary; + transition: box-shadow 150ms; +} + +@mixin ds-focus-nte { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); +} + +@mixin context-menu-button-newtab-experience { + .context-menu-button { + background-image: url('chrome://global/skin/icons/more.svg'); + border: 0; + border-radius: 4px; + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; + + &:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); + } + } +} + +@mixin context-menu-button { + .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-contextmenu-button-color); + background-image: url('chrome://global/skin/icons/more.svg'); + background-position: 55%; + border: $border-primary; + border-radius: 100%; + box-shadow: $context-menu-button-boxshadow; + cursor: pointer; + fill: var(--newtab-icon-primary-color); + height: $context-menu-button-size; + inset-inline-end: -($context-menu-button-size / 2); + opacity: 0; + position: absolute; + top: -($context-menu-button-size / 2); + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: $context-menu-button-size; + + &:is(:active, :focus) { + opacity: 1; + transform: scale(1); + } + } +} + +@mixin context-menu-button-hover { + .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; + } +} + +@mixin nt-experience-context-menu-button-hover { + .context-menu-button { + opacity: 1; + } +} + +@mixin context-menu-open-middle { + .context-menu { + margin-inline-end: auto; + margin-inline-start: auto; + inset-inline-end: auto; + inset-inline-start: -$base-gutter; + } +} + +@mixin context-menu-open-left { + .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} + +@mixin flip-icon { + &:dir(rtl) { + transform: scaleX(-1); + } +} diff --git a/browser/components/newtab/content-src/styles/activity-stream-linux.scss b/browser/components/newtab/content-src/styles/activity-stream-linux.scss new file mode 100644 index 0000000000..aaff2d2efe --- /dev/null +++ b/browser/components/newtab/content-src/styles/activity-stream-linux.scss @@ -0,0 +1,13 @@ +// sass-lint:disable no-css-comments +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This is the linux variant */ +// sass-lint:enable no-css-comments + +$os-infopanel-arrow-height: 10px; +$os-infopanel-arrow-offset-end: 6px; +$os-infopanel-arrow-width: 20px; + +@import './activity-stream'; diff --git a/browser/components/newtab/content-src/styles/activity-stream-mac.scss b/browser/components/newtab/content-src/styles/activity-stream-mac.scss new file mode 100644 index 0000000000..1c19e514fb --- /dev/null +++ b/browser/components/newtab/content-src/styles/activity-stream-mac.scss @@ -0,0 +1,17 @@ +// sass-lint:disable no-css-comments +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This is the mac variant */ +// sass-lint:enable no-css-comments + +$os-infopanel-arrow-height: 10px; +$os-infopanel-arrow-offset-end: 7px; +$os-infopanel-arrow-width: 18px; + +[lwt-newtab-brighttext] { + -moz-osx-font-smoothing: grayscale; +} + +@import './activity-stream'; diff --git a/browser/components/newtab/content-src/styles/activity-stream-windows.scss b/browser/components/newtab/content-src/styles/activity-stream-windows.scss new file mode 100644 index 0000000000..10b8f61ef4 --- /dev/null +++ b/browser/components/newtab/content-src/styles/activity-stream-windows.scss @@ -0,0 +1,13 @@ +// sass-lint:disable no-css-comments +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This is the windows variant */ +// sass-lint:enable no-css-comments + +$os-infopanel-arrow-height: 10px; +$os-infopanel-arrow-offset-end: 6px; +$os-infopanel-arrow-width: 20px; + +@import './activity-stream'; |