chrome/skin/aboutTor.css

   1 /*
   2  * Copyright (c) 2019, The Tor Project, Inc.
   3  * See LICENSE for licensing information.
   4  *
   5  * vim: set sw=2 sts=2 ts=8 et syntax=css:
   6  */
   7
   8 :root {
   9   --abouttor-link-color: #e98346;
  10   --abouttor-donate-button-bg: #efb149;
  11   --abouttor-donate-button-bg-hover: #e5b6e3;
  12   --abouttor-donate-button-bg-active: #b28db0;
  13   --abouttor-donate-button-color: #0C0C0D;
  14   --abouttor-text-color: #faf5df;
  15   --abouttor-bg-toron-color: #05161c;
  16   --abouttor-bg-toroff-color: #A4000F;
  17   --onion-opacity: 0.2;
  18   --onion-color: #fff;
  19   --onion-radius: 75px;
  20 }
  21
  22 * {
  23   padding: 0px;
  24   margin: 0px;
  25 }
  26
  27 html {
  28   height: 100%;
  29 }
  30
  31 body {
  32   display: flex;
  33   flex-direction: column;
  34   justify-content: space-between;
  35   width: 100%;
  36   height: 100%;
  37   margin: 0px auto;
  38   padding: 0px 0px;
  39   font-family: Helvetica, Arial, sans-serif;
  40   color: var(--abouttor-text-color);
  41   background-color: var(--abouttor-bg-toroff-color);
  42   background-attachment: fixed;
  43   background-size: 100% 100%;
  44 }
  45
  46 body[toron] {
  47   background-color: var(--abouttor-bg-toron-color);
  48 }
  49
  50 /* Hide the entire document by default to avoid showing the incorrect
  51  * Tor on / off status (that info must be retrieved from the chrome
  52  * process, which involves IPC when multiprocess mode is enabled). An
  53  * initialized attribute will be added as soon as the status is known.
  54  */
  55 body:not([initialized]) {
  56   display: none;
  57 }
  58
  59 .torcontent-container {
  60   margin: 80px 20px 28px 20px;
  61   display: flex;
  62   flex-direction: column;
  63 }
  64
  65 @media only screen and (min-width: 900px) {
  66   .torcontent-container {
  67     margin-inline: auto;
  68     max-width: 1000px;
  69   }
  70 }
  71
  72 #torbrowser-info {
  73   position: absolute;
  74   top: 16px;
  75   offset-inline-end: 16px;
  76   inset-inline-end: 16px;
  77   height: 36px;
  78   width: 200px;
  79 }
  80
  81 #torbrowser-info div {
  82   font-size: 14px;
  83   white-space: pre-wrap;
  84   text-align: end;
  85   margin-bottom: 6px;
  86 }
  87
  88 /* Hide "View Changelog" link if update channel is not release or alpha. */
  89 body:not([updatechannel="release"]):not([updatechannel="alpha"]) #torbrowser-changelog-link {
  90   display: none;
  91 }
  92
  93 a {
  94   color: var(--abouttor-link-color);
  95 }
  96
  97 #torstatus {
  98   display: flex;
  99   flex-direction: column;
 100   align-content: center;
 101   justify-content: flex-end;
 102   min-height: 92px;
 103 }
 104
 105 .top {
 106   white-space: nowrap;
 107 }
 108
 109 .header-container {
 110   display: flex;
 111   justify-content: center;
 112   max-width: 575px;
 113   margin-inline: auto;
 114 }
 115
 116 .header-container > div.header-layered {
 117   width: 70%;
 118   overflow: auto
 119 }
 120
 121 .header-container > div.header-layered > img {
 122   width: 100%;
 123   float: inline-start;
 124 }
 125
 126 .header-container > div > img#slogan-layer {
 127   margin-inline-start: -100%;
 128 }
 129 .torstatus-container {
 130   display: none;
 131   text-align: center;
 132 }
 133
 134 body[hasbeenupdated] .hideIfHasBeenUpdated,
 135 body[toron] .hideIfTorOn,
 136 body:not([toron]) .hideIfTorOff {
 137   display: none;
 138 }
 139
 140 body:not([hasbeenupdated]) .showIfHasBeenUpdated,
 141 body:not([showmanual]) .showForManual {
 142   display: none;
 143 }
 144
 145 .torstatus-container * {
 146   text-align: center;
 147 }
 148
 149 .top div.hideIfTorOff .heading1 {
 150   margin-top: 20px;
 151 }
 152
 153 .top .heading1 {
 154   font-size: 50px;
 155   font-weight: 300;
 156   margin-bottom: 5px;
 157 }
 158
 159 .top .heading2 {
 160   font-size: 15px;
 161   margin-bottom: 20px;
 162 }
 163
 164 #donateMessageBox {
 165   max-width: 730px;
 166   margin-top: 2em;
 167   margin-inline: auto;
 168   display: flex;
 169   flex-direction: row;
 170   flex-wrap: nowrap;
 171   font-family: serif;
 172 }
 173
 174 #donateMessageBox > * {
 175   width: 50%;
 176 }
 177
 178 #motto {
 179   /* dynamically scale motto text based on window width */
 180   font-size: clamp(24px, calc(100vw / 768 * 36) , 36px);
 181   line-height: clamp(32px, calc(100vw / 768 * 48) , 48px);
 182   flex-grow: 1;
 183   font-family: Corben, sans-serif;
 184   font-weight: 700;
 185 }
 186
 187 #donationBox {
 188   margin-inline-start: 2em;
 189   flex-grow: 1;
 190   display: flex;
 191   flex-direction: column;
 192 }
 193
 194 #donationMatch {
 195   font-size: 1.1em;
 196   font-family: Corben, sans-serif;
 197   font-weight: 400;
 198   line-height: 1.3em;
 199 }
 200
 201 #donateButton {
 202   margin-block-start: 1em;
 203   margin-inline-end: auto;
 204   background-color: var(--abouttor-donate-button-bg);
 205   outline-color: var(--abouttor-donate-button-bg);
 206   outline-style: none;
 207   color: var(--abouttor-donate-button-color);
 208   font-family: sans-serif;
 209   font-weight: bold;
 210   font-size: 0.9em;
 211   box-sizing: border-box;
 212   border-radius: 1.5em;
 213   padding-inline: 1.25em;
 214   text-decoration: none;
 215   max-height: 3em;
 216   height: 3em;
 217   line-height: 3em;
 218
 219
 220 }
 221
 222 #donateButton:hover {
 223   background-color: var(--abouttor-donate-button-bg-hover);
 224   outline-color: var(--abouttor-donate-button-bg-hover);
 225 }
 226
 227 #donateButton:active {
 228   background-color: var(--abouttor-donate-button-bg-active);
 229   outline-color: var(--abouttor-donate-button-bg-active);
 230 }
 231
 232 #donateButton:focus-visible {
 233   outline-style: dotted;
 234   outline-width: 1px;
 235   outline-offset: 2px;
 236 }
 237
 238 #bottom {
 239   margin-top: 10vh;
 240   margin-inline: auto;
 241   max-width: 730px;
 242 }
 243
 244 #bottom p {
 245   font-size: 10px;
 246   text-align: start;
 247   padding-bottom: 20px;
 248 }
 249
 250 #bottom p:last-child {
 251   padding-bottom: 0px;
 252 }
 253
 254 #bottom p.moreInfoLink {
 255   font-size: 15px;
 256 }
 257
 258 #bottom img.imageStyle {
 259   padding-inline-end: 0.5em;
 260   height: 1.5em;
 261   vertical-align: bottom;
 262   -moz-context-properties: fill;
 263   fill: white;
 264 }
 265
 266 /* Hide the linebreaks on large enough screens (desktops, laptops, and
 267  * tablets).
 268  */
 269 @media only screen and (min-width: 768px) {
 270   #bottom br {
 271     display: none;
 272   }
 273 }
 274
 275 .searchbox form {
 276   max-width: 575px;
 277   width: auto;
 278   margin-block: 0;
 279   margin-inline: auto;
 280   text-align: left;
 281 }
 282
 283 .searchwrapper {
 284   display: flex;
 285   height: 46px;
 286   border: 1px solid black;
 287   border-radius: 8px;
 288   background-color: white;
 289 }
 290
 291 .searchlabel {
 292   height: auto;
 293   width: 50px;
 294   display: inline-block;
 295   background: url('dax-logo.svg') no-repeat center center;
 296   background-size: 30px 30px;
 297 }
 298
 299 #search-button {
 300   height: auto;
 301   width: 36px;
 302   border: 0;
 303   background: url('chrome://browser/skin/forward.svg') no-repeat center center;
 304   background-size: 16px 16px;
 305   cursor: pointer;
 306 }
 307
 308 #search-button:hover {
 309   background-color: rgba(12, 12, 13, 0.1);  /* same as Firefox's about:home */
 310 }
 311
 312 /* #search-text is the search input field */
 313 #search-text {
 314   flex: 1;
 315   border: none;
 316   padding: 4px 2px 5px 2px;
 317   margin: 0;
 318   font-size: 15px;
 319 }
 320
 321 #search-text:focus-visible {
 322   outline: none;
 323 }
 324
 325 #search-button:focus-visible {
 326   outline: 1px dotted black;
 327   outline-offset: -6px;
 328 }
 329
 330
 331 /*
 332  * Mobile specific css
 333  */
 334
 335 .torcontent-logo {
 336   display: none;
 337 }
 338
 339 body[mobile] #torbrowser-changelog-link,
 340 body[mobile] .searchbox,
 341 body[mobile] .top .heading2,
 342 body[mobile] #manual,
 343 body[mobile] #mission {
 344   display: none;
 345 }
 346
 347 body[mobile] .top {
 348   white-space: normal;
 349   margin-top: 0px !important;
 350 }
 351
 352 body[mobile] .torcontent-logo {
 353   display: block;
 354   margin-top: 20px;
 355   width: 50%;
 356   height: auto;
 357   margin-left: auto;
 358   margin-right: auto;
 359 }
 360
 361 body[mobile] .top .heading1 {
 362   font-size: 62px;
 363   line-height: 1.1
 364 }
 365
 366 body[mobile] .onion-pattern-container {
 367   flex: none;
 368   z-index: -1; /* ensure that circles do not block access to clickable links */
 369   position: absolute;
 370   bottom: 0px;
 371 }