browser/components/firefoxview/firefoxview.css

Propagation: 26.32%

Back to Home

/* 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);
  --fxview-indicator-stroke-color-hover: #DEDDDE;

  /* 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;
    --fxview-indicator-stroke-color-hover:#5D5C66;

    /* 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 (forced-colors) {
  :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 (prefers-contrast) {
  :root {
    --fxview-border: var(--border-color);
  }
}

@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);

  @media (max-width: 52rem) {
    display: flex;
  }
}

.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;
}

.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);
}

fxview-empty-state {
  &:not([isSelectedTab]) button[slot="primary-action"] {
    margin-inline-start: 0;
  }

  /* these illustrations need a larger width otherwise they look too small */
  &.synced-tabs::part(image-container) {
    min-width: 250px;
  }

  /* center align the empty state image */
  &.recentlyclosed::part(image-container) {
    margin-inline-start: 50px;
  }

  /* align empty state text with synced tabs on recent browsing page */
  &.recentlyclosed::part(main) {
    padding-inline-start: 50px;
  }
}

Back to Home