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

447 lines
7.9 KiB
SCSS

@import 'info-tab/index';
@import 'alerts-tab/alerts-tab';
@import 'networks-tab/index';
@import 'settings-tab/index';
@import 'contact-list-tab/index';
@import 'flask/snaps-list-tab/index';
@import 'flask/view-snap/index';
.settings-page {
position: relative;
background: var(--color-background-default);
display: flex;
flex-flow: column nowrap;
&__content-padded {
padding: 16px;
}
&__error-text {
@include H7;
color: var(--color-error-default);
}
&__header {
padding: 8px 24px 8px 24px;
position: relative;
@include screen-sm-max {
background: var(--color-background-alternative);
}
&__title-container {
display: flex;
flex-flow: row nowrap;
align-items: center;
flex: 0 0 auto;
&__close-button {
margin-left: auto;
}
&__close-button::after {
content: '\00D7';
font-size: 40px;
color: var(--color-icon-default);
cursor: pointer;
}
&__title {
@include H3;
flex: 1 0 auto;
@include screen-sm-max {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
}
}
&__search {
@include screen-sm-max {
position: relative;
}
@include screen-sm-min {
position: absolute;
right: 57px;
top: 10px;
width: 300px;
}
@include screen-md-min {
width: 400px;
}
&__list {
background: var(--color-background-default);
box-sizing: border-box;
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
border-radius: 6px;
position: absolute;
width: 100%;
z-index: 10;
> div {
&:hover {
background: var(--color-background-default-hover);
}
}
&__item {
transition: 200ms ease-in-out;
display: grid;
align-items: center;
padding: 16px;
border-top: 1px solid var(--color-border-muted);
cursor: pointer;
grid-template-columns: 16px max-content 24px auto;
gap: 8px;
&__icon {
background: var(--color-background-alternative);
height: 15px;
width: 15px;
margin-right: 16px;
}
&__request,
&__tab,
&__section,
&__no-matching {
@include H6;
color: var(--color-icon-default);
}
&__section-multiple-lines {
@include screen-sm-max {
margin-left: 10px;
}
}
&__caret {
[dir='rtl'] & {
transform: rotate(180deg);
}
}
&__link {
@include H6;
display: inline;
color: var(--color-primary-default);
margin-left: 3px;
}
}
}
}
}
&__subheader,
&__subheader--link {
@include H4;
padding: 16px 4px;
border-bottom: 1px solid var(--color-border-muted);
margin-right: 24px;
height: 72px;
align-items: center;
display: flex;
flex-flow: row nowrap;
@include screen-sm-max {
display: none;
}
}
&__subheader--link {
cursor: pointer;
margin-right: 4px;
}
&__subheader--link:hover {
cursor: pointer;
color: var(--color-primary-default);
}
&__subheader--break {
margin-inline-start: 4px;
white-space: nowrap;
width: 100%;
max-width: calc(100% - 125px - 85px);
overflow: hidden;
text-overflow: ellipsis;
}
&__sub-header {
height: 72px;
border-bottom: 1px solid var(--color-border-muted);
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
@include screen-sm-max {
height: 69px;
position: relative;
text-align: center;
}
}
&__sub-header-text {
@include H4;
@include screen-sm-max {
@include H5;
width: 100%;
}
}
&__security-tab-sub-header {
font-weight: 500;
font-size: 16px;
color: var(--color-icon-alternative);
&__bold {
font-weight: 700;
font-size: 18px;
color: var(--color-text-default);
}
}
&__back-button {
margin-right: 8px;
[dir='rtl'] & {
margin: 0 0 0 8px;
transform: rotate(180deg);
}
}
&__content {
display: flex;
flex-flow: row nowrap;
height: 100%;
overflow: auto;
border-top: 1px solid var(--color-border-muted);
&__tabs {
display: flex;
flex-direction: column;
flex: 1 1 auto;
@include screen-sm-min {
flex: 0 0 40%;
max-width: 197px;
padding-top: 13px;
}
.tab-bar__tab {
@include screen-sm-min {
max-height: 50px;
}
&__caret {
@include screen-sm-min {
display: none;
}
}
}
}
&__modules {
overflow-y: auto;
flex: 1 1 auto;
display: flex;
flex-flow: column;
@include screen-sm-max {
display: none;
}
}
}
&__body {
padding: 12px 24px;
@include screen-sm-min {
padding: 12px;
}
}
&__content-row {
display: flex;
flex-direction: column;
padding: 10px 0 20px;
}
&__content-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
margin-bottom: 20px;
font-size: 16px;
font-weight: 500;
@include screen-sm-max {
height: initial;
padding: 5px 0;
}
&--without-height {
height: initial;
}
&--disabled {
cursor: not-allowed;
opacity: 0.5;
}
& .dialog {
margin-top: 10px;
}
&__identicon {
display: flex;
flex-direction: row;
align-items: baseline;
&__item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: unset;
border: 1px solid transparent;
&__icon {
&--active {
height: 40px;
width: 40px;
border-radius: 40px;
border: 2px solid var(--color-primary-default);
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
&__description {
@include H6;
margin-top: 8px;
margin-bottom: 12px;
color: var(--color-text-default);
font-size: 14px;
font-weight: 400;
}
}
&__content-row-experimental {
padding: 10px 0 0 12px;
}
&__content-label {
text-transform: capitalize;
}
&__content-unordered-list {
padding-left: 2.5rem;
margin-top: 1rem;
list-style: disc;
}
&__content-description {
@include H6;
color: var(--color-text-alternative);
a {
color: var(--color-primary-default);
}
}
&__content-item-col {
max-width: 300px;
display: flex;
flex-direction: column;
@include screen-sm-max {
max-width: 100%;
width: 100%;
}
}
&__content-item-col-open-sea {
flex-direction: row;
justify-content: space-between;
margin-bottom: 4px;
}
&__button {
cursor: pointer;
}
&__copy-icon {
padding-left: 4px;
}
&__button-group {
display: flex;
margin-left: auto;
}
&__address-book-button {
@include H5;
padding: 0;
}
&__address-book-button + &__address-book-button {
margin-left: 1.875rem;
}
&__inline-link {
@include H6;
display: initial;
padding: 0;
}
&--selected {
.settings-page {
&__content {
&__tabs {
@include screen-sm-max {
display: none;
}
}
&__modules {
@include screen-sm-max {
display: block;
}
}
}
}
}
.toggle-button {
/*rtl:ignore*/
direction: ltr;
[dir='rtl'] & {
justify-content: flex-end;
}
}
}