tor-browser

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

_DownloadMobilePromoHighlight.scss (2588B)

      1 // Default overrides from Feature Highlight
      2 .download-firefox-feature-highlight {
      3  .icon.icon-dismiss {
      4    // change background property to use transparent background
      5    background: transparent url('chrome://global/skin/icons/close.svg');
      6    background-size: var(--size-item-small);
      7    height: var(--size-item-small);
      8    width: var(--size-item-small);
      9    position: absolute;
     10    margin: 0;
     11    // Bug 1967304 - Alignment for caret arrow
     12    inset-block-start: calc(var(--space-medium) + 2px); // stylelint-disable-line declaration-property-value-disallowed-list
     13    inset-inline-end: calc(var(--space-medium) + 2px); // stylelint-disable-line declaration-property-value-disallowed-list
     14 
     15    @media (prefers-color-scheme: dark) {
     16      // override color so that it is visible on white image background
     17      --dark-icon-color: var(--color-gray-70);
     18 
     19      color: var(--dark-icon-color);
     20    }
     21 
     22    &:hover {
     23      --dark-icon-hover: var(--color-gray-60);
     24 
     25      color: var(--dark-icon-hover);
     26    }
     27  }
     28 
     29  .feature-highlight .feature-highlight-modal {
     30    --arrow-size: 24px;
     31 
     32    padding: var(--space-large);
     33    width: 271px;
     34 
     35    .content-wrapper {
     36      margin-block: 0;
     37 
     38      img {
     39        display: block;
     40        margin: 0 auto var(--space-large);
     41      }
     42    }
     43 
     44    .message-icon {
     45      display: none;
     46    }
     47 
     48    &.inset-block-end {
     49      margin-block-start: var(--space-xxlarge);
     50    }
     51 
     52    // Bug 1967304 - Alignment for caret arrow
     53    &.inset-inline-end {
     54      inset-inline-start: calc(var(--arrow-size) * -2); // stylelint-disable-line declaration-property-value-disallowed-list
     55 
     56      &::after {
     57        inset-inline-start: calc(var(--space-xxlarge) - 14px); // stylelint-disable-line declaration-property-value-disallowed-list
     58      }
     59    }
     60 
     61    // Bug 1967304 - Alignment for caret arrow
     62    &.inset-inline-start {
     63      inset-inline-end: calc(calc(calc(var(--arrow-size) / 2) * -1) - 6px); // stylelint-disable-line declaration-property-value-disallowed-list
     64 
     65      &::after {
     66        inset-inline-end: calc(var(--space-xxlarge) - 12px); // stylelint-disable-line declaration-property-value-disallowed-list
     67      }
     68    }
     69 
     70    // Message Arrow Pointer
     71    &::after {
     72      height: var(--arrow-size);
     73      width: var(--arrow-size);
     74      box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 15%);
     75      transform: rotate(-45deg);
     76      pointer-events: none;
     77    }
     78 
     79    p {
     80      margin: 0;
     81      padding: 0;
     82    }
     83 
     84    .title {
     85      font-weight: var(--heading-font-weight);
     86      margin-block: var(--space-small);
     87    }
     88 
     89    .subtitle {
     90      margin-block: 0;
     91    }
     92  }
     93 }