@readme/markdown 6.74.1 → 6.75.0-beta.1
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/README.md +13 -17
- package/components/Anchor.jsx +1 -1
- package/components/Callout/index.jsx +3 -3
- package/components/Callout/style.scss +27 -60
- package/components/Code/index.jsx +0 -2
- package/components/Code/style.scss +81 -72
- package/components/CodeTabs/index.jsx +4 -15
- package/components/CodeTabs/style.scss +22 -30
- package/components/Embed/style.scss +59 -67
- package/components/GlossaryItem/style.scss +11 -22
- package/components/Heading/style.scss +9 -15
- package/components/Image/index.jsx +6 -3
- package/components/Image/style.scss +63 -64
- package/components/Table/style.scss +17 -23
- package/dist/main.css +7 -14
- package/dist/main.js +61975 -27904
- package/dist/main.node.js +2 -34778
- package/dist/main.node.js.LICENSE.txt +50 -0
- package/package.json +53 -66
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
/* stylelint-disable no-descending-specificity */
|
|
2
|
-
/* stylelint-disable declaration-property-value-disallowed-list */
|
|
3
1
|
@import '~codemirror/lib/codemirror.css';
|
|
4
2
|
@import '~codemirror/theme/neo.css';
|
|
5
3
|
|
|
6
|
-
@mixin
|
|
7
|
-
$bgc-pre: #
|
|
8
|
-
$bgc-pre-dark: #
|
|
4
|
+
@mixin CodeTabs {
|
|
5
|
+
$bgc-pre: #F6F8FA;
|
|
6
|
+
$bgc-pre-dark: #242E34;
|
|
9
7
|
$bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
|
|
10
8
|
$bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
|
|
11
9
|
$radius: var(--md-code-radius, var(--markdown-radius, 3px));
|
|
12
10
|
|
|
13
|
-
border-radius: $radius !important;
|
|
14
11
|
color: #333;
|
|
15
12
|
color: var(--md-code-text, #333);
|
|
13
|
+
border-radius: $radius !important;
|
|
16
14
|
overflow: hidden;
|
|
17
15
|
|
|
18
16
|
&.theme-dark {
|
|
19
17
|
color: white;
|
|
20
18
|
color: var(--md-code-text, white);
|
|
21
|
-
|
|
22
19
|
.CodeTabs-toolbar {
|
|
23
20
|
background: $bgc-bar-dark;
|
|
24
21
|
background: var(--md-code-tabs, $bgc-bar-dark);
|
|
@@ -31,28 +28,27 @@
|
|
|
31
28
|
display: flex;
|
|
32
29
|
flex-flow: row nowrap;
|
|
33
30
|
overflow: hidden;
|
|
34
|
-
-webkit-overflow-scrolling: touch;
|
|
35
|
-
-ms-overflow-style: none;
|
|
36
31
|
overflow-x: auto;
|
|
37
|
-
|
|
32
|
+
-ms-overflow-style: none;
|
|
33
|
+
-webkit-overflow-scrolling: touch;
|
|
38
34
|
&::-webkit-scrollbar {
|
|
39
35
|
display: none;
|
|
40
36
|
}
|
|
41
|
-
|
|
42
37
|
button {
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
transition: .123s ease;
|
|
40
|
+
-webkit-appearance: none;
|
|
43
41
|
appearance: none;
|
|
44
|
-
background: transparent;
|
|
45
|
-
border: none;
|
|
46
|
-
color: inherit;
|
|
47
|
-
cursor: pointer;
|
|
48
42
|
display: inline-block;
|
|
49
|
-
font: inherit;
|
|
50
|
-
font-size: 0.75em;
|
|
51
43
|
line-height: 2;
|
|
44
|
+
padding: .5em 1em;
|
|
45
|
+
border: none;
|
|
46
|
+
background: transparent;
|
|
52
47
|
outline: none;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
48
|
+
color: inherit;
|
|
49
|
+
font: inherit;
|
|
50
|
+
font-size: .75em;
|
|
51
|
+
cursor: pointer;
|
|
56
52
|
}
|
|
57
53
|
}
|
|
58
54
|
|
|
@@ -73,20 +69,16 @@
|
|
|
73
69
|
color: var(--md-code-text, white);
|
|
74
70
|
}
|
|
75
71
|
|
|
76
|
-
&-toolbar button:not(.CodeTabs_active):hover
|
|
77
|
-
|
|
78
|
-
&-toolbar button:not(.CodeTabs_active):focus {
|
|
79
|
-
background: rgba(0, 0, 0, 0.075);
|
|
72
|
+
&-toolbar button:not(.CodeTabs_active):hover {
|
|
73
|
+
background: rgba(0, 0, 0, .075);
|
|
80
74
|
}
|
|
81
75
|
|
|
82
76
|
pre {
|
|
83
|
-
background: var(--md-code-background, $bgc-pre);
|
|
84
77
|
border-radius: 0 0 $radius $radius !important;
|
|
78
|
+
background: $bgc-pre;
|
|
79
|
+
background: var(--md-code-background, $bgc-pre);
|
|
85
80
|
margin-bottom: 0;
|
|
86
|
-
|
|
87
|
-
&:not(.CodeTabs_active) {
|
|
88
|
-
display: none;
|
|
89
|
-
}
|
|
81
|
+
&:not(.CodeTabs_active) { display: none }
|
|
90
82
|
}
|
|
91
83
|
|
|
92
84
|
&.theme-dark pre {
|
|
@@ -100,5 +92,5 @@
|
|
|
100
92
|
}
|
|
101
93
|
|
|
102
94
|
.CodeTabs {
|
|
103
|
-
@include
|
|
95
|
+
@include CodeTabs;
|
|
104
96
|
}
|
|
@@ -1,38 +1,33 @@
|
|
|
1
1
|
.markdown-body .embed {
|
|
2
|
-
$
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
box-shadow: inset 0 0 0 1px rgba(black, 0.1);
|
|
15
|
-
}
|
|
16
|
-
@at-root .markdown-body > #{$embed}_hasImg:nth-of-type(odd) {
|
|
17
|
-
margin-right: 30px;
|
|
18
|
-
padding-right: 0;
|
|
19
|
-
#{$embed}-link {
|
|
20
|
-
flex-direction: row-reverse;
|
|
2
|
+
$B: '.embed';
|
|
3
|
+
& {
|
|
4
|
+
padding: 15px;
|
|
5
|
+
color: var(--md-code-text, inherit);
|
|
6
|
+
border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
|
|
7
|
+
border-radius: 3px;
|
|
8
|
+
background: transparent;
|
|
9
|
+
box-shadow: inset 0 0 0 1px rgba(black, .15);
|
|
10
|
+
transition: .3s ease;
|
|
11
|
+
&:hover {
|
|
12
|
+
background: var(--md-code-background, #f6f8fa);
|
|
13
|
+
box-shadow: inset 0 0 0 1px rgba(black, .1);
|
|
21
14
|
}
|
|
22
|
-
#{$
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
15
|
+
@at-root .markdown-body > #{$B}_hasImg:nth-of-type(odd) {
|
|
16
|
+
margin-right: 30px;
|
|
17
|
+
padding-right: 0;
|
|
18
|
+
#{$B}-link { flex-direction: row-reverse }
|
|
19
|
+
#{$B}-img {
|
|
20
|
+
margin-left: .88em;
|
|
21
|
+
margin-right: -30px;
|
|
22
|
+
box-shadow: -.3em .3em .9em -.3em rgba(black, .15);
|
|
23
|
+
}
|
|
26
24
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
#{$embed}-img {
|
|
32
|
-
margin-left: -30px;
|
|
25
|
+
@at-root .markdown-body > #{$B}_hasImg:nth-of-type(even) {
|
|
26
|
+
margin-left: 30px;
|
|
27
|
+
padding-left: 0;
|
|
28
|
+
#{$B}-img { margin-left: -30px }
|
|
33
29
|
}
|
|
34
30
|
}
|
|
35
|
-
|
|
36
31
|
&:empty {
|
|
37
32
|
display: none;
|
|
38
33
|
}
|
|
@@ -40,87 +35,84 @@
|
|
|
40
35
|
&-media {
|
|
41
36
|
display: flex;
|
|
42
37
|
justify-content: center;
|
|
43
|
-
|
|
44
|
-
> :only-child {
|
|
45
|
-
border-radius: 0 !important;
|
|
38
|
+
>:only-child {
|
|
46
39
|
flex: 1;
|
|
47
40
|
margin: -15px;
|
|
41
|
+
border-radius: 0 !important;
|
|
48
42
|
}
|
|
49
43
|
}
|
|
50
44
|
|
|
51
45
|
&-link {
|
|
46
|
+
display: flex;
|
|
52
47
|
align-items: center;
|
|
53
48
|
color: var(--markdown-text, #333);
|
|
54
|
-
display: flex;
|
|
55
49
|
text-decoration: none !important;
|
|
56
50
|
}
|
|
57
51
|
|
|
58
52
|
&-body {
|
|
59
53
|
flex: 1;
|
|
60
54
|
line-height: 1.3;
|
|
61
|
-
&,
|
|
62
|
-
#{$embed}-title {
|
|
55
|
+
&, #{$B}-title {
|
|
63
56
|
font-size: 1.15em;
|
|
64
57
|
overflow: hidden;
|
|
65
|
-
text-overflow: ellipsis;
|
|
66
58
|
white-space: nowrap;
|
|
59
|
+
text-overflow: ellipsis;
|
|
67
60
|
}
|
|
68
|
-
#{$
|
|
61
|
+
#{$B}-provider {
|
|
69
62
|
display: block;
|
|
70
|
-
opacity: 0.88;
|
|
71
63
|
text-decoration-color: transparent !important;
|
|
64
|
+
opacity: .88;
|
|
72
65
|
}
|
|
73
|
-
|
|
74
66
|
&-url {
|
|
75
|
-
opacity:
|
|
67
|
+
opacity: .75;
|
|
76
68
|
}
|
|
77
69
|
}
|
|
78
70
|
|
|
79
71
|
&-provider {
|
|
80
72
|
font-size: 0.8em;
|
|
81
73
|
line-height: 1.6;
|
|
82
|
-
transition: 0.2 ease;
|
|
83
|
-
|
|
84
|
-
code {
|
|
85
|
-
opacity: 0.8;
|
|
86
|
-
}
|
|
87
74
|
|
|
88
75
|
code:only-child {
|
|
89
|
-
background: transparent;
|
|
90
76
|
display: block;
|
|
91
|
-
|
|
92
|
-
|
|
77
|
+
width: 100%;
|
|
78
|
+
font-size: 1.15em;
|
|
93
79
|
overflow: hidden;
|
|
94
|
-
padding: 0;
|
|
95
|
-
text-overflow: ellipsis;
|
|
96
80
|
white-space: nowrap;
|
|
97
|
-
|
|
81
|
+
text-overflow: ellipsis;
|
|
82
|
+
background: transparent;
|
|
83
|
+
margin: 0;
|
|
84
|
+
padding: 0;
|
|
85
|
+
font-size: inherit !important;
|
|
98
86
|
}
|
|
99
|
-
|
|
87
|
+
transition: .2 ease;
|
|
88
|
+
code {
|
|
89
|
+
opacity: 0.8;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
100
92
|
|
|
101
93
|
&-img {
|
|
102
|
-
|
|
103
|
-
border: 1px solid rgba(black, 0.15);
|
|
104
|
-
border-radius: 3px;
|
|
105
|
-
box-shadow: 0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
|
|
106
|
-
margin: 0 0.88em 0 0;
|
|
94
|
+
width: 5em;
|
|
107
95
|
max-width: 5em;
|
|
96
|
+
margin: 0 .88em 0 0;
|
|
108
97
|
padding: 4px;
|
|
98
|
+
background: white;
|
|
99
|
+
border: 1px solid rgba(black, .15);
|
|
100
|
+
border-radius: 3px;
|
|
109
101
|
transition: inherit;
|
|
110
|
-
|
|
102
|
+
box-shadow: .3em .3em .9em -.3em rgba(black, .15);
|
|
111
103
|
}
|
|
112
|
-
&:not(:hover) #{$
|
|
113
|
-
box-shadow: 0
|
|
104
|
+
&:not(:hover) #{$B}-img {
|
|
105
|
+
box-shadow: 0 .25em 1em -.5em rgba(black, .133);
|
|
114
106
|
}
|
|
115
|
-
&:hover #{$
|
|
116
|
-
border: 1px solid rgba(black,
|
|
107
|
+
&:hover #{$B}-img {
|
|
108
|
+
border: 1px solid rgba(black, .2);
|
|
117
109
|
}
|
|
118
110
|
|
|
119
111
|
&-favicon {
|
|
112
|
+
width: 12px !important;
|
|
120
113
|
height: 12px !important;
|
|
121
|
-
margin-bottom: 12px;
|
|
122
|
-
margin-right: 6px;
|
|
123
114
|
margin-top: 4px;
|
|
124
|
-
|
|
115
|
+
margin-right: 6px;
|
|
116
|
+
margin-bottom: 12px;
|
|
125
117
|
}
|
|
126
|
-
}
|
|
118
|
+
}
|
|
@@ -1,47 +1,36 @@
|
|
|
1
|
-
/* stylelint-disable declaration-property-value-disallowed-list */
|
|
2
|
-
/* stylelint-disable custom-property-pattern */
|
|
3
|
-
/* stylelint-disable order/order */
|
|
4
1
|
.GlossaryItem {
|
|
5
2
|
&-trigger {
|
|
6
|
-
border-bottom: 1px
|
|
3
|
+
border-bottom: 1px solid #737c83;
|
|
4
|
+
border-style: dotted;
|
|
5
|
+
border-top: none;
|
|
7
6
|
border-left: none;
|
|
8
7
|
border-right: none;
|
|
9
|
-
border-top: none;
|
|
10
8
|
cursor: pointer;
|
|
11
9
|
}
|
|
12
10
|
|
|
13
11
|
&-tooltip-content {
|
|
14
12
|
--GlossaryItem-bg: var(--color-bg-page, var(--white));
|
|
15
13
|
--GlossaryItem-color: var(--color-text-default, var(--gray20));
|
|
16
|
-
--GlossaryItem-shadow: var(
|
|
17
|
-
|
|
18
|
-
0
|
|
19
|
-
0 2px 6px rgba(0, 0, 0, 0.025),
|
|
20
|
-
0 1px 3px rgba(0, 0, 0, 0.025)
|
|
21
|
-
);
|
|
14
|
+
--GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
|
|
15
|
+
0 2px 6px rgba(0, 0, 0, .025),
|
|
16
|
+
0 1px 3px rgba(0, 0, 0, .025));
|
|
22
17
|
|
|
23
18
|
/* what the dark-mode mixin does in the readme project */
|
|
24
19
|
[data-color-mode='dark'] & {
|
|
25
20
|
--GlossaryItem-bg: var(--gray15);
|
|
26
21
|
--GlossaryItem-color: var(--color-text-default, var(--white));
|
|
27
|
-
--GlossaryItem-shadow: var(
|
|
28
|
-
--box-shadow-menu-dark,
|
|
29
|
-
0 1px 3px rgba(0, 0, 0, 0.025),
|
|
22
|
+
--GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
|
|
30
23
|
0 2px 6px rgba(0, 0, 0, 0.025),
|
|
31
|
-
0 5px 10px rgba(0, 0, 0, 0.05)
|
|
32
|
-
);
|
|
24
|
+
0 5px 10px rgba(0, 0, 0, 0.05))
|
|
33
25
|
}
|
|
34
26
|
|
|
35
27
|
@media (prefers-color-scheme: dark) {
|
|
36
|
-
[data-color-mode='
|
|
28
|
+
[data-color-mode='auto'] & {
|
|
37
29
|
--GlossaryItem-bg: var(--Tooltip-bg, var(--gray0));
|
|
38
30
|
--GlossaryItem-color: var(--color-text-default, var(--white));
|
|
39
|
-
--GlossaryItem-shadow: var(
|
|
40
|
-
--box-shadow-menu-dark,
|
|
41
|
-
0 1px 3px rgba(0, 0, 0, 0.025),
|
|
31
|
+
--GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
|
|
42
32
|
0 2px 6px rgba(0, 0, 0, 0.025),
|
|
43
|
-
0 5px 10px rgba(0, 0, 0, 0.05)
|
|
44
|
-
);
|
|
33
|
+
0 5px 10px rgba(0, 0, 0, 0.05))
|
|
45
34
|
}
|
|
46
35
|
}
|
|
47
36
|
|
|
@@ -1,43 +1,37 @@
|
|
|
1
1
|
.heading.heading {
|
|
2
|
-
align-items: center;
|
|
3
2
|
display: flex;
|
|
4
3
|
justify-content: flex-start;
|
|
4
|
+
align-items: center;
|
|
5
5
|
position: relative;
|
|
6
|
-
|
|
7
6
|
.heading-text {
|
|
8
7
|
flex: 1 100%;
|
|
9
8
|
}
|
|
10
|
-
|
|
11
9
|
.heading-anchor-deprecated {
|
|
12
10
|
position: absolute;
|
|
13
11
|
top: 0;
|
|
14
12
|
}
|
|
15
|
-
|
|
16
13
|
.heading-anchor {
|
|
17
14
|
top: -1rem !important;
|
|
18
15
|
}
|
|
19
|
-
|
|
20
16
|
.heading-anchor,
|
|
21
17
|
.heading-anchor-icon {
|
|
22
|
-
|
|
18
|
+
position: absolute !important;
|
|
23
19
|
display: inline !important;
|
|
24
|
-
font-size: 0.8rem !important;
|
|
25
|
-
margin-right: -0.8rem;
|
|
26
20
|
order: -1;
|
|
27
|
-
padding: 0.8rem 0.2rem 0.8rem 0 !important;
|
|
28
|
-
position: absolute !important;
|
|
29
21
|
right: 100%;
|
|
30
|
-
text-decoration: none;
|
|
31
22
|
top: unset !important;
|
|
23
|
+
margin-right: -.8rem;
|
|
24
|
+
padding: .8rem .2rem .8rem 0 !important;
|
|
25
|
+
font-size: .8rem !important;
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
color: inherit;
|
|
32
28
|
transform: translateX(-100%);
|
|
33
|
-
transition:
|
|
34
|
-
|
|
29
|
+
transition: .2s ease;
|
|
35
30
|
&:hover {
|
|
36
31
|
opacity: 1;
|
|
37
32
|
}
|
|
38
33
|
}
|
|
39
|
-
|
|
40
34
|
&:not(:hover) .heading-anchor-icon {
|
|
41
35
|
opacity: 0;
|
|
42
36
|
}
|
|
43
|
-
}
|
|
37
|
+
}
|
|
@@ -48,12 +48,15 @@ class Image extends React.Component {
|
|
|
48
48
|
|
|
49
49
|
render() {
|
|
50
50
|
const { props } = this;
|
|
51
|
-
|
|
51
|
+
|
|
52
|
+
const { alt, lazy = true } = props;
|
|
52
53
|
|
|
53
54
|
if (this.isEmoji) {
|
|
54
|
-
return <img alt={alt} loading={lazy ? 'lazy' : ''}
|
|
55
|
+
return <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />;
|
|
55
56
|
}
|
|
56
57
|
|
|
58
|
+
const align = props.align === 'center' ? 'middle' : props.align;
|
|
59
|
+
|
|
57
60
|
return (
|
|
58
61
|
<span
|
|
59
62
|
aria-label={alt}
|
|
@@ -64,7 +67,7 @@ class Image extends React.Component {
|
|
|
64
67
|
tabIndex={0}
|
|
65
68
|
>
|
|
66
69
|
<span className="lightbox-inner">
|
|
67
|
-
<img alt={alt} loading={lazy ? 'lazy' : ''}
|
|
70
|
+
<img {...props} align={align} alt={alt} loading={lazy ? 'lazy' : ''} />
|
|
68
71
|
</span>
|
|
69
72
|
</span>
|
|
70
73
|
);
|
|
@@ -1,17 +1,12 @@
|
|
|
1
|
-
/* stylelint-disable selector-max-compound-selectors */
|
|
2
|
-
/* stylelint-disable no-descending-specificity */
|
|
3
|
-
/* stylelint-disable font-family-no-missing-generic-family-keyword */
|
|
4
1
|
%img-align {
|
|
5
2
|
&-right {
|
|
6
3
|
float: right;
|
|
7
4
|
margin-left: 0.75rem;
|
|
8
5
|
}
|
|
9
|
-
|
|
10
6
|
&-left {
|
|
11
7
|
float: left;
|
|
12
8
|
margin-right: 0.75rem;
|
|
13
9
|
}
|
|
14
|
-
|
|
15
10
|
&-center {
|
|
16
11
|
display: block;
|
|
17
12
|
}
|
|
@@ -19,35 +14,36 @@
|
|
|
19
14
|
|
|
20
15
|
.markdown-body {
|
|
21
16
|
img {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
& {
|
|
18
|
+
box-sizing: content-box;
|
|
19
|
+
display: inline-block;
|
|
20
|
+
vertical-align: middle;
|
|
21
|
+
max-width: 100%;
|
|
22
|
+
margin-left: auto;
|
|
23
|
+
margin-right: auto;
|
|
24
|
+
border-style: none;
|
|
25
|
+
|
|
26
|
+
outline: none !important;
|
|
27
|
+
}
|
|
30
28
|
|
|
31
29
|
&[align='right'],
|
|
32
30
|
&[alt~='align-right'] {
|
|
33
31
|
@extend %img-align-right;
|
|
34
32
|
}
|
|
35
|
-
|
|
36
33
|
&[align='left'],
|
|
37
34
|
&[alt~='align-left'] {
|
|
38
35
|
@extend %img-align-left;
|
|
39
36
|
}
|
|
40
|
-
|
|
41
37
|
&[width='80%'],
|
|
42
|
-
&[align='
|
|
38
|
+
&[align='middle'],
|
|
43
39
|
&[alt~='align-center'] {
|
|
44
40
|
@extend %img-align-center;
|
|
45
41
|
}
|
|
46
42
|
|
|
47
43
|
&[width='smart'] {
|
|
48
|
-
max-height: 450px;
|
|
49
|
-
max-width: 100%;
|
|
50
44
|
width: auto;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
max-height: 450px;
|
|
51
47
|
}
|
|
52
48
|
|
|
53
49
|
&.border {
|
|
@@ -56,12 +52,13 @@
|
|
|
56
52
|
}
|
|
57
53
|
|
|
58
54
|
figure {
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
& {
|
|
56
|
+
margin: 15px auto;
|
|
57
|
+
}
|
|
61
58
|
figcaption {
|
|
59
|
+
margin-top: 8px;
|
|
62
60
|
font-size: 0.93em;
|
|
63
61
|
font-style: italic;
|
|
64
|
-
margin-top: 8px;
|
|
65
62
|
text-align: center;
|
|
66
63
|
}
|
|
67
64
|
}
|
|
@@ -72,81 +69,83 @@
|
|
|
72
69
|
}
|
|
73
70
|
|
|
74
71
|
figure .img {
|
|
75
|
-
display: block;
|
|
72
|
+
display: inline-block;
|
|
73
|
+
&,
|
|
74
|
+
> img:only-of-type {
|
|
75
|
+
display: block;
|
|
76
|
+
}
|
|
76
77
|
}
|
|
77
78
|
|
|
78
79
|
.lightbox.open {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
80
|
+
& {
|
|
81
|
+
position: fixed;
|
|
82
|
+
z-index: 9999999;
|
|
83
|
+
top: 0;
|
|
84
|
+
left: 0;
|
|
85
|
+
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-flow: nowrap column;
|
|
88
|
+
justify-content: flex-start;
|
|
89
|
+
align-items: center;
|
|
90
|
+
|
|
91
|
+
width: 100vw;
|
|
92
|
+
height: 100vh;
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
overflow-y: scroll;
|
|
95
|
+
background: rgba(white, 0.966);
|
|
96
|
+
user-select: none;
|
|
97
|
+
|
|
98
|
+
margin-top: 0;
|
|
99
|
+
margin-bottom: 0;
|
|
100
|
+
}
|
|
95
101
|
|
|
96
102
|
// Close Button
|
|
97
|
-
|
|
103
|
+
//
|
|
104
|
+
&:after {
|
|
105
|
+
position: fixed;
|
|
106
|
+
top: 1em;
|
|
107
|
+
right: 1em;
|
|
98
108
|
content: '\f00d';
|
|
99
|
-
cursor: pointer;
|
|
100
109
|
display: inline-block;
|
|
101
110
|
font: normal normal normal 2em/1 FontAwesome;
|
|
102
111
|
font-size: inherit;
|
|
112
|
+
text-rendering: auto;
|
|
103
113
|
-webkit-font-smoothing: antialiased;
|
|
104
114
|
-moz-osx-font-smoothing: grayscale;
|
|
105
|
-
opacity: 1;
|
|
106
|
-
position: fixed;
|
|
107
|
-
right: 1em;
|
|
108
|
-
text-rendering: auto;
|
|
109
|
-
top: 1em;
|
|
110
115
|
transform: translate(0, 0);
|
|
116
|
+
display: inline-block;
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
|
|
119
|
+
opacity: 1;
|
|
111
120
|
transform: scale(1.5);
|
|
112
121
|
transition: 0.3s 0.3s ease-in;
|
|
113
122
|
}
|
|
114
|
-
|
|
115
|
-
&:not(.open)::after {
|
|
116
|
-
opacity: 0;
|
|
123
|
+
&:not(.open):after {
|
|
117
124
|
transform: scale(0);
|
|
125
|
+
opacity: 0;
|
|
118
126
|
}
|
|
119
127
|
|
|
120
128
|
.lightbox-inner {
|
|
121
|
-
|
|
122
|
-
box-sizing: content-box;
|
|
129
|
+
position: relative;
|
|
123
130
|
display: inline-flex;
|
|
124
131
|
justify-content: center;
|
|
125
|
-
|
|
132
|
+
align-items: center;
|
|
126
133
|
min-height: calc(100vh + 8px);
|
|
134
|
+
margin: auto;
|
|
127
135
|
padding: 0;
|
|
128
|
-
|
|
136
|
+
box-sizing: content-box;
|
|
129
137
|
}
|
|
130
138
|
|
|
131
139
|
img {
|
|
140
|
+
width: auto !important;
|
|
132
141
|
height: auto !important;
|
|
133
|
-
max-height: 97.5vh !important;
|
|
134
|
-
max-width: 97.5vw !important;
|
|
135
142
|
min-width: unset !important;
|
|
136
|
-
width:
|
|
137
|
-
|
|
143
|
+
max-width: 97.5vw !important;
|
|
144
|
+
max-height: 97.5vh !important;
|
|
138
145
|
&.border,
|
|
139
146
|
&:not([src$='.png']):not([src$='.svg']):not([src$='.jp2']):not([src$='.tiff']) {
|
|
140
147
|
box-shadow: 0 0.5em 3em -1em rgba(0, 0, 0, 0.2);
|
|
141
148
|
}
|
|
142
|
-
|
|
143
|
-
&[src$='svg'] {
|
|
144
|
-
display: block !important;
|
|
145
|
-
height: 66vw !important;
|
|
146
|
-
max-width: 100% !important;
|
|
147
|
-
min-width: 200px !important;
|
|
148
|
-
width: 42vw !important;
|
|
149
|
-
}
|
|
150
149
|
}
|
|
151
150
|
}
|
|
152
151
|
}
|