chrome/skin/tor-circuit-display.css

   1 /*
   2 This CSS file is for styling the tor circuit display, which consists of a title,
   3 a domain, and a bulleted list.
   4
   5 Each bullet in the circuit node list is supposed to represent a Tor circuit node,
   6 and lines drawn between them to represent Tor network inter-relay connections.
   7 */
   8
   9 #circuit-display-container {
  10   margin-inline: 8px;
  11   margin-top: 0px;
  12   margin-bottom: 4px;
  13   padding: 0px 3px;
  14 }
  15
  16 #circuit-display-container > toolbarseparator {
  17   margin-block: 0px;
  18   margin-inline: -3px;
  19   width: calc(100% + 6px);
  20 }
  21
  22 #circuit-display-headline {
  23   margin-inline-start: 8px;
  24 }
  25
  26 #circuit-display-header {
  27   background-image: url(chrome://torbutton/skin/torbutton.svg);
  28   background-repeat: no-repeat;
  29   background-position: 4px 50%;
  30   background-size: 16px auto;
  31   min-height:  16px;
  32   -moz-context-properties: fill, fill-opacity;
  33   fill: currentColor;
  34   margin-block: 8px;
  35 }
  36
  37 #circuit-display-header:-moz-locale-dir(rtl) {
  38   background-position-x: right;
  39 }
  40
  41 #circuit-display-header > hbox {
  42   margin-inline-start: 16px;
  43 }
  44
  45 #circuit-display-content {
  46   width: 100%;
  47 }
  48
  49 #circuit-display-content > * {
  50   margin-inline: 0px;
  51   margin-inline-start: 16px;
  52   margin-top: 0px;
  53   margin-bottom: 8px;
  54 }
  55
  56 #circuit-display-content > hbox {
  57   display: flex;
  58 }
  59
  60 #circuit-reload-button-container {
  61   padding-top: 8px;
  62   justify-content: flex-end;
  63 }
  64
  65 #circuit-reload-content {
  66   cursor: default;
  67   width: 100%;
  68 }
  69
  70 /* Format the domain text. */
  71 #circuit-display-domain {
  72   opacity: 0.8;
  73 }
  74
  75 #circuit-div {
  76   position: relative;
  77   margin-inline-start: 6px;
  78 }
  79
  80 /* Format the circuit node list. */
  81 ul#circuit-display-nodes {
  82   line-height:32px;
  83   padding-inline-start: 8px;
  84 }
  85
  86 /* Hide default bullets, and draw our own bullets */
  87 ul#circuit-display-nodes li {
  88   background-image: url(chrome://torbutton/skin/tor-circuit-line.svg);
  89   background-position: left center;
  90   background-repeat: no-repeat;
  91   list-style: none;
  92   /* tor circuit svg are 16px wide */
  93   padding-inline-start: calc(16px + 0.5em);
  94   white-space: nowrap;
  95   max-height: 32px;
  96   -moz-context-properties: stroke, stroke-opacity;
  97   stroke: currentColor;
  98   stroke-opacity: 100%;
  99 }
 100
 101 ul#circuit-display-nodes li:dir(rtl) {
 102   background-position: right center;
 103 }
 104
 105 ul#circuit-display-nodes li:first-child {
 106   background-image: url(chrome://torbutton/skin/tor-circuit-line-first.svg);
 107 }
 108
 109 ul#circuit-display-nodes li:last-child {
 110   background-image: url(chrome://torbutton/skin/tor-circuit-line-last.svg);
 111 }
 112
 113 .circuit-ip-address {
 114   font-size: 80%;
 115   opacity: 0.7;
 116   padding-inline-start: 3px;
 117 }
 118
 119 .circuit-guard-info {
 120   font-size: 80%;
 121   color: var(--button-primary-bgcolor);
 122   font-weight: bold;
 123   padding-inline-start: 3px;
 124 }
 125
 126 #circuit-reload-button {
 127   background-color: var(--button-primary-bgcolor);
 128   border-radius: 4px;
 129   border-width: 0px;
 130   color: var(--button-primary-color);
 131   font-weight: 600;
 132   padding: 8px 16px;
 133   margin: 0;
 134 }
 135 #circuit-reload-button:hover {
 136   background-color: var(--button-primary-hover-bgcolor);
 137 }
 138
 139 #circuit-reload-button:active {
 140   background-color: var(--button-primary-active-bgcolor);
 141 }
 142
 143 #circuit-guard-note-container {
 144
 145 }
 146
 147 #circuit-guard-note-container div {
 148   margin-inline-start: 8px;
 149 }
 150
 151 .circuit-guard-name {
 152   font-weight: bold;
 153 }
 154
 155 .circuit-link {
 156   cursor: pointer;
 157   color: var(--urlbar-popup-url-color);
 158 }
 159
 160 .circuit-link:hover {
 161   text-decoration: underline;
 162 }
 163
 164 .circuit-onion {
 165   cursor: pointer;
 166 }
 167
 168 .circuit-onion:hover::after {
 169   opacity: 1;
 170 }
 171
 172 .circuit-onion::after {
 173   background-color: var(--button-bgcolor);;
 174   border-radius: 4px;
 175   color: var(--button-color);
 176   content: attr(data-text-clicktocopy);
 177   font-size: 80%;
 178   opacity: 0;
 179   padding: 5px 10px;
 180   margin: 10px;
 181   text-align: center;
 182   transition: opacity 0.3s cubic-bezier(0.07, 0.95, 0, 1);
 183 }
 184
 185 .circuit-onion:hover::after {
 186   background-color: var(--button-hover-bgcolor);
 187 }
 188
 189 .circuit-onion:active::after {
 190   background-color: var(--button-active-bgcolor);
 191 }
 192
 193
 194 .circuit-onion-copied::after {
 195   content: attr(data-text-copied);
 196   opacity: 1;
 197 }