From 2aa4a82499d4becd2284cdb482213d541b8804dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 28 Apr 2024 16:29:10 +0200 Subject: Adding upstream version 86.0.1. Signed-off-by: Daniel Baumann --- .../src/components/debugtarget/DebugTargetItem.css | 94 ++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css (limited to 'devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css') diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css new file mode 100644 index 0000000000..7711f04619 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css @@ -0,0 +1,94 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* + * The current layout of debug target item is + * + * +--------+-----------------------------+----------------+ + * | | Name | | + * | [Icon] |-----------------------------| Action button | + * | | Subname | | + * +--------+-----------------------------+----------------+ + * | Detail | + * | | + * +-------------------------------------------------------+ + * | Additional actions | + * | | + * +-------------------------------------------------------+ + */ +.debug-target-item { + display: grid; + grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content; + grid-template-rows: 1fr minmax(0, auto) auto; + grid-column-gap: calc(var(--base-unit) * 2); + grid-template-areas: "icon name action" + "icon subname action" + "detail detail detail" + "additional_actions additional_actions additional_actions"; + margin-block-end: calc(var(--base-unit) * 4); + + padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2); + padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2); +} + +.debug-target-item__icon { + align-self: center; + grid-area: icon; + margin-inline-start: calc(var(--base-unit) * 3); + width: 100%; +} + +.debug-target-item__name { + align-self: center; + grid-area: name; + font-size: var(--body-20-font-size); + font-weight: var(--body-20-font-weight-bold); + line-height: 1.5; + margin-inline-start: calc(var(--base-unit) * 3); +} + +.debug-target-item__action { + grid-area: action; + align-self: center; + margin-inline-end: calc(var(--base-unit) * 2); +} + +.debug-target-item__additional_actions { + grid-area: additional_actions; + border-top: 1px solid var(--grey-20); + margin-block-start: calc(var(--base-unit) * 2); + padding-block-start: calc(var(--base-unit) * 2); + padding-inline-end: calc(var(--base-unit) * 2); +} + +.debug-target-item__detail { + grid-area: detail; + margin-block-start: calc(var(--base-unit) * 3); +} + +.debug-target-item__detail--empty { + margin-block-start: var(--base-unit); +} + +.debug-target-item__messages { + margin-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2); +} + +.debug-target-item__subname { + grid-area: subname; + color: var(--grey-50); + font-size: var(--caption-20-font-size); + font-weight: var(--caption-20-font-weight); + line-height: 1.5; +} + +/* The subname is always LTR under the Tabs section, + so check its parent's direction to set the correct margin. */ +.debug-target-item:dir(ltr) > .debug-target-item__subname { + margin-left: calc(var(--base-unit) * 3); +} + +.debug-target-item:dir(rtl) > .debug-target-item__subname { + margin-right: calc(var(--base-unit) * 3); +} -- cgit v1.2.3