@blockquote-web-components/blockquote-base-embedded-webview 1.12.7 → 1.12.8
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 +40 -17
- package/src/styles/blockquote-base-embedded-webview-element-styles.css.js +21 -19
- package/src/styles/blockquote-base-embedded-webview-resize-styles.css.js +186 -135
- package/src/styles/blockquote-base-embedded-webview-size-styles.css.js +139 -114
- package/src/styles/blockquote-base-embedded-webview-styles.css.js +151 -139
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-base-embedded-webview",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.8",
|
|
4
4
|
"description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -64,34 +64,31 @@
|
|
|
64
64
|
"!/**/*.scss"
|
|
65
65
|
],
|
|
66
66
|
"scripts": {
|
|
67
|
-
"analyze": "cem analyze --litelement --globs \"src/**/*.{js,ts}\" \"index.js\"",
|
|
67
|
+
"analyze": "cem analyze --litelement --globs \"{src,define}/**/*.{js,ts}\" \"index.js\"",
|
|
68
68
|
"build": "echo \"This is not a TypeScript project, so no need to build.\"",
|
|
69
69
|
"dev:vite": "vite build",
|
|
70
70
|
"format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
|
|
71
71
|
"format:eslint": "eslint . --fix",
|
|
72
|
-
"format:prettier": "prettier \"**/*.{js,ts,
|
|
73
|
-
"format:stylelint": "stylelint \"
|
|
72
|
+
"format:prettier": "prettier \"**/*.{js,ts,css,scss,html,json}\" --write --ignore-path .prettierignore",
|
|
73
|
+
"format:stylelint": "stylelint \"{demo,src}/**/*.{js,ts,css,scss,html}\" --fix --ignore-path .prettierignore",
|
|
74
74
|
"postinstall": "npm run sort:package",
|
|
75
|
-
"lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
|
|
76
|
-
"lint:eslint": "eslint .",
|
|
77
|
-
"lint:prettier": "prettier \"**/*.{js,ts,json,html}\" --check --ignore-path .prettierignore",
|
|
78
|
-
"lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .prettierignore",
|
|
79
75
|
"preview:vite": "vite preview",
|
|
80
76
|
"sass:watch": "sass-style-template",
|
|
81
77
|
"sort:package": "npx sort-package-json",
|
|
82
|
-
"start": "concurrently -k -r \"npm:
|
|
78
|
+
"start": "concurrently -k -r \"npm:vite\" \"npm:sass:watch\"",
|
|
83
79
|
"test": "vitest --run --browser.headless",
|
|
84
80
|
"test:watch": "vitest",
|
|
85
81
|
"vite": "vite"
|
|
86
82
|
},
|
|
87
83
|
"lint-staged": {
|
|
88
84
|
"**/*.{js,ts,html}": [
|
|
89
|
-
"npm run format
|
|
85
|
+
"npm run format"
|
|
90
86
|
],
|
|
91
|
-
"**/*.
|
|
87
|
+
"**/*.json": [
|
|
92
88
|
"npm run format:prettier"
|
|
93
89
|
],
|
|
94
90
|
"**/*.{scss,css}": [
|
|
91
|
+
"npm run format:prettier",
|
|
95
92
|
"npm run format:stylelint"
|
|
96
93
|
]
|
|
97
94
|
},
|
|
@@ -106,31 +103,57 @@
|
|
|
106
103
|
{
|
|
107
104
|
"files": "*.{scss,css}",
|
|
108
105
|
"options": {
|
|
109
|
-
"printWidth": 280,
|
|
110
106
|
"singleQuote": false
|
|
111
107
|
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"files": "*.json",
|
|
111
|
+
"options": {
|
|
112
|
+
"parser": "json-stringify"
|
|
113
|
+
}
|
|
112
114
|
}
|
|
113
115
|
]
|
|
114
116
|
},
|
|
115
117
|
"stylelint": {
|
|
116
118
|
"extends": "stylelint-config-standard-scss",
|
|
119
|
+
"allowEmptyInput": true,
|
|
117
120
|
"rules": {
|
|
118
121
|
"custom-property-pattern": null,
|
|
119
122
|
"no-duplicate-selectors": null,
|
|
120
123
|
"color-function-notation": null,
|
|
121
|
-
"alpha-value-notation": null
|
|
122
|
-
|
|
124
|
+
"alpha-value-notation": null,
|
|
125
|
+
"media-feature-name-no-unknown": null,
|
|
126
|
+
"comment-empty-line-before": null,
|
|
127
|
+
"declaration-empty-line-before": null,
|
|
128
|
+
"property-no-vendor-prefix": null,
|
|
129
|
+
"selector-attribute-quotes": null,
|
|
130
|
+
"value-no-vendor-prefix": null
|
|
131
|
+
},
|
|
132
|
+
"overrides": [
|
|
133
|
+
{
|
|
134
|
+
"files": [
|
|
135
|
+
"**/*.html"
|
|
136
|
+
],
|
|
137
|
+
"customSyntax": "postcss-html"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"files": [
|
|
141
|
+
"**/*.{ts,js}"
|
|
142
|
+
],
|
|
143
|
+
"customSyntax": "postcss-lit"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
123
146
|
},
|
|
124
147
|
"dependencies": {
|
|
125
148
|
"lit": "^3.2.1"
|
|
126
149
|
},
|
|
127
150
|
"devDependencies": {
|
|
128
|
-
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.
|
|
129
|
-
"@blockquote-web-components/blockquote-foundations-sass": "^1.1.
|
|
151
|
+
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.1",
|
|
152
|
+
"@blockquote-web-components/blockquote-foundations-sass": "^1.1.6"
|
|
130
153
|
},
|
|
131
154
|
"publishConfig": {
|
|
132
155
|
"access": "public"
|
|
133
156
|
},
|
|
134
157
|
"customElements": "custom-elements.json",
|
|
135
|
-
"gitHead": "
|
|
158
|
+
"gitHead": "6be5182ac44e3e4c3b924f6b5ef5533e7b80790c"
|
|
136
159
|
}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {css} from 'lit';
|
|
2
2
|
|
|
3
|
-
export const styles = css
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
export const styles = css`
|
|
4
|
+
:host,
|
|
5
|
+
::slotted([slot='embedded']) {
|
|
6
|
+
display: block;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
margin: 0;
|
|
11
|
+
border: 0;
|
|
12
|
+
}
|
|
12
13
|
|
|
13
|
-
:host([hidden]),
|
|
14
|
-
[hidden] {
|
|
15
|
-
|
|
16
|
-
}
|
|
14
|
+
:host([hidden]),
|
|
15
|
+
[hidden] {
|
|
16
|
+
display: none !important;
|
|
17
|
+
}
|
|
17
18
|
|
|
18
|
-
*,
|
|
19
|
-
*::before,
|
|
20
|
-
*::after {
|
|
21
|
-
|
|
22
|
-
}
|
|
19
|
+
*,
|
|
20
|
+
*::before,
|
|
21
|
+
*::after {
|
|
22
|
+
box-sizing: inherit;
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
@@ -1,135 +1,186 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export const styles = css
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
.resizer
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
.resizer-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
.resizer-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
.resizer-se
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
.resizer-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
:
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
1
|
+
import {css} from 'lit';
|
|
2
|
+
|
|
3
|
+
export const styles = css`
|
|
4
|
+
:host {
|
|
5
|
+
--__resizer-factor: calc(1.25rem * var(--blockquote-base-embedded-webview-resize-factor, 1));
|
|
6
|
+
--_rect-min-width: var(--blockquote-base-embedded-webview-resize-rect-min-width, 18.75rem);
|
|
7
|
+
--_rect-min-height: var(--blockquote-base-embedded-webview-resize-rect-min-height, 9.375rem);
|
|
8
|
+
--_rect-max-width: var(--blockquote-base-embedded-webview-resize-rect-max-width, 100%);
|
|
9
|
+
--_rect-max-height: var(--blockquote-base-embedded-webview-resize-rect-max-height, 100%);
|
|
10
|
+
--_rect-width: var(--blockquote-base-embedded-webview-resize-rect-width, 40rem);
|
|
11
|
+
--_rect-height: var(--blockquote-base-embedded-webview-resize-rect-height, 22.5rem);
|
|
12
|
+
--_resizer-bgcolor: var(
|
|
13
|
+
--blockquote-base-embedded-webview-resize-resizer-bgcolor,
|
|
14
|
+
rgb(234, 234, 234)
|
|
15
|
+
);
|
|
16
|
+
--_resizer-bgcolor-hover: var(
|
|
17
|
+
--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover,
|
|
18
|
+
rgb(220, 220, 220)
|
|
19
|
+
);
|
|
20
|
+
--_resizer-bgimage-ew-hover: var(
|
|
21
|
+
--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover,
|
|
22
|
+
linear-gradient(
|
|
23
|
+
0deg,
|
|
24
|
+
rgba(220, 220, 220, 0.2),
|
|
25
|
+
rgba(220, 220, 220, 1) 50%,
|
|
26
|
+
rgba(220, 220, 220, 0.2)
|
|
27
|
+
)
|
|
28
|
+
);
|
|
29
|
+
--_resizer-bgimage-s-hover: var(
|
|
30
|
+
--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover,
|
|
31
|
+
linear-gradient(
|
|
32
|
+
90deg,
|
|
33
|
+
rgba(220, 220, 220, 0.2),
|
|
34
|
+
rgba(220, 220, 220, 1) 50%,
|
|
35
|
+
rgba(220, 220, 220, 0.2)
|
|
36
|
+
)
|
|
37
|
+
);
|
|
38
|
+
contain: content;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
align-items: center;
|
|
42
|
+
height: inherit;
|
|
43
|
+
padding: calc(var(--__resizer-factor) * 1) 0 calc(var(--__resizer-factor) * 2);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([hidden]),
|
|
47
|
+
[hidden] {
|
|
48
|
+
display: none !important;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
*,
|
|
52
|
+
*::before,
|
|
53
|
+
*::after {
|
|
54
|
+
box-sizing: inherit;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.rect {
|
|
58
|
+
position: relative;
|
|
59
|
+
align-self: center;
|
|
60
|
+
min-width: var(--_rect-min-width);
|
|
61
|
+
min-height: var(--_rect-min-height);
|
|
62
|
+
max-width: var(--_rect-max-width);
|
|
63
|
+
max-height: var(--_rect-max-height);
|
|
64
|
+
width: var(--_rect-width);
|
|
65
|
+
height: var(--_rect-height);
|
|
66
|
+
transform: translateZ(0);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.resizer {
|
|
70
|
+
/* https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src */
|
|
71
|
+
display: block;
|
|
72
|
+
position: absolute;
|
|
73
|
+
background-color: var(--_resizer-bgcolor);
|
|
74
|
+
width: 100%;
|
|
75
|
+
height: 100%;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.resizer::after {
|
|
79
|
+
content: url("data:image/svg+xml,%0A%3Csvg width='6' height='26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='26' rx='1' fill='%23848282'/%3E%3Crect x='4' width='2' height='26' rx='1' fill='%23848282'/%3E%3C/svg%3E");
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 50%;
|
|
82
|
+
left: 50%;
|
|
83
|
+
transform: translateX(-50%);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.resizer-n {
|
|
87
|
+
height: calc(var(--__resizer-factor) / 4);
|
|
88
|
+
top: calc(var(--__resizer-factor) / 4 * -1);
|
|
89
|
+
left: calc(var(--__resizer-factor) * -1);
|
|
90
|
+
width: calc(100% + var(--__resizer-factor) * 2);
|
|
91
|
+
border-top-left-radius: calc(var(--__resizer-factor) / 10);
|
|
92
|
+
border-top-right-radius: calc(var(--__resizer-factor) / 10);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.resizer-n::after {
|
|
96
|
+
content: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.resizer-se {
|
|
100
|
+
cursor: nwse-resize;
|
|
101
|
+
border-bottom-right-radius: calc(var(--__resizer-factor) / 10);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.resizer-se::after {
|
|
105
|
+
transform: translate(-50%, -50%);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.resizer-sw {
|
|
109
|
+
cursor: nesw-resize;
|
|
110
|
+
border-bottom-left-radius: calc(var(--__resizer-factor) / 10);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.resizer-sw::after {
|
|
114
|
+
transform: translate(-50%, -50%) translateY(-0.0938rem) rotate(90deg);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.resizer-se,
|
|
118
|
+
.resizer-e {
|
|
119
|
+
right: calc(var(--__resizer-factor) * -1);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.resizer-se,
|
|
123
|
+
.resizer-sw,
|
|
124
|
+
.resizer-s {
|
|
125
|
+
bottom: calc(var(--__resizer-factor) * -1);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.resizer-w,
|
|
129
|
+
.resizer-sw {
|
|
130
|
+
left: calc(var(--__resizer-factor) * -1);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.resizer-se,
|
|
134
|
+
.resizer-sw {
|
|
135
|
+
height: var(--__resizer-factor);
|
|
136
|
+
width: var(--__resizer-factor);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.resizer-se::after,
|
|
140
|
+
.resizer-sw::after {
|
|
141
|
+
content: url("data:image/svg+xml,%0A%3Csvg width='13' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='%23848282'%3E%3Crect x='-.195' y='10.775' width='15.566' height='2' rx='1' transform='rotate(-45 -.195 10.775)'/%3E%3Crect x='5.346' y='11.241' width='8.401' height='2' rx='1' transform='rotate(-45 5.346 11.24)'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath fill='%23fff' d='M0 0h13v13H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.resizer-se:hover,
|
|
145
|
+
.resizer-sw:hover {
|
|
146
|
+
background-color: var(--_resizer-bgcolor-hover);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.resizer-s {
|
|
150
|
+
cursor: ns-resize;
|
|
151
|
+
height: var(--__resizer-factor);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.resizer-s::after {
|
|
155
|
+
content: url("data:image/svg+xml,%0A%3Csvg width='26' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='26' height='2' rx='1' fill='%23848282'/%3E%3Crect y='4' width='26' height='2' rx='1' fill='%23848282'/%3E%3C/svg%3E");
|
|
156
|
+
transform: translate(-50%, -50%) translateY(-0.1875rem);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.resizer-s:hover {
|
|
160
|
+
background-image: var(--_resizer-bgimage-s-hover);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.resizer-e,
|
|
164
|
+
.resizer-w {
|
|
165
|
+
cursor: ew-resize;
|
|
166
|
+
width: var(--__resizer-factor);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.resizer-e:hover,
|
|
170
|
+
.resizer-w:hover {
|
|
171
|
+
background-image: var(--_resizer-bgimage-ew-hover);
|
|
172
|
+
background-position: bottom;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
:host([resizing]),
|
|
176
|
+
:host([resizing]) ::slotted(*) {
|
|
177
|
+
cursor: move;
|
|
178
|
+
-webkit-user-select: none;
|
|
179
|
+
-moz-user-select: none;
|
|
180
|
+
user-select: none;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
:host([resizing]) ::slotted(*) {
|
|
184
|
+
pointer-events: none;
|
|
185
|
+
}
|
|
186
|
+
`;
|
|
@@ -1,114 +1,139 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export const styles = css
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
.rect
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
button
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
1
|
+
import {css} from 'lit';
|
|
2
|
+
|
|
3
|
+
export const styles = css`
|
|
4
|
+
:host {
|
|
5
|
+
--_host-color: var(--blockquote-base-embedded-webview-size-color, inherit);
|
|
6
|
+
--_rect-height: var(--blockquote-base-embedded-webview-size-rect-height, 1.125rem);
|
|
7
|
+
--_rect-size: var(--blockquote-base-embedded-webview-size-rect-size, 0.6875rem);
|
|
8
|
+
--_button-border-color: var(
|
|
9
|
+
--blockquote-base-embedded-webview-size-button-border-color,
|
|
10
|
+
rgb(184, 184, 184)
|
|
11
|
+
);
|
|
12
|
+
--_button-bgcolor: var(
|
|
13
|
+
--blockquote-base-embedded-webview-size-button-bgcolor,
|
|
14
|
+
rgb(234, 234, 234)
|
|
15
|
+
);
|
|
16
|
+
--_button-bgcolor-hover: var(
|
|
17
|
+
--blockquote-base-embedded-webview-size-button-bgcolor-hover,
|
|
18
|
+
rgb(220, 220, 220)
|
|
19
|
+
);
|
|
20
|
+
--_button-bgcolor-selected-hover: var(
|
|
21
|
+
--blockquote-base-embedded-webview-size-button-bgcolor-selected-hover,
|
|
22
|
+
rgb(210, 210, 210)
|
|
23
|
+
);
|
|
24
|
+
color: var(--_host-color);
|
|
25
|
+
display: block;
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
pointer-events: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host([hidden]),
|
|
31
|
+
[hidden] {
|
|
32
|
+
display: none !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
*,
|
|
36
|
+
*::before,
|
|
37
|
+
*::after {
|
|
38
|
+
box-sizing: inherit;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
button {
|
|
42
|
+
-webkit-appearance: none;
|
|
43
|
+
-moz-appearance: none;
|
|
44
|
+
appearance: none;
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
border: none;
|
|
47
|
+
color: inherit;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
display: inline-block;
|
|
50
|
+
pointer-events: auto;
|
|
51
|
+
font: inherit;
|
|
52
|
+
margin: 0;
|
|
53
|
+
padding: 0;
|
|
54
|
+
height: inherit;
|
|
55
|
+
text-align: inherit;
|
|
56
|
+
text-decoration: none;
|
|
57
|
+
text-transform: inherit;
|
|
58
|
+
text-shadow: inherit;
|
|
59
|
+
letter-spacing: inherit;
|
|
60
|
+
word-spacing: inherit;
|
|
61
|
+
width: auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.rect {
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
height: var(--_rect-height);
|
|
67
|
+
position: relative;
|
|
68
|
+
display: flex;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
align-items: center;
|
|
71
|
+
font-size: var(--_rect-size);
|
|
72
|
+
white-space: nowrap;
|
|
73
|
+
text-align: center;
|
|
74
|
+
letter-spacing: 0.0625rem;
|
|
75
|
+
box-shadow: 0 1px 0 0 var(--_button-bgcolor);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.rect [aria-hidden='true'] {
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
letter-spacing: inherit;
|
|
81
|
+
position: absolute;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.rect [aria-disabled='true'] {
|
|
85
|
+
opacity: 0.4;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.rect [aria-disabled='true']::after {
|
|
89
|
+
content: '';
|
|
90
|
+
display: block;
|
|
91
|
+
height: 1px;
|
|
92
|
+
width: calc(100% + 2rem);
|
|
93
|
+
position: absolute;
|
|
94
|
+
left: 50%;
|
|
95
|
+
top: 50%;
|
|
96
|
+
transform: translate(-50%, -50%);
|
|
97
|
+
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
button {
|
|
101
|
+
position: absolute;
|
|
102
|
+
background-color: var(--_button-bgcolor);
|
|
103
|
+
border-left: 1px solid var(--_button-border-color);
|
|
104
|
+
border-right: 1px solid var(--_button-border-color);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
button span {
|
|
108
|
+
opacity: 0;
|
|
109
|
+
pointer-events: none;
|
|
110
|
+
-webkit-user-select: none;
|
|
111
|
+
-moz-user-select: none;
|
|
112
|
+
user-select: none;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
button:hover {
|
|
116
|
+
background-color: var(--_button-bgcolor-hover);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
button[data-selected],
|
|
120
|
+
button[data-selected] ~ button {
|
|
121
|
+
background-color: var(--_button-bgcolor-hover);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
button:hover ~ button {
|
|
125
|
+
background-color: transparent;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
button:not([data-selected]):hover span {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
button:not([data-selected]):hover ~ span {
|
|
133
|
+
visibility: hidden;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
button[data-selected] ~ button:hover {
|
|
137
|
+
background-color: var(--_button-bgcolor-selected-hover);
|
|
138
|
+
}
|
|
139
|
+
`;
|
|
@@ -1,139 +1,151 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export const styles = css
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
[role=heading]
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
1
|
+
import {css} from 'lit';
|
|
2
|
+
|
|
3
|
+
export const styles = css`
|
|
4
|
+
:host {
|
|
5
|
+
--_host-color: var(--blockquote-base-embedded-webview-color, rgb(32, 32, 32));
|
|
6
|
+
--_main-bgcolor: var(--blockquote-base-embedded-webview-main-bgcolor, rgb(250, 250, 250));
|
|
7
|
+
--_select-bgcolor: var(--blockquote-base-embedded-webview-select-bgcolor, rgb(222, 222, 222));
|
|
8
|
+
--_select-transition: var(
|
|
9
|
+
--blockquote-base-embedded-webview-select-transition,
|
|
10
|
+
border-bottom 196ms ease-out,
|
|
11
|
+
var(--blockquote-base-embedded-webview-select-transition, border-bottom 196ms ease-out)
|
|
12
|
+
);
|
|
13
|
+
--blockquote-base-embedded-webview-resize-rect-width: 40rem; /* 40rem */
|
|
14
|
+
--blockquote-base-embedded-webview-resize-rect-height: 22.5rem; /* 22.5rem */
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
color: var(--_host-color);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host([hidden]),
|
|
24
|
+
[hidden] {
|
|
25
|
+
display: none !important;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.sr-only {
|
|
29
|
+
position: absolute;
|
|
30
|
+
width: 1px;
|
|
31
|
+
height: 1px;
|
|
32
|
+
padding: 0;
|
|
33
|
+
margin: -1px;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
clip: rect(0, 0, 0, 0);
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
border: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.main {
|
|
41
|
+
contain: content;
|
|
42
|
+
flex: 1;
|
|
43
|
+
background-color: var(--_main-bgcolor);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([limit-height]) .main {
|
|
47
|
+
height: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
*,
|
|
51
|
+
*::before,
|
|
52
|
+
*::after {
|
|
53
|
+
box-sizing: inherit;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
header > div {
|
|
57
|
+
position: relative;
|
|
58
|
+
max-width: 80rem;
|
|
59
|
+
margin: 0 auto;
|
|
60
|
+
padding: 0.5rem 1.5rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[role='heading'] {
|
|
64
|
+
font-size: 1.25rem;
|
|
65
|
+
margin-bottom: 0.5rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[role='heading'] + div {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.open-externally {
|
|
74
|
+
width: 1rem;
|
|
75
|
+
display: inline-block;
|
|
76
|
+
margin-left: 1rem;
|
|
77
|
+
color: inherit;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.open-externally svg {
|
|
81
|
+
vertical-align: bottom;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.select {
|
|
85
|
+
display: inline-grid;
|
|
86
|
+
grid-template-areas: select;
|
|
87
|
+
align-items: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.select > * {
|
|
91
|
+
grid-area: select;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.select svg {
|
|
95
|
+
width: 0.875rem;
|
|
96
|
+
justify-self: end;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.select select {
|
|
101
|
+
-webkit-appearance: none;
|
|
102
|
+
-moz-appearance: none;
|
|
103
|
+
appearance: none;
|
|
104
|
+
color: inherit;
|
|
105
|
+
font: inherit;
|
|
106
|
+
background-color: transparent;
|
|
107
|
+
border: none;
|
|
108
|
+
border-bottom: 0.125rem solid var(--_select-bgcolor);
|
|
109
|
+
padding: 0.25em 1em 0.25em 0;
|
|
110
|
+
margin: 0;
|
|
111
|
+
width: 100%;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
outline: none;
|
|
114
|
+
border-radius: 0;
|
|
115
|
+
min-width: 10ch;
|
|
116
|
+
max-width: 18ch;
|
|
117
|
+
white-space: nowrap;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
text-overflow: ellipsis;
|
|
120
|
+
transition: var(--_select-transition);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.select select:hover,
|
|
124
|
+
.select select:focus {
|
|
125
|
+
border-bottom-color: currentcolor;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.description {
|
|
129
|
+
margin: 0.5rem 0 1rem;
|
|
130
|
+
font-size: 0.875rem;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.description:empty {
|
|
134
|
+
visibility: hidden;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.read-data-pos {
|
|
138
|
+
font-size: 0.875rem;
|
|
139
|
+
letter-spacing: 0.0156rem;
|
|
140
|
+
position: fixed;
|
|
141
|
+
z-index: 1;
|
|
142
|
+
right: 0.375rem;
|
|
143
|
+
top: 0.3125rem;
|
|
144
|
+
opacity: 0;
|
|
145
|
+
transition: opacity 90ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
blockquote-base-embedded-webview-resize {
|
|
149
|
+
overflow-x: hidden;
|
|
150
|
+
}
|
|
151
|
+
`;
|