tor-browser

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

model-optin.css (2311B)

      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 .optin-wrapper {
      6  --optin-wrapper-box-shadow: initial;
      7  background-color: var(--background-color-canvas);
      8  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
      9  box-shadow: var(--optin-wrapper-box-shadow);
     10  border-radius: var(--border-radius-medium);
     11  padding: var(--space-large);
     12 }
     13 
     14 .optin-header-wrapper,
     15 .optin-actions {
     16  display: flex;
     17  justify-content: center;
     18 }
     19 
     20 .optin-header {
     21  display: flex;
     22  align-items: center;
     23  gap: var(--space-medium);
     24 }
     25 
     26 .optin-heading {
     27  font-weight: var(--heading-font-weight);
     28  font-size: var(--font-size-xxlarge);
     29  margin: 0;
     30 }
     31 
     32 .optin-message {
     33  text-align: center;
     34  font-size: var(--font-size-large);
     35 }
     36 
     37 .optin-footer-message {
     38  margin-top: var(--space-large);
     39  text-align: center;
     40 }
     41 
     42 .optin-heading-icon {
     43  width: 12px;
     44  height: 12px;
     45  fill: currentColor;
     46  -moz-context-properties: fill, fill-opacity, stroke;
     47  margin-inline-start: var(--space-small);
     48  &.icon-at-end {
     49    order: 1;
     50  }
     51 }
     52 
     53 .optin-progress-bar-wrapper {
     54  margin-bottom: var(--space-medium);
     55 }
     56 
     57 .optin-progress-bar {
     58  width: 100%;
     59 
     60  &::-moz-progress-bar {
     61    height: 0;
     62  }
     63 
     64  &:indeterminate {
     65    --optin-animation-base-color-1: light-dark(var(--color-blue-50), var(--color-blue-30));
     66    --optin-animation-base-color-2: color-mix(in srgb, var(--optin-animation-base-color-1) 25%, transparent);
     67 
     68    animation: optin-loading-bar-animation 3s infinite;
     69    outline-color: var(--optin-animation-base-color-1);
     70    border-color: var(--optin-animation-base-color-2);
     71    background: linear-gradient(
     72      100deg,
     73      color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) 30%,
     74      var(--optin-animation-base-color-2) 50%,
     75      color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) 70%
     76    );
     77 
     78    background-size: 200% 100%;
     79    border-radius: var(--border-radius-small);
     80    height: 4px;
     81    white-space: nowrap;
     82    width: 100%;
     83  }
     84 }
     85 
     86 @keyframes optin-loading-bar-animation {
     87  0% {
     88    background-position: 200% 0;
     89  }
     90 
     91  50% {
     92    background-position: 0 0;
     93  }
     94 
     95  100% {
     96    background-position: -200% 0;
     97  }
     98 }