1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/transaction-decoding/index.scss

181 lines
3.4 KiB
SCSS

//styling for ui components
@import './components/ui/copy-raw-data/index';
@import './components/ui/accreditation/index';
//styling for decoding components
@import './components/decoding/address/index';
.tx-insight {
overflow-x: hidden;
display: flex;
align-items: center;
&-loading {
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
.spinner {
width: 30px;
}
}
& > details {
margin: 20px 0;
}
& > details > summary {
&.tx-insight-title {
font-size: 14px;
position: relative;
margin: 12px 0 4px;
padding-inline-start: 22px;
cursor: pointer;
& + .tx-insight-content {
padding-inline-start: 14px;
padding-top: 5px;
}
}
}
&-error {
cursor: auto;
}
.tx-insight-content {
&__tree-component {
line-height: 175%;
& > ol {
padding-left: 0;
}
.eth-tx-params {
padding: 8px;
width: 343px;
background: var(--color-background-default);
text-align: left;
display: flex;
flex-direction: column;
align-items: left;
font-family: Euclid Circular B, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 172%;
}
ol ol {
padding-left: 22px;
margin-left: 4px;
}
details > summary {
position: relative;
cursor: pointer;
padding-bottom: 5px;
}
.eth-tx-params .solidity-func-name {
width: fit-content;
padding: 4px;
text-transform: uppercase;
border: 1px solid var(--color-border-default);
color: var(--color-background-alternative);
border-radius: 4px;
}
.eth-tx-params .sol-value {
display: flex;
flex-flow: row wrap;
}
.eth-tx-params .sol-value > {
overflow: ellipses;
}
.eth-tx-params ol {
list-style: none;
padding: 0;
max-width: inherit;
}
.eth-tx-params > ol {
margin-left: 16px;
}
/*
Use this parameter to change the indentation!! */
.eth-tx-params ol ol:not(:first-child) {
padding-left: 8px;
}
pre.solidity-raw {
text-align: left;
}
.solidity-address {
display: flex;
flex-direction: row;
}
.solidity-address :first-child {
width: 16px;
height: 16px;
margin: 0 8px;
}
.solidity-item .param-name {
padding-right: 4px;
}
.solidity-value {
color: var(--color-text-alternative);
overflow-x: hidden;
padding-bottom: 5px;
& > div {
display: flex;
flex-wrap: wrap;
word-break: break-all;
}
}
.solidity-error {
display: flex;
align-items: center;
& > .error-message__icon {
width: 14px;
margin-right: 5px;
}
}
.eth-tx-params details > summary {
color: var(--color-text-default);
font-family: sans-serif;
}
.eth-tx-params footer {
text-align: center;
color: var(--color-text-muted);
}
.eth-tx-params footer a {
text-align: center;
color: var(--color-text-muted);
}
}
}
.tx-insight-component-address {
&__sender-icon {
padding-right: 8px;
}
}
}