]>
Commit | Line | Data |
---|---|---|
1 | /* Firefox Compact Mode | |
2 | * | |
3 | * Copyright (c) 2021 Danny Colin | |
4 | * | |
5 | * This Source Code Form is subject to the terms of the Mozilla Public | |
6 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
7 | * file, You can obtain one at https://mozilla.org/MPL/2.0/. | |
8 | */ | |
9 | ||
10 | :root { | |
11 | /* Tabbar: reduce tab margin */ | |
12 | --tab-block-margin: 0 !important; | |
13 | } | |
14 | ||
15 | /* Reduce minimum window width for Fx74 */ | |
16 | :root:not([chromehidden~="toolbar"]){ | |
17 | /* Fx74 default is 450px on Windows */ | |
18 | min-width: 250px !important; | |
19 | } | |
20 | ||
21 | ////// | |
22 | ||
23 | #tabbrowser-tabs { | |
24 | --user-tab-rounding: 0px; | |
25 | } | |
26 | ||
27 | .tab-background { | |
28 | border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */ | |
29 | margin-block: 1px 0 !important; /* Connected */ | |
30 | } | |
31 | #scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */ | |
32 | border-top-width: 1px !important; | |
33 | border-bottom-width: 0 !important; | |
34 | } | |
35 | ||
36 | /* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */ | |
37 | .tab-background:is([selected], [multiselected]):-moz-lwtheme { | |
38 | --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important; | |
39 | border-bottom-color: transparent !important; | |
40 | } | |
41 | [brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme { | |
42 | --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important; | |
43 | border-bottom-color: transparent !important; | |
44 | } | |
45 | ||
46 | /* Container color bar visibility */ | |
47 | .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { | |
48 | margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important; | |
49 | } | |
50 | ||
51 | #TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox { | |
52 | max-height: calc(var(--tab-min-height) + 1px) !important; | |
53 | } | |
54 | ||
55 | ////// | |
56 | ||
57 | /* Inactive tabs: Separator line style */ | |
58 | ||
59 | .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { | |
60 | border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important; | |
61 | } | |
62 | /* For dark backgrounds */ | |
63 | [brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { | |
64 | border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important; | |
65 | } | |
66 | .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { | |
67 | border-radius: 0 !important; | |
68 | } | |
69 | /* Remove padding between tabs */ | |
70 | .tabbrowser-tab { | |
71 | padding-left: 0 !important; | |
72 | padding-right: 0 !important; | |
73 | } | |
74 | ||
75 | ////// | |
76 | ||
77 | /* Tab: Reduce height */ | |
78 | .tabbrowser-tab { | |
79 | min-height: 16px !important; | |
80 | margin: 0 !important; | |
81 | } | |
82 | ||
83 | #TabsToolbar, #tabbrowser-tabs { | |
84 | --tab-min-height: 18px !important; | |
85 | } | |
86 | ||
87 | #scrollbutton-up, | |
88 | #scrollbutton-down { | |
89 | border-top-width: 0 !important; | |
90 | border-bottom-width: 0 !important; | |
91 | } | |
92 | ||
93 | /* Tab: Ensure tab height doesn't augment when arrowscrollbox is visible */ | |
94 | #tabbrowser-arrowscrollbox { | |
95 | --tab-min-height: 18px !important; | |
96 | max-height: var(--tab-min-height); | |
97 | } | |
98 | ||
99 | /* Tab: Attention icon */ | |
100 | .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { | |
101 | background-position-x: left 2px !important; | |
102 | background-position-y: bottom 12.5px !important; | |
103 | } | |
104 | ||
105 | /* URLBar: Fix vertical alignment */ | |
106 | #urlbar[breakout=true]:not([open="true"]) { | |
107 | --urlbar-height: 16px !important; | |
108 | --urlbar-toolbar-height: 18px !important; | |
109 | } | |
110 | ||
111 | /* URLBar: Fix URL address vertical aligment when megabar is open */ | |
112 | #urlbar[breakout=true][open="true"] { | |
113 | --urlbar-toolbar-height: 16px !important; | |
114 | } | |
115 | ||
116 | /* URLBar: Reduce row items padding */ | |
117 | .urlbarView-row-inner { | |
118 | padding-inline: var(--urlbarView-item-inline-padding); | |
119 | padding-block: 1px !important; | |
120 | } | |
121 | ||
122 | /* URLBar: Reduce and realign row bookmark icons */ | |
123 | .urlbarView-type-icon { | |
124 | width: 10px !important; | |
125 | height: 10px !important; | |
126 | margin-bottom: 0 !important; | |
127 | margin-inline-start: 10px !important; | |
128 | } | |
129 | ||
130 | /* URLBar: Reduce "This time, serach with" padding */ | |
131 | #urlbar .search-one-offs:not([hidden]) { | |
132 | padding-block: 4px !important; | |
133 | } | |
134 | ||
135 | /* Searchbar: Ensure toolbar height doesn't augment when searchbar is visible */ | |
136 | #urlbar-container, | |
137 | #search-container { | |
138 | padding-block: 0 !important; | |
139 | } | |
140 | ||
141 | /* Searchbar: Make sure the min-height of the input is the same as the popup */ | |
142 | #search-container { | |
143 | min-width: 192px !important; | |
144 | } | |
145 | ||
146 | /* Toolbar: Reduce spacing */ | |
147 | #urlbar-container { | |
148 | --urlbar-container-height: 18px !important; | |
149 | margin-top: 0 !important; | |
150 | } | |
151 | ||
152 | .urlbar-input-box { | |
153 | max-height: 16px !important; | |
154 | } | |
155 | ||
156 | /* | |
157 | * Make the toolbar extra-compact (similar to v56 with CTR) | |
158 | * | |
159 | * Applies to Compact density | |
160 | * | |
161 | * Contributor(s): Alex Vallat | |
162 | */ | |
163 | ||
164 | :root[uidensity=compact] #urlbar, | |
165 | :root[uidensity=compact] .searchbar-textbox { | |
166 | min-height: 18px !important; | |
167 | } | |
168 | ||
169 | :root[uidensity=compact] #identity-box { | |
170 | max-height: 16px; | |
171 | } | |
172 | ||
173 | :root[uidensity=compact] #nav-bar .toolbarbutton-1 { | |
174 | padding: 0px !important; | |
175 | } | |
176 | ||
177 | #nav-bar toolbarbutton > .toolbarbutton-icon { | |
178 | height:14px!important; | |
179 | width:14px!important; | |
180 | padding: 0 !important; | |
181 | margin: 0 2px !important; | |
182 | } | |
183 | #personal-bookmarks .bookmark-item > .toolbarbutton-icon { height:16px!important; width:16px!important; } | |
184 | ||
185 | ||
186 | ||
187 | /* Compatibility with auto-hide.css */ | |
188 | :root[uidensity=compact] #navigator-toolbox { | |
189 | --nav-bar-height: 18px !important; | |
190 | } | |
191 | ||
192 | #nav-bar { | |
193 | height: 18px | |
194 | } | |
195 | ||
196 | ||
197 | /* Reload Button: Fix vertical alignment */ | |
198 | #reload-button { | |
199 | margin-block-start: -2px !important; | |
200 | } | |
201 | ||
202 | /* AppMenu: Header */ | |
203 | .panel-header { | |
204 | padding: 4px 0 0 4px !important; | |
205 | } | |
206 | ||
207 | /* AppMenu: Header button */ | |
208 | .panel-header > .subviewbutton-back { | |
209 | padding: 4px !important; | |
210 | } | |
211 | ||
212 | /* Windows 10 context menu */ | |
213 | @media (-moz-os-version: windows-win10) { | |
214 | /* Context Menu: Reduce vertical space */ | |
215 | menupopup > menuitem, | |
216 | menupopup > menu { | |
217 | padding-block: 2px !important; | |
218 | } | |
219 | } |