assets/styles/components/_connect-wallet.scss
@import '@/assets/styles/abstracts/variables';
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.connect-wallet-modal {
.modal-content {
border: none !important;
}
.modal-background {
background-color: rgba(0, 0, 0, 0.17) !important;
}
.wallet-modal-container {
position: fixed;
top: 0;
right: 0;
height: calc(100% - $navbar-desktop-min-height) ;
margin-top: $navbar-desktop-min-height;
max-width: 360px;
width: 100%;
@include mobile {
inset: 0;
border-left: none !important;
max-width: 100vw;
height: calc(100% - $navbar-mobile-min-height) ;
margin-top: $navbar-mobile-min-height;
}
@include ktheme() {
background: theme('background-color');
border-left: 1px solid theme('border-color');
}
.modal-card-body {
padding: 0;
display: block;
@include ktheme() {
background-color: theme('background-color');
}
hr {
@apply bg-k-shade2 #{!important};
}
}
footer {
@include ktheme() {
border-top: 1px solid theme('border-color');
}
}
.confirm-button {
width: 100%;
height: 2.2rem;
font-size: 1rem;
}
.wallet-menu-item {
width: 100%;
.button {
@apply w-full text-xl rounded-none border-none transition-none;
background: unset;
box-shadow: none !important;
> span {
flex: 1;
}
.icon {
margin-right: 0 !important;
}
@include ktheme() {
color: theme('text-color');
&:hover {
background-color: theme('k-accentlight2') !important;
}
}
}
.auth-tip {
margin: 0 2rem;
@include ktheme() {
color: theme('text-color');
border-left: 1px solid theme('k-shade');
}
i {
animation: rotate 1s linear infinite;
}
}
.account-list {
.account-item {
padding: 10px 0;
margin: 0 2rem;
a {
@include ktheme() {
color: theme('text-color');
border-left: 1px solid theme('k-shade');
&:hover {
color: theme('text-color');
}
}
.account-name {
line-height: 14px;
}
.account-address {
line-height: 19px;
}
}
&:hover {
@include ktheme() {
background-color: theme('k-accentlight2') !important;
}
}
}
}
}
section {
height: 100%;
overflow-y: auto;
}
}
.wallet-asset {
height: 100%;
&-container {
padding: 0 2rem;
}
.identity-address a {
font-weight: normal !important;
@include ktheme() {
color: theme('k-blue') !important;
}
}
}
}
.modal-card-title {
@include ktheme() {
color: theme('text-color');
}
}