sidebar.css (10996B)
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 #sidebar-box { 6 max-width: 75vw; 7 min-width: 14em; 8 width: 18em; 9 10 :root[lwt-sidebar="light"] & { 11 color-scheme: light; 12 } 13 :root[lwt-sidebar="dark"] & { 14 color-scheme: dark; 15 } 16 17 /* stylelint-disable-next-line media-query-no-invalid */ 18 @media -moz-pref("sidebar.revamp") { 19 min-width: 200px; 20 width: 340px; 21 padding-block-end: var(--space-small); 22 position: relative; 23 z-index: var(--browser-area-z-index-sidebar); 24 } 25 26 &[sidebarcommand="viewGenaiChatSidebar"] { 27 min-width: 400px; 28 } 29 30 &[sidebarcommand="viewCPMSidebar"] { 31 min-width: 260px; 32 } 33 } 34 35 #sidebar-main, 36 #sidebar-box { 37 text-shadow: none; 38 max-width: 75vw; 39 40 /* stylelint-disable-next-line media-query-no-invalid */ 41 @media not -moz-pref("sidebar.revamp") { 42 background-color: var(--sidebar-background-color); 43 color: var(--sidebar-text-color); 44 /* Note that with sidebar.revamp we apply the --sidebar-background-color to the 45 * #sidebar browser. We still need the #sidebar-box background to match the 46 * toolbar tho - this background is set on the #browser ancestor rather than here */ 47 } 48 } 49 50 .sidebar-browser-stack > .dialogStack > .dialogTemplate > .dialogBox { 51 /* Not enough horizontal space, remove the margin */ 52 margin-inline: 0; 53 } 54 55 #sidebar-header { 56 font-size: 1.333em; 57 padding: 8px; 58 border-bottom: 1px solid var(--sidebar-border-color); 59 } 60 61 #sidebar-spacer { 62 /* To ensure the button doesn't expand unnecessarily for short labels, the 63 spacer should significantly out-flex the button. */ 64 flex: 1000 1000; 65 } 66 67 #sidebar { 68 flex: 1; 69 70 /* stylelint-disable-next-line media-query-no-invalid */ 71 @media -moz-pref("sidebar.revamp") { 72 border-radius: var(--border-radius-medium); 73 box-shadow: var(--content-area-shadow); 74 outline: 0.5px solid var(--sidebar-border-color); 75 background-color: var(--sidebar-background-color); 76 color: var(--sidebar-text-color); 77 } 78 } 79 80 .sidebar-splitter { 81 /* Ensure the splitter is painted on top of the sidebar box it overlaps. 82 Otherwise, the user may be unable to drag the splitter to resize the sidebar. */ 83 position: relative; 84 z-index: var(--browser-area-z-index-sidebar-splitter); 85 --splitter-width: 4px; 86 @media (-moz-overlay-scrollbars) { 87 --splitter-width: 2px; 88 } 89 90 min-width: 1px; 91 width: var(--splitter-width); 92 appearance: none; 93 border: none; 94 transition: background-color 0.5s ease-in-out; 95 margin-inline: 0; 96 97 /* stylelint-disable-next-line media-query-no-invalid */ 98 @media -moz-pref("sidebar.revamp") { 99 background-color: transparent; 100 &:hover { 101 background-color: var(--focus-outline-color); 102 } 103 } 104 105 /* stylelint-disable-next-line media-query-no-invalid */ 106 @media not -moz-pref("sidebar.revamp") { 107 border: 0 solid; 108 border-color: var(--sidebar-border-color); 109 border-inline-end-width: 1px; 110 #sidebar-box[sidebar-positionend] + & { 111 border-inline-width: 1px 0; 112 } 113 } 114 } 115 116 /* stylelint-disable-next-line media-query-no-invalid */ 117 @media -moz-pref("sidebar.revamp") { 118 #sidebar-splitter { 119 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 120 width: var(--space-medium); 121 border-inline: calc((var(--space-medium) - var(--splitter-width)) / 2) solid transparent; 122 background-clip: padding-box; 123 } 124 } 125 126 #sidebar-launcher-splitter { 127 /* We don't let the splitter overlap the sidebar on Linux since the 128 * scrollbar is too narrow. */ 129 @media not (-moz-platform: linux) { 130 margin-inline-start: calc(-1 * var(--splitter-width)); 131 132 #sidebar-main[sidebar-positionend] + & { 133 margin-inline: 0 calc(-1 * var(--splitter-width)); 134 } 135 } 136 137 /* stylelint-disable-next-line media-query-no-invalid */ 138 @media not -moz-pref("sidebar.verticalTabs") { 139 display: none; 140 } 141 } 142 143 #sidebar-throbber[loading="true"] { 144 list-style-image: url("chrome://global/skin/icons/loading.svg"); 145 -moz-context-properties: fill; 146 fill: currentColor; 147 } 148 149 #sidebar-title { 150 margin: 0; 151 padding: 0; 152 padding-inline: 8px 4px; 153 flex: 1; 154 } 155 156 #sidebar-switcher-arrow { 157 -moz-context-properties: fill; 158 fill: currentColor; 159 opacity: 0.8; 160 } 161 162 #sidebar-switcher-arrow { 163 list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); 164 width: var(--icon-size-xsmall); 165 height: var(--icon-size-xsmall); 166 } 167 168 #sidebar-switcher-target { 169 appearance: none; 170 color: inherit; 171 margin-inline-end: 4px; 172 border-radius: var(--toolbarbutton-border-radius); 173 border: 1px solid transparent; 174 padding: 2px 4px; 175 flex: 1; 176 } 177 178 #sidebar-switcher-target:hover { 179 background-color: var(--toolbarbutton-hover-background); 180 } 181 182 #sidebar-switcher-target:hover:active, 183 #sidebar-switcher-target.active { 184 background-color: var(--toolbarbutton-active-background); 185 } 186 187 #sidebar-switcher-target:focus-visible, 188 #sidebar-close:focus-visible { 189 outline: var(--focus-outline); 190 outline-offset: 0; 191 } 192 193 #sidebarMenu-popup > menuitem { 194 min-width: 16em; 195 } 196 197 menuseparator + #sidebar-extensions-separator { 198 display: none; 199 } 200 201 #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { 202 list-style-image: url(chrome://browser/skin/bookmark.svg); 203 -moz-context-properties: fill; 204 fill: currentColor; 205 opacity: 0.8; 206 } 207 208 #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { 209 list-style-image: url(chrome://browser/skin/history.svg); 210 -moz-context-properties: fill; 211 fill: currentColor; 212 opacity: 0.8; 213 } 214 215 #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { 216 list-style-image: url(chrome://browser/skin/synced-tabs.svg); 217 -moz-context-properties: fill; 218 fill: currentColor; 219 opacity: 0.8; 220 } 221 222 /* WebExtension Sidebars */ 223 #sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { 224 list-style-image: var(--webextension-menuitem-image, inherit); 225 -moz-context-properties: fill; 226 fill: currentColor; 227 width: 16px; 228 height: 16px; 229 } 230 231 .webextension-menuitem { 232 --menuitem-icon: var(--webextension-menuitem-image); 233 } 234 235 /* Sidebar animation */ 236 237 #sidebar-main, 238 sidebar-main, 239 #sidebar-box, 240 #sidebar-splitter, 241 #tabbrowser-tabbox { 242 transform-origin: 0 0; 243 /* will-change would cause us to be considered animated unconditionally, see 244 * bug 1930674 */ 245 translate: 0; 246 } 247 248 #sidebar-main { 249 /* Prevent overflow during sidebar animation when the sidebar is reordered */ 250 overflow: clip; 251 252 &[sidebar-ongoing-animations] > sidebar-main::part(overflow-button) { 253 display: none; 254 } 255 } 256 257 /* Expand on hover */ 258 259 :root[sidebar-expand-on-hover] { 260 #sidebar-main { 261 border-radius: inherit; 262 background-color: inherit; 263 position: relative; 264 inset: 0; 265 inset-inline-end: unset; 266 267 /* We only want to apply these styles in two scenarios: 268 * When the sidebar is expanded AND hovered 269 * When the sidebar is in the process of moving from expanded to collapsed 270 */ 271 &[sidebar-launcher-expanded], 272 &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) { 273 z-index: var(--browser-area-z-index-sidebar-expand-on-hover); 274 position: absolute; 275 color: var(--toolbox-textcolor); 276 /* With Windows Mica, the toolbox background is not guaranteed to be 277 * opaque. Make sure there's some opaque backdrop that matches our color 278 * scheme. These colors match the "transparency effects disabled" mica 279 * backdrop on Windows 11, which is as good as we can make it. */ 280 background-image: linear-gradient(var(--toolbox-bgcolor)); 281 background-color: light-dark(#e8e8e8, #202020); 282 283 &:not([sidebar-positionend]) { 284 border-inline-end: 0.01px solid var(--sidebar-border-color); 285 } 286 287 &[sidebar-positionend] { 288 border-inline-start: 0.01px solid var(--sidebar-border-color); 289 } 290 } 291 292 :root[lwtheme] & { 293 border-radius: unset; 294 border-inline: unset; 295 color: var(--toolbox-textcolor); 296 background-color: var(--toolbox-bgcolor); 297 298 &:-moz-window-inactive { 299 color: var(--toolbox-textcolor-inactive); 300 background-color: var(--toolbox-bgcolor-inactive); 301 } 302 } 303 304 &[sidebar-positionend] { 305 inset-inline-start: unset; 306 inset-inline-end: 0; 307 } 308 } 309 310 #sidebar-launcher-splitter[sidebar-launcher-expanded] { 311 visibility: hidden; 312 } 313 314 /* We add margin to compensate for the launcher width to the element next to it. 315 The element next to it can be the sidebar box or the tabbox, 316 depending on whether the sidebar box is expanded */ 317 #tabbrowser-tabbox { 318 &:not([sidebar-positionend]) { 319 &:not([sidebar-panel-open]) { 320 margin-inline-start: 0; 321 } 322 323 &[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]), 324 &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded], [sidebar-panel-open]) { 325 margin-inline-start: var(--sidebar-launcher-collapsed-width); 326 } 327 } 328 329 &[sidebar-positionend] { 330 &:not([sidebar-panel-open]) { 331 margin-inline-end: 0; 332 } 333 334 &[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]), 335 &[sidebar-ongoing-animations]:not([sidebar-panel-open], [sidebar-launcher-expanded]) { 336 margin-inline-end: var(--sidebar-launcher-collapsed-width); 337 } 338 } 339 } 340 341 #sidebar-box { 342 &:not([sidebar-positionend]) { 343 &[sidebar-panel-open] { 344 margin-inline-start: 0; 345 } 346 347 &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded], 348 &[sidebar-ongoing-animations][sidebar-panel-open] { 349 margin-inline-start: var(--sidebar-launcher-collapsed-width); 350 } 351 } 352 353 &[sidebar-positionend] { 354 &[sidebar-panel-open] { 355 margin-inline-end: 0; 356 } 357 358 &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded], 359 &[sidebar-ongoing-animations][sidebar-panel-open] { 360 margin-inline-end: var(--sidebar-launcher-collapsed-width); 361 } 362 } 363 } 364 } 365 366 /* stylelint-disable-next-line media-query-no-invalid */ 367 @media -moz-pref("sidebar.visibility", "expand-on-hover") { 368 /* We need these rules to apply at all times when the sidebar.visibility 369 pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute 370 has been added to root. There are certain scenarios when that attribute is temporarily 371 removed from root such as when toggling the sidebar to expand with the toolbar button. */ 372 #sidebar { 373 box-shadow: none; 374 margin-block-start: 1px; 375 outline-offset: -0.1px; 376 } 377 } 378 379 /* History Menu */ 380 #sidebar-history-sort-by-heading { 381 margin-block: var(--space-xsmall); 382 } 383 384 #sidebar-history-clear { 385 padding: var(--menuitem-padding); 386 &::before { 387 content: unset; 388 } 389 }