tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

firefoxview.css (4841B)

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