-
Notifications
You must be signed in to change notification settings - Fork 5
/
style.css
95 lines (83 loc) · 4.88 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
:root { --sqrl-blue: #007CC3; --grey: #7FBDE1; }
* { box-sizing: border-box; }
html,body { display: flex; margin: 0; flex-direction: column; }
body,label,input { font-size: 17px; }
/* Fx mac: 784w x 584h */
body { font-family: Verdana, Helvetica, Arial, Sans-serif; width: 680px; height: 584px; }
main>form { display: none; line-height: 26px; }
body.passwdOnly { height: 150px; }
body.passwdOnly>main>div { display: none; }
body.passwdOnly>main>form { display: block; }
button {
text-align: center;
display: inline-block;
text-align: center;
text-shadow: 0.5px 0.5px 0 #FFF;
font-weight: bold;
font-size: 16px;
line-height: 25px;
border: 0 none;
border-radius: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.4);
background: linear-gradient(to bottom, #FFF 0%, #CCC 100%);
}
button:hover {
box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}
button:active {
box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}
textarea,input { font-family: "Lucida Console", Menlo, monospace; }
textarea { font-size: 16px; }
.notyet { opacity: 0.3; }
.warn { color: red; background-color: #FFF; }
input[type="text"],input[type="password"] { border: 0 none; border-radius: 4px; padding: 0 6px; font-family: monospace; font-size: 15px; line-height: 23px; }
input[readonly],textarea[readonly] { background-color: #DDD; }
::-webkit-input-placeholder { color: #CCC; }
::-moz-placeholder { color: #CCC; }
:not(output):-moz-ui-invalid { box-shadow: inset 0 0 1.5px 1px red, 0 0 1.5px 1px red; }
main { height: 100%; margin: 4px; padding: 8px; background-color: var(--sqrl-blue); color: #FFF; border-radius: 4px; }
h1 { margin: 0 0 16px 0; font-size: 46px; line-height: 32px; }
h1>img { float: right; width: 39px; height: 39px; vertical-align: top; border: 1px solid #FFF; border-radius: 8px; box-shadow: 0 0 4px #FFF; }
h1>span { font-size: 16px; padding-left: 24px; }
label { vertical-align: top; }
label.pwd { display: inline-block; margin: 0 0 12px 0; }
label.pwd.hasPassword { display: none; }
label>span { display: inline-block; width: 152px; vertical-align: top; }
label>input[type="checkbox"]+span { width: 400px; vertical-align: middle; }
label>input[type="text"],label>input[type="number"],label>input[type="password"],label>input[type="file"],label>textarea,label>progress,label>button { width: 270px; vertical-align: super; }
label>input[type="file"] { width: 280px; }
label>textarea { border: 0 none; height: 150px; line-height: 22px; }
#import label>textarea,#export label>textarea { height: 250px; }
label>dl { display: inline-block; width: 300px; margin: 0; }
label.pwd>input { width: 380px; }
label+b { padding: 0 0 0 8px; cursor: pointer; vertical-align: top; display: inline-block; width: 28px; line-height: 22px; }
label+b:hover { text-shadow: 0 0 4px #FFF; }
input.confirm[type="checkbox"]+button+button { display: none; }
input.confirm[type="checkbox"]:checked+button { display: none; }
input.confirm[type="checkbox"]:checked+button+button { display: inline-block; color: red; }
main>div { position: absolute; top: 64px; left: 4px; width: 668px; height: 512px; }
div>input[type="radio"] { display: none; }
div>input[type="radio"]+label { display: block; width: 200px; padding-left: 8px; cursor: pointer; }
div>input[type="radio"]:not(:disabled)+label:hover { background-color: var(--grey); }
div>input[type="radio"]:disabled+label { color: var(--grey); cursor: default; }
div>input[type="radio"]:checked+label { background-color: #FFF; color: var(--sqrl-blue); }
div>input[type="radio"]~div { position: absolute; top: 0; left: 200px; right: 0; bottom: 0; border: 1px solid #FFF; display: none; padding: 8px; border-bottom-right-radius: 2px }
div>input[type="radio"]:checked~div { display: block; }
button.success::after,label.success::after { content: " ✅"; }
button.failure::after,label.failure::after { content: " ❌"; }
dl>dt { display: inline-block; padding: 1px 3px; color: #FFF; background-color: red; }
div#qrscan { position: absolute; left: 12px; text-align: center; background-color: var(--sqrl-blue); padding: 4px; box-shadow: 0 0 1px #FFF; display: none; }
div#qrscan.show { display: block; }
canvas { background-color: #999; border: 1px solid #000; display: block; }
label[title]>span,span[title] { text-decoration: underline dotted; }
.wait:after { content: " "; display: inline-block; width: 12px; height: 12px; margin: -2px 0 -2px 6px; vertical-align: baseline; border-radius: 50%; border: 4px solid #000; border-color: #000 transparent #000 transparent; animation: lds-dual-ring 1.2s linear infinite; }
@keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.shake { animation: 0.4s linear 0s normal none 1 running shake; }
@keyframes shake {
8%, 41% { transform: translate(-10px, 0); }
25%, 58% { transform: translate(10px, 0); }
75% { transform: translate(-5px, 0); }
92% { transform: translate(5px, 0); }
0%, 100% { transform: translate(0, 0); }
}