diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/application/src/components/service-workers/Worker.css | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/devtools/client/application/src/components/service-workers/Worker.css b/devtools/client/application/src/components/service-workers/Worker.css new file mode 100644 index 0000000000..e44b49ef6b --- /dev/null +++ b/devtools/client/application/src/components/service-workers/Worker.css @@ -0,0 +1,75 @@ +/* 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 a service worker item is + * + * +------------+------------------------------+ + * | Worker | script_name | + * | Icon |------------------------------| + * | | status start_button | + * +------------+------------------------------+ + */ + +.worker { + display: grid; + grid-template-columns: auto 1fr; + grid-template-areas: "icon source" + "icon misc"; + column-gap: calc(var(--base-unit) * 2); + row-gap: var(--base-unit); + + line-height: calc(var(--base-unit) * 4); + font-size: var(--body-10-font-size); +} + +.worker__icon { + grid-area: icon; +} + +.worker__icon-image { + width: calc(var(--base-unit) * 4); + height: calc(var(--base-unit) * 4); +} + +.worker__source { + grid-area: source; + user-select: text; +} + +.worker__misc { + grid-area: misc; +} + +.worker__status { + text-transform: capitalize; + --status-bg-color: transparent; + --status-border-color: transparent; +} + +.worker__status::before { + content: ""; + margin-inline-end: var(--base-unit); + width: calc(var(--base-unit) * 2); + height: calc(var(--base-unit) * 2); + display: inline-block; + background: var(--status-bg-color); + border: 1px solid var(--status-border-color); + border-radius: 100%; +} + +.worker__status--active { + --status-bg-color: var(--green-60); + --status-border-color: var(--green-60); +} + +.worker__status--waiting { + --status-bg-color: var(--theme-text-color-alt); + --status-border-color: var(--theme-text-color-alt); +} + +.worker__status--installing, .worker__status--default { + --status-bg-color: transparent; + --status-border-color: var(--theme-text-color-alt); +} |