Project

General

Profile

« Previous | Next » 

Revision 544c6df3

Added by koszko about 2 years ago

add styling for options page\n\nThis does not include styling for contents of the import popup

View differences:

html/options.html
1 1
<!doctype html>
2 2
<!--
3 3
    Copyright (C) 2021 Wojtek Kosior
4
    Copyright (C) 2021 Nicholas Johnson
5 4
    Redistribution terms are gathered in the `copyright' file.
6 5
  -->
7 6
<html>
......
11 10
    <link type="text/css" rel="stylesheet" href="reset.css" />
12 11
    <link type="text/css" rel="stylesheet" href="base.css" />
13 12
    <style>
14
      /* pages list */
15
      #page_components_ul {
16
	  max-height: 80vh;
17
	  overflow-y: auto;
18
      }
19
      #page_components_ul li.dragover_li {
20
	  border-top: 2px solid blue;
21
      }
22
      #page_components_ul li {
23
	  border-top: 2px solid white;
24
      }
25
      li[draggable=true] * {
26
	  pointer-events: none;
27
      }
28
      li[draggable=true] label,
29
      li[draggable=true] button {
30
	  pointer-events: auto;
13
      body {
14
	  background-color: #f0f0f0;
15
	  color: #555;
16
	  overflow: auto;
17
	  width: 100%;
31 18
      }
32 19

  
33 20
      /* tabbed view */
......
38 25
	  display: none;
39 26
      }
40 27

  
41
      #show_repos:checked ~ #repos_lbl,
42
      #show_pages:checked ~ #pages_lbl,
43
      #show_bags:checked ~ #bags_lbl,
44
      #show_scripts:checked ~ #scripts_lbl {
28
      #show_repos:checked ~ div #repos_lbl,
29
      #show_pages:checked ~ div #pages_lbl,
30
      #show_bags:checked ~ div #bags_lbl,
31
      #show_scripts:checked ~ div #scripts_lbl {
45 32
	  background: #4CAF50;
46 33
          color: white;
47 34
      }
48 35

  
49
      body > div {
50
	  border-top: 6px solid #4CAF50;
36
      #tab_heads>* {
37
	  font-size: 130%;
38
	  padding: 10px;
39
	  display: inline-block;
40
	  -moz-user-select: none;
41
	  user-select: none;
51 42
      }
52 43

  
53
      .tab_head {
54
	  display: inline-block;
44
      #import_but {
45
	  font: unset;
46
	  font-size: 130%;
47
	  float: right;
48
	  margin: 0;
49
	  border-radius: 0;
50
      }
51

  
52
      #tab_heads::after {
53
	  display: block;
54
	  height: 8px;
55
	  content: "";
56
	  background: linear-gradient(#555, transparent);
57
      }
58

  
59
      div.tab {
60
	  min-width: 50vw;
61
	  width: fit-content;
62
	  padding-left: 6px;
55 63
      }
56 64

  
57 65
      /* popup window with list of selectable components */
......
61 69
	  height: 100vh;
62 70
	  left: 0;
63 71
	  top: 0;
64
	  background-color: rgba(0,0,0,0.4);
72
	  background-color: rgba(60,60,60,0.4);
65 73
	  z-index: 1;
66 74
	  overflow: auto;
67 75
	  vertical-align: center;
......
69 77
      }
70 78

  
71 79
      .popup_frame {
72
	  background-color: white;
73
	  width: 50vw;
80
	  background-color: #f0f0f0;
81
	  margin: 5vh auto;
82
	  padding: 15px;
83
	  border: solid #333 4px;
84
	  border-radius: 15px;
85
	  width: -moz-fit-content;
86
	  width: fit-content;
87
      }
88

  
89
      div.ul_container {
90
	  background-color: #f0f0f0;
91
	  width: -moz-fit-content;
92
	  width: fit-content;
93
	  margin: 6px 0;
94
      }
95

  
96
      div.ul_container::after, div.ul_container::before {
97
	  display: block;
98
	  height: 6px;
99
	  content: "";
100
	  background: linear-gradient(transparent, #555);
101
      }
102

  
103
      div.ul_container::after {
104
	  background: linear-gradient(#555, transparent);
105
      }
106

  
107
      .work_li div.ul_container::before {
108
	  background: linear-gradient(#e0f0f0, #555);
109
      }
110

  
111
      .work_li div.ul_container::after {
112
	  background: linear-gradient(#555, #e0f0f0);
113
      }
114

  
115
      div.ul_container>.always_scrollbar{
116
	  border-left: solid #454 8px;
117
	  max-height: 80vh;
118
	  overflow-y: scroll;
119
      }
120

  
121
      div.ul_container table {
122
	  border-collapse: unset;
123
      }
124

  
125
      div.ul_container, div.ul_container>*, div.ul_container table>tbody {
126
	  width: -moz-min-content;
127
	  width: min-content;
128
      }
129

  
130
      div.ul_container div.ul_container>.always_scrollbar,
131
      .popup_frame div.ul_container>.always_scrollbar {
132
	  max-height: 60vh;
133
      }
134

  
135
      .popup_frame div.ul_container table {
136
	  min-width: 30vw;
137
      }
138

  
139
      .popup_frame div.ul_container {
140
	  margin: 0 auto;
141
      }
142

  
143
      tr:nth-child(odd) {
144
	  background-color: #e5e5e5;
145
      }
146

  
147
      td {
148
	  vertical-align: middle;
149
	  min-width: fit-content;
150
	  min-width: -moz-fit-content;
151
	  width: 1%;
152
      }
153

  
154
      tr>td:first-child {
155
	  padding: 3px 10px 6px;
156
	  max-width: 70vw;
157
	  overflow: hidden;
158
	  width: 100%;
159
	  white-space: nowrap;
160
      }
161

  
162
      tr.work_li>td:first-child {
163
	  padding-right: 0;
164
	  max-width: unset;
165
      }
166

  
167
      tr.work_li>td>div {
168
	  background-color: #e0f0f0;
169
	  border-left: solid #454 5px;
170
	  border-right: solid #454 2px;
171
	  padding: 5px 10px;
172
      }
173

  
174
      .form_grid {
175
	  display: grid;
176
	  grid-template-columns: auto auto;
177
      }
178

  
179
      .form_grid>label {
180
	  grid-column: 1 / span 1;
181
	  margin-right: 10px;
182
      }
183

  
184
      .form_grid label {
185
	  line-height: 34px; /* center text vertically */
186
      }
187

  
188
      .form_grid>input, .form_grid>span {
189
	  grid-column: 2 / span 1;
190
      }
191

  
192
      .form_grid>label[for="script_contents_field"],
193
      .form_grid>* {
194
	  grid-column: 1 / span 2;
195
      }
196

  
197
      .form_grid>textarea {
198
	  min-width: 70vw;
199
	  resize: none;
200
      }
201

  
202
      td>div.button {
203
	  margin-right: 4px;
74 204
      }
75 205

  
76 206
      input[type="radio"]:not(:checked)+.import_window_content {
......
80 210
  </head>
81 211
  <body>
82 212
    <template>
83
      <li id="item_li">
84
	<span></span>
85
	<button> Edit </button>
86
	<button> Remove </button>
87
	<button> Export </button>
88
      </li>
89
      <li id="bag_component_li">
90
	<span></span>
91
	<button> Remove </button>
92
      </li>
93
      <li id="chbx_component_li">
94
	<input type="checkbox" style="display: inline;"></input>
95
	<span></span>
96
      </li>
97
      <li id="radio_component_li">
98
	<input type="radio" style="display: inline;" name="page_components"></input>
99
	<span></span>
100
      </li>
213
      <tr id="item_li">
214
	<td></td>
215
	<td><div class="button"> Edit </div></td>
216
	<td><div class="button"> Remove </div></td>
217
	<td><div class="button"> Export </div></td>
218
      </tr>
219
      <tr id="bag_component_li">
220
	<td></td>
221
	<td><div class="button"> Remove </div></td>
222
      </tr>
223
      <tr id="chbx_component_li">
224
	<td>
225
	  <input type="checkbox" style="display: inline;"></input>
226
	  <span></span>
227
	</td>
228
      </tr>
229
      <tr id="radio_component_li">
230
	<td>
231
	  <input type="radio" style="display: inline;" name="page_components"></input>
232
	  <span></span>
233
	</td>
234
      </tr>
101 235
    </template>
102 236

  
103 237
    <!-- Mind the show_*s ids below - their format is assumed in js code -->
......
105 239
    <input type="radio" name="tabs" id="show_pages" checked></input>
106 240
    <input type="radio" name="tabs" id="show_bags"></input>
107 241
    <input type="radio" name="tabs" id="show_scripts"></input>
108
    <label for="show_repos" id="repos_lbl"
109
	   class="tab_head"> Repos </label>
110
    <label for="show_pages" id="pages_lbl"
111
	   class="tab_head"> Pages </label>
112
    <label for="show_bags" id="bags_lbl"
113
	   class="tab_head"> Bags </label>
114
    <label for="show_scripts" id="scripts_lbl"
115
	   class="tab_head"> Scripts </label>
116

  
117
    <div id="repos">
118
      <ul id="repos_ul">
119
	<li id="work_repo_li" class="hide">
120
	  <label for="repo_url_field">URL: </label>
121
	  <input id="repo_url_field"></input>
122
	  <br/>
123
	  <button id="save_repo_but" type="button"> Save </button>
124
	  <button id="discard_repo_but" type="button"> Cancel </button>
125
	</li>
126
      </ul>
242
    <div id="tab_heads">
243
      <label for="show_repos" id="repos_lbl"> Repos </label>
244
      <label for="show_pages" id="pages_lbl"> Pages </label>
245
      <label for="show_bags" id="bags_lbl"> Bags </label>
246
      <label for="show_scripts" id="scripts_lbl"> Scripts </label>
247
      <button id="import_but" style="margin-left: 40px;"> Import </button>
248
    </div>
249
    <div id="repos" class="tab">
250
      <div class="ul_container">
251
	<div>
252
	  <table>
253
	    <tbody id="repos_ul">
254
	      <tr id="work_repo_li" class="hide work_li">
255
		<td colspan="4">
256
		  <div class="form_grid">
257
		    <label for="repo_url_field">URL: </label>
258
		    <input id="repo_url_field"></input>
259
		    <div>
260
		      <button id="save_repo_but" type="button"> Save </button>
261
		      <button id="discard_repo_but" type="button"> Cancel </button>
262
		    </div>
263
		  </div>
264
		</td>
265
	      </tr>
266
	    </tbody>
267
	  </table>
268
	</div>
269
      </div>
127 270
      <button id="add_repo_but" type="button"> Add repository </button>
128 271
    </div>
129

  
130
    <div id="pages">
131
      <ul id="pages_ul">
132
	<li id="work_page_li" class="hide">
133
	  <label for="page_url_field">URL: </label>
134
	  <input id="page_url_field"></input>
135
	  <br/>
136
	  <label>Payload: </label>
137
	  <span id="page_payload"></span>
138
	  <button id="select_page_components_but">
139
	    Choose payload
140
	  </button>
141
	  <br/>
142
	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
143
	  <label for="page_allow_chbx">Allow native scripts</label>
144
	  <br/>
145
	  <button id="save_page_but" type="button"> Save </button>
146
	  <button id="discard_page_but" type="button"> Cancel </button>
147
	</li>
148
      </ul>
272
    <div id="pages" class="tab">
273
      <div class="ul_container">
274
	<div>
275
	  <table>
276
	    <tbody id="pages_ul">
277
	      <tr id="work_page_li" class="hide work_li">
278
		<td colspan="4">
279
		  <div class="form_grid">
280
		    <label for="page_url_field">URL: </label>
281
		    <input id="page_url_field"></input>
282
		    <label>Payload: </label>
283
		    <span>
284
		      <span id="page_payload"></span>
285
		      <button id="select_page_components_but">
286
			Choose payload
287
		      </button>
288
		    </span>
289
		    <div>
290
		      <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
291
		      <label for="page_allow_chbx">Allow native scripts</label>
292
		    </div>
293
		    <div>
294
		      <button id="save_page_but" type="button"> Save </button>
295
		      <button id="discard_page_but" type="button"> Cancel </button>
296
		    </div>
297
		  </div>
298
		</td>
299
	      </tr>
300
	    </tbody>
301
	  </table>
302
	</div>
303
      </div>
149 304
      <button id="add_page_but" type="button"> Add page </button>
150 305
    </div>
151

  
152
    <div id="bags">
153
      <ul id="bags_ul">
154
	<li id="work_bag_li" class="hide">
155
	  <label for="bag_name_field"> Name: </label>
156
	  <input id="bag_name_field"></input>
157
	  <ul id="bag_components_ul">
158
	    <li id="empty_bag_component_li" class="hide"></li>
159
	  </ul>
160
	  <button id="select_bag_components_but">
161
	    Add scripts
162
	  </button>
163
	  <br/>
164
	  <button id="save_bag_but"> Save </button>
165
	  <button id="discard_bag_but"> Cancel </button>
166
	</li>
167
      </ul>
306
    <div id="bags" class="tab">
307
      <div class="ul_container">
308
	<div>
309
	  <table>
310
	    <tbody id="bags_ul">
311
	      <tr id="work_bag_li" class="hide work_li">
312
		<td colspan="4">
313
		  <div class="form_grid">
314
		    <label for="bag_name_field"> Name: </label>
315
		    <input id="bag_name_field"></input>
316
		    <div class="ul_container">
317
		      <div>
318
			<table>
319
			  <tbody id="bag_components_ul">
320
			    <tr id="empty_bag_component_li" class="hide"></tr>
321
			  </tbody>
322
			</table>
323
		      </div>
324
		    </div>
325
		    <div>
326
		      <button id="select_bag_components_but">
327
			Add scripts
328
		      </button>
329
		    </div>
330
		    <div>
331
		      <button id="save_bag_but"> Save </button>
332
		      <button id="discard_bag_but"> Cancel </button>
333
		    </div>
334
		  </div>
335
		</td>
336
	      </tr>
337
	    </tbody>
338
	  </table>
339
	</div>
340
      </div>
168 341
      <button id="add_bag_but" type="button"> Add bag </button>
169 342
    </div>
170

  
171
    <div id="scripts">
172
      <ul id="scripts_ul">
173
	<li id="work_script_li" class="hide">
174
	  <label for="script_name_field"> Name: </label>
175
	  <input id="script_name_field"></input>
176
	  <br/>
177
	  <label for="script_url_field"> URL: </label>
178
	  <input id="script_url_field"></input>
179
	  <br/>
180
	  <label for="script_sha256_field"> sha256: </label>
181
	  <input id="script_sha256_field"></input>
182
	  <br/>
183
	  <label for="script_contents_field"> contents: </label>
184
	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
185
	  <br/>
186
	  <button id="save_script_but"> Save </button>
187
	  <button id="discard_script_but"> Cancel </button>
188
	</li>
189
      </ul>
343
    <div id="scripts" class="tab">
344
      <div class="ul_container">
345
	<div>
346
	  <table>
347
	    <tbody id="scripts_ul">
348
	      <tr id="work_script_li" class="hide work_li">
349
		<td colspan="4">
350
		  <div class="form_grid">
351
		    <label for="script_name_field"> Name: </label>
352
		    <input id="script_name_field"></input>
353
		    <label for="script_url_field"> URL: </label>
354
		    <input id="script_url_field"></input>
355
		    <label for="script_sha256_field"> SHA256: </label>
356
		    <input id="script_sha256_field"></input>
357
		    <aside>
358
		      Note: URL and SHA256 are ignored if script text is provided.
359
		    </aside>
360
		    <label for="script_contents_field"> contents: </label>
361
		    <textarea id="script_contents_field" rows="20" cols="80"></textarea>
362
		    <div>
363
		      <button id="save_script_but"> Save </button>
364
		      <button id="discard_script_but"> Cancel </button>
365
		    </div>
366
		  </div>
367
		</td>
368
	      </tr>
369
	    </tbody>
370
	  </table>
371
	</div>
372
      </div>
190 373
      <button id="add_script_but" type="button"> Add script </button>
191 374
    </div>
192 375

  
193
    <button id="import_but" style="margin-top: 40px;"> Import </button>
194

  
195 376
    <div id="chbx_components_window" class="hide popup" position="absolute">
196 377
      <div class="popup_frame">
197
	<ul id="chbx_components_ul">
198

  
199
	</ul>
378
	<div class="ul_container">
379
	  <div>
380
	    <table>
381
	      <tbody id="chbx_components_ul">
382
	      </tbody>
383
	    </table>
384
	  </div>
385
	</div>
200 386
	<button id="commit_bag_components_but"> Add </button>
201 387
	<button id="cancel_bag_components_but"> Cancel </button>
202 388
      </div>
......
204 390

  
205 391
    <div id="radio_components_window" class="hide popup" position="absolute">
206 392
      <div class="popup_frame">
207
	<ul id="radio_components_ul">
208

  
209
	  <li id="radio_component_none_li">
210
	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
211
	    <span>(None)</span>
212
	  </li>
213
	</ul>
393
	<div class="ul_container">
394
	  <div class="always_scrollbar">
395
	    <table>
396
	      <tbody id="radio_components_ul">
397
		<tr id="radio_component_none_li">
398
		  <td>
399
		    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
400
		    <span>(None)</span>
401
		  </td>
402
		</tr>
403
	      </tbody>
404
	    </table>
405
	  </div>
406
	</div>
214 407
	<button id="commit_page_components_but"> Choose </button>
215 408
	<button id="cancel_page_components_but"> Cancel </button>
216 409
      </div>

Also available in: Unified diff