tor-browser

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

Expressions.css (3729B)

      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 .expression-input-form {
      6  width: 100%;
      7 }
      8 
      9 .input-expression {
     10  width: 100%;
     11  margin: 0;
     12  font-size: inherit;
     13  border: 1px;
     14  background-color: var(--theme-sidebar-background);
     15  height: 24px;
     16  padding-inline-start: 19px;
     17  padding-inline-end: 12px;
     18  color: var(--theme-body-color);
     19  outline: 0;
     20 }
     21 
     22 @keyframes shake {
     23  0%,
     24  100% {
     25    transform: translateX(0);
     26  }
     27  20%,
     28  60% {
     29    transform: translateX(-10px);
     30  }
     31  40%,
     32  80% {
     33    transform: translateX(10px);
     34  }
     35 }
     36 
     37 .input-expression::placeholder {
     38  color: var(--theme-text-color-alt);
     39  opacity: 1;
     40 }
     41 
     42 .input-expression:focus {
     43  cursor: text;
     44 }
     45 
     46 .expressions-list .expression-input-container {
     47  height: var(--expression-item-height);
     48 }
     49 
     50 .expressions-list .input-expression {
     51  /* Prevent vertical bounce when editing an existing Watch Expression */
     52  height: 100%;
     53 }
     54 
     55 .expressions-list {
     56  /* TODO: add normalize */
     57  margin: 0;
     58  padding: 4px 0;
     59  overflow-x: auto;
     60 }
     61 
     62 .expression-input-container {
     63  display: flex;
     64 
     65  /* The outline on the input is set to 0 as we want the whole container to have the focus indicator */
     66  &:has(input:focus) {
     67    outline: var(--theme-focus-outline);
     68    /* The container takes the whole width of the sidebar, we need to offset the layout for it to be visible */
     69    outline-offset: calc(0px - var(--theme-focus-outline-size));
     70    box-shadow: var(--theme-outline-box-shadow);
     71  }
     72 }
     73 
     74 .expression-container {
     75  padding-top: 3px;
     76  padding-bottom: 3px;
     77  padding-inline-start: 20px;
     78  padding-inline-end: 12px;
     79  width: 100%;
     80  color: var(--theme-body-color);
     81  background-color: var(--theme-body-background);
     82  display: block;
     83  position: relative;
     84  overflow: hidden;
     85 }
     86 
     87 .expression-container > .tree {
     88  width: 100%;
     89  overflow: hidden;
     90 }
     91 
     92 .expression-container .tree .tree-node[aria-level="1"] {
     93  padding-top: 0;
     94  /* keep line-height at 14px to prevent row from shifting upon expansion */
     95  line-height: 14px;
     96 }
     97 
     98 .expression-container .tree-node[aria-level="1"] .object-label {
     99  font-family: var(--monospace-font-family);
    100 }
    101 
    102 :root.theme-light .expression-container:hover {
    103  background-color: var(--search-overlays-semitransparent);
    104 }
    105 
    106 :root.theme-dark .expression-container:hover {
    107  background-color: var(--search-overlays-semitransparent);
    108 }
    109 
    110 .expression-container .tree .tree-node:not(.focused):hover {
    111  background-color: transparent;
    112 }
    113 
    114 .expression-container__close-btn {
    115  position: absolute;
    116  /* hiding button outside of row until hovered or focused */
    117  top: -100px;
    118 }
    119 
    120 .expression-container:hover .expression-container__close-btn,
    121 .expression-container:focus-within .expression-container__close-btn,
    122 .expression-container__close-btn:focus-within {
    123  top: 0;
    124 }
    125 
    126 .expression-content .object-node {
    127  padding-inline-start: 0;
    128  cursor: default;
    129 }
    130 
    131 .expressions-list .tree.object-inspector .node.object-node {
    132  max-width: calc(100% - 20px);
    133  min-width: 0;
    134  text-overflow: ellipsis;
    135  overflow: hidden;
    136 }
    137 
    138 .expression-container__close-btn {
    139  max-height: 16px;
    140  padding-inline-start: 4px;
    141 }
    142 
    143 [dir="ltr"] .expression-container__close-btn {
    144  right: 0;
    145 }
    146 
    147 [dir="rtl"] .expression-container__close-btn {
    148  left: 0;
    149 }
    150 
    151 .expression-content {
    152  display: flex;
    153  align-items: center;
    154  flex-grow: 1;
    155  position: relative;
    156 }
    157 
    158 .expression-content .tree {
    159  overflow: hidden;
    160  flex-grow: 1;
    161  line-height: 15px;
    162 }
    163 
    164 .expression-content .tree-node[data-expandable="false"][aria-level="1"] {
    165  padding-inline-start: 0;
    166 }
    167 
    168 .input-expression:not(:placeholder-shown) {
    169  font-family: var(--monospace-font-family);
    170 }