colorized passwords

src/popup/scss/misc.scss

@@ -112,10 +112,6 @@ p.lead {
     padding-bottom: 0 !important;
 }
 
-[hidden] {
-    display: none !important;
-}
-
 .display-block {
     display: block !important;
 }
@@ -134,10 +130,6 @@ p.lead {
     border-radius: 6px;
 }
 
-input[type="search"] {
-    -webkit-appearance: textfield;
-}
-
 .sr-only {
     position: absolute !important;
     width: 1px !important;
@@ -149,6 +141,23 @@ input[type="search"] {
     border: 0 !important;
 }
 
+.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;
     width: 100%;
@@ -200,3 +209,7 @@ app-vault-icon {
         background-size: 284px 43px;
     }
 }
+
+[hidden] {
+    display: none !important;
+}

src/popup/scss/pages.scss

@@ -10,9 +10,13 @@ app-sync {
 
 app-password-generator .password-block {
     font-size: $font-size-large;
-    word-break: break-all;
     font-family: $font-family-monospace;
     text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     margin: 20px;
 }
 

src/popup/scss/variables.scss

@@ -79,6 +79,8 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'dark',
+        passwordNumberColor: #007fde,
+        passwordSpecialColor: #c40800,
     ),
     dark: (
         textColor: #ffffff,
@@ -123,6 +125,8 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'white',
+        passwordNumberColor: #52bdfb,
+        passwordSpecialColor: #ff7c70,
     ),
 );