1 files changed, 65 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss
new file mode 100644
index 0000000000..261367433d
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss
@@ -0,0 +1,65 @@
+.stp_article_list {
+  padding: 0;
+  list-style: none;
+
+  .stp_article_list_saved_article,
+  .stp_article_list_link {
+    display: flex;
+    border-radius: 4px;
+    padding: 8px;
+    margin: 0 -8px;
+  }
+
+  .stp_article_list_link {
+    &:hover, &:focus {
+      text-decoration: none;
+      background-color: #ECECEE;
+
+      @include theme_dark {
+        background-color: #2B2A33;
+      }
+    }
+  }
+
+  .stp_article_list_thumb,
+  .stp_article_list_thumb_placeholder {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    margin-inline-end: 8px;
+    background-color: #ECECEE;
+    flex-shrink: 0;
+  }
+
+  .stp_article_list_header {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.18rem;
+    color: #15141A;
+    margin: 0 0 4px;
+
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+    word-break: break-word;
+
+    @include theme_dark {
+      color: #FBFBFE;
+    }
+  }
+
+  .stp_article_list_publisher {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 0.95rem;
+    line-height: 1.18rem;
+    color: #52525E;
+    margin: 4px 0 0;
+
+    @include theme_dark {
+      color: #CFCFD8;
+    }
+  }
+}