tor-browser

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

DebugTargetItem.css (3262B)

      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 debug target item is
      7 *
      8 *  +--------+-----------------------------+----------------+
      9 *  |        | Name                        |                |
     10 *  | [Icon] |-----------------------------| Action button  |
     11 *  |        | Subname                     |                |
     12 *  +--------+-----------------------------+----------------+
     13 *  | Detail                                                |
     14 *  |                                                       |
     15 *  +-------------------------------------------------------+
     16 *  | Additional actions                                    |
     17 *  |                                                       |
     18 *  +-------------------------------------------------------+
     19 */
     20 .debug-target-item {
     21  display: grid;
     22  grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
     23  grid-template-rows: 1fr minmax(0, auto) auto;
     24  grid-column-gap: calc(var(--base-unit) * 2);
     25  grid-template-areas:
     26    "icon               name               action"
     27    "icon               subname            action"
     28    "detail             detail             detail"
     29    "additional_actions additional_actions additional_actions";
     30  margin-block-end: calc(var(--base-unit) * 4);
     31 
     32  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
     33  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
     34 }
     35 
     36 .debug-target-item__icon {
     37  align-self: center;
     38  grid-area: icon;
     39  margin-inline-start: calc(var(--base-unit) * 3);
     40  width: 100%;
     41 
     42  -moz-context-properties: fill;
     43  fill: currentColor;
     44 }
     45 
     46 .debug-target-item__name {
     47  align-self: center;
     48  grid-area: name;
     49  font-size: var(--body-20-font-size);
     50  font-weight: var(--body-20-font-weight-bold, var(--font-weight-bold));
     51  line-height: 1.5;
     52  margin-inline-start: calc(var(--base-unit) * 3);
     53 }
     54 
     55 .debug-target-item__action {
     56  grid-area: action;
     57  align-self: center;
     58  margin-inline-end: calc(var(--base-unit) * 2);
     59 }
     60 
     61 .debug-target-item__additional_actions {
     62  grid-area: additional_actions;
     63  border-top: 1px solid var(--card-separator-color);
     64  margin-block-start: calc(var(--base-unit) * 2);
     65  padding-block-start: calc(var(--base-unit) * 2);
     66  padding-inline-end: calc(var(--base-unit) * 2);
     67 }
     68 
     69 .debug-target-item__detail {
     70  grid-area: detail;
     71  margin-block-start: calc(var(--base-unit) * 3);
     72 }
     73 
     74 .debug-target-item__detail--empty {
     75  margin-block-start: var(--base-unit);
     76 }
     77 
     78 .debug-target-item__messages {
     79  margin-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
     80 }
     81 
     82 .debug-target-item__subname {
     83  grid-area: subname;
     84  color: var(--secondary-text-color);
     85  font-size: var(--caption-20-font-size);
     86  font-weight: var(--caption-20-font-weight, normal);
     87  line-height: 1.5;
     88 }
     89 
     90 /* The subname is always LTR under the Tabs section,
     91   so check its parent's direction to set the correct margin. */
     92 .debug-target-item:dir(ltr) > .debug-target-item__subname {
     93  margin-left: calc(var(--base-unit) * 3);
     94 }
     95 
     96 .debug-target-item:dir(rtl) > .debug-target-item__subname {
     97  margin-right: calc(var(--base-unit) * 3);
     98 }