tor-browser

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

Tabs.css (3304B)

      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 .source-header {
      6  grid-area: editor-header;
      7  display: flex;
      8  width: 100%;
      9  height: var(--editor-header-height);
     10  border-bottom: 1px solid var(--theme-splitter-color);
     11  background-color: var(--theme-toolbar-background);
     12 }
     13 
     14 .source-header * {
     15  user-select: none;
     16 }
     17 
     18 .source-header .command-bar {
     19  flex: initial;
     20  flex-shrink: 0;
     21  border-bottom: 0;
     22  border-inline-start: 1px solid var(--theme-splitter-color);
     23 }
     24 
     25 .source-header .toggle-button.start {
     26  width: var(--cm-gutter-width);
     27 }
     28 
     29 .source-tabs {
     30  flex: auto;
     31  align-self: flex-start;
     32  /* Reserve space for the overflow button (even if not visible) */
     33  padding-inline-end: 28px;
     34  /* Make sure that overflowing tabs don't show through other elements (see Bug 1855458) */
     35  max-height: 100%;
     36  overflow: hidden;
     37 }
     38 
     39 .source-tab {
     40  display: inline-flex;
     41  align-items: center;
     42  position: relative;
     43  min-width: 40px;
     44  max-width: 100%;
     45  overflow: hidden;
     46  padding: 4px 10px;
     47  cursor: default;
     48  height: calc(var(--editor-header-height) - 1px);
     49  font-size: 12px;
     50  background-color: transparent;
     51  vertical-align: bottom;
     52 
     53  :root[forced-colors-active] & {
     54    color: ButtonText;
     55 
     56    &.active {
     57      color: SelectedItemText;
     58    }
     59  }
     60 }
     61 
     62 .source-tab::before {
     63  content: "";
     64  position: absolute;
     65  top: 0;
     66  left: 0;
     67  width: 100%;
     68  height: 2px;
     69  background-color: var(--tab-line-color, transparent);
     70  transition:
     71    transform 250ms var(--animation-curve),
     72    opacity 250ms var(--animation-curve);
     73  opacity: 0;
     74  transform: scaleX(0);
     75 }
     76 
     77 .source-tab.active {
     78  --tab-line-color: var(--tab-line-selected-color);
     79  color: var(--theme-toolbar-selected-color);
     80  background-color: var(--theme-toolbar-selected-background);
     81  border-bottom-color: var(--theme-toolbar-selected-background);
     82 }
     83 
     84 .source-tab:not(.active):hover {
     85  --tab-line-color: var(--tab-line-hover-color);
     86  background-color: var(--theme-toolbar-hover);
     87 
     88  :root[forced-colors-active] & {
     89    color: SelectedItem;
     90 
     91    & .source-icon {
     92      fill: var(--theme-icon-hover-color);
     93    }
     94  }
     95 }
     96 
     97 .source-tab:hover::before,
     98 .source-tab.active::before {
     99  opacity: 1;
    100  transform: scaleX(1);
    101 }
    102 
    103 .source-tab .dbg-img.dbg-img-blackBox {
    104  mask-size: 14px;
    105 }
    106 
    107 .source-tab .dbg-img.dbg-img-blackBox.source-icon {
    108  background-color: #806414;
    109 }
    110 
    111 .source-tab .filename {
    112  display: block;
    113  white-space: nowrap;
    114  text-overflow: ellipsis;
    115  overflow: hidden;
    116  padding-inline-end: 4px;
    117 }
    118 
    119 .source-tab .filename span {
    120  opacity: 0.7;
    121  padding-inline-start: 4px;
    122 }
    123 
    124 .source-tab .close-btn {
    125  visibility: hidden;
    126  margin-inline-end: -6px;
    127 }
    128 
    129 .source-tab.active .close-btn {
    130  color: inherit;
    131 }
    132 
    133 .source-tab.active .close-btn,
    134 .source-tab:hover .close-btn {
    135  visibility: visible;
    136 }
    137 
    138 .source-tab.active .source-icon {
    139  background-color: currentColor;
    140  fill: currentColor;
    141 }
    142 
    143 .source-tab .close-btn:hover {
    144  color: var(--theme-selection-color);
    145  background-color: var(--theme-selection-background);
    146 }
    147 
    148 :root[forced-colors-active] .source-tab.active .close-btn:hover {
    149  color: var(--theme-selection-background);
    150  background-color: var(--theme-selection-color);
    151 }