1 files changed, 135 insertions, 0 deletions
diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css
new file mode 100644
index 0000000000..f71a0d78ce
--- /dev/null
+++ b/browser/themes/shared/sidebar.css
@@ -0,0 +1,135 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#sidebar-box {
+  --sidebar-background-color: Field;
+  --sidebar-text-color: FieldText;
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+  text-shadow: none;
+}
+
+#sidebar-header {
+  font-size: 1.333em;
+  padding: 8px;
+  border-bottom: 1px solid var(--sidebar-border-color);
+}
+
+#sidebar-spacer {
+  /* To ensure the button doesn't expand unnecessarily for short labels, the
+     spacer should significantly out-flex the button. */
+  flex: 1000 1000;
+}
+
+#sidebar {
+  flex: 1;
+}
+
+@media not (-moz-platform: linux) {
+  /* We don't let the splitter overlap the sidebar on Linux since the sidebar's
+  scrollbar is too narrow on Linux. */
+  .sidebar-splitter {
+    appearance: none;
+    border: 0 solid;
+    border-inline-end-width: 1px;
+    border-color: var(--sidebar-border-color);
+    min-width: 1px;
+    width: 4px;
+    background-image: none !important;
+    background-color: transparent;
+    margin-inline-start: -4px;
+    position: relative;
+  }
+
+  #sidebar-box[positionend] + .sidebar-splitter {
+    border-inline-width: 1px 0;
+    margin-inline: 0 -4px;
+  }
+}
+
+#sidebar-throbber[loading="true"] {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+}
+
+@media (min-resolution: 2dppx) {
+  #sidebar-throbber[loading="true"] {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+    width: 16px;
+  }
+}
+
+#sidebar-title {
+  margin: 0;
+  padding: 0;
+  padding-inline: 8px 4px;
+  flex: 1;
+}
+
+#sidebar-switcher-arrow {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
+
+#sidebar-switcher-arrow {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  width: 12px;
+  height: 12px;
+}
+
+#sidebar-switcher-target {
+  appearance: none;
+  color: inherit;
+  margin-inline-end: 4px;
+  border-radius: var(--toolbarbutton-border-radius);
+  border: 1px solid transparent;
+  padding: 2px 4px;
+  flex: 1;
+}
+
+#sidebar-switcher-target:hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+#sidebar-switcher-target:hover:active,
+#sidebar-switcher-target.active {
+  background-color: var(--toolbarbutton-active-background);
+}
+
+#sidebar-switcher-target:focus-visible,
+#sidebar-close:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 0;
+}
+
+#sidebarMenu-popup .subviewbutton {
+  min-width: 190px;
+}
+
+toolbarseparator + #sidebar-extensions-separator {
+  display: none;
+}
+
+#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://browser/skin/bookmark.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
+
+#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://browser/skin/history.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
+
+#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}