totp code management and countdown timer

2025-12-17 16:53:34 +00:00 · 2017-07-11 14:05:04 -04:00
parent fccaa5f8de
commit 21feb653cb
11 changed files with 245 additions and 7 deletions
--- a/src/popup/less/components.less
+++ b/src/popup/less/components.less
@@ -506,3 +506,58 @@
        border: none;
    }
 }
+
+.totp {
+    .totp-code {
+        font-family: @font-family-monospace;
+        font-size: 1.1em;
+    }
+
+    .totp-countdown {
+        margin: 3px 3px 0 0;
+        display: block;
+        user-select: none;
+        float: right;
+
+        .totp-sec {
+            font-size: 0.85em;
+            position: absolute;
+            line-height: 32px;
+            width: 32px;
+            text-align: center;
+        }
+
+        svg {
+            width: 32px;
+            height: 32px;
+            transform: rotate(-90deg);
+        }
+
+        .totp-circle {
+            stroke: @brand-primary;
+            fill: none;
+
+            &.inner {
+                stroke-width: 3;
+                stroke-dasharray: 78.6;
+                stroke-dashoffset: 0px;
+            }
+
+            &.outer {
+                stroke-width: 2;
+                stroke-dasharray: 88;
+                stroke-dashoffset: 0px;
+            }
+        }
+    }
+
+    &.low {
+        .totp-sec, .totp-code {
+            color: @brand-danger;
+        }
+
+        .totp-circle {
+            stroke: @brand-danger;
+        }
+    }
+}