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.tab > .item-title-container > .item-icon-container {
95 background-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
98 @media (min-resolution: 1.1dppx) {
99 .item.tab > .item-title-container > .item-icon-container {
100 background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
104 .item-icon-container {
111 background-size: 16px 16px;
112 background-size: contain;
113 background-repeat: no-repeat;
114 background-position: center;
117 .item-title-container {
122 padding: 1px 0px 1px 0px;
128 text-overflow: ellipsis;
136 transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
139 .item.empty .item-title-container {
143 .client .item.empty > .item-title-container {
144 padding-inline-start: 35px;
149 flex-flow: row nowrap;
159 /* min-width of anything to override the implicit "-moz-min-content" value.
160 0px is safe as the sidebar itself has a constrained size meaning we will
161 never actually hit this minimum
167 padding-inline-end: 10px;
168 padding-inline-start: 10px;
178 text-decoration: underline;
191 transition: opacity 1.5s;
192 border-top: 1px solid #A09090;
195 .deck .sync-state.tabs-container {
199 .deck .sync-state.selected {
204 .sidebar-search-container.tabs-container:not(.selected) {
208 .textbox-search-clear:not([disabled]) {
212 .textbox-search-icons .textbox-search-clear,
213 .filtered .textbox-search-icons .textbox-search-icon {
217 .filtered .textbox-search-icons .textbox-search-clear {
221 /* === END sidebar.inc.css === */
223 /* These styles are intended to mimic XUL trees and the XUL search box. */
226 background-color: #000000;
238 -moz-margin-end: 6px;
242 /* -moz-appearance: textfield; */
245 padding: 2px 2px 3px;
246 -moz-padding-start: 4px;
248 border: 1px solid #9C9CFF;
251 .textbox-search-icon {
254 background-image: url(chrome://global/skin/icons/search.png);
255 background-repeat: no-repeat;
259 .textbox-search-icon:-moz-locale-dir(rtl) {
260 transform: scaleX(-1);
263 .textbox-search-icon[searchbutton]:not([disabled]) {
267 .textbox-search-clear {
270 background-image: url(chrome://global/skin/icons/search.png);
271 background-repeat: no-repeat;
272 background-position: 0 -16px;
275 .textbox-search-clear:not([disabled]) {
279 .textbox-search-icon:not([disabled]) {
283 .textbox-search-clear:not([disabled]):hover ,
284 .textbox-search-icon:not([disabled]):hover {
285 background-position: -16px 0;
288 .textbox-search-clear:not([disabled]):hover:active ,
289 .textbox-search-icon:not([disabled]):hover:active {
290 background-position: -32px 0;
293 .client .item.tab > .item-title-container {
294 padding-inline-start: 26px;
296 .item.tab > .item-title-container {
297 padding-inline-start: 14px;
300 .item-icon-container {
306 background-size: 16px 16px;
307 background-repeat: no-repeat;
308 background-position: center;
311 .item-twisty-container {
312 background-size: contain;
313 background-repeat: no-repeat;
314 background-position: center;
316 width: 9px; /* The image's width is 9 pixels */
320 .item.client .item-twisty-container {
321 background-image: url("chrome://global/skin/tree/twisty.svg#open");
324 .item.client.closed .item-twisty-container {
325 background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
328 .item.client .item-twisty-container:hover {
329 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
332 .item.client.closed .item-twisty-container:hover {
333 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
336 .item.client .item-twisty-container:-moz-dir(rtl) {
337 background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
340 .item.client.closed .item-twisty-container:-moz-dir(rtl) {
341 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
344 .item.client .item-twisty-container:hover:-moz-dir(rtl) {
345 background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
348 .item.client.closed .item-twisty-container:hover:-moz-dir(rtl) {
349 background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");