tor-browser

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

securityLevelPreferences.css (4553B)

      1 .security-level-grid {
      2  display: grid;
      3  grid-template:
      4    "icon name badge button" min-content
      5    "icon summary summary button" auto
      6    "icon extra extra ." auto
      7    / max-content max-content 1fr max-content;
      8 }
      9 
     10 .security-level-icon {
     11  grid-area: icon;
     12  align-self: start;
     13  width: 24px;
     14  height: 24px;
     15  -moz-context-properties: fill;
     16  fill: var(--icon-color);
     17  margin-block-start: var(--space-xsmall);
     18  margin-inline-end: var(--space-large);
     19 }
     20 
     21 :-moz-locale-dir(rtl) .security-level-icon {
     22  transform: scaleX(-1);
     23 }
     24 
     25 .security-level-current-badge {
     26  grid-area: badge;
     27  align-self: center;
     28  justify-self: start;
     29  white-space: nowrap;
     30  background: var(--background-color-information);
     31  color: inherit;
     32  font-size: var(--font-size-small);
     33  border-radius: var(--border-radius-circle);
     34  margin-inline-start: var(--space-small);
     35  padding-block: var(--space-xsmall);
     36  padding-inline: var(--space-small);
     37 }
     38 
     39 .security-level-current-badge span {
     40  /* Still accessible to screen reader, but not visual.
     41   * Keep inline, but with no layout width. */
     42  display: inline-block;
     43  width: 1px;
     44  margin-inline-end: -1px;
     45  clip-path: inset(50%);
     46 }
     47 
     48 @media (prefers-contrast) and (not (forced-colors)) {
     49  .security-level-current-badge {
     50    /* Match the checkbox/radio colors. */
     51    background: var(--color-accent-primary);
     52    color: var(--button-text-color-primary);
     53  }
     54 }
     55 
     56 @media (forced-colors) {
     57  .security-level-current-badge {
     58    /* Match the checkbox/radio/selected colors. */
     59    background: SelectedItem;
     60    color: SelectedItemText;
     61  }
     62 }
     63 
     64 .security-level-name {
     65  grid-area: name;
     66  font-weight: var(--font-weight-bold);
     67  align-self: center;
     68  white-space: nowrap;
     69 }
     70 
     71 .security-level-description {
     72  display: grid;
     73  grid-column: summary-start / extra-end;
     74  grid-row: summary-start / extra-end;
     75  grid-template-rows: subgrid;
     76  grid-template-columns: subgrid;
     77  margin-block-start: var(--space-small);
     78 }
     79 
     80 .security-level-summary {
     81  grid-area: summary;
     82 }
     83 
     84 .security-level-description-extra {
     85  grid-area: extra;
     86  margin-block: var(--space-medium) 0;
     87  margin-inline: var(--space-large) 0;
     88  padding: 0;
     89 }
     90 
     91 .security-level-description-bullet:not(:last-child) {
     92  margin-block-end: var(--space-medium);
     93 }
     94 
     95 /* Tweak current security level display. */
     96 
     97 #security-level-current {
     98  margin-block-start: var(--space-large);
     99  background: var(--background-color-box);
    100  border: 1px solid var(--border-color);
    101  border-radius: var(--border-radius-small);
    102  padding: var(--space-medium);
    103 }
    104 
    105 #security-level-change {
    106  grid-area: button;
    107  align-self: center;
    108  margin: 0;
    109  margin-inline-start: var(--space-large);
    110 }
    111 
    112 /* Adjust which content is visible depending on the current security level. */
    113 
    114 #security-level-current:not([data-current-level="standard"]) .security-level-current-standard {
    115  display: none;
    116 }
    117 
    118 #security-level-current:not([data-current-level="safer"]) .security-level-current-safer {
    119  display: none;
    120 }
    121 
    122 #security-level-current:not([data-current-level="safest"]) .security-level-current-safest {
    123  display: none;
    124 }
    125 
    126 #security-level-current:not([data-current-level="custom"]) .security-level-current-custom {
    127  display: none;
    128 }
    129 
    130 #security-level-current[data-current-level="standard"] .security-level-icon {
    131  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
    132 }
    133 
    134 #security-level-current[data-current-level="safer"] .security-level-icon {
    135  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
    136 }
    137 
    138 #security-level-current[data-current-level="safest"] .security-level-icon {
    139  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
    140 }
    141 
    142 #security-level-current[data-current-level="custom"] .security-level-icon {
    143  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard_custom");
    144 }
    145 
    146 /* Tweak security level dialog. */
    147 
    148 #security-level-radiogroup {
    149  margin-block: var(--space-large) var(--space-xlarge);
    150 }
    151 
    152 .security-level-radio-container {
    153  padding-block: var(--space-large);
    154 }
    155 
    156 #security-level-radiogroup .security-level-radio {
    157  margin: 0;
    158 }
    159 
    160 #security-level-radiogroup .radio-label-box {
    161  /* .security-level-current-badge already has a margin. */
    162  margin: 0;
    163 }
    164 
    165 #security-level-radiogroup .privacy-detailedoption.security-level-radio-container:not(.selected) .security-level-description-extra {
    166  /* .privacy-detailedoption uses visibility: hidden, which does not work with
    167   * our grid display (the margin is still reserved) so we use display: none
    168   * instead. */
    169  display: none;
    170 }