aboutTor.css (13953B)
1 @import url("chrome://global/skin/tor-colors.css"); 2 @import url("chrome://global/skin/onion-pattern.css"); 3 4 body { 5 margin: 0; 6 min-height: 100vh; 7 display: grid; 8 --form-max-width: 600px; 9 grid-template: 10 /* Start space: unfilled. */ 11 ". . ." 1fr 12 "heading heading heading" auto 13 "tor-check tor-check tor-check" auto 14 ". form ." min-content 15 "message message message" auto 16 "survey survey survey" auto 17 /* End space: unfilled. 18 * Reserve 150px for background image. 19 * NOTE: Since the body has "auto" height, the other "1fr" flex row will 20 * not shrink to zero, but will instead shrink to a minimum size of 21 * 75px = (150px * 1fr / 2fr) */ 22 ". . ." minmax(var(--onion-pattern-height), 2fr) 23 /* NOTE: "form" will be given a maximum width of --form-max-width. */ 24 / 1fr minmax(max-content, var(--form-max-width)) 1fr; 25 justify-items: center; 26 padding-inline: 20px; 27 } 28 29 body:not(.initialized) { 30 /* Hide the components before the page is initialized. 31 * NOTE: The layout can still be adjusted or measured in this time since we 32 * use visibility rather than `display: none`. */ 33 visibility: hidden; 34 } 35 36 h1 { 37 grid-area: heading; 38 display: flex; 39 align-items: center; 40 gap: 16px; 41 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */ 42 font-size: 40px; 43 margin-block-start: 0; 44 margin-block-end: 40px; 45 margin-inline: 20px; 46 } 47 48 #tor-browser-logo { 49 height: 80px; 50 flex: 0 0 auto; 51 } 52 53 body.is-testing #tor-browser-home-heading-stable { 54 display: none; 55 } 56 57 body:not(.is-testing) #tor-browser-home-heading-testing { 58 display: none; 59 } 60 61 #tor-check { 62 grid-area: tor-check; 63 display: flex; 64 gap: 10px; 65 align-items: center; 66 padding-inline: 23px; 67 padding-block: 11px; 68 border-radius: var(--border-radius-medium); 69 margin-block-start: 0; 70 margin-block-end: 30px; 71 } 72 73 .tor-home-box { 74 border: 1px solid var(--border-color); 75 background-color: var(--background-color-box-info); 76 max-width: var(--form-max-width); 77 width: -moz-available; 78 box-sizing: border-box; 79 } 80 81 body:not(.show-tor-check) #tor-check { 82 display: none; 83 } 84 85 #tor-check-icon { 86 flex: 0 0 auto; 87 width: 16px; 88 height: 16px; 89 -moz-context-properties: fill; 90 fill: currentColor; 91 } 92 93 .home-message:not(.shown-message) { 94 display: none; 95 } 96 97 .home-message { 98 grid-area: message; 99 text-align: center; 100 margin-block: 1.6em; 101 } 102 103 .message-emoji { 104 height: 1em; 105 vertical-align: sub; 106 margin-inline-end: 0.3em; 107 } 108 109 #search-form { 110 grid-area: form; 111 /* Occupy the entire "form" block. */ 112 justify-self: stretch; 113 background: var(--background-color-canvas); 114 display: flex; 115 align-items: stretch; 116 /* Padding between elements. */ 117 --form-padding: 12px; 118 --form-border-width: 1px; 119 /* Padding between elements and the parent's border edge. */ 120 --form-outer-padding: calc(var(--form-padding) - var(--form-border-width)); 121 --form-radius-container: var(--border-radius-medium); 122 --form-radius: calc(var(--form-radius-container) - var(--form-border-width)); 123 --logo-size: 30px; 124 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */ 125 border-radius: var(--form-radius-container); 126 border-width: var(--form-border-width); 127 border-style: solid; 128 border-color: var(--border-color); 129 } 130 131 #search-form:has(#search-input:focus-visible) { 132 outline: var(--focus-outline); 133 } 134 135 #dax-logo { 136 width: var(--logo-size); 137 flex: 0 0 auto; 138 align-self: center; 139 margin-inline-start: var(--form-outer-padding); 140 /* Does not occupy any layout width. */ 141 margin-inline-end: calc(-1 * (var(--logo-size) + var(--form-outer-padding))); 142 } 143 144 #search-input { 145 flex: 1 0 auto; 146 min-width: 200px; 147 min-height: var(--logo-size); 148 box-sizing: content-box; 149 margin: 0; 150 padding-block: var(--form-outer-padding); 151 padding-inline-end: var(--form-padding); 152 padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */); 153 /* Make sure clickable area does not extend beyond the form's border. */ 154 /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */ 155 border-start-start-radius: var(--form-radius); 156 border-end-start-radius: var(--form-radius); 157 border-start-end-radius: 0; 158 border-end-end-radius: 0; 159 /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */ 160 /* Focus and outline styling move to the parent. */ 161 background: none; 162 border: none; 163 outline: none; 164 } 165 166 #onionize-toggle { 167 flex: 0 0 auto; 168 align-content: center; 169 padding-block: var(--form-outer-padding); 170 padding-inline-end: var(--form-outer-padding); 171 /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */ 172 border-start-end-radius: var(--form-radius); 173 border-end-end-radius: var(--form-radius); 174 border-start-start-radius: 0; 175 border-end-start-radius: 0; 176 /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */ 177 padding-inline-start: 0; 178 /* Non-clickable gap between input and toggle. */ 179 margin-inline-start: 0.5em; 180 } 181 182 #survey { 183 grid-area: survey; 184 display: grid; 185 grid-template: 186 "icon heading close" min-content 187 "icon body close" auto 188 ". buttons buttons" min-content 189 / min-content 1fr min-content; 190 border-radius: var(--border-radius-small); 191 /* Remove 1px from padding for border. */ 192 padding-block: 3px 11px; 193 padding-inline: 15px 3px; 194 gap: 8px; 195 margin-block-end: 1.6em; 196 } 197 198 body:not(.show-survey) #survey { 199 display: none; 200 } 201 202 #survey > * { 203 margin: 0; 204 } 205 206 #survey-icon { 207 grid-area: icon; 208 width: 24px; 209 height: 24px; 210 padding: 8px; 211 border-radius: var(--border-radius-circle); 212 } 213 214 #survey-heading { 215 grid-area: heading; 216 font-size: inherit; 217 } 218 219 #survey-icon, 220 #survey-heading { 221 margin-block-start: 8px; 222 } 223 224 #survey-body { 225 grid-area: body; 226 margin-block-end: 8px; 227 } 228 229 #survey-buttons { 230 grid-area: buttons; 231 display: flex; 232 gap: 8px; 233 } 234 235 #survey-buttons > * { 236 flex: 0 0 auto; 237 margin: 0; 238 } 239 240 #survey-close { 241 grid-area: close; 242 } 243 244 @media not ((prefers-contrast) or (forced-colors)) { 245 /* Force the page to follow the same Tor theme, regardless of 246 * prefers-color-scheme. */ 247 248 /* On dark background */ 249 :root { 250 background-color: #2c0449; 251 --focus-outline-color: var(--tor-focus-outline-color-dark); 252 --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); 253 --onion-pattern-stroke-color: #3e0663; 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); 259 } 260 261 #tor-check { 262 background-color: #1f0333; 263 border-color: transparent; 264 } 265 266 body > :not(#search-form) { 267 color: var(--text-color-dark); 268 --button-text-color: currentColor; 269 --button-text-color-hover: var(--button-text-color); 270 --button-text-color-active: var(--button-text-color); 271 --button-text-color-ghost: var(--button-text-color); 272 --button-text-color-ghost-hover: var(--button-text-color); 273 --button-text-color-ghost-active: var(--button-text-color); 274 --link-color: var(--tor-link-color-dark); 275 --link-color-hover: var(--tor-link-color-hover-dark); 276 --link-color-active: var(--tor-link-color-active-dark); 277 } 278 279 #search-form { 280 /* Use light color for background and moz-toggle shadow root. */ 281 color-scheme: light; 282 color: var(--text-color-light); 283 border-color: transparent; 284 } 285 286 #search-form:has(#search-input:focus-visible) { 287 /* Use a light-themed inner-border to contrast with the dark-themed 288 * focus outline. */ 289 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */ 290 border-color: var(--tor-focus-outline-color-light); 291 } 292 293 #search-form.onionized-search:has(#search-input:not(:focus-visible)) { 294 box-shadow: 295 0 4px 40px #9400ff66, 296 0 4px 16px #9400ff33; 297 } 298 299 /* Light background. */ 300 #search-form > * { 301 --focus-outline-color: var(--tor-focus-outline-color-light); 302 --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); 303 /* Variables used for --toggle- variables. */ 304 --color-accent-primary: var(--tor-button-background-color-light); 305 --color-accent-primary-hover: var(--tor-button-background-color-hover-light); 306 --color-accent-primary-active: var(--tor-button-background-color-active-light); 307 } 308 309 #search-form.onionized-search #onionize-toggle { 310 color: var(--tor-link-color-light); 311 } 312 313 #survey { 314 background-color: #3d1559; 315 border-color: transparent; 316 } 317 318 #survey-icon { 319 background-color: #00000040; 320 } 321 322 #survey-launch { 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); 327 } 328 } 329 330 /* Year End Campaign (YEC). */ 331 body:not(.show-yec) #yec-banner { 332 display: none; 333 } 334 335 body.show-yec h1 { 336 /* Text of heading is still available to screen readers, but it does not 337 * contribute visually to the page or the body grid layout. */ 338 position: absolute; 339 clip-path: inset(50%); 340 } 341 342 #yec-banner { 343 grid-area: heading; 344 border-radius: var(--border-radius-medium); 345 border: 1px solid var(--border-color); 346 display: grid; 347 grid-template: 348 "yec-heading yec-image" auto 349 "yec-body yec-image" auto 350 "yec-matching yec-image" auto 351 "yec-donate yec-image" min-content 352 / 1fr min-content; 353 --yec-image-background: #1f0333; 354 /* Remove 1px from padding for border. */ 355 padding-block: 55px 55px; 356 padding-inline: 47px 47px; 357 box-sizing: border-box; 358 max-width: 850px; 359 margin-block-end: 40px; 360 /* Position for the close button. */ 361 position: relative; 362 gap: 0 24px; 363 } 364 365 #yec-image { 366 grid-area: yec-image; 367 align-self: center; 368 /* Center horizontally for small width layout. */ 369 justify-self: center; 370 /* background color, padding and border radius only stands out when using a 371 * contrast or forced color theme. */ 372 background-color: var(--yec-image-background); 373 border-radius: var(--border-radius-medium); 374 padding: 4px; 375 height: 196px; 376 border: 1px solid transparent; 377 /* Remove border and padding from the layout size. These parts are only 378 * visible in contrast or forced color themes. */ 379 margin: -5px; 380 /* Do not let forced colors ignore the background-color, which is needed to 381 * see the drawing. */ 382 forced-color-adjust: none; 383 } 384 385 #yec-image:dir(rtl) { 386 transform: scaleX(-1); 387 } 388 389 #yec-heading { 390 grid-area: yec-heading; 391 margin-block: 0 16px; 392 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */ 393 font-size: 64px; 394 font-weight: var(--font-weight); 395 } 396 397 #yec-body { 398 grid-area: yec-body; 399 margin-block: 0 12px; 400 } 401 402 #yec-body-highlight { 403 font-weight: var(--font-weight-bold); 404 } 405 406 #yec-matching { 407 grid-area: yec-matching; 408 margin-block: 0 32px; 409 } 410 411 #yec-donate-link { 412 grid-area: yec-donate; 413 justify-self: start; 414 /* Style like a button. */ 415 font-weight: var(--button-font-weight); 416 color: var(--button-text-color); 417 border: 1px solid var(--button-border-color); 418 border-radius: var(--button-border-radius); 419 background-color: var(--button-background-color); 420 padding: var(--button-padding); 421 box-sizing: border-box; 422 min-height: var(--button-min-height); 423 text-decoration: none; 424 display: flex; 425 align-items: center; 426 gap: 8px; 427 white-space: nowrap; 428 } 429 430 #yec-donate-link > * { 431 flex: 0 0 auto; 432 } 433 434 #yec-donate-link:hover { 435 background-color: var(--button-background-color-hover); 436 color: var(--button-text-color-hover); 437 border-color: var(--button-border-color-hover); 438 } 439 440 #yec-donate-link:hover:active { 441 background-color: var(--button-background-color-active); 442 color: var(--button-text-color-active); 443 border-color: var(--button-border-color-active); 444 } 445 446 #yec-donate-icon { 447 -moz-context-properties: fill; 448 fill: currentColor; 449 } 450 451 #yec-close { 452 position: absolute; 453 inset-block-start: 16px; 454 inset-inline-end: 16px; 455 } 456 457 @media (max-width: 768px) { 458 /* Small width layout. */ 459 #yec-banner { 460 grid-template: 461 "yec-image" min-content 462 "yec-heading" auto 463 "yec-body" auto 464 "yec-matching" auto 465 "yec-donate" min-content 466 / 1fr; 467 padding-block: 31px 39px; 468 padding-inline: 15px; 469 /* Match max-width of the form. */ 470 max-width: var(--form-max-width); 471 margin-block-end: 32px; 472 } 473 474 #yec-image { 475 height: 156px; 476 } 477 478 #yec-heading { 479 margin-block-start: 16px; 480 text-align: center; 481 text-wrap-style: balance; 482 } 483 484 #yec-heading { 485 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */ 486 font-size: 50px; 487 } 488 489 #yec-matching { 490 margin-block-end: 16px; 491 } 492 493 #yec-donate-link { 494 justify-self: center; 495 } 496 } 497 498 @media ((prefers-contrast) or (forced-colors)) and (prefers-color-scheme: dark) { 499 #yec-image { 500 /* Give the dark image a light border to separate from background. */ 501 border-color: var(--border-color); 502 } 503 } 504 505 @media not ((prefers-contrast) or (forced-colors)) { 506 #yec-banner { 507 border-color: transparent; 508 background-color: var(--yec-image-background); 509 --yec-text: #ffffff; 510 --yec-button-background: #b6e368; 511 --yec-button-background-hover: #d2f2a1; 512 --yec-button-background-active: #ecfcd8; 513 --yec-button-text: #15141a; 514 color: var(--yec-text); 515 } 516 517 #yec-body-highlight { 518 color: var(--yec-button-background); 519 } 520 521 #yec-donate-link { 522 --button-text-color: var(--yec-button-text); 523 --button-text-color-hover: var(--yec-button-text); 524 --button-text-color-active: var(--yec-button-text); 525 --button-background-color: var(--yec-button-background); 526 --button-background-color-hover: var(--yec-button-background-hover); 527 --button-background-color-active: var(--yec-button-background-active); 528 } 529 }