tor-browser

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

profile-card.css (2481B)

      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 :host {
      8  --avatar-size: 80px;
      9  --profile-card-radius: var(--border-radius-large);
     10  --profile-card-radius-inner: calc(var(--profile-card-radius) - var(--border-width));
     11 }
     12 
     13 .profile-card {
     14  --card-padding: 0;
     15  --card-border-radius: var(--profile-card-radius);
     16 
     17  height: 185px;
     18  width: 200px;
     19 
     20  &:hover {
     21    background-color: var(--button-background-color-hover);
     22    border-color: var(--button-background-color-hover);
     23    color: var(--button-text-color-hover);
     24  }
     25 
     26  &:hover:active {
     27    background-color: var(--button-background-color-active);
     28    border-color: var(--button-background-color-active);
     29    color: var(--button-text-color-active);
     30  }
     31 
     32  &:focus-visible {
     33    outline: var(--focus-outline);
     34    outline-offset: var(--focus-outline-offset);
     35  }
     36 }
     37 
     38 .new-profile-card {
     39  border: var(--border-width) dashed var(--border-color-interactive);
     40  background-color: transparent;
     41  border-radius: var(--profile-card-radius);
     42  box-shadow: none;
     43 
     44  &:hover,
     45  &:hover:active {
     46    border-color: var(--icon-color);
     47  }
     48 
     49  .profile-background-image {
     50    background-size: 80px;
     51  }
     52 
     53  .profile-details {
     54    border-top: var(--border-width) dashed var(--border-color-interactive);
     55  }
     56 }
     57 
     58 .profile-background-container {
     59  position: relative;
     60  width: 100%;
     61  height: 136px;
     62 
     63  display: flex;
     64  justify-content: center;
     65  align-items: center;
     66 }
     67 
     68 .profile-background-image {
     69  width: 100%;
     70  height: 100%;
     71  background-image: url("chrome://browser/content/profiles/assets/plus.svg");
     72  background-size: cover;
     73  background-repeat: no-repeat;
     74  background-position: center;
     75  -moz-context-properties: fill, stroke;
     76  fill: var(--icon-color);
     77  border-radius: var(--profile-card-radius-inner) var(--profile-card-radius-inner) 0 0;
     78 }
     79 
     80 .profile-avatar {
     81  position: absolute;
     82  width: var(--avatar-size);
     83  height: var(--avatar-size);
     84  z-index: 1;
     85 
     86  background-size: contain;
     87  background-repeat: no-repeat;
     88  background-position: center;
     89  -moz-context-properties: fill, stroke;
     90 }
     91 
     92 .profile-details {
     93  display: flex;
     94  align-items: center;
     95  justify-content: space-between;
     96  height: 46px;
     97  padding: 0 var(--space-large);
     98  border-top: var(--border-width) solid var(--border-color-card);
     99 }