... |
... |
@@ -12,8 +12,8 @@ |
12
|
12
|
|
13
|
13
|
#tor-connect-titlebar-status img {
|
14
|
14
|
-moz-context-properties: fill, stroke;
|
15
|
|
- fill: currentColor;
|
16
|
|
- stroke: currentColor;
|
|
15
|
+ fill: var(--icon-color);
|
|
16
|
+ stroke: var(--icon-color);
|
17
|
17
|
width: 16px;
|
18
|
18
|
height: 16px;
|
19
|
19
|
object-fit: none;
|
... |
... |
@@ -30,21 +30,23 @@ |
30
|
30
|
* we assign the potentially-blocked class, we do *not* expect to be connected
|
31
|
31
|
* at the same time, so we only expect this first frame to be visible in this
|
32
|
32
|
* state. */
|
33
|
|
- stroke: #c50042;
|
34
|
|
-}
|
35
|
|
-
|
36
|
|
-@media (prefers-color-scheme: dark) {
|
37
|
|
- #tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {
|
38
|
|
- stroke: #ff9aa2;
|
39
|
|
- }
|
|
33
|
+ stroke: var(--icon-color-critical);
|
40
|
34
|
}
|
41
|
35
|
|
42
|
36
|
#tor-connect-titlebar-status.tor-connect-status-connected img {
|
43
|
37
|
object-position: var(--tor-connected-offset);
|
44
|
38
|
}
|
45
|
39
|
|
46
|
|
-#tor-connect-titlebar-status.tor-connect-status-connected {
|
47
|
|
- color: var(--tor-text-color);
|
|
40
|
+@media not ((prefers-contrast) or (forced-colors)) {
|
|
41
|
+ /* Make the connected text and icon purple. */
|
|
42
|
+ #tor-connect-titlebar-status.tor-connect-status-connected {
|
|
43
|
+ color: var(--tor-text-color);
|
|
44
|
+ }
|
|
45
|
+
|
|
46
|
+ #tor-connect-titlebar-status.tor-connect-status-connected img {
|
|
47
|
+ fill: var(--tor-text-color);
|
|
48
|
+ stroke: var(--tor-text-color);
|
|
49
|
+ }
|
48
|
50
|
}
|
49
|
51
|
|
50
|
52
|
@keyframes onion-not-connected-to-connected {
|
... |
... |
@@ -63,6 +65,7 @@ |
63
|
65
|
}
|
64
|
66
|
|
65
|
67
|
#tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition img {
|
|
68
|
+ transition: fill 1000ms, stroke 1000ms;
|
66
|
69
|
animation-name: onion-not-connected-to-connected;
|
67
|
70
|
animation-delay: 200ms;
|
68
|
71
|
animation-fill-mode: both;
|