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.selected > .item-title-container > .item-icon-container {
95 background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon-inverted");
98 .item.client.device-image-desktop:not(.selected) > .item-title-container > .item-icon-container,
99 .item.client.device-image-desktop.selected > .item-title-container > .item-icon-container:-moz-window-inactive {
100 background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon");
103 .item.client.device-image-mobile.selected > .item-title-container > .item-icon-container {
104 background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted");
107 .item.client.device-image-mobile:not(.selected) > .item-title-container > .item-icon-container,
108 .item.client.device-image-mobile.selected > .item-title-container > .item-icon-container:-moz-window-inactive {
109 background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon");
112 .item.tab > .item-title-container > .item-icon-container {
113 background-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
116 @media (min-resolution: 1.1dppx) {
117 .item.tab > .item-title-container > .item-icon-container {
118 background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
122 .item-icon-container {
129 background-size: 16px 16px;
130 background-size: contain;
131 background-repeat: no-repeat;
132 background-position: center;
135 .item-title-container {
140 padding: 1px 0px 1px 0px;
146 text-overflow: ellipsis;
155 transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
158 .item.empty .item-title-container {
162 .client .item.empty > .item-title-container {
163 padding-inline-start: 35px;
168 flex-flow: row nowrap;
178 /* min-width of anything to override the implicit "-moz-min-content" value.
179 0px is safe as the sidebar itself has a constrained size meaning we will
180 never actually hit this minimum
186 padding-inline-end: 10px;
187 padding-inline-start: 10px;
197 text-decoration: underline;
210 transition: opacity 1.5s;
211 border-top: 1px solid #A09090;
214 .deck .sync-state.tabs-container {
218 .deck .sync-state.selected {
223 .sidebar-search-container.tabs-container:not(.selected) {
227 .textbox-search-clear:not([disabled]) {
231 .textbox-search-icons .textbox-search-clear,
232 .filtered .textbox-search-icons .textbox-search-icon {
236 .filtered .textbox-search-icons .textbox-search-clear {
240 /* === END sidebar.inc.css === */
242 /* These styles are intended to mimic XUL trees and the XUL search box. */
245 background-color: #000000;
249 padding-inline-end: 0;
257 margin-inline-end: 6px;
261 /* -moz-appearance: textfield; */
264 padding: 2px 2px 3px;
265 padding-inline-start: 4px;
267 border: 1px solid #9C9CFF;
270 .textbox-search-icon {
273 background-image: url(chrome://global/skin/icons/search.png);
274 background-repeat: no-repeat;
278 .textbox-search-icon:-moz-locale-dir(rtl) {
279 transform: scaleX(-1);
282 .textbox-search-icon[searchbutton]:not([disabled]) {
286 .textbox-search-clear {
289 background-image: url(chrome://global/skin/icons/search.png);
290 background-repeat: no-repeat;
291 background-position: 0 -16px;
294 .textbox-search-clear:not([disabled]) {
298 .textbox-search-icon:not([disabled]) {
302 .textbox-search-clear:not([disabled]):hover ,
303 .textbox-search-icon:not([disabled]):hover {
304 background-position: -16px 0;
307 .textbox-search-clear:not([disabled]):hover:active ,
308 .textbox-search-icon:not([disabled]):hover:active {
309 background-position: -32px 0;
312 .client .item.tab > .item-title-container {
313 padding-inline-start: 26px;
315 .item.tab > .item-title-container {
316 padding-inline-start: 14px;
319 .item-icon-container {
325 background-size: 16px 16px;
326 background-repeat: no-repeat;
327 background-position: center;
330 .item-twisty-container {
331 background-size: contain;
332 background-repeat: no-repeat;
333 background-position: center;
335 max-width: 9px; /* The image's width is 9 pixels */
339 .item.client .item-twisty-container {
340 background-image: url("chrome://global/skin/tree/twisty.svg#open");
343 .item.client.closed .item-twisty-container {
344 background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
347 .item.client .item-twisty-container:hover {
348 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
351 .item.client.closed .item-twisty-container:hover {
352 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
355 .item.client .item-twisty-container:dir(rtl) {
356 background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
359 .item.client.closed .item-twisty-container:dir(rtl) {
360 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
363 .item.client .item-twisty-container:hover:dir(rtl) {
364 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
367 .item.client.closed .item-twisty-container:hover:dir(rtl) {
368 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");