diff options
Diffstat (limited to '')
-rw-r--r-- | browser/components/firefoxview/firefoxview.css | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css new file mode 100644 index 0000000000..48cf5a9490 --- /dev/null +++ b/browser/components/firefoxview/firefoxview.css @@ -0,0 +1,187 @@ +/* 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/. */ + + @import url("chrome://global/skin/in-content/common.css"); + +:root { + /* override --in-content-page-background from common-shared.css */ + background-color: transparent; + --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background)); + --fxview-background-color-secondary: var(--newtab-background-color-secondary, #FFFFFF); + --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor); + --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor); + --fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color)); + --fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent); + --fxview-text-color-hover: var(--newtab-text-primary-color); + --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0); + --fxview-border: var(--fc-border-light, #CFCFD8); + + /* ensure utility button hover states match those of the rest of the page */ + --in-content-button-background-hover: var(--fxview-element-background-hover); + --in-content-button-background-active: var(--fxview-element-background-active); + --in-content-button-text-color-hover: var(--fxview-text-color-hover); + + --fxview-sidebar-width: 288px; + --fxview-margin-top: 72px; + --fxview-card-padding-inline: 4px; + + /* copy over newtab background color from activity-stream-[os].css files */ + --newtab-background-color: #F9F9FB; + + --fxview-card-header-font-weight: 500; +} + +@media (prefers-color-scheme: dark) { + :root { + --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white); + --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white); + --fxview-border: #8F8F9D; + + /* copy over newtab colors from activity-stream-[os].css files */ + --newtab-background-color: #2B2A33; + --newtab-background-color-secondary: #42414d; + --newtab-primary-action-background: #00ddff; + } +} + +@media (prefers-contrast) { + :root { + --fxview-element-background-hover: ButtonText; + --fxview-element-background-active: ButtonText; + --fxview-text-color-hover: ButtonFace; + --fxview-border: var(--fc-border-hcm, -moz-dialogtext); + --newtab-primary-action-background: LinkText; + --newtab-background-color: Canvas; + --newtab-background-color-secondary: Canvas; + } +} + +@media (max-width: 52rem) { + :root { + --fxview-sidebar-width: 82px; + } +} + +body { + display: grid; + gap: 12px; + grid-template-columns: var(--fxview-sidebar-width) 1fr; + background-color: var(--fxview-background-color); + color: var(--fxview-text-primary-color); +} + +.main-container { + width: 90%; + margin: 0 auto; + min-width: 43rem; + max-width: 71rem; +} + +@media (min-width: 120rem) { + .main-container { + margin-inline-start: 148px; + } +} + +.page-header { + margin: 0; +} + +fxview-category-button:focus-visible { + outline-offset: var(--in-content-focus-outline-inset); +} + +fxview-category-button[name="recentbrowsing"]::part(icon) { + background-image: url("chrome://browser/content/firefoxview/category-recentbrowsing.svg"); +} +fxview-category-button[name="opentabs"]::part(icon) { + background-image: url("chrome://browser/content/firefoxview/category-opentabs.svg"); +} +fxview-category-button[name="recentlyclosed"]::part(icon) { + background-image: url("chrome://browser/content/firefoxview/category-recentlyclosed.svg"); +} +fxview-category-button[name="syncedtabs"]::part(icon) { + background-image: url("chrome://browser/content/firefoxview/category-syncedtabs.svg"); +} +fxview-category-button[name="history"]::part(icon) { + background-image: url("chrome://browser/content/firefoxview/category-history.svg"); +} + +fxview-tab-list.with-dismiss-button::part(secondary-button) { + background-image: url("chrome://global/skin/icons/close.svg"); +} + +fxview-tab-list.with-context-menu::part(secondary-button) { + background-image: url("chrome://global/skin/icons/more.svg"); +} + +.sticky-container { + position: sticky; + top: 0; + padding-block: var(--fxview-margin-top) 33px; + z-index: 1; + display: flex; + flex-direction: column; + gap: 35px; +} + +.sticky-container.bottom-fade { + /* + * padding-inline is doubled to allow for the negative margin below to offset the + * container so that the box-shadows on the cards are hidden as they pass underneath. + */ + padding-inline: calc(var(--fxview-card-padding-inline) * 2); + margin: 0 calc(var(--fxview-card-padding-inline) * -1); + + background: + linear-gradient( + to bottom, + var(--fxview-background-color) 0%, + var(--fxview-background-color) 95%, + transparent 100% + ); + /* When you use HCM or set custom colors, you can't use a gradient. */ + @media (forced-colors) { + background: var(--fxview-background-color); + } +} + +.cards-container { + padding-inline: var(--fxview-card-padding-inline); +} + +view-opentabs-contextmenu { + display: contents; +} + +/* This should be supported within panel-{item,list} rather than modifying it */ +panel-item::part(button) { + padding-inline-start: 12px; + cursor: pointer; +} + +panel-item::part(button):hover { + background-color: var(--fxview-element-background-hover); + color: var(--fxview-text-color-hover); +} + +panel-item::part(button):hover:active { + background-color: var(--fxview-element-background-active); +} + +panel-list { + overflow-y: visible; +} + +fxview-category-navigation { + overflow-y: auto; +} + +fxview-category-navigation h1 { + margin-block: 0; +} + +fxview-empty-state:not([isSelectedTab]) button[slot="primary-action"] { + margin-inline-start: 0; +} |