tor-browser

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

identity-credential-notification.css (2529B)

      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 #identity-credential-notification,
      6 #credential-chooser-notification {
      7  --list-item-border: color-mix(in srgb, currentColor 10%, transparent);
      8  --list-item-checked-bgcolor: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
      9  --list-item-checked-border: color-mix(in srgb, var(--border-color-selected) 20%, transparent);
     10  @media (prefers-contrast) {
     11    --list-item-border: ThreeDShadow;
     12    --list-item-checked-bgcolor: transparent;
     13    --list-item-checked-border: AccentColor;
     14  }
     15 }
     16 
     17 #identity-credential-provider-selector-container,
     18 #identity-credential-account-selector-container,
     19 #credential-chooser-entry-selector-container {
     20  display: flex;
     21  flex-direction: column;
     22  gap: 12px;
     23  max-height: 540px;
     24  overflow: auto;
     25 }
     26 
     27 #identity-credential-header-text,
     28 #credential-chooser-header-text {
     29  font-weight: var(--heading-font-weight);
     30 }
     31 
     32 #identity-credential-header-container,
     33 #credential-chooser-header-container {
     34  margin: 16px 16px -16px 16px;
     35  display: flex;
     36 }
     37 
     38 .identity-credential-header-icon {
     39  width: 16px;
     40  height: 16px;
     41  margin-inline-end: 8px;
     42 }
     43 
     44 .identity-credential-list-item {
     45  display: flex;
     46  gap: 10px;
     47  padding-block: max(calc(var(--arrowpanel-menuitem-padding-block) * 2), 4px);
     48  padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) * 2);
     49  border: 2px solid var(--list-item-border);
     50  border-radius: var(--border-radius-small);
     51 }
     52 
     53 .identity-credential-list-item.checked,
     54 .identity-credential-list-item:has(> input:checked) {
     55  background-color: var(--list-item-checked-bgcolor);
     56  border-color: var(--list-item-checked-border);
     57 }
     58 
     59 .identity-credential-list-item-icon {
     60  -moz-context-properties: fill, fill-opacity;
     61  fill: currentColor;
     62  fill-opacity: 0.6;
     63  clip-path: circle(50%);
     64  width: 32px;
     65  height: 32px;
     66 }
     67 
     68 .identity-credential-list-item > .identity-credential-list-item-info {
     69  display: flex;
     70  flex-direction: column;
     71  justify-content: center;
     72  gap: 4px;
     73 }
     74 
     75 .identity-credential-list-item .identity-credential-list-item-label-primary {
     76  font-weight: var(--font-weight-semibold);
     77 }
     78 
     79 .identity-credential-list-item .identity-credential-list-item-label-secondary {
     80  font-size: 80%;
     81 }
     82 
     83 .identity-credential-list-item > .identity-credential-list-item-label-stack {
     84  display: flex;
     85  flex-direction: column;
     86  justify-content: center;
     87  gap: 4px;
     88 }