1 files changed, 148 insertions, 0 deletions
diff --git a/arc-firefox-theme/chrome/browser/readinglist/sidebar.css b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css
new file mode 100644
index 0000000..27fc12b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css
@@ -0,0 +1,148 @@
+/* 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/. */
+
+
+:root, body {
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  font: message-box;
+  color: #333333;
+  -moz-user-select: none;
+  overflow: hidden;
+}
+
+#emptyListInfo {
+  cursor: default;
+  padding: 3em 1em;
+  text-align: center;
+}
+
+.item {
+  display: flex;
+  flex-flow: row;
+  cursor: pointer;
+  padding: 6px;
+  opacity: 0;
+  max-height: 0;
+  transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
+}
+
+.item.active {
+  background: #FEFEFE;
+}
+
+.item.selected {
+  background: #FDFDFD;
+}
+
+.item-thumb-container {
+  min-width: 64px;
+  max-width: 64px;
+  min-height: 40px;
+  max-height: 40px;
+  border: 1px solid white;
+  box-shadow: 0px 1px 2px rgba(0,0,0,.35);
+  margin: 5px;
+  background-color: #ebebeb;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("chrome://branding/content/silhouette-40.svg");
+}
+
+.item-thumb-container.preview-available {
+  background-color: #fff;
+  background-size: cover;
+}
+
+.item-summary-container {
+  display: flex;
+  flex-flow: column;
+  -moz-padding-start: 4px;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.item-title-lines {
+  display: flex;
+}
+
+.item-title {
+  overflow: hidden;
+  max-height: 2.8em;
+  line-height: 1.4;
+  flex-grow: 1;
+}
+
+.item-domain {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-height: 1.4em;
+  color: #0095DD;
+}
+
+.item:hover .item-domain {
+  color: #008ACB;
+}
+
+.item:not(:hover):not(.selected) .remove-button {
+  visibility: hidden;
+}
+
+.remove-button {
+  padding: 0;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  background-size: contain;
+  background-color: transparent;
+  border-width: 0;
+}
+
+.item.visible {
+  opacity: 1;
+  max-height: 80px;
+  transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms;
+}
+
+html {
+  border: 1px solid ThreeDShadow;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  box-sizing: border-box;
+}
+
+.item {
+  -moz-padding-end: 0;
+}
+
+.item.active {
+  background-color: -moz-cellhighlight;
+  color: -moz-cellhighlighttext;
+}
+
+.item-title {
+  margin: 1px 0 0;
+}
+
+.item-title, .item-domain {
+  -moz-margin-end: 6px;
+}
+
+.remove-button {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
+}
+
+.remove-button:hover {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
+}
+
+.remove-button:hover:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
+}