/* * * Copay main CSS * */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; src: local('Ubuntu Light'), local('Ubuntu-Light'), url(../font/ubuntu-light.woff) format('woff'); } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: local('Ubuntu'), url(../font/ubuntu.woff) format('woff'); } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(../font/ubuntu-bold.woff) format('woff'); } @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 700; src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(../font/ubuntu-bold-italic.woff) format('woff'); } @keyframes rotateThis { from { transform: scale( 1 ) rotate( 0deg ); } to { transform: scale( 1 ) rotate( 360deg ); } } @-webkit-keyframes rotateThis { from { -webkit-transform: scale( 1 ) rotate( 0deg ); } to { -webkit-transform: scale( 1 ) rotate( 360deg ); } } @-webkit-keyframes yellow-flash { 0% { background-color: #FFFFE0; opacity:1; } 22% { background-color: #FFFFE0; } 100% { background-color: none; } } ::-webkit-input-placeholder { color: #7A8C9E; } :-moz-placeholder { /* Firefox 18- */ color: #7A8C9E; } ::-moz-placeholder { /* Firefox 19+ */ color: #7A8C9E; } :-ms-input-placeholder { color: #7A8C9E; } #qr-canvas { display: none; } #qrcode-scanner-video { display: block; margin: 0 auto; } * { font-family: 'Ubuntu', Helvetica, sans-serif !important; } h1, h2, h3, h4, h5, h6 { color: #2C3E50; } h1 { font-weight: 100; font-size: 24px; margin-bottom: 1rem; } h2 { font-size: 20px; font-weight: 100; } h3 { font-weight: 300; font-size: 16px; } h4 { font-size: 0.875rem; } body, html{ height:100%; width:100%; color: #2C3E50; } header { padding: 15px 20px 5px; } .off-canvas-wrap, .inner-wrap{ height:100%; } .tab-bar { display: none; } a { color: #3498DB; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px white inset; } .join label, .open label, .setup label { font-size: 0.875rem; color: #fff; font-weight: 100; } .setup .comment { font-size: 0.875rem; color: #7A8C9E !important; } a:hover { color: #2980b9; } .open input, .join input, .setup input, .import input, .settings input { background: #2C3E50 !important; -moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important; box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important; border: 0 !important; color: #7A8C9E !important; } .open select, .join select, .setup select, .import select, .settings select { background: #2C3E50 !important; border: 0 !important; color: #7A8C9E !important; } .page, .main { height:100%; overflow-y: auto; overflow-x: none; background-color: #2C3E50; } .sidebar { height:100%; overflow-y: auto; overflow-x: none; } .sidebar { position: fixed; width: 250px; background-color: #2C3E50; color: #fff; line-height: 24px; } .sidebar a { color: #fff; } .sidebar ul.copayer-list { list-style-type: none; padding:0; margin:0; } .sidebar ul.copayer-list li { margin-top: 15px; font-weight: 100; font-size: 12px; color: #C9C9C9; } .sidebar ul.copayer-list img { width: 30px; height: 30px; } .button.small.side-bar { padding: 0rem 0.4rem; } .waiting { border: 2px solid #fff; } .online { border: 2px solid #1ABC9C; } .offline { border: 2px solid gray; opacity: 0.4; } .main { margin-left: 250px; padding: 1.5rem; background-color: #F8F8FB; } .home, .open, .join, .waiting-copayers, .setup, .import, .settings { margin-top: 15%; color: #fff; } .import fieldset, .settings fieldset { border: 1px solid #3C5269; } .import fieldset legend, .settings fieldset legend { background: transparent; color: #fff; font-weight: normal; } .import input[type="file"], .import label, .import label small, .settings label, .settings label small { color: #fff; } .logo-setup { text-align: center; margin-top: 9%; } .box-setup { padding: 20px 30px; background: #34495E; margin-bottom: 20px; } .box-setup label small.has-error { font-size: 11px; color: #FFA59B; } .last-transactions { margin-bottom: 2rem; background-color: #E8EAEF; } .last-transactions-header { padding: 1rem 0; height: 50px; } .last-transactions-footer { padding: 1rem 0; overflow: hidden; } .last-transactions-content { overflow: hidden; padding: 1rem; background: #CED3DB; } .last-transactions-content .box-status { font-size: 13px; width: 35px; } .last-transactions-content .box-copayer { width: 100px; margin-right: 20px; float: left; text-align: center; } .last-transactions-content .copayer-ico { width: 45px; height: 45px; border: 2px solid #7A8C9B; } .last-transactions-content .box-copayer .icon-active { color: #fff; } .last-transactions-content .box-copayer .icon-active-check { background-color: #3FBC9C; color: #fff; } .last-transactions-content .box-copayer .icon-active-x { background-color: #C0392B; color: #fff; } .input-note { margin-top: -10px; display: block; margin-bottom: 1rem; } .send-note { font-style: italic; color: gray; background-color: #EDEDF5; padding: 1.5rem; width: 400px; } .box-note { text-align: center; clear: both; font-style: italic; color: gray; margin-bottom: 10px; } .button-setup a { display: block; padding: 20px 30px; background: #34495E; margin-bottom: 20px; font-weight: 100; font-size: 24px; } .button-setup a:hover { background: #3C4E60; } .footer-setup { overflow: hidden; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .dn {display: none;} .pr {position: relative;} .pa {position: absolute;} .m0 {margin: 0;} .db {display: block;} .size-12 { font-size: 12px; } .size-14 { font-size: 14px; } .size-16 { font-size: 16px; } .size-18 { font-size: 18px; } .size-21 { font-size: 21px; } .size-24 { font-size: 24px; } .size-36 { font-size: 36px; } .size-48 { font-size: 48px; } .size-60 { font-size: 60px; } .size-72 { font-size: 72px; } .m5t {margin-top: 5px;} .m10t {margin-top: 10px;} .m5b {margin-bottom: 5px;} .m5r {margin-right: 5px;} .m10b {margin-bottom: 10px;} .m15b {margin-bottom: 20px;} .m10r {margin-right: 10px;} .m15l {margin-left: 15px;} .m15t {margin-top: 15px;} .m20r {margin-right: 20px;} .m15r {margin-right: 15px;} .m20t {margin-top: 20px;} .m10 {margin: 10px;} .m15 {margin: 15px;} .m15h {margin: 0 15px;} .p10t {padding-top: 10px;} .p0r {padding-right: 0;} .p70r {padding-right: 70px;} .p70l {padding-left: 70px;} .p5h {padding: 0 5px;} .p20h {padding: 0 20px;} .p15 {padding:15px;} .p20 {padding:20px;} .p10 {padding:10px;} .m30v {margin: 30px 0;} .m10h {margin:0 10px;} .m10v {margin:10px 0;} .m30a {margin: 30px auto;} .m-negative-l {margin-left: -0.9375rem;} .br100 {border-radius: 100%;} .lh {line-height: 0;} .oh {overflow:hidden;} .lh {line-height: 0;} .small { font-size: 60%; line-height: inherit; } .line-dashed-setup-v { border-left: 1px dashed #415970; } .line-dashed-v { border-right: 1px dashed #E3E3E3; } .line-dashed-h { border-bottom: 1px dashed #E3E3E3; } .line { border-top: 1px solid #f2f2f2; margin: 0.5rem 0 1rem; } .line-sidebar { border-top: 1px solid #34495E; margin: 0.7rem 0; } .line-sidebar-t { border-top: 1px solid #3C5269; padding-top: 0.5rem; } .line-sidebar-b { border-bottom: 1px solid #3C5269; padding-bottom: 0.5rem; } .line-dashed { border-top: 1px dashed #ccc; margin: 1rem 0; padding: 1rem 0; overflow: hidden; } .name-wallet { font-size: 16px; line-height: 16px; } .box-livenet { background: #213140; padding: 0rem 0.5rem 0.2rem; color: #7A8C9E; } .founds { font-weight: 100; color: #7A8C9E; } .hidden { visibility: hidden; } /* Turn Off Number Input Spinners */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .icon-rotate { animation-name: rotateThis; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateThis; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .spinner { display:inline-block; width: 1em; text-align:center; line-height:1em; vertical-align:middle; } .highlight{ -webkit-animation-name: yellow-flash; -webkit-animation-duration: 400ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: yellow-flash; -moz-animation-duration: 400ms; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; } /* notifications */ .dr-notification-container { position: absolute; z-index: 10000; } .dr-notification-container.bottom { bottom: 20px; } .dr-notification-container.right { right: 0; } .dr-notification-container.left { left: 20px; } .dr-notification-container.top { top: 20px; } .dr-notification-container.center { left: 50%; margin-left: -190px; } .dr-notification-wrapper { width: 360px; position: relative; margin: 10px 0; } .dr-notification { width: 360px; clear: both; height: 90px; overflow: hidden; } .dr-notification-close-btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; display: inline-block; padding: 5px; font-size: 12px; position: absolute; right: 350px; top: -8px; cursor: pointer; z-index: 10; } .dr-notification-close-btn:hover { -webkit-transform: scale3d(1.25, 1.25, 1); -moz-transform: scale3d(1.25, 1.25, 1); -ms-transform: scale3d(1.25, 1.25, 1); transform: scale3d(1.25, 1.25, 1); } .dr-notification-image { width: 80px; height: 90px; float: left; display: block; font-size: 40px; color: white; text-align: center; border-right: 1px dashed #415970; } .dr-notification-image i { display: block; width: 100%; padding-top: 20px; } .dr-notification-image img { margin: 15px; max-width: 70px; min-width: 48px; } .dr-notification-content { padding-left: 90px; padding-right: 10px; padding-top: 5px; } .dr-notification-title { color: white; padding: 0px; font-size: 18px; margin-top: 0; } .dr-notification { background-color: #34495E; color: #eee; border: 1px solid #2C3E50; opacity: 0.9; } .dr-notification-close-btn { background-color: #34495E; color: #fff; border: 1px solid #3C5269; } .dr-notification-image.dr-notification-type-info { color: #FFF; } .dr-notification-image.dr-notification-type-warning { color: #FFA226; } .dr-notification-image.dr-notification-type-error { color: #FF4B4F; } .dr-notification-image.dr-notification-type-success { color: #1ABC9C; } .dr-notification-image.success { color: #1ABC9C; } .success { color: #1ABC9C; } .label.success { background-color: #1ABC9C; } .label.alert { background-color: #C0392A; padding: 0.3rem 0.4rem; font-weight: 700; } .dr-notification-text { font-size: 12px; line-height: 120%; } .ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ul.pagination li.current a { background: #1ABC9C; } ul.pagination li.current a:hover, ul.pagination li.current a:focus { background: #16A085; } .tooltip { background: #1ABC9C; color: #fff; font-weight: normal; font-size: 14px; padding: 3px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #16A085; } .tooltip>.nub { border-color:transparent transparent #16A085 transparent; } .tooltip.tip-top>.nub { border-color:#16A085 transparent transparent transparent; } .tooltip.tip-right>.nub { border-color:transparent #16A085 transparent transparent; } .tooltip.tip-left>.nub { border-color:transparent transparent transparent #16A085; } .has-tip { color: #7A8C9E; border-color: #7A8C9E; } .logo { background: transparent url('../img/logo-negative-beta.svg') no-repeat; background-size: 130px 51px; } button.radius, .button.radius { -webkit-border-radius: 5px; border-radius: 5px; } /* SECONDARY */ button.secondary, .button.secondary { background-color: #4A90E2; color: #fff; } button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus { background-color: #2980B9; color: #fff; } button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary, button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #95a5a6; color: #E6E6E6; } /* PRIMARY */ button.primary, .button.primary { background-color: #1ABC9C; color: #fff; } button.primary:hover, button.primary:focus, .button.primary:hover, .button.primary:focus { background-color: #16A085; color: #fff; } button.disabled.primary, button[disabled].primary, .button.disabled.primary, .button[disabled].primary, button.disabled.primary:hover, button.disabled.primary:focus, button[disabled].primary:hover, button[disabled].primary:focus, .button.disabled.primary:hover, .button.disabled.primary:focus, .button[disabled].primary:hover, .button[disabled].primary:focus { background-color: #95a5a6; color: #E6E6E6; } /* WARNING */ button.warning, .button.warning { background-color: #C0392A; color: #fff; } button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus { background-color: #82251A; color: #e6e6e6; } button.disabled.warning, button[disabled].warning, .button.disabled.warning, .button[disabled].warning, button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus { background-color: #95a5a6; color: #E6E6E6; } /* WHITE */ button.white, .button.white { background-color: #fff; color: #2C3E50; } button.white:hover, button.white:focus, .button.white:hover, .button.white:focus { background-color: #E0E0E0; color: #2C3E50; } button.disabled.white, button[disabled].white, .button.disabled.white, .button[disabled].white, button.disabled.white:hover, button.disabled.white:focus, button[disabled].white:hover, button[disabled].white:focus, .button.disabled.white:hover, .button.disabled.white:focus, .button[disabled].white:hover, .button[disabled].white:focus { background-color: #95a5a6; color: #E6E6E6; } /* BLACK */ button.black, .button.black { background-color: #2C3E50; color: #fff; } button.black:hover, button.black:focus, .button.black:hover, .button.black:focus { background-color: #213140; color: #fff; } button.disabled.black, button[disabled].black, .button.disabled.black, .button[disabled].black, button.disabled.black:hover, button.disabled.black:focus, button[disabled].black:hover, button[disabled].black:focus, .button.disabled.black:hover, .button.disabled.black:focus, .button[disabled].black:hover, .button[disabled].black:focus { background-color: #95a5a6; color: #E6E6E6; } /* GRAY */ button.gray, .button.gray { background-color: #A9B2B8; color: #2C3E50; } button.gray:hover, button.gray:focus, .button.gray:hover, .button.gray:focus { background-color: #E0E5E5; color: #2C3E50; } button, .button, p { margin: 0; } .side-nav {padding: 0;} .side-nav li { font-size: 16px; line-height: 40px; font-weight: 100; } .side-nav li.active>a:first-child:not(.button) { color: #2C3E50; background-color: #F8F8FB; } .side-nav li>a:first-child:not(.button), .side-nav li a:not(.button) { color: #fff; } .side-nav li>a:first-child:not(.button) i { opacity: 0.6; } .side-nav li.active>a:first-child:not(.button) i { opacity: 1; } .side-nav li.active:hover a { background-color: #F8F8FB; } .side-nav li:hover a { background-color: #3C4E60; } .addresses ul { margin-left: 0; } .pointer { cursor: pointer; } .video-box { width: 70px; text-align: center; margin-right: 20px; padding-bottom: 5px; float: left; } .video-small { width: 50px; height: 50px; } .icon-input { position: absolute; top: 11px; right: 20px; font-size: 16px; color: #fff; } .icon-input .fi-check { background-color: #1ABC9C; padding: 0.2rem 0.4rem; } .icon-input .fi-x { background-color: #C0392A; padding: 0.2rem 0.4rem; } .box-status { float: right; } .icon-status { background-color: #34495E; color: #7A8C9E; border-radius: 100%; padding: 0.17rem 0.3rem; float: left; margin-bottom: 0.2rem; } .has-error { color: #C0392A; } .is-valid { color: #1ABC9C; } input.ng-invalid-match, input.ng-invalid-match:focus { border-color: red; } .copayers h3, .copayers h4, .waiting-copayers h4 { color: #fff; font-weight: 100; } .copayers { width: 100%; background-color: #213140; position: absolute; bottom: 0; left: 0; padding: 20px; border-top: 1px solid #475065; overflow-y: hidden; } .copayers i { opacity: 0.6; } .black { background-color: #2C3E50; } .text-light {font-weight: 100;} .text-gray {color: #8597A7;} .text-black {color: #2C3E50;} .text-primary {color: #1ABC9C;} .text-secondary {color: #3498DB;} .text-white {color: #fff;} .text-warning {color: #CA5649;} .footer-setup a.text-gray:hover {color: #fff;} a.text-gray:hover {color: #2C3E50;} a.text-black:hover {color: #213140;} a.text-primary:hover {color: #50E3C2;} a.text-secondary:hover {color: #4A90E2;} a.text-white:hover {color: #ccc;} a.text-warning:hover {color: #FD7262;} .box-setup-copayers { background: #2C3E50; -moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20); margin-bottom: 5px; } .box-setup-copay-required { border: 3px solid #1ABC9C; opacity: 1; } .loading-screen { text-align: center; background-color: #1ABC9C; width: 100%; position: absolute; top: 40%; } .box-setup .panel { background-color: #2C3E50; padding: 1rem; border: 0; } .box-setup h3 { color: #fff; } .joyride-tip-guide { width: 150px; background: #213140; top: -20px !important; left: 50px !important; -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.40); box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.40); } .joyride-tip-guide .joyride-nub.left { border-color: #213140 !important; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; } .joyride-content-wrapper { padding: 0.8rem } .joyride-tip-guide p { margin: 0; color: #8597A7; } .panel qrcode { float: left; width: 160px; height: 160px; padding: 5px 0 0 5px; background-color: white; } .panel qrcode canvas { width: 150px; height: 150px; } .panel .secret { line-height: 1.3rem; padding-top: 4rem; float: left; margin-left: 2rem; overflow-wrap: break-word; width: 55%; text-align: left; } /**** Copy to clipboard ****/ .btn-copy { color: #9b9b9b; display: inline-block; height: 16px; width: 16px; outline: none; vertical-align: sub; background: transparent url('../img/icons/copy.png') center center no-repeat; } .btn-copied { display: inline-block; width: auto; color: #16A085; font-weight: bold; font-size: 11px; } .btn-copy.zeroclipboard-is-hover { color: #000; } .btn-copy.zeroclipboard-is-active { opacity: 1; } .copayer-list-small-height { display: none; } @media only screen and (min-width: 40.063em) { dialog.tiny, .reveal-modal.tiny { width: 50%; margin-left: -25%; } } @media (max-height: 610px) { .copayer-list { display: none; } .copayer-list-small-height { display: block; } .sidebar .copayer-list-small-height { list-style-type: none; padding:0; margin:0; } .sidebar .copayer-list-small-height li { margin-top: 15px; font-weight: 100; font-size: 12px; color: #C9C9C9; } .sidebar .copayer-list-small-height img { width: 30px; height: 30px; } .copayers { padding: 10px 20px; } .side-bar h3 { margin-top: 0; } .side-nav li { line-height: 30px; } } .wide-page { background-color: #2C3E50; margin: 10% 0; padding: 50px; } /*-----------------------------------------------------------------*/