1 files changed, 62 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-timeline.css b/browser/components/aboutlogins/content/components/login-timeline.css
new file mode 100644
index 0000000000..1e6eaa2b30
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-timeline.css
@@ -0,0 +1,62 @@
+/* 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/. */
+
+.timeline {
+  display: grid;
+  grid-template-rows: 24px auto auto;
+  font-size: smaller;
+  color: var(--text-color-deemphasized);
+  padding-inline-start: 0;
+  text-align: center;
+}
+
+.timeline.empty {
+  display: none;
+}
+
+.timeline > svg {
+  grid-row: 1 / 1;
+  fill: var(--in-content-box-background);
+}
+
+.timeline > .line {
+  height: 2px;
+  justify-self: stretch;
+  align-self: center;
+  background-color: var(--in-content-border-color);
+  grid-row: 1;
+}
+
+.timeline > .line:nth-child(1) {
+  grid-column: 1;
+  width: 50%;
+  justify-self: flex-end;
+}
+
+.timeline > .line:nth-child(2) {
+  grid-column: 2/-2;
+}
+
+.timeline > .line:nth-child(3) {
+  grid-column: -2;
+  width: 50%;
+  justify-self: flex-start;
+}
+
+.timeline > .point {
+  width: 24px;
+  height: 24px;
+  stroke: var(--in-content-border-color);
+  stroke-width: 30px;
+  justify-self: center;
+}
+
+.timeline > .date {
+  grid-row: 2;
+  padding: 4px 8px;
+}
+
+.timeline > .action {
+  grid-row: 3;
+}