@pageboard/html 0.10.13 → 0.10.14
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.
- package/package.json +1 -1
- package/ui/card.css +49 -49
- package/ui/form.css +3 -12
- package/ui/form.js +5 -0
- package/ui/input-file.css +6 -6
- package/ui/input-file.js +19 -14
- package/ui/item.css +30 -30
- package/ui/layout.css +1 -1
- package/ui/loading.css +7 -7
- package/ui/menu.css +1 -1
- package/ui/rating.css +7 -7
- package/ui/site.css +25 -35
- package/ui/tab.css +1 -4
- package/ui/transition.css +8 -8
package/package.json
CHANGED
package/ui/card.css
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
max-width:100%;
|
|
7
7
|
}
|
|
8
8
|
.ui.square > .ui > .image::after {
|
|
9
|
-
content:
|
|
9
|
+
content: "";
|
|
10
10
|
display: block;
|
|
11
11
|
height: 0;
|
|
12
12
|
padding-bottom: 100%;
|
|
13
13
|
}
|
|
14
14
|
.ui.tall > .ui > .image::after {
|
|
15
|
-
content:
|
|
15
|
+
content: "";
|
|
16
16
|
display: block;
|
|
17
17
|
height: 0;
|
|
18
18
|
padding-bottom: 150%;
|
|
19
19
|
}
|
|
20
20
|
.ui.wide > .ui > .image::after {
|
|
21
|
-
content:
|
|
21
|
+
content: "";
|
|
22
22
|
display: block;
|
|
23
23
|
height: 0;
|
|
24
24
|
padding-bottom:50%;
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
background: #FFFFFF;
|
|
35
35
|
padding: 0em;
|
|
36
36
|
border: none;
|
|
37
|
-
border-radius: 0.
|
|
37
|
+
border-radius: 0.2857rem;
|
|
38
38
|
box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
|
|
39
39
|
transition: box-shadow 0.1s ease, transform 0.1s ease;
|
|
40
|
-
z-index:
|
|
40
|
+
z-index: auto;
|
|
41
41
|
margin: 0.875em 0.5em;
|
|
42
42
|
float: none;
|
|
43
43
|
font-size: 1em;
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
.ui.cards::after,
|
|
68
68
|
.ui.cards > .ui::after {
|
|
69
69
|
display: block;
|
|
70
|
-
content:
|
|
70
|
+
content: " ";
|
|
71
71
|
height: 0px;
|
|
72
72
|
clear: both;
|
|
73
73
|
overflow: hidden;
|
|
@@ -84,14 +84,14 @@
|
|
|
84
84
|
---------------*/
|
|
85
85
|
|
|
86
86
|
.ui.cards > .ui > :first-child {
|
|
87
|
-
border-radius: 0.
|
|
87
|
+
border-radius: 0.2857rem 0.2857rem 0em 0em !important;
|
|
88
88
|
border-top: none !important;
|
|
89
89
|
}
|
|
90
90
|
.ui.cards > .ui > :last-child {
|
|
91
|
-
border-radius: 0em 0em 0.
|
|
91
|
+
border-radius: 0em 0em 0.2857rem 0.2857rem !important;
|
|
92
92
|
}
|
|
93
93
|
.ui.cards > .ui > :only-child {
|
|
94
|
-
border-radius: 0.
|
|
94
|
+
border-radius: 0.2857rem !important;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
/*--------------
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
display: block;
|
|
104
104
|
flex: 0 0 auto;
|
|
105
105
|
padding: 0em;
|
|
106
|
-
background: rgba(0
|
|
106
|
+
background: rgba(0 0 0 / 5%);
|
|
107
107
|
overflow: hidden;
|
|
108
108
|
}
|
|
109
109
|
.ui.cards > .ui > .image > img {
|
|
@@ -123,17 +123,17 @@
|
|
|
123
123
|
.ui.cards > .ui > .content {
|
|
124
124
|
flex-grow: 1;
|
|
125
125
|
border: none;
|
|
126
|
-
border-top: 1px solid rgba(34
|
|
126
|
+
border-top: 1px solid rgba(34 36 38 / 10%);
|
|
127
127
|
background: none;
|
|
128
128
|
margin: 0em;
|
|
129
|
-
padding: 1em
|
|
129
|
+
padding: 1em;
|
|
130
130
|
box-shadow: none;
|
|
131
131
|
font-size: 1em;
|
|
132
132
|
border-radius: 0em;
|
|
133
133
|
}
|
|
134
134
|
.ui.cards > .ui > .content::after {
|
|
135
135
|
display: block;
|
|
136
|
-
content:
|
|
136
|
+
content: " ";
|
|
137
137
|
height: 0px;
|
|
138
138
|
clear: both;
|
|
139
139
|
overflow: hidden;
|
|
@@ -141,17 +141,17 @@
|
|
|
141
141
|
}
|
|
142
142
|
.ui.cards > .ui > .content > .header {
|
|
143
143
|
display: block;
|
|
144
|
-
margin:
|
|
145
|
-
font-family:
|
|
146
|
-
color: rgba(0
|
|
144
|
+
margin: 0;
|
|
145
|
+
font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
146
|
+
color: rgba(0 0 0 / 85%);
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
/* Default Header Size */
|
|
150
150
|
.ui.cards > .ui > .content > .header:not(.ui) {
|
|
151
151
|
font-weight: bold;
|
|
152
|
-
font-size: 1.
|
|
153
|
-
margin-top: -0.
|
|
154
|
-
line-height: 1.
|
|
152
|
+
font-size: 1.2857em;
|
|
153
|
+
margin-top: -0.2142em;
|
|
154
|
+
line-height: 1.2857em;
|
|
155
155
|
}
|
|
156
156
|
.ui.cards > .ui > .content > .meta + .description,
|
|
157
157
|
.ui.cards > .ui > .content > .header + .description {
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
.ui.cards > .ui .content img {
|
|
191
191
|
display: inline-block;
|
|
192
192
|
vertical-align: middle;
|
|
193
|
-
width:
|
|
193
|
+
width: "";
|
|
194
194
|
}
|
|
195
195
|
.ui.cards > .ui img.avatar,
|
|
196
196
|
.ui.cards > .ui .avatar img {
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
|
|
206
206
|
.ui.cards > .ui > .content > .description {
|
|
207
207
|
clear: both;
|
|
208
|
-
color: rgba(0
|
|
208
|
+
color: rgba(0 0 0 / 68%);
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
/*--------------
|
|
@@ -225,7 +225,7 @@
|
|
|
225
225
|
|
|
226
226
|
.ui.cards > .ui .meta {
|
|
227
227
|
font-size: 1em;
|
|
228
|
-
color:
|
|
228
|
+
color: rgb(0 0 0 / 40%);
|
|
229
229
|
}
|
|
230
230
|
.ui.cards > .ui .meta * {
|
|
231
231
|
margin-right: 0.3em;
|
|
@@ -245,16 +245,16 @@
|
|
|
245
245
|
|
|
246
246
|
/* Generic */
|
|
247
247
|
.ui.cards > .ui > .content a:not(.ui) {
|
|
248
|
-
color:
|
|
248
|
+
color: "";
|
|
249
249
|
transition: color 0.1s ease;
|
|
250
250
|
}
|
|
251
251
|
.ui.cards > .ui > .content a:not(.ui):hover {
|
|
252
|
-
color:
|
|
252
|
+
color: "";
|
|
253
253
|
}
|
|
254
254
|
|
|
255
255
|
/* Header */
|
|
256
256
|
.ui.cards > .ui > .content > a.header {
|
|
257
|
-
color:
|
|
257
|
+
color: rgb(0 0 0 / 85%);
|
|
258
258
|
}
|
|
259
259
|
.ui.cards > .ui > .content > a.header:hover {
|
|
260
260
|
color: #1e70bf;
|
|
@@ -262,10 +262,10 @@
|
|
|
262
262
|
|
|
263
263
|
/* Meta */
|
|
264
264
|
.ui.cards > .ui .meta > a:not(.ui) {
|
|
265
|
-
color:
|
|
265
|
+
color: rgb(0 0 0 / 40%);
|
|
266
266
|
}
|
|
267
267
|
.ui.cards > .ui .meta > a:not(.ui):hover {
|
|
268
|
-
color:
|
|
268
|
+
color: rgb(0 0 0 / 87%);
|
|
269
269
|
}
|
|
270
270
|
|
|
271
271
|
/*--------------
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
---------------*/
|
|
284
284
|
|
|
285
285
|
.ui.cards > .ui .dimmer {
|
|
286
|
-
background-color:
|
|
286
|
+
background-color: "";
|
|
287
287
|
z-index: 10;
|
|
288
288
|
}
|
|
289
289
|
|
|
@@ -298,11 +298,11 @@
|
|
|
298
298
|
/* Icon */
|
|
299
299
|
.ui.cards > .ui > .content .star.icon {
|
|
300
300
|
cursor: pointer;
|
|
301
|
-
opacity:
|
|
301
|
+
opacity: 75%;
|
|
302
302
|
transition: color 0.1s ease;
|
|
303
303
|
}
|
|
304
304
|
.ui.cards > .ui > .content .star.icon:hover {
|
|
305
|
-
opacity:
|
|
305
|
+
opacity: 100%;
|
|
306
306
|
color: #FFB70A;
|
|
307
307
|
}
|
|
308
308
|
.ui.cards > .ui > .content .active.star.icon {
|
|
@@ -315,11 +315,11 @@
|
|
|
315
315
|
/* Icon */
|
|
316
316
|
.ui.cards > .ui > .content .like.icon {
|
|
317
317
|
cursor: pointer;
|
|
318
|
-
opacity:
|
|
318
|
+
opacity: 75%;
|
|
319
319
|
transition: color 0.1s ease;
|
|
320
320
|
}
|
|
321
321
|
.ui.cards > .ui > .content .like.icon:hover {
|
|
322
|
-
opacity:
|
|
322
|
+
opacity: 100%;
|
|
323
323
|
color: #FF2733;
|
|
324
324
|
}
|
|
325
325
|
.ui.cards > .ui > .content .active.like.icon {
|
|
@@ -334,20 +334,20 @@
|
|
|
334
334
|
max-width: 100%;
|
|
335
335
|
min-height: 0em !important;
|
|
336
336
|
flex-grow: 0;
|
|
337
|
-
border-top: 1px solid
|
|
337
|
+
border-top: 1px solid rgb(0 0 0 / 5%) !important;
|
|
338
338
|
position: static;
|
|
339
339
|
background: none;
|
|
340
340
|
width: auto;
|
|
341
|
-
margin: 0em
|
|
341
|
+
margin: 0em;
|
|
342
342
|
padding: 0.75em 1em;
|
|
343
343
|
top: 0em;
|
|
344
344
|
left: 0em;
|
|
345
|
-
color:
|
|
345
|
+
color: rgb(0 0 0 / 40%);
|
|
346
346
|
box-shadow: none;
|
|
347
347
|
transition: color 0.1s ease;
|
|
348
348
|
}
|
|
349
349
|
.ui.cards > .ui > .extra a:not(.ui) {
|
|
350
|
-
color:
|
|
350
|
+
color: rgb(0 0 0 / 40%);
|
|
351
351
|
}
|
|
352
352
|
.ui.cards > .ui > .extra a:not(.ui):hover {
|
|
353
353
|
color: #1e70bf;
|
|
@@ -364,11 +364,11 @@
|
|
|
364
364
|
--------------------*/
|
|
365
365
|
|
|
366
366
|
.ui.raised.cards > .ui {
|
|
367
|
-
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px
|
|
367
|
+
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgb(34 36 38 / 12%), 0px 2px 10px 0px rgb(34 36 38 / 15%);
|
|
368
368
|
}
|
|
369
369
|
.ui.raised.cards > a.ui:hover,
|
|
370
370
|
.ui.link.cards > .raised.ui:hover {
|
|
371
|
-
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px
|
|
371
|
+
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgb(34 36 38 / 15%), 0px 2px 10px 0px rgb(34 36 38 / 25%);
|
|
372
372
|
}
|
|
373
373
|
|
|
374
374
|
/*-------------------
|
|
@@ -434,7 +434,7 @@
|
|
|
434
434
|
margin-right: -1em;
|
|
435
435
|
}
|
|
436
436
|
.ui.three.cards > .ui {
|
|
437
|
-
width: calc(33.
|
|
437
|
+
width: calc(33.3333% - 2em);
|
|
438
438
|
margin-left: 1em;
|
|
439
439
|
margin-right: 1em;
|
|
440
440
|
}
|
|
@@ -461,7 +461,7 @@
|
|
|
461
461
|
margin-right: -0.75em;
|
|
462
462
|
}
|
|
463
463
|
.ui.six.cards > .ui {
|
|
464
|
-
width: calc(16.
|
|
464
|
+
width: calc(16.6667% - 1.5em);
|
|
465
465
|
margin-left: 0.75em;
|
|
466
466
|
margin-right: 0.75em;
|
|
467
467
|
}
|
|
@@ -470,7 +470,7 @@
|
|
|
470
470
|
margin-right: -0.5em;
|
|
471
471
|
}
|
|
472
472
|
.ui.seven.cards > .ui {
|
|
473
|
-
width: calc(14.
|
|
473
|
+
width: calc(14.2857% - 1em);
|
|
474
474
|
margin-left: 0.5em;
|
|
475
475
|
margin-right: 0.5em;
|
|
476
476
|
}
|
|
@@ -489,7 +489,7 @@
|
|
|
489
489
|
margin-right: -0.5em;
|
|
490
490
|
}
|
|
491
491
|
.ui.nine.cards > .ui {
|
|
492
|
-
width: calc(11.
|
|
492
|
+
width: calc(11.1111% - 1em);
|
|
493
493
|
margin-left: 0.5em;
|
|
494
494
|
margin-right: 0.5em;
|
|
495
495
|
font-size: 10px;
|
|
@@ -561,7 +561,7 @@
|
|
|
561
561
|
margin-right: -1em;
|
|
562
562
|
}
|
|
563
563
|
.ui.seven.doubling.cards > .ui {
|
|
564
|
-
width: calc(33.
|
|
564
|
+
width: calc(33.3333% - 2em);
|
|
565
565
|
margin-left: 1em;
|
|
566
566
|
margin-right: 1em;
|
|
567
567
|
}
|
|
@@ -570,7 +570,7 @@
|
|
|
570
570
|
margin-right: -1em;
|
|
571
571
|
}
|
|
572
572
|
.ui.eight.doubling.cards > .ui {
|
|
573
|
-
width: calc(33.
|
|
573
|
+
width: calc(33.3333% - 2em);
|
|
574
574
|
margin-left: 1em;
|
|
575
575
|
margin-right: 1em;
|
|
576
576
|
}
|
|
@@ -579,7 +579,7 @@
|
|
|
579
579
|
margin-right: -1em;
|
|
580
580
|
}
|
|
581
581
|
.ui.nine.doubling.cards > .ui {
|
|
582
|
-
width: calc(33.
|
|
582
|
+
width: calc(33.3333% - 2em);
|
|
583
583
|
margin-left: 1em;
|
|
584
584
|
margin-right: 1em;
|
|
585
585
|
}
|
|
@@ -588,7 +588,7 @@
|
|
|
588
588
|
margin-right: -1em;
|
|
589
589
|
}
|
|
590
590
|
.ui.ten.doubling.cards > .ui {
|
|
591
|
-
width: calc(33.
|
|
591
|
+
width: calc(33.3333% - 2em);
|
|
592
592
|
margin-left: 1em;
|
|
593
593
|
margin-right: 1em;
|
|
594
594
|
}
|
|
@@ -628,7 +628,7 @@
|
|
|
628
628
|
margin-right: -1em;
|
|
629
629
|
}
|
|
630
630
|
.ui.five.doubling.cards > .ui {
|
|
631
|
-
width: calc(33.
|
|
631
|
+
width: calc(33.3333% - 2em);
|
|
632
632
|
margin-left: 1em;
|
|
633
633
|
margin-right: 1em;
|
|
634
634
|
}
|
|
@@ -637,7 +637,7 @@
|
|
|
637
637
|
margin-right: -1em;
|
|
638
638
|
}
|
|
639
639
|
.ui.six.doubling.cards > .ui {
|
|
640
|
-
width: calc(33.
|
|
640
|
+
width: calc(33.3333% - 2em);
|
|
641
641
|
margin-left: 1em;
|
|
642
642
|
margin-right: 1em;
|
|
643
643
|
}
|
|
@@ -684,7 +684,7 @@
|
|
|
684
684
|
.ui.stackable.cards > .ui {
|
|
685
685
|
display: block !important;
|
|
686
686
|
height: auto !important;
|
|
687
|
-
margin: 1em
|
|
687
|
+
margin: 1em;
|
|
688
688
|
padding: 0 !important;
|
|
689
689
|
width: calc(100% - 2em) !important;
|
|
690
690
|
}
|
package/ui/form.css
CHANGED
|
@@ -3,20 +3,11 @@ fieldset.plain {
|
|
|
3
3
|
padding-right:0;
|
|
4
4
|
padding-left:0;
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
input::-webkit-selection {
|
|
8
|
-
background-color: rgba(100, 100, 100, 0.4);
|
|
9
|
-
color: rgba(0, 0, 0, 0.87);
|
|
10
|
-
}
|
|
11
|
-
textarea::-moz-selection,
|
|
12
|
-
input::-moz-selection {
|
|
13
|
-
background-color: rgba(100, 100, 100, 0.4);
|
|
14
|
-
color: rgba(0, 0, 0, 0.87);
|
|
15
|
-
}
|
|
6
|
+
|
|
16
7
|
textarea::selection,
|
|
17
8
|
input::selection {
|
|
18
|
-
background-color:
|
|
19
|
-
color:
|
|
9
|
+
background-color: rgb(100 100 100 / 40%);
|
|
10
|
+
color: rgb(0 0 0 / 87%);
|
|
20
11
|
}
|
|
21
12
|
|
|
22
13
|
label[for] {
|
package/ui/form.js
CHANGED
|
@@ -344,6 +344,8 @@ HTMLInputElement.prototype.fill = function (val) {
|
|
|
344
344
|
if (val == null) val = "";
|
|
345
345
|
if (this.type == "radio" || this.type == "checkbox") {
|
|
346
346
|
this.checked = val;
|
|
347
|
+
} else if (this.type == "file") {
|
|
348
|
+
this.setAttribute('value', val);
|
|
347
349
|
} else {
|
|
348
350
|
this.value = val;
|
|
349
351
|
}
|
|
@@ -360,6 +362,8 @@ HTMLInputElement.prototype.reset = function () {
|
|
|
360
362
|
HTMLInputElement.prototype.save = function () {
|
|
361
363
|
if (this.type == "radio" || this.type == "checkbox") {
|
|
362
364
|
this.defaultChecked = this.checked;
|
|
365
|
+
} else if (this.type == "file") {
|
|
366
|
+
this.defaultValue = this.getAttribute('value');
|
|
363
367
|
} else {
|
|
364
368
|
this.defaultValue = this.value;
|
|
365
369
|
}
|
|
@@ -464,6 +468,7 @@ Page.ready((state) => {
|
|
|
464
468
|
// new way
|
|
465
469
|
}
|
|
466
470
|
HTMLCustomFormElement.prototype.fill.call(form, linearizeValues(values), state.scope);
|
|
471
|
+
HTMLCustomFormElement.prototype.save.call(form);
|
|
467
472
|
}
|
|
468
473
|
} else if (action == "read") {
|
|
469
474
|
const obj = {};
|
package/ui/input-file.css
CHANGED
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
.form .field > input[type="file"]:focus,
|
|
15
15
|
.form .field > input[type="file"]:hover {
|
|
16
16
|
position:relative;
|
|
17
|
-
color:
|
|
17
|
+
color: transparent !important;
|
|
18
18
|
}
|
|
19
|
-
.form .field > input[type="file"][
|
|
20
|
-
content:attr(
|
|
19
|
+
.form .field > input[type="file"][value]::after {
|
|
20
|
+
content:attr(value);
|
|
21
21
|
color: black;
|
|
22
22
|
text-align: left;
|
|
23
23
|
position: absolute;
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
padding-left: inherit;
|
|
27
27
|
padding-right: inherit;
|
|
28
28
|
}
|
|
29
|
-
.form .field.error > input[type="file"][
|
|
29
|
+
.form .field.error > input[type="file"][value]::after {
|
|
30
30
|
color:inherit;
|
|
31
31
|
}
|
|
32
32
|
.form .field > input[type="file"]::after,
|
|
33
|
-
.form .field > input[type="file"]:not([
|
|
33
|
+
.form .field > input[type="file"]:not([value])::after {
|
|
34
34
|
content:attr(placeholder);
|
|
35
35
|
color: rgba(0 0 0 / 50%);
|
|
36
36
|
float: left;
|
|
@@ -53,6 +53,6 @@ input[type="file"]::file-selector-button {
|
|
|
53
53
|
z-index: 1;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
input[type="file"][
|
|
56
|
+
input[type="file"][value]::file-selector-button {
|
|
57
57
|
background-image: url('data:image/svg+xml,<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><path d="m40.9 31.9 21-21a6.4 6.4 0 1 0-9-9l-21 21-21-21a6.4 6.4 0 1 0-9 9l21 21-21 21a6.4 6.4 0 0 0 0 9C3 63 4.6 63.8 6.2 63.8s3.3-.7 4.5-2l21-21 21 21c1.2 1.3 2.8 2 4.5 2s3.2-.7 4.5-2a6.4 6.4 0 0 0 0-9z"/></svg>');
|
|
58
58
|
}
|
package/ui/input-file.js
CHANGED
|
@@ -1,35 +1,40 @@
|
|
|
1
1
|
class HTMLElementInputFile extends HTMLInputElement {
|
|
2
2
|
#xhr;
|
|
3
3
|
#promise;
|
|
4
|
-
#
|
|
4
|
+
#defaultValue;
|
|
5
|
+
|
|
6
|
+
/* Since input[type=file] does not allow setting "value" property,
|
|
7
|
+
* it is stored in the "value" attribute,
|
|
8
|
+
* forcing defaultValue to be handled with a private field.
|
|
9
|
+
* The "filename" attribute is used to display both selected value property,
|
|
10
|
+
* and filled value attribute.
|
|
11
|
+
*/
|
|
5
12
|
|
|
6
13
|
constructor() {
|
|
7
14
|
super();
|
|
8
15
|
if (this.init) this.init();
|
|
9
16
|
this.save();
|
|
10
|
-
}
|
|
11
17
|
|
|
12
|
-
get value() {
|
|
13
|
-
return this.getAttribute('value');
|
|
14
18
|
}
|
|
15
|
-
|
|
16
|
-
this.#
|
|
19
|
+
get defaultValue() {
|
|
20
|
+
return this.#defaultValue;
|
|
17
21
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
set defaultValue(str) {
|
|
23
|
+
this.#defaultValue = str;
|
|
24
|
+
}
|
|
25
|
+
get value() {
|
|
26
|
+
return this.getAttribute('value');
|
|
22
27
|
}
|
|
23
28
|
set value(str) {
|
|
24
29
|
if (str != null) {
|
|
25
|
-
this.setAttribute('
|
|
30
|
+
this.setAttribute('value', str);
|
|
26
31
|
} else {
|
|
27
|
-
this.removeAttribute('
|
|
32
|
+
this.removeAttribute('value');
|
|
28
33
|
super.value = "";
|
|
29
34
|
}
|
|
30
35
|
}
|
|
31
36
|
captureClick(e, state) {
|
|
32
|
-
if (
|
|
37
|
+
if (this.value) {
|
|
33
38
|
e.preventDefault();
|
|
34
39
|
if (this.#xhr) {
|
|
35
40
|
this.#xhr.abort();
|
|
@@ -72,7 +77,7 @@ class HTMLElementInputFile extends HTMLInputElement {
|
|
|
72
77
|
const pass = (obj) => {
|
|
73
78
|
if (!obj.items || obj.items.length == 0) return fail(new Error("File rejected"));
|
|
74
79
|
const val = obj.items[0];
|
|
75
|
-
this.
|
|
80
|
+
this.value = val;
|
|
76
81
|
field.classList.add('success');
|
|
77
82
|
field.classList.remove('loading');
|
|
78
83
|
this.#xhr = null;
|
package/ui/item.css
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
border-radius: 0rem;
|
|
24
24
|
box-shadow: none;
|
|
25
25
|
transition: box-shadow 0.1s ease;
|
|
26
|
-
z-index:
|
|
26
|
+
z-index: "";
|
|
27
27
|
font-size: 1em;
|
|
28
28
|
}
|
|
29
29
|
.ui.items > .ui a {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
.ui.items > .ui::after {
|
|
52
52
|
display: block;
|
|
53
|
-
content:
|
|
53
|
+
content: " ";
|
|
54
54
|
height: 0px;
|
|
55
55
|
clear: both;
|
|
56
56
|
overflow: hidden;
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
float: none;
|
|
75
75
|
margin: 0em;
|
|
76
76
|
padding: 0em;
|
|
77
|
-
max-height:
|
|
77
|
+
max-height: "";
|
|
78
78
|
align-self: top;
|
|
79
79
|
width:175px;
|
|
80
80
|
}
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
}
|
|
107
107
|
.ui.items > .ui > .content::after {
|
|
108
108
|
display: block;
|
|
109
|
-
content:
|
|
109
|
+
content: " ";
|
|
110
110
|
height: 0px;
|
|
111
111
|
clear: both;
|
|
112
112
|
overflow: hidden;
|
|
@@ -122,15 +122,15 @@
|
|
|
122
122
|
}
|
|
123
123
|
.ui.items > .ui > .content > .header {
|
|
124
124
|
display: inline-block;
|
|
125
|
-
margin: -0.
|
|
126
|
-
font-family:
|
|
125
|
+
margin: -0.2142em 0em 0em;
|
|
126
|
+
font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
127
127
|
font-weight: bold;
|
|
128
|
-
color:
|
|
128
|
+
color: rgb(0 0 0 / 85%);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
/* Default Header Size */
|
|
132
132
|
.ui.items > .ui > .content > .header:not(.ui) {
|
|
133
|
-
font-size: 1.
|
|
133
|
+
font-size: 1.2857em;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
/*--------------
|
|
@@ -150,12 +150,12 @@
|
|
|
150
150
|
|
|
151
151
|
.ui.items > .ui .content img {
|
|
152
152
|
align-self: middle;
|
|
153
|
-
width:
|
|
153
|
+
width: "";
|
|
154
154
|
}
|
|
155
155
|
.ui.items > .ui img.avatar,
|
|
156
156
|
.ui.items > .ui .avatar img {
|
|
157
|
-
width:
|
|
158
|
-
height:
|
|
157
|
+
width: "";
|
|
158
|
+
height: "";
|
|
159
159
|
border-radius: 500rem;
|
|
160
160
|
}
|
|
161
161
|
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
max-width: auto;
|
|
169
169
|
font-size: 1em;
|
|
170
170
|
line-height: 1.4285em;
|
|
171
|
-
color:
|
|
171
|
+
color: rgb(0 0 0 / 87%);
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
/*--------------
|
|
@@ -187,10 +187,10 @@
|
|
|
187
187
|
---------------*/
|
|
188
188
|
|
|
189
189
|
.ui.items > .ui .meta {
|
|
190
|
-
margin: 0.5em 0em
|
|
190
|
+
margin: 0.5em 0em;
|
|
191
191
|
font-size: 1em;
|
|
192
192
|
line-height: 1em;
|
|
193
|
-
color:
|
|
193
|
+
color: rgb(0 0 0 / 60%);
|
|
194
194
|
}
|
|
195
195
|
.ui.items > .ui .meta * {
|
|
196
196
|
margin-right: 0.3em;
|
|
@@ -210,16 +210,16 @@
|
|
|
210
210
|
|
|
211
211
|
/* Generic */
|
|
212
212
|
.ui.items > .ui > .content a:not(.ui) {
|
|
213
|
-
color:
|
|
213
|
+
color: "";
|
|
214
214
|
transition: color 0.1s ease;
|
|
215
215
|
}
|
|
216
216
|
.ui.items > .ui > .content a:not(.ui):hover {
|
|
217
|
-
color:
|
|
217
|
+
color: "";
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
/* Header */
|
|
221
221
|
.ui.items > .ui > .content > a.header {
|
|
222
|
-
color:
|
|
222
|
+
color: rgb(0 0 0 / 85%);
|
|
223
223
|
}
|
|
224
224
|
.ui.items > .ui > .content > a.header:hover {
|
|
225
225
|
color: #1e70bf;
|
|
@@ -227,10 +227,10 @@
|
|
|
227
227
|
|
|
228
228
|
/* Meta */
|
|
229
229
|
.ui.items > .ui .meta > a:not(.ui) {
|
|
230
|
-
color:
|
|
230
|
+
color: rgb(0 0 0 / 40%);
|
|
231
231
|
}
|
|
232
232
|
.ui.items > .ui .meta > a:not(.ui):hover {
|
|
233
|
-
color:
|
|
233
|
+
color: rgb(0 0 0 / 87%);
|
|
234
234
|
}
|
|
235
235
|
|
|
236
236
|
/*--------------
|
|
@@ -244,11 +244,11 @@
|
|
|
244
244
|
/* Icon */
|
|
245
245
|
.ui.items > .ui > .content .favorite.icon {
|
|
246
246
|
cursor: pointer;
|
|
247
|
-
opacity:
|
|
247
|
+
opacity: 75%;
|
|
248
248
|
transition: color 0.1s ease;
|
|
249
249
|
}
|
|
250
250
|
.ui.items > .ui > .content .favorite.icon:hover {
|
|
251
|
-
opacity:
|
|
251
|
+
opacity: 100%;
|
|
252
252
|
color: #FFB70A;
|
|
253
253
|
}
|
|
254
254
|
.ui.items > .ui > .content .active.favorite.icon {
|
|
@@ -261,11 +261,11 @@
|
|
|
261
261
|
/* Icon */
|
|
262
262
|
.ui.items > .ui > .content .like.icon {
|
|
263
263
|
cursor: pointer;
|
|
264
|
-
opacity:
|
|
264
|
+
opacity: 75%;
|
|
265
265
|
transition: color 0.1s ease;
|
|
266
266
|
}
|
|
267
267
|
.ui.items > .ui > .content .like.icon:hover {
|
|
268
|
-
opacity:
|
|
268
|
+
opacity: 100%;
|
|
269
269
|
color: #FF2733;
|
|
270
270
|
}
|
|
271
271
|
.ui.items > .ui > .content .active.like.icon {
|
|
@@ -282,10 +282,10 @@
|
|
|
282
282
|
background: none;
|
|
283
283
|
margin: 0.5rem 0em 0em;
|
|
284
284
|
width: 100%;
|
|
285
|
-
padding: 0em
|
|
285
|
+
padding: 0em;
|
|
286
286
|
top: 0em;
|
|
287
287
|
left: 0em;
|
|
288
|
-
color:
|
|
288
|
+
color: rgb(0 0 0 / 40%);
|
|
289
289
|
box-shadow: none;
|
|
290
290
|
transition: color 0.1s ease;
|
|
291
291
|
border-top: none;
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
}
|
|
299
299
|
.ui.items > .ui .extra::after {
|
|
300
300
|
display: block;
|
|
301
|
-
content:
|
|
301
|
+
content: " ";
|
|
302
302
|
height: 0px;
|
|
303
303
|
clear: both;
|
|
304
304
|
overflow: hidden;
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
margin-right: 1em;
|
|
320
320
|
}
|
|
321
321
|
.ui.three.items > .ui > .image {
|
|
322
|
-
width: calc(33.
|
|
322
|
+
width: calc(33.3333% - 1em);
|
|
323
323
|
margin-right: 1em;
|
|
324
324
|
}
|
|
325
325
|
.ui.four.items > .ui > .image {
|
|
@@ -331,11 +331,11 @@
|
|
|
331
331
|
margin-right: 0.75em;
|
|
332
332
|
}
|
|
333
333
|
.ui.six.items > .ui > .image {
|
|
334
|
-
width: calc(16.
|
|
334
|
+
width: calc(16.6667% - 0.75em);
|
|
335
335
|
margin-right: 0.75em;
|
|
336
336
|
}
|
|
337
337
|
.ui.seven.items > .ui > .image {
|
|
338
|
-
width: calc(14.
|
|
338
|
+
width: calc(14.2857% - 0.5em);
|
|
339
339
|
margin-right: 0.5em;
|
|
340
340
|
}
|
|
341
341
|
|
|
@@ -409,7 +409,7 @@
|
|
|
409
409
|
--------------------*/
|
|
410
410
|
|
|
411
411
|
.ui.divided.items > .ui {
|
|
412
|
-
border-top: 1px solid
|
|
412
|
+
border-top: 1px solid rgb(34 36 38 / 15%);
|
|
413
413
|
margin: 0em;
|
|
414
414
|
padding: 1em 0em;
|
|
415
415
|
}
|
package/ui/layout.css
CHANGED
package/ui/loading.css
CHANGED
|
@@ -21,24 +21,24 @@
|
|
|
21
21
|
0% {
|
|
22
22
|
width:0%;
|
|
23
23
|
margin-left:0px;
|
|
24
|
-
opacity:
|
|
24
|
+
opacity:30%;
|
|
25
25
|
}
|
|
26
26
|
50% {
|
|
27
27
|
width:20px;
|
|
28
28
|
margin-left:-10px;
|
|
29
|
-
opacity:
|
|
29
|
+
opacity:100%;
|
|
30
30
|
}
|
|
31
31
|
100% {
|
|
32
32
|
width:0%;
|
|
33
33
|
margin-left:0px;
|
|
34
|
-
opacity:
|
|
34
|
+
opacity:30%;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.loading[data-src]::after {
|
|
39
39
|
display: block;
|
|
40
40
|
animation: scanner 6s steps(3, end) infinite;
|
|
41
|
-
content:
|
|
41
|
+
content: "";
|
|
42
42
|
width: 20px;
|
|
43
43
|
height: 0;
|
|
44
44
|
border-top: 4px dotted #aaa;
|
|
@@ -48,17 +48,17 @@
|
|
|
48
48
|
|
|
49
49
|
.error[data-src]::after {
|
|
50
50
|
display: block;
|
|
51
|
-
content:
|
|
51
|
+
content: "∅";
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.waiting[data-src]::after {
|
|
55
55
|
display:block;
|
|
56
|
-
content:
|
|
56
|
+
content: "?";
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.denied[data-src]::after {
|
|
60
60
|
display:block;
|
|
61
|
-
content:
|
|
61
|
+
content: "🛇";
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.error[data-src],
|
package/ui/menu.css
CHANGED
package/ui/rating.css
CHANGED
|
@@ -24,7 +24,7 @@ element-rating .icon {
|
|
|
24
24
|
height: auto;
|
|
25
25
|
transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease;
|
|
26
26
|
backface-visibility: hidden;
|
|
27
|
-
color:
|
|
27
|
+
color: rgb(0 0 0 / 15%);
|
|
28
28
|
}
|
|
29
29
|
element-rating .icon:last-child {
|
|
30
30
|
padding-right:0;
|
|
@@ -40,20 +40,20 @@ element-rating .icon::before {
|
|
|
40
40
|
|
|
41
41
|
/* Active Icon */
|
|
42
42
|
element-rating .active.icon {
|
|
43
|
-
color:
|
|
43
|
+
color: rgb(0 0 0 / 85%);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
/* Selected Icon */
|
|
47
47
|
element-rating .icon.selected,
|
|
48
48
|
element-rating .icon.selected.active {
|
|
49
|
-
color:
|
|
49
|
+
color: rgb(0 0 0 / 87%);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
/* Star */
|
|
53
53
|
|
|
54
54
|
/* Inactive */
|
|
55
55
|
element-rating.star .icon {
|
|
56
|
-
color:
|
|
56
|
+
color: rgb(0 0 0 / 15%);
|
|
57
57
|
text-shadow: none;
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -73,7 +73,7 @@ element-rating.star .icon.selected.active {
|
|
|
73
73
|
/* Heart */
|
|
74
74
|
|
|
75
75
|
element-rating.heart .icon {
|
|
76
|
-
color:
|
|
76
|
+
color: rgb(0 0 0 / 15%);
|
|
77
77
|
text-shadow: none !important;
|
|
78
78
|
}
|
|
79
79
|
|
|
@@ -101,10 +101,10 @@ element-rating.disabled .icon {
|
|
|
101
101
|
|
|
102
102
|
/* Selected Rating */
|
|
103
103
|
element-rating.selected .active.icon {
|
|
104
|
-
opacity:
|
|
104
|
+
opacity: 100%;
|
|
105
105
|
}
|
|
106
106
|
element-rating .icon.selected,
|
|
107
107
|
element-rating.selected .icon.selected {
|
|
108
|
-
opacity:
|
|
108
|
+
opacity: 100%;
|
|
109
109
|
}
|
|
110
110
|
|
package/ui/site.css
CHANGED
|
@@ -22,10 +22,10 @@ body {
|
|
|
22
22
|
overflow-x: hidden;
|
|
23
23
|
min-width: 320px;
|
|
24
24
|
background: #FFFFFF;
|
|
25
|
-
font-family:
|
|
25
|
+
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
26
26
|
font-size: 14px;
|
|
27
27
|
line-height: 1.4285em;
|
|
28
|
-
color:
|
|
28
|
+
color: rgb(0 0 0 / 87%);
|
|
29
29
|
}
|
|
30
30
|
.hidden,[hidden] {
|
|
31
31
|
display:none !important;
|
|
@@ -41,9 +41,9 @@ h2,
|
|
|
41
41
|
h3,
|
|
42
42
|
h4,
|
|
43
43
|
h5 {
|
|
44
|
-
font-family:
|
|
45
|
-
line-height: 1.
|
|
46
|
-
margin: calc(2rem - 0.
|
|
44
|
+
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
45
|
+
line-height: 1.2857em;
|
|
46
|
+
margin: calc(2rem - 0.1428em) 0 1rem;
|
|
47
47
|
font-weight: bold;
|
|
48
48
|
padding: 0;
|
|
49
49
|
}
|
|
@@ -52,13 +52,13 @@ h1 {
|
|
|
52
52
|
font-size: 2rem;
|
|
53
53
|
}
|
|
54
54
|
h2 {
|
|
55
|
-
font-size: 1.
|
|
55
|
+
font-size: 1.7143rem;
|
|
56
56
|
}
|
|
57
57
|
h3 {
|
|
58
|
-
font-size: 1.
|
|
58
|
+
font-size: 1.2857rem;
|
|
59
59
|
}
|
|
60
60
|
h4 {
|
|
61
|
-
font-size: 1.
|
|
61
|
+
font-size: 1.0714rem;
|
|
62
62
|
}
|
|
63
63
|
h5 {
|
|
64
64
|
font-size: 1rem;
|
|
@@ -172,7 +172,6 @@ i.icon {
|
|
|
172
172
|
height:1em;
|
|
173
173
|
font-size:1em;
|
|
174
174
|
text-align:center;
|
|
175
|
-
speak:none;
|
|
176
175
|
}
|
|
177
176
|
i.icon::before {
|
|
178
177
|
display:block;
|
|
@@ -192,7 +191,7 @@ i.icon::before {
|
|
|
192
191
|
cursor: pointer;
|
|
193
192
|
}
|
|
194
193
|
.caret-icon::before {
|
|
195
|
-
content:
|
|
194
|
+
content: "\f0da";
|
|
196
195
|
transform: rotate(0deg);
|
|
197
196
|
font-family: Accordion;
|
|
198
197
|
font-style:normal;
|
|
@@ -211,25 +210,25 @@ i.icon::before {
|
|
|
211
210
|
|
|
212
211
|
i.icon.prev::before {
|
|
213
212
|
background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1331 672q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>');
|
|
214
|
-
content:
|
|
213
|
+
content:"";
|
|
215
214
|
}
|
|
216
215
|
i.icon.next::before {
|
|
217
216
|
background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1299 1088q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>');
|
|
218
|
-
content:
|
|
217
|
+
content:"";
|
|
219
218
|
}
|
|
220
219
|
i.icon.up::before {
|
|
221
220
|
background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1523 1312q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>');
|
|
222
|
-
content:
|
|
221
|
+
content:"";
|
|
223
222
|
}
|
|
224
223
|
|
|
225
224
|
.ui.breadcrumb .divider::before {
|
|
226
|
-
content:
|
|
225
|
+
content: ">";
|
|
227
226
|
}
|
|
228
227
|
|
|
229
228
|
i.icon.delete::before,
|
|
230
229
|
i.icon.close::before {
|
|
231
230
|
font-size:2em;
|
|
232
|
-
content:
|
|
231
|
+
content:"×";
|
|
233
232
|
width:auto;
|
|
234
233
|
height:auto;
|
|
235
234
|
}
|
|
@@ -246,54 +245,45 @@ i.icon.close::before {
|
|
|
246
245
|
|
|
247
246
|
|
|
248
247
|
/* Site */
|
|
249
|
-
::-webkit-selection {
|
|
250
|
-
background-color: #CCE2FF;
|
|
251
|
-
color: rgba(0, 0, 0, 0.87);
|
|
252
|
-
}
|
|
253
|
-
::-moz-selection {
|
|
254
|
-
background-color: #CCE2FF;
|
|
255
|
-
color: rgba(0, 0, 0, 0.87);
|
|
256
|
-
}
|
|
257
248
|
::selection {
|
|
258
249
|
background-color: #CCE2FF;
|
|
259
|
-
color:
|
|
250
|
+
color: rgb(0 0 0 / 87%);
|
|
260
251
|
}
|
|
261
252
|
|
|
262
253
|
/* Force Simple Scrollbars */
|
|
263
254
|
body ::-webkit-scrollbar {
|
|
264
|
-
|
|
255
|
+
appearance: none;
|
|
265
256
|
width: 10px;
|
|
266
257
|
}
|
|
267
258
|
body ::-webkit-scrollbar-track {
|
|
268
|
-
background:
|
|
259
|
+
background: rgb(0 0 0 / 10%);
|
|
269
260
|
border-radius: 0px;
|
|
270
261
|
}
|
|
271
262
|
body ::-webkit-scrollbar-thumb {
|
|
272
263
|
cursor: pointer;
|
|
273
264
|
border-radius: 5px;
|
|
274
|
-
background:
|
|
275
|
-
-webkit-transition: color 0.2s ease;
|
|
265
|
+
background: rgb(0 0 0 / 25%);
|
|
276
266
|
transition: color 0.2s ease;
|
|
277
267
|
}
|
|
278
268
|
body ::-webkit-scrollbar-thumb:window-inactive {
|
|
279
|
-
background:
|
|
269
|
+
background: rgb(0 0 0 / 15%);
|
|
280
270
|
}
|
|
281
271
|
body ::-webkit-scrollbar-thumb:hover {
|
|
282
|
-
background:
|
|
272
|
+
background: rgb(128 135 139 / 80%);
|
|
283
273
|
}
|
|
284
274
|
|
|
285
275
|
/* Inverted UI */
|
|
286
276
|
body .ui.inverted::-webkit-scrollbar-track {
|
|
287
|
-
background:
|
|
277
|
+
background: rgb(255 255 255 / 10%);
|
|
288
278
|
}
|
|
289
279
|
body .ui.inverted::-webkit-scrollbar-thumb {
|
|
290
|
-
background:
|
|
280
|
+
background: rgb(255 255 255 / 25%);
|
|
291
281
|
}
|
|
292
282
|
body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
|
|
293
|
-
background:
|
|
283
|
+
background: rgb(255 255 255 / 15%);
|
|
294
284
|
}
|
|
295
285
|
body .ui.inverted::-webkit-scrollbar-thumb:hover {
|
|
296
|
-
background:
|
|
286
|
+
background: rgb(255 255 255 / 35%);
|
|
297
287
|
}
|
|
298
288
|
|
|
299
289
|
/* Fixes */
|
|
@@ -315,7 +305,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
|
|
|
315
305
|
width: auto;
|
|
316
306
|
height: auto;
|
|
317
307
|
top: 100% !important;
|
|
318
|
-
opacity:
|
|
308
|
+
opacity: 100%;
|
|
319
309
|
}
|
|
320
310
|
|
|
321
311
|
[contenteditable] .field[block-focused] .dropdown > .menu {
|
package/ui/tab.css
CHANGED
package/ui/transition.css
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
/* async progress bar and error signal */
|
|
2
2
|
|
|
3
3
|
body::after {
|
|
4
|
-
content:
|
|
4
|
+
content: "";
|
|
5
5
|
position:fixed;
|
|
6
6
|
display:block;
|
|
7
7
|
left:0;
|
|
8
8
|
top:1px;
|
|
9
9
|
width:0%;
|
|
10
10
|
height:0;
|
|
11
|
-
opacity:
|
|
11
|
+
opacity:70%;
|
|
12
12
|
background: #4486cc;
|
|
13
|
-
box-shadow: 0 0 5px
|
|
13
|
+
box-shadow: 0 0 5px rgb(99 162 235 / 70%);
|
|
14
14
|
z-index:1000;
|
|
15
15
|
}
|
|
16
16
|
html[data-stage] > body::after {
|
|
@@ -75,7 +75,7 @@ html.transition > body + body[data-transition-open] {
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
html.transition > body + body[data-transition-open] > *:not([block-type="main"]) {
|
|
78
|
-
opacity:0
|
|
78
|
+
opacity:0%;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
html.transition > body + body[data-transition-open="tr-right"] {
|
|
@@ -99,7 +99,7 @@ html.transition > body + body[data-transition-open="tr-bottom"] {
|
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
html.transition > body + body[data-transition-open="fade"] {
|
|
102
|
-
opacity:0
|
|
102
|
+
opacity:0%;
|
|
103
103
|
transition: opacity 1.5s ease-in;
|
|
104
104
|
}
|
|
105
105
|
|
|
@@ -107,7 +107,7 @@ html.transition.transitioning > body + body[data-transition-open|="tr"] {
|
|
|
107
107
|
transform: translate3d(0, 0, 0);
|
|
108
108
|
}
|
|
109
109
|
html.transition.transitioning > body + body[data-transition-open="fade"] {
|
|
110
|
-
opacity:
|
|
110
|
+
opacity:100%;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
/* closing transitions */
|
|
@@ -118,7 +118,7 @@ html.transition > body[data-transition-close|="tr"]:first-of-type {
|
|
|
118
118
|
|
|
119
119
|
html.transition > body[data-transition-close="fade"]:first-of-type {
|
|
120
120
|
z-index:1;
|
|
121
|
-
opacity:
|
|
121
|
+
opacity:100%;
|
|
122
122
|
transition: opacity 1.5s ease-in;
|
|
123
123
|
}
|
|
124
124
|
|
|
@@ -139,6 +139,6 @@ html.transition.transitioning > body[data-transition-close="tr-bottom"]:first-of
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
html.transition.transitioning > body[data-transition-close="fade"]:first-of-type {
|
|
142
|
-
opacity:0
|
|
142
|
+
opacity:0%;
|
|
143
143
|
}
|
|
144
144
|
|