72 lines
1.4 KiB
SCSS
72 lines
1.4 KiB
SCSS
|
@import "variables.scss";
|
|||
|
|
|
|||
|
|
.monospaced {
|
|||
|
|
font-family: $font-family-monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sr-only {
|
|||
|
|
position: absolute !important;
|
|||
|
|
width: 1px !important;
|
|||
|
|
height: 1px !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
margin: -1px !important;
|
|||
|
|
overflow: hidden !important;
|
|||
|
|
clip: rect(0, 0, 0, 0) !important;
|
|||
|
|
border: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.outer {
|
|||
|
|
stroke-width: 2;
|
|||
|
|
stroke-dasharray: 88;
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.low {
|
|||
|
|
.totp-sec, .totp-code {
|
|||
|
|
color: $brand-danger;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.totp-circle {
|
|||
|
|
stroke: $brand-danger;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|