tor-browser

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

Worker.css (1839B)

      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 a service worker item is
      7 *
      8 *  +------------+------------------------------+
      9 *  |     Worker | script_name                  |
     10 *  |     Icon   |------------------------------|
     11 *  |            | status    start_button       |
     12 *  +------------+------------------------------+
     13 */
     14 
     15 .worker {
     16  display: grid;
     17  grid-template-columns: auto 1fr;
     18  grid-template-areas:
     19    "icon  source"
     20    "icon  misc";
     21  column-gap: calc(var(--base-unit) * 2);
     22  row-gap: var(--base-unit);
     23 
     24  line-height: calc(var(--base-unit) * 4);
     25  font-size: var(--body-10-font-size);
     26 }
     27 
     28 .worker__icon {
     29  grid-area: icon;
     30 }
     31 
     32 .worker__icon-image {
     33  width: calc(var(--base-unit) * 4);
     34  height: calc(var(--base-unit) * 4);
     35 }
     36 
     37 .worker__source {
     38  grid-area: source;
     39  user-select: text;
     40 }
     41 
     42 .worker__misc {
     43  grid-area: misc;
     44 }
     45 
     46 .worker__status {
     47  text-transform: capitalize;
     48  --status-bg-color: transparent;
     49  --status-border-color: transparent;
     50 }
     51 
     52 .worker__status::before {
     53  content: "";
     54  margin-inline-end: var(--base-unit);
     55  width: calc(var(--base-unit) * 2);
     56  height: calc(var(--base-unit) * 2);
     57  display: inline-block;
     58  background: var(--status-bg-color);
     59  border: 1px solid var(--status-border-color);
     60  border-radius: 100%;
     61 }
     62 
     63 .worker__status--active {
     64  --status-bg-color: var(--green-60);
     65  --status-border-color: var(--green-60);
     66 }
     67 
     68 .worker__status--waiting {
     69  --status-bg-color: var(--theme-text-color-alt);
     70  --status-border-color: var(--theme-text-color-alt);
     71 }
     72 
     73 .worker__status--installing,
     74 .worker__status--default {
     75  --status-bg-color: transparent;
     76  --status-border-color: var(--theme-text-color-alt);
     77 }