style fixes for colorized passwords

src/app/vault/password-generator-history.component.html

@@ -9,9 +9,8 @@
                     <div class="box-content condensed">
                         <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
                             <div class="row-main">
-                                <span class="text monospaced">
+                                <div class="text password-wrapper monospaced"
-                                    {{h.password}}
+                                     [innerHTML]="h.password | colorPassword"></div>
-                                </span>
                                 <span class="detail">{{h.date | date:'medium'}}</span>
                             </div>
                             <div class="action-buttons">

src/app/vault/view.component.html

@@ -26,8 +26,10 @@
                     <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
                         <div class="row-main">
                             <span class="row-label">{{'password' | i18n}}</span>
-                            <span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
+                            <div [hidden]="showPassword" class="monospaced password-wrapper">
-                            <span [hidden]="!showPassword" class="monospaced" [innerHTML]="cipher.login.password | colorPassword"></span>
+                                {{cipher.login.maskedPassword}}</div>
+                            <div [hidden]="!showPassword" class="monospaced password-wrapper"
+                                 [innerHTML]="cipher.login.password | colorPassword"></div>
                         </div>
                         <div class="action-buttons">
                             <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick

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,
     ),
 );