@broxus/tvm-connect
Version:
Nekoton-compatible wallets connector.
138 lines (118 loc) • 5.71 kB
CSS
/* Modal */
.tvm-connect-modal > *:not([class]) {
width: 100%;
}
.tvm-connect-modal .uk-modal-content {
background: var(--tvm-connect-modal-content-background);
border-radius: var(--tvm-connect-modal-content-border-radius);
box-shadow: var(--tvm-connect-modal-content-box-shadow);
color: var(--tvm-connect-modal-content-color);
padding: var(--tvm-connect-modal-content-padding-vertical) var(--tvm-connect-modal-content-padding-horizontal);
}
.tvm-connect-modal .uk-modal-header {
background: none;
padding: 0 var(--tvm-connect-modal-header-padding-horizontal) var(--tvm-connect-modal-header-padding-vertical);
}
.tvm-connect-modal .uk-modal-title {
color: var(--tvm-connect-modal-title-color);
font-size: var(--tvm-connect-modal-title-font-size);
font-weight: var(--tvm-connect-modal-title-font-weight);
line-height: var(--tvm-connect-modal-title-line-height);
text-align: center;
}
.tvm-connect-modal .uk-modal-body {
padding: var(--tvm-connect-modal-body-padding-vertical) var(--tvm-connect-modal-body-padding-horizontal);
}
.tvm-connect-modal .uk-modal-body:last-child {
padding-bottom: 0;
}
.tvm-connect-modal .uk-modal-footer {
background: none;
padding: var(--tvm-connect-modal-footer-padding-vertical) var(--tvm-connect-modal-footer-padding-horizontal) 0;
}
/* Drawer */
.tvm-connect-drawer .uk-drawer-content-wrapper {
--drawer-height: auto;
}
.tvm-connect-drawer .uk-drawer-content {
background: var(--tvm-connect-drawer-content-background);
border-radius: var(--tvm-connect-drawer-content-border-radius) var(--tvm-connect-drawer-content-border-radius) 0 0;
box-shadow: none;
color: var(--tvm-connect-drawer-content-color);
padding: var(--tvm-connect-drawer-content-padding-vertical) var(--tvm-connect-drawer-content-padding-horizontal);
}
.tvm-connect-drawer .uk-drawer-header {
padding: 0 var(--tvm-connect-drawer-header-padding-horizontal) var(--tvm-connect-drawer-header-padding-vertical);
}
.tvm-connect-drawer .uk-drawer-title {
color: var(--tvm-connect-drawer-title-color);
font-size: var(--tvm-connect-drawer-title-font-size);
font-weight: var(--tvm-connect-drawer-title-font-weight);
line-height: var(--tvm-connect-drawer-title-line-height);
text-align: center;
}
.tvm-connect-drawer .uk-drawer-body {
padding: var(--tvm-connect-drawer-body-padding-vertical) var(--tvm-connect-drawer-body-padding-horizontal);
}
.tvm-connect-drawer .uk-drawer-body:last-child {
padding-bottom: 0;
}
.tvm-connect-drawer .uk-modal-close-default,
.tvm-connect-drawer .uk-drawer-close {
color: var(--close-color, #a5a9b4);
}
.tvm-connect-drawer .uk-drawer-close {
--drawer-close-position: var(--modal-close-position, 24px);
}
.tvm-connect-modal .uk-modal-close-default:hover,
.tvm-connect-modal .uk-modal-close-default:focus,
.tvm-connect-drawer .uk-drawer-close:hover,
.tvm-connect-drawer .uk-drawer-close:focus {
color: var(--close-hover-color, #383838);
}
.tvm-modal-page {
box-sizing: border-box;
overflow-y: clip;
padding-right: var(--global-scroll-width);
}
.tvm-modal-page body {
overflow: hidden;
overflow: clip;
width: 100%;
}
:root {
/* Modal */
--tvm-connect-modal-content-background: var(--modal-content-background, #fff);
--tvm-connect-modal-content-border-radius: 12px;
--tvm-connect-modal-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
--tvm-connect-modal-content-color: var(--base-body-color, #383838);
--tvm-connect-modal-content-padding-horizontal: 18px;
--tvm-connect-modal-content-padding-vertical: var(--tvm-connect-modal-content-padding-horizontal);
--tvm-connect-modal-header-padding-horizontal: 0;
--tvm-connect-modal-header-padding-vertical: var(--tvm-connect-modal-content-padding-vertical);
--tvm-connect-modal-title-color: var(--base-heading-color, #383838);
--tvm-connect-modal-title-font-size: var(--modal-title-font-size, 18px);
--tvm-connect-modal-title-font-weight: 500;
--tvm-connect-modal-title-line-height: var(--modal-title-line-height, 22px);
--tvm-connect-modal-body-padding-horizontal: 0;
--tvm-connect-modal-body-padding-vertical: var(--tvm-connect-modal-content-padding-vertical);
--tvm-connect-modal-footer-padding-horizontal: 0;
--tvm-connect-modal-footer-padding-vertical: var(--tvm-connect-modal-content-padding-vertical);
/* Drawer */
--tvm-connect-drawer-content-background: var(--drawer-content-background, #fff);
--tvm-connect-drawer-content-border-radius: 16px;
--tvm-connect-drawer-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
--tvm-connect-drawer-content-color: var(--base-body-color, #383838);
--tvm-connect-drawer-content-padding-horizontal: 24px;
--tvm-connect-drawer-content-padding-vertical: var(--tvm-connect-drawer-content-padding-horizontal);
--tvm-connect-drawer-header-padding-horizontal: 0;
--tvm-connect-drawer-header-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
--tvm-connect-drawer-title-color: var(--base-heading-color, #383838);
--tvm-connect-drawer-title-font-size: var(--drawer-title-font-size, 24px);
--tvm-connect-drawer-title-font-weight: 500;
--tvm-connect-drawer-title-line-height: var(--drawer-title-line-height, 28px);
--tvm-connect-drawer-body-padding-horizontal: 0;
--tvm-connect-drawer-body-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
--tvm-connect-drawer-footer-padding-horizontal: 0;
--tvm-connect-drawer-footer-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
}