browser/components/firefoxview/firefoxview.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5  @import url("chrome://global/skin/in-content/common.css");
   6
   7 :root {
   8   /* override --in-content-page-background from common-shared.css */
   9   background-color: transparent;
  10   --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
  11   --fxview-background-color-secondary: var(--newtab-background-color-secondary, #FFFFFF);
  12   --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
  13   --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
  14   --fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color));
  15   --fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent);
  16   --fxview-text-color-hover: var(--newtab-text-primary-color);
  17   --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
  18   --fxview-border: var(--fc-border-light, #CFCFD8);
  19   --fxview-indicator-stroke-color-hover: #DEDDDE;
  20
  21   /* ensure utility button hover states match those of the rest of the page */
  22   --in-content-button-background-hover: var(--fxview-element-background-hover);
  23   --in-content-button-background-active: var(--fxview-element-background-active);
  24   --in-content-button-text-color-hover: var(--fxview-text-color-hover);
  25
  26   --fxview-sidebar-width: 288px;
  27   --fxview-margin-top: 72px;
  28   --fxview-card-padding-inline: 4px;
  29
  30   /* copy over newtab background color from activity-stream-[os].css files */
  31   --newtab-background-color: #F9F9FB;
  32
  33   --fxview-card-header-font-weight: 500;
  34 }
  35
  36 @media (prefers-color-scheme: dark) {
  37   :root {
  38     --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
  39     --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
  40     --fxview-border: #8F8F9D;
  41     --fxview-indicator-stroke-color-hover:#5D5C66;
  42
  43     /* copy over newtab colors from activity-stream-[os].css files */
  44     --newtab-background-color: #2B2A33;
  45     --newtab-background-color-secondary: #42414d;
  46     --newtab-primary-action-background: #00ddff;
  47   }
  48 }
  49
  50 @media (forced-colors) {
  51   :root {
  52     --fxview-element-background-hover: ButtonText;
  53     --fxview-element-background-active: ButtonText;
  54     --fxview-text-color-hover: ButtonFace;
  55     --fxview-border: var(--fc-border-hcm, -moz-dialogtext);
  56     --newtab-primary-action-background: LinkText;
  57     --newtab-background-color: Canvas;
  58     --newtab-background-color-secondary: Canvas;
  59   }
  60 }
  61
  62 @media (prefers-contrast) {
  63   :root {
  64     --fxview-border: var(--border-color);
  65   }
  66 }
  67
  68 @media (max-width: 52rem) {
  69   :root {
  70     --fxview-sidebar-width: 82px;
  71   }
  72 }
  73
  74 body {
  75   display: grid;
  76   gap: 12px;
  77   grid-template-columns: var(--fxview-sidebar-width) 1fr;
  78   background-color: var(--fxview-background-color);
  79   color: var(--fxview-text-primary-color);
  80
  81   @media (max-width: 52rem) {
  82     display: flex;
  83   }
  84 }
  85
  86 .main-container {
  87   width: 90%;
  88   margin: 0 auto;
  89   min-width: 43rem;
  90   max-width: 71rem;
  91 }
  92
  93 @media (min-width: 120rem) {
  94   .main-container {
  95     margin-inline-start: 148px;
  96   }
  97 }
  98
  99 .page-header {
 100   margin: 0;
 101 }
 102
 103 .sticky-container {
 104   position: sticky;
 105   top: 0;
 106   padding-block: var(--fxview-margin-top) 33px;
 107   z-index: 1;
 108   display: flex;
 109   flex-direction: column;
 110   gap: 35px;
 111 }
 112
 113 .sticky-container.bottom-fade {
 114   /*
 115    * padding-inline is doubled to allow for the negative margin below to offset the
 116    * container so that the box-shadows on the cards are hidden as they pass underneath.
 117    */
 118   padding-inline: calc(var(--fxview-card-padding-inline) * 2);
 119   margin: 0 calc(var(--fxview-card-padding-inline) * -1);
 120
 121   background:
 122   linear-gradient(
 123     to bottom,
 124     var(--fxview-background-color) 0%,
 125     var(--fxview-background-color) 95%,
 126     transparent 100%
 127   );
 128   /* When you use HCM or set custom colors, you can't use a gradient. */
 129   @media (forced-colors) {
 130     background: var(--fxview-background-color);
 131   }
 132 }
 133
 134 .cards-container {
 135   padding-inline: var(--fxview-card-padding-inline);
 136 }
 137
 138 view-opentabs-contextmenu {
 139   display: contents;
 140 }
 141
 142 /* This should be supported within panel-{item,list} rather than modifying it */
 143 panel-item::part(button) {
 144   padding-inline-start: 12px;
 145   cursor: pointer;
 146 }
 147
 148 panel-item::part(button):hover {
 149   background-color: var(--fxview-element-background-hover);
 150   color: var(--fxview-text-color-hover);
 151 }
 152
 153 panel-item::part(button):hover:active {
 154   background-color: var(--fxview-element-background-active);
 155 }
 156
 157 fxview-empty-state {
 158   &:not([isSelectedTab]) button[slot="primary-action"] {
 159     margin-inline-start: 0;
 160   }
 161
 162   /* these illustrations need a larger width otherwise they look too small */
 163   &.synced-tabs::part(image-container) {
 164     min-width: 250px;
 165   }
 166
 167   /* center align the empty state image */
 168   &.recentlyclosed::part(image-container) {
 169     margin-inline-start: 50px;
 170   }
 171
 172   /* align empty state text with synced tabs on recent browsing page */
 173   &.recentlyclosed::part(main) {
 174     padding-inline-start: 50px;
 175   }
 176 }