/* * * Copay main CSS * */ .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li, .panel dl { color: #2C3E50; } #qr-canvas { display: none; } #qrcode-scanner-video { display: block; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { color: #2C3E50; } h1 { font-weight: 100; font-size: 24px; } h2 { font-size: 20px; font-weight: 100; } h3 { font-weight: 300; font-size: 16px; } h4 { font-size: 0.875rem; } h4.title { background: #F1F3F5; padding: 0.8rem; text-transform: uppercase; color: #2C3E50; font-weight: 700; font-size: 0.7rem; } body, html{ height:100%; width:100%; color: #2C3E50; -webkit-user-select: text; } .alt-currency { padding: 0.05rem 0.2rem; border-radius: 2px; font-size: 10px; color: #fff; font-weight: 700; } .color-greeni { color: #1abc9c !important; } .color-yellowi { color: yellow !important; } .color-alert { color: #ED4A43; } .alt-currency.green { background: #1abc9c; } .alt-currency.red { background: #A02F23; } .alt-currency.black { background: #213140; } .alt-currency.gray { background: #7A8C9E; } 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; } .status { color: #FFFFFF; background-color: #A02F23; position: absolute; left: 250px; right: 0; bottom: 0; padding: 10px 1rem 10px 0.5rem; z-index: 9; font-size: 14px; text-align: left; line-height: 17px; } .status-first-line { z-index: 9; font-size: 16px; } .main-dark { background-color: #2C3E50; height: 100%; } .page, .main { height:100%; background-color: #fff; } .button.small.side-bar { padding: 0rem 0.4rem; } .waiting { border: 2px solid #fff; } .online { border: 2px solid #1ABC9C; } .main { background-color: #fff; padding: 45px 0 60px 0; position: relative; } .content { width:100%; position: absolute; top: 46px; bottom: 0; overflow: auto; } .logo-setup { text-align: center; margin: 0 0 0.1rem 0; color: #8597A7; } .box-setup-footer { overflow: hidden; margin-top: 1rem; padding: 1rem 0 0; border-top: 1px solid #425467; font-size: 12px; } .box-notification { position: relative; font-size: 12px; padding: 0.5rem 2rem 0.5rem 0.7rem; border-radius: 2px; background: #F2F5F8; margin: 0 auto; margin-bottom: 1.6rem; } .box-notification .box-icon { position: absolute; top: 0; left: 0; color: white; background-color: #1ABC9C; padding:0 0.5rem; border-top-left-radius: 4px; border-bottom-left-radius: 4px; height: 100%; } .box-notification .box-icon i { position: relative; top: 10%; display: block } .box-notification .box-icon.error { background-color: #ED4A43; } .box-notification .box-icon.secondary { background-color: #3498DB; } a.close-notification { position: absolute; top: -4px; right: 10px; font-size: 24px; } ul.tx-copayers { background: #E4E8EC; padding: 0.3rem 0.8rem; margin-left: 0; box-shadow: inset 0 1px 1px 0 rgba(10,19,28,.12); border-radius: 0 0 3px 3px; } .tx-copayers li { list-style: none; padding: 0.3rem; font-size: 12px; } .tx-copayers li.bottom-line-copayers { border-bottom: 1px solid #CAD2DA; } .last-transactions-content { padding: 1.5rem 1rem; cursor:pointer; border-bottom: 1px solid #E4E8EC; } .sign-action { background: #E4E8EC; width: 100%; padding: 1rem; text-align: center; } .icon-sign { padding: 0.2rem 0.3rem; border-radius: 100%; color: #fff; margin-right: 7px; } .icon-sign.check { background-color: #3FBC9C; } .icon-sign.x { background-color: #C0392B; } .date-message { background-color: #213140; border-radius: 3px; font-size: 12px; padding: 0.2rem 0.4rem; color: #7A8C9E; } .input-note { margin-top: -10px; display: block; margin-bottom: 1rem; } .send-note { background-color: #F8F8FB; padding: 10px; } .send-note span { margin-bottom: 5px; font-size: 12px; color: #2C3E50; } .manage a { text-transform: uppercase; font-weight: 700; color: #4B6178; padding: 1.5rem 1rem; display: block; overflow: hidden; } .manage a span { display: block; margin-top: 8px; float: left; } ul.manage li { border-bottom: 1px solid #f1f3f5; } .manage a i.circle { background-color: #4B6178; width: 50px; height: 50px; padding: 0.65rem; border-radius: 100%; display: block; font-size: 30px; color: #fff; float: left; margin-right: 20px; } .manage a i.circle.plus-fixed { padding: 0.1rem 0.9rem; } .dn {display: none;} .dni {display: none !important;} .pr {position: relative;} .pa {position: absolute;} .m0 {margin: 0;} .p0i {padding: 0 !important;} .db {display: block;} .size-10 { font-size: 10px; } .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-42 { font-size: 42px; } .size-48 { font-size: 48px; } .size-60 { font-size: 60px; } .size-72 { font-size: 72px; } .m5 {margin: 5px;} .m5t {margin-top: 5px;} .m5b {margin-bottom: 5px;} .m5r {margin-right: 5px;} .m10 {margin: 10px;} .m10b {margin-bottom: 10px;} .m10t {margin-top: 10px;} .m15b {margin-bottom: 15px;} .m15r {margin-right: 15px;} .m20b {margin-bottom: 20px;} .m30b {margin-bottom: 30px;} .m40b {margin-bottom: 40px;} .m50b {margin-bottom: 50px;} .m10r {margin-right: 10px;} .m15l {margin-left: 15px;} .m15t {margin-top: 15px;} .m20r {margin-right: 20px;} .m20t {margin-top: 20px;} .m20tp {margin-top: 20%;} .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;} .p20v {padding: 20px 0;} .p25l {padding-left: 25px;} .p15 {padding:15px;} .p20 {padding:20px;} .p10 {padding:10px;} .p10b {padding-bottom:10px;} .p45t {padding-top:45px;} .p60t {padding-top:60px;} .m60t {margin-top:60px;} .p45li {padding-left: 45px !important;} .m30v {margin: 30px 0;} .m10h {margin:0 10px;} .m10v {margin:10px 0;} .m20v {margin:20px 0;} .m30a {margin: 30px auto;} .m-negative-l {margin-left: -0.9375rem;} .br100 {border-radius: 100%;} .lh {line-height: 0;} .lh140 {line-height: 140%;} .oh {overflow:hidden;} .vm {vertical-align: middle;} .vt {vertical-align: top;} .ma { margin: 0 auto;} .tu {text-transform: uppercase;} .line { border-top: 1px solid #F8F8FB; margin: 0.7rem 0; } .line-white { border-top: 1px solid #fff; margin: 0.7rem 0; } .line-t { border-top: 1px solid #E9E9EC; padding-top: 0.5rem; } .line-b { border-bottom: 1px solid #E9E9EC; } .name-wallet { color: #7A8C9E; font-size: 14px; font-weight: 300; } .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 { line-height: 2.5rem; } .sidebar li.nav-item.selected .name-wallet { font-weight: 700; } .name-wallet i { color: #B6E9DF; } .locked { font-size: 11px; 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; } .spinner { display: inline-block; } .success { color: #1ABC9C; } .bg-success { background-color: #1ABC9C; } .tx-proposal i { padding: .1rem .3rem; background-color: #A5B2BF; border-radius: 100%; color: #fff; } .tx-proposal i.active { background-color: #A02F23; } .header-modal { width: 100%; padding: 0.8rem; position: relative; } .label { font-weight: 500; padding: 0.3rem 0.4rem; } .label.outline { background: transparent; border: 1px solid #4B6178; } .label.success {background-color: #1ABC9C;} .label.alert {background-color: #ED4A43;} .label.gray {background-color: #4B6178;} .history .label { width: 57px; text-align: center; font-size: 65%; } .bg-alert { background-color: #ED4A43; } .ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 3px; } ul.pagination li.current a { background: #1ABC9C; } .logo { background: transparent url('../img/logo-negative-beta.svg') no-repeat; background-size: 130px 51px; } input { border-radius: 2px; background: #EDEDED; color: #2C3E42; padding: 1.2rem 0.7rem; margin-bottom: 1.5rem; border: 0; } 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 { color: #B7C2CD; margin-bottom: 1.5rem; height: 35px; background: transparent; border: none; padding-left: 0.1rem; font-size: 13px; border-bottom: 1px solid #F1F3F5; } 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 { color: #4B6178; border-color: #CED5DC; background: transparent; } input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea { background-color: #E4E8EC; color: #2C3E50; padding-left: 0.5rem; opacity: 1; } select { background-color: transparent; color: #7A8C9E; border-color: #A5B2BF; } label { text-transform: uppercase; font-weight: 700; font-size: 11px; color: #34495E; margin-bottom: 3px; } button.radius, .button.radius { -webkit-border-radius: 3px; border-radius: 3px; } label small.has-error { font-size: 11px; } table { border-collapse: collapse; text-align: left; width: 100%; border: none; } thead tr{ text-transform: uppercase; } table tr td, table tr th { padding: 15px; } table tr.even, table tr.alt, table tr:nth-of-type(even) { background: #fff; } table tfoot tr td, table tfoot tr th, table thead tr td, table thead tr th { background-color: #F5F5F8; color:#949BAD; font-weight: normal } table tbody td { color: #7A8C9E; border-bottom: 1px solid #F1F1F3; } table tbody tr:last-child td { border-bottom: none; } /*//////////////////////////// BUTTON OUTLINE ////////////////////////////*/ .button.outline, .button.outline:hover, .button.outline:focus, button.outline, button.outline:hover, button.outline:focus { border-radius: 3px; background: transparent; } .button.outline.dark-gray, .button.outline.dark-gray:hover, .button.outline.dark-gray:focus, button.outline.dark-gray, button.outline.dark-gray:hover, button.outline.dark-gray:focus { background-color: transparent; border: 1px solid #A5B2BF; color: #A5B2BF; } .button.outline.light-gray, .button.outline.light-gray:hover, .button.outline.light-gray:focus, button.outline.light-gray, button.outline.light-gray:hover, button.outline.light-gray:focus { background-color: transparent; border: 1px solid #CED5DC; color: #7A8C9E; } .button.outline.white { background-color: transparent; border: 1px solid #fff; color: #fff; } /* SECONDARY */ button.secondary, button.secondary:hover, button.secondary:focus, .button.secondary, .button.secondary:hover, .button.secondary:focus { background-color: #008CC1; color: #fff; border-radius: 3px; } /* PRIMARY */ button.primary, button.primary:hover, button.primary:focus, .button.primary, .button.primary:hover, .button.primary:focus { background-color: #1ABC9C; color: #fff; border-radius: 3px; } /* WARNING */ button.warning, .button.warning, button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus { background-color: #ED4A43; color: #fff; border-radius: 3px; } /* WHITE */ button.white, .button.white { background-color: #fff; color: #2C3E50; } /* BLACK */ button.black, .button.black { background-color: #2C3E50; color: #fff; } /* GRAY */ button.gray, .button.gray { background-color: #A9B2B8; color: #2C3E50; } button.disabled.black, button[disabled].black, .button.disabled.black, .button[disabled].black, button.disabled.white, button[disabled].white, .button.disabled.white, .button[disabled].white, button.disabled.warning, button[disabled].warning, .button.disabled.warning, .button[disabled].warning, button.disabled.primary, button[disabled].primary, .button.disabled.primary, .button[disabled].primary, button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary { background-color: #A5B2BF !important; color: #fff; } .button, button { text-transform: uppercase; transition: none !important; } .button:focus, button:focus { outline:0; } .wallet-selection.wallets { background-color: #213140 ; } ul.wallet-selection.wallets { margin: 0; overflow: hidden; } .wallet-selection.wallets li { overflow: hidden; padding: 1rem; } .wallet-selection.wallets li a { display: block; } .postfix.button, .prefix.button { position: absolute; width: 38px; height: 28px; right: 7px; top: 7px; -moz-box-shadow: none; box-shadow: none; line-height: 1.7rem; border-radius: 2px; } .postfix.button i, .prefix.button i { left: 12px; top: 0; border: none; -moz-box-shadow: none; box-shadow: none; color: #fff; } label.postfix, a.postfix { height: 100%; border: none; font-weight: 700; font-size: 14px; color: #7A8C9E; text-transform: uppercase; border-radius: 0 2px 2px 0; position: absolute; top: 0; right: 0; width: 40px; } .photo-container { margin-right: 3px; display: inline-block; width: 35px; height: 35px; color: #fff; background: #7A8C9E; border-radius: 100%; vertical-align: middle; overflow: hidden; text-align: center; } .photo-container.profile { width: 80px; height: 80px; } .need-backup { background: #ED4A43; -moz-box-shadow: 1px 1px 0px 0px #A02F23; box-shadow: 1px 1px 0px 0px #A02F23; position: absolute; top: 22px; left: 0px; width: 14px; height: 14px; border-radius: 100%; font-size: 9px; padding-top: 2px; color: #fff; } .pointer { cursor: pointer; } .input.block i { position: absolute; top: 5px; left: 10px; font-size: 20px; color: #7A8C9E; border-right: 1px solid #ccc; padding-right: 8px; border-right: 1px solid #E5E8EB; display: block; cursor: pointer; } .input { position: relative;} .input label { line-height: 0; padding: 0; } .icon-input { font-size: 9px; color: #fff; vertical-align: middle; margin-right: 3px; } .icon-input .fi-check { padding: .2rem .3rem; background-color: #1ABC9C; border-radius: 100%; display: block; } .icon-input .fi-x { padding: .1rem .3rem; background-color: #ED4A43; border-radius: 100%; } .has-error { color: #ED4A43; } .is-valid { color: #1ABC9C; } input.ng-invalid-match, input.ng-invalid-match:focus { border-color: red; } .black { background-color: #2C3E50; } .text-italic {font-style: italic;} .text-light {font-weight: 100;} .text-bold {font-weight: 700;} .text-gray {color: #8597A7;} .text-black {color: #2C3E50;} .text-primary {color: #1ABC9C;} .text-secondary {color: #3498DB;} .text-white {color: #fff;} .text-warning {color: #ED4A43;} .text-alert {color: red;} .text-success {color: #1ABC9C;} .panel { background: #FFFFFF; border-radius: 3px; padding: 1rem; } .panel qrcode { background-color: white; } .panel qrcode canvas { width: 250px; height: 250px; } .tour { text-align: center; height: 100%; } .tour5 { width: 90%; position: absolute; bottom: 10%; margin: 0 auto; margin-left: 5%; } .secret { overflow-wrap: break-word; word-wrap: break-word; text-align: center; font-size: 14px; } .collapse { margin: auto; max-width: 100%; } .w-popup-menu{ padding:0; } .w-popup-menu li { width: 180px; height: 180px; overflow: hidden; position: relative; float: left; background: #213140; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin: 20px 26px 0 0; } .w-popup-menu li:last-child{ margin-right: 0px; } .w-popup-menu li a{ text-align: center; width: 100%; height: 100%; display: block; color: #333; position: relative; } .w-popup-icon { color: #c5e4f4 ; font-size: 90px; text-shadow: 1px 0 1px rgba(255,255,255,.7); line-height: 150px; position: absolute; width: 58px; left: 60px; top: 14px; text-align: center; } .w-popup-content { position: absolute; left: 0px; width: 100%; height: 50%; top: 50%; } .w-popup-main { color: #FFFFFF; opacity: 0.6; text-align: center; margin-bottom: 5px; } .w-popup-sub { text-align:center; color: #FFFFFF; line-height: 20px; opacity: 0.8; } /*///////////////////////// LOADING /////////////////////////*/ .loading-screen { width: 100%; height: 100%; position: absolute; z-index: 999; top: 0; left: 0; background-color: #2C3E50; } .loading-screen-content { margin-top: 20%; width: 100%; text-align: center; } /*/////////////////////////////////////////////////*/ .tabbable { border: 2px solid #213140; border-radius: 3px; margin-bottom: 1.2rem; } .tabs dd.active a { color: #fff; background-color: transparent; } .tabs dd>a { background: #213140; text-transform: uppercase; color: #3E4F5D; padding: 1rem; text-align: center; height: 64px; font-size: 14px; line-height: 15px; } .tabs-content { margin-bottom: 0; } .tabs-content>.content { padding: 0; } .content-item { border-bottom: 1px solid rgba(32,48,64,0.30); box-shadow: 0px 1px 0px 0px rgba(121,140,158,0.10); margin: .5rem 1.3rem; padding: 0.3rem 0; font-size: 14px; } .bg-circle { background: #253547; border-radius: 100%; margin: 0 0.5rem 0.3rem 0; padding: .45rem 0.5rem; display: inline-block; text-align: center; vertical-align: middle; color: #7A8C9E; font-size: 30px; width: 50px; height: 50px; } .session-expired { background: rgba(32,48,64,0.90); width: 100%; height: 100%; position: absolute; color: #fff; z-index: 999; padding-top: 20%; text-align: center; padding-left: 10%; padding-right: 10%; } .line-none { border: none; box-shadow: none; } .settings fieldset { border: 1px solid #425467; } .settings fieldset legend { background: transparent; color: #A5B2BF; } .settings label { color: #A5B2BF; font-weight: normal; } .splash .start-button { position: absolute; bottom: 0; } .preferences li { cursor: pointer !important; } .passModal { background: #FFFFFF; box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50); border-radius: 5px; position: absolute; width: 90%; left: 5%; top: 15%; z-index: 1100; } .passModalMask { position: absolute; width: 100%; height: 100%; z-index: 1099; opacity:0.3; background: black; } .tx-details-blockchain li { cursor: pointer !important; } .onGoingProcess { left: 0; width: 100%; bottom: 90px; position: absolute; z-index: 1020; } .onGoingProcess-content { background: #213140; text-align: center; max-width: 16.5rem; max-height: 3.5rem; margin: auto; color: #fff; padding: 0.5rem; font-size: 13px; opacity: 0.8; border-radius: 3px; } /*/////////////////// SPINNER ////////////////////*/ #history .spinner, #receive .spinner { height: 46px; } #history .spinner > div, #receive .spinner > div { background-color: #7A8C9E; } .spinner { margin: 0 auto; width: 35px; height: 27px; text-align: center; font-size: 10px; vertical-align: middle; } .spinner > div { background-color: #fff; height: 100%; width: 2px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }