1/* vim:set ts=2 sw=2 sts=2 et: */ 2/* This Source Code Form is subject to the terms of the Mozilla Public 3 * License, v. 2.0. If a copy of the MPL was not distributed with this 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 5 6/* Tabs General Styles */ 7 8.tabs { 9 height: 100%; 10 background: var(--theme-sidebar-background); 11 display: flex; 12 flex-direction: column; 13} 14 15.tabs .tabs-menu { 16 list-style: none; 17 padding: 0; 18 margin: 0; 19} 20 21.tabs .tabs-menu-item { 22 display: inline-block; 23 position: relative; 24} 25 26.tabs .tabs-menu-item a { 27 display: flex; 28 justify-content: center; 29 padding: 4px 8px; 30 border: 1px solid transparent; 31 font-size: 12px; 32 text-decoration: none; 33 white-space: nowrap; 34} 35 36.tabs .tabs-menu-item .tab-badge { 37 color: var(--theme-highlight-blue); 38 font-size: 80%; 39 font-style: italic; 40 /* Tabs have a 15px padding start/end, so we set the margins here in order to center the 41 badge after the tab title, with a 5px effective margin. */ 42 margin-inline-start: 5px; 43 margin-inline-end: -10px; 44} 45 46.tabs .tabs-menu-item.is-active .tab-badge { 47 /* Use the same color as the tab-item when active */ 48 color: inherit; 49} 50 51/* To avoid "select all" commands from selecting content in hidden tabs */ 52.tabs .hidden, 53.tabs .hidden * { 54 -moz-user-select: none !important; 55} 56 57.tabs .tabs-menu-item a { 58 cursor: default; 59 -moz-user-select: none; 60} 61 62/* Make sure panel content takes entire vertical space. */ 63.tabs .panels { 64 flex: 1; 65 overflow: hidden; 66} 67 68.tabs .tab-panel { 69 height: 100%; 70 overflow-x: hidden; 71 overflow-y: auto; 72} 73 74.tabs .tabs-navigation, 75.tabs .tabs-navigation { 76 position: relative; 77 border-bottom: 1px solid var(--theme-splitter-color); 78 background: var(--theme-tab-toolbar-background); 79} 80 81.theme-dark .tabs .tabs-menu-item, 82.theme-light .tabs .tabs-menu-item { 83 margin: 0; 84 padding: 0; 85 color: var(--theme-toolbar-color); 86} 87 88.theme-dark .tabs .tabs-menu-item.is-active, 89.theme-light .tabs .tabs-menu-item.is-active { 90 color: var(--theme-toolbar-selected-color); 91} 92 93.theme-dark .tabs .tabs-menu-item:last-child, 94.theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child { 95 border-inline-end-width: 1px; 96} 97 98.theme-dark .tabs .tabs-menu-item a, 99.theme-light .tabs .tabs-menu-item a { 100 padding: 3px 10px; 101} 102 103.theme-dark .tabs .tabs-menu-item:hover, 104.theme-light .tabs .tabs-menu-item:hover { 105 background-color: var(--theme-toolbar-hover); 106} 107 108.theme-dark .tabs .tabs-menu-item:hover:active:not(.is-active), 109.theme-light .tabs .tabs-menu-item:hover:active:not(.is-active) { 110 background-color: var(--theme-toolbar-hover-active); 111} 112 113/* Firebug Theme */ 114 115.theme-firebug .tabs .tabs-navigation { 116 padding-top: 3px; 117 padding-left: 3px; 118} 119 120.theme-firebug .tabs .tabs-menu { 121 margin-bottom: -1px; 122} 123 124.theme-firebug .tabs .tabs-menu-item.is-active, 125.theme-firebug .tabs .tabs-menu-item.is-active:hover { 126 background-color: transparent; 127} 128 129.theme-firebug .tabs .tabs-menu-item { 130 position: relative; 131 border-inline-start-width: 0; 132} 133 134.theme-firebug .tabs .tabs-menu-item a { 135 font-family: var(--proportional-font-family); 136 font-weight: bold; 137 color: var(--theme-body-color); 138 border-radius: 4px 4px 0 0; 139} 140 141.theme-firebug .tabs .tabs-menu-item:hover:not(.is-active) a { 142 border: 1px solid var(--theme-splitter-color); 143 border-bottom: 1px solid transparent; 144 background-color: transparent; 145} 146 147.theme-firebug .tabs .tabs-menu-item.is-active a { 148 background-color: var(--theme-toolbar-tab-selected-background); 149 border: 1px solid var(--theme-splitter-color); 150 border-bottom-color: transparent; 151 color: var(--theme-body-color); 152} 153 154.theme-firebug .tabs .tabs-menu-item:hover:active a { 155 background-color: var(--theme-toolbar-hover-active); 156} 157 158.theme-firebug .tabs .tabs-menu-item.is-active:hover:active a { 159 background-color: var(--theme-selection-background); 160 color: var(--theme-selection-color); 161} 162 163.theme-firebug .tabs .tabs-menu-item a { 164 border: 1px solid transparent; 165 padding: 4px 8px; 166} 167