1 files changed, 210 insertions, 0 deletions
diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css
new file mode 100644
index 0000000000..d8bb12e241
--- /dev/null
+++ b/browser/themes/shared/places/sidebar.css
@@ -0,0 +1,210 @@
+/* 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/. */
+
+.sidebar-panel {
+  appearance: none;
+  background-color: transparent;
+}
+
+/* Themed sidebars */
+
+.sidebar-panel[lwt-sidebar] {
+  background-color: var(--lwt-sidebar-background-color);
+  color: var(--lwt-sidebar-text-color);
+  color-scheme: light;
+
+  scrollbar-color:
+    light-dark(
+      rgba(204,204,204,.5),
+      rgba(249,249,250,.4)
+    )
+    light-dark(
+      rgba(230,230,235,.5),
+      rgba(20,20,25,.3)
+    );
+}
+
+.sidebar-panel[lwt-sidebar="dark"] {
+  color-scheme: dark;
+}
+
+.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) {
+  background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1));
+}
+
+.sidebar-panel[lwt-sidebar="dark"] .sidebar-placesTreechildren {
+  &::-moz-tree-image(selected),
+  &::-moz-tree-twisty(selected),
+  &::-moz-tree-cell-text(selected) {
+    color: var(--lwt-sidebar-text-color);
+  }
+}
+
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren {
+  &::-moz-tree-row(selected,focus) {
+    background-color: var(--lwt-sidebar-highlight-background-color);
+  }
+
+  &::-moz-tree-image(selected, focus),
+  &::-moz-tree-twisty(selected, focus),
+  &::-moz-tree-cell-text(selected, focus) {
+    color: var(--lwt-sidebar-highlight-text-color, var(--lwt-sidebar-text-color, var(--sidebar-text-color)));
+  }
+}
+
+/* Sidebar tree */
+
+.sidebar-placesTree {
+  appearance: none;
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  margin: 0;
+}
+
+/* View button */
+
+#viewButton {
+  appearance: none;
+  border-radius: 4px;
+  padding: 2px 4px;
+  color: inherit;
+}
+
+#viewButton:hover {
+  /* Matches --toolbarbutton-hover-background: */
+  background-color: color-mix(in srgb, currentColor 17%, transparent);
+}
+
+#viewButton[open] {
+  /* Matches --toolbarbutton-active-background: */
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+#viewButton:focus-visible {
+  outline: var(--focus-outline);
+}
+
+#viewButton > .button-box > .button-menu-dropmarker {
+  appearance: none;
+  display: flex;
+  content: url("chrome://global/skin/icons/arrow-down-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+@media (-moz-platform: windows) {
+  :root[uidensity=touch] #search-box,
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell,
+  .sidebar-placesTreechildren::-moz-tree-twisty {
+    padding: 0 4px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
+    cursor: pointer;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
+    cursor: default;
+  }
+
+  @media not (prefers-contrast) {
+    .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+      text-decoration: none;
+    }
+  }
+
+  /* Default button vert. margins are 1px/2px, and this can cause misalignment */
+  #viewButton {
+    margin: 0;
+    margin-inline-start: 4px;
+    border-radius: 2px;
+  }
+
+  #sidebar-search-container {
+    padding: 8px;
+  }
+
+  #search-box {
+    margin: 0;
+  }
+}
+
+@media (-moz-platform: linux) {
+  #sidebar-search-container {
+    padding: 8px;
+  }
+
+  #search-box {
+    margin: 0;
+  }
+
+  #viewButton {
+    margin: 1px 0;
+    margin-inline-start: 4px;
+  }
+
+  :root[uidensity=touch] #search-box,
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
+    cursor: pointer;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
+    cursor: default;
+  }
+}
+
+@media (-moz-platform: macos) {
+  .sidebar-placesTree {
+    margin: 0;
+    /* Default font size is 11px on mac, so this is 12px */
+    font-size: 1.0909rem;
+  }
+
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-separator {
+    border-top: 1px solid #505d6d;
+    margin: 0 10px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text {
+    margin-inline-end: 6px;
+  }
+
+  #sidebar-search-container {
+    /* Native searchbar styling already adds 4px margin on Mac, so
+     * adding 4px padding results in 8px of total whitespace. */
+    padding: 4px;
+  }
+
+  #viewButton {
+    margin: 4px 0;
+    margin-inline-end: 4px;
+    /* Default font size is 11px on mac, so this is 12px */
+    font-size: 1.0909rem;
+  }
+}