totp generator directive

2025-12-18 09:13:33 +00:00 · 2017-07-07 00:13:26 -04:00
parent 8a90f562ef
commit ed13644a02
7 changed files with 243 additions and 4 deletions
--- a/src/less/vault.less
+++ b/src/less/vault.less
@@ -624,3 +624,60 @@ h1, h2, h3, h4, h5, h6 {
    font-size: 85%;
    font-weight: normal;
 }
+
+.totp {
+    margin-bottom: 10px;
+
+    .totp-code {
+        font-family: @font-family-monospace;
+        font-size: 1.2em;
+    }
+
+    .totp-countdown {
+        margin-right: 11px;
+        display: inline-block;
+        vertical-align: -50%;
+        user-select: none;
+
+        .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: 20px;
+            }
+
+            &.outer {
+                stroke-width: 2;
+                stroke-dasharray: 88;
+                stroke-dashoffset: 0px;
+            }
+        }
+    }
+
+    &.low {
+        .totp-sec, .totp-code {
+            color: @red;
+        }
+
+        .totp-circle {
+            stroke: @red;
+        }
+    }
+}