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