/* * * Copay mobile CSS * */ /* disabling text selection */ body { -webkit-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none; } input { -webkit-user-select: auto !important; -khtml-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; } * { -webkit-user-drag: none; -ms-user-drag: none; user-drag: none; } body, div, .row { -webkit-overflow-scrolling: touch; } .enable_text_select { -webkit-user-select: text; -khtml-user-select: text; -ms-user-select: text; user-select: text; } /* END disabling text selection */ .inner-wrap { -webkit-transition-duration: 200ms; transition-duration: 200ms; } body { overflow: hidden; -ms-content-zooming: none; } /* Fix IE 10 */ .extra-margin-bottom { display: block height: 75px overflow: hidden clear: both } .main { height: 99% overflow: auto } /* Fix IE 11 */ _:-ms-fullscreen, :root .extra-margin-bottom { display: block; height: 75px; overflow: hidden; clear: both; } _:-ms-fullscreen, :root .main { height: 99%; overflow: auto; } /* Fix Firefox */ @-moz-document url-prefix() { .extra-margin-bottom { display: block; height: 75px; overflow: hidden; clear: both; } } .tab-bar { background: #FFFFFF; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10); display: block; position: fixed; width: 100%; z-index: 5; line-height: 3.2rem; } .tab-bar h1 { color: #1ABC9C; font-weight: 500; font-size: 14px; } .tab-bar-section.middle { left: 4.7rem; right: 4.7rem; } .left-small { width: 4.7rem; } .right-small { width: 4.7rem; text-align: right; } .tab-bar .icon-back { font-size: 2.5rem; position: absolute; line-height: 52px; left: -5px; height: 45px; top: 0px; } .tab-bar .text-back { margin-left: 26px; font-size: 1rem; font-weight: 400; padding: 10px 0; } .tab-bar .text-close { font-size: 1rem; font-weight: 400; } .bottom-bar { display: block; position: fixed; bottom: 0; width: 100%; z-index: 5; background: #2C3E50; } .amount { width: 100%; text-align: center; padding: 3rem 1rem; margin-bottom: 11px; color: #fff; height: 175px; } .scroll-section { position: absolute; top: 120px; overflow-y: auto; } .status { bottom: 65px; left: 0; } .right-off-canvas-menu { background-color: #213140 ; } .off-canvas-wrap,.inner-wrap{ height:100%; } .walletHome { background-color: #fff; } .walletHome .avatar-wallet { padding: 1.7rem 1rem; width: 75px; height: 75px; position: absolute; top: -33px; font-size: 35px; border: 3px solid #fff; background: #1ABC9C; margin: 0; color: #FFF; font-weight: 700; line-height: 15px; text-align: center; border-radius: 5px; } .walletHome .wallet-info { margin-left: 85px; line-height: 110%; float: left; margin-bottom: 20px; } .copayers { position: relative; padding: 0; overflow-y: none; } ul.copayer-list img { width: 30px; height: 30px; } .bottombar-item a { color: #9EA9B3; padding: 0.5rem 0; display: block; border-top: 3px solid #122232; } .bottombar-item a.active { color: #E4E8EC; background-color: #122232; } .box-founds { background-color: #213140; } .left-small { border-right: none; } .right-small { border-left: none; } .right-small a, .left-small a { color: #A5B2BF; } .addresses .list-addr contact { margin-left: 0; font-size: 14px; } a.missing-copayers { bottom: -34px; text-align: center; padding: .7rem; width: 100%; } .button, button { padding: 1rem 1.2rem 1.0625rem; } .box-setup { margin-bottom: 50px; } .footer-setup { margin-bottom: 50px; } .label { font-size: 70%; padding: 0.2rem 0.2rem; } .sidebar { background: #fff; box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.20); } .sidebar li { overflow: hidden; border-bottom: 1px solid #f1f3f5; } .sidebar li.nav-item.selected { background-color: #f1f3f5; box-shadow: inset -1px 0px 1px 0px rgba(0,0,0,0.20); } .sidebar .avatar-wallet, .payment-uri .avatar-wallet { background-color: #2C3E50; color: #fff; font-size: 20px; font-weight: 700; margin-right: 15px; padding: 0.5rem 0.65rem; line-height: 24px; text-align: center; float: left; width: 40px; border-radius: 3px; } .sidebar header { background-image: -webkit-linear-gradient(bottom, #213140 0%, #2C3E50 100%); background-image: -o-linear-gradient(bottom, #213140 0%, #2C3E50 100%); background-image: linear-gradient(to top, #213140 0%, #2C3E50 100%); width: 100%; text-align: center; height: 7rem; padding: 1.3rem; } .sidebar header h1 { color: #fff; margin: 0; padding: 5px; } .sidebar header small { color: #fff; } .sidebar ul.off-canvas-list { margin-bottom: 30px; } .sidebar ul.off-canvas-list li a { font-size: 12px; vertical-align: middle; font-weight: 300; border-bottom: transparent; color: #A5B2BF; padding: 1rem 0.7rem; } .sidebar ul.off-canvas-list li a i { vertical-align: middle; opacity: 0.6; } .sidebar .left-off-canvas-menu { background: #E4E8EC; line-height: 24px; } /* * Remove all vendors hover / shadow / fade */ .tooltip { display: none !important; } .move-right .exit-off-canvas, .move-left .exit-off-canvas { box-shadow: none; } ul.off-canvas-list li a:hover { background: none; } a, button, .button, input, textarea, select, .reveal-modal { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-tap-highlight-color:rgba(0,0,0,0); } .move-right .close-menu { cursor: pointer; box-shadow: none; display: block; position: absolute; background: none; top: 0; bottom: 0; left: 0; right: 0; z-index: 1002; } /*******************************************/ .pin { margin: 0 auto; width: 25%; text-align: center; overflow: hidden; } .pin-box { color: #fff; font-size: 14px; width: 25%; float: left; } .pin-numbers { position: absolute; bottom: 0; width: 100%; text-align: center; height: 72%; } .pin-button-bar { height: 25%; } a.pin-button { margin: 2.5%; display: inline-block; color: #CED5DC; font-size: 210%; font-weight: 100; border: 1px solid #4B6178; border-radius: 100%; width: 70px; padding-top: 0.5rem; height: 70px; } a.pin-button:active { color: #fff; background-color: #3E5367; } .icon-circle, .icon-circle-active { color: #1ABC9C; } .tx-comment { border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px; } /* notifications */ .dr-notification-container { position: absolute; z-index: 10000; width: 100%; } .dr-notification-container.bottom { bottom: 20px; } .dr-notification-container.right { right: 0; } .dr-notification-container.left { left: 20px; } .dr-notification-container.top { top: 45px; } .dr-notification-container.center { left: 50%; margin-left: -190px; } .dr-notification-wrapper { position: relative; width: 100%; margin: 0; } .dr-notification-wrapper.offline { position: absolute; top: 0px; z-index: 2000; opacity: 1.0 !important; background-color: #2C3E50; } .dr-notification-wrapper.client-error { position: absolute; top: 45px; z-index: 11; } .dr-notification-close-btn { color: #A5B2BF; border: 1px solid #A5B2BF; border-radius: 100%; display: inline-block; padding: 0px 8px; position: absolute; right: 5px; cursor: pointer; z-index: 10; margin: 14px 8px 0; font-size: 20px; } .dr-notification-image { float: left; color: #fff; text-align: center; background-color: #213140; width: 40px; height: 40px; font-size: 1.5rem; border-radius: 100%; margin: 0.6rem; } .dr-notification-image img { margin: 15px; max-width: 70px; min-width: 48px; } .dr-notification-content { line-height: 90%; padding: 10px 50px 5px 60px; } .dr-notification-title { color: #fff; font-size: 12px; margin-bottom: 0; font-weight: 700; } .dr-notification { background: rgba(44,62,80,0.90); box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.20); -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.20); width: 100%; clear: both; overflow: hidden; border-radius: 0; height: 60px; } .dr-notification-text { font-size: 11px; color: #fff; } /*** modals ***/ .reveal-modal-bg { display: none !important; } .reveal-modal { padding: 0; border: none; border-radius: 0; top: 0; height: 100%; overflow: auto; padding-bottom: 20px; } .modal.fade .modal-dialog, .modal.in .modal-dialog, .reveal-modal-bg, .reveal-modal-bg .fade .in, .reveal-modal, .reveal-modal .fade, .reveal-modal .fade .out, .reveal-modal .fade .in, .reveal-modal.fade.full.in, .reveal-modal.fade.full.out, .reveal-modal.fade.full, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus { opacity: 1; /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; /*CSS box-shadow*/ -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .popup-tx-status { z-index: 1030; } .popup-txsent { position: absolute; width: 100%; height: 100%; background: #1ABC9C; } .popup-txsent i { font-size: 5rem; background-color: #fff; color: #1ABC9C; border-radius: 100%; width: 150px; height: 150px; display: block; text-align: center; padding-top: 1rem; } .popup-txsigned i { font-size: 5rem; background-color: #1ABC9C; color: #fff; border-radius: 100%; width: 150px; height: 150px; display: block; text-align: center; padding-top: 1rem; } .popup-txrejected i { font-size: 5rem; background-color: #ED4A43; color: #fff; border-radius: 100%; width: 150px; height: 150px; display: block; text-align: center; padding-top: 1rem; } ::-webkit-input-placeholder { color: #B7C2CD; } :-moz-placeholder { /* Firefox 18- */ color: #B7C2CD; } ::-moz-placeholder { /* Firefox 19+ */ color: #B7C2CD; } :-ms-input-placeholder { color: #B7C2CD; } .animation-left, .animation-right { position: absolute; background: #fff; display: block; width: 100%; height: 100%; top: 0; left: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .animation-left.ng-enter, .animation-left.ng-leave, .animation-right.ng-enter, .animation-right.ng-leave { -webkit-transition: all ease 300ms; transition: all ease 300ms; } .animation-left.ng-enter { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition-delay: 0.01s; transition-delay: 0.01s; opacity: 0; } .animation-right.ng-enter { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition-delay: 0.01s; transition-delay: 0.01s; opacity: 0; } .animation-left.ng-enter.ng-enter-active, .animation-right.ng-enter.ng-enter-active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .animation-left.ng-leave, .animation-right.ng-leave { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } .animation-left.ng-leave.animation-left.ng-leave-active { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition-delay: 0.01s; transition-delay: 0.01s; opacity: 0; } .animation-right.ng-leave.animation-right.ng-leave-active { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition-delay: 0.01s; transition-delay: 0.01s; opacity: 0; } .tab-view { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); width:100%; position: absolute; top: 46px; bottom: 70px; overflow: auto; padding-bottom: 20px; } .tab-in { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .tab-out { -webkit-transform: translate3d(-100%, 0, 0) !important; transform: translate3d(-100%, 0, 0) !important; } /* removes 300ms in IE */ -ms-touch-action: manipulation; /* IE10 / touch-action: manipulation; /* IE11+ */