style fixes for colorized passwords

src/scss/base.scss

@@ -64,18 +64,6 @@ input, select, textarea {
     }
 }
 
-.passwordNumber {
-    @include themify($themes) {
-        color: themed('passwordNumberColor');
-    }
-}
-
-.passwordSpecial {
-    @include themify($themes) {
-        color: themed('passwordSpecialColor');
-    }
-}
-
 input, select, textarea, button {
     font-size: $font-size-base;
     font-family: $font-family-sans-serif;

src/scss/misc.scss

@@ -88,10 +88,6 @@ p.lead {
     font-weight: normal;
 }
 
-[hidden] {
-    display: none !important;
-}
-
 .monospaced {
     font-family: $font-family-monospace;
 }
@@ -170,10 +166,10 @@ p.lead {
 
 .password-block {
     font-size: $font-size-large;
-    word-break: break-all;
     font-family: $font-family-monospace;
-    min-height: 60px;
+    min-height: 50px;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -183,6 +179,23 @@ p.lead {
     }
 }
 
+.password-wrapper {
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+.password-number {
+    @include themify($themes) {
+        color: themed('passwordNumberColor');
+    }
+}
+
+.password-special {
+    @include themify($themes) {
+        color: themed('passwordSpecialColor');
+    }
+}
+
 #duo-frame {
     background: url('../images/loading.svg') 0 0 no-repeat;
     height: 330px;
@@ -264,3 +277,7 @@ app-root > #loading {
         content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
     }
 }
+
+[hidden] {
+    display: none !important;
+}

src/scss/variables.scss

@@ -41,8 +41,6 @@ $button-color-danger: darken($brand-danger, 10%);
 $themes: (
     light: (
         textColor: $text-color,
-        passwordNumberColor: #007fde,
-        passwordSpecialColor: #c40800,
         borderColor: $border-color-dark,
         backgroundColor: $background-color,
         backgroundColorAlt: $background-color-alt,
@@ -86,11 +84,11 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'dark',
+        passwordNumberColor: #007fde,
+        passwordSpecialColor: #c40800,
     ),
     dark: (
         textColor: #ffffff,
-        passwordNumberColor: #9fd9ff,
-        passwordSpecialColor: #ff7c70,
         borderColor: #2f2f2f,
         backgroundColor: #363636,
         backgroundColorAlt: #3d3d3d,
@@ -134,11 +132,11 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'white',
+        passwordNumberColor: #52bdfb,
+        passwordSpecialColor: #ff7c70,
     ),
     nord: (
         textColor: $nord5,
-        passwordNumberColor: $nord8,
-        passwordSpecialColor: $nord12,
         borderColor: $nord0,
         backgroundColor: $nord2,
         backgroundColorAlt: $nord1,
@@ -182,6 +180,8 @@ $themes: (
         infoColor: $nord9,
         warningColor: $nord12,
         logoSuffix: 'white',
+        passwordNumberColor: $nord8,
+        passwordSpecialColor: $nord12,
     ),
 );