browser_app_base 0.1.8 → 0.1.9
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.
- checksums.yaml +4 -4
- data/README.md +210 -92
- data/img/app.png +0 -0
- data/img/setting.png +0 -0
- data/img/setting_menu.png +0 -0
- data/lib/browser_app_base/version.rb +1 -1
- data/lib/template/config/browser.json +2 -1
- data/lib/template/config/setting.json +11 -1
- data/lib/template/config.ru +1 -1
- data/lib/template/css/index.css +418 -111
- data/lib/template/history/history.json +3 -1
- data/lib/template/html/index.html +45 -48
- data/lib/template/js/main.js +59 -20
- data/lib/template/server.rb +10 -0
- metadata +2 -2
data/lib/template/css/index.css
CHANGED
@@ -1,178 +1,485 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
:root {
|
2
|
+
--main-bg: #f6fbff;
|
3
|
+
--main-color: #424242;
|
4
|
+
--btn-shadow: 0 2px 8px rgba(60, 60, 60, 0.11);
|
5
|
+
--btn-gradient: linear-gradient(90deg, #eaf6f9 0%, #61afe7 100%);
|
6
|
+
--btn-gradient-accent: linear-gradient(90deg, #eaf6f9 0%, #61afe7 100%);
|
7
|
+
--btn-gradient-danger: linear-gradient(90deg, #eaf6f9 0%, #f1f1c7 100%);
|
6
8
|
}
|
7
9
|
|
8
|
-
|
9
|
-
|
10
|
-
background
|
11
|
-
height:
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
/* 枠の種類 */
|
10
|
+
body {
|
11
|
+
font-family: 'Roboto', Arial, sans-serif;
|
12
|
+
background: linear-gradient(135deg, #e3f0fc 0%, #b6d6f6 100%);
|
13
|
+
min-height: 100vh;
|
14
|
+
margin: 0;
|
15
|
+
padding: 0;
|
16
|
+
color: #234067;
|
17
|
+
font-size: 13px;
|
17
18
|
}
|
18
19
|
|
19
|
-
.
|
20
|
-
|
20
|
+
.main-title-row {
|
21
|
+
display: flex;
|
22
|
+
align-items: center;
|
23
|
+
justify-content: space-between;
|
24
|
+
margin-bottom: 6px;
|
25
|
+
gap: 18px;
|
21
26
|
}
|
22
27
|
|
23
|
-
.
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
28
|
+
.main-title {
|
29
|
+
color: #234067;
|
30
|
+
font-size: 1.2rem;
|
31
|
+
letter-spacing: 0.01em;
|
32
|
+
margin: 0;
|
33
|
+
flex-shrink: 0;
|
34
|
+
margin-left: 10px;
|
30
35
|
}
|
31
36
|
|
32
|
-
.
|
33
|
-
|
34
|
-
|
35
|
-
padding: 5px;
|
36
|
-
width: 95%;
|
37
|
+
.main-title-actions {
|
38
|
+
display: flex;
|
39
|
+
gap: 10px;
|
37
40
|
}
|
38
41
|
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
42
|
+
.main-title-actions .btn {
|
43
|
+
font-size: 13px;
|
44
|
+
padding: 7px 16px;
|
45
|
+
text-decoration: none;
|
46
|
+
cursor: pointer;
|
44
47
|
}
|
45
48
|
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
+
.main-title-actions .menu-title {
|
50
|
+
position: relative;
|
51
|
+
user-select: none;
|
49
52
|
}
|
50
53
|
|
51
|
-
.
|
52
|
-
|
54
|
+
.main-title-actions .menuSub {
|
55
|
+
display: none;
|
56
|
+
position: absolute;
|
57
|
+
top: 100%;
|
58
|
+
right: 0;
|
59
|
+
left: auto;
|
60
|
+
background: #f6fbff;
|
61
|
+
box-shadow: 0 1px 5px #b6d6f6;
|
62
|
+
border-radius: 0 0 5px 5px;
|
63
|
+
min-width: 120px;
|
64
|
+
z-index: 100;
|
65
|
+
padding: 0;
|
66
|
+
margin: 0;
|
53
67
|
}
|
54
68
|
|
55
|
-
.
|
56
|
-
|
57
|
-
|
58
|
-
overflow-y: auto;
|
59
|
-
overflow-x: auto;
|
60
|
-
padding-right: 10px;
|
69
|
+
.main-title-actions .menu-title:hover .menuSub,
|
70
|
+
.main-title-actions .menu-title:focus-within .menuSub {
|
71
|
+
display: block;
|
61
72
|
}
|
62
73
|
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
74
|
+
.main-title-actions .menuSub li a {
|
75
|
+
color: #3b5c7e;
|
76
|
+
padding: 7px 15px;
|
77
|
+
display: block;
|
78
|
+
border-bottom: 1px solid #e3f0fc;
|
79
|
+
transition: color 0.2s, background 0.2s;
|
80
|
+
text-decoration: none;
|
81
|
+
font-size: 13px;
|
67
82
|
}
|
68
83
|
|
69
|
-
.
|
70
|
-
|
71
|
-
overflow-y: auto;
|
72
|
-
/* prevent horizontal scrollbar */
|
73
|
-
overflow-x: hidden;
|
74
|
-
/* add padding to account for vertical scrollbar */
|
75
|
-
z-index: 1000 !important;
|
84
|
+
.main-title-actions .menuSub li:last-child a {
|
85
|
+
border-bottom: none;
|
76
86
|
}
|
77
87
|
|
78
|
-
.
|
79
|
-
|
80
|
-
|
81
|
-
left: 0;
|
82
|
-
padding: .2em;
|
83
|
-
outline: 0;
|
88
|
+
.main-title-actions .menuSub li a:hover {
|
89
|
+
background: #d2e8f7;
|
90
|
+
color: #234067;
|
84
91
|
}
|
85
92
|
|
86
|
-
|
87
|
-
|
93
|
+
hr {
|
94
|
+
border: none;
|
95
|
+
border-top: 1px solid #b6d6f6;
|
96
|
+
margin: 6px 0 14px 0;
|
97
|
+
width: 60%;
|
88
98
|
}
|
89
99
|
|
90
|
-
|
91
|
-
|
92
|
-
|
100
|
+
.btn.primary {
|
101
|
+
background: var(--btn-gradient);
|
102
|
+
border-bottom: 3px solid #333;
|
93
103
|
}
|
94
104
|
|
95
|
-
.
|
96
|
-
|
97
|
-
color: #
|
98
|
-
background-color: #000000;
|
105
|
+
.btn.primary:hover {
|
106
|
+
background: #212121;
|
107
|
+
color: #fff;
|
99
108
|
}
|
100
109
|
|
101
|
-
.
|
102
|
-
|
103
|
-
|
104
|
-
background-color: #000000;
|
110
|
+
.btn.danger {
|
111
|
+
background: var(--btn-gradient-danger);
|
112
|
+
border-bottom: 3px solid #c62828;
|
105
113
|
}
|
106
114
|
|
107
|
-
.
|
108
|
-
|
109
|
-
|
115
|
+
.btn.danger:hover {
|
116
|
+
background: #b71c1c;
|
117
|
+
color: #fff;
|
110
118
|
}
|
111
119
|
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
120
|
+
.app-header {
|
121
|
+
display: flex;
|
122
|
+
align-items: center;
|
123
|
+
background: #b3d6f6;
|
124
|
+
padding: 10px 20px;
|
125
|
+
box-shadow: 0 1px 8px #afd6f9aa;
|
126
|
+
border-bottom: 1px solid #a3c9e6;
|
116
127
|
}
|
117
128
|
|
118
|
-
|
119
|
-
-
|
129
|
+
.app-header .material-icons {
|
130
|
+
font-size: 1.6rem;
|
131
|
+
color: #539ad9;
|
132
|
+
margin-right: 10px;
|
120
133
|
}
|
121
134
|
|
122
|
-
|
123
|
-
-
|
135
|
+
.app-title {
|
136
|
+
font-size: 1.2rem;
|
137
|
+
font-weight: 700;
|
138
|
+
letter-spacing: 1px;
|
139
|
+
color: #234067;
|
124
140
|
}
|
125
141
|
|
126
|
-
/*
|
142
|
+
/* Modern Menu Styling */
|
127
143
|
.menu {
|
128
144
|
display: flex;
|
129
|
-
|
130
|
-
list-style-type: none;
|
131
|
-
color: #393737;
|
145
|
+
list-style: none;
|
132
146
|
padding: 0;
|
133
|
-
|
134
|
-
|
147
|
+
margin: 18px 0 0 18px;
|
148
|
+
gap: 10px;
|
149
|
+
font-size: 13px;
|
135
150
|
}
|
136
151
|
|
137
|
-
.menu
|
152
|
+
.menu>li {
|
138
153
|
position: relative;
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
list-style-type: none;
|
154
|
+
background: #e5f2fb;
|
155
|
+
border-radius: 5px;
|
156
|
+
overflow: visible;
|
157
|
+
transition: box-shadow 0.2s;
|
144
158
|
}
|
145
159
|
|
146
|
-
.menu
|
147
|
-
|
160
|
+
.menu>li:hover,
|
161
|
+
.menu>li:focus-within {
|
162
|
+
box-shadow: 0 2px 8px #539ad955;
|
163
|
+
background: #d2e8f7;
|
148
164
|
}
|
149
165
|
|
150
|
-
.menu
|
151
|
-
|
166
|
+
.menu>li>a,
|
167
|
+
.menu>li>span {
|
168
|
+
display: block;
|
169
|
+
color: #234067;
|
170
|
+
font-weight: 500;
|
171
|
+
padding: 7px 16px;
|
172
|
+
text-decoration: none;
|
173
|
+
cursor: pointer;
|
174
|
+
font-size: 13px;
|
175
|
+
transition: background 0.2s;
|
152
176
|
}
|
153
177
|
|
178
|
+
/* サブメニューの表示制御 */
|
154
179
|
.menuSub {
|
180
|
+
display: none;
|
155
181
|
position: absolute;
|
156
|
-
|
182
|
+
top: 100%;
|
183
|
+
left: 0;
|
184
|
+
background: #f6fbff;
|
185
|
+
box-shadow: 0 1px 5px #b6d6f6;
|
186
|
+
border-radius: 0 0 5px 5px;
|
187
|
+
min-width: 150px;
|
188
|
+
z-index: 100;
|
157
189
|
padding: 0;
|
158
|
-
|
190
|
+
margin: 0;
|
159
191
|
}
|
160
192
|
|
161
|
-
|
162
|
-
.menuSub
|
193
|
+
.menu>li:hover>.menuSub,
|
194
|
+
.menu>li:focus-within>.menuSub {
|
163
195
|
display: block;
|
164
196
|
}
|
165
197
|
|
198
|
+
.menuSub li {
|
199
|
+
list-style: none;
|
200
|
+
}
|
201
|
+
|
166
202
|
.menuSub li a {
|
167
|
-
|
168
|
-
|
169
|
-
margin-right: -5px;
|
170
|
-
margin-bottom: -5px;
|
203
|
+
color: #3b5c7e;
|
204
|
+
padding: 7px 15px;
|
171
205
|
display: block;
|
172
|
-
|
206
|
+
border-bottom: 1px solid #e3f0fc;
|
207
|
+
transition: color 0.2s, background 0.2s;
|
173
208
|
text-decoration: none;
|
209
|
+
font-size: 13px;
|
210
|
+
}
|
211
|
+
|
212
|
+
.menuSub li:last-child a {
|
213
|
+
border-bottom: none;
|
174
214
|
}
|
175
215
|
|
176
216
|
.menuSub li a:hover {
|
177
|
-
background: #
|
217
|
+
background: #d2e8f7;
|
218
|
+
color: #234067;
|
219
|
+
}
|
220
|
+
|
221
|
+
/* Main Content Layout */
|
222
|
+
.main-content {
|
223
|
+
display: flex;
|
224
|
+
flex-direction: column;
|
225
|
+
margin: 5px 1vw 0 1vw;
|
226
|
+
/* 余白を減らす */
|
227
|
+
gap: 6px;
|
228
|
+
/* 要素間の隙間も少し減らす */
|
229
|
+
font-size: 13px;
|
230
|
+
}
|
231
|
+
|
232
|
+
.input-row {
|
233
|
+
display: flex;
|
234
|
+
align-items: center;
|
235
|
+
gap: 10px;
|
236
|
+
margin-bottom: 7px;
|
237
|
+
font-size: 13px;
|
238
|
+
}
|
239
|
+
|
240
|
+
.input-row input[type="search"],
|
241
|
+
.input-row input[type="text"] {
|
242
|
+
background: #e5f2fb;
|
243
|
+
border: 1px solid #b3d6f6;
|
244
|
+
border-radius: 4px;
|
245
|
+
padding: 6px 10px;
|
246
|
+
color: #234067;
|
247
|
+
font-size: 13px;
|
248
|
+
outline: none;
|
249
|
+
transition: box-shadow 0.2s;
|
250
|
+
width: 170px;
|
251
|
+
}
|
252
|
+
|
253
|
+
.input-row input[type="search"]:focus {
|
254
|
+
box-shadow: 0 0 0 2px #b6d6f6;
|
255
|
+
}
|
256
|
+
|
257
|
+
.input-row button,
|
258
|
+
.input-row input[type="button"] {
|
259
|
+
background: #b6d6f6;
|
260
|
+
color: #234067;
|
261
|
+
border: none;
|
262
|
+
border-radius: 4px;
|
263
|
+
padding: 6px 13px;
|
264
|
+
font-size: 13px;
|
265
|
+
cursor: pointer;
|
266
|
+
transition: background 0.2s, color 0.2s;
|
267
|
+
font-weight: 500;
|
268
|
+
margin-left: 1px;
|
269
|
+
box-shadow: 0 1px 4px #b6d6f633;
|
270
|
+
}
|
271
|
+
|
272
|
+
.input-row button:hover,
|
273
|
+
.input-row input[type="button"]:hover {
|
274
|
+
background: #d2e8f7;
|
275
|
+
color: #539ad9;
|
276
|
+
box-shadow: 0 1px 8px #b6d6f6cc;
|
277
|
+
}
|
278
|
+
|
279
|
+
/* Dialog Styling Overrides */
|
280
|
+
.ui-dialog {
|
281
|
+
background: #e5f2fb;
|
282
|
+
color: #234067;
|
283
|
+
border-radius: 6px;
|
284
|
+
box-shadow: 0 2px 12px #b6d6f677;
|
285
|
+
border: none;
|
286
|
+
font-size: 13px;
|
287
|
+
}
|
288
|
+
|
289
|
+
.ui-dialog-titlebar {
|
290
|
+
background: #b6d6f6;
|
291
|
+
color: #539ad9;
|
292
|
+
border: none;
|
293
|
+
border-radius: 6px 6px 0 0;
|
294
|
+
font-weight: 700;
|
295
|
+
font-size: 13px;
|
296
|
+
}
|
297
|
+
|
298
|
+
.ui-dialog-buttonpane button {
|
299
|
+
background: #b6d6f6;
|
300
|
+
color: #234067;
|
301
|
+
border: none;
|
302
|
+
border-radius: 4px;
|
303
|
+
padding: 5px 11px;
|
304
|
+
font-weight: bold;
|
305
|
+
margin: 0 5px;
|
306
|
+
font-size: 13px;
|
307
|
+
transition: background 0.2s, color 0.2s;
|
308
|
+
}
|
309
|
+
|
310
|
+
.ui-dialog-buttonpane button:hover {
|
311
|
+
background: #539ad9;
|
312
|
+
color: #f6fbff;
|
313
|
+
}
|
314
|
+
|
315
|
+
/* Settings dialog table */
|
316
|
+
#setting_dialog table {
|
317
|
+
width: 95%;
|
318
|
+
margin-bottom: 5px;
|
319
|
+
font-size: 13px;
|
320
|
+
}
|
321
|
+
|
322
|
+
#setting_dialog .setting_name {
|
323
|
+
color: #539ad9;
|
324
|
+
width: 120px;
|
325
|
+
font-weight: bold;
|
326
|
+
padding-right: 12px;
|
327
|
+
font-size: 13px;
|
328
|
+
}
|
329
|
+
|
330
|
+
#setting_dialog .setting_value {
|
331
|
+
width: 100%;
|
332
|
+
max-width: 100%;
|
333
|
+
min-width: 120px;
|
334
|
+
box-sizing: border-box;
|
335
|
+
}
|
336
|
+
|
337
|
+
#setting_dialog input,
|
338
|
+
#setting_dialog select {
|
339
|
+
background: #f6fbff;
|
340
|
+
color: #234067;
|
341
|
+
border: 1px solid #b3d6f6;
|
342
|
+
border-radius: 4px;
|
343
|
+
padding: 5px 8px;
|
344
|
+
font-size: 13px;
|
345
|
+
}
|
346
|
+
|
347
|
+
#msg_text {
|
348
|
+
font-size: 13px;
|
349
|
+
color: #234067;
|
350
|
+
padding: 10px 0;
|
351
|
+
}
|
352
|
+
|
353
|
+
@media (max-width: 700px) {
|
354
|
+
.main-content {
|
355
|
+
margin: 7px 2vw;
|
356
|
+
}
|
357
|
+
|
358
|
+
.outarea {
|
359
|
+
padding: 7px;
|
360
|
+
}
|
361
|
+
|
362
|
+
.menu>li>a,
|
363
|
+
.menu>li>span {
|
364
|
+
padding: 7px 7px;
|
365
|
+
}
|
366
|
+
|
367
|
+
.input-row input[type="search"] {
|
368
|
+
width: 80px;
|
369
|
+
}
|
370
|
+
}
|
371
|
+
|
372
|
+
.input-row input#inDir {
|
373
|
+
width: 80vw;
|
374
|
+
max-width: 80vw;
|
375
|
+
min-width: 200px;
|
376
|
+
}
|
377
|
+
|
378
|
+
.input-row input#outFile {
|
379
|
+
width: 80vw;
|
380
|
+
max-width: 80vw;
|
381
|
+
min-width: 200px;
|
382
|
+
}
|
383
|
+
|
384
|
+
.input-row input#inDir,
|
385
|
+
.input-row input#outDir {
|
386
|
+
background: #f6fbff;
|
387
|
+
color: #234067;
|
388
|
+
border: 1px solid #b3d6f6;
|
389
|
+
border-radius: 4px;
|
390
|
+
padding: 6px 10px;
|
391
|
+
font-size: 13px;
|
392
|
+
outline: none;
|
393
|
+
transition: box-shadow 0.2s;
|
394
|
+
}
|
395
|
+
|
396
|
+
.input-row input#inDir:focus,
|
397
|
+
.input-row input#outDir:focus {
|
398
|
+
box-shadow: 0 0 0 2px #b6d6f6;
|
399
|
+
}
|
400
|
+
|
401
|
+
.input-row input#outFile,
|
402
|
+
.input-row input#outDir {
|
403
|
+
background: #f6fbff;
|
404
|
+
color: #234067;
|
405
|
+
border: 1px solid #b3d6f6;
|
406
|
+
border-radius: 4px;
|
407
|
+
padding: 6px 10px;
|
408
|
+
font-size: 13px;
|
409
|
+
outline: none;
|
410
|
+
transition: box-shadow 0.2s;
|
411
|
+
}
|
412
|
+
|
413
|
+
.input-row input#outFile:focus,
|
414
|
+
.input-row input#outDir:focus {
|
415
|
+
box-shadow: 0 0 0 2px #b6d6f6;
|
416
|
+
}
|
417
|
+
|
418
|
+
#dialog1 #search_str {
|
419
|
+
width: 80vw;
|
420
|
+
min-width: 400px;
|
421
|
+
max-width: 100%;
|
422
|
+
box-sizing: border-box;
|
423
|
+
}
|
424
|
+
|
425
|
+
#dialog2 #search_str2 {
|
426
|
+
width: 80vw;
|
427
|
+
min-width: 400px;
|
428
|
+
max-width: 100%;
|
429
|
+
box-sizing: border-box;
|
430
|
+
}
|
431
|
+
|
432
|
+
.inarea {
|
433
|
+
/* font-size: 1.13rem; */
|
434
|
+
padding: 3px 3px;
|
435
|
+
border: 1.5px soslid #bbb;
|
436
|
+
border-radius: var(--border-radius);
|
437
|
+
width: 85vw;
|
438
|
+
max-width: 100vw;
|
439
|
+
min-width: 50vw;
|
440
|
+
box-sizing: border-box;
|
441
|
+
background: #fafafa;
|
442
|
+
outline: none;
|
443
|
+
display: block;
|
444
|
+
margin-left: 10px;
|
445
|
+
|
446
|
+
}
|
447
|
+
|
448
|
+
.inarea:focus {
|
449
|
+
border-color: var(--main-color);
|
450
|
+
background: #fff;
|
451
|
+
}
|
452
|
+
|
453
|
+
/* Log Output */
|
454
|
+
.outarea {
|
455
|
+
background: #f6fbff;
|
456
|
+
border-radius: 7px;
|
457
|
+
min-height: 200px;
|
458
|
+
width: 98vw;
|
459
|
+
height: 85vh;
|
460
|
+
max-width: 100vw;
|
461
|
+
max-height: 100vh;
|
462
|
+
box-shadow: 1px 1px 1px #b6d6f677;
|
463
|
+
margin-top: 4px;
|
464
|
+
color: #b0bec5;
|
465
|
+
overflow-y: auto;
|
466
|
+
font-size: 12px;
|
467
|
+
margin-left: 10px;
|
468
|
+
margin-right: 1px;
|
469
|
+
display: block;
|
470
|
+
padding: 3px 1px;
|
471
|
+
|
472
|
+
}
|
473
|
+
|
474
|
+
ul.log {
|
475
|
+
margin: 0;
|
476
|
+
padding-left: 0.5px;
|
477
|
+
font-size: 13px;
|
478
|
+
color: #539ad9;
|
479
|
+
letter-spacing: 0.1px;
|
480
|
+
padding: 0.5px 0.5px;
|
481
|
+
}
|
482
|
+
|
483
|
+
ul.log li {
|
484
|
+
margin-bottom: 0.3em;
|
178
485
|
}
|