tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

App.css (2139B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 /*
      6 * The current layout of about:debugging is
      7 *
      8 *  +-------------+-------------------------------+
      9 *  |   Sidebar   | Page (Runtime or Connect)     |
     10 *  |   (240px)   |                               |
     11 *  |             |                               |
     12 *  +-------------+-------------------------------+
     13 *
     14 * Some of the values (font sizes, widths, etc.) are the same as
     15 * about:preferences, which uses the shared common.css
     16 */
     17 
     18 .app {
     19  /* from common */
     20  --sidebar-width: 280px;
     21  --app-top-padding: 70px;
     22  --app-bottom-padding: 40px;
     23  --app-left-padding: 32px;
     24  --app-right-padding: 32px;
     25 
     26  box-sizing: border-box;
     27  width: 100vw;
     28  height: 100vh;
     29  overflow: hidden; /* we don't want the sidebar to scroll, only the main content */
     30 
     31  display: grid;
     32  grid-column-gap: 40px;
     33  grid-template-columns: var(--sidebar-width) auto;
     34 
     35  font-size: var(--base-font-size);
     36  font-weight: var(--base-font-weight, normal);
     37  line-height: var(--base-line-height);
     38 }
     39 
     40 .app__sidebar {
     41  padding-block-start: var(--app-top-padding);
     42  padding-block-end: var(--app-bottom-padding);
     43  padding-inline-start: var(--app-left-padding);
     44 }
     45 
     46 .app__content {
     47  /* we want to scroll only the main content, not the sidebar */
     48  overflow-y: auto;
     49 
     50  /* padding will give space for card shadow to appear and
     51     margin will correct the alignment */
     52  margin-inline-start: calc(var(--base-unit) * -1);
     53  padding-inline: var(--base-unit);
     54  padding-block-start: var(--app-top-padding);
     55 }
     56 
     57 /* Workaround for Gecko clipping the padding-bottom of a scrollable container;
     58   we create a block to act as the bottom padding instead. */
     59 .app__content::after {
     60  content: "";
     61  display: block;
     62  height: var(--app-bottom-padding);
     63 }
     64 
     65 .page {
     66  max-width: var(--page-main-content-width);
     67  min-width: min-content;
     68  font-size: var(--body-20-font-size);
     69  font-weight: var(--body-20-font-weight, normal);
     70  padding-inline-end: var(--app-right-padding);
     71 }