Merge pull request #2637 from YegorSan/frontend-tasks
Changed text color for all error messages boxes for coin_balances page to the required one / Main Blockscout page banner height bug fix and new changes / New tooltips for Block Details page added / Token image added to the Token instance page.pull/2659/head
commit
57bc96176a
@ -0,0 +1,86 @@ |
|||||||
|
/* Custom Tooltips for Block Details Page */ |
||||||
|
|
||||||
|
.tooltipCustom { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.tooltipCustom .tooltiptextTopMiner { |
||||||
|
visibility: hidden; |
||||||
|
position: absolute; |
||||||
|
width: 50%; |
||||||
|
background-color: white; |
||||||
|
color: black; |
||||||
|
text-align: center; |
||||||
|
border-radius: 6px; |
||||||
|
left: 25%; |
||||||
|
bottom: 100%; |
||||||
|
padding: 15px 0px; |
||||||
|
display: inline-block; |
||||||
|
z-index: 1; |
||||||
|
font-family: Nunito; |
||||||
|
margin-bottom: 15px; |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.5s; |
||||||
|
@include media-breakpoint-down(lg) { |
||||||
|
left: 60%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tooltipCustom .tooltiptextTopMiner::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
top: 100%; |
||||||
|
left: 50%; |
||||||
|
margin-left: -5px; |
||||||
|
border-width: 5px; |
||||||
|
border-style: solid; |
||||||
|
border-color: white transparent transparent transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.tooltipCustom:hover .tooltiptextTopMiner { |
||||||
|
visibility: visible; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.tooltipCustom .tooltiptextTopR { |
||||||
|
visibility: hidden; |
||||||
|
position: absolute; |
||||||
|
width: 50%; |
||||||
|
background-color: $primary; |
||||||
|
color: white; |
||||||
|
text-align: center; |
||||||
|
border-radius: 6px; |
||||||
|
left: 52%; |
||||||
|
bottom: 120%; |
||||||
|
padding: 15px 10px; |
||||||
|
font-family: Nunito; |
||||||
|
display: inline-block; |
||||||
|
z-index: 1; |
||||||
|
margin-bottom: 15px; |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.5s; |
||||||
|
@include media-breakpoint-down(lg) { |
||||||
|
bottom: 100%; |
||||||
|
padding: 9px 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tooltipCustom .tooltiptextTopR::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
top: 100%; |
||||||
|
left: 50%; |
||||||
|
margin-left: -5px; |
||||||
|
border-width: 5px; |
||||||
|
border-style: solid; |
||||||
|
border-color: $primary transparent transparent transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.tooltipCustom:hover .tooltiptextTopR { |
||||||
|
visibility: visible; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Custom Tooltips for Block Details Page end*/ |
@ -1,46 +1,53 @@ |
|||||||
.transaction-bottom-panel { |
.transaction-bottom-panel { |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||||||
flex-direction: row; |
flex-direction: row; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
align-items: flex-end; |
align-items: flex-end; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.transaction-bottom-panel { |
.transaction-bottom-panel { |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||||||
flex-direction: row; |
flex-direction: row; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
align-items: flex-end; |
align-items: flex-end; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.download-all-transactions { |
.download-all-transactions { |
||||||
text-align: center; |
text-align: center; |
||||||
color: #a3a9b5; |
color: #a3a9b5; |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
margin-top: 10px; |
margin-top: 10px; |
||||||
@media (min-width: 768px) { |
@media (min-width: 768px) { |
||||||
margin-top: 30px; |
margin-top: 30px; |
||||||
} |
} |
||||||
.download-all-transactions-link { |
.download-all-transactions-link { |
||||||
display: inline-flex; |
display: inline-flex; |
||||||
align-items: center; |
align-items: center; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
svg { |
svg { |
||||||
position: relative; |
position: relative; |
||||||
margin-left: 2px; |
margin-left: 2px; |
||||||
top: -3px; |
top: -3px; |
||||||
left: 3px; |
left: 3px; |
||||||
path { |
path { |
||||||
fill: $primary; |
fill: $primary; |
||||||
} |
} |
||||||
} |
} |
||||||
&:hover { |
&:hover { |
||||||
text-decoration: underline; |
text-decoration: underline; |
||||||
} |
} |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
|
.block-detail-number { |
||||||
|
width: 25%; |
||||||
|
@include media-breakpoint-down(sm) { |
||||||
|
width: 60%; |
||||||
|
} |
||||||
} |
} |
Loading…
Reference in new issue