#receive {
._title {
@include breakpoint(portrait) {
font-size: 20px;
}
}
}
.address__box {
@extend .generic_box;
margin-top: 5px;
margin-bottom: 20px;
position: relative;
@include breakpoint(portrait) {
margin-bottom: 40px;
}
._address {
@include ellipsis();
@include textselect;
@extend .jigsaw-light;
display: block;
padding-right: 40px;
}
._btn {
@extend .csbtn;
width: 36px;
height: 36px;
position: absolute;
right: 3px;
top: 50%;
margin-top: -20px;
padding: 0;
padding-top: 7px;
border-radius: 2px;
@include breakpoint(portrait) {
width: 48px;
height: 48px;
margin-top: -25px;
right: 4px;
}
._icon {
width: 26px;
height: 26px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
@include breakpoint(portrait) {
width: 36px;
height: 36px;
margin-top: -18px;
margin-left: -18px;
}
}
}
@include breakpoint(portrait) {
font-size: 26px;
border-radius: 3px;
}
}
.receive__label {
position: relative;
._help {
@include clickbtn;
position: absolute;
top: 0;
right: -5px;
font-size: 12px;
text-align: center;
width: 26px;
height: 26px;
padding: 4px;
opacity: 0.4;
@include breakpoint(portrait) {
width: 32px;
height: 32px;
}
&:hover {
opacity: 0.7;
}
.svg-help {
fill: #333;
}
}
}
.geo__box {
@extend .generic_box;
margin-top: 5px;
text-align: center;
@include breakpoint(portrait) {
font-size: 26px;
border-radius: 4px;
}
._btn {
@extend .csbtn;
margin-bottom: 5px;
@include breakpoint(portrait) {
font-size: 26px;
border-radius: 3px;
}
&.is_broadcasting {
background-color: $yellow;
box-shadow: 0 3px 0 0 darken($yellow, 10%);
color: darken($yellow, 20%);
&:hover {
color: darken($yellow, 20%);
}
}
&.is_connecting {
background-color: $grey;
box-shadow: 0 3px 0 0 darken($grey, 10%);
color: darken($grey, 20%);
&:hover {
color: darken($grey, 20%);
}
}
}
._text {
font-size: 12px;
line-height: 1.3;
color: $grey;
}
}
#qr-modal {
@extend .overlay;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
overflow-y: hidden;
}
#qr-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: translateY(100%);
transition: transform ease 0.3s;
&.is_visible {
transform: translateY(0);
}
.qr__content {
position: absolute;
background-color: white;
top: 20px;
left: 15px;
right: 15px;
border-radius: 5px;
border: 5px solid white;
}
canvas {
margin: 0 auto;
border-radius: 3px;
}
}
.qr-code {
display: table;
margin: 0 auto;
}
