mirror of
https://github.com/transatoshi-mw/grin-web-wallet.git
synced 2025-10-07 00:02:47 +00:00
contents of zip
This commit is contained in:
transatoshi
129
styles/about_section.css
Executable file
129
styles/about_section.css
Executable file
@@ -0,0 +1,129 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.description, main > div.unlocked > div > div > div.sections > div > div.about > div > div.versionInformation {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.description > p, main > div.unlocked > div > div > div.sections > div > div.about > div > div.versionInformation > p {
|
||||
padding-bottom: 0.6em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.description > p:last-child, main > div.unlocked > div > div > div.sections > div > div.about > div > div.versionInformation > p:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.versionInformation > p > span.contextMenu {
|
||||
cursor: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.versionInformation > p > span > a {
|
||||
word-break: break-all;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul {
|
||||
padding: 0;
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
margin: auto 0 auto 1.1em;
|
||||
color: rgb(12, 12, 13);
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul > li {
|
||||
padding-bottom: 0.6em;
|
||||
list-style-type: "• ";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul > li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > 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;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul > li a.contextMenu {
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.donate, main > div.unlocked > div > div > div.sections > div > div.about > div > div.translationContributors, main > div.unlocked > div > div > div.sections > div > div.about > div > div.attributions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.donate > p, main > div.unlocked > div > div > div.sections > div > div.about > div > div.translationContributors > p, main > div.unlocked > div > div > div.sections > div > div.about > div > div.attributions > p {
|
||||
padding-bottom: 0.6em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.donate > ul > li > span > span.contextMenu {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.donate > ul > li > span > span.copy {
|
||||
padding: 0.25em 0.4em;
|
||||
display: inline;
|
||||
cursor: copy;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.donate > ul > li > span > span.copy::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F0C5";
|
||||
font-size: 15.5pt;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.translationContributors > p > a {
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.attributions > ul > li > span > a:first-of-type {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
list-style: inside;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul > li {
|
||||
list-style-type: "•";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul > li > span, main > div.unlocked > div > div > div.sections > div > div.about > div > div > ul > li > a {
|
||||
margin-left: 0.55em;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.about > div > div.disclaimer > p {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
13
styles/account_section.css
Executable file
13
styles/account_section.css
Executable file
@@ -0,0 +1,13 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.account > div > div > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 300px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.account > div > div > div {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
490
styles/application.css
Executable file
490
styles/application.css
Executable file
@@ -0,0 +1,490 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div > div.info {
|
||||
color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
transition: opacity 0.2s ease-in-out 0.05s, visibility 0.2s ease-in-out 0.05s;
|
||||
justify-content: flex-end;
|
||||
min-height: 350px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
main > div > div.info.hide {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
transition-duration: 0.15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
main.normalTransitionSpeed > div > div.info {
|
||||
transition-duration: 0.15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
main > div > div.info > p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
font-size: 12pt;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
main > div > div > form {
|
||||
display: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 800px) {
|
||||
|
||||
main > div > div > form {
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
|
||||
main > div > div > form {
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 750px) {
|
||||
|
||||
main > div > div > form {
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
main > div > div > form {
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 600px) {
|
||||
|
||||
main > div > div > form {
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > form, main > div > div > div.deleteAllWallets, main > div > div.unlocked > div {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out 0.05s, visibility 0.2s ease-in-out 0.05s;
|
||||
}
|
||||
|
||||
main > div > div > form.hide, main > div > div > div.deleteAllWallets.hide, main > div > div.unlocked > div.hide {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition-duration: 0.15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
main.normalTransitionSpeed > div > div > form, main.normalTransitionSpeed > div > div > div.deleteAllWallets, main.normalTransitionSpeed > div > div.unlocked > div {
|
||||
transition-duration: 0.15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
main > div > div > form > p.verifySource {
|
||||
color: white;
|
||||
margin: calc(0.4em * 17 / 12) 0;
|
||||
padding: 1em 1em 1em 3.3em;
|
||||
background-color: #179D2E;
|
||||
border-radius: 0.4em;
|
||||
text-align: center;
|
||||
font-size: 12pt;
|
||||
line-height: 1.5em;
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
word-break: break-word;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > p.verifySource {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
main > div > div.unlock > form > p.verifySource {
|
||||
margin-top: calc(0.4em * 17 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 600px) {
|
||||
|
||||
main > div > div.unlock > form > p.verifySource {
|
||||
margin-top: calc(0.4em * 17 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > form > p.verifySource::before {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
font-size: 20pt;
|
||||
content: "\F05A";
|
||||
width: 1.9em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
main > div > div > form > p.verifySource > a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
main > div > div > form > p.verifySource > a:focus {
|
||||
background: transparent;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
main > div > div > form > div {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > div.status {
|
||||
margin: 0;
|
||||
grid-auto-flow: column;
|
||||
column-gap: 0.9em;
|
||||
justify-content: space-around;
|
||||
padding: 0.4em 0.9em 0 0.9em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div > div.unlock.showStatus > form > div.status {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > div.status > p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > div.status > p::before {
|
||||
content: "";
|
||||
width: 0.85em;
|
||||
height: 0.85em;
|
||||
background: #CA2F2F;
|
||||
border-radius: 90%;
|
||||
font-size: 17pt;
|
||||
border: 0.13em solid white;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > div.status > p.warning::before {
|
||||
background: #DED92C;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > div.status > p.success::before {
|
||||
background: #51C751;
|
||||
}
|
||||
|
||||
main > div > div.unlock > form > div.status > p > span {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
padding-left: 0.3em;
|
||||
font-size: 15pt;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.show, main > div > div > form > div > span.capsLock {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 0 0.4em 0.4em 0;
|
||||
color: #CEA5F2;
|
||||
font-family: "Open Sans", Arial, sans-serif;
|
||||
font-size: 17pt;
|
||||
height: 2.3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2px 0 0;
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.show:focus, main > div > div > form > div > span.show:active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div > div > form > div > span.show:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.show[tabindex="-1"] {
|
||||
cursor: default;
|
||||
color: #CEA5F2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.show::after, main > div > div > form > div > 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;
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.show.conceal::after {
|
||||
content: "\F070";
|
||||
}
|
||||
|
||||
main > div > div > form > div > input {
|
||||
text-align: center;
|
||||
background: rgba(144, 63, 234, 0.77);
|
||||
line-height: 2em;
|
||||
border-radius: 0.4em;
|
||||
margin: 0.4em 0;
|
||||
padding: 0 2.2em;
|
||||
border: 0.15em solid transparent;
|
||||
font-family: "Open Sans", Arial, sans-serif;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
color: white;
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
main > div > div > form > div > input.notEmpty[type="password"], main > div > div > form > div > input[type="password"]:-webkit-autofill::first-line {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
main > div > div > form > div > input[type="password"]:autofill::first-line {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
|
||||
main > div > div > form > div > input.notEmpty[type="password"], main > div > div > form > div > input[type="password"]:-webkit-autofill::first-line {
|
||||
font-family: password;
|
||||
}
|
||||
|
||||
main > div > div > form > div > input[type="password"]:autofill::first-line {
|
||||
font-family: password;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div > div > form > div > input:hover, main > div > div > form > div > span.show:hover + input {
|
||||
background: #934CE2;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > form > div > input:disabled {
|
||||
background: rgba(144, 63, 234, 0.77) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
main > div > div > form > div > input::placeholder {
|
||||
color: #CEA5F2;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
main > div > div > form > div > input:focus {
|
||||
border: 0.15em solid white;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
main > div > div > form > div > input::selection {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.capsLock {
|
||||
right: auto;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
border-radius: 0.4em 0 0 0.4em;
|
||||
display: none;
|
||||
color: white;
|
||||
padding: 0 0 0 2px;
|
||||
}
|
||||
|
||||
body.capsLock main > div > div > form > div > input:focus + span.capsLock {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
|
||||
main > div > div > form > div > span.capsLock {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > form > div > span.capsLock::after {
|
||||
content: "\F0AA";
|
||||
}
|
||||
|
||||
main > div > div > form > button:disabled {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
main > div > div > form > button.clicked {
|
||||
background: #7B26D7;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 0.4em;
|
||||
min-width: calc(250px - 0.8em);
|
||||
min-height: calc(350px - 0.8em);
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets.hide {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button {
|
||||
border-radius: 2em;
|
||||
display: flex;
|
||||
max-width: 2em;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
transition: max-width 0.25s ease-out;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 22pt;
|
||||
justify-content: center;
|
||||
border-width: calc(0.15em * 17 / 22);
|
||||
overflow: hidden;
|
||||
padding-right: calc(2em - 0.15em * 17 / 22 * 2);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:focus {
|
||||
max-width: 10em;
|
||||
transition: max-width 0.35s ease-out;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:hover {
|
||||
max-width: 10em;
|
||||
transition: max-width 0.35s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:disabled {
|
||||
max-width: 2em;
|
||||
transition: max-width 0.25s ease-out;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button.clicked {
|
||||
max-width: 10em;
|
||||
transition: max-width 0.35s ease-out;
|
||||
background: #7B26D7;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F1F8";
|
||||
line-height: normal;
|
||||
width: 1em;
|
||||
margin: 0 calc((2em - 0.15em * 17 / 22 * 2 - 1em) / 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button > span {
|
||||
text-overflow: clip;
|
||||
min-height: unset;
|
||||
line-height: normal;
|
||||
font-size: 17pt;
|
||||
position: relative;
|
||||
left: 0.35em;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
||||
padding: 0 0.1em 0 0.2em;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button > span.truncate {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button > span.alignLeft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:focus > span {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:hover > span {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:focus > span {
|
||||
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button:disabled > span {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
main > div > div > div.deleteAllWallets > button.clicked > span {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
|
||||
}
|
||||
232
styles/common.css
Executable file
232
styles/common.css
Executable file
@@ -0,0 +1,232 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
.mwc {
|
||||
font-family: MWC;
|
||||
}
|
||||
|
||||
.grin {
|
||||
font-family: GRIN;
|
||||
}
|
||||
|
||||
.epic {
|
||||
font-family: EPIC;
|
||||
}
|
||||
|
||||
.btc {
|
||||
font-family: BTC;
|
||||
}
|
||||
|
||||
.eth {
|
||||
font-family: ETH;
|
||||
}
|
||||
|
||||
.noTransition {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: 2em;
|
||||
color: white;
|
||||
border-radius: 0.4em;
|
||||
margin: 0.4em 0;
|
||||
font-size: 17pt;
|
||||
border: 0.15em solid white;
|
||||
outline: none;
|
||||
padding: 0 1em;
|
||||
background: #6000D5;
|
||||
cursor: pointer;
|
||||
font-family: "Open Sans", Arial, sans-serif;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
button:hover {
|
||||
background: #7B26D7;
|
||||
}
|
||||
}
|
||||
|
||||
button:focus {
|
||||
background: #F4F4F4;
|
||||
color: #9E00E7;
|
||||
box-shadow: 0 0 2px #000000 inset;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background: #924DDF;
|
||||
color: #7419D9;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: default;
|
||||
background: #6000D5;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button:disabled.loading {
|
||||
cursor: wait;
|
||||
background: #7B26D7;
|
||||
border: 0.15em solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
button > span {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
min-height: 2em;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
button.clicked > span {
|
||||
transition: opacity 0.05s ease-in-out, visibility 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
button:disabled > span {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
button:disabled.loading > span {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes growBig {
|
||||
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
button > span.dots {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
text-overflow: clip;
|
||||
overflow: visible;
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transition: opacity 0.05s ease-in-out, visibility 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
button.clicked > span.dots {
|
||||
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
button:focus > span.dots {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
button:disabled.loading > span.dots {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button > span.dots > span {
|
||||
display: inline-flex;
|
||||
animation: growBig 0.8s linear infinite;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button > span.dots > span::before {
|
||||
content: "\F111";
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@keyframes growSmall {
|
||||
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button > span.dots > span:nth-child(2) {
|
||||
animation: growSmall 0.8s linear infinite;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
select {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #9E43D6;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
background: #DBDBDB;
|
||||
}
|
||||
|
||||
a[tabindex="-1"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.message > div > div > main *, body.tetris > div > div > main * {
|
||||
-moz-user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-o-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
133
styles/cookie_acceptance.css
Executable file
133
styles/cookie_acceptance.css
Executable file
@@ -0,0 +1,133 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
section.cookieAcceptance {
|
||||
display: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
|
||||
min-width: 250px;
|
||||
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
section.cookieAcceptance.hide {
|
||||
display: flex;
|
||||
transform: translateY(100%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section.cookieAcceptance.hide.noFocus {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section.cookieAcceptance * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1em 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > span {
|
||||
height: 4em;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.5em;
|
||||
width: 4em;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > span::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F564";
|
||||
font-size: 3.5em;
|
||||
color: rgba(12, 12, 13, 0.83);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
section.cookieAcceptance > div > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > p {
|
||||
font-size: 11.7pt;
|
||||
line-height: 1.5em;
|
||||
color: rgb(12, 12, 13);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 1em;
|
||||
word-wrap: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
section.cookieAcceptance > div > p {
|
||||
padding: 0 1em 0 1.5em;
|
||||
text-align: center;
|
||||
min-width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > button {
|
||||
margin: 0 1.5em 0 0;
|
||||
flex-shrink: 0;
|
||||
background: rgba(12, 12, 13, 0.1);
|
||||
font-size: 11pt;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
cursor: pointer !important;
|
||||
color: rgb(12, 12, 13);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
line-height: unset;
|
||||
white-space: normal;
|
||||
white-space: break-spaces;
|
||||
font-family: Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
line-height: 1.5em;
|
||||
padding: 0.6em 1em 0.5em 1em;
|
||||
min-width: calc(1em * 2 + 1.5em);
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
section.cookieAcceptance > div > button:hover {
|
||||
background: rgba(12, 12, 13, 0.2);
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > button:focus {
|
||||
background: rgba(12, 12, 13, 0.2);
|
||||
color: rgb(12, 12, 13);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > button:active {
|
||||
background: rgba(12, 12, 13, 0.3);
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
|
||||
section.cookieAcceptance > div > button > span {
|
||||
min-height: auto;
|
||||
white-space: normal;
|
||||
white-space: break-spaces;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
173
styles/install_app.css
Executable file
173
styles/install_app.css
Executable file
@@ -0,0 +1,173 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
section.installApp {
|
||||
display: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
|
||||
min-width: 250px;
|
||||
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
section.installApp.hide {
|
||||
display: flex;
|
||||
transform: translateY(100%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section.installApp.hide.noFocus {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section.installApp * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
section.installApp > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1em 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section.installApp > div > img {
|
||||
height: 4em;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.5em;
|
||||
-webkit-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
-ms-user-drag: none;
|
||||
user-drag: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
section.installApp > div > img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
section.installApp > div > p {
|
||||
font-size: 11.7pt;
|
||||
line-height: 1.5em;
|
||||
color: rgb(12, 12, 13);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 1em;
|
||||
word-wrap: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
section.installApp > div > p {
|
||||
padding: 0 1em 0 1.5em;
|
||||
text-align: center;
|
||||
min-width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
section.installApp > div > button {
|
||||
margin: 0 1.5em 0 0;
|
||||
flex-shrink: 1;
|
||||
background: rgba(12, 12, 13, 0.1);
|
||||
font-size: 11pt;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
cursor: pointer !important;
|
||||
color: rgb(12, 12, 13);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
line-height: unset;
|
||||
white-space: normal;
|
||||
white-space: break-spaces;
|
||||
font-family: Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
line-height: 1.5em;
|
||||
padding: 0.6em 1em 0.5em 1em;
|
||||
min-width: calc(1em * 2 + 1.5em);
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
section.installApp > div > button:hover {
|
||||
background: rgba(12, 12, 13, 0.2);
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
}
|
||||
|
||||
section.installApp > div > button:focus {
|
||||
background: rgba(12, 12, 13, 0.2);
|
||||
color: rgb(12, 12, 13);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section.installApp > div > button:active {
|
||||
background: rgba(12, 12, 13, 0.3);
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
|
||||
section.installApp > div > button > span {
|
||||
min-height: auto;
|
||||
white-space: normal;
|
||||
white-space: break-spaces;
|
||||
cursor: pointer !important;
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) and (any-hover: hover) {
|
||||
|
||||
section.installApp > div > button.remindMeLater:hover {
|
||||
color: rgb(12, 12, 13, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
|
||||
section.installApp > div > button.remindMeLater {
|
||||
margin: 0;
|
||||
padding: 0.1em 0.2em;
|
||||
background: transparent;
|
||||
line-height: unset;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: rgb(12, 12, 13, 0.3);
|
||||
font-size: 14pt;
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
section.installApp > div > button.remindMeLater:focus {
|
||||
color: rgb(12, 12, 13, 0.45);
|
||||
}
|
||||
|
||||
section.installApp > div > button.remindMeLater:active {
|
||||
color: rgb(12, 12, 13, 0.6);
|
||||
}
|
||||
|
||||
section.installApp > div > button.remindMeLater::before {
|
||||
content: "\F00D";
|
||||
}
|
||||
|
||||
section.installApp > div > button.remindMeLater > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
279
styles/language.css
Executable file
279
styles/language.css
Executable file
@@ -0,0 +1,279 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.language {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - 0.4em);
|
||||
z-index: 7;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out 0.05s, visibility 0.2s ease-in-out 0.05s;
|
||||
margin: 0.4em;
|
||||
min-width: calc(250px - 0.8em);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.language.normalTransitionSpeed {
|
||||
transition-duration: 0.15s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
main > div.language.hide {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
main > div.language.hide * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.language > div {
|
||||
display: block;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 0 auto;
|
||||
pointer-events: none;
|
||||
max-width: 100%;
|
||||
transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
border-radius: 4px 4px 0 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
main > div.language > div.shadow {
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
|
||||
background: rgb(66, 66, 66);
|
||||
}
|
||||
|
||||
main > div.language > div * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
main > div.language > div > select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 13.5pt;
|
||||
font-family: Arial, sans-serif;
|
||||
z-index: 8;
|
||||
pointer-events: auto;
|
||||
cursor: pointer !important;
|
||||
display: none;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
padding: 0 0.3em 0 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: none) {
|
||||
|
||||
main > div.language > div > select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.language > div > select > option {
|
||||
background: rgb(66, 66, 66);
|
||||
color: white;
|
||||
font-size: 12.5pt;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.language > div > select > option:hover {
|
||||
background-color: #515151;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.language > div > select > option:checked {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
main > div.language > div button {
|
||||
border: none;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
line-height: normal;
|
||||
font-size: 13.5pt;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
pointer-events: auto;
|
||||
max-width: 100%;
|
||||
padding: 0 0.3em 0 0;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
main > div.language > div button.clicked {
|
||||
background: #515151;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.language > div > select:hover + button, main > div.language > div button:hover {
|
||||
background: #515151;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.language > div button:focus {
|
||||
background: #515151;
|
||||
color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
main > div.language > div button:active {
|
||||
background: #515151;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main > div.language > div button:disabled {
|
||||
cursor: default !important;
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main > div.language > div button * {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
main > div.language > div button:disabled * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
main > div.language > div > button.clicked {
|
||||
background: #515151;
|
||||
}
|
||||
|
||||
main > div.language > div > button {
|
||||
min-width: 9em;
|
||||
}
|
||||
|
||||
main > div.language > div > button.transition {
|
||||
transition: background 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: none) {
|
||||
|
||||
main > div.language > div > button {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.language > div > button > span {
|
||||
flex-grow: 1;
|
||||
min-height: auto;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
padding: 0 0 0 0.15em;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main > div.language > div > button > span.icon {
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-end;
|
||||
padding: 0 0.15em 0 0.3em;
|
||||
}
|
||||
|
||||
main > div.language > div > button > span::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F0D7";
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
main > div.language > div > button > span.icon::after {
|
||||
content: "\F1AB";
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
main > div.language > div > button > span > span {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
|
||||
main > div.language > div > div {
|
||||
max-width: 100%;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0.4em 0;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
pointer-events: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
main > div.language > div > div.hide {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.language > div > div.hide * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.language > div > div > button {
|
||||
height: 2em;
|
||||
padding: 0 0.7em;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main > div.language > div button:disabled {
|
||||
cursor: default !important;
|
||||
background: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
main > div.language > div > div > button > span {
|
||||
font-size: 13pt;
|
||||
text-align: left;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
main > div.language > div > div > button > img {
|
||||
width: 1.5em;
|
||||
height: calc(190 / 300 * 1.5em);
|
||||
object-fit: cover;
|
||||
margin-right: 0.5em;
|
||||
-webkit-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
-ms-user-drag: none;
|
||||
user-drag: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body.blockInput {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
body.blockInput * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
64
styles/log_section.css
Executable file
64
styles/log_section.css
Executable file
@@ -0,0 +1,64 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.navigation {
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 0.6em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages > p {
|
||||
display: inline-block;
|
||||
cursor: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
font-family: monospace;
|
||||
font-size: 9.5pt;
|
||||
line-height: 1.9em;
|
||||
color: rgb(12, 12, 13);
|
||||
padding: 0.3em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages > p:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages > p:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages > p > span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages > p > span.timestamp{
|
||||
font-weight: bold;
|
||||
color: #9A4CE2;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages::after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.log > div > div.messages > p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
86
styles/logo.css
Executable file
86
styles/logo.css
Executable file
@@ -0,0 +1,86 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div > div.logo {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
||||
height: 50%;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main.logo > div > div.logo {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
|
||||
main.logo > div > div.logo.normalTransitionSpeed {
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 800px) {
|
||||
|
||||
main > div > div.logo {
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
|
||||
main > div > div.logo {
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 750px) {
|
||||
|
||||
main > div > div.logo {
|
||||
height: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
main > div > div.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 600px) {
|
||||
|
||||
main > div > div.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
main > div > div.logo.hide, main > div > div.logo.notLoaded {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
main.logo > div > div > div.logo {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
main > div > div.logo > canvas {
|
||||
width: calc(100vw - 4em);
|
||||
height: calc(100vw - 4em);
|
||||
max-width: 30em;
|
||||
max-height: 30em;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 900px) {
|
||||
|
||||
main > div > div.logo > canvas {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
133
styles/maintenance_notification.css
Executable file
133
styles/maintenance_notification.css
Executable file
@@ -0,0 +1,133 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
section.maintenanceNotification {
|
||||
display: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
|
||||
min-width: 250px;
|
||||
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
section.maintenanceNotification.hide {
|
||||
display: flex;
|
||||
transform: translateY(-100%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section.maintenanceNotification.hide.noFocus {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section.maintenanceNotification * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1em 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > span {
|
||||
height: 4em;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.5em;
|
||||
width: 4em;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > span::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F7D9";
|
||||
font-size: 3.5em;
|
||||
color: rgba(12, 12, 13, 0.83);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
section.maintenanceNotification > div > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > p {
|
||||
font-size: 11.7pt;
|
||||
line-height: 1.5em;
|
||||
color: rgb(12, 12, 13);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 1em;
|
||||
word-wrap: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
|
||||
section.maintenanceNotification > div > p {
|
||||
padding: 0 1em 0 1.5em;
|
||||
text-align: center;
|
||||
min-width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > button {
|
||||
margin: 0 1.5em 0 0;
|
||||
flex-shrink: 0;
|
||||
background: rgba(12, 12, 13, 0.1);
|
||||
font-size: 11pt;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
cursor: pointer !important;
|
||||
color: rgb(12, 12, 13);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
line-height: unset;
|
||||
white-space: normal;
|
||||
white-space: break-spaces;
|
||||
font-family: Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
line-height: 1.5em;
|
||||
padding: 0.6em 1em 0.5em 1em;
|
||||
min-width: calc(1em * 2 + 1.5em);
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
section.maintenanceNotification > div > button:hover {
|
||||
background: rgba(12, 12, 13, 0.2);
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > button:focus {
|
||||
background: rgba(12, 12, 13, 0.2);
|
||||
color: rgb(12, 12, 13);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > button:active {
|
||||
background: rgba(12, 12, 13, 0.3);
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
|
||||
section.maintenanceNotification > div > button > span {
|
||||
min-height: auto;
|
||||
white-space: normal;
|
||||
white-space: break-spaces;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
617
styles/message.css
Executable file
617
styles/message.css
Executable file
@@ -0,0 +1,617 @@
|
||||
@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;
|
||||
}
|
||||
22
styles/normalize.css license.txt
Executable file
22
styles/normalize.css license.txt
Executable file
@@ -0,0 +1,22 @@
|
||||
# The MIT License (MIT)
|
||||
|
||||
Copyright © Nicolas Gallagher and Jonathan Neal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
349
styles/normalize.css-8.0.1.css
Executable file
349
styles/normalize.css-8.0.1.css
Executable file
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
747
styles/section.css
Executable file
747
styles/section.css
Executable file
@@ -0,0 +1,747 @@
|
||||
<?php
|
||||
|
||||
// Included files
|
||||
require_once __DIR__ . "/../backend/common.php";
|
||||
require_once __DIR__ . "/../backend/resources.php";
|
||||
|
||||
|
||||
// Main function
|
||||
|
||||
// Set content type header
|
||||
header("Content-Type: text/css; charset=" . mb_internal_encoding());
|
||||
|
||||
?>@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.hide * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div {
|
||||
margin: 0 1em;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 1em 0;
|
||||
position: relative;
|
||||
font-size: 12pt;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation {
|
||||
margin: 0.6em 0 -0.17em 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div > div > div.navigation {
|
||||
grid-template-columns: 1fr;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 0.6em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgb(12,12,13);
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 0 -0.5em;
|
||||
padding: 0.3em;
|
||||
line-height: 1em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button.hide {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button.forward {
|
||||
margin: 0 -0.5em 0 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button::before {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F104";
|
||||
font-size: 29pt;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button.forward::before {
|
||||
content: "\F105";
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div > div > div.navigation > button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes moveBackAndForth {
|
||||
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button:focus::before {
|
||||
animation: moveBackAndForth 0.7s linear infinite;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button.back:focus::before {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button:hover::before {
|
||||
animation: moveBackAndForth 0.7s linear infinite;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button.back:hover::before {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button.disabled::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > button::before {
|
||||
font-size: 33pt;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation > h2 {
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
color: rgb(12, 12, 13);
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div > div > div.navigation > h2 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > h3 {
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin: 0.6em 0 0.4em 0;
|
||||
line-height: normal;
|
||||
color: rgb(12, 12, 13);
|
||||
font-size: 15pt;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div > div > div.navigation + h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > p {
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
color: rgb(12, 12, 13);
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > p.overflow {
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > span.dots {
|
||||
flex-grow: 1;
|
||||
font-size: 6pt;
|
||||
display: block;
|
||||
height: 1em;
|
||||
background-image: url(".<?= escapeString(getResource("./images/circle.svg")); ?>");
|
||||
background-size: 2em 1em;
|
||||
margin: auto 1em;
|
||||
opacity: 0.2;
|
||||
background-repeat: space;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > span.dots.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > h3 {
|
||||
text-align: center;
|
||||
padding-bottom: 0.6em;
|
||||
padding-top: 0.1em;
|
||||
margin: 0.6em 0 0.9em 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div {
|
||||
padding-bottom: calc(1.125em + 0.25em * 6 / 12);
|
||||
margin-bottom: 1.125em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation {
|
||||
padding: 0;
|
||||
margin: 0.6em 0 -0.17em 0;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div > div > div.navigation {
|
||||
margin-bottom: calc(0.9em * 15 / 12);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.merge {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 6pt;
|
||||
display: block;
|
||||
height: 0.25em;
|
||||
background: black;
|
||||
opacity: 0.2;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.merge::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.navigation::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > p {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > span.dots {
|
||||
visibility: hidden;
|
||||
flex-grow: 0;
|
||||
margin: auto 0.5em;
|
||||
width: 0;
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value {
|
||||
display: flex;
|
||||
margin: auto 0;
|
||||
position: relative;
|
||||
max-width: 50%;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value {
|
||||
max-width: 18em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value[data-type="text"], main > div.unlocked > div > div > div.sections > div > div > div > div > div.value[data-type="url"] {
|
||||
width: 100%;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value[data-type="select"] {
|
||||
max-width: 30em;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value[data-type="boolean"] {
|
||||
max-width: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button {
|
||||
margin: 0;
|
||||
padding: 0.4em;
|
||||
border-radius: 1em;
|
||||
width: 3.5em;
|
||||
height: 1.5em;
|
||||
background: #CA2F2F;
|
||||
border: 1px solid rgb(12, 12, 13);
|
||||
opacity: 0.85;
|
||||
box-shadow: 0px 2px 5px #941F1F inset;
|
||||
transition: background 0.2s linear, box-shadow 0.2s linear;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button.enabled {
|
||||
background: #51C751;
|
||||
box-shadow: 0px 2px 5px #358A35 inset;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > button {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button > span {
|
||||
min-height: auto;
|
||||
position: absolute;
|
||||
left: 56%;
|
||||
width: 44%;
|
||||
height: 110%;
|
||||
background: white;
|
||||
border-radius: 90%;
|
||||
border: 1px solid rgb(12, 12, 13);
|
||||
box-shadow: 0 0 2px rgb(12, 12, 13) inset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
transition: left 0.2s linear;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button.noTransition > span {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button.enabled > span {
|
||||
left: -1%;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button:focus > span::after, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button.clicked > span::after {
|
||||
content: "";
|
||||
border: 2px solid rgb(101, 101, 101);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 90%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button {
|
||||
width: 3.8em;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > button > span {
|
||||
left: 57%;
|
||||
width: 43%;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select {
|
||||
margin: 0;
|
||||
padding: 0 0.6em;
|
||||
line-height: calc(1.5em * 17 / 15);
|
||||
border: none;
|
||||
color: rgb(12, 12, 13);
|
||||
text-align: center;
|
||||
font-size: 15pt;
|
||||
border-radius: calc(1em * 17 / 15);
|
||||
text-overflow: ellipsis;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input {
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="number"] {
|
||||
padding: 0 0.6em;
|
||||
min-width: calc((2em - 0.6em) * 2);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input.notEmpty[type="password"], main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"]:-webkit-autofill::first-line {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"]:autofill::first-line {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input.notEmpty[type="password"], main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"]:-webkit-autofill::first-line {
|
||||
font-family: password;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"]:autofill::first-line {
|
||||
font-family: password;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value[data-type="boolean"] > input {
|
||||
width: calc(3.5em * 17 / 15 - 0.6em * 2);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select {
|
||||
background-image: url(".<?= escapeString(getResource("./images/down_arrow.svg")); ?>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(100% - 0.5em) center;
|
||||
background-size: 0.9em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
text-align-last: center;
|
||||
padding: 0 1.7em 0 0.6em;
|
||||
min-width: calc(2em * 2 - 1.7em - 0.6em);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select:focus-visible {
|
||||
color: rgb(12, 12, 13) !important;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select > option {
|
||||
background: white;
|
||||
color: rgb(12, 12, 13);
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select > option:hover {
|
||||
background-color: #E7E7E7;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select > option:checked {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input:focus::selection {
|
||||
background: rgba(12, 12, 13, 0.15);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input:disabled, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select:disabled {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select:disabled {
|
||||
background-image: url(".<?= escapeString(getResource("./images/down_arrow.svg")); ?>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(100% - 0.5em) center;
|
||||
background-size: 0.9em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > input, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > select, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > input + span, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > select + span {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input + span, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select + span {
|
||||
font-size: 15pt;
|
||||
position: absolute;
|
||||
width: calc(100% - 2px);
|
||||
min-width: calc(3.5em * 17 / 15 - 2px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid rgba(12, 12, 13, 0.85);
|
||||
box-shadow: 0px 2px 3px rgba(154, 154, 154, 0.6) inset;
|
||||
border-radius: calc(1em * 17 / 15);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.error > div.value > input + span {
|
||||
border: 1px solid rgba(202, 47, 47);
|
||||
box-shadow: 0px 2px 3px rgba(202, 47, 47, 0.6) inset;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > input + span, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > select + span {
|
||||
border: 1px solid rgba(12, 12, 13, 0.85);
|
||||
box-shadow: 0px 2px 3px rgba(154, 154, 154, 0.6) inset;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input:focus + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select:focus + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input.clicked + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select.clicked + span::after {
|
||||
content: "";
|
||||
border: 2px solid rgb(101, 101, 101);
|
||||
opacity: 0.4;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.error > div.value > input:focus + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div.error > div.value > input.clicked + span::after {
|
||||
border: 2px solid rgb(202, 47, 47);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > input:focus + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > select:focus + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > input.clicked + span::after, main > div.unlocked > div > div > div.sections > div > div > div > div.disabled > div.value > select.clicked + span::after {
|
||||
border: 2px solid rgb(101, 101, 101);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select {
|
||||
font-size: 15.6pt;
|
||||
border-radius: calc(1em * 17 / 15.6);
|
||||
line-height: calc(1.6em * 17 / 15.6);
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em * 2);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 2em * 2);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="number"] {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em * 2);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"], main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"]:-webkit-autofill::first-line, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="password"]:autofill::first-line {
|
||||
font-size: 15.6pt;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input + span, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select + span {
|
||||
font-size: 15.6pt;
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em * 2 - 2px);
|
||||
border-radius: calc(1em * 17 / 15.6);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input + span {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 2em * 2 - 2px);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input[type="number"] + span {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em * 2 - 2px);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value[data-type="boolean"] {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em - 1.7em) !important;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select + span {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em - 1.7em - 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 300px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value {
|
||||
flex-grow: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input {
|
||||
padding: 0 0.6em;
|
||||
min-width: auto;
|
||||
width: calc(3.8em * 17 / 15.6 - 0.6em * 2);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input + span {
|
||||
min-width: calc(3.8em * 17 / 15.6 - 0.6em * 2 - 2px);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > select {
|
||||
width: calc(3.8em * 17 / 15.6 - 0.6em - 1.7em);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 0 calc(1em * 17 / 15.6) calc(1em * 17 / 15.6) 0;
|
||||
color: #CCCCCC;
|
||||
font-family: "Open Sans", Arial, sans-serif;
|
||||
height: calc(1.5em * 17 / 15 - 1px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15pt;
|
||||
padding: 1px 2px 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock {
|
||||
height: calc(1.6em * 17 / 15.6 - 1px);
|
||||
font-size: 15.6pt;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show:focus, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show:active {
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show:hover {
|
||||
color: rgb(12, 12, 13);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show[tabindex="-1"] {
|
||||
cursor: default;
|
||||
color: #CCCCCC;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show::after, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
font-size: 17pt;
|
||||
content: "\F06E";
|
||||
width: 1.7em;
|
||||
text-align: center;
|
||||
max-height: 100%;
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show.conceal::after {
|
||||
content: "\F070";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock {
|
||||
right: auto;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
border-radius: calc(1em * 17 / 15.6) 0 0 calc(1em * 17 / 15.6);
|
||||
display: none;
|
||||
color: rgb(12, 12, 13);
|
||||
padding: 1px 0 0 2px;
|
||||
}
|
||||
|
||||
body.capsLock main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > input:focus ~ span.capsLock {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock::after {
|
||||
content: "\F0AA";
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 300px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.show, main > div.unlocked > div > div > div.sections > div > div > div > div > div.value > span.capsLock {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div:not(.navigation) > button {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0.4em 1em;
|
||||
border-radius: calc(1em * 17 / 15);
|
||||
height: calc(1.5em * 17 / 15);
|
||||
border: none;
|
||||
font-size: 15pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.merge + div > button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div:not(.navigation) > button.clicked {
|
||||
background: #7B26D7;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div:not(.navigation) > button > span {
|
||||
min-height: auto;
|
||||
min-width: 3.5em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div:not(.navigation) > button {
|
||||
height: calc(1.6em * 17 / 15.6);
|
||||
font-size: 15.6pt;
|
||||
border-radius: calc(1em * 17 / 15.6);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div > div > div.merge + div > button {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
53
styles/sections.css
Executable file
53
styles/sections.css
Executable file
@@ -0,0 +1,53 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections {
|
||||
flex-grow: 1.4;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections {
|
||||
position: absolute;
|
||||
margin-left: 2em;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections {
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div.hide {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
30
styles/send_payment_section.css
Executable file
30
styles/send_payment_section.css
Executable file
@@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.sendPayment > div > div.hide {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div.sendPayment > div > div.send {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div.sendPayment > div > div.send::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.sendPayment > div > div.fromWallet, main > div.unlocked > div > div > div.sections > div > div.sendPayment > div > div.cancel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div.sendPayment > div > div.fromWallet, main > div.unlocked.minimal > div > div > div.sections > div > div.sendPayment > div > div.cancel {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
main > div.unlocked.minimal > div > div > div.sections > div > div.sendPayment > div > div.sendAsFile {
|
||||
display: none;
|
||||
}
|
||||
18
styles/settings_section.css
Executable file
18
styles/settings_section.css
Executable file
@@ -0,0 +1,18 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.settings > div > div.setting > div.value[data-type="number"] {
|
||||
max-width: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.settings > div > div.setting > div.value[data-type="number"] > input {
|
||||
width: calc(3.5em * 17 / 15 - 0.6em * 2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.settings > div > div.setting > div.value[data-type="number"] {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
30
styles/tetris.css
Executable file
30
styles/tetris.css
Executable file
@@ -0,0 +1,30 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
section.tetris {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.31);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
section.tetris.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
section.tetris > canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
66
styles/transaction_section.css
Executable file
66
styles/transaction_section.css
Executable file
@@ -0,0 +1,66 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div.transactionInformation, main > div.unlocked > div > div > div.sections > div > div.transaction > div > div.paymentProof {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p {
|
||||
padding-bottom: 0.6em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p + p.currency {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p.currency span.contextMenu {
|
||||
line-height: 1.4;
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div span.contextMenu {
|
||||
cursor: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p > span.rawData {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p > span > a {
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p > span.copy {
|
||||
padding: 0.25em 0.4em;
|
||||
display: inline;
|
||||
cursor: copy;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div > p > span.copy::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F0C5";
|
||||
font-size: 15.5pt;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.transaction > div > div.merge + div > button {
|
||||
margin-right: auto;
|
||||
}
|
||||
1064
styles/unlocked.css
Executable file
1064
styles/unlocked.css
Executable file
File diff suppressed because it is too large
Load Diff
829
styles/wallet_section.css
Executable file
829
styles/wallet_section.css
Executable file
@@ -0,0 +1,829 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > h3.address {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > h3.address {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > img {
|
||||
max-width: 22em;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
height: 100%;
|
||||
-webkit-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
-ms-user-drag: none;
|
||||
user-drag: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > p > span.contextMenu {
|
||||
cursor: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address.loading > p > span.contextMenu {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > p > span.copy {
|
||||
padding: 0.25em 0.4em;
|
||||
display: inline;
|
||||
cursor: copy;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address.loading > p > span.copy {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > p > span.copy::after {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F0C5";
|
||||
font-size: 15.5pt;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > button {
|
||||
margin-top: calc(0.7em * 12 / 15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > button {
|
||||
margin-top: calc(0.7em * 12 / 15.6);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > div.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
|
||||
background: white;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address.loading > div.loading {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address > div.loading > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
border: 0.7em solid #6F00D6;
|
||||
border-bottom: 0.7em solid transparent;
|
||||
border-right: 0.7em solid transparent;
|
||||
border-radius: 50%;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
animation: spin 1.3s linear infinite;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.address.loading button {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > p {
|
||||
padding-bottom: 0.6em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > p:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > p + p {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > p span.contextMenu {
|
||||
line-height: 1.4;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > button {
|
||||
margin-top: calc(0.7em * 12 / 15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > button {
|
||||
margin-top: calc(0.7em * 12 / 15.6);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance span.contextMenu {
|
||||
cursor: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-o-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
|
||||
background: white;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.syncing > div.syncStatus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.syncing > div.syncStatus > p {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.syncing span.contextMenu {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.syncing button {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus > svg {
|
||||
overflow: visible;
|
||||
width: 4.7em;
|
||||
height: 4.7em;
|
||||
flex-shrink: 0;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus > svg > circle {
|
||||
stroke: #6F00D6;
|
||||
fill: none;
|
||||
stroke-width: 0.9em;
|
||||
transform-origin: 50% 50%;
|
||||
stroke-dasharray: 101;
|
||||
stroke-dashoffset: 202;
|
||||
transition: stroke-dashoffset 0.25s linear;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus > svg > circle.background {
|
||||
stroke: #CCCCCC;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.instant > div.syncStatus > svg > circle.foreground {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus > p {
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
margin: 1em 0 0 0;
|
||||
color: rgb(12, 12, 13);
|
||||
font-size: 13pt;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus > p.syncingFailed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.failed > div.syncStatus > p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance.failed > div.syncStatus > p.syncingFailed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-132%);
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: rgb(12, 12, 13);
|
||||
font-size: 13pt;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions.empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(-0.4em * 15 / 12);
|
||||
bottom: -0.5em;
|
||||
right: -1em;
|
||||
left: -1em;
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions.loading::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions::before {
|
||||
top: calc(-0.9em * 15 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0 0 calc(1em * 12 / 16) 0;
|
||||
padding: 0 0.4em;
|
||||
border: none;
|
||||
border-radius: 0.2em;
|
||||
font-size: 16pt;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: transform 0.1s ease-out, opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
background-color: #6000D5;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.002);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
box-shadow: none;
|
||||
color: white;
|
||||
transform: scale(1.002);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 3500px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
transform: scale(1.003);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 3500px) and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.003);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 2500px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
transform: scale(1.005);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 2500px) and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.005);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 2100px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
transform: scale(1.007);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 2100px) and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.007);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1800px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1800px) and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
transform: scale(1.015);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.015);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:focus {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:disabled {
|
||||
pointer-events: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.hide {
|
||||
transform: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span {
|
||||
line-height: normal;
|
||||
font-size: 14.5pt;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
column-gap: calc(1em * 13 / 15);
|
||||
grid-auto-flow: column;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name {
|
||||
max-width: calc(100% - 1.45em);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.totals {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span:first-child {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button {
|
||||
margin-bottom: calc(1.125em * 12 / 16);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 850px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span:first-child {
|
||||
max-width: calc(100% - 1.5em);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span:nth-of-type(2) {
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.totals > span.value {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) and (max-width: 800px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.totals > span.value {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span > span {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span > span.type {
|
||||
padding: 0 0.4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:disabled > span.name > span > span.type {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span > span.type::before {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F51E";
|
||||
font-size: 14pt;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.received > span.name > span > span.type::before {
|
||||
content: "\F3bE";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.sent > span.name > span > span.type::before {
|
||||
content: "\F3bF";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span.status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 0.1em 0.4em 0.3em 0.4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
font-size: 16pt;
|
||||
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:disabled > span.name > span.status {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span.status::before {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F058";
|
||||
font-size: 15pt;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.confirmed > span.name > span.confirmed {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span.unconfirmed::before {
|
||||
content: "\F1CE";
|
||||
animation: spin 1.3s linear infinite;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.unconfirmed > span.name > span.unconfirmed {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span.canceled::before {
|
||||
content: "\F057";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.canceled > span.name > span.canceled {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span.expired::before {
|
||||
content: "\F017";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button.expired > span.name > span.expired {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.name > span > span:first-child {
|
||||
flex-shrink: 0;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id {
|
||||
width: calc(100% + 0.4em);
|
||||
position: relative;
|
||||
right: 0.4em;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
padding: 0.05em 0 0.05em 0.4em;
|
||||
margin-top: 0.2em;
|
||||
border-top: 1px solid rgba(192, 192, 192, 0.4);
|
||||
font-size: 16pt;
|
||||
column-gap: 0;
|
||||
height: calc(1.5em * 17 / 16);
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id > p {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
font-size: 13pt;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id > p:empty {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id > span.copy {
|
||||
padding: 0.3em 0.4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: copy;
|
||||
pointer-events: auto;
|
||||
width: 0.85em;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button:disabled > span.id > span.copy {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id > span.copy.clicked {
|
||||
pointer-events: auto;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id > span.copy::before {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F0C5";
|
||||
font-size: 15.5pt;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions > button > span.id > p:empty + span.copy {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions + div {
|
||||
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions.empty + div {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
height: auto;
|
||||
margin: 0 0 0.5em 0;
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions.empty + div > p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions + div.hide {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation {
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactions.loading ~ div.transactionsNavigation::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation {
|
||||
padding-bottom: calc(0.625em + 0.25em * 6 / 12);
|
||||
margin-bottom: 1.125em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgb(12,12,13);
|
||||
flex-shrink: 0;
|
||||
margin: 0 !important;
|
||||
padding: 0.3em;
|
||||
line-height: 1em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.disabled {
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button::before {
|
||||
font-family: "Font Awesome";
|
||||
font-weight: bold;
|
||||
content: "\F100";
|
||||
font-size: 25pt;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.previous::before {
|
||||
content: "\F104";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.next::before {
|
||||
content: "\F105";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.last::before {
|
||||
content: "\F101";
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button:focus::before {
|
||||
animation: moveBackAndForth 0.7s linear infinite;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.first:focus::before, main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.previous:focus::before {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@media only screen and (any-hover: hover) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button:hover::before {
|
||||
animation: moveBackAndForth 0.7s linear infinite;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.first:hover::before, main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.previous:hover::before {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.transactionsNavigation > button.disabled::before {
|
||||
animation: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.merge + div > button {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
main > div.unlocked > div > div > div.sections > div > div.wallet > div > div.balance > div.syncStatus {
|
||||
height: calc(100% - (1.125em + 0.25em * 6 / 12))
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user