diff --git a/src/components/AddressList.vue b/src/components/AddressList.vue
index c5b1a9f4b..99b66075d 100644
--- a/src/components/AddressList.vue
+++ b/src/components/AddressList.vue
@@ -3,6 +3,7 @@
-
+
{{ addressInfo.label }}
@@ -47,6 +47,10 @@ import TwoLeafStakingIcon from './icons/Staking/TwoLeafStakingIcon.vue';
export default defineComponent({
props: {
+ embedded: {
+ type: Boolean,
+ default: false,
+ },
addressInfo: {
type: Object as () => AddressInfo |
Pick & {
@@ -135,17 +139,22 @@ export default defineComponent({
right: 0;
bottom: -0.75rem;
padding: 0.25rem;
- background: white;
border-radius: 50%;
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15);
+ }
+
+ > svg.vesting-icon {
+ background: white;
color: nimiq-blue(0.7);
}
- > svg.staking-icon {
+ > svg.two-leaf-staking-icon {
font-size: 2.25rem;
- padding: 0;
+ padding: 0.125rem !important;
background: var(--nimiq-green-bg);
color: var(--nimiq-white);
+ outline: 2px solid #E7E8EA;
+ transition: outline 350ms var(--nimiq-ease);
::v-deep path {
stroke-width: 1.25px;
@@ -153,6 +162,19 @@ export default defineComponent({
}
}
+.address-button:not(.active):hover,
+.address-button:not(.active):focus {
+ .identicon-wrapper > svg.two-leaf-staking-icon {
+ outline-color: #DBDCE0;
+ }
+}
+
+.address-button.active {
+ .identicon-wrapper > svg.two-leaf-staking-icon {
+ outline-color: white;
+ }
+}
+
.label {
font-weight: 600;
padding: 0 2rem;