@broxus/tvm-connect/lib/cjs/styles/standalone.css

TypeScript SDK for connecting to Nekoton-compatible wallets using a unified interface.

:root {
    --tvm-connect-color: #383838;
    --tvm-connect-emphasis-color: #333;
    --tvm-connect-muted-color: #7698bb;
    --tvm-connect-link-color: #1e87f0;
    --tvm-connect-link-hover-color: #00a6ff;
    --tvm-connect-border: #adc5e3;
    --tvm-connect-border-radius: 12px;

    /* Modal */
    --tvm-connect-modal-width: 380px;
    --tvm-connect-modal-background: #f7f9fb;
    --tvm-connect-modal-border-radius: 12px;
    --tvm-connect-modal-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-modal-color: var(--tvm-connect-color);
    --tvm-connect-modal-padding-horizontal: 24px;
    --tvm-connect-modal-padding-vertical: var(--tvm-connect-modal-padding-horizontal);
    --tvm-connect-modal-header-padding-horizontal: 0;
    --tvm-connect-modal-header-padding-vertical: var(--tvm-connect-modal-padding-vertical);
    --tvm-connect-modal-title-color: var(--tvm-connect-emphasis-color);
    --tvm-connect-modal-title-font-size: 20px;
    --tvm-connect-modal-title-font-weight: 500;
    --tvm-connect-modal-title-line-height: 24px;
    --tvm-connect-modal-body-padding-horizontal: 0;
    --tvm-connect-modal-body-padding-vertical: var(--tvm-connect-modal-padding-vertical);
    --tvm-connect-modal-footer-padding-horizontal: 0;
    --tvm-connect-modal-footer-padding-vertical: var(--tvm-connect-modal-padding-vertical);

    /* Drawer */
    --tvm-connect-drawer-content-background: #f7f9fb;
    --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(--tvm-connect-color);
    --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(--tvm-connect-emphasis-color);
    --tvm-connect-drawer-title-font-size: 22px;
    --tvm-connect-drawer-title-font-weight: 500;
    --tvm-connect-drawer-title-line-height: 26px;
    --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);

    /* Connector */
    --tvm-connect-dropdown-trigger-horizontal-padding: 8px;
    --tvm-connect-dropdown-trigger-vertical-padding: 0;
    --tvm-connect-dropdown-background: #fff;
    --tvm-connect-dropdown-border-radius: 5px;
    --tvm-connect-dropdown-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-dropdown-color: var(--tvm-connect-emphasis-color);
    --tvm-connect-dropdown-link-color: #0098ea;
    --tvm-connect-dropdown-link-hover-color: #00a6ff;

    /* Providers list */
    --tvm-connect-provider-button-background: #e4eaf1;
    --tvm-connect-provider-button-hover-background: rgb(0 154.494955 232.2106 / 8%);
    --tvm-connect-provider-button-hover-color: var(--tvm-connect-color);
    --tvm-connect-provider-button-border-width: 2px;
    --tvm-connect-provider-button-border-style: solid;
    --tvm-connect-provider-button-border: transparent;
    --tvm-connect-provider-button-hover-border: #07acff;
}