dcp-client 4.2.22 → 4.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,21 @@
1
1
  /**************************\
2
2
  Basic Modal Styles
3
3
  \**************************/
4
+ @font-face {
5
+ font-family: "Proxima Nova";
6
+ src: local("Proxima Nova"), url(../assets/proxima-nova.otf);
7
+ }
8
+
9
+ .dcp-modal {
10
+ font-family: "Proxima Nova";
11
+ }
12
+
4
13
  .dcp-modal > DIV,
5
14
  .dcp-modal > DIV *,
6
15
  .dcp-modal DIV,
7
16
  .dcp-modal
8
17
  {
9
- font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
18
+ font-family: "Proxima Nova";
10
19
  font-size: 16px;
11
20
  }
12
21
 
@@ -24,9 +33,9 @@
24
33
 
25
34
  .dcp-modal .dcp-modal-container {
26
35
  background-color: #fff;
27
- padding: 30px;
28
- max-width: 450px;
29
- min-width: 16em;
36
+ padding: 30px 50px;
37
+ width: 400px;
38
+ height: 360px;
30
39
  max-height: 100vh;
31
40
  border-radius: 4px;
32
41
  overflow-y: auto;
@@ -35,26 +44,23 @@
35
44
 
36
45
  .dcp-modal .dcp-modal-header {
37
46
  display: flex;
38
- justify-content: space-between;
39
- align-items: center;
47
+ justify-content: center;
40
48
  }
41
49
 
42
50
  .dcp-modal .dcp-modal-title {
43
- margin-top: 0;
44
- margin-bottom: 0;
45
- font-weight: 600;
46
- font-size: 1.25rem;
51
+ font-weight: 500;
52
+ font-size: 20px;
47
53
  line-height: 1.25;
48
54
  color: black;
49
55
  box-sizing: border-box;
56
+ margin: 0;
50
57
  }
51
58
 
52
59
  .dcp-modal .dcp-modal-remember {
53
- margin-top: 0;
60
+ margin-top: 10px;
54
61
  margin-bottom: 0;
55
- font-weight: 500;
56
- font-size: 0.65rem;
57
- line-height: 3.9;
62
+ font-size: 1rem;
63
+ line-height: 2.5;
58
64
  color: rgba(0,0,0,.8);
59
65
  box-sizing: border-box;
60
66
  }
@@ -62,24 +68,27 @@
62
68
  .dcp-modal .dcp-modal-close {
63
69
  background: transparent;
64
70
  border: 0;
71
+ position: absolute;
72
+ top: 15px;
73
+ right: 9px;
65
74
  }
66
75
 
67
- .dcp-modal .dcp-modal-header .dcp-modal-close:before { content: "\2715"; }
76
+ .dcp-modal .dcp-modal-close:hover {
77
+ cursor: pointer;
78
+ }
79
+
80
+ .dcp-modal .dcp-modal-close:before { content: url(../assets/close-icon.svg); }
68
81
 
69
82
  .dcp-modal .dcp-modal-content {
70
- margin: 1rem 0;
71
83
  line-height: 1.5;
72
84
  color: rgba(0,0,0,.8);
85
+ text-align: center;
86
+ overflow: hidden;
73
87
  }
74
88
 
75
- .dcp-modal .dcp-modal-logo-link {
76
- display: block;
77
- position: relative;
78
- width: 40px;
79
- height: 40px;
80
- background: url(../assets/dcp-logo.png);
81
- background-size: 40px;
82
- float: right;
89
+ #dcp-modal-logo {
90
+ height: 70px;
91
+ margin-bottom: 16px;
83
92
  }
84
93
 
85
94
  .dcp-modal .dcp-modal-content > p {
@@ -92,37 +101,52 @@
92
101
  color: red;
93
102
  }
94
103
 
95
- .dcp-modal .dcp-modal-btn {
96
- font-size: .875rem;
97
- padding-left: 1rem;
98
- padding-right: 1rem;
99
- padding-top: .5rem;
100
- padding-bottom: .5rem;
101
- background-color: #e6e6e6;
102
- color: rgba(0,0,0,.8);
103
- border-radius: .25rem;
104
- border-style: none;
105
- border-width: 0;
104
+ #dcp-modal-oauth-login-button,
105
+ #dcp-modal-password-submit,
106
+ #dcp-modal-keystore-file-upload-button,
107
+ #dcp-modal-alert-submit-button {
108
+ box-sizing: border-box;
109
+ position: relative;
110
+ height: 3em;
111
+ min-width: 8em;
112
+ padding: 0 2em;
113
+ font-weight: bold;
114
+ background: #1aa473;
115
+ color: white;
116
+ border: 1px solid #1aa473;
106
117
  cursor: pointer;
107
- -webkit-appearance: button;
108
- text-transform: none;
109
- overflow: visible;
110
- line-height: 1.15;
111
- margin: 0;
112
- will-change: transform;
113
- -moz-osx-font-smoothing: grayscale;
114
- -webkit-backface-visibility: hidden;
115
- backface-visibility: hidden;
116
- -webkit-transform: translateZ(0);
117
- transform: translateZ(0);
118
- transition: -webkit-transform .25s ease-out;
119
- transition: transform .25s ease-out;
120
- transition: transform .25s ease-out,-webkit-transform .25s ease-out;
118
+ margin-top: 70px;
119
+ font-size: 15px;
120
+ }
121
+
122
+ #dcp-modal-password-submit,
123
+ #dcp-modal-alert-submit-button {
124
+ margin-top: 20px;
125
+ }
126
+
127
+ #dcp-modal-keystore-file-input,
128
+ #dcp-modal-keystore-file-submit {
129
+ display: none;
130
+ }
131
+
132
+ #dcp-modal-password-submit {
133
+ max-width: 8em;
121
134
  }
122
135
 
123
- .dcp-modal-btn:focus, .dcp-modal-btn:hover {
124
- -webkit-transform: scale(1.05);
125
- transform: scale(1.05);
136
+ #dcp-modal-keystore-file-input::file-selector-button {
137
+ background: white;
138
+ border: 1px solid #1aa473;
139
+ color: #1aa473;
140
+ }
141
+
142
+ #dcp-modal-keystore-file-input::file-selector-button:hover {
143
+ background: #6fc495;
144
+ color: white;
145
+ transition: 200ms;
146
+ }
147
+
148
+ #dcp-modal-oauth-login-button:hover {
149
+ background: #6fc495;
126
150
  }
127
151
 
128
152
  .dcp-modal .dcp-modal-btn-primary {
@@ -149,6 +173,97 @@
149
173
  visibility: hidden;
150
174
  }
151
175
 
176
+ .dcp-modal .inlineinput {
177
+ text-align: left;
178
+ position: relative;
179
+ bottom: 10px;
180
+ }
181
+
182
+ .inlineinput input,
183
+ .inlineinput select {
184
+ filter: none;
185
+ height: 35px;
186
+ padding: 0.4em 1em 0.2em;
187
+ border: 1px solid #8A8A8A;
188
+ border-radius: 0;
189
+ box-sizing: border-box;
190
+ font-size: 1em;
191
+ }
192
+
193
+ @media screen and (min-device-width: 800px) {
194
+ .inlineinput input,
195
+ .inlineinput select {
196
+ width: 100%;
197
+ }
198
+ }
199
+
200
+ .inlineinput input:focus, .inlineinput select:focus {
201
+ box-shadow: 0 0 0 0.25rem rgba(0, 164, 115, 0.25);
202
+ outline: none;
203
+ }
204
+
205
+ .inlineinput input[type=number] {
206
+ color: #1aa473;
207
+ font-weight: bold;
208
+ }
209
+
210
+ .inlineinput select option {
211
+ color: black;
212
+ }
213
+
214
+ .inlineinput input::placeholder, .inlineinput select:invalid {
215
+ color: #e5e5e5;
216
+ }
217
+
218
+ .inlineinput label {
219
+ position: relative;
220
+ display: inline-block;
221
+ background-color: white;
222
+ margin: 0 1.25em 0 0.4em;
223
+ padding: 0 0.75em 0 0.75em;
224
+ font-size: 0.9em;
225
+ line-height: 1em;
226
+ top: 0.6em;
227
+ left: 0.2em;
228
+ color: #8a8a8a;
229
+ z-index: 2;
230
+ text-align: initial;
231
+ }
232
+
233
+ select.invalid,
234
+ input.invalid {
235
+ border-color: red;
236
+ }
237
+
238
+ .dcp-modal-remember input[type='checkbox'] {
239
+ transform: scale(1.4);
240
+ margin-right: 10px;
241
+ }
242
+
243
+ #dcp-modal-keystore-file-input {
244
+ margin-top: 10px;
245
+ }
246
+
247
+ #dcp-modal-password input {
248
+ padding: 10px;
249
+ }
250
+
251
+ #dcp-modal-password-content {
252
+ display: flex;
253
+ flex-direction: column;
254
+ align-items: center;
255
+ }
256
+
257
+ #dcp-modal-password-content h2 {
258
+ margin: 0;
259
+ margin-bottom: 13px;
260
+ }
261
+
262
+ #dcp-modal-password-content p {
263
+ margin: 0;
264
+ line-height: 22px;
265
+ height: 44px;
266
+ }
152
267
 
153
268
  /**************************\
154
269
  Demo Animation Style
@@ -221,14 +336,6 @@
221
336
  order: 1;
222
337
  }
223
338
 
224
- /** Rules which affect the behaviour of alert dialogs
225
- * based on whether or not their messages are instanceof Error
226
- */
227
- #dcp-modal-alert.exception #dcp-modal-alert-message {
228
- white-space: normal;
229
- margin-right: 2em;
230
- }
231
-
232
339
  #dcp-modal-alert .dcp-bug-icon,
233
340
  #dcp-modal-alert .dcp-stack-trace {
234
341
  display: none;
@@ -255,4 +362,3 @@
255
362
  display: initial;
256
363
  white-space: pre-wrap;
257
364
  }
258
-
@@ -1,30 +1,22 @@
1
1
  <!-- DCP Keystore File Modal -->
2
2
  <div class="dcp-modal dcp-slide" id="dcp-modal-keystore-file" aria-hidden="true">
3
- <div class="dcp-modal-overlay" tabindex="-1" data-micromodal-close>
3
+ <div class="dcp-modal-overlay" tabindex="-1">
4
4
  <div class="dcp-modal-container" role="dialog" aria-modal="true" aria-labelledby="dcp-modal-keystore-file-title">
5
5
  <form id="dcp-modal-keystore-file-form" method="dialog"></form>
6
- <header class="dcp-modal-header">
7
- <h2 class="dcp-modal-title" id="dcp-modal-keystore-file-title">Keystore File Upload</h2>
8
- <button class="dcp-modal-close" aria-label="Close modal" data-micromodal-close></button>
9
- </header>
6
+ <div class="dcp-modal-header">
7
+ <a class="dcp-modal-logo-link" href="https://distributed.computer">
8
+ <img id="dcp-modal-logo" src="https://secure.distributed.computer/assets/dcp-logo-5db53cc2b8186a6c250379b20bcb5ed4926c433903a3441234f09ea40b3cea65.png"/>
9
+ </a>
10
+ </div>
10
11
  <main class="dcp-modal-content" id="dcp-modal-keystore-file-content">
12
+ <h2 class="dcp-modal-title" id="dcp-modal-keystore-file-title">Keystore Required</h2>
11
13
  <p id="dcp-modal-keystore-file-prompt"></p>
12
14
  <input type="file" form="dcp-modal-keystore-file-form" required="required" id="dcp-modal-keystore-file-input">
13
- <div class="dcp-modal-remember">
14
- <input type="checkbox" form="dcp-modal-keystore-file-form" id="dcp-modal-keystore-file-checkbox">
15
- <label for="dcp-modal-keystore-file-checkbox" class="dcp-modal-remember">Remember my keystore</label>
16
- </div>
15
+ <button id="dcp-modal-keystore-file-upload-button">Upload</button>
16
+ <button form="dcp-modal-keystore-file-form"
17
+ id="dcp-modal-keystore-file-submit">
18
+ </button>
17
19
  </main>
18
- <footer class="dcp-modal-footer">
19
- <div class="dcp-buttons-wrapper">
20
- <button form="dcp-modal-keystore-file-form"
21
- id="dcp-modal-keystore-file-submit"
22
- class="dcp-modal-btn dcp-modal-btn-primary">
23
- Submit
24
- </button>
25
- </div>
26
- <a class="dcp-modal-logo-link" href="https://distributed.computer"></a>
27
- </footer>
28
20
  </div>
29
21
  </div>
30
22
  </div>
@@ -1,22 +1,18 @@
1
1
  <!-- DCP OAuth Login Modal -->
2
- <div class="dcp-modal dcp-slide" id="dcp-modal-oauth-login" aria-hidden="true">
3
- <div class="dcp-modal-overlay" tabindex="-1" data-micromodal-close>
2
+ <div class="dcp-modal dcp-slide" id="dcp-modal-oauth-login" aria-hidden="true" >
3
+ <div class="dcp-modal-overlay" tabindex="-1" data-backdrop="static" data-keyboard="false">
4
4
  <div class="dcp-modal-container" role="dialog" aria-modal="true" aria-labelledby="dcp-modal-keystore-file-title">
5
- <form id="dcp-modal-oauth-login-form" method="dialog"></form>
6
- <header class="dcp-modal-header">
7
- <h2 class="dcp-modal-title" id="dcp-modal-oauth-login-title">Login Required</h2>
8
- <button class="dcp-modal-close" aria-label="Close modal" data-micromodal-close></button>
9
- </header>
5
+ <form id="dcp-modal-oauth-login-form" method="dialog"></form>
6
+ <div class="dcp-modal-header">
7
+ <a class="dcp-modal-logo-link" href="https://distributed.computer">
8
+ <img id="dcp-modal-logo" src="https://secure.distributed.computer/assets/dcp-logo-5db53cc2b8186a6c250379b20bcb5ed4926c433903a3441234f09ea40b3cea65.png"/>
9
+ </a>
10
+ </div>
10
11
  <main class="dcp-modal-content" id="dcp-modal-oauth-login-content">
11
- <button id="dcp-modal-oauth-login-button" class="dcp-modal-btn dcp-modal-btn-primary">Log In</button>
12
- <div class="dcp-modal-remember">
13
- <input type="checkbox" form="dcp-modal-oauth-login-form" id="dcp-modal-oauth-login-checkbox">
14
- <label for="dcp-modal-oauth-login-checkbox" class="dcp-modal-remember">Remember my keystore</label>
15
- </div>
12
+ <h2 class="dcp-modal-title" id="dcp-modal-oauth-login-title">Login Required</h2>
13
+ <p>You must enter your DCP <br>credentials to deploy this job.</p>
14
+ <button id="dcp-modal-oauth-login-button">Log In</button>
16
15
  </main>
17
- <footer class="dcp-modal-footer">
18
- <a class="dcp-modal-logo-link" href="https://distributed.computer"></a>
19
- </footer>
20
16
  </div>
21
17
  </div>
22
18
  </div>
@@ -1,23 +1,23 @@
1
1
  <!-- DCP Keystore Password Modal -->
2
2
  <div class="dcp-modal dcp-slide" id="dcp-modal-password" aria-hidden="true">
3
- <div class="dcp-modal-overlay" tabindex="-1" data-micromodal-close>
3
+ <div class="dcp-modal-overlay" tabindex="-1">
4
4
  <div class="dcp-modal-container" role="dialog" aria-modal="true" aria-labelledby="dcp-modal-password-title">
5
5
  <form id="dcp-modal-password-form" method="dialog"></form>
6
- <header class="dcp-modal-header">
7
- <h2 class="dcp-modal-title" id="dcp-modal-password-title">Enter Passphrase</h2>
8
- <button class="dcp-modal-close" aria-label="Close modal" data-micromodal-close></button>
9
- </header>
6
+ <div class="dcp-modal-header">
7
+ <a class="dcp-modal-logo-link" href="https://distributed.computer">
8
+ <img id="dcp-modal-logo" src="https://secure.distributed.computer/assets/dcp-logo-5db53cc2b8186a6c250379b20bcb5ed4926c433903a3441234f09ea40b3cea65.png"/>
9
+ </a>
10
+ </div>
10
11
  <main class="dcp-modal-content" id="dcp-modal-password-content">
12
+ <h2 class="dcp-modal-title" id="dcp-modal-password-title">Passphrase Required</h2>
11
13
  <p id="dcp-modal-password-prompt"></p>
12
14
  <input form="dcp-modal-password-form" type="text" autocomplete="username" id='dcp-modal-password-hidden-username' style="display:none">
13
- <input form="dcp-modal-password-form" type="password" autocomplete="current-password" id="dcp-modal-password-input">
14
- </main>
15
- <footer class="dcp-modal-footer">
16
- <div class="dcp-buttons-wrapper">
17
- <button form="dcp-modal-password-form" class="dcp-modal-btn dcp-modal-btn-primary" id="dcp-modal-password-submit" type="submit">Submit</button>
15
+ <div class="inlineinput">
16
+ <label>Passphrase</label>
17
+ <input form="dcp-modal-password-form" type="password" autocomplete="current-password" id="dcp-modal-password-input">
18
18
  </div>
19
- <a class="dcp-modal-logo-link" href="https://distributed.computer/" target="_blank"></a>
20
- </footer>
19
+ <button form="dcp-modal-password-form" id="dcp-modal-password-submit" type="submit">Submit</button>
20
+ </main>
21
21
  </div>
22
22
  </div>
23
23
  </div>