diff --git a/src/popup/app/accounts/views/accountsLogin.html b/src/popup/app/accounts/views/accountsLogin.html index c9582645..2c2ebed7 100644 --- a/src/popup/app/accounts/views/accountsLogin.html +++ b/src/popup/app/accounts/views/accountsLogin.html @@ -26,7 +26,7 @@ -
+
diff --git a/src/popup/app/vault/views/vault.html b/src/popup/app/vault/views/vault.html index ed01f1a1..40bfb6cc 100644 --- a/src/popup/app/vault/views/vault.html +++ b/src/popup/app/vault/views/vault.html @@ -1,6 +1,6 @@ diff --git a/src/popup/less/components.less b/src/popup/less/components.less index 55d41e45..fd59cd61 100644 --- a/src/popup/less/components.less +++ b/src/popup/less/components.less @@ -19,10 +19,17 @@ text-decoration: none; background: none; - &:hover { + &:hover, &:focus { background-color: rgba(255, 255, 255, 0.1); + } + + &:hover { text-decoration: none; } + + &:focus { + text-decoration: underline; + } } .title { @@ -133,7 +140,7 @@ overflow: hidden; text-overflow: ellipsis; - &:hover { + &:hover, &:focus { background-color: @list-item-hover; } @@ -234,7 +241,7 @@ } } - &:hover { + &:hover, &:focus, &.active { background-color: @list-item-hover; } @@ -271,6 +278,11 @@ padding: 10px 8px 10px 8px; background: none; border: none; + color: @brand-primary; + + &:hover, &:focus { + color: darken(@brand-primary, 10%); + } &.disabled { color: @text-disabled; @@ -380,59 +392,10 @@ -moz-border-radius: 0; } -.generate-password-block { - margin: 20px; - font-size: 19px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-family: @font-family-monospace; +.btn-link { + color: @brand-primary-accent; } -.about-page { - padding-top: 50px; - text-align: center; - - img { - margin: 0 auto 20px; - width: 220px; - display: block; - } -} - -.home-page { - padding: 120px 20px 20px; - text-align: center; - position: relative; - height: 100%; - - img { - margin: 0 auto 30px; - width: 250px; - display: block; - } - - p { - font-size: 18px; - } - - .buttons { - position: absolute; - bottom: 0; - width: 100%; - left: 0; - padding: 20px; - } -} - -.splash-page { - text-align: center; - padding: 160px 20px 0; - - img { - width: 250px; - display: block; - margin: 0 auto; - } +.text-accent { + color: @brand-primary-accent; } diff --git a/src/popup/less/pages.less b/src/popup/less/pages.less new file mode 100644 index 00000000..4b18c2eb --- /dev/null +++ b/src/popup/less/pages.less @@ -0,0 +1,67 @@ +@import (reference) "variables.less"; +@import (reference) "mixins.less"; + +.generate-password-block { + margin: 20px; + font-size: 19px; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: @font-family-monospace; +} + +.about-page { + padding-top: 50px; + text-align: center; + + img { + margin: 0 auto 20px; + width: 220px; + display: block; + } +} + +.home-page { + padding: 100px 20px 20px; + text-align: center; + position: relative; + height: 100%; + + img { + margin: 0 auto 30px; + width: 250px; + display: block; + } + + p { + font-size: 18px; + } + + .buttons { + position: absolute; + bottom: 0; + width: 100%; + left: 0; + padding: 20px; + + .btn { + font-size: @font-size-base; + } + + .btn-link { + font-weight: 600; + } + } +} + +.splash-page { + text-align: center; + padding: 160px 20px 0; + + img { + width: 250px; + display: block; + margin: 0 auto; + } +} diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less index 21fb9c12..5c90c047 100644 --- a/src/popup/less/popup.less +++ b/src/popup/less/popup.less @@ -4,6 +4,7 @@ @import "components.less"; @import "animations.less"; @import "plugins.less"; +@import "pages.less"; body { width: 320px; diff --git a/src/popup/less/variables.less b/src/popup/less/variables.less index 7d129c10..d3adecff 100644 --- a/src/popup/less/variables.less +++ b/src/popup/less/variables.less @@ -16,3 +16,4 @@ @brand-success: #00a65a; @brand-info: #00c0ef; @brand-warning: #f39c12; +@brand-primary-accent: #286090; diff --git a/src/popup/scripts/popup.js b/src/popup/scripts/popup.js index 2b31276d..9fdf4fa9 100644 --- a/src/popup/scripts/popup.js +++ b/src/popup/scripts/popup.js @@ -32,6 +32,12 @@ select.openSelect(); } }); + + $('.list-section-item input, .list-section-item select, .list-section-item textarea').focus(function (e) { + $(this).parent().addClass('active'); + }).blur(function (e) { + $(this).parent().removeClass('active'); + }); } return self;