tor-browser

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

securityLevelPanel.css (2008B)

      1 /* Security Level CSS */
      2 
      3 #securityLevel-background {
      4  min-height: 10em;
      5  padding-inline: 16px;
      6  column-gap: 0.5em;
      7  display: grid;
      8  grid-template:
      9    "top-pad icon" 16px
     10    "title icon" auto
     11    "body icon" auto
     12    "learn-more icon" auto
     13    "bottom-pad icon" minmax(8px, 1fr)
     14    / auto auto;
     15 }
     16 
     17 #securityLevel-background-image {
     18  grid-area: icon;
     19  --security-level-icon-size: 9em;
     20  width: var(--security-level-icon-size);
     21  height: var(--security-level-icon-size);
     22  margin-block: 0.4em;
     23  /* Middle of shield aligns with the panel padding: */
     24  margin-inline-end: calc(-0.5 * var(--security-level-icon-size));
     25  align-self: start;
     26  justify-self: end;
     27  /* This icon is meant to act as background, so disable dragging or interfering
     28   * with clicks. */
     29  pointer-events: none;
     30  -moz-context-properties: fill, fill-opacity;
     31  fill-opacity: 1;
     32  fill: var(--border-color-card);
     33 }
     34 
     35 /* NOTE: Use ":dir" instead of ":-moz-locale-dir" when panel switches to HTML. */
     36 #securityLevel-background-image:-moz-locale-dir(rtl) {
     37  transform: scaleX(-1);
     38 }
     39 
     40 #securityLevel-panel:is([level="standard"], [level="custom"]) #securityLevel-background-image {
     41  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
     42 }
     43 
     44 #securityLevel-panel[level="safer"] #securityLevel-background-image {
     45  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
     46 }
     47 
     48 #securityLevel-panel[level="safest"] #securityLevel-background-image {
     49  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
     50 }
     51 
     52 #securityLevel-background p {
     53  margin-block: 0 16px;
     54 }
     55 
     56 /* Override margin in panelUI-shared.css */
     57 #securityLevel-panel toolbarseparator#securityLevel-separator {
     58  margin-inline: 16px;
     59 }
     60 
     61 #securityLevel-level {
     62  font-size: larger;
     63  font-weight: var(--font-weight-bold);
     64  grid-area: title;
     65 }
     66 
     67 #securityLevel-summary {
     68  max-width: 20em;
     69  grid-area: body;
     70 }
     71 
     72 #securityLevel-learnMore {
     73  align-self: start;
     74  grid-area: learn-more;
     75 }