tor-browser

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

fxview-empty-state.css (1654B)

      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/design-system/text-and-typography.css");
      6 
      7 [slot="main"] {
      8  display: flex;
      9  gap: 40px;
     10  align-items: center;
     11  padding: 36px;
     12 }
     13 
     14 [slot="main"].selectedTab {
     15  flex-direction: column;
     16  text-align: center;
     17  gap: 22px;
     18  min-height: 264px;
     19 }
     20 
     21 [slot="main"].selectedTab .header {
     22  justify-content: center;
     23 }
     24 
     25 [slot="main"].imageHidden .image-container {
     26  display: none;
     27 }
     28 
     29 [slot="main"].imageHidden .main {
     30  display: flex;
     31  flex: 1;
     32  justify-content: center;
     33 }
     34 
     35 .image-container {
     36  min-width: 150px;
     37  text-align: center;
     38 }
     39 
     40 .image {
     41  -moz-context-properties: fill, stroke, fill-opacity;
     42  fill: var(--fxview-background-color-secondary);
     43  stroke: var(--fxview-text-primary-color);
     44 }
     45 
     46 .header {
     47  margin-block: 0;
     48  align-items: center;
     49  gap: 8px;
     50 
     51  :host(.search-results) & {
     52    font-size: unset;
     53 
     54    & span {
     55      overflow-wrap: anywhere;
     56    }
     57  }
     58 
     59  &:not([hidden]) {
     60    display: flex;
     61  }
     62 }
     63 
     64 .icon {
     65  background-position: center center;
     66  background-repeat: no-repeat;
     67  width: var(--icon-size-medium);
     68  height: var(--icon-size-medium);
     69 
     70  &:not([hidden]) {
     71    display: inline-block;
     72  }
     73 }
     74 
     75 .description {
     76  color: var(--text-color-deemphasized);
     77  margin-block: 4px 15px;
     78 }
     79 
     80 .description.secondary {
     81  margin-block-start: 16px;
     82 }
     83 
     84 .main a {
     85  color: var(--fxview-primary-action-background);
     86 }
     87 
     88 img.greyscale {
     89  filter: grayscale(100%);
     90  @media not (forced-colors) {
     91    opacity: 0.5;
     92  }
     93 }