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/. */
5 /* === BEGIN sidebar.inc.css === */
7 /* These styles are intended to mimic XUL trees and the XUL search box. */
16 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
18 -moz-user-select: none;
21 /* The content-container holds the non-scrollable header and the scrollable
30 /* The content header is not scrollable */
35 /* The main content area is scrollable and fills the rest of the area */
60 .item.client.closed .item-tabs-list {
65 display: inline-block;
75 .item.selected > .item-title-container {
76 background-color: #A09090;
81 .item.selected:focus > .item-title-container {
82 background-color: #008484;
86 .client .item.tab > .item-title-container {
87 padding-inline-start: 35px;
90 .item.tab > .item-title-container {
91 padding-inline-start: 20px;
94 .item.client.device-image-desktop > .item-title-container > .item-icon-container {
95 background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon");
98 .item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container {
99 background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon-inverted");
102 .item.client.device-image-mobile > .item-title-container > .item-icon-container {
103 background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon");
106 .item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container {
107 background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted");
110 .item.tab > .item-title-container > .item-icon-container {
111 background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
114 .item-icon-container {
121 background-size: 16px 16px;
122 background-size: contain;
123 background-repeat: no-repeat;
124 background-position: center;
127 .item-title-container {
132 padding: 1px 0px 1px 0px;
138 text-overflow: ellipsis;
147 transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
150 .item.empty .item-title-container {
154 .client .item.empty > .item-title-container {
155 padding-inline-start: 35px;
160 flex-flow: row nowrap;
170 /* min-width of anything to override the implicit "-moz-min-content" value.
171 0px is safe as the sidebar itself has a constrained size meaning we will
172 never actually hit this minimum
178 padding-inline-end: 10px;
179 padding-inline-start: 10px;
189 text-decoration: underline;
202 transition: opacity 1.5s;
203 border-top: 1px solid #A09090;
206 .deck .sync-state.tabs-container {
210 .deck .sync-state.selected {
215 .sidebar-search-container.tabs-container:not(.selected) {
219 .textbox-search-clear:not([disabled]) {
223 .textbox-search-icons .textbox-search-clear,
224 .filtered .textbox-search-icons .textbox-search-icon {
228 .filtered .textbox-search-icons .textbox-search-clear {
232 /* === END sidebar.inc.css === */
234 /* These styles are intended to mimic XUL trees and the XUL search box. */
237 background-color: #000000;
241 padding-inline-end: 0;
249 margin-inline-end: 6px;
253 /* -moz-appearance: textfield; */
256 padding: 2px 2px 3px;
257 padding-inline-start: 4px;
259 border: 1px solid #9C9CFF;
262 .textbox-search-icon {
265 background-image: url(chrome://global/skin/icons/search.png);
266 background-repeat: no-repeat;
270 .textbox-search-icon:-moz-locale-dir(rtl) {
271 transform: scaleX(-1);
274 .textbox-search-icon[searchbutton]:not([disabled]) {
278 .textbox-search-clear {
281 background-image: url(chrome://global/skin/icons/search.png);
282 background-repeat: no-repeat;
283 background-position: 0 -16px;
286 .textbox-search-clear:not([disabled]) {
290 .textbox-search-icon:not([disabled]) {
294 .textbox-search-clear:not([disabled]):hover ,
295 .textbox-search-icon:not([disabled]):hover {
296 background-position: -16px 0;
299 .textbox-search-clear:not([disabled]):hover:active ,
300 .textbox-search-icon:not([disabled]):hover:active {
301 background-position: -32px 0;
304 .client .item.tab > .item-title-container {
305 padding-inline-start: 26px;
307 .item.tab > .item-title-container {
308 padding-inline-start: 14px;
311 .item-icon-container {
317 background-size: 16px 16px;
318 background-repeat: no-repeat;
319 background-position: center;
322 .item-twisty-container {
323 background-size: contain;
324 background-repeat: no-repeat;
325 background-position: center;
327 max-width: 9px; /* The image's width is 9 pixels */
331 .item.client .item-twisty-container {
332 background-image: url("chrome://global/skin/tree/twisty.svg#open");
335 .item.client.closed .item-twisty-container {
336 background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
339 .item.client .item-twisty-container:hover {
340 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
343 .item.client.closed .item-twisty-container:hover {
344 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
347 .item.client .item-twisty-container:dir(rtl) {
348 background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
351 .item.client.closed .item-twisty-container:dir(rtl) {
352 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
355 .item.client .item-twisty-container:hover:dir(rtl) {
356 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
359 .item.client.closed .item-twisty-container:hover:dir(rtl) {
360 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");