Pier Angelo Vendrame pushed to branch tor-browser-145.0a1-16.0-1 at The Tor Project / Applications / Tor Browser
Commits:
-
f2691678
by Henry Wilkes at 2025-11-27T17:24:01+00:00
-
528c689e
by Henry Wilkes at 2025-11-27T17:35:12+00:00
-
6689ac59
by Henry Wilkes at 2025-11-27T17:43:04+00:00
-
dffc19a1
by Henry Wilkes at 2025-11-27T17:43:05+00:00
-
2641c3fc
by Henry Wilkes at 2025-11-27T17:43:06+00:00
-
72fcc979
by Henry Wilkes at 2025-11-27T17:43:06+00:00
-
e2c81a70
by Henry Wilkes at 2025-11-27T17:43:07+00:00
-
5c6aea6a
by Henry Wilkes at 2025-11-27T17:43:08+00:00
-
7d4f87d0
by Henry Wilkes at 2025-11-27T17:43:09+00:00
-
2342c259
by Henry Wilkes at 2025-11-27T17:43:10+00:00
13 changed files:
- browser/components/abouttor/content/aboutTor.css
- browser/components/abouttor/content/yec2025-font.css
- browser/components/onionservices/content/authPreferences.css
- browser/components/onionservices/content/onionservices.css
- browser/components/rulesets/content/aboutRulesets.css
- browser/components/securitylevel/content/securityLevelPanel.css
- browser/components/securitylevel/content/securityLevelPreferences.css
- browser/components/torcircuit/content/torCircuitPanel.css
- browser/components/torpreferences/content/torPreferences.css
- browser/themes/shared/tor-urlbar-button.css
- toolkit/components/resistfingerprinting/content/letterboxing.css
- toolkit/components/torconnect/content/aboutTorConnect.css
- toolkit/components/torconnect/content/aboutTorConnect.js
Changes:
| ... | ... | @@ -38,6 +38,7 @@ h1 { |
| 38 | 38 | display: flex;
|
| 39 | 39 | align-items: center;
|
| 40 | 40 | gap: 16px;
|
| 41 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
| 41 | 42 | font-size: 40px;
|
| 42 | 43 | margin-block-start: 0;
|
| 43 | 44 | margin-block-end: 40px;
|
| ... | ... | @@ -70,8 +71,8 @@ body:not(.is-testing) #tor-browser-home-heading-testing { |
| 70 | 71 | }
|
| 71 | 72 | |
| 72 | 73 | .tor-home-box {
|
| 73 | - border: 1px solid var(--in-content-box-border-color);
|
|
| 74 | - background-color: var(--in-content-box-info-background);
|
|
| 74 | + border: 1px solid var(--border-color);
|
|
| 75 | + background-color: var(--background-color-box-info);
|
|
| 75 | 76 | max-width: var(--form-max-width);
|
| 76 | 77 | width: -moz-available;
|
| 77 | 78 | box-sizing: border-box;
|
| ... | ... | @@ -95,7 +96,6 @@ body:not(.show-tor-check) #tor-check { |
| 95 | 96 | |
| 96 | 97 | .home-message {
|
| 97 | 98 | grid-area: message;
|
| 98 | - font-weight: 400;
|
|
| 99 | 99 | text-align: center;
|
| 100 | 100 | margin-block: 1.6em;
|
| 101 | 101 | }
|
| ... | ... | @@ -118,12 +118,14 @@ body:not(.show-tor-check) #tor-check { |
| 118 | 118 | --form-border-width: 1px;
|
| 119 | 119 | /* Padding between elements and the parent's border edge. */
|
| 120 | 120 | --form-outer-padding: calc(var(--form-padding) - var(--form-border-width));
|
| 121 | - --form-radius: 7px;
|
|
| 121 | + --form-radius-container: var(--border-radius-medium);
|
|
| 122 | + --form-radius: calc(var(--form-radius-container) - var(--form-border-width));
|
|
| 122 | 123 | --logo-size: 30px;
|
| 123 | - border-radius: calc(var(--form-radius) + var(--form-border-width));
|
|
| 124 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 125 | + border-radius: var(--form-radius-container);
|
|
| 124 | 126 | border-width: var(--form-border-width);
|
| 125 | 127 | border-style: solid;
|
| 126 | - border-color: var(--in-content-box-border-color);
|
|
| 128 | + border-color: var(--border-color);
|
|
| 127 | 129 | }
|
| 128 | 130 | |
| 129 | 131 | #search-form:has(#search-input:focus-visible) {
|
| ... | ... | @@ -149,10 +151,12 @@ body:not(.show-tor-check) #tor-check { |
| 149 | 151 | padding-inline-end: var(--form-padding);
|
| 150 | 152 | padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */);
|
| 151 | 153 | /* Make sure clickable area does not extend beyond the form's border. */
|
| 154 | + /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 152 | 155 | border-start-start-radius: var(--form-radius);
|
| 153 | 156 | border-end-start-radius: var(--form-radius);
|
| 154 | 157 | border-start-end-radius: 0;
|
| 155 | 158 | border-end-end-radius: 0;
|
| 159 | + /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 156 | 160 | /* Focus and outline styling move to the parent. */
|
| 157 | 161 | background: none;
|
| 158 | 162 | border: none;
|
| ... | ... | @@ -161,14 +165,15 @@ body:not(.show-tor-check) #tor-check { |
| 161 | 165 | |
| 162 | 166 | #onionize-toggle {
|
| 163 | 167 | flex: 0 0 auto;
|
| 164 | - font-weight: 500;
|
|
| 165 | 168 | align-content: center;
|
| 166 | 169 | padding-block: var(--form-outer-padding);
|
| 167 | 170 | padding-inline-end: var(--form-outer-padding);
|
| 171 | + /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 168 | 172 | border-start-end-radius: var(--form-radius);
|
| 169 | 173 | border-end-end-radius: var(--form-radius);
|
| 170 | 174 | border-start-start-radius: 0;
|
| 171 | 175 | border-end-start-radius: 0;
|
| 176 | + /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 172 | 177 | padding-inline-start: 0;
|
| 173 | 178 | /* Non-clickable gap between input and toggle. */
|
| 174 | 179 | margin-inline-start: 0.5em;
|
| ... | ... | @@ -203,7 +208,7 @@ body:not(.show-survey) #survey { |
| 203 | 208 | width: 24px;
|
| 204 | 209 | height: 24px;
|
| 205 | 210 | padding: 8px;
|
| 206 | - border-radius: 20px;
|
|
| 211 | + border-radius: var(--border-radius-circle);
|
|
| 207 | 212 | }
|
| 208 | 213 | |
| 209 | 214 | #survey-heading {
|
| ... | ... | @@ -245,10 +250,12 @@ body:not(.show-survey) #survey { |
| 245 | 250 | background-color: #2c0449;
|
| 246 | 251 | --focus-outline-color: var(--tor-focus-outline-color-dark);
|
| 247 | 252 | --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
| 248 | - --in-content-focus-outline-color: var(--focus-outline-color);
|
|
| 249 | - --in-content-focus-outline: var(--focus-outline);
|
|
| 250 | 253 | --onion-pattern-stroke-color: #3e0663;
|
| 251 | 254 | --onion-pattern-fill-color: #350556;
|
| 255 | + /* Same as --text-color when "prefers-color-scheme: light" */
|
|
| 256 | + --text-color-light: var(--color-gray-100);
|
|
| 257 | + /* Same as --text-color when "prefers-color-scheme: dark" */
|
|
| 258 | + --text-color-dark: var(--color-gray-05);
|
|
| 252 | 259 | }
|
| 253 | 260 | |
| 254 | 261 | #tor-check {
|
| ... | ... | @@ -257,13 +264,10 @@ body:not(.show-survey) #survey { |
| 257 | 264 | }
|
| 258 | 265 | |
| 259 | 266 | body > :not(#search-form) {
|
| 260 | - /* Same as --in-content-page-color when "prefers-color-scheme: dark" */
|
|
| 261 | - --in-content-page-color-dark: var(--color-gray-05);
|
|
| 262 | - color: var(--in-content-page-color-dark);
|
|
| 267 | + color: var(--text-color-dark);
|
|
| 263 | 268 | --button-text-color: currentColor;
|
| 264 | - --in-content-button-text-color: var(--button-text-color);
|
|
| 265 | - --in-content-button-text-color-hover: var(--button-text-color);
|
|
| 266 | - --in-content-button-text-color-active: var(--button-text-color);
|
|
| 269 | + --button-text-color-hover: var(--button-text-color);
|
|
| 270 | + --button-text-color-active: var(--button-text-color);
|
|
| 267 | 271 | --button-text-color-ghost: var(--button-text-color);
|
| 268 | 272 | --button-text-color-ghost-hover: var(--button-text-color);
|
| 269 | 273 | --button-text-color-ghost-active: var(--button-text-color);
|
| ... | ... | @@ -275,15 +279,14 @@ body:not(.show-survey) #survey { |
| 275 | 279 | #search-form {
|
| 276 | 280 | /* Use light color for background and moz-toggle shadow root. */
|
| 277 | 281 | color-scheme: light;
|
| 278 | - /* Same as --in-content-page-color when "prefers-color-scheme: light" */
|
|
| 279 | - --in-content-page-color-light: var(--color-gray-100);
|
|
| 280 | - color: var(--in-content-page-color-light);
|
|
| 282 | + color: var(--text-color-light);
|
|
| 281 | 283 | border-color: transparent;
|
| 282 | 284 | }
|
| 283 | 285 | |
| 284 | 286 | #search-form:has(#search-input:focus-visible) {
|
| 285 | 287 | /* Use a light-themed inner-border to contrast with the dark-themed
|
| 286 | 288 | * focus outline. */
|
| 289 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
|
|
| 287 | 290 | border-color: var(--tor-focus-outline-color-light);
|
| 288 | 291 | }
|
| 289 | 292 | |
| ... | ... | @@ -297,8 +300,6 @@ body:not(.show-survey) #survey { |
| 297 | 300 | #search-form > * {
|
| 298 | 301 | --focus-outline-color: var(--tor-focus-outline-color-light);
|
| 299 | 302 | --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
| 300 | - --in-content-focus-outline-color: var(--focus-outline-color);
|
|
| 301 | - --in-content-focus-outline: var(--focus-outline);
|
|
| 302 | 303 | /* Variables used for --toggle- variables. */
|
| 303 | 304 | --color-accent-primary: var(--tor-button-background-color-light);
|
| 304 | 305 | --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
|
| ... | ... | @@ -319,10 +320,10 @@ body:not(.show-survey) #survey { |
| 319 | 320 | }
|
| 320 | 321 | |
| 321 | 322 | #survey-launch {
|
| 322 | - color: var(--in-content-page-color-light);
|
|
| 323 | - --in-content-primary-button-background: var(--tor-button-background-color-dark);
|
|
| 324 | - --in-content-primary-button-background-hover: var(--tor-button-background-color-hover-dark);
|
|
| 325 | - --in-content-primary-button-background-active: var(--tor-button-background-color-active-dark);
|
|
| 323 | + color: var(--text-color-light);
|
|
| 324 | + --button-background-color-primary: var(--tor-button-background-color-dark);
|
|
| 325 | + --button-background-color-primary-hover: var(--tor-button-background-color-hover-dark);
|
|
| 326 | + --button-background-color-primary-active: var(--tor-button-background-color-active-dark);
|
|
| 326 | 327 | }
|
| 327 | 328 | }
|
| 328 | 329 | |
| ... | ... | @@ -341,7 +342,7 @@ body.show-yec h1 { |
| 341 | 342 | #yec-banner {
|
| 342 | 343 | grid-area: heading;
|
| 343 | 344 | border-radius: var(--border-radius-medium);
|
| 344 | - border: 1px solid var(--in-content-box-border-color);
|
|
| 345 | + border: 1px solid var(--border-color);
|
|
| 345 | 346 | display: grid;
|
| 346 | 347 | grid-template:
|
| 347 | 348 | "yec-heading yec-image" auto
|
| ... | ... | @@ -388,8 +389,9 @@ body.show-yec h1 { |
| 388 | 389 | #yec-heading {
|
| 389 | 390 | grid-area: yec-heading;
|
| 390 | 391 | margin-block: 0 16px;
|
| 392 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
| 391 | 393 | font-size: 64px;
|
| 392 | - font-weight: 400;
|
|
| 394 | + font-weight: var(--font-weight);
|
|
| 393 | 395 | font-family: "Jacquard 12", serif;
|
| 394 | 396 | }
|
| 395 | 397 | |
| ... | ... | @@ -418,10 +420,10 @@ body.show-yec h1 { |
| 418 | 420 | justify-self: start;
|
| 419 | 421 | /* Style like a button. */
|
| 420 | 422 | font-weight: var(--button-font-weight);
|
| 421 | - color: var(--in-content-button-text-color);
|
|
| 422 | - border: 1px solid var(--in-content-button-border-color);
|
|
| 423 | - border-radius: var(--border-radius-small);
|
|
| 424 | - background-color: var(--in-content-button-background);
|
|
| 423 | + color: var(--button-text-color);
|
|
| 424 | + border: 1px solid var(--button-border-color);
|
|
| 425 | + border-radius: var(--button-border-radius);
|
|
| 426 | + background-color: var(--button-background-color);
|
|
| 425 | 427 | padding: var(--button-padding);
|
| 426 | 428 | box-sizing: border-box;
|
| 427 | 429 | min-height: var(--button-min-height);
|
| ... | ... | @@ -437,15 +439,15 @@ body.show-yec h1 { |
| 437 | 439 | }
|
| 438 | 440 | |
| 439 | 441 | #yec-donate-link:hover {
|
| 440 | - background-color: var(--in-content-button-background-hover);
|
|
| 441 | - color: var(--in-content-button-text-color-hover);
|
|
| 442 | - border-color: var(--in-content-button-border-color-hover);
|
|
| 442 | + background-color: var(--button-background-color-hover);
|
|
| 443 | + color: var(--button-text-color-hover);
|
|
| 444 | + border-color: var(--button-border-color-hover);
|
|
| 443 | 445 | }
|
| 444 | 446 | |
| 445 | 447 | #yec-donate-link:hover:active {
|
| 446 | - background-color: var(--in-content-button-background-active);
|
|
| 447 | - color: var(--in-content-button-text-color-active);
|
|
| 448 | - border-color: var(--in-content-button-border-color-active);
|
|
| 448 | + background-color: var(--button-background-color-active);
|
|
| 449 | + color: var(--button-text-color-active);
|
|
| 450 | + border-color: var(--button-border-color-active);
|
|
| 449 | 451 | }
|
| 450 | 452 | |
| 451 | 453 | #yec-donate-icon {
|
| ... | ... | @@ -487,7 +489,8 @@ body.show-yec h1 { |
| 487 | 489 | }
|
| 488 | 490 | |
| 489 | 491 | #yec-heading {
|
| 490 | - font-size: 3.5rem;
|
|
| 492 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
| 493 | + font-size: 50px;
|
|
| 491 | 494 | }
|
| 492 | 495 | |
| 493 | 496 | #yec-matching {
|
| ... | ... | @@ -502,7 +505,7 @@ body.show-yec h1 { |
| 502 | 505 | @media ((prefers-contrast) or (forced-colors)) and (prefers-color-scheme: dark) {
|
| 503 | 506 | #yec-image {
|
| 504 | 507 | /* Give the dark image a light border to separate from background. */
|
| 505 | - border-color: var(--in-content-box-border-color);
|
|
| 508 | + border-color: var(--border-color);
|
|
| 506 | 509 | }
|
| 507 | 510 | }
|
| 508 | 511 | |
| ... | ... | @@ -523,11 +526,11 @@ body.show-yec h1 { |
| 523 | 526 | }
|
| 524 | 527 | |
| 525 | 528 | #yec-donate-link {
|
| 526 | - --in-content-button-text-color: var(--yec-button-text);
|
|
| 527 | - --in-content-button-text-color-hover: var(--yec-button-text);
|
|
| 528 | - --in-content-button-text-color-active: var(--yec-button-text);
|
|
| 529 | - --in-content-button-background: var(--yec-button-background);
|
|
| 530 | - --in-content-button-background-hover: var(--yec-button-background-hover);
|
|
| 531 | - --in-content-button-background-active: var(--yec-button-background-active);
|
|
| 529 | + --button-text-color: var(--yec-button-text);
|
|
| 530 | + --button-text-color-hover: var(--yec-button-text);
|
|
| 531 | + --button-text-color-active: var(--yec-button-text);
|
|
| 532 | + --button-background-color: var(--yec-button-background);
|
|
| 533 | + --button-background-color-hover: var(--yec-button-background-hover);
|
|
| 534 | + --button-background-color-active: var(--yec-button-background-active);
|
|
| 532 | 535 | }
|
| 533 | 536 | } |
| ... | ... | @@ -98,6 +98,7 @@ |
| 98 | 98 | |
| 99 | 99 | @font-face {
|
| 100 | 100 | font-family: "Jacquard 12";
|
| 101 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-weight-tokens */
|
|
| 101 | 102 | font-weight: 400 400;
|
| 102 | 103 | font-style: normal;
|
| 103 | 104 | /* woff2 stream */
|
| ... | ... | @@ -5,7 +5,7 @@ |
| 5 | 5 | }
|
| 6 | 6 | |
| 7 | 7 | #onionservices-savedkeys-tree treechildren::-moz-tree-cell-text {
|
| 8 | - font-size: 80%;
|
|
| 8 | + font-size: var(--font-size-small);
|
|
| 9 | 9 | }
|
| 10 | 10 | |
| 11 | 11 | #onionservices-savedkeys-errorContainer {
|
| 1 | 1 | /* Copyright (c) 2020, The Tor Project, Inc. */
|
| 2 | 2 | |
| 3 | 3 | #tor-clientauth-notification-desc {
|
| 4 | - font-weight: bold;
|
|
| 4 | + font-weight: var(--font-weight-bold);
|
|
| 5 | 5 | }
|
| 6 | 6 | |
| 7 | 7 | #tor-clientauth-notification-key {
|
| ... | ... | @@ -16,18 +16,16 @@ |
| 16 | 16 | * use the same rules).
|
| 17 | 17 | */
|
| 18 | 18 | #tor-clientauth-notification-key.invalid {
|
| 19 | - border: 1px solid #d70022;
|
|
| 20 | - box-shadow:
|
|
| 21 | - 0 0 0 1px #d70022,
|
|
| 22 | - 0 0 0 4px rgba(215, 0, 34, 0.3);
|
|
| 19 | + border: 1px solid var(--outline-color-error);
|
|
| 23 | 20 | }
|
| 24 | 21 | |
| 25 | 22 | #tor-clientauth-warning {
|
| 26 | 23 | display: inline-block;
|
| 27 | 24 | animation: fade-up-tt 450ms;
|
| 28 | - background: #d70022;
|
|
| 25 | + /* FIXME: This warning block does not follow upstream's styling. */
|
|
| 26 | + background: var(--button-background-color-destructive);
|
|
| 27 | + color: var(--button-text-color-destructive);
|
|
| 29 | 28 | border-radius: var(--border-radius-xsmall);
|
| 30 | - color: #fff;
|
|
| 31 | 29 | inset-inline-start: 3px;
|
| 32 | 30 | padding: 5px 12px;
|
| 33 | 31 | position: relative;
|
| ... | ... | @@ -40,7 +38,7 @@ |
| 40 | 38 | }
|
| 41 | 39 | |
| 42 | 40 | #tor-clientauth-warning::before {
|
| 43 | - background: #d70022;
|
|
| 41 | + background: var(--button-background-color-destructive);
|
|
| 44 | 42 | bottom: -8px;
|
| 45 | 43 | content: ".";
|
| 46 | 44 | height: 16px;
|
| ... | ... | @@ -4,20 +4,10 @@ |
| 4 | 4 | |
| 5 | 5 | html,
|
| 6 | 6 | body {
|
| 7 | - margin: 0;
|
|
| 8 | - padding: 0;
|
|
| 9 | 7 | width: 100%;
|
| 10 | 8 | height: 100%;
|
| 11 | 9 | }
|
| 12 | 10 | |
| 13 | -body {
|
|
| 14 | - font: message-box;
|
|
| 15 | - background-color: var(--background-color-canvas);
|
|
| 16 | - color: var(--in-content-page-color);
|
|
| 17 | - font-size: 15px;
|
|
| 18 | - cursor: default;
|
|
| 19 | -}
|
|
| 20 | - |
|
| 21 | 11 | label {
|
| 22 | 12 | display: flex;
|
| 23 | 13 | align-items: center;
|
| ... | ... | @@ -39,14 +29,14 @@ textarea { |
| 39 | 29 | |
| 40 | 30 | select,
|
| 41 | 31 | option {
|
| 42 | - font-weight: 700;
|
|
| 32 | + font-weight: var(--font-weight-bold);
|
|
| 43 | 33 | }
|
| 44 | 34 | |
| 45 | 35 | dt {
|
| 46 | 36 | margin: var(--ruleset-vmargin) 0 0 0;
|
| 47 | 37 | padding: 0;
|
| 48 | 38 | color: var(--text-color-deemphasized);
|
| 49 | - font-size: 85%;
|
|
| 39 | + font-size: var(--font-size-small);
|
|
| 50 | 40 | }
|
| 51 | 41 | |
| 52 | 42 | dd {
|
| ... | ... | @@ -60,7 +50,7 @@ hr { |
| 60 | 50 | width: 40px;
|
| 61 | 51 | margin: 0;
|
| 62 | 52 | border: none;
|
| 63 | - border-top: 1px solid var(--in-content-border-color);
|
|
| 53 | + border-top: 1px solid var(--border-color);
|
|
| 64 | 54 | }
|
| 65 | 55 | |
| 66 | 56 | .hidden {
|
| ... | ... | @@ -132,15 +122,15 @@ section { |
| 132 | 122 | width: var(--content-width);
|
| 133 | 123 | max-width: 100%;
|
| 134 | 124 | padding-bottom: 16px;
|
| 135 | - border-bottom: 1px solid var(--in-content-border-color);
|
|
| 125 | + border-bottom: 1px solid var(--border-color);
|
|
| 136 | 126 | }
|
| 137 | 127 | |
| 138 | 128 | .title h1 {
|
| 139 | 129 | margin: 0;
|
| 140 | 130 | padding: 0;
|
| 141 | 131 | padding-inline-start: 35px;
|
| 142 | - font-size: 20px;
|
|
| 143 | - font-weight: 700;
|
|
| 132 | + font-size: var(--font-size-xlarge);
|
|
| 133 | + font-weight: var(--font-weight-bold);
|
|
| 144 | 134 | background-image: url("chrome://browser/content/rulesets/securedrop.svg");
|
| 145 | 135 | background-position: 0 center;
|
| 146 | 136 | background-size: 22px;
|
| ... | ... | @@ -160,15 +150,15 @@ aside { |
| 160 | 150 | flex: 0 0 var(--sidebar-width);
|
| 161 | 151 | box-sizing: border-box;
|
| 162 | 152 | |
| 163 | - border-inline-end: 1px solid var(--in-content-border-color);
|
|
| 153 | + border-inline-end: 1px solid var(--border-color);
|
|
| 164 | 154 | background-color: var(--background-color-box);
|
| 165 | 155 | }
|
| 166 | 156 | |
| 167 | 157 | #ruleset-heading {
|
| 168 | 158 | padding: 16px;
|
| 169 | 159 | text-align: center;
|
| 170 | - font-weight: 700;
|
|
| 171 | - border-bottom: 1px solid var(--in-content-border-color);
|
|
| 160 | + font-weight: var(--font-weight-bold);
|
|
| 161 | + border-bottom: 1px solid var(--border-color);
|
|
| 172 | 162 | }
|
| 173 | 163 | |
| 174 | 164 | #ruleset-list-container {
|
| ... | ... | @@ -181,7 +171,7 @@ aside { |
| 181 | 171 | }
|
| 182 | 172 | |
| 183 | 173 | #ruleset-list-empty-description {
|
| 184 | - font-size: 80%;
|
|
| 174 | + font-size: var(--font-size-small);
|
|
| 185 | 175 | }
|
| 186 | 176 | |
| 187 | 177 | #ruleset-list {
|
| ... | ... | @@ -196,7 +186,7 @@ aside { |
| 196 | 186 | padding: 10px 18px;
|
| 197 | 187 | list-style: none;
|
| 198 | 188 | border-inline-start: 4px solid transparent;
|
| 199 | - border-bottom: 1px solid var(--in-content-border-color);
|
|
| 189 | + border-bottom: 1px solid var(--border-color);
|
|
| 200 | 190 | }
|
| 201 | 191 | |
| 202 | 192 | #ruleset-list li:last-child {
|
| ... | ... | @@ -216,29 +206,30 @@ aside { |
| 216 | 206 | }
|
| 217 | 207 | |
| 218 | 208 | #ruleset-list .name {
|
| 219 | - font-weight: 700;
|
|
| 209 | + font-weight: var(--font-weight-bold);
|
|
| 220 | 210 | }
|
| 221 | 211 | |
| 222 | 212 | #ruleset-list .description {
|
| 223 | - font-size: 85%;
|
|
| 213 | + font-size: var(--font-size-small);
|
|
| 224 | 214 | color: var(--text-color-deemphasized);
|
| 225 | 215 | }
|
| 226 | 216 | |
| 227 | 217 | #ruleset-list .selected {
|
| 218 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
|
|
| 228 | 219 | border-inline-start-color: var(--color-accent-primary);
|
| 229 | 220 | }
|
| 230 | 221 | |
| 231 | 222 | #ruleset-list .selected.disabled {
|
| 232 | - border-inline-start-color: var(--in-content-border-color);
|
|
| 223 | + border-inline-start-color: var(--border-color);
|
|
| 233 | 224 | }
|
| 234 | 225 | |
| 235 | 226 | #ruleset-list li:not(.selected):hover {
|
| 236 | - background-color: var(--in-content-button-background-hover);
|
|
| 237 | - color: var(--in-content-button-text-color-hover);
|
|
| 227 | + background-color: var(--button-background-color-hover);
|
|
| 228 | + color: var(--button-text-color-hover);
|
|
| 238 | 229 | }
|
| 239 | 230 | |
| 240 | 231 | #ruleset-list li:not(.selected):hover:active {
|
| 241 | - background-color: var(--in-content-button-background-active);
|
|
| 232 | + background-color: var(--button-background-color-active);
|
|
| 242 | 233 | }
|
| 243 | 234 | |
| 244 | 235 | #ruleset-list #ruleset-template {
|
| ... | ... | @@ -255,7 +246,7 @@ aside { |
| 255 | 246 | padding: 8px;
|
| 256 | 247 | border-radius: var(--border-radius-xsmall);
|
| 257 | 248 | background-color: var(--background-color-box);
|
| 258 | - font-size: 85%;
|
|
| 249 | + font-size: var(--font-size-small);
|
|
| 259 | 250 | line-break: anywhere;
|
| 260 | 251 | /* ASCII-only text, so can set line-height. */
|
| 261 | 252 | line-height: 1.4;
|
| ... | ... | @@ -284,7 +275,7 @@ aside { |
| 284 | 275 | #ruleset-updated {
|
| 285 | 276 | margin-top: 24px;
|
| 286 | 277 | color: var(--text-color-deemphasized);
|
| 287 | - font-size: 85%;
|
|
| 278 | + font-size: var(--font-size-small);
|
|
| 288 | 279 | }
|
| 289 | 280 | |
| 290 | 281 | /* Edit ruleset */
|
| ... | ... | @@ -59,7 +59,7 @@ |
| 59 | 59 | }
|
| 60 | 60 | |
| 61 | 61 | #securityLevel-level {
|
| 62 | - font-size: 1.25em;
|
|
| 62 | + font-size: larger;
|
|
| 63 | 63 | font-weight: var(--font-weight-bold);
|
| 64 | 64 | grid-area: title;
|
| 65 | 65 | }
|
| ... | ... | @@ -63,7 +63,7 @@ |
| 63 | 63 | |
| 64 | 64 | .security-level-name {
|
| 65 | 65 | grid-area: name;
|
| 66 | - font-weight: bold;
|
|
| 66 | + font-weight: var(--font-weight-bold);
|
|
| 67 | 67 | align-self: center;
|
| 68 | 68 | white-space: nowrap;
|
| 69 | 69 | }
|
| ... | ... | @@ -97,7 +97,7 @@ |
| 97 | 97 | #security-level-current {
|
| 98 | 98 | margin-block-start: var(--space-large);
|
| 99 | 99 | background: var(--background-color-box);
|
| 100 | - border: 1px solid var(--in-content-box-border-color);
|
|
| 100 | + border: 1px solid var(--border-color);
|
|
| 101 | 101 | border-radius: var(--border-radius-small);
|
| 102 | 102 | padding: var(--space-medium);
|
| 103 | 103 | }
|
| ... | ... | @@ -167,6 +167,9 @@ |
| 167 | 167 | }
|
| 168 | 168 | |
| 169 | 169 | .tor-circuit-addresses {
|
| 170 | + /* FIXME: Use a standard font size. Likely will be replaced with the conflux
|
|
| 171 | + * design. */
|
|
| 172 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
| 170 | 173 | font-size: 0.9em;
|
| 171 | 174 | font-family: monospace;
|
| 172 | 175 | margin-inline-start: 0.75em;
|
| ... | ... | @@ -82,7 +82,7 @@ button.spoof-button-disabled { |
| 82 | 82 | }
|
| 83 | 83 | |
| 84 | 84 | .network-status-label {
|
| 85 | - font-weight: bold;
|
|
| 85 | + font-weight: var(--font-weight-bold);
|
|
| 86 | 86 | margin-inline-end: 0.75em;
|
| 87 | 87 | }
|
| 88 | 88 | |
| ... | ... | @@ -142,7 +142,7 @@ button.spoof-button-disabled { |
| 142 | 142 | min-width: max-content;
|
| 143 | 143 | align-items: center;
|
| 144 | 144 | gap: 0.5em;
|
| 145 | - font-size: 0.85em;
|
|
| 145 | + font-size: var(--font-size-small);
|
|
| 146 | 146 | }
|
| 147 | 147 | |
| 148 | 148 | .bridge-status-badge:not(.bridge-status-connected, .bridge-status-none, .bridge-status-current-built-in) {
|
| ... | ... | @@ -210,7 +210,7 @@ button.spoof-button-disabled { |
| 210 | 210 | gap: 16px;
|
| 211 | 211 | border-radius: var(--border-radius-small);
|
| 212 | 212 | color: var(--text-color-deemphasized);
|
| 213 | - border: 2px dashed color-mix(in srgb, currentColor 20%, transparent);
|
|
| 213 | + border: 2px dashed var(--border-color-deemphasized);
|
|
| 214 | 214 | }
|
| 215 | 215 | |
| 216 | 216 | #tor-bridges-none-icon {
|
| ... | ... | @@ -225,8 +225,8 @@ button.spoof-button-disabled { |
| 225 | 225 | .tor-bridges-details-box {
|
| 226 | 226 | padding: 16px;
|
| 227 | 227 | border-radius: var(--border-radius-small);
|
| 228 | - background: var(--in-content-box-info-background);
|
|
| 229 | - border: 1px solid var(--in-content-box-border-color);
|
|
| 228 | + background: var(--background-color-box-info);
|
|
| 229 | + border: 1px solid var(--border-color);
|
|
| 230 | 230 | }
|
| 231 | 231 | |
| 232 | 232 | @media not forced-colors {
|
| ... | ... | @@ -240,7 +240,7 @@ button.spoof-button-disabled { |
| 240 | 240 | min-width: max-content;
|
| 241 | 241 | grid-template: "heading source button" min-content / max-content 1fr max-content;
|
| 242 | 242 | align-items: center;
|
| 243 | - border-block-end: 1px solid var(--in-content-border-color);
|
|
| 243 | + border-block-end: 1px solid var(--border-color);
|
|
| 244 | 244 | padding-block-end: 16px;
|
| 245 | 245 | margin-block-end: 16px;
|
| 246 | 246 | white-space: nowrap;
|
| ... | ... | @@ -307,7 +307,7 @@ button.spoof-button-disabled { |
| 307 | 307 | }
|
| 308 | 308 | |
| 309 | 309 | #tor-bridges-built-in-type-name {
|
| 310 | - font-weight: 700;
|
|
| 310 | + font-weight: var(--font-weight-bold);
|
|
| 311 | 311 | grid-area: type;
|
| 312 | 312 | }
|
| 313 | 313 | |
| ... | ... | @@ -525,7 +525,7 @@ button.spoof-button-disabled { |
| 525 | 525 | /* fill is the progress, stroke is the empty ring. */
|
| 526 | 526 | -moz-context-properties: fill, stroke;
|
| 527 | 527 | fill: var(--icon-color-success);
|
| 528 | - stroke: var(--in-content-border-color);
|
|
| 528 | + stroke: var(--border-color);
|
|
| 529 | 529 | content: url("chrome://browser/content/torpreferences/lox-progress-ring.svg");
|
| 530 | 530 | }
|
| 531 | 531 | |
| ... | ... | @@ -602,7 +602,7 @@ button.spoof-button-disabled { |
| 602 | 602 | }
|
| 603 | 603 | |
| 604 | 604 | #tor-bridges-lox-details .tor-bridges-lox-list-item::before {
|
| 605 | - stroke: var(--in-content-border-color);
|
|
| 605 | + stroke: var(--border-color);
|
|
| 606 | 606 | }
|
| 607 | 607 | |
| 608 | 608 | #tor-bridges-lox-unlock-alert .tor-bridges-lox-list-item::before {
|
| ... | ... | @@ -673,7 +673,7 @@ button.spoof-button-disabled { |
| 673 | 673 | |
| 674 | 674 | .tor-bridges-provider-name {
|
| 675 | 675 | font-weight: var(--font-weight-bold);
|
| 676 | - font-size: 0.85em;
|
|
| 676 | + font-size: var(--font-size-small);
|
|
| 677 | 677 | }
|
| 678 | 678 | |
| 679 | 679 | .tor-bridges-provider-instruction {
|
| ... | ... | @@ -707,8 +707,8 @@ button.spoof-button-disabled { |
| 707 | 707 | }
|
| 708 | 708 | |
| 709 | 709 | #torPreferences-bridges-location menuitem[disabled="true"] {
|
| 710 | - color: var(--in-content-button-text-color, inherit);
|
|
| 711 | - font-weight: 700;
|
|
| 710 | + color: var(--button-text-color, inherit);
|
|
| 711 | + font-weight: var(--font-weight-bold);
|
|
| 712 | 712 | }
|
| 713 | 713 | |
| 714 | 714 | /* Request bridges */
|
| ... | ... | @@ -849,7 +849,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
| 849 | 849 | }
|
| 850 | 850 | |
| 851 | 851 | #lox-invite-dialog-list-label {
|
| 852 | - font-weight: 700;
|
|
| 852 | + font-weight: var(--font-weight-bold);
|
|
| 853 | 853 | }
|
| 854 | 854 | |
| 855 | 855 | #lox-invite-dialog-list {
|
| ... | ... | @@ -882,7 +882,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
| 882 | 882 | }
|
| 883 | 883 | |
| 884 | 884 | #torPreferences-builtinBridge-typeSelection radio label {
|
| 885 | - font-weight: 700;
|
|
| 885 | + font-weight: var(--font-weight-bold);
|
|
| 886 | 886 | }
|
| 887 | 887 | |
| 888 | 888 | /* Request bridge dialog */
|
| ... | ... | @@ -954,8 +954,8 @@ groupbox#torPreferences-bridges-group textarea { |
| 954 | 954 | }
|
| 955 | 955 | |
| 956 | 956 | #user-provide-bridge-textarea.invalid-input {
|
| 957 | - border-color: var(--in-content-danger-button-background);
|
|
| 958 | - outline-color: var(--in-content-danger-button-background);
|
|
| 957 | + border-color: var(--outline-color-error);
|
|
| 958 | + outline-color: var(--outline-color-error);
|
|
| 959 | 959 | }
|
| 960 | 960 | |
| 961 | 961 | #user-provide-bridge-error-message {
|
| ... | ... | @@ -1047,7 +1047,7 @@ groupbox#torPreferences-bridges-group textarea { |
| 1047 | 1047 | flex-direction: column;
|
| 1048 | 1048 | padding: var(--space-small);
|
| 1049 | 1049 | margin-block-end: 4px;
|
| 1050 | - border: 1px solid var(--in-content-box-border-color);
|
|
| 1050 | + border: 1px solid var(--border-color);
|
|
| 1051 | 1051 | border-radius: var(--border-radius-small);
|
| 1052 | 1052 | font-size: var(--font-size-small);
|
| 1053 | 1053 | }
|
| ... | ... | @@ -2,7 +2,8 @@ |
| 2 | 2 | display: flex;
|
| 3 | 3 | align-items: center;
|
| 4 | 4 | gap: 0.5em;
|
| 5 | - border-radius: var(--urlbar-icon-border-radius);
|
|
| 5 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 6 | + border-radius: var(--urlbar-inner-border-radius);
|
|
| 6 | 7 | --tor-urlbar-button-inline-padding: 8px;
|
| 7 | 8 | padding-inline: var(--tor-urlbar-button-inline-padding);
|
| 8 | 9 | margin: 0;
|
| ... | ... | @@ -17,6 +17,9 @@ |
| 17 | 17 | }
|
| 18 | 18 | }
|
| 19 | 19 | |
| 20 | +/* stylelint-disable stylelint-plugin-mozilla/use-border-color-tokens */
|
|
| 21 | +/* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 22 | + |
|
| 20 | 23 | #tabbrowser-tabbox.letterboxing {
|
| 21 | 24 | --letterboxing-bgcolor: var(--background-color-canvas);
|
| 22 | 25 | /* Match the border radius used for the sidebar. */
|
| ... | ... | @@ -35,18 +35,18 @@ body:not(.loaded) { |
| 35 | 35 | .breadcrumb-item {
|
| 36 | 36 | align-items: center;
|
| 37 | 37 | cursor: pointer;
|
| 38 | - color: var(--in-content-text-color);
|
|
| 38 | + color: var(--text-color);
|
|
| 39 | 39 | border-radius: var(--border-radius-small);
|
| 40 | 40 | }
|
| 41 | 41 | |
| 42 | 42 | .breadcrumb-item:hover {
|
| 43 | 43 | color: var(--color-accent-primary);
|
| 44 | - background-color: var(--in-content-button-background-hover);
|
|
| 44 | + background-color: var(--button-background-color-hover);
|
|
| 45 | 45 | }
|
| 46 | 46 | |
| 47 | 47 | .breadcrumb-item:active {
|
| 48 | 48 | color: var(--color-accent-primary-active);
|
| 49 | - background-color: var(--in-content-button-background-active);
|
|
| 49 | + background-color: var(--button-background-color-active);
|
|
| 50 | 50 | }
|
| 51 | 51 | |
| 52 | 52 | .breadcrumb-separator {
|
| ... | ... | @@ -74,23 +74,11 @@ body:not(.loaded) { |
| 74 | 74 | .breadcrumb-item.disabled,
|
| 75 | 75 | .breadcrumb-item.disabled:hover,
|
| 76 | 76 | .breadcrumb-item.disabled:active {
|
| 77 | - color: var(--in-content-text-color);
|
|
| 77 | + color: var(--text-color);
|
|
| 78 | 78 | opacity: 0.4;
|
| 79 | 79 | cursor: default;
|
| 80 | 80 | }
|
| 81 | 81 | |
| 82 | -.breadcrumb-item.error {
|
|
| 83 | - color: var(--in-content-danger-button-background);
|
|
| 84 | -}
|
|
| 85 | - |
|
| 86 | -.breadcrumb-item.error:hover {
|
|
| 87 | - color: var(--in-content-danger-button-background-hover);
|
|
| 88 | -}
|
|
| 89 | - |
|
| 90 | -.breadcrumb-item.error:active {
|
|
| 91 | - color: var(--in-content-danger-button-background-active);
|
|
| 92 | -}
|
|
| 93 | - |
|
| 94 | 82 | .breadcrumb-item.hidden,
|
| 95 | 83 | .breadcrumb-separator.hidden {
|
| 96 | 84 | display: none;
|
| ... | ... | @@ -157,7 +145,7 @@ form#locationDropdown { |
| 157 | 145 | form#locationDropdown select {
|
| 158 | 146 | max-width: 100%;
|
| 159 | 147 | margin-inline: 0;
|
| 160 | - font-weight: 700;
|
|
| 148 | + font-weight: var(--font-weight-bold);
|
|
| 161 | 149 | }
|
| 162 | 150 | |
| 163 | 151 | :root {
|
| ... | ... | @@ -188,7 +176,7 @@ form#locationDropdown select { |
| 188 | 176 | #progressBarBackground {
|
| 189 | 177 | width: 100%;
|
| 190 | 178 | height: var(--progress-bar-height);
|
| 191 | - background: var(--in-content-box-info-background);
|
|
| 179 | + background: var(--background-color-box-info);
|
|
| 192 | 180 | }
|
| 193 | 181 | |
| 194 | 182 | #progressBackground {
|
| ... | ... | @@ -199,6 +187,7 @@ form#locationDropdown select { |
| 199 | 187 | background-image: linear-gradient(var(--progressbar-shadow-start), var(--background-color-canvas) 100%), var(--progressbar-gradient);
|
| 200 | 188 | animation: var(--progress-animation);
|
| 201 | 189 | filter: blur(5px);
|
| 190 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 202 | 191 | border-end-end-radius: 33px;
|
| 203 | 192 | }
|
| 204 | 193 | |
| ... | ... | @@ -206,8 +195,10 @@ form#locationDropdown select { |
| 206 | 195 | z-index: 2;
|
| 207 | 196 | width: var(--progress-percent);
|
| 208 | 197 | height: var(--progress-bar-height);
|
| 198 | + /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 209 | 199 | border-start-end-radius: calc(var(--progress-bar-height) / 2);
|
| 210 | 200 | border-end-end-radius: calc(var(--progress-bar-height) / 2);
|
| 201 | + /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
| 211 | 202 | background-image: var(--progressbar-gradient);
|
| 212 | 203 | animation: var(--progress-animation);
|
| 213 | 204 | }
|
| ... | ... | @@ -306,7 +297,7 @@ body.android { |
| 306 | 297 | color: var(--android-dark-text-primary);
|
| 307 | 298 | background: linear-gradient(194deg, #692e9d -0.93%, #393270 48.91%);
|
| 308 | 299 | font: menu;
|
| 309 | - font-size: 14px;
|
|
| 300 | + font-size: var(--font-size-small);
|
|
| 310 | 301 | display: flex;
|
| 311 | 302 | }
|
| 312 | 303 | |
| ... | ... | @@ -332,13 +323,13 @@ body.android { |
| 332 | 323 | background-repeat: no-repeat;
|
| 333 | 324 | background-size: 40px;
|
| 334 | 325 | padding-top: 64px;
|
| 335 | - font-size: 22px;
|
|
| 326 | + font-size: var(--font-size-xlarge);
|
|
| 336 | 327 | line-height: 28px;
|
| 337 | 328 | }
|
| 338 | 329 | |
| 339 | 330 | .android h1 {
|
| 340 | 331 | font-weight: var(--font-weight);
|
| 341 | - font-size: 100%;
|
|
| 332 | + font-size: inherit;
|
|
| 342 | 333 | margin: 0 0 16px 0;
|
| 343 | 334 | }
|
| 344 | 335 | |
| ... | ... | @@ -367,6 +358,7 @@ body.android { |
| 367 | 358 | .android select {
|
| 368 | 359 | background: transparent;
|
| 369 | 360 | border: none;
|
| 361 | + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
|
|
| 370 | 362 | border-bottom: 1px solid var(--android-dark-text-primary);
|
| 371 | 363 | color: var(--android-dark-text-primary);
|
| 372 | 364 | display: block;
|
| ... | ... | @@ -396,8 +388,8 @@ body:not(.android) #connectButtonContainer { |
| 396 | 388 | width: 100%;
|
| 397 | 389 | margin: 4px 0;
|
| 398 | 390 | padding: 11px 30px;
|
| 399 | - font-size: 14px;
|
|
| 400 | - font-weight: 500;
|
|
| 391 | + font-size: var(--font-size-small);
|
|
| 392 | + font-weight: var(--font-weight);
|
|
| 401 | 393 | border: none;
|
| 402 | 394 | border-radius: var(--border-radius-small);
|
| 403 | 395 | }
|
| ... | ... | @@ -20,7 +20,6 @@ const BreadcrumbStatus = Object.freeze({ |
| 20 | 20 | Disabled: "disabled",
|
| 21 | 21 | Default: "default",
|
| 22 | 22 | Active: "active",
|
| 23 | - Error: "error",
|
|
| 24 | 23 | });
|
| 25 | 24 | |
| 26 | 25 | /**
|
| ... | ... | @@ -257,7 +256,6 @@ class AboutTorConnect { |
| 257 | 256 | elem.classList.remove(BreadcrumbStatus.Hidden);
|
| 258 | 257 | elem.classList.remove(BreadcrumbStatus.Disabled);
|
| 259 | 258 | elem.classList.remove(BreadcrumbStatus.Active);
|
| 260 | - elem.classList.remove(BreadcrumbStatus.Error);
|
|
| 261 | 259 | if (status !== "") {
|
| 262 | 260 | elem.classList.add(status);
|
| 263 | 261 | }
|