@jaisocx/css-code-snippet 1.4.2 → 1.4.3
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.
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" class="jsx theme_visible_height theme_darkmode salad">
|
|
2
|
+
<html lang="en" id="css_code_snippet_preview" class="jsx theme_visible_height theme_darkmode salad">
|
|
3
3
|
<head>
|
|
4
4
|
|
|
5
5
|
<title> CssCodeSnippet </title>
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
11
11
|
|
|
12
12
|
|
|
13
|
+
|
|
13
14
|
<link
|
|
14
15
|
id="icon_jaisocx"
|
|
15
16
|
rel="icon"
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
/>
|
|
33
34
|
|
|
34
35
|
|
|
36
|
+
|
|
35
37
|
<!--# STYLES CssCodeSnippet and theme_base -->
|
|
36
38
|
<link
|
|
37
39
|
fetchpriority="medium"
|
|
@@ -49,20 +51,19 @@
|
|
|
49
51
|
href="MediaAndStyles/CssCodeSnippet_main_resolved.css"
|
|
50
52
|
/>
|
|
51
53
|
|
|
52
|
-
<style>
|
|
53
54
|
|
|
54
|
-
.jsx {
|
|
55
|
-
--jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
|
|
56
55
|
|
|
57
|
-
|
|
58
|
-
--jsx--css-clean-start-2--h2--font-size: 0.9rem;
|
|
59
|
-
--jsx--css-clean-start-2--h3--font-size: 0.83rem;
|
|
60
|
-
|
|
61
|
-
--jsx--css-clean-start-2--h2--font-weight: 500;
|
|
56
|
+
<style name="theme_turn_on">
|
|
62
57
|
|
|
58
|
+
.jsx {
|
|
63
59
|
--theme-button-width: fit-content;
|
|
64
60
|
}
|
|
65
61
|
|
|
62
|
+
.jsx button {
|
|
63
|
+
background-color: transparent;
|
|
64
|
+
text-align: left;
|
|
65
|
+
}
|
|
66
|
+
|
|
66
67
|
.jsx themebuttons {
|
|
67
68
|
width: fit-content;
|
|
68
69
|
display: grid;
|
|
@@ -89,19 +90,13 @@
|
|
|
89
90
|
border-bottom-color: var(--clean-start__text-color);
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
|
|
93
|
-
background-color: transparent;
|
|
94
|
-
text-align: left;
|
|
95
|
-
}
|
|
93
|
+
</style>
|
|
96
94
|
|
|
97
|
-
#tooltip-button {
|
|
98
|
-
font-family: fantasy;
|
|
99
|
-
}
|
|
100
95
|
|
|
101
96
|
|
|
97
|
+
<style name="theme_visible_eight">
|
|
102
98
|
|
|
103
|
-
.jsx.theme_visible_height
|
|
104
|
-
padding: 0 1rem 0 1rem;
|
|
99
|
+
.jsx.theme_visible_height main > content {
|
|
105
100
|
|
|
106
101
|
overflow-y: hidden;
|
|
107
102
|
|
|
@@ -118,7 +113,7 @@
|
|
|
118
113
|
align-items: stretch;
|
|
119
114
|
}
|
|
120
115
|
|
|
121
|
-
.jsx.theme_visible_height
|
|
116
|
+
.jsx.theme_visible_height main > content > * {
|
|
122
117
|
flex-grow: 0;
|
|
123
118
|
flex-shrink: 1;
|
|
124
119
|
}
|
|
@@ -135,7 +130,7 @@
|
|
|
135
130
|
flex-shrink: 1;
|
|
136
131
|
}
|
|
137
132
|
|
|
138
|
-
.jsx.theme_visible_height
|
|
133
|
+
.jsx.theme_visible_height main > page_signed {
|
|
139
134
|
flex-shrink: 1;
|
|
140
135
|
|
|
141
136
|
display: flex;
|
|
@@ -143,7 +138,7 @@
|
|
|
143
138
|
justify-content: flex-start;
|
|
144
139
|
align-items: center;
|
|
145
140
|
|
|
146
|
-
|
|
141
|
+
margin: 0 0 0 0;
|
|
147
142
|
|
|
148
143
|
height: 6rem;
|
|
149
144
|
min-height: 6rem;
|
|
@@ -151,7 +146,7 @@
|
|
|
151
146
|
width: 100%;
|
|
152
147
|
}
|
|
153
148
|
|
|
154
|
-
.jsx.theme_visible_height
|
|
149
|
+
.jsx.theme_visible_height main > page_signed text {
|
|
155
150
|
display: flex;
|
|
156
151
|
flex-direction: row;
|
|
157
152
|
justify-content: flex-start;
|
|
@@ -173,6 +168,51 @@
|
|
|
173
168
|
|
|
174
169
|
|
|
175
170
|
|
|
171
|
+
<style name="css clean start overrides for this site">
|
|
172
|
+
|
|
173
|
+
.jsx#css_code_snippet_preview {
|
|
174
|
+
--jsx--css-clean-start-2--h1--font-size: 0.9rem;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
</style>
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
<style name="css clean start lite mobile portrait">
|
|
182
|
+
|
|
183
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
|
|
184
|
+
only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
|
|
185
|
+
|
|
186
|
+
.jsx.theme_visible_height {
|
|
187
|
+
|
|
188
|
+
--responsive_size: responsive_size_til_h03_tablet_s_portrait;
|
|
189
|
+
|
|
190
|
+
--jsx--css-clean-start-2--site--min-width: 100%;
|
|
191
|
+
--jsx--css-clean-start-2--site--max-width: 100%;
|
|
192
|
+
--jsx--css-clean-start-2--site--width: 100%;
|
|
193
|
+
|
|
194
|
+
--jsx--css-clean-start-2--h1--font-size: 1rem;
|
|
195
|
+
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.jsx.theme_visible_height h2,
|
|
199
|
+
.jsx.theme_visible_height h3,
|
|
200
|
+
.jsx.theme_visible_height description {
|
|
201
|
+
display: none;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.jsx.theme_visible_height main > page_signed {
|
|
205
|
+
height: 3rem;
|
|
206
|
+
min-height: 3rem;
|
|
207
|
+
max-height: 3rem;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
</style>
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
176
216
|
<style>
|
|
177
217
|
|
|
178
218
|
.jsx .CodeSnippetHolder#code-snippet-example,
|
|
@@ -194,6 +234,21 @@
|
|
|
194
234
|
--code-snippet-tool--overflow-y: auto;
|
|
195
235
|
}
|
|
196
236
|
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
|
|
240
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
|
|
241
|
+
|
|
242
|
+
.jsx .CodeSnippetHolder#code-snippet-example,
|
|
243
|
+
.jsx .CodeSnippetHolder#code-snippet-example-thin {
|
|
244
|
+
|
|
245
|
+
--code-snippet-tool--overflow-x: hidden;
|
|
246
|
+
--code-snippet-tool--width: 100%;
|
|
247
|
+
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
}
|
|
251
|
+
|
|
197
252
|
</style>
|
|
198
253
|
|
|
199
254
|
</head>
|
package/index.preview.html
CHANGED
|
@@ -49,154 +49,210 @@
|
|
|
49
49
|
href="MediaAndStyles/CssCodeSnippet_main_resolved.css"
|
|
50
50
|
/>
|
|
51
51
|
|
|
52
|
-
<style>
|
|
53
52
|
|
|
54
|
-
.jsx {
|
|
55
|
-
--jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
|
|
56
53
|
|
|
57
|
-
|
|
58
|
-
--jsx--css-clean-start-2--h2--font-size: 0.9rem;
|
|
59
|
-
--jsx--css-clean-start-2--h3--font-size: 0.83rem;
|
|
54
|
+
<style name="theme_turn_on">
|
|
60
55
|
|
|
61
|
-
|
|
56
|
+
.jsx {
|
|
57
|
+
--theme-button-width: fit-content;
|
|
58
|
+
}
|
|
62
59
|
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
.jsx button {
|
|
61
|
+
background-color: transparent;
|
|
62
|
+
text-align: left;
|
|
63
|
+
}
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
.jsx themebuttons {
|
|
66
|
+
width: fit-content;
|
|
67
|
+
display: grid;
|
|
68
|
+
grid-auto-flow: column;
|
|
69
|
+
column-gap: 3rem;
|
|
70
|
+
margin: 0.9rem 0px 1.6rem 0px;
|
|
71
|
+
}
|
|
73
72
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
.jsx themebuttons button {
|
|
74
|
+
width: var(--theme-button-width);
|
|
75
|
+
}
|
|
77
76
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
77
|
+
.current::after {
|
|
78
|
+
content: "";
|
|
79
|
+
position: absolute;
|
|
80
|
+
bottom: -0.3rem;
|
|
81
|
+
left: 0;
|
|
82
|
+
width: 100%;
|
|
83
|
+
height: 0;
|
|
84
|
+
max-height: 0;
|
|
85
|
+
overflow-y: hidden;
|
|
86
|
+
border-bottom-width: 0.14rem;
|
|
87
|
+
border-bottom-style: solid;
|
|
88
|
+
border-bottom-color: var(--clean-start__text-color);
|
|
89
|
+
}
|
|
91
90
|
|
|
92
|
-
|
|
93
|
-
background-color: transparent;
|
|
94
|
-
text-align: left;
|
|
95
|
-
}
|
|
91
|
+
</style>
|
|
96
92
|
|
|
97
|
-
#tooltip-button {
|
|
98
|
-
font-family: fantasy;
|
|
99
|
-
}
|
|
100
93
|
|
|
101
94
|
|
|
95
|
+
<style name="theme_visible_eight">
|
|
102
96
|
|
|
103
|
-
|
|
104
|
-
padding: 0 1rem 0 1rem;
|
|
97
|
+
.jsx.theme_visible_height main > content {
|
|
105
98
|
|
|
106
|
-
|
|
99
|
+
overflow-y: hidden;
|
|
107
100
|
|
|
108
|
-
|
|
109
|
-
|
|
101
|
+
min-height: unset;
|
|
102
|
+
height: unset;
|
|
110
103
|
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
flex-grow: 1;
|
|
105
|
+
flex-shrink: 1;
|
|
113
106
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: column;
|
|
109
|
+
flex-basis: auto;
|
|
110
|
+
justify-content: stretch;
|
|
111
|
+
align-items: stretch;
|
|
112
|
+
}
|
|
120
113
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
114
|
+
.jsx.theme_visible_height main > content > * {
|
|
115
|
+
flex-grow: 0;
|
|
116
|
+
flex-shrink: 1;
|
|
117
|
+
}
|
|
125
118
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
119
|
+
.jsx.theme_visible_height .CodeSnippetHolder {
|
|
120
|
+
--code-snippet-tool--overflow-y: auto;
|
|
121
|
+
--code-snippet-tool--height: unset;
|
|
129
122
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
123
|
+
min-height: 0;
|
|
124
|
+
max-height: unset;
|
|
125
|
+
height: unset;
|
|
133
126
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
127
|
+
flex-grow: 1;
|
|
128
|
+
flex-shrink: 1;
|
|
129
|
+
}
|
|
137
130
|
|
|
138
|
-
|
|
139
|
-
|
|
131
|
+
.jsx.theme_visible_height main > page_signed {
|
|
132
|
+
flex-shrink: 1;
|
|
140
133
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
134
|
+
display: flex;
|
|
135
|
+
flex-direction: row;
|
|
136
|
+
justify-content: flex-start;
|
|
137
|
+
align-items: center;
|
|
145
138
|
|
|
146
|
-
|
|
139
|
+
margin: 0 0 0 0;
|
|
147
140
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
141
|
+
height: 6rem;
|
|
142
|
+
min-height: 6rem;
|
|
143
|
+
max-height: 6rem;
|
|
144
|
+
width: 100%;
|
|
145
|
+
}
|
|
153
146
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
147
|
+
.jsx.theme_visible_height main > page_signed text {
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: row;
|
|
150
|
+
justify-content: flex-start;
|
|
151
|
+
align-items: center;
|
|
159
152
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
153
|
+
height: 100%;
|
|
154
|
+
min-height: 100%;
|
|
155
|
+
max-height: 100%;
|
|
163
156
|
|
|
164
|
-
|
|
157
|
+
width: 100%;
|
|
165
158
|
|
|
166
|
-
|
|
159
|
+
padding: 0 1rem 0 1rem;
|
|
167
160
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
161
|
+
color: var(--code-snippet--text-color);
|
|
162
|
+
background-color: var(--code-snippet-tool--border-color);
|
|
163
|
+
}
|
|
171
164
|
|
|
172
|
-
|
|
165
|
+
</style>
|
|
173
166
|
|
|
174
167
|
|
|
175
168
|
|
|
176
|
-
|
|
169
|
+
<style name="css clean start overrides for this site">
|
|
170
|
+
|
|
171
|
+
.jsx#css_code_snippet_preview {
|
|
172
|
+
--jsx--css-clean-start-2--h1--font-size: 0.9rem;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
</style>
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
<style name="css clean start lite mobile portrait">
|
|
180
|
+
|
|
181
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
|
|
182
|
+
only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
|
|
183
|
+
|
|
184
|
+
.jsx.theme_visible_height {
|
|
185
|
+
|
|
186
|
+
--responsive_size: responsive_size_til_h03_tablet_s_portrait;
|
|
187
|
+
|
|
188
|
+
--jsx--css-clean-start-2--site--min-width: 100%;
|
|
189
|
+
--jsx--css-clean-start-2--site--max-width: 100%;
|
|
190
|
+
--jsx--css-clean-start-2--site--width: 100%;
|
|
191
|
+
|
|
192
|
+
--jsx--css-clean-start-2--h1--font-size: 1rem;
|
|
177
193
|
|
|
178
|
-
.jsx .CodeSnippetHolder#code-snippet-example,
|
|
179
|
-
.jsx .CodeSnippetHolder#code-snippet-example-thin {
|
|
180
|
-
/* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
|
|
181
|
-
on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
|
|
182
|
-
--lines-numbers--content: var(--lines-numbers--content--99);
|
|
183
|
-
--lines-number: 29;
|
|
184
194
|
}
|
|
185
195
|
|
|
186
|
-
.jsx
|
|
187
|
-
|
|
188
|
-
|
|
196
|
+
.jsx.theme_visible_height h2,
|
|
197
|
+
.jsx.theme_visible_height h3,
|
|
198
|
+
.jsx.theme_visible_height description {
|
|
199
|
+
display: none;
|
|
189
200
|
}
|
|
190
201
|
|
|
202
|
+
.jsx.theme_visible_height main > page_signed {
|
|
203
|
+
height: 3rem;
|
|
204
|
+
min-height: 3rem;
|
|
205
|
+
max-height: 3rem;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
</style>
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
<style>
|
|
216
|
+
|
|
217
|
+
.jsx .CodeSnippetHolder#code-snippet-example,
|
|
218
|
+
.jsx .CodeSnippetHolder#code-snippet-example-thin {
|
|
219
|
+
/* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
|
|
220
|
+
on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
|
|
221
|
+
--lines-numbers--content: var(--lines-numbers--content--99);
|
|
222
|
+
--lines-number: 29;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.jsx .CodeSnippetHolder#code-snippet-example {
|
|
226
|
+
--code-snippet-tool--width: fit-content;
|
|
227
|
+
--code-snippet-tool--overflow-y: auto;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.jsx .CodeSnippetHolder#code-snippet-example-thin {
|
|
231
|
+
--code-snippet-tool--width: 28rem;
|
|
232
|
+
--code-snippet-tool--height: 22rem;
|
|
233
|
+
--code-snippet-tool--overflow-y: auto;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
|
|
239
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
|
|
240
|
+
|
|
241
|
+
.jsx .CodeSnippetHolder#code-snippet-example,
|
|
191
242
|
.jsx .CodeSnippetHolder#code-snippet-example-thin {
|
|
192
|
-
|
|
193
|
-
--code-snippet-tool--
|
|
194
|
-
--code-snippet-tool--
|
|
243
|
+
|
|
244
|
+
--code-snippet-tool--overflow-x: hidden;
|
|
245
|
+
--code-snippet-tool--width: 100%;
|
|
246
|
+
|
|
195
247
|
}
|
|
196
248
|
|
|
197
|
-
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
</style>
|
|
252
|
+
|
|
253
|
+
|
|
198
254
|
|
|
199
|
-
|
|
255
|
+
</head>
|
|
200
256
|
|
|
201
257
|
<body>
|
|
202
258
|
|
package/package.json
CHANGED