tor-browser

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

fxaPairDevice.css (2326B)

      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 #fxaPairDeviceDialog {
      6  padding-bottom: 2em;
      7 }
      8 
      9 #pairTitle {
     10  font-size: 2.1rem;
     11  font-weight: var(--font-weight-bold);
     12  padding-top: 12px;
     13  text-align: center;
     14 }
     15 
     16 .pairHeading {
     17  font-size: 1.08em;
     18 }
     19 
     20 .menu-icon {
     21  width: 20px;
     22  height: 20px;
     23  vertical-align: middle;
     24  -moz-context-properties: fill;
     25  fill: currentColor;
     26 }
     27 
     28 #qrCodeDisplay {
     29  width: 450px;
     30  margin: auto;
     31 }
     32 
     33 #qrWrapper {
     34  position: relative;
     35  width: 200px;
     36  height: 200px;
     37  margin: auto;
     38  margin-top: 28px;
     39 }
     40 
     41 #qrContainer {
     42  height: 200px;
     43  width: 200px;
     44  background-size: contain;
     45  image-rendering: -moz-crisp-edges;
     46  transition: filter 250ms cubic-bezier(0.07, 0.95, 0, 1);
     47 }
     48 
     49 #qrWrapper:not([pairing-status="ready"]) #qrContainer {
     50  opacity: 0.05;
     51  filter: blur(3px);
     52 }
     53 
     54 #qrWrapper:not([pairing-status="loading"]) #qrSpinner {
     55  opacity: 0;
     56 }
     57 
     58 #qrSpinner {
     59  display: block;
     60  position: absolute;
     61  height: 200px;
     62  width: 200px;
     63 }
     64 
     65 #qrSpinner::before {
     66  background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg");
     67  animation: 0.9s spin infinite linear;
     68  background-size: 36px;
     69  background-repeat: no-repeat;
     70  background-position: center;
     71  display: block;
     72  position: absolute;
     73  height: 200px;
     74  width: 200px;
     75  content: "";
     76  transition: opacity 250ms cubic-bezier(0.07, 0.95, 0, 1);
     77  will-change: transform;
     78  margin-inline: auto;
     79 }
     80 
     81 #qrWrapper:not([pairing-status="error"]) #qrError {
     82  display: none;
     83 }
     84 
     85 #qrError {
     86  display: flex;
     87  justify-content: center;
     88  align-items: center;
     89  flex-direction: column;
     90  width: 200px; /* Same as #qrContainer */
     91  position: absolute;
     92  inset: 0;
     93  margin-inline: auto;
     94  transition: opacity 250ms cubic-bezier(0.07, 0.95, 0, 1);
     95  cursor: pointer;
     96 }
     97 
     98 .qr-error-text {
     99  text-align: center;
    100  user-select: none;
    101  display: block;
    102  color: #2484c6;
    103  cursor: pointer;
    104 }
    105 
    106 #refresh-qr {
    107  width: 36px;
    108  height: 36px;
    109  background-image: url("chrome://global/skin/icons/reload.svg");
    110  background-size: contain;
    111  -moz-context-properties: fill;
    112  fill: #2484c6;
    113 }
    114 
    115 @keyframes spin {
    116  0% {
    117    transform: rotate(0deg);
    118  }
    119  100% {
    120    transform: rotate(360deg);
    121  }
    122 }