aside { position: relative; width: 320px; min-width: 320px; border-right: 1px solid @color_divider; overflow-x: hidden; .sticky-container { position: relative; top: 0; width: 320px; overflow: hidden; &.fixed { position: fixed; border-right: 1px solid @color_divider; } &.fixed-bottom { padding-bottom: 60px; // height of .help .sticky-bottom { position: fixed; bottom: 0; background: @color_main; border-right: 1px solid @color_divider; } } } .transition-container { width: 640px; section { width: 320px; display: inline-block; vertical-align: top; } } .trezor-webusb-button { margin: 12px 0px 12px 30px; padding: 6px 24px 6px 40px; width: 256px; } .device-select { background: @color_white; border-bottom: 1px solid @color_divider; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); cursor: pointer; .arrow { width: 24px; height: 24px; margin-right: 24px; &:after { .icomoon-arrow-down; transition: transform 0.3s, color 0.3s; color: @color_text_secondary; transform-origin: 50% 50%; font-size: 24px; } } &:hover { .arrow:after { color: @color_text_primary; } } &.opened { border-color: @color_white; box-shadow: none; .arrow:after { transform: rotate(180deg); } } &.disabled { cursor: initial; .arrow { display: none; } .device-menu { padding-right: 26px; } } } .device { position: relative; height: 64px; width: 320px; display: flex; align-items: center; padding-left: 60px; &.item { padding-right: 24px; cursor: pointer; .hover(); &:hover { background: @color_gray_light; } } &:before { content: ''; position: absolute; display: block; width: 13px; height: 25px; z-index: 2; left: 25px; top: 19px; background-repeat: no-repeat; background-position: center; background-size: 13px 25px; background-image: url('../images/trezor-1.png'); } &:after { content: ''; position: absolute; display: block; width: 10px; height: 10px; top: 14px; left: 32px; background: @color_green_primary; border: 2px solid @color_white; border-radius: 50%; z-index: 3; } &.disconnected, &.unavailable, { &:after { background: @color_error_primary; } } &.unacquired, &.used-elsewhere, &.reload-features, { &:after { background: @color_warning_primary; } } &.trezor-t { &:before { width: 17px; left: 23px; background-size: 17px 25px; background-image: url('../images/trezor-T.png'); } &:after { left: 34px; top: 14px; } } .label-container { flex: 1; overflow: hidden; span { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; &.label { font-weight: 500; font-size: 14px; color: @color_text_primary; } &.status { font-size: 12px; color: @color_text_secondary; } } } .counter { border: 1px solid @color_divider; border-radius: 50%; color: @color_text_secondary; width: 24px; height: 24px; line-height: 22px; text-align: center; font-size: 11px; margin-right: 8px; } .forget-button { color: @color_text_secondary; .hover(); &:before { .icomoon-eject; position: relative; font-size: 24px; } &:hover { color: @color_text_primary; } } } .device-menu { padding: 0px 24px 8px 19px; border-bottom: 1px solid @color_divider; background: @color_white; div { padding: 4px 0px; display: flex; align-items: center; line-height: 24px; cursor: pointer; color: @color_text_secondary; .hover(); &:before { .icomoon-refresh; position: relative; font-size: 24px; margin-right: 17px; .hover(); } &:hover { color: @color_text_primary; // &:before { // color: @color_text_primary; // } } &.forget { &:before { .icomoon-eject; } } &.clone { &:before { .icomoon-T1; font-size: 32px; transform: translateX(-4px); margin-right: 8px; } } &.settings { &:before { .icomoon-settings; } } } } a { position: relative; display: block; cursor: pointer; font-size: 16px; padding: 16px 0 16px 24px; white-space: nowrap; color: @color_text_primary; height: 50px; transition: background-color 0.3s, color 0.3s; &:hover { background-color: @color_gray_light; } &.account { height: 64px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px; border-top: 1px solid @color_divider; span { display: block; font-size: 12px; color: @color_text_secondary; } &:before { content: ''; width: 0px; height: 100%; position: absolute; top: 0; left: 0; background: @color_green_primary; transition: width 0.3s; } &.selected { background: @color_white; //border-left: 3px solid @color_green_primary; //border-bottom: 1px solid @color_divider; //padding-left: 27px; &:before { width: 3px; } &:hover { background: @color_white; } &:last-child { // border-bottom: 1px solid @color_divider; &:after { content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 1px; line-height: 1px; background-color: @color_divider; } } } } &.coin { padding-left: 60px; &:before { content: ''; position: absolute; display: block; width: 20px; height: 20px; left: 24px; top: 0px; bottom: 0px; margin: auto 0; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } } &.external { &:after { .icomoon-redirect; position: absolute; display: block; width: 30px; height: 30px; right: 20px; top: 0px; bottom: 0px; margin: auto 0; font-size: 30px; color: @color_text_secondary; .hover(); } &:hover:after { color: @color_text_primary; } } &.back { padding-left: 80px; &:before { content: ''; position: absolute; display: block; width: 20px; height: 20px; left: 56px; top: 0px; bottom: 0px; margin: auto 0; background-repeat: no-repeat; background-position: center; background-size: auto 20px; } &:after { .icomoon-arrow-left; position: absolute; display: block; width: 20px; height: 20px; left: 24px; top: 0px; bottom: 0px; margin: auto 0; font-size: 20px; } } &.ethereum:before, &.ethereum-classic:before, &.ropsten:before, &.rinkeby:before { background-size: auto 20px; background-position: 2px 0px; } &.ethereum:before { background-image: url('../images/eth-logo.png'); } &.ethereum-classic:before { background-image: url('../images/etc-logo.png'); } &.ropsten:before { background-image: url('../images/ropsten-logo.png'); } &.rinkeby:before { background-image: url('../images/rinkeby-logo.png'); } &.btc:before { background-image: url('../images/btc-logo.png'); } &.bch:before { background-image: url('../images/bch-logo.png'); } &.btg:before { background-image: url('../images/btg-logo.png'); } &.ltc:before { background-image: url('../images/ltc-logo.png'); } &.dash:before { background-image: url('../images/dash-logo.png'); } &.zec:before { background-image: url('../images/zec-logo.png'); } } .coin-divider { font-size: 12px; display: flex; justify-content: space-between; color: @color_text_secondary; background: @color_gray_light; padding: 8px 28px 8px 24px; border-top: 1px solid @color_divider; border-bottom: 1px solid @color_divider; span { display: flex; justify-content: flex-end; } } .device-divider { font-size: 12px; display: flex; justify-content: space-between; color: @color_text_secondary; background: @color_gray_light; padding: 8px 28px 8px 24px; border-bottom: 1px solid @color_divider; } .help { width: 319px; // - 1px border-roght; 320px; padding: 14px 0px; text-align: center; border-top: 1px solid @color_divider; &.fixed { position: fixed; bottom: 0px; } a { color: @color_text_secondary; font-size: 12px; display: inline-block; padding: 8px; height: auto; &:before { .icomoon-chat; font-size: 32px; position: absolute; top: 0px; left: -26px; } &:hover { background: transparent; color: @color_text_primary; } } } .wallet-settings { } .add-account { position: relative; padding: 8px 0 8px 20px; cursor: pointer; color: @color_text_secondary; display: flex; align-items: center; &:before { .icomoon-plus; margin-right: 12px; } .hover(); &:hover { color: @color_text_primary; } } .discovery-status { height: 64px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px; padding: 16px 28px 16px 30px; white-space: nowrap; border-top: 1px solid @color_divider; span { display: block; font-size: 12px; color: @color_text_secondary; overflow: hidden; text-overflow: ellipsis; } } .discovery-loading { display: flex; flex-direction: row; align-items: center; font-size: 14px; padding: 8px 0 8px 22px; white-space: nowrap; color: @color_text_secondary; //border-top: 1px solid @color_divider; .loader-circle { margin-right: 14px; } } // menu trasitions @slide_transition_time: 300ms; .slide-left-enter { transform: translate(100%); pointer-events: none; } .slide-left-enter.slide-left-enter-active { transform: translate(0%); transition: transform @slide_transition_time ease-in-out; } .slide-left-exit { transform: translate(-100%); } .slide-left-exit.slide-left-exit-active { transform: translate(0%); transition: transform @slide_transition_time ease-in-out; } .slide-right-enter { transform: translate(-100%); pointer-events: none; } .slide-right-enter.slide-right-enter-active { transform: translate(0%); transition: transform @slide_transition_time ease-in-out; } .slide-right-exit { transform: translate(-100%); } .slide-right-exit.slide-right-exit-active { transform: translate(-200%); transition: transform @slide_transition_time ease-in-out; } }