tor-browser

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

profiles-pages.css (1796B)

      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 :host {
      6  --header-avatar-size: 80px;
      7 }
      8 
      9 :root {
     10  background-color: var(--newtab-background-color, var(--background-color-canvas));
     11 }
     12 
     13 html,
     14 body {
     15  min-width: 100%;
     16  width: fit-content;
     17  min-height: 100vh;
     18 }
     19 
     20 body {
     21  display: flex;
     22  justify-content: center;
     23 }
     24 
     25 edit-profile-card,
     26 delete-profile-card,
     27 new-profile-card {
     28  display: block;
     29  margin: var(--space-xxlarge) var(--space-large);
     30 
     31  @media only screen and (width >= 700px) {
     32    width: 672px;
     33  }
     34 
     35  @media only screen and (width >= 830px) {
     36    width: 768px;
     37    margin: calc(1.5 * var(--space-xxlarge)) 0;
     38  }
     39 
     40  @media only screen and (width >= 1280px) {
     41    width: 912px;
     42    margin: calc(1.5 * var(--space-xxlarge)) 0;
     43  }
     44 
     45  @media only screen and (width >= 1366px) {
     46    margin: calc(2 * var(--space-xxlarge)) 0;
     47  }
     48 }
     49 
     50 #edit-profile-card,
     51 #delete-profile-card {
     52  display: flex;
     53  gap: 48px;
     54  padding-block: 50px var(--space-xxlarge);
     55  padding-inline: var(--space-xxlarge);
     56 
     57  @media only screen and (width <= 830px) {
     58    flex-direction: column;
     59    gap: var(--space-xxlarge);
     60  }
     61 
     62  & h1 {
     63    word-break: break-all;
     64  }
     65 }
     66 
     67 #profile-content {
     68  display: flex;
     69  flex-direction: column;
     70  gap: var(--space-medium);
     71 }
     72 
     73 #header-avatar {
     74  -moz-context-properties: fill, stroke;
     75 
     76  width: var(--header-avatar-size);
     77  height: var(--header-avatar-size);
     78  border-radius: var(--border-radius-circle);
     79  border: var(--card-border);
     80 }
     81 
     82 #more-themes {
     83  width: fit-content;
     84 }
     85 
     86 .sub-header {
     87  font-size: var(--font-size-large);
     88  color: var(--text-color-deemphasized);
     89 }
     90 
     91 .disable-text-selection {
     92  user-select: none;
     93 }