tor-browser

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

Tabs.css (3947B)

      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 /* Tabs General Styles */
      6 
      7 .tabs {
      8  --tab-height: var(--theme-toolbar-height);
      9  height: 100%;
     10  background: var(--theme-sidebar-background);
     11  display: flex;
     12  flex-direction: column;
     13 }
     14 
     15 .tabs.tabs-tall {
     16  --tab-height: var(--theme-toolbar-tall-height);
     17 }
     18 
     19 /* Hides the tab strip in the TabBar */
     20 div[hidetabs="true"] .tabs .tabs-navigation {
     21  display: none;
     22 }
     23 
     24 .tabs .tabs-navigation {
     25  box-sizing: border-box;
     26  display: flex;
     27  /* Reserve 1px for the border */
     28  height: calc(var(--tab-height) + 1px);
     29  position: relative;
     30  border-bottom: 1px solid var(--theme-splitter-color);
     31  background: var(--theme-tab-toolbar-background);
     32 }
     33 
     34 .tabs .tabs-menu {
     35  list-style: none;
     36  padding: 0;
     37  margin: 0;
     38  margin-inline-end: 15px;
     39  flex-grow: 1;
     40  /* Adjust outline so it's not clipped */
     41  outline-offset: -2px;
     42 }
     43 
     44 /* The tab takes entire horizontal space and individual tabs
     45  should stretch accordingly. Use flexbox for the behavior.
     46  Use also `overflow: hidden` so, 'overflow' and 'underflow'
     47  events are fired (it's utilized by the all-tabs-menu). */
     48 .tabs .tabs-navigation .tabs-menu {
     49  overflow: hidden;
     50  display: flex;
     51  overflow-x: scroll;
     52  scrollbar-width: none;
     53 }
     54 
     55 .tabs .tabs-menu-item {
     56  display: inline-block;
     57  position: relative;
     58  margin: 0;
     59  padding: 0;
     60  color: var(--theme-toolbar-color);
     61 
     62  a {
     63    color: currentColor;
     64  }
     65 }
     66 
     67 .tabs .tabs-menu-item:hover {
     68  background-color: var(--theme-toolbar-hover);
     69  color: var(--theme-toolbar-hover-color);
     70 }
     71 
     72 .tabs .tabs-menu-item.is-active {
     73  color: var(--theme-toolbar-selected-color);
     74  background-color: var(--theme-toolbar-selected-background);
     75 
     76  &:hover {
     77    background-color: var(--theme-toolbar-selected-hover);
     78    color: var(--theme-toolbar-selected-hover-color);
     79  }
     80 }
     81 
     82 .tabs .tabs-menu-item:hover:active:not(.is-active) {
     83  background-color: var(--theme-toolbar-hover-active);
     84 }
     85 
     86 .tabs .tabs-menu-item:has(a:focus-visible) {
     87  z-index: 1;
     88 }
     89 
     90 .tabs .tabs-menu-item a {
     91  --text-height: 16px;
     92  --devtools-tab-border-width: 1px;
     93  display: flex;
     94  justify-content: center;
     95  /* Vertically center text, calculate space remaining by taking the full height and removing
     96  the block borders and text. Divide by 2 to distribute above and below.  */
     97  padding: calc((var(--tab-height) - var(--text-height) - (var(--devtools-tab-border-width) * 2)) / 2) 10px;
     98  border: var(--devtools-tab-border-width) solid transparent;
     99  font-size: 12px;
    100  line-height: var(--text-height);
    101  text-decoration: none;
    102  white-space: nowrap;
    103  cursor: default;
    104  user-select: none;
    105  text-align: center;
    106 }
    107 
    108 .tabs .tabs-menu-item a:focus-visible {
    109  /* Override the box-shadow from the `:focus-visible` style of common.css. In
    110     the tabbar, the focus ring should always be visible so we don't need to
    111     force a box-shadow, which will otherwise overlap with the siblings of the
    112     focused tab. */
    113  box-shadow: unset;
    114 }
    115 
    116 .tabs .tabs-navigation .tabs-menu-item > a {
    117  outline-offset: -2px;
    118 }
    119 
    120 .tabs .tabs-menu-item .tab-badge {
    121  color: var(--theme-highlight-blue);
    122  font-size: 80%;
    123  font-style: italic;
    124  /* Tabs have a 15px padding start/end, so we set the margins here in order to center the
    125     badge after the tab title, with a 5px effective margin. */
    126  margin-inline-start: 5px;
    127  margin-inline-end: -10px;
    128 }
    129 
    130 .tabs .tabs-menu-item.is-active .tab-badge {
    131  /* Use the same color as the tab-item when active */
    132  color: inherit;
    133 }
    134 
    135 /* To avoid "select all" commands from selecting content in hidden tabs */
    136 .tabs .hidden,
    137 .tabs .hidden * {
    138  user-select: none !important;
    139 }
    140 
    141 /* Make sure panel content takes entire vertical space. */
    142 .tabs .panels {
    143  flex: 1;
    144  overflow: hidden;
    145 }
    146 
    147 .tabs .tab-panel {
    148  height: 100%;
    149  overflow-x: hidden;
    150  overflow-y: auto;
    151 }