/* BEGIN: Screen-specific styles */ @font-face { font-family: 'Outfit'; src: url('../fonts/outfit/static/Outfit-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Outfit'; src: url('../fonts/outfit/static/Outfit-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Outfit'; src: url('../fonts/outfit/static/Outfit-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Outfit'; src: url('../fonts/outfit/static/Outfit-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } * { /* -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; */ } /* Light mode colors - System controlled default */ /* Usually the element */ :root { --background-1: #e7f2ff; --background-2: #e7f2ff; --background-red-1: #ffb5b5; --text-color-1: #2e59b3; --text-color-green-1: #00c16a; --text-color-red-1: #f04141; --text-color-red-2: #b10707; --text-color-yellow-1: #e69f00; --text-color-blue-1: #003dcd; --heading-color-1: #003dcc; --link-text-color-1: #003dcc; --link-text-color-2: #003dcd; --link-text-background-1: #d8eaff; --input-background-1: #fff; --input-border-color-1: #fff; --input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */ --input-border-focus-color-1: #fff; --input-border-focus-color-2: #003dcc; --input-text-color-1: #2e59b3; --input-text-color-2: #2e59b3; --input-placeholder-color-1: #8aa6da; --button-background-1: #003dcc; --button-background-public-key: #fab417; --button-background-trade: #fd8016; --button-background-send: #f72a2a; --button-text-color-1: #fff; --button-text-color-2: #003dcc; --highlight-1-1-background: #003dcc; --highlight-1-1-text-color: #fff; --highlight-1-2-background: #003dcc; --highlight-1-2-text-color: #fff; --highlight-2-1-background: #d8eaff; --highlight-2-2-background: #d8eaff; --highlight-3-1-background: #fff; --highlight-3-1-text-color: #2b74ff; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #fff; --shadow-background-2: #e7f2ff; --outline-1-border-color: #fff; --col-separator-background-1: #3b41ff; --icon-color-1: none; /* #003dcc */ --logo-color-1: none; } /* Dark mode colors - System controlled default */ @media (prefers-color-scheme: dark) { :root { --background-1: #000; --background-2: #000; --background-red-1: #000; --text-color-1: #fff; --text-color-green-1: #00c16a; --text-color-red-1: #f04141; --text-color-red-2: #b10707; --text-color-yellow-1: #e69f00; --text-color-blue-1: #2b74ff; --heading-color-1: #fff; --link-text-color-1: #2b74ff; /* --link-text-color-1: #2a6aff; */ --link-text-color-2: #fff; --link-text-background-1: rgba(0, 0, 0, 0); --input-background-1: #303030; --input-border-color-1: #303030; --input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */ --input-border-focus-color-1: #303030; --input-border-focus-color-2: #fff; --input-text-color-1: #fff; --input-text-color-2: #fff; --input-placeholder-color-1: #999; --button-background-1: #003dca; --button-background-public-key: #df9a00; --button-background-trade: #e46900; --button-background-send: #c80000; --button-text-color-1: #fff; --button-text-color-2: #0058ff; --highlight-1-1-background: #003dca; /* Created via: --icon-color-1: brightness(1.3) hue-rotate(-20deg); */ --highlight-1-1-text-color: #fff; --highlight-1-2-background: #003dca; --highlight-1-2-text-color: #fff; --highlight-2-1-background: #1c1c1c; --highlight-2-2-background: #1c1c1c; --highlight-3-1-background: #fff; --highlight-3-1-text-color: #2b74ff; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #1c1c1c; --shadow-background-2: #000; --outline-1-border-color: #fff; --col-separator-background-1: #3b41ff; --icon-color-1: brightness(1.4); /* #0058ff */ --logo-color-1: brightness(5) saturate(0) brightness(5); } } /* Light mode colors - JS logic controlled for overrides */ .theme-light-1 { --background-1: #e7f2ff; --background-2: #e7f2ff; --background-red-1: #ffb5b5; --text-color-1: #2e59b3; --text-color-green-1: #00c16a; --text-color-red-1: #f04141; --text-color-red-2: #b10707; --text-color-yellow-1: #e69f00; --text-color-blue-1: #003dcd; --heading-color-1: #003dcc; --link-text-color-1: #003dcc; --link-text-color-2: #003dcd; --link-text-background-1: #d8eaff; --input-background-1: #fff; --input-border-color-1: #fff; --input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */ --input-border-focus-color-1: #fff; --input-border-focus-color-2: #003dcc; --input-text-color-1: #2e59b3; --input-text-color-2: #2e59b3; --input-placeholder-color-1: #8aa6da; --button-background-1: #003dcc; --button-background-public-key: #fab417; --button-background-trade: #fd8016; --button-background-send: #f72a2a; --button-text-color-1: #fff; --button-text-color-2: #003dcc; --highlight-1-1-background: #003dcc; --highlight-1-1-text-color: #fff; --highlight-1-2-background: #003dcc; --highlight-1-2-text-color: #fff; --highlight-2-1-background: #d8eaff; --highlight-2-2-background: #d8eaff; --highlight-3-1-background: #fff; --highlight-3-1-text-color: #2b74ff; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #fff; --shadow-background-2: #e7f2ff; --outline-1-border-color: #fff; --col-separator-background-1: #3b41ff; --icon-color-1: none; /* #003dcc */ --logo-color-1: none; } /* Dark mode colors - JS logic controlled for overrides */ .theme-dark-1 { --background-1: #000; --background-2: #000; --background-red-1: #000; --text-color-1: #fff; --text-color-green-1: #00c16a; --text-color-red-1: #f04141; --text-color-red-2: #b10707; --text-color-yellow-1: #e69f00; --text-color-blue-1: #2b74ff; --heading-color-1: #fff; --link-text-color-1: #2b74ff; /* --link-text-color-1: #2a6aff; */ --link-text-color-2: #fff; --link-text-background-1: rgba(0, 0, 0, 0); --input-background-1: #303030; --input-border-color-1: #303030; --input-border-color-2: rgba(82, 107, 167, 0.3); /* #526ba7 */ --input-border-focus-color-1: #303030; --input-border-focus-color-2: #fff; --input-text-color-1: #fff; --input-text-color-2: #fff; --input-placeholder-color-1: #999; --button-background-1: #003dca; --button-background-public-key: #df9a00; --button-background-trade: #e46900; --button-background-send: #c80000; --button-text-color-1: #fff; --button-text-color-2: #0058ff; --highlight-1-1-background: #003dca; /* Created via: --icon-color-1: brightness(1.3) hue-rotate(-20deg); */ --highlight-1-1-text-color: #fff; --highlight-1-2-background: #003dca; --highlight-1-2-text-color: #fff; --highlight-2-1-background: #1c1c1c; --highlight-2-2-background: #1c1c1c; --highlight-3-1-background: #fff; --highlight-3-1-text-color: #2b74ff; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #1c1c1c; --shadow-background-2: #000; --outline-1-border-color: #fff; --col-separator-background-1: #3b41ff; --icon-color-1: brightness(1.4); /* #0058ff */ --logo-color-1: brightness(5) saturate(0) brightness(5); } body { background: var(--background-1); color: var(--text-color-1); font: 600 24px 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif; } @media (max-width: 600px) { body { font-size: 20px; } } @media (max-width: 420px) { body { font-size: 18px; } } @media (max-width: 385px) { body { font-size: 18px; } } @media (max-width: 374px) { body { font-size: 18px; } } @media (max-width: 349px) { body { font-size: 14px; } } input, textarea /*.contenteditable?*/ { -webkit-touch-callout:default; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } p { margin-top: 48px; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color-1); } /* Update .text-lg, .text-xl, .text-xxl too */ h3 { font-size: 150%; margin-top: 48px; } @media (max-width: 600px) { h3 { font-size: 140%; } } h2 { font-size: 250%; margin-top: 48px; } @media (max-width: 600px) { h2 { font-size: 210%; } } h1 { font-size: 300%; margin-top: 48px; } @media (max-width: 600px) { h1 { font-size: 240%; } } /* Update h1, h2, h3 too */ .text-lg { font-size: 150%; } @media (max-width: 600px) { .text-lg { font-size: 140%; } } .text-xl { font-size: 250%; } @media (max-width: 600px) { .text-xl { font-size: 210%; } } .text-xxl { font-size: 300%; } @media (max-width: 600px) { .text-xxl { font-size: 240%; } } hr { height: 4px; background: rgba(82, 107, 167, 0.3); /* #526ba7 */ border: 0; } a, a:hover, a:focus, a:active { color: var(--link-text-color-1); } .link-text-color-1, .link-text-color-1:hover, .link-text-color-1:focus, .link-text-color-1:active { color: var(--link-text-color-1); } .link-text-color-2, .link-text-color-2:hover, .link-text-color-2:focus, .link-text-color-2:active { color: var(--link-text-color-2); } #screen--body figure img { border-radius: 48px; } *[type="text"], *[type="email"], *[type="url"], *[type="password"], *[type="search"], *[type="number"], *[type="tel"], *[type="range"], *[type="date"], *[type="month"], *[type="week"], *[type="time"], *[type="datetime"], *[type="datetime-local"], *[type="color"], textarea, *[type="text"]:hover, *[type="email"]:hover, *[type="url"]:hover, *[type="password"]:hover, *[type="search"]:hover, *[type="number"]:hover, *[type="tel"]:hover, *[type="range"]:hover, *[type="date"]:hover, *[type="month"]:hover, *[type="week"]:hover, *[type="time"]:hover, *[type="datetime"]:hover, *[type="datetime-local"]:hover, *[type="color"]:hover, textarea:hover, *[type="text"]:active, *[type="email"]:active, *[type="url"]:active, *[type="password"]:active, *[type="search"]:active, *[type="number"]:active, *[type="tel"]:active, *[type="range"]:active, *[type="date"]:active, *[type="month"]:active, *[type="week"]:active, *[type="time"]:active, *[type="datetime"]:active, *[type="datetime-local"]:active, *[type="color"]:active, textarea:active { background: var(--input-background-1); border: 4px solid var(--input-border-color-1); border-bottom-style: dotted; color: var(--input-text-color-1); } *[type="text"]:focus, *[type="email"]:focus, *[type="url"]:focus, *[type="password"]:focus, *[type="search"]:focus, *[type="number"]:focus, *[type="tel"]:focus, *[type="range"]:focus, *[type="date"]:focus, *[type="month"]:focus, *[type="week"]:focus, *[type="time"]:focus, *[type="datetime"]:focus, *[type="datetime-local"]:focus, *[type="color"]:focus, textarea:focus { background: var(--input-background-1); border-top: 4px solid var(--input-border-focus-color-1); border-right: 4px solid var(--input-border-focus-color-1); border-bottom: 4px dotted var(--input-border-focus-color-2); border-left: 4px solid var(--input-border-focus-color-1); } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: var(--input-placeholder-color-1); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: var(--input-placeholder-color-1); opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--input-placeholder-color-1); opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--input-placeholder-color-1); } ::-ms-input-placeholder { /* Microsoft Edge */ color: var(--input-placeholder-color-1); } ::placeholder { /* Most modern browsers support this now. */ color: var(--input-placeholder-color-1); } *[type="submit"], *[type="button"], *[type="reset"], button, .btn, .input-file-btn { background: var(--button-background-1); color: var(--button-text-color-1); } *[type="submit"]:hover, *[type="button"]:hover, *[type="reset"]:hover, button:hover, .btn:hover, .input-file-btn:hover, *[type="submit"]:active, *[type="button"]:active, *[type="reset"]:active, button:active, .btn:active, .input-file-btn:active, *[type="submit"]:focus, *[type="button"]:focus, *[type="reset"]:focus, button:focus, .btn:focus, .input-file-btn:focus { background: var(--button-background-1); color: var(--button-text-color-1); } input.scheme-1[type="text"], input.scheme-1[type="email"], input.scheme-1[type="url"], input.scheme-1[type="password"], input.scheme-1[type="search"], input.scheme-1[type="number"], input.scheme-1[type="tel"], input.scheme-1[type="range"], input.scheme-1[type="date"], input.scheme-1[type="month"], input.scheme-1[type="week"], input.scheme-1[type="time"], input.scheme-1[type="datetime"], input.scheme-1[type="datetime-local"], input.scheme-1[type="color"], textarea.scheme-1, input.scheme-1[type="text"]:hover, input.scheme-1[type="email"]:hover, input.scheme-1[type="url"]:hover, input.scheme-1[type="password"]:hover, input.scheme-1[type="search"]:hover, input.scheme-1[type="number"]:hover, input.scheme-1[type="tel"]:hover, input.scheme-1[type="range"]:hover, input.scheme-1[type="date"]:hover, input.scheme-1[type="month"]:hover, input.scheme-1[type="week"]:hover, input.scheme-1[type="time"]:hover, input.scheme-1[type="datetime"]:hover, input.scheme-1[type="datetime-local"]:hover, input.scheme-1[type="color"]:hover, textarea.scheme-1:hover, input.scheme-1[type="text"]:active, input.scheme-1[type="email"]:active, input.scheme-1[type="url"]:active, input.scheme-1[type="password"]:active, input.scheme-1[type="search"]:active, input.scheme-1[type="number"]:active, input.scheme-1[type="tel"]:active, input.scheme-1[type="range"]:active, input.scheme-1[type="date"]:active, input.scheme-1[type="month"]:active, input.scheme-1[type="week"]:active, input.scheme-1[type="time"]:active, input.scheme-1[type="datetime"]:active, input.scheme-1[type="datetime-local"]:active, input.scheme-1[type="color"]:active, textarea.scheme-1:active { border: 4px solid var(--input-border-color-2); border-bottom-style: dotted; color: var(--input-text-color-2); } input.scheme-1[type="text"]:focus, input.scheme-1[type="email"]:focus, input.scheme-1[type="url"]:focus, input.scheme-1[type="password"]:focus, input.scheme-1[type="search"]:focus, input.scheme-1[type="number"]:focus, input.scheme-1[type="tel"]:focus, input.scheme-1[type="range"]:focus, input.scheme-1[type="date"]:focus, input.scheme-1[type="month"]:focus, input.scheme-1[type="week"]:focus, input.scheme-1[type="time"]:focus, input.scheme-1[type="datetime"]:focus, input.scheme-1[type="datetime-local"]:focus, input.scheme-1[type="color"]:focus, textarea.scheme-1:focus { border-top: 4px solid var(--input-border-focus-color-2); border-right: 4px solid var(--input-border-focus-color-2); border-bottom: 4px dotted var(--input-border-focus-color-2); border-left: 4px solid var(--input-border-focus-color-2); } .btn-clear, .btn-clear:hover, .btn-clear:active, .btn-clear:focus { color: var(--button-text-color-2); background: transparent; } .scheme-1::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: var(--input-placeholder-color-1); } .scheme-1:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: var(--input-placeholder-color-1); opacity: 1; } .scheme-1::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--input-placeholder-color-1); opacity: 1; } .scheme-1:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--input-placeholder-color-1); } .scheme-1::-ms-input-placeholder { /* Microsoft Edge */ color: var(--input-placeholder-color-1); } .scheme-1::placeholder { /* Most modern browsers support this now. */ color: var(--input-placeholder-color-1); } .icon-arrow-long-left { background: url('../media/icon/icon-arrow-long-left-2-blue.svg') 50% 50% no-repeat; background-size: contain; } .icon-arrow-long-right { background: url('../media/icon/icon-arrow-long-right-2-blue.svg') 50% 50% no-repeat; background-size: contain; } .icon-arrow-up-down { background: url('../media/icon/icon-arrow-up-down-2-blue.svg') 50% 50% no-repeat; background-size: contain; } .icon-color-1 { filter: var(--icon-color-1); } .filter-white { /* filter: brightness(20); */ filter: brightness(5) saturate(0) brightness(5); } .filter-none { filter: none; } .highlight-1-1 { background: var(--highlight-1-1-background); color: var(--highlight-1-1-text-color); } .highlight-1-2 { background: var(--highlight-1-2-background); color: var(--highlight-1-2-text-color); border-radius: 36px; } .highlight-2-1 { background: var(--highlight-2-1-background); border-radius: 26px; } .highlight-2-2 { background: var(--highlight-2-2-background); border-radius: 36px; } .highlight-3-1 { background: var(--highlight-3-1-background); color: var(--highlight-3-1-text-color); } .highlight-tip { background: var(--highlight-tip-background); color: var(--highlight-tip-text-color); border-radius: 26px; } .highlight-warning { background: var(--highlight-warning-background); color: var(--highlight-warning-text-color); border-radius: 26px; } .outline-1 { border-color: var(--outline-1-border-color); } .text-color-green-1 { color: var(--text-color-green-1); } .text-color-red-1 { color: var(--text-color-red-1); } .text-color-yellow-1 { color: var(--text-color-yellow-1); } .text-color-blue-1 { color: var(--text-color-blue-1); } .col-separator-xs { background: var(--col-separator-background-1); } .btn.public-key { background: var(--button-background-public-key); } .btn.buy { background: var(--button-background-trade); } .btn.send { background: var(--button-background-send); } .transact-controls .text { margin-top: 0; } #screen--body .screen.error .icon-arrow-long-left { filter: hue-rotate(140deg); } .screen {} #screen--body .screen.error { background: var(--background-red-1); color: var(--text-color-red-2); } #screen--body .screen.error h1, #screen--body .screen.error h2, #screen--body .screen.error h3, #screen--body .screen.error h4, #screen--body .screen.error h5, #screen--body .screen.error h6 { color: var(--text-color-red-2); } #screen--body .screen.error .btn-clear, #screen--body .screen.error .btn-clear:hover, #screen--body .screen.error .btn-clear:active, #screen--body .screen.error .btn-clear:focus { color: var(--text-color-red-2); } #screen--body .screen.error .icon-arrow-long-left { filter: hue-rotate(140deg); } #screen--body .screen.error .icon-arrow-long-left { filter: hue-rotate(140deg); } #app-content {} #screen--group-1 { /* display: flex; */ /* flex-direction: column; */ /* max-width: 800px; */ margin: 0 auto; height: 100%; } #screen--group-1 > .cols > * > * { /* height: 100%; */ } #screen--header { height: 66px; } .logo-dynamic-1 { width: 100%; max-width: 168px; height: auto; padding: 16px 20px; position: relative; vertical-align: top; border: 0; filter: var(--logo-color-1); } @media (max-width: 374px) { .logo-dynamic-1 { padding: 14px 10px; } } @media (max-width: 349px) { .logo-dynamic-1 { padding: 15px 10px; } } .logo-dynamic-2 { width: 100%; max-width: 200px; height: auto; padding: 16px 20px; position: relative; vertical-align: top; border: 0; filter: var(--logo-color-1); } @media (max-width: 374px) { .logo-dynamic-2 { padding: 14px 10px; } } @media (max-width: 349px) { .logo-dynamic-2 { padding: 15px 10px; } } .icon-autosize-1 { height: 66px; width: 100%; padding: 18px 14px; } @media (max-width: 374px) { .icon-autosize-1 { padding: 14px 12px; } } @media (max-width: 349px) { .icon-autosize-1 { padding: 14px 10px; } } .wait-time-countdown { position: relative; display: inline-block; min-width: 2em; } #screen--body { } /* @remove Old, orig */ /* #screen--body > .cols > * > .screen { */ #screen--body .screen { /* border-top-left-radius: 48px; border-top-right-radius: 48px; */ } @media (max-width: 349px) { #screen--body .screen { /* border-top-left-radius: 36px; */ /* border-top-right-radius: 36px; */ } } /* @remove Old, orig */ /* #screen--body > .cols > * > .screen > * { */ #screen--body .screen[data-visible="1"] { padding: 20px 20px 60px; } @media (max-width: 349px) { #screen--body .screen[data-visible="1"] { padding: 18px 18px 54px; } } @media (max-width: 300px) { #screen--body .screen[data-visible="1"] { padding: 16px 16px 48px; } } #screen--body .screen .screen { background: inherit; border-top-left-radius: inherit; border-top-right-radius: inherit; } #screen--body .screen[data-visible="1"] .screen[data-visible="1"] { padding: inherit; } /* Don't apply to links inside of footer areas w/

links */ /* Don't apply to links that have images inside */ #screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)), #screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)):hover, #screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)):focus, #screen--body p:not(#screen--footer-main-menu p):not(#screen--footer-newsletter-join-form p) a:not(:has(img)):active, /* Don't apply to links inside of footer areas w/

  • */ /* Don't apply to links that have images inside */ #screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)), #screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)):hover, #screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)):focus, #screen--body li:not(#screen--footer-main-menu li):not(#screen--footer-newsletter-join-form li) a:not(:has(img)):active { background: var(--link-text-background-1); border-radius: 10px; padding: 0px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* border: 1px solid #003dcc0f;*/ } #screen--overlay-loading--wrapper #screen--overlay-loading { background: rgba(219, 234, 255, 0.9); /* #dbeaff */ } #screen--overview .transaction-item.empty { /* Push the .floating-pill-bottom section down, should sit near bottom of screen */ margin-bottom: 100px; } #screen--send-to-user-public-key-quantity .send-quantity-wrapper .type-wrapper > * { align-items: center; justify-content: center; display: flex; } #screen--send-to-user-public-key-quantity .send-quantity-wrapper .type-wrapper > * > span { padding-right: 30px; display: block; text-align: right; position: relative; width: 100%; } .pin-code-input-wrapper { display: inline-block; width: 20%; margin-left: 3%; } .pin-code-input-wrapper:first-child { margin-left: 0; }