1 files changed, 132 insertions, 0 deletions
diff --git a/browser/themes/windows/syncedtabs/sidebar.css b/browser/themes/windows/syncedtabs/sidebar.css
new file mode 100644
index 000000000..6473206bc
--- /dev/null
+++ b/browser/themes/windows/syncedtabs/sidebar.css
@@ -0,0 +1,132 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/syncedtabs/sidebar.inc.css
+
+/* These styles are intended to mimic XUL trees and the XUL search box. */
+
+html {
+  background-color: #EEF3FA;
+}
+
+.item {
+  padding-inline-end: 0;
+}
+
+.item-title {
+  margin: 1px 0 0;
+}
+
+.item-title {
+  margin-inline-end: 6px;
+}
+
+.search-box {
+  -moz-appearance: textfield;
+  cursor: text;
+  margin: 2px 4px;
+  padding: 2px 2px 3px;
+  padding-inline-start: 4px;
+  color: -moz-FieldText;
+}
+
+.textbox-search-icon {
+  width: 16px;
+  height: 16px;
+  background-image: url(chrome://global/skin/icons/Search-glass.png);
+  background-repeat: no-repeat;
+  display: block;
+}
+
+.textbox-search-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.textbox-search-icon[searchbutton]:not([disabled]) {
+  cursor: pointer;
+}
+
+.textbox-search-clear {
+  width: 16px;
+  height: 16px;
+  background-image: url(chrome://global/skin/icons/Search-close.png);
+  background-repeat: no-repeat;
+}
+
+.textbox-search-clear:not([disabled]) {
+  cursor: default;
+}
+
+.textbox-search-icon:not([disabled]) {
+  cursor: text;
+}
+
+.textbox-search-clear:not([disabled]):hover ,
+.textbox-search-icon:not([disabled]):hover {
+  background-position: -16px 0;
+}
+
+.textbox-search-clear:not([disabled]):hover:active ,
+.textbox-search-icon:not([disabled]):hover:active {
+  background-position: -32px 0;
+}
+
+.client .item.tab > .item-title-container {
+  padding-inline-start: 26px;
+}
+.item.tab > .item-title-container {
+  padding-inline-start: 14px;
+}
+
+.item-icon-container {
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+  margin-right: 5px;
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.item-twisty-container {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding-top: 5px;
+  min-width: 9px; /* The image's width is 9 pixels */
+  height: 9px;
+}
+
+.item.client .item-twisty-container {
+  background-image: url("chrome://global/skin/tree/twisty.svg#open");
+}
+
+.item.client.closed .item-twisty-container {
+  background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
+}
+
+.item.client .item-twisty-container:hover {
+  background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
+}
+
+.item.client.closed .item-twisty-container:hover {
+  background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
+}
+
+.item.client .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
+}
+
+.item.client.closed .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
+}
+
+.item.client .item-twisty-container:hover:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
+}
+
+.item.client.closed .item-twisty-container:hover:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");
+}