mirror of
https://github.com/transatoshi-mw/grin-web-wallet.git
synced 2025-10-06 15:52:47 +00:00
618 lines
14 KiB
CSS
Executable File
618 lines
14 KiB
CSS
Executable File
@charset "UTF-8";
|
|
|
|
|
|
aside.message > div.camera {
|
|
max-width: none;
|
|
}
|
|
|
|
aside.message > div.camera > div {
|
|
max-width: none;
|
|
max-height: calc(100% - 4em);
|
|
width: auto;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
aside.message > div.camera > div > h2 {
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
aside.message > div.camera > div > p {
|
|
display: grid;
|
|
overflow: hidden;
|
|
}
|
|
|
|
aside.message > div.camera > div > p > span.text {
|
|
overflow: hidden;
|
|
}
|
|
|
|
aside.message > div.camera > div > p > span.text video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text a {
|
|
color: #3600C9;
|
|
font-weight: bold;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text a:focus {
|
|
color: #9E39FF;
|
|
background: transparent;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text a[tabindex="-1"] {
|
|
cursor: default;
|
|
color: #3600C9;
|
|
pointer-events: none;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.messageContainer {
|
|
padding: 0 1.4em;
|
|
display: inline-block;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.passphrase, aside.message > div > div > p > span.text span.message {
|
|
font-weight: bold;
|
|
font-family: monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: text;
|
|
-moz-user-select: text;
|
|
-webkit-user-select: text;
|
|
-o-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.message.rawData {
|
|
word-break: break-all;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input {
|
|
display: flex;
|
|
position: relative;
|
|
width: calc(100% - 6px);
|
|
max-width: 25em;
|
|
align-items: center;
|
|
font-size: 17pt;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show, aside.message > div > div > p > span.text span.input > span.capsLock {
|
|
position: absolute;
|
|
right: 0;
|
|
cursor: pointer;
|
|
border-radius: 0 0.4em 0.4em 0;
|
|
color: #E2CCF7;
|
|
font-family: "Open Sans", Arial, sans-serif;
|
|
height: 2.3em;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 2px 0 0;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show:focus, aside.message > div > div > p > span.text span.input > span.show:active {
|
|
color: #9E39FF;
|
|
}
|
|
|
|
@media only screen and (any-hover: hover) {
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show:hover {
|
|
color: #9E39FF;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show[tabindex="-1"] {
|
|
cursor: default;
|
|
color: #E2CCF7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show::after, aside.message > div > div > p > span.text span.input > span.capsLock::after {
|
|
font-family: "Font Awesome";
|
|
font-weight: bold;
|
|
font-size: 20pt;
|
|
content: "\F06E";
|
|
width: 1.9em;
|
|
text-align: center;
|
|
max-height: 100%;
|
|
display: inline-block;
|
|
line-height: normal;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show.conceal::after {
|
|
content: "\F070";
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.capsLock {
|
|
right: auto;
|
|
left: 0;
|
|
pointer-events: none;
|
|
border-radius: 0.4em 0 0 0.4em;
|
|
display: none;
|
|
color: #9E39FF;
|
|
padding: 0 0 0 2px;
|
|
}
|
|
|
|
body.capsLock aside.message > div > div > p > span.text span.input > input:focus ~ span.capsLock {
|
|
display: flex;
|
|
}
|
|
|
|
@supports (-webkit-touch-callout: none) {
|
|
|
|
aside.message > div > div > p > span.text span.input > span.capsLock {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.capsLock::after {
|
|
content: "\F0AA";
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input {
|
|
text-align: center;
|
|
background: white;
|
|
line-height: 2em;
|
|
border-radius: 0.4em;
|
|
margin: 0;
|
|
padding: 0 2.2em;
|
|
border: 0.15em solid #E2CCF7;
|
|
font-family: "Open Sans", Arial, sans-serif;
|
|
text-overflow: ellipsis;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
color: #3600C9;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input.notEmpty[type="password"], aside.message > div > div > p > span.text span.input > input[type="password"]:-webkit-autofill::first-line {
|
|
font-weight: bold;
|
|
font-family: monospace;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input[type="password"]:autofill::first-line {
|
|
font-weight: bold;
|
|
font-family: monospace;
|
|
}
|
|
|
|
@supports (-webkit-touch-callout: none) {
|
|
|
|
aside.message > div > div > p > span.text span.input > input.notEmpty[type="password"], aside.message > div > div > p > span.text span.input > input[type="password"]:-webkit-autofill::first-line {
|
|
font-family: password;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input[type="password"]:autofill::first-line {
|
|
font-family: password;
|
|
}
|
|
}
|
|
|
|
@media only screen and (any-hover: hover) {
|
|
|
|
aside.message > div > div > p > span.text span.input > input:hover, aside.message > div > div > p > span.text span.input > span.show:hover + input {
|
|
border: 0.15em solid #CA99FB;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show:hover + input:focus {
|
|
border: 0.15em solid #9E39FF;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input::placeholder {
|
|
color: #9A7FE4;
|
|
opacity: 1;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > input:focus {
|
|
border: 0.15em solid #9E39FF;
|
|
outline: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
|
|
aside.message > div > div > p > span.text span.input {
|
|
font-size: 16pt;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show::after, aside.message > div > div > p > span.text span.input > span.capsLock::after {
|
|
font-size: 18pt;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-height: 400px) {
|
|
|
|
aside.message > div > div > p > span.text span.input {
|
|
font-size: 16pt;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show::after, aside.message > div > div > p > span.text span.input > span.capsLock::after {
|
|
font-size: 18pt;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
|
|
aside.message > div > div > p > span.text span.input {
|
|
font-size: 15pt;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.input > span.show::after, aside.message > div > div > p > span.text span.input > span.capsLock::after {
|
|
font-size: 17pt;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio + span.radio {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"] {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
margin: 0;
|
|
width: 1.15em;
|
|
height: 1.15em;
|
|
border: 2px solid #3600C9;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"]:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"]::before {
|
|
content: "";
|
|
width: 0.59em;
|
|
height: 0.59em;
|
|
border-radius: 50%;
|
|
background-color: #3600C9;
|
|
display: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"]:focus::before {
|
|
background-color: #9E39FF;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"]:checked::before {
|
|
display: block;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"] + label {
|
|
padding-left: 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.radio input[type="radio"]:disabled + label {
|
|
cursor: default;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.pinMatrix {
|
|
display: inline-grid;
|
|
grid-gap: 1px;
|
|
gap: 1px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
justify-items: center;
|
|
background-color: #3600C9;
|
|
border: 1px solid #3600C9;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.pinMatrix > span {
|
|
background-color: white;
|
|
width: 2.3em;
|
|
height: 2.3em;
|
|
line-height: 2.3em;
|
|
font-family: monospace;
|
|
}
|
|
|
|
aside.message > div > div > p > span > ul {
|
|
list-style-position: inside;
|
|
margin: 0;
|
|
display: inline-block;
|
|
padding: 0px 2em;
|
|
}
|
|
|
|
aside.message > div > div > p > span > ul > li {
|
|
padding-bottom: 0.3em;
|
|
list-style-type: "•";
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
|
|
aside.message > div > div > p > span > ul > li {
|
|
padding-bottom: 0.4em;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span > ul > li:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
aside.message > div > div > p > span > ul > li > span {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
aside.message > div > div > p > span > ul > li > span.contextMenu {
|
|
cursor: text;
|
|
-moz-user-select: text;
|
|
-webkit-user-select: text;
|
|
-o-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result {
|
|
display: flex;
|
|
max-width: 11em;
|
|
max-height: 11em;
|
|
width: 50vw;
|
|
height: 50vw;
|
|
min-width: calc(250px * 0.5);
|
|
min-height: calc(350px * 0.5);
|
|
margin: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media only screen and (max-height: 750px) {
|
|
|
|
aside.message > div > div > p > span.text span.result {
|
|
max-width: 9em;
|
|
max-height: 9em;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-height: 650px) {
|
|
|
|
aside.message > div > div > p > span.text span.result {
|
|
max-width: 6em;
|
|
max-height: 6em;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-height: 400px) {
|
|
|
|
aside.message > div > div > p > span.text span.result {
|
|
max-width: 4em;
|
|
max-height: 4em;
|
|
width: 30vw;
|
|
height: 30vw;
|
|
min-width: calc(250px * 0.3);
|
|
min-height: calc(350px * 0.3);
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result > svg {
|
|
width: calc(100% / 1.1);
|
|
height: calc(100% / 1.1);
|
|
border-radius: 90%;
|
|
}
|
|
|
|
@keyframes resultScale {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.success > svg, aside.message > div > div > p > span.text span.result.failure > svg {
|
|
animation: resultScale 0.3s ease-in-out 0.9s both;
|
|
}
|
|
|
|
@keyframes resultLoading {
|
|
100% {
|
|
stroke-dashoffset: 202;
|
|
}
|
|
}
|
|
|
|
@keyframes resultSpin {
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result > svg > circle {
|
|
stroke: #E2CCF7;
|
|
fill: none;
|
|
stroke-dasharray: 101;
|
|
stroke-width: 5;
|
|
transform-origin: 50% 50%;
|
|
animation: resultLoading 3.6s linear infinite, resultSpin 1s linear infinite;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.change > svg > circle.loading {
|
|
opacity: 0;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.instant > svg > circle.loading {
|
|
stroke: none;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result > svg > circle.background {
|
|
stroke: none;
|
|
animation: none;
|
|
stroke-width: 0;
|
|
animation: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.instant > svg > circle.background {
|
|
transition: none;
|
|
}
|
|
|
|
@keyframes resultStroke {
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes resultFill {
|
|
100% {
|
|
stroke-width: 100%;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.success > svg > circle.background, aside.message > div > div > p > span.text span.result.failure > svg > circle.background {
|
|
stroke: #51C751;
|
|
opacity: 1;
|
|
stroke-dasharray: 101;
|
|
stroke-dashoffset: 101;
|
|
stroke-width: 5;
|
|
animation: resultStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards, resultFill 0.4s ease-in-out 0.4s forwards;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.failure > svg > circle.background {
|
|
stroke: #CA2F2F;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result > svg > path {
|
|
stroke: white;
|
|
fill: none;
|
|
stroke-dasharray: 101;
|
|
stroke-dashoffset: 101;
|
|
stroke-width: 6;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.result.success > svg > path.checkMark, aside.message > div > div > p > span.text span.result.failure > svg > path.cross {
|
|
animation: resultStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.copy {
|
|
padding: 0.25em 0.4em;
|
|
display: inline;
|
|
cursor: copy;
|
|
line-height: 1em;
|
|
transition: opacity 0.1s ease-in-out;
|
|
position: absolute;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.copy.clicked {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.copy::after {
|
|
font-family: "Font Awesome";
|
|
font-weight: bold;
|
|
content: "\F0C5";
|
|
position: relative;
|
|
top: 1px;
|
|
font-size: 16.5pt;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
|
|
aside.message > div > div > p > span.text span.copy {
|
|
position: relative;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text span.copy::after {
|
|
font-size: 15.5pt;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-height: 400px) {
|
|
|
|
aside.message > div > div > p > span.text span.copy::after {
|
|
font-size: 15.5pt;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
|
|
aside.message > div > div > p > span.text span.copy::after {
|
|
font-size: 14.5pt;
|
|
}
|
|
}
|
|
|
|
aside.message.noButtons > div > div > div > button {
|
|
display: block;
|
|
visibility: hidden;
|
|
margin: 0;
|
|
height: 2em;
|
|
padding: 0;
|
|
}
|
|
|
|
aside.message.oneButton > div > div > div > button:nth-child(2) {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (any-hover: hover) {
|
|
|
|
aside.message > div > div > div > button:hover {
|
|
background: #CEA1E3;
|
|
}
|
|
}
|
|
|
|
aside.message > div > div > div > button:focus {
|
|
background: #9115DE;
|
|
color: white;
|
|
border: 0.15em solid #9115DE;
|
|
}
|
|
|
|
aside.message > div > div > div > button:active {
|
|
background: #8600C0;
|
|
border: 0.15em solid #8600C0;
|
|
}
|
|
|
|
aside.message > div > div > div > button:disabled {
|
|
background: white;
|
|
color: #3600C9;
|
|
}
|
|
|
|
aside.message > div > div > div > button.focus {
|
|
background: #9115DE;
|
|
color: white;
|
|
border: 0.15em solid #9115DE;
|
|
}
|
|
|
|
aside.message > div > div > div > button:disabled.loading {
|
|
background: #CEA1E3;
|
|
border: 0.15em solid #3600C9;
|
|
color: #3600C9;
|
|
}
|
|
|
|
aside.message > div > div > div > button.dangerous::before {
|
|
content: "";
|
|
width: calc(100% + 0.3em);
|
|
height: calc(100% + 0.3em);
|
|
display: block;
|
|
position: absolute;
|
|
top: -0.15em;
|
|
left: -0.15em;
|
|
background: #F00000;
|
|
opacity: 0.8;
|
|
border-radius: 0.4em
|
|
}
|
|
|
|
aside.message > div > div > div > button.dangerous > span {
|
|
z-index: 1;
|
|
color: white;
|
|
}
|
|
|
|
aside.message > div > div > p > span.text *::selection {
|
|
background: #CC9AFB;
|
|
color: white;
|
|
}
|