MyCrypto/common/assets/styles/etherwallet-custom.less

529 lines
8.3 KiB
Plaintext
Executable File

img {
max-width: 100%;
height: auto;
}
textarea {
resize: vertical;
}
// footer
footer {
background-color: @ether-navy;
color: white;
margin-top: 100px;
padding-top: @space-xs;
padding-bottom: @space-sm;
img {
width: 100%;
height: auto;
max-width: 20rem;
}
p {
margin: @space-xs 0 @space-sm;
}
a {
color: #4ac8ed;
&:hover,
&:focus {
color: darken(#4ac8ed, 5%);
}
}
.modal,
.modal p {
color: @text-color;
}
h5 {
font-size: @font-size-bump;
margin: @font-size-small 0 0;
i {
margin-left: -1.5em;
margin-right: .25em;
}
}
ul {
list-style: none;
padding-left: @space-sm;
margin: 0 0 @space-xs 0;
}
li, p {
font-size: @font-size-small;
margin: @space-sm 0;
}
.footer-2, .footer-3 {
padding-left: 3rem;
}
@media screen and (max-width: @grid-float-breakpoint) {
.row {
margin-left: -.5rem;
margin-right: -.5rem;
}
}
}
// anouncement bars
.announcement {
padding: 3px 10px;
text-align: center;
font-weight: 300;
color: white;
display: block;
background-color: @brand-primary;
a {
text-decoration: underline;
color: white;
transition: 250ms all ease;
}
&:hover,
&:focus {
transition: 250ms all ease;
color: darken(white, 5%);
text-decoration: none;
background-color: darken(@brand-primary, 5%);
}
strong {
font-weight: 400;
}
}
.annoucement-warning {
background-color: @brand-danger;
&:hover,
&:focus {
background-color: darken(@brand-danger, 5%);
a, a:hover {
text-decoration: none;
}
}
}
.annoucement-danger {
background-color: @brand-danger;
a:hover,
a:focus {
color: darken(white, 5%);
a, a:hover {
text-decoration: none;
}
}
}
// address icenticons
.address-identicon-container {
padding-left: 0;
padding-top: @space-md;
text-align: left;
@media screen and (max-width: @grid-float-breakpoint) {
padding-left: @space-lg;
padding-right: @space-lg;
padding-top: 0;
}
}
.address-identicon-container-right {
padding-right: 0;
padding-top: @space-md;
text-align: right;
.addressIdenticon {
float: right;
}
@media screen and (max-width: @grid-float-breakpoint) {
padding-left: @space-lg;
padding-right: @space-lg;
padding-top: 0;
}
}
.address-identicon-container-offline {
padding: 0;
margin-left: -15px;
}
.addressIdenticon {
width: 4rem;
height: 4rem;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: inset rgba(255, 255, 255, 0.5) 0 2px 2px, inset rgba(0, 0, 0, 0.6) 0 -1px 8px;
}
.addressIdenticon.med {
width: 3rem;
height: 3rem;
}
.addressIdenticon.small {
width: 2rem;
height: 2rem;
}
.addressIdenticon.inline {
display: inline-block;
}
.addressIdenticon.float {
float: left;
margin-right: @space-sm;
}
// helpers
.wrap {
word-wrap: break-word;
}
.bigger-on-mobile.form-control[readonly] {
height: 60px;
@media screen and (max-width: 767px) {
height: 100px;
}
}
// help page
#paneHelp {
h3 {
margin-top: 2em;
}
}
.account-help-icon {
h3, h4, h5, h6, img {
display: inline-block;
}
img:hover + .account-help-text {
display: block;
}
img {
margin-left: -30px;
margin-right: 3px;
}
}
.account-help-text {
background: white;
border-radius: @border-radius;
border: 1px solid #CDCDCD;
box-shadow: 0 0 @space-sm rgba(100, 100, 100, .2);
display: none;
font-size: @font-size-xs;
font-weight: 400;
padding: @space-xs;
position: absolute;;
width: 18rem;
z-index: 999;
ul& {
padding-left: 1.6rem;
}
li {
font-size: @font-size-xs;
font-weight: 400;
}
}
@media screen and (max-width: 767px) {
.account-help-icon li,
.account-help-icon img,
.account-help-icon p {
display: none;
}
}
// monospace things
.mono,
.form-control,
#accountAddress,
#accountBalance,
#accountBalanceUsd,
#accountBalanceEur,
#accountBalanceBtc,
#accountBalancePopMB-0,
#accountBalancePopMB-2,
#accountAddressMainTbl-1 {
font-family: @font-family-monospace;
font-weight: normal;
letter-spacing: .02em;
}
// QR Code on Offline Transactions Page
.offline-qrcode {
margin-top: -150px;
max-width: 300px;
@media screen and (max-width: 942px) {
margin-top: -78px;
}
@media screen and (max-width: 769px) {
margin-top: 0;
}
}
.account-info {
.clearfix;
padding-left: 1em;
margin: 0;
li {
margin-bottom: 0;
list-style-type: none;
word-break: break-all;
}
table& {
font-weight: 200;
border-bottom: 0;
min-width: 200px;
td {
padding: 4px 5px;
line-height: 1;
}
td:first-child {
max-width: 115px;
word-wrap: break-word;
padding-left: 1em;
}
tr:nth-child(even) {
background-color: @gray-lightest;
}
tr:nth-last-child(2),
tr:last-child {
background-color: white !important;
}
}
}
input[type="text"] + .eye {
cursor: pointer;
&:before {
content: "";
width: 20px;
height: 20px;
margin-left: 6px;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
background: url("../images/icon-eye.svg");
}
}
input[type="password"] + .eye {
cursor: pointer;
&:before {
content: "";
width: 20px;
height: 20px;
margin-left: 6px;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
background: url("../images/icon-eye-closed.svg");
}
}
// collapsable containers
.collapse-container {
h2, h4 {
cursor: pointer;
}
.collapse-button {
float: left;
font-weight: 500;
user-select: none;
padding: 10px;
margin: -10px -35px;
font-size: 24px;
line-height: 1.6;
}
}
// help collapsable containers
.help .collapse-container {
margin: 40px 0;
.collapse-button {
margin: -10px -30px;
font-size: 20px;
line-height: 1;
}
}
// little x image next to custom tokens
.token-remove {
width: @font-size-small;
height: @font-size-small;
position: absolute;
left: 18px;
cursor: pointer;
}
.node-remove {
width: 16px;
height: 16px;
position: absolute;
right: 6px;
top: 8px;
}
.m-addresses td:first-child {
max-width: 50px;
min-widht: 50px;
}
.m-addresses td:last-child {
text-align: right;
}
.token-balances {
margin-bottom: 15px;
}
h2 a.isActive {
color: #333;
cursor: default;
&:hover,
&:active {
color: #333;
cursor: default;
}
}
.item {
margin: 6px 0;
}
.output.well {
padding: @space-sm @space;
margin-top: -@space/2;
p {
margin: @space-sm 0;
}
}
label small {
color: @gray-light
}
.write-address {
.col-xs-1 {
padding: 0;
}
.col-xs-11 {
padding-right: 10px;
}
}
.write-boolean label {
display: block;
}
.decrypt-drtv {
padding: @space 0;
label.radio {
padding: 0 @space-lg;
}
}
.qr-code {
max-width: 17rem;
margin: auto;
}
.qr-pkey-container {
position: relative;
}
.qr-overlay {
background-color: black;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.contracts {
h4 + .dropdown,
h4 + .dropdown .btn {
margin-top: 0;
}
a.isActive {
color: @text-color;
}
.dropdown-toggle {
display: block;
text-align: left;
white-space: normal;
.caret {
position: absolute;
right: @space;
top: 1.25rem;
}
}
.dropdown-menu-left {
font-size: @font-size-small;
left: auto;
right: 0;
min-width: 37rem;
small {
float: right;
}
}
}
.view-wallet-content {
@media screen and (min-width: @grid-float-breakpoint) {
padding-left: @space*3;
}
h5 {
margin-bottom: @space-xs;
}
a.isActive {
color: @text-color;
}
}
#selectedTypeLedger ol {
padding-left: 1rem;
}
.loading-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: fadeOut(black, 30%);
z-index: 999;
text-align: center;
.loading {
position: absolute;
text-align: center;
top: 40%;
left: 50%;
transform: translate(-50%, -60%);
}
img {
border-radius: 50%;
}
h1 {
animation: opacity 2000ms infinite ease-in-out;
color: white;
}
@keyframes opacity {
from, to {
opacity: 0;
}
50% {
opacity: 1;
}
}
}
.embedded-logo {
height: auto;
width: 100%;
max-width: 290px;
padding: .5rem 0;
}
.ens-response {
color: @gray;
}