Verified Commit 1375a841 authored by henry's avatar henry Committed by boklm
Browse files

fixup! TB 7494: Create local home page for TBB. 

TB 44406: Use size tokens.
parent c5aef970

browser/components/abouttor/content/aboutTor.css

+60 −71
Original line number Diff line number Diff line 
@import url("chrome://global/skin/tor-colors.css");

@import url("chrome://global/skin/onion-pattern.css");



body {
@@ -23,7 +22,7 @@ body { 
    /* NOTE: "form" will be given a maximum width of --form-max-width. */

    / 1fr minmax(max-content, var(--form-max-width)) 1fr;

  justify-items: center;

  padding-inline: 20px;

  padding-inline: var(--space-large);

}



body:not(.initialized) {
@@ -37,12 +36,10 @@ h1 { 
  grid-area: heading;

  display: flex;

  align-items: center;

  gap: 16px;

  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */

  gap: var(--space-large);

  font-size: 40px;

  margin-block-start: 0;

  margin-block-end: 40px;

  margin-inline: 20px;

  margin-block-end: var(--space-small);

}



#tor-browser-logo {
@@ -61,17 +58,17 @@ body:not(.is-testing) #tor-browser-home-heading-testing { 
#tor-check {

  grid-area: tor-check;

  display: flex;

  gap: 10px;

  gap: var(--space-small);

  align-items: center;

  padding-inline: 23px;

  padding-block: 11px;

  padding-inline: var(--space-xlarge);

  padding-block: var(--space-medium);

  border-radius: var(--border-radius-medium);

  margin-block-start: 0;

  margin-block-end: 30px;

  margin-block-start: var(--space-xxlarge);

  margin-block-end: 0;

}



.tor-home-box {

  border: 1px solid var(--border-color);

  border: var(--border-width) solid var(--border-color);

  background-color: var(--background-color-box-info);

  max-width: var(--form-max-width);

  width: -moz-available;
@@ -84,8 +81,8 @@ body:not(.show-tor-check) #tor-check { 


#tor-check-icon {

  flex: 0 0 auto;

  width: 16px;

  height: 16px;

  width: var(--icon-size);

  height: var(--icon-size);

  -moz-context-properties: fill;

  fill: currentColor;

}
@@ -97,31 +94,31 @@ body:not(.show-tor-check) #tor-check { 
.home-message {

  grid-area: message;

  text-align: center;

  margin-block: 1.6em;

  margin-block: var(--space-xlarge);

}



.message-emoji {

  height: 1em;

  height: var(--icon-size);

  vertical-align: sub;

  margin-inline-end: 0.3em;

  margin-inline-end: var(--space-xsmall);

}



#search-form {

  grid-area: form;

  /* Occupy the entire "form" block. */

  justify-self: stretch;

  margin-block-start: var(--space-xxlarge);

  background: var(--background-color-canvas);

  display: flex;

  align-items: stretch;

  /* Padding between elements. */

  --form-padding: 12px;

  --form-border-width: 1px;

  --form-padding: var(--space-medium);

  --form-border-width: var(--border-width);

  /* Padding between elements and the parent's border edge. */

  --form-outer-padding: calc(var(--form-padding) - var(--form-border-width));

  --form-radius-container: var(--border-radius-medium);

  --form-radius: calc(var(--form-radius-container) - var(--form-border-width));

  --logo-size: 30px;

  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */

  --logo-size: var(--icon-size-xlarge);

  border-radius: var(--form-radius-container);

  border-width: var(--form-border-width);

  border-style: solid;
@@ -151,12 +148,10 @@ body:not(.show-tor-check) #tor-check { 
  padding-inline-end: var(--form-padding);

  padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */);

  /* Make sure clickable area does not extend beyond the form's border. */

  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */

  border-start-start-radius: var(--form-radius);

  border-end-start-radius: var(--form-radius);

  border-start-end-radius: 0;

  border-end-end-radius: 0;

  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */

  /* Focus and outline styling move to the parent. */

  background: none;

  border: none;
@@ -168,15 +163,13 @@ body:not(.show-tor-check) #tor-check { 
  align-content: center;

  padding-block: var(--form-outer-padding);

  padding-inline-end: var(--form-outer-padding);

  /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */

  border-start-end-radius: var(--form-radius);

  border-end-end-radius: var(--form-radius);

  border-start-start-radius: 0;

  border-end-start-radius: 0;

  /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */

  padding-inline-start: 0;

  /* Non-clickable gap between input and toggle. */

  margin-inline-start: 0.5em;

  margin-inline-start: var(--space-small);

}



#survey {
@@ -188,11 +181,10 @@ body:not(.show-tor-check) #tor-check { 
    ". buttons buttons" min-content

    / min-content 1fr min-content;

  border-radius: var(--border-radius-small);

  /* Remove 1px from padding for border. */

  padding-block: 3px 11px;

  padding-inline: 15px 3px;

  gap: 8px;

  margin-block-end: 1.6em;

  padding-block: var(--space-xsmall) var(--space-medium);

  padding-inline: var(--space-large) var(--space-xsmall);

  gap: var(--space-small);

  margin-block-end: var(--space-xlarge);

}



body:not(.show-survey) #survey {
@@ -205,9 +197,9 @@ body:not(.show-survey) #survey { 


#survey-icon {

  grid-area: icon;

  width: 24px;

  height: 24px;

  padding: 8px;

  width: var(--icon-size-large);

  height: var(--icon-size-large);

  padding: var(--space-small);

  border-radius: var(--border-radius-circle);

}
@@ -218,18 +210,18 @@ body:not(.show-survey) #survey { 


#survey-icon,

#survey-heading {

  margin-block-start: 8px;

  margin-block-start: var(--space-small);

}



#survey-body {

  grid-area: body;

  margin-block-end: 8px;

  margin-block-end: var(--space-small);

}



#survey-buttons {

  grid-area: buttons;

  display: flex;

  gap: 8px;

  gap: var(--space-small);

}



#survey-buttons > * {
@@ -248,7 +240,7 @@ body:not(.show-survey) #survey { 
  /* On dark background */

  :root {

    background-color: #2c0449;

    --focus-outline-color: var(--tor-focus-outline-color-dark);

    --focus-outline-color: var(--focus-outline-color-tor-dark);

    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);

    --onion-pattern-stroke-color: #3e0663;

    --onion-pattern-fill-color: #350556;
@@ -271,9 +263,9 @@ body:not(.show-survey) #survey { 
    --button-text-color-ghost: var(--button-text-color);

    --button-text-color-ghost-hover: var(--button-text-color);

    --button-text-color-ghost-active: var(--button-text-color);

    --link-color: var(--tor-link-color-dark);

    --link-color-hover: var(--tor-link-color-hover-dark);

    --link-color-active: var(--tor-link-color-active-dark);

    --link-color: var(--link-color-tor-dark);

    --link-color-hover: var(--link-color-tor-hover-dark);

    --link-color-active: var(--link-color-tor-active-dark);

  }



  #search-form {
@@ -286,8 +278,7 @@ body:not(.show-survey) #survey { 
  #search-form:has(#search-input:focus-visible) {

    /* Use a light-themed inner-border to contrast with the dark-themed

     * focus outline. */

    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */

    border-color: var(--tor-focus-outline-color-light);

    border-color: var(--focus-outline-color-tor-light);

  }



  #search-form.onionized-search:has(#search-input:not(:focus-visible)) {
@@ -298,16 +289,16 @@ body:not(.show-survey) #survey { 


  /* Light background. */

  #search-form > * {

    --focus-outline-color: var(--tor-focus-outline-color-light);

    --focus-outline-color: var(--focus-outline-color-tor-light);

    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);

    /* Variables used for --toggle- variables. */

    --color-accent-primary: var(--tor-button-background-color-light);

    --color-accent-primary-hover: var(--tor-button-background-color-hover-light);

    --color-accent-primary-active: var(--tor-button-background-color-active-light);

    --color-accent-primary: var(--button-background-color-tor-light);

    --color-accent-primary-hover: var(--button-background-color-tor-hover-light);

    --color-accent-primary-active: var(--button-background-color-tor-active-light);

  }



  #search-form.onionized-search #onionize-toggle {

    color: var(--tor-link-color-light);

    color: var(--link-color);

  }



  #survey {
@@ -321,9 +312,9 @@ body:not(.show-survey) #survey { 


  #survey-launch {

    color: var(--text-color-light);

    --button-background-color-primary: var(--tor-button-background-color-dark);

    --button-background-color-primary-hover: var(--tor-button-background-color-hover-dark);

    --button-background-color-primary-active: var(--tor-button-background-color-active-dark);

    --button-background-color-primary: var(--button-background-color-tor-dark);

    --button-background-color-primary-hover: var(--button-background-color-tor-hover-dark);

    --button-background-color-primary-active: var(--button-background-color-tor-active-dark);

  }

}
@@ -342,7 +333,7 @@ body.show-yec h1 { 
#yec-banner {

  grid-area: heading;

  border-radius: var(--border-radius-medium);

  border: 1px solid var(--border-color);

  border: var(--border-width) solid var(--border-color);

  display: grid;

  grid-template:

    "yec-heading yec-image" auto
@@ -356,10 +347,10 @@ body.show-yec h1 { 
  padding-inline: 47px 47px;

  box-sizing: border-box;

  max-width: 850px;

  margin-block-end: 40px;

  margin-block-end: var(--space-small);

  /* Position for the close button. */

  position: relative;

  gap: 0 24px;

  gap: 0 var(--space-xlarge);

}



#yec-image {
@@ -371,12 +362,12 @@ body.show-yec h1 { 
   * contrast or forced color theme. */

  background-color: var(--yec-image-background);

  border-radius: var(--border-radius-medium);

  padding: 4px;

  padding: var(--space-xsmall);

  height: 196px;

  border: 1px solid transparent;

  border: var(--border-width) solid transparent;

  /* Remove border and padding from the layout size. These parts are only

   * visible in contrast or forced color themes. */

  margin: -5px;

  margin: calc(-1 * (var(--border-width) + var(--space-xsmall)));

  /* Do not let forced colors ignore the background-color, which is needed to

   * see the drawing. */

  forced-color-adjust: none;
@@ -388,15 +379,14 @@ body.show-yec h1 { 


#yec-heading {

  grid-area: yec-heading;

  margin-block: 0 16px;

  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */

  margin-block: 0 var(--space-large);

  font-size: 64px;

  font-weight: var(--font-weight);

}



#yec-body {

  grid-area: yec-body;

  margin-block: 0 12px;

  margin-block: 0 var(--space-medium);

}



#yec-body-highlight {
@@ -405,7 +395,7 @@ body.show-yec h1 { 


#yec-matching {

  grid-area: yec-matching;

  margin-block: 0 32px;

  margin-block: 0 var(--space-xxlarge);

}



#yec-donate-link {
@@ -414,7 +404,7 @@ body.show-yec h1 { 
  /* Style like a button. */

  font-weight: var(--button-font-weight);

  color: var(--button-text-color);

  border: 1px solid var(--button-border-color);

  border: var(--border-width) solid var(--button-border-color);

  border-radius: var(--button-border-radius);

  background-color: var(--button-background-color);

  padding: var(--button-padding);
@@ -423,7 +413,7 @@ body.show-yec h1 { 
  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 8px;

  gap: var(--space-small);

  white-space: nowrap;

}
@@ -450,8 +440,8 @@ body.show-yec h1 { 


#yec-close {

  position: absolute;

  inset-block-start: 16px;

  inset-inline-end: 16px;

  inset-block-start: var(--space-large);

  inset-inline-end: var(--space-large);

}



@media (max-width: 768px) {
@@ -464,11 +454,11 @@ body.show-yec h1 { 
      "yec-matching" auto

      "yec-donate" min-content

      / 1fr;

    padding-block: 31px 39px;

    padding-inline: 15px;

    padding-block: var(--space-xxlarge);

    padding-inline: var(--space-large);

    /* Match max-width of the form. */

    max-width: var(--form-max-width);

    margin-block-end: 32px;

    margin-block-end: var(--space-xxlarge);

  }



  #yec-image {
@@ -476,18 +466,17 @@ body.show-yec h1 { 
  }



  #yec-heading {

    margin-block-start: 16px;

    margin-block-start: var(--space-large);

    text-align: center;

    text-wrap-style: balance;

  }



  #yec-heading {

    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */

    font-size: 50px;

  }



  #yec-matching {

    margin-block-end: 16px;

    margin-block-end: var(--space-large);

  }



  #yec-donate-link {