| ... |
... |
@@ -173,12 +173,17 @@ button.spoof-button-disabled { |
|
173
|
173
|
display: none;
|
|
174
|
174
|
}
|
|
175
|
175
|
|
|
176
|
|
-.bridge-status-badge.bridge-status-connected {
|
|
177
|
|
- color: var(--tor-accent-color);
|
|
178
|
|
-}
|
|
|
176
|
+@media not ((forced-colors) or (prefers-contrast)) {
|
|
|
177
|
+ /* Accent colors are usually only used for background colors. Here we are
|
|
|
178
|
+ * using it for text colors, so we only enable these rules when not using a
|
|
|
179
|
+ * high contrast theme or forced colors. */
|
|
|
180
|
+ .bridge-status-badge.bridge-status-connected {
|
|
|
181
|
+ color: var(--tor-accent-color);
|
|
|
182
|
+ }
|
|
179
|
183
|
|
|
180
|
|
-.bridge-status-badge.bridge-status-current-built-in {
|
|
181
|
|
- color: var(--in-content-accent-color);
|
|
|
184
|
+ .bridge-status-badge.bridge-status-current-built-in {
|
|
|
185
|
+ color: var(--color-accent-primary);
|
|
|
186
|
+ }
|
|
182
|
187
|
}
|
|
183
|
188
|
|
|
184
|
189
|
.bridge-status-badge > * {
|
| ... |
... |
@@ -230,7 +235,7 @@ button.spoof-button-disabled { |
|
230
|
235
|
padding-block: 64px;
|
|
231
|
236
|
padding-inline: 32px;
|
|
232
|
237
|
gap: 16px;
|
|
233
|
|
- border-radius: 4px;
|
|
|
238
|
+ border-radius: var(--border-radius-small);
|
|
234
|
239
|
color: var(--text-color-deemphasized);
|
|
235
|
240
|
border: 2px dashed color-mix(in srgb, currentColor 20%, transparent);
|
|
236
|
241
|
}
|
| ... |
... |
@@ -243,10 +248,18 @@ button.spoof-button-disabled { |
|
243
|
248
|
fill: currentColor;
|
|
244
|
249
|
}
|
|
245
|
250
|
|
|
246
|
|
-#tor-bridges-current {
|
|
|
251
|
+.tor-bridges-box,
|
|
|
252
|
+.tor-bridges-details-box {
|
|
247
|
253
|
padding: 16px;
|
|
248
|
|
- border-radius: 4px;
|
|
|
254
|
+ border-radius: var(--border-radius-small);
|
|
249
|
255
|
background: var(--in-content-box-info-background);
|
|
|
256
|
+ border: 1px solid var(--in-content-box-border-color);
|
|
|
257
|
+}
|
|
|
258
|
+
|
|
|
259
|
+@media not forced-colors {
|
|
|
260
|
+ .tor-bridges-box {
|
|
|
261
|
+ border-color: transparent;
|
|
|
262
|
+ }
|
|
250
|
263
|
}
|
|
251
|
264
|
|
|
252
|
265
|
#tor-bridges-current-header-bar {
|
| ... |
... |
@@ -409,7 +422,7 @@ button.spoof-button-disabled { |
|
409
|
422
|
height: 16px;
|
|
410
|
423
|
/* color-light-gray-10, color-dark-gray-60 */
|
|
411
|
424
|
background: light-dark(#f9f9fb, #2b2a33);
|
|
412
|
|
- border-radius: 4px;
|
|
|
425
|
+ border-radius: var(--border-radius-small);
|
|
413
|
426
|
padding: 8px;
|
|
414
|
427
|
}
|
|
415
|
428
|
|
| ... |
... |
@@ -463,9 +476,6 @@ button.spoof-button-disabled { |
|
463
|
476
|
|
|
464
|
477
|
.tor-bridges-details-box {
|
|
465
|
478
|
margin-block-start: 24px;
|
|
466
|
|
- border-radius: 4px;
|
|
467
|
|
- border: 1px solid var(--in-content-border-color);
|
|
468
|
|
- padding: 16px;
|
|
469
|
479
|
}
|
|
470
|
480
|
|
|
471
|
481
|
#tor-bridges-share:not([hidden]) {
|
| ... |
... |
@@ -705,9 +715,6 @@ button.spoof-button-disabled { |
|
705
|
715
|
align-items: center;
|
|
706
|
716
|
text-align: center;
|
|
707
|
717
|
justify-content: center;
|
|
708
|
|
- padding: 16px;
|
|
709
|
|
- background: var(--in-content-box-info-background);
|
|
710
|
|
- border-radius: 4px;
|
|
711
|
718
|
}
|
|
712
|
719
|
|
|
713
|
720
|
#tor-bridges-request-box > * {
|
| ... |
... |
@@ -778,7 +785,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
778
|
785
|
with whatever the default background color is. */
|
|
779
|
786
|
padding: 10px;
|
|
780
|
787
|
margin-block: 4px 8px;
|
|
781
|
|
- border-radius: 4px;
|
|
|
788
|
+ border-radius: var(--border-radius-small);
|
|
782
|
789
|
display: grid;
|
|
783
|
790
|
align-items: center;
|
|
784
|
791
|
justify-items: center;
|
| ... |
... |
@@ -798,7 +805,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
798
|
805
|
grid-area: qr;
|
|
799
|
806
|
content: url("chrome://browser/content/torpreferences/bridge.svg");
|
|
800
|
807
|
padding: 10px;
|
|
801
|
|
- border-radius: 8px;
|
|
|
808
|
+ border-radius: var(--border-radius-medium);
|
|
802
|
809
|
box-sizing: content-box;
|
|
803
|
810
|
width: 52px;
|
|
804
|
811
|
height: 52px;
|