Commits:
-
a0742a1b
by Henry Wilkes at 2024-08-21T02:05:06+00:00
Bug 41817: tor-browser semantic colors.
-
8639aaa5
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 7494: Create local home page for TBB.
Bug 41817: Use semantic tor color names in about:tor.
-
3cf73e78
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
Bug 41817: Use semantic color names for tor preferences.
-
2595f644
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
Bug 41817: Use semantic tor color names for tor buttons.
Also, for about:torconnect:
+ Use dark-mode variant for the buttons colors.
+ Add purple focus outline to the select element to match the buttons.
+ Stop applying the "primary" class to the cancel button.
+ Remove the checkbox styling since the checkbox was replaced with a
moz-toggle-button.
+ Removed the "danger-button" class since it does not sufficiently
telegraph a distinguished action, and has no dark-mode variant.
+ Use warning color from common-shared.css.
+ Drop --grey-40 for breadcrumb arrows, which did not adjust to theme.
-
6d76bafb
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 21952: Implement Onion-Location
-
4eaccbd8
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 30237: Add v3 onion services client authentication prompt
Bug 41817: Drop browser-colors.css.
-
6be73a77
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 40925: Implemented the Security Level component
Bug 41817: Drop browser-colors.css.
-
d45ef470
by Henry Wilkes at 2024-08-21T02:05:06+00:00
fixup! Bug 41659: Add canonical color definitions to base-browser
Bug 41817: Drop browser-colors.css.
16 changed files:
Changes:
browser/base/content/navigator-toolbox.inc.xhtml
| ... |
... |
@@ -431,7 +431,7 @@ |
|
431
|
431
|
|
|
432
|
432
|
<hbox id="tor-connect-urlbar-button"
|
|
433
|
433
|
role="button"
|
|
434
|
|
- class="tor-urlbar-button"
|
|
|
434
|
+ class="tor-button tor-urlbar-button"
|
|
435
|
435
|
hidden="true">
|
|
436
|
436
|
<label id="tor-connect-urlbar-button-label"/>
|
|
437
|
437
|
</hbox>
|
browser/components/abouttor/content/aboutTor.css
|
1
|
|
-@import url("chrome://global/skin/browser-colors.css");
|
|
|
1
|
+@import url("chrome://global/skin/tor-colors.css");
|
|
2
|
2
|
|
|
3
|
3
|
body {
|
|
4
|
4
|
margin: 0;
|
| ... |
... |
@@ -179,7 +179,7 @@ body:not(.show-tor-check) #tor-check { |
|
179
|
179
|
/* On dark background */
|
|
180
|
180
|
:root {
|
|
181
|
181
|
background-color: #2C0449;
|
|
182
|
|
- --focus-outline-color: var(--purple-30);
|
|
|
182
|
+ --focus-outline-color: var(--tor-focus-outline-color-dark);
|
|
183
|
183
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
|
184
|
184
|
--in-content-focus-outline-color: var(--focus-outline-color);
|
|
185
|
185
|
--in-content-focus-outline: var(--focus-outline);
|
| ... |
... |
@@ -194,14 +194,9 @@ body:not(.show-tor-check) #tor-check { |
|
194
|
194
|
--in-content-page-color: #fbfbfe;
|
|
195
|
195
|
--in-content-text-color: #fbfbfe;
|
|
196
|
196
|
color: var(--in-content-text-color);
|
|
197
|
|
- --link-color: var(--purple-30);
|
|
198
|
|
- /* FIXME: Since we have a dark background, the color should get lighter on
|
|
199
|
|
- * hover, but --purple-40 and --pruple-50 are darker than --purple-30.
|
|
200
|
|
- * However, we do not have a standard lighter purple in our current set of
|
|
201
|
|
- * Photon colors.
|
|
202
|
|
- * See tor-browser#42025 */
|
|
203
|
|
- --link-color-hover: var(--purple-40);
|
|
204
|
|
- --link-color-active: var(--purple-50);
|
|
|
197
|
+ --link-color: var(--tor-link-color-dark);
|
|
|
198
|
+ --link-color-hover: var(--tor-link-color-hover-dark);
|
|
|
199
|
+ --link-color-active: var(--tor-link-color-active-dark);
|
|
205
|
200
|
}
|
|
206
|
201
|
|
|
207
|
202
|
#search-form {
|
| ... |
... |
@@ -209,7 +204,9 @@ body:not(.show-tor-check) #tor-check { |
|
209
|
204
|
}
|
|
210
|
205
|
|
|
211
|
206
|
#search-form.search-input-focus-visible {
|
|
212
|
|
- border-color: var(--purple-60);
|
|
|
207
|
+ /* Use a light-themed inner-border to contrast with the dark-themed
|
|
|
208
|
+ * focus outline. */
|
|
|
209
|
+ border-color: var(--tor-focus-outline-color-light);
|
|
213
|
210
|
}
|
|
214
|
211
|
|
|
215
|
212
|
#search-form.onionized-search:not(.search-input-focus-visible) {
|
| ... |
... |
@@ -218,17 +215,17 @@ body:not(.show-tor-check) #tor-check { |
|
218
|
215
|
|
|
219
|
216
|
/* Light background. */
|
|
220
|
217
|
#search-form > * {
|
|
221
|
|
- --focus-outline-color: var(--purple-60);
|
|
|
218
|
+ --focus-outline-color: var(--tor-focus-outline-color-light);
|
|
222
|
219
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
|
223
|
220
|
--in-content-focus-outline-color: var(--focus-outline-color);
|
|
224
|
221
|
--in-content-focus-outline: var(--focus-outline);
|
|
225
|
222
|
/* Variables used for --toggle- variables. */
|
|
226
|
|
- --color-accent-primary: var(--purple-60);
|
|
227
|
|
- --color-accent-primary-hover: var(--purple-70);
|
|
228
|
|
- --color-accent-primary-active: var(--purple-80);
|
|
|
223
|
+ --color-accent-primary: var(--tor-button-background-color-light);
|
|
|
224
|
+ --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
|
|
|
225
|
+ --color-accent-primary-active: var(--tor-button-background-color-active-light);
|
|
229
|
226
|
}
|
|
230
|
227
|
|
|
231
|
228
|
#search-form.onionized-search #onionize-toggle {
|
|
232
|
|
- color: var(--purple-60);
|
|
|
229
|
+ color: var(--tor-link-color-light);
|
|
233
|
230
|
}
|
|
234
|
231
|
} |
browser/components/onionservices/content/authPreferences.css
|
1
|
1
|
/* Copyright (c) 2020, The Tor Project, Inc. */
|
|
2
|
2
|
|
|
3
|
|
-@import url("chrome://global/skin/browser-colors.css");
|
|
4
|
|
-
|
|
5
|
3
|
#onionservices-savedkeys-dialog {
|
|
6
|
4
|
min-width: 45em;
|
|
7
|
5
|
}
|
| ... |
... |
@@ -23,5 +21,5 @@ |
|
23
|
21
|
margin-inline-end: 4px;
|
|
24
|
22
|
list-style-image: url("chrome://global/skin/icons/warning.svg");
|
|
25
|
23
|
-moz-context-properties: fill;
|
|
26
|
|
- fill: var(--warning-color);
|
|
|
24
|
+ fill: var(--in-content-warning-icon-color);
|
|
27
|
25
|
} |
browser/components/onionservices/content/onionlocation-urlbar.inc.xhtml
|
1
|
1
|
# Copyright (c) 2020, The Tor Project, Inc.
|
|
2
|
2
|
|
|
3
|
3
|
<hbox id="onion-location-box"
|
|
4
|
|
- class="tor-urlbar-button"
|
|
|
4
|
+ class="tor-button tor-urlbar-button"
|
|
5
|
5
|
role="button"
|
|
6
|
6
|
hidden="true"
|
|
7
|
7
|
_onclick_="OnionLocationParent.buttonClick(event);">
|
browser/components/securitylevel/content/securityLevelPanel.css
| ... |
... |
@@ -51,7 +51,7 @@ |
|
51
|
51
|
|
|
52
|
52
|
#securityLevel-custom {
|
|
53
|
53
|
border-radius: 4px;
|
|
54
|
|
- background-color: var(--warning-color);
|
|
|
54
|
+ background-color: var(--warning-icon-bgcolor);
|
|
55
|
55
|
color: black;
|
|
56
|
56
|
padding: 0.4em 0.5em;
|
|
57
|
57
|
margin-inline-start: 1em;
|
browser/components/torpreferences/content/torPreferences.css
|
1
|
|
-@import url("chrome://global/skin/browser-colors.css");
|
|
|
1
|
+@import url("chrome://global/skin/tor-colors.css");
|
|
2
|
2
|
|
|
3
|
3
|
|
|
4
|
4
|
#category-connection > .category-icon {
|
| ... |
... |
@@ -137,13 +137,7 @@ button.spoof-button-disabled { |
|
137
|
137
|
}
|
|
138
|
138
|
|
|
139
|
139
|
.bridge-status-badge.bridge-status-connected {
|
|
140
|
|
- color: var(--purple-60);
|
|
141
|
|
-}
|
|
142
|
|
-
|
|
143
|
|
-@media (prefers-color-scheme: dark) {
|
|
144
|
|
- .bridge-status-badge.bridge-status-connected {
|
|
145
|
|
- color: var(--purple-30);
|
|
146
|
|
- }
|
|
|
140
|
+ color: var(--tor-accent-color);
|
|
147
|
141
|
}
|
|
148
|
142
|
|
|
149
|
143
|
.bridge-status-badge.bridge-status-current-built-in {
|
| ... |
... |
@@ -990,7 +984,7 @@ hbox#torPreferences-requestBridge-incorrectCaptchaHbox { |
|
990
|
984
|
image#torPreferences-requestBridge-errorIcon {
|
|
991
|
985
|
list-style-image: url("chrome://global/skin/icons/warning.svg");
|
|
992
|
986
|
-moz-context-properties: fill;
|
|
993
|
|
- fill: var(--warning-color);
|
|
|
987
|
+ fill: var(--in-content-warning-icon-color);
|
|
994
|
988
|
}
|
|
995
|
989
|
|
|
996
|
990
|
groupbox#torPreferences-bridges-group textarea {
|
browser/themes/shared/browser-shared.css
| ... |
... |
@@ -26,8 +26,8 @@ |
|
26
|
26
|
@import url("chrome://browser/skin/customizableui/customizeMode.css");
|
|
27
|
27
|
@import url("chrome://browser/skin/UITour.css");
|
|
28
|
28
|
@import url("chrome://browser/skin/formautofill-notification.css");
|
|
29
|
|
-@import url("chrome://global/skin/browser-colors.css");
|
|
30
|
29
|
@import url("chrome://browser/skin/tor-branding.css");
|
|
|
30
|
+@import url("chrome://global/skin/tor-colors.css");
|
|
31
|
31
|
@import url("chrome://browser/skin/tor-urlbar-button.css");
|
|
32
|
32
|
@import url("chrome://browser/skin/onionlocation.css");
|
|
33
|
33
|
|
browser/themes/shared/tor-urlbar-button.css
|
1
|
1
|
.tor-urlbar-button:not([hidden]) {
|
|
2
|
|
- --tor-urlbar-button-background-color: var(--purple-60);
|
|
3
|
|
- background-color: var(--tor-urlbar-button-background-color);
|
|
4
|
|
- /* FIXME: Use different colors for light and dark theme, rather than "white".
|
|
5
|
|
- * See tor-browser#41787 */
|
|
6
|
|
- color: white;
|
|
7
|
2
|
display: flex;
|
|
8
|
3
|
align-items: center;
|
|
9
|
4
|
gap: 0.5em;
|
| ... |
... |
@@ -31,8 +26,7 @@ |
|
31
|
26
|
* urlbar background, but we keep the rounded corners. */
|
|
32
|
27
|
outline: var(--focus-outline);
|
|
33
|
28
|
outline-offset: var(--focus-outline-offset);
|
|
34
|
|
- /* Use the background color for the outline, same as in-content buttons. */
|
|
35
|
|
- outline-color: var(--tor-urlbar-button-background-color);
|
|
|
29
|
+ outline-color: var(--tor-focus-outline-color);
|
|
36
|
30
|
/* Calculate the difference between the button's border area and the outline
|
|
37
|
31
|
* area. */
|
|
38
|
32
|
--tor-urlbar-focus-outline-difference: calc(
|
| ... |
... |
@@ -64,31 +58,9 @@ |
|
64
|
58
|
display: none;
|
|
65
|
59
|
}
|
|
66
|
60
|
|
|
67
|
|
-.tor-urlbar-button:hover {
|
|
68
|
|
- --tor-urlbar-button-background-color: var(--purple-70);
|
|
69
|
|
-}
|
|
70
|
|
-
|
|
71
|
|
-.tor-urlbar-button:hover:active {
|
|
72
|
|
- --tor-urlbar-button-background-color: var(--purple-80);
|
|
73
|
|
-}
|
|
74
|
|
-
|
|
75
|
|
-@media (prefers-color-scheme: dark) {
|
|
76
|
|
- .tor-urlbar-button {
|
|
77
|
|
- --tor-urlbar-button-background-color: var(--purple-50);
|
|
78
|
|
- }
|
|
79
|
|
-
|
|
80
|
|
- .tor-urlbar-button:hover {
|
|
81
|
|
- --tor-urlbar-button-background-color: var(--purple-60);
|
|
82
|
|
- }
|
|
83
|
|
-
|
|
84
|
|
- .tor-urlbar-button:hover:active {
|
|
85
|
|
- --tor-urlbar-button-background-color: var(--purple-70);
|
|
86
|
|
- }
|
|
87
|
|
-}
|
|
88
|
|
-
|
|
89
|
61
|
/* Make the button look plain like the identity #urlbar-label-box. */
|
|
90
|
62
|
.tor-urlbar-button.tor-urlbar-button-plain {
|
|
91
|
|
- --tor-urlbar-button-background-color: var(--urlbar-box-bgcolor);
|
|
|
63
|
+ background-color: var(--urlbar-box-bgcolor);
|
|
92
|
64
|
color: var(--urlbar-box-text-color);
|
|
93
|
65
|
}
|
|
94
|
66
|
|
| ... |
... |
@@ -97,11 +69,11 @@ |
|
97
|
69
|
}
|
|
98
|
70
|
|
|
99
|
71
|
.tor-urlbar-button.tor-urlbar-button-plain:hover {
|
|
100
|
|
- --tor-urlbar-button-background-color: var(--urlbar-box-hover-bgcolor);
|
|
|
72
|
+ background-color: var(--urlbar-box-hover-bgcolor);
|
|
101
|
73
|
color: var(--urlbar-box-hover-text-color);
|
|
102
|
74
|
}
|
|
103
|
75
|
|
|
104
|
76
|
.tor-urlbar-button.tor-urlbar-button-plain:hover:active {
|
|
105
|
|
- --tor-urlbar-button-background-color: var(--urlbar-box-active-bgcolor);
|
|
|
77
|
+ background-color: var(--urlbar-box-active-bgcolor);
|
|
106
|
78
|
color: var(--urlbar-box-hover-text-color);
|
|
107
|
79
|
} |
toolkit/components/torconnect/content/aboutTorConnect.css
| ... |
... |
@@ -2,7 +2,7 @@ |
|
2
|
2
|
/* Copyright (c) 2021, The Tor Project, Inc. */
|
|
3
|
3
|
|
|
4
|
4
|
@import url("chrome://global/skin/error-pages.css");
|
|
5
|
|
-@import url("chrome://global/skin/browser-colors.css");
|
|
|
5
|
+@import url("chrome://global/skin/tor-colors.css");
|
|
6
|
6
|
|
|
7
|
7
|
:root {
|
|
8
|
8
|
--onion-opacity: 1;
|
| ... |
... |
@@ -14,23 +14,10 @@ html { |
|
14
|
14
|
height: 100%;
|
|
15
|
15
|
}
|
|
16
|
16
|
|
|
17
|
|
-input[type="checkbox"]:focus, select:focus {
|
|
18
|
|
- outline: none!important;
|
|
19
|
|
- box-shadow: 0 0 0 3px var(--purple-30) !important;
|
|
20
|
|
- border: 1px var(--purple-80) solid !important;
|
|
21
|
|
-}
|
|
22
|
|
-
|
|
23
|
|
-@media (prefers-color-scheme: dark) {
|
|
24
|
|
- input[type="checkbox"]:focus, select:focus {
|
|
25
|
|
- box-shadow: 0 0 0 3px var(--purple-50)!important;
|
|
26
|
|
- }
|
|
27
|
|
-}
|
|
28
|
|
-
|
|
29
|
17
|
#breadcrumbs {
|
|
30
|
18
|
display: flex;
|
|
31
|
19
|
align-items: center;
|
|
32
|
20
|
margin: 0 0 24px 0;
|
|
33
|
|
- color: var(--grey-40);
|
|
34
|
21
|
}
|
|
35
|
22
|
|
|
36
|
23
|
#breadcrumbs.hidden {
|
| ... |
... |
@@ -129,23 +116,8 @@ input[type="checkbox"]:focus, select:focus { |
|
129
|
116
|
list-style-image: url("chrome://global/content/torconnect/bridge.svg");
|
|
130
|
117
|
}
|
|
131
|
118
|
|
|
132
|
|
-button {
|
|
133
|
|
- --purple-button-text-color: rgb(251,251,254);
|
|
134
|
|
- --in-content-primary-button-text-color: var(--purple-button-text-color);
|
|
135
|
|
- --in-content-primary-button-background: var(--purple-60);
|
|
136
|
|
- --in-content-primary-button-text-color-hover: var(--purple-button-text-color);
|
|
137
|
|
- --in-content-primary-button-background-hover: var(--purple-70);
|
|
138
|
|
- --in-content-primary-button-text-color-active: var(--purple-button-text-color);
|
|
139
|
|
- --in-content-primary-button-background-active: var(--purple-80);
|
|
140
|
|
- --in-content-focus-outline-color: var(--purple-60);
|
|
141
|
|
- fill: white;
|
|
142
|
|
-}
|
|
143
|
|
-
|
|
144
|
|
-#cancelButton {
|
|
145
|
|
- color: var(--in-content-button-text-color);
|
|
146
|
|
- border: 1px solid var(--in-content-button-border-color);
|
|
147
|
|
- border-radius: 4px;
|
|
148
|
|
- background-color: var(--in-content-button-background);
|
|
|
119
|
+button, select {
|
|
|
120
|
+ --in-content-focus-outline-color: var(--tor-focus-outline-color);
|
|
149
|
121
|
}
|
|
150
|
122
|
|
|
151
|
123
|
#locationDropdownLabel {
|
| ... |
... |
@@ -157,18 +129,6 @@ button { |
|
157
|
129
|
color: var(--text-color-error)
|
|
158
|
130
|
}
|
|
159
|
131
|
|
|
160
|
|
-#tryBridgeButton.danger-button {
|
|
161
|
|
- background-color: var(--purple-70);
|
|
162
|
|
-}
|
|
163
|
|
-
|
|
164
|
|
-#tryBridgeButton.danger-button:hover {
|
|
165
|
|
- background-color: var(--purple-80);
|
|
166
|
|
-}
|
|
167
|
|
-
|
|
168
|
|
-#tryBridgeButton.danger-button:active {
|
|
169
|
|
- background-color: var(--purple-90);
|
|
170
|
|
-}
|
|
171
|
|
-
|
|
172
|
132
|
/* this follows similar css in error-pages.css for buttons */
|
|
173
|
133
|
@media only screen and (min-width: 480px) {
|
|
174
|
134
|
form#locationDropdown {
|
| ... |
... |
@@ -195,35 +155,6 @@ form#locationDropdown select { |
|
195
|
155
|
font-weight: 700;
|
|
196
|
156
|
}
|
|
197
|
157
|
|
|
198
|
|
-/* checkbox css */
|
|
199
|
|
-input[type="checkbox"]:not(:disabled) {
|
|
200
|
|
- background-color: var(--grey-20)!important;
|
|
201
|
|
-}
|
|
202
|
|
-
|
|
203
|
|
-input[type="checkbox"]:not(:disabled):checked {
|
|
204
|
|
- background-color: var(--purple-60)!important;
|
|
205
|
|
- color: white;
|
|
206
|
|
- fill: white;
|
|
207
|
|
-}
|
|
208
|
|
-
|
|
209
|
|
-input[type="checkbox"]:not(:disabled):hover {
|
|
210
|
|
- /* override firefox's default blue border on hover */
|
|
211
|
|
- border-color: var(--purple-70);
|
|
212
|
|
- background-color: var(--grey-30)!important;
|
|
213
|
|
-}
|
|
214
|
|
-
|
|
215
|
|
-input[type="checkbox"]:not(:disabled):hover:checked {
|
|
216
|
|
- background-color: var(--purple-70)!important;
|
|
217
|
|
-}
|
|
218
|
|
-
|
|
219
|
|
-input[type="checkbox"]:not(:disabled):active {
|
|
220
|
|
- background-color: var(--grey-40)!important;
|
|
221
|
|
-}
|
|
222
|
|
-
|
|
223
|
|
-input[type="checkbox"]:not(:disabled):active:checked {
|
|
224
|
|
- background-color: var(--purple-80)!important;
|
|
225
|
|
-}
|
|
226
|
|
-
|
|
227
|
158
|
:root {
|
|
228
|
159
|
--progressbar-shadow-start: rgba(255, 255, 255, 0.7);
|
|
229
|
160
|
--progressbar-gradient: linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%);
|
| ... |
... |
@@ -352,7 +283,7 @@ body.aboutTorConnect .title { |
|
352
|
283
|
|
|
353
|
284
|
.title.location {
|
|
354
|
285
|
background-image: url("chrome://global/content/torconnect/connection-location.svg");
|
|
355
|
|
- stroke: var(--warning-color);
|
|
|
286
|
+ stroke: var(--in-content-warning-icon-color);
|
|
356
|
287
|
}
|
|
357
|
288
|
|
|
358
|
289
|
:root {
|
toolkit/components/torconnect/content/aboutTorConnect.html
| ... |
... |
@@ -75,8 +75,8 @@ |
|
75
|
75
|
<button id="restartButton" hidden="true"></button>
|
|
76
|
76
|
<button id="configureButton" hidden="true"></button>
|
|
77
|
77
|
<button id="cancelButton" hidden="true"></button>
|
|
78
|
|
- <button id="connectButton" class="primary" hidden="true"></button>
|
|
79
|
|
- <button id="tryBridgeButton" class="primary" hidden="true"></button>
|
|
|
78
|
+ <button id="connectButton" hidden="true"></button>
|
|
|
79
|
+ <button id="tryBridgeButton" hidden="true"></button>
|
|
80
|
80
|
</span>
|
|
81
|
81
|
</div>
|
|
82
|
82
|
</div>
|
toolkit/components/torconnect/content/aboutTorConnect.js
| ... |
... |
@@ -188,8 +188,9 @@ class AboutTorConnect { |
|
188
|
188
|
Element helper methods
|
|
189
|
189
|
*/
|
|
190
|
190
|
|
|
191
|
|
- show(element, primary) {
|
|
192
|
|
- element.classList.toggle("primary", primary !== undefined && primary);
|
|
|
191
|
+ show(element, primary = false) {
|
|
|
192
|
+ element.classList.toggle("primary", primary);
|
|
|
193
|
+ element.classList.toggle("tor-button", primary);
|
|
193
|
194
|
element.removeAttribute("hidden");
|
|
194
|
195
|
}
|
|
195
|
196
|
|
| ... |
... |
@@ -554,7 +555,7 @@ class AboutTorConnect { |
|
554
|
555
|
} else {
|
|
555
|
556
|
this.hide(this.elements.viewLogButton);
|
|
556
|
557
|
}
|
|
557
|
|
- this.show(this.elements.cancelButton, true);
|
|
|
558
|
+ this.show(this.elements.cancelButton);
|
|
558
|
559
|
if (state.StateChanged) {
|
|
559
|
560
|
this.elements.cancelButton.focus();
|
|
560
|
561
|
}
|
| ... |
... |
@@ -687,7 +688,6 @@ class AboutTorConnect { |
|
687
|
688
|
this.show(this.elements.locationDropdown);
|
|
688
|
689
|
this.elements.locationDropdownLabel.classList.toggle("error", isError);
|
|
689
|
690
|
this.show(this.elements.tryBridgeButton, true);
|
|
690
|
|
- this.elements.tryBridgeButton.classList.toggle("danger-button", isError);
|
|
691
|
691
|
if (buttonLabel !== undefined) {
|
|
692
|
692
|
this.elements.tryBridgeButton.textContent = buttonLabel;
|
|
693
|
693
|
}
|
toolkit/components/torconnect/content/torConnectTitlebarStatus.css
| ... |
... |
@@ -44,13 +44,7 @@ |
|
44
|
44
|
}
|
|
45
|
45
|
|
|
46
|
46
|
#tor-connect-titlebar-status.tor-connect-status-connected {
|
|
47
|
|
- color: var(--purple-60);
|
|
48
|
|
-}
|
|
49
|
|
-
|
|
50
|
|
-@media (prefers-color-scheme: dark) {
|
|
51
|
|
- #tor-connect-titlebar-status.tor-connect-status-connected {
|
|
52
|
|
- color: var(--purple-30);
|
|
53
|
|
- }
|
|
|
47
|
+ color: var(--tor-accent-color);
|
|
54
|
48
|
}
|
|
55
|
49
|
|
|
56
|
50
|
@keyframes onion-not-connected-to-connected {
|
toolkit/themes/shared/browser-colors.css
deleted
|
1
|
|
-:root {
|
|
2
|
|
- /* photon colors, not all of them are available for whatever reason
|
|
3
|
|
- in firefox, so here they are */
|
|
4
|
|
-
|
|
5
|
|
- --magenta-50: #ff1ad9;
|
|
6
|
|
- --magenta-60: #ed00b5;
|
|
7
|
|
- --magenta-70: #b5007f;
|
|
8
|
|
- --magenta-80: #7d004f;
|
|
9
|
|
- --magenta-90: #440027;
|
|
10
|
|
-
|
|
11
|
|
- --purple-30: #c069ff;
|
|
12
|
|
- --purple-40: #ad3bff;
|
|
13
|
|
- --purple-50: #9400ff;
|
|
14
|
|
- --purple-60: #8000d7;
|
|
15
|
|
- --purple-70: #6200a4;
|
|
16
|
|
- --purple-80: #440071;
|
|
17
|
|
- --purple-90: #25003e;
|
|
18
|
|
-
|
|
19
|
|
- --blue-40: #45a1ff;
|
|
20
|
|
- --blue-50: #0a84ff;
|
|
21
|
|
- --blue-50-a30: rgba(10, 132, 255, 0.3);
|
|
22
|
|
- --blue-60: #0060df;
|
|
23
|
|
- --blue-70: #003eaa;
|
|
24
|
|
- --blue-80: #002275;
|
|
25
|
|
- --blue-90: #000f40;
|
|
26
|
|
-
|
|
27
|
|
- --teal-50: #00feff;
|
|
28
|
|
- --teal-60: #00c8d7;
|
|
29
|
|
- --teal-70: #008ea4;
|
|
30
|
|
- --teal-80: #005a71;
|
|
31
|
|
- --teal-90: #002d3e;
|
|
32
|
|
-
|
|
33
|
|
- --green-50: #30e60b;
|
|
34
|
|
- --green-60: #12bc00;
|
|
35
|
|
- --green-70: #058b00;
|
|
36
|
|
- --green-80: #006504;
|
|
37
|
|
- --green-90: #003706;
|
|
38
|
|
-
|
|
39
|
|
- --yellow-50: #ffe900;
|
|
40
|
|
- --yellow-60: #d7b600;
|
|
41
|
|
- --yellow-70: #a47f00;
|
|
42
|
|
- --yellow-80: #715100;
|
|
43
|
|
- --yellow-90: #3e2800;
|
|
44
|
|
-
|
|
45
|
|
- --red-50: #ff0039;
|
|
46
|
|
- --red-60: #d70022;
|
|
47
|
|
- --red-70: #a4000f;
|
|
48
|
|
- --red-80: #5a0002;
|
|
49
|
|
- --red-90: #3e0200;
|
|
50
|
|
-
|
|
51
|
|
- --orange-50: #ff9400;
|
|
52
|
|
- --orange-60: #d76e00;
|
|
53
|
|
- --orange-70: #a44900;
|
|
54
|
|
- --orange-80: #712b00;
|
|
55
|
|
- --orange-90: #3e1300;
|
|
56
|
|
-
|
|
57
|
|
- --grey-10: #f9f9fa;
|
|
58
|
|
- --grey-10-a10: rgba(249, 249, 250, 0.1);
|
|
59
|
|
- --grey-10-a20: rgba(249, 249, 250, 0.2);
|
|
60
|
|
- --grey-10-a40: rgba(249, 249, 250, 0.4);
|
|
61
|
|
- --grey-10-a60: rgba(249, 249, 250, 0.6);
|
|
62
|
|
- --grey-10-a80: rgba(249, 249, 250, 0.8);
|
|
63
|
|
- --grey-20: #ededf0;
|
|
64
|
|
- --grey-30: #d7d7db;
|
|
65
|
|
- --grey-40: #b1b1b3;
|
|
66
|
|
- --grey-50: #737373;
|
|
67
|
|
- --grey-60: #4a4a4f;
|
|
68
|
|
- --grey-70: #38383d;
|
|
69
|
|
- --grey-80: #2a2a2e;
|
|
70
|
|
- --grey-90: #0c0c0d;
|
|
71
|
|
- --grey-90-a05: rgba(12, 12, 13, 0.05);
|
|
72
|
|
- --grey-90-a10: rgba(12, 12, 13, 0.1);
|
|
73
|
|
- --grey-90-a20: rgba(12, 12, 13, 0.2);
|
|
74
|
|
- --grey-90-a30: rgba(12, 12, 13, 0.3);
|
|
75
|
|
- --grey-90-a40: rgba(12, 12, 13, 0.4);
|
|
76
|
|
- --grey-90-a50: rgba(12, 12, 13, 0.5);
|
|
77
|
|
- --grey-90-a60: rgba(12, 12, 13, 0.6);
|
|
78
|
|
- --grey-90-a70: rgba(12, 12, 13, 0.7);
|
|
79
|
|
- --grey-90-a80: rgba(12, 12, 13, 0.8);
|
|
80
|
|
- --grey-90-a90: rgba(12, 12, 13, 0.9);
|
|
81
|
|
-
|
|
82
|
|
- --ink-70: #363959;
|
|
83
|
|
- --ink-80: #202340;
|
|
84
|
|
- --ink-90: #0f1126;
|
|
85
|
|
-
|
|
86
|
|
- --white-100: #ffffff;
|
|
87
|
|
-
|
|
88
|
|
- /* TODO: Switch to some Firefox variable, once Mozilla adds one for this
|
|
89
|
|
- color. Matches --warning-icon-bgcolor (but not on the dark theme variant). */
|
|
90
|
|
- --warning-color: #ffa436;
|
|
91
|
|
-}
|
|
92
|
|
-
|
|
93
|
|
-@media (prefers-color-scheme: dark) {
|
|
94
|
|
- :root {
|
|
95
|
|
- --warning-color: #ffbd4f;
|
|
96
|
|
- }
|
|
97
|
|
-} |
toolkit/themes/shared/desktop-jar.inc.mn
| ... |
... |
@@ -46,6 +46,7 @@ |
|
46
|
46
|
skin/classic/global/popupnotification.css (../../shared/popupnotification.css)
|
|
47
|
47
|
skin/classic/global/splitter.css (../../shared/splitter.css)
|
|
48
|
48
|
skin/classic/global/toolbarbutton.css (../../shared/toolbarbutton.css)
|
|
|
49
|
+ skin/classic/global/tor-colors.css (../../shared/tor-colors.css)
|
|
49
|
50
|
skin/classic/global/tree/tree.css (../../shared/tree/tree.css)
|
|
50
|
51
|
skin/classic/global/dirListing/dirListing.css (../../shared/dirListing/dirListing.css)
|
|
51
|
52
|
#ifdef XP_MACOSX
|
toolkit/themes/shared/minimal-toolkit.jar.inc.mn
| ... |
... |
@@ -45,5 +45,3 @@ toolkit.jar: |
|
45
|
45
|
# Text recognition widget
|
|
46
|
46
|
|
|
47
|
47
|
skin/classic/global/media/textrecognition.css (../../shared/media/textrecognition.css) |
|
48
|
|
-
|
|
49
|
|
- skin/classic/global/browser-colors.css (../../shared/browser-colors.css) |
toolkit/themes/shared/tor-colors.css
|
|
1
|
+:root {
|
|
|
2
|
+ /* Photon colors not available in Firefox. */
|
|
|
3
|
+ --purple-30: #c069ff;
|
|
|
4
|
+ --purple-40: #ad3bff;
|
|
|
5
|
+ --purple-50: #9400ff;
|
|
|
6
|
+ --purple-60: #8000d7;
|
|
|
7
|
+ --purple-70: #6200a4;
|
|
|
8
|
+ --purple-80: #440071;
|
|
|
9
|
+ --purple-90: #25003e;
|
|
|
10
|
+
|
|
|
11
|
+ /* On light backgrounds. */
|
|
|
12
|
+ --tor-accent-color-light: var(--purple-60);
|
|
|
13
|
+ --tor-accent-color-hover-light: var(--purple-70);
|
|
|
14
|
+ --tor-accent-color-active-light: var(--purple-80);
|
|
|
15
|
+
|
|
|
16
|
+ /* Acorn color grey light 05. */
|
|
|
17
|
+ --tor-button-text-color-light: var(--color-gray-05);
|
|
|
18
|
+ --tor-button-text-color-hover-light: var(--color-gray-05);
|
|
|
19
|
+ --tor-button-text-color-active-light: var(--color-gray-05);
|
|
|
20
|
+ --tor-button-background-color-light: var(--tor-accent-color-light);
|
|
|
21
|
+ --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);
|
|
|
22
|
+ --tor-button-background-color-active-light: var(--tor-accent-color-active-light);
|
|
|
23
|
+ --tor-focus-outline-color-light: var(--tor-accent-color-light);
|
|
|
24
|
+ --tor-link-color-light: var(--tor-accent-color-light);
|
|
|
25
|
+ --tor-link-color-hover-light: var(--tor-accent-color-hover-light);
|
|
|
26
|
+ --tor-link-color-active-light: var(--tor-accent-color-active-light);
|
|
|
27
|
+
|
|
|
28
|
+
|
|
|
29
|
+ /* On dark backgrounds. */
|
|
|
30
|
+ /* TODO: Need a dark theme purple color that gets *lighter* with hover and
|
|
|
31
|
+ * active states, see tor-browser#42025 */
|
|
|
32
|
+ --tor-accent-color-dark: var(--purple-30);
|
|
|
33
|
+ --tor-accent-color-hover-dark: var(--purple-40);
|
|
|
34
|
+ --tor-accent-color-active-dark: var(--purple-50);
|
|
|
35
|
+
|
|
|
36
|
+ /* TODO: Use a dark text color for dark theme. tor-browser#41787. */
|
|
|
37
|
+ --tor-button-text-color-dark: var(--color-gray-05);
|
|
|
38
|
+ --tor-button-text-color-hover-dark: var(--color-gray-05);
|
|
|
39
|
+ --tor-button-text-color-active-dark: var(--color-gray-05);
|
|
|
40
|
+ --tor-button-background-color-dark: var(--tor-accent-color-dark);
|
|
|
41
|
+ --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);
|
|
|
42
|
+ --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);
|
|
|
43
|
+ --tor-focus-outline-color-dark: var(--tor-accent-color-dark);
|
|
|
44
|
+ --tor-link-color-dark: var(--tor-accent-color-dark);
|
|
|
45
|
+ --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);
|
|
|
46
|
+ --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
|
|
|
47
|
+
|
|
|
48
|
+
|
|
|
49
|
+ /* Generic colors that adapt to theme. */
|
|
|
50
|
+ --tor-accent-color: light-dark(
|
|
|
51
|
+ var(--tor-accent-color-light),
|
|
|
52
|
+ var(--tor-accent-color-dark)
|
|
|
53
|
+ );
|
|
|
54
|
+ --tor-accent-color-hover: light-dark(
|
|
|
55
|
+ var(--tor-accent-color-hover-light),
|
|
|
56
|
+ var(--tor-accent-color-hover-dark)
|
|
|
57
|
+ );
|
|
|
58
|
+ --tor-accent-color-active: light-dark(
|
|
|
59
|
+ var(--tor-accent-color-active-light),
|
|
|
60
|
+ var(--tor-accent-color-active-dark)
|
|
|
61
|
+ );
|
|
|
62
|
+ --tor-button-text-color: light-dark(
|
|
|
63
|
+ var(--tor-button-text-color-light),
|
|
|
64
|
+ var(--tor-button-text-color-dark)
|
|
|
65
|
+ );
|
|
|
66
|
+ --tor-button-text-color-hover: light-dark(
|
|
|
67
|
+ var(--tor-button-text-color-hover-light),
|
|
|
68
|
+ var(--tor-button-text-color-hover-dark)
|
|
|
69
|
+ );
|
|
|
70
|
+ --tor-button-text-color-active: light-dark(
|
|
|
71
|
+ var(--tor-button-text-color-active-light),
|
|
|
72
|
+ var(--tor-button-text-color-active-dark)
|
|
|
73
|
+ );
|
|
|
74
|
+ --tor-button-background-color: light-dark(
|
|
|
75
|
+ var(--tor-button-background-color-light),
|
|
|
76
|
+ var(--tor-button-background-color-dark)
|
|
|
77
|
+ );
|
|
|
78
|
+ --tor-button-background-color-hover: light-dark(
|
|
|
79
|
+ var(--tor-button-background-color-hover-light),
|
|
|
80
|
+ var(--tor-button-background-color-hover-dark)
|
|
|
81
|
+ );
|
|
|
82
|
+ --tor-button-background-color-active: light-dark(
|
|
|
83
|
+ var(--tor-button-background-color-active-light),
|
|
|
84
|
+ var(--tor-button-background-color-active-dark)
|
|
|
85
|
+ );
|
|
|
86
|
+ --tor-focus-outline-color: light-dark(
|
|
|
87
|
+ var(--tor-focus-outline-color-light),
|
|
|
88
|
+ var(--tor-focus-outline-color-dark)
|
|
|
89
|
+ );
|
|
|
90
|
+ --tor-link-color: light-dark(
|
|
|
91
|
+ var(--tor-link-color-light),
|
|
|
92
|
+ var(--tor-link-color-dark)
|
|
|
93
|
+ );
|
|
|
94
|
+ --tor-link-color-hover: light-dark(
|
|
|
95
|
+ var(--tor-link-color-hover-light),
|
|
|
96
|
+ var(--tor-link-color-hover-dark)
|
|
|
97
|
+ );
|
|
|
98
|
+ --tor-link-color-active: light-dark(
|
|
|
99
|
+ var(--tor-link-color-active-light),
|
|
|
100
|
+ var(--tor-link-color-active-dark)
|
|
|
101
|
+ );
|
|
|
102
|
+}
|
|
|
103
|
+
|
|
|
104
|
+button.tor-button,
|
|
|
105
|
+.tor-button {
|
|
|
106
|
+ color: var(--tor-button-text-color);
|
|
|
107
|
+ background-color: var(--tor-button-background-color);
|
|
|
108
|
+}
|
|
|
109
|
+
|
|
|
110
|
+button.tor-button:hover,
|
|
|
111
|
+.tor-button:hover {
|
|
|
112
|
+ color: var(--tor-button-text-color-hover);
|
|
|
113
|
+ background-color: var(--tor-button-background-color-hover);
|
|
|
114
|
+}
|
|
|
115
|
+
|
|
|
116
|
+button.tor-button:hover:active,
|
|
|
117
|
+.tor-button:hover:active {
|
|
|
118
|
+ color: var(--tor-button-text-color-active);
|
|
|
119
|
+ background-color: var(--tor-button-background-color-active);
|
|
|
120
|
+} |
|