sidebar.css (7168B)
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 /* These styles are intended to mimic XUL trees and the XUL search box. */ 6 7 :root { 8 height: 100%; 9 box-sizing: border-box; 10 font: message-box; 11 background-color: Field; 12 color: FieldText; 13 user-select: none; 14 } 15 16 body { 17 margin: 0; 18 height: 100%; 19 } 20 21 /* The content-container holds the non-scrollable header and the scrollable 22 content area. 23 */ 24 .content-container { 25 display: flex; 26 flex-flow: column; 27 height: 100%; 28 } 29 30 /* The content header is not scrollable */ 31 .content-header { 32 flex: 0 1 auto; 33 } 34 35 /* The main content area is scrollable and fills the rest of the area */ 36 .content-scrollable { 37 flex: 1 1 auto; 38 overflow: auto; 39 } 40 41 .emptyListInfo { 42 cursor: default; 43 padding: 3em 1em; 44 text-align: center; 45 } 46 47 .list, 48 .item-tabs-list { 49 display: flex; 50 flex-flow: column; 51 flex-grow: 1; 52 } 53 54 .item.client { 55 opacity: 1; 56 max-height: unset; 57 display: unset; 58 } 59 60 .item.client.closed .item-tabs-list { 61 display: none; 62 } 63 64 .item { 65 display: inline-block; 66 opacity: 1; 67 flex: 1; 68 min-width: 0; 69 white-space: nowrap; 70 overflow: hidden; 71 outline: none; 72 } 73 74 .item.selected > .item-title-container { 75 background-color: -moz-cellhighlight; 76 color: -moz-cellhighlighttext; 77 } 78 79 .item.selected:focus > .item-title-container { 80 background-color: SelectedItem; 81 color: SelectedItemText; 82 } 83 84 .item.client .item-twisty-container { 85 min-width: 12px; 86 height: 12px; 87 background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); 88 -moz-context-properties: fill, fill-opacity; 89 fill: currentColor; 90 fill-opacity: 1; 91 } 92 93 .item.client.closed .item-twisty-container { 94 background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); 95 } 96 97 .item.client.closed .item-twisty-container:dir(rtl) { 98 background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); 99 } 100 101 .client .item.tab > .item-title-container { 102 padding-inline-start: 35px; 103 } 104 105 .item.tab > .item-title-container { 106 padding-inline-start: 20px; 107 } 108 109 .item.client[clientType] > .item-title-container > .item-icon-container { 110 -moz-context-properties: fill; 111 fill: currentColor; 112 } 113 114 .item.client[clientType="phone"] > .item-title-container > .item-icon-container { 115 background-image: url("chrome://browser/skin/device-phone.svg"); 116 } 117 118 .item.client[clientType="tablet"] > .item-title-container > .item-icon-container { 119 background-image: url("chrome://browser/skin/device-tablet.svg"); 120 } 121 122 .item.client[clientType="desktop"] > .item-title-container > .item-icon-container { 123 background-image: url("chrome://browser/skin/device-desktop.svg"); 124 } 125 126 .item.client[clientType="tv"] > .item-title-container > .item-icon-container { 127 background-image: url("chrome://browser/skin/device-tv.svg"); 128 } 129 130 .item.client[clientType="vr"] > .item-title-container > .item-icon-container { 131 background-image: url("chrome://browser/skin/device-vr.svg"); 132 } 133 134 .item.tab > .item-title-container > .item-icon-container { 135 background-image: url("chrome://global/skin/icons/defaultFavicon.svg"); 136 -moz-context-properties: fill; 137 fill: currentColor; 138 } 139 140 .item-icon-container { 141 min-width: 16px; 142 max-width: 16px; 143 min-height: 16px; 144 max-height: 16px; 145 margin-inline: 5px; 146 background-size: 16px 16px; 147 background-size: contain; 148 background-repeat: no-repeat; 149 background-position: center; 150 } 151 152 .item-title-container { 153 display: flex; 154 flex-flow: row; 155 overflow: hidden; 156 flex-grow: 1; 157 align-items: center; 158 padding: 4px; 159 } 160 161 .item-title { 162 flex-grow: 1; 163 overflow: hidden; 164 text-overflow: ellipsis; 165 margin: 1px 0 0; 166 margin-inline-end: 6px; 167 line-height: 1.3; 168 cursor: default; 169 } 170 171 .item[hidden] { 172 opacity: 0; 173 max-height: 0; 174 transition: 175 opacity 150ms ease-in-out, 176 max-height 150ms ease-in-out 150ms; 177 } 178 179 .item.empty .item-title-container { 180 color: #aeaeae; 181 } 182 183 .client .item.empty > .item-title-container { 184 padding-inline-start: 35px; 185 } 186 187 .sync-state > p { 188 padding-inline: 10px; 189 } 190 191 .text-link { 192 color: rgb(0, 149, 221); 193 cursor: pointer; 194 } 195 196 .text-link:hover { 197 text-decoration: underline; 198 } 199 200 .text-link, 201 .text-link:focus { 202 margin: 0; 203 padding: 0; 204 border: 0; 205 } 206 207 .deck .sync-state { 208 display: none; 209 opacity: 0; 210 transition: opacity 1.5s; 211 border-top: 1px solid #bdbdbd; 212 } 213 214 .deck .sync-state.tabs-container { 215 border-top: 0; 216 } 217 218 .deck .sync-state.selected { 219 display: unset; 220 opacity: 100; 221 } 222 223 .deck .syncIllustration, 224 .deck .syncIllustrationIssue { 225 height: 174px; 226 margin: 38px 8px 15px; 227 background-position: center; 228 background-repeat: no-repeat; 229 background-size: contain; 230 } 231 232 .deck .syncIllustration { 233 background-image: url(chrome://browser/skin/fxa/sync-illustration.svg); 234 } 235 236 .deck .syncIllustrationIssue { 237 background-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg); 238 } 239 240 .deck .instructions { 241 text-align: center; 242 color: var(--text-color-deemphasized); 243 padding: 0 11px; 244 max-width: 15em; 245 margin: 0 auto; 246 } 247 248 .deck .button { 249 display: block; 250 background-color: #0060df; 251 color: white; 252 border: 0; 253 border-radius: var(--border-radius-xsmall); 254 margin: 15px auto; 255 padding: 8px; 256 text-shadow: none; 257 width: calc(100% - 22px); 258 max-width: 200px; 259 text-overflow: ellipsis; 260 white-space: nowrap; 261 overflow: hidden; 262 } 263 264 .deck .button:hover { 265 background-color: #003eaa; 266 } 267 268 .deck .button:hover:active { 269 background-color: #002275; 270 } 271 272 .sidebar-search-container { 273 display: flex; 274 padding: 4px; 275 } 276 277 .sidebar-search-container:not(.selected) { 278 display: none; 279 } 280 281 .tabsFilter { 282 flex: 1; 283 margin: var(--space-xsmall); 284 } 285 286 /* Themed sidebars */ 287 288 :root[lwt-sidebar] { 289 background-color: var(--sidebar-background-color); 290 color: var(--sidebar-text-color); 291 scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3)); 292 color-scheme: light; 293 } 294 295 :root[lwt-sidebar="dark"] { 296 color-scheme: dark; 297 } 298 299 :root[lwt-sidebar] .item.selected > .item-title-container { 300 background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1)); 301 color: inherit; 302 } 303 304 :root[lwt-sidebar-highlight] .item.selected:focus > .item-title-container { 305 background-color: var(--lwt-sidebar-highlight-background-color); 306 color: var(--lwt-sidebar-highlight-text-color); 307 } 308 309 /* Platform specific styling */ 310 @media (-moz-platform: macos) { 311 :root { 312 /* let the -moz-appearance of the sidebar shine through */ 313 background-color: transparent; 314 } 315 316 .item-title-container { 317 box-sizing: border-box; 318 align-items: center; 319 height: 24px; 320 font-size: 12px; 321 } 322 323 .item-title { 324 margin: 0; 325 } 326 } 327 328 @media (-moz-platform: windows) { 329 .client .item.tab > .item-title-container { 330 padding-inline-start: 26px; 331 } 332 333 .item.tab > .item-title-container { 334 padding-inline-start: 14px; 335 } 336 337 .item-icon-container { 338 min-width: 16px; 339 max-width: 16px; 340 min-height: 16px; 341 max-height: 16px; 342 margin-inline-end: 5px; 343 background-size: 16px 16px; 344 background-repeat: no-repeat; 345 background-position: center; 346 } 347 }