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.png");
114 @media (min-resolution: 1.1dppx) {
115 .item.tab > .item-title-container > .item-icon-container {
116 background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
120 .item-icon-container {
127 background-size: 16px 16px;
128 background-size: contain;
129 background-repeat: no-repeat;
130 background-position: center;
133 .item-title-container {
138 padding: 1px 0px 1px 0px;
144 text-overflow: ellipsis;
153 transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
156 .item.empty .item-title-container {
160 .client .item.empty > .item-title-container {
161 padding-inline-start: 35px;
166 flex-flow: row nowrap;
176 /* min-width of anything to override the implicit "-moz-min-content" value.
177 0px is safe as the sidebar itself has a constrained size meaning we will
178 never actually hit this minimum
184 padding-inline-end: 10px;
185 padding-inline-start: 10px;
195 text-decoration: underline;
208 transition: opacity 1.5s;
209 border-top: 1px solid #A09090;
212 .deck .sync-state.tabs-container {
216 .deck .sync-state.selected {
221 .sidebar-search-container.tabs-container:not(.selected) {
225 .textbox-search-clear:not([disabled]) {
229 .textbox-search-icons .textbox-search-clear,
230 .filtered .textbox-search-icons .textbox-search-icon {
234 .filtered .textbox-search-icons .textbox-search-clear {
238 /* === END sidebar.inc.css === */
240 /* These styles are intended to mimic XUL trees and the XUL search box. */
243 background-color: #000000;
247 padding-inline-end: 0;
255 margin-inline-end: 6px;
259 /* -moz-appearance: textfield; */
262 padding: 2px 2px 3px;
263 padding-inline-start: 4px;
265 border: 1px solid #9C9CFF;
268 .textbox-search-icon {
271 background-image: url(chrome://global/skin/icons/search.png);
272 background-repeat: no-repeat;
276 .textbox-search-icon:-moz-locale-dir(rtl) {
277 transform: scaleX(-1);
280 .textbox-search-icon[searchbutton]:not([disabled]) {
284 .textbox-search-clear {
287 background-image: url(chrome://global/skin/icons/search.png);
288 background-repeat: no-repeat;
289 background-position: 0 -16px;
292 .textbox-search-clear:not([disabled]) {
296 .textbox-search-icon:not([disabled]) {
300 .textbox-search-clear:not([disabled]):hover ,
301 .textbox-search-icon:not([disabled]):hover {
302 background-position: -16px 0;
305 .textbox-search-clear:not([disabled]):hover:active ,
306 .textbox-search-icon:not([disabled]):hover:active {
307 background-position: -32px 0;
310 .client .item.tab > .item-title-container {
311 padding-inline-start: 26px;
313 .item.tab > .item-title-container {
314 padding-inline-start: 14px;
317 .item-icon-container {
323 background-size: 16px 16px;
324 background-repeat: no-repeat;
325 background-position: center;
328 .item-twisty-container {
329 background-size: contain;
330 background-repeat: no-repeat;
331 background-position: center;
333 max-width: 9px; /* The image's width is 9 pixels */
337 .item.client .item-twisty-container {
338 background-image: url("chrome://global/skin/tree/twisty.svg#open");
341 .item.client.closed .item-twisty-container {
342 background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
345 .item.client .item-twisty-container:hover {
346 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
349 .item.client.closed .item-twisty-container:hover {
350 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
353 .item.client .item-twisty-container:dir(rtl) {
354 background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
357 .item.client.closed .item-twisty-container:dir(rtl) {
358 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
361 .item.client .item-twisty-container:hover:dir(rtl) {
362 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
365 .item.client.closed .item-twisty-container:hover:dir(rtl) {
366 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");