@leuffen/themejs1 3.0.3 → 3.0.5

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/LICENSE.txt ADDED
@@ -0,0 +1,5 @@
1
+ This software is not free. It is a commercial open source project.
2
+
3
+ Do not use this software for any purposes without purchasing a license.
4
+
5
+ Copyright (c) 2023 Matthias Leuffen, Germany
package/README.md CHANGED
@@ -1,4 +1,7 @@
1
1
  # themejs1
2
+
3
+ ***This open source software package is commercial! Any use without licence is prohibited!***
4
+
2
5
  ThemeJS Version 1
3
6
 
4
7
 
@@ -0,0 +1,38 @@
1
+
2
+
3
+
4
+ /* always add !default to variables */
5
+
6
+
7
+ //$font-family-base: Ubuntu-R,sans-serif;
8
+ $font-family-base: sans-serif !default;
9
+
10
+ $primary: #a3979b !default;
11
+ $success: #22b573 !default;
12
+ $danger: #bf1c0a !default;
13
+ $warning: #bf760a !default;
14
+ $dark: #006837 !default;
15
+
16
+ $background-primary: #b7eaf9 !default;
17
+ $background-accent: #ddd !default;
18
+
19
+ $content-offset-top: 100px !default;
20
+ $content-height-adjustment: 200px !default;
21
+
22
+ $font-size-base: 0.9rem !default;
23
+ $line-height-base: 1.2 !default;
24
+ $paragraph-margin-bottom: 1.5rem !default;
25
+
26
+ $minibar-text-color: black !default;
27
+ $minibar-color: transparent !default;
28
+
29
+ $border-radius: 0 !default;
30
+
31
+
32
+
33
+
34
+ .tjs__navbar-blox {
35
+ --height: 88px !important;
36
+ }
37
+
38
+
package/demo_styles.scss CHANGED
@@ -1,6 +1,11 @@
1
1
 
2
2
 
3
- @import "style";
4
- @import "style_dev";
5
- @import "@leuffen/jodastyle/style_embed";
6
- @import "style_embed";
3
+ @import "variables";
4
+ @import "@leuffen/jodastyle";
5
+ @import "./embed";
6
+ @import "./index";
7
+ @import "./late";
8
+ @import "./theme1";
9
+ @import "./src.dev/dev";
10
+ @import "bootstrap";
11
+
@@ -6,8 +6,6 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no">
7
7
 
8
8
  <link href="/assets/dist/style.css" rel="stylesheet">
9
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
11
9
  <script src="/assets/dist/index.js" type="module"></script>
12
10
 
13
11
 
@@ -0,0 +1,222 @@
1
+ /*!**********************************************************************************************************************************!*\
2
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./theme1.scss ***!
3
+ \**********************************************************************************************************************************/
4
+ /* always add !default to variables */
5
+ .tjs__navbar-blox {
6
+ --height: 88px !important;
7
+ }
8
+
9
+ :root {
10
+ --layout-container: container;
11
+ }
12
+
13
+ .theme1 {
14
+ color: var(--t-text-color);
15
+ background: var(--t-background);
16
+ font-size: 1.1rem;
17
+ --t-background: #f5f5f5;
18
+ --t-background-footer: #fff;
19
+ --t-section-background: transparent;
20
+ --t-section-background-accent: #e7e7eb;
21
+ --t-section-background-primary: #b7eaf9;
22
+ --t-text-background: #fff;
23
+ --t-text-color: #707070;
24
+ --t-text-background-light: var(--t-background);
25
+ --t-text-color-accent: var(--bs-gray-900);
26
+ --t-text-color-primary: var(--bs-primary);
27
+ --t-header-margin: 0 0 20px 0;
28
+ --t-paragraf-margin: 0 0 20px 0;
29
+ --t-section-padding: 40px 0;
30
+ --t-section-inner-padding: 3rem;
31
+ }
32
+ .theme1 section h2 {
33
+ text-transform: uppercase;
34
+ margin: var(--t-paragraf-margin);
35
+ }
36
+ .theme1 ul > li {
37
+ color: var(--t-text-color);
38
+ }
39
+ .theme1 ul > li * {
40
+ color: var(--t-text-color);
41
+ }
42
+ .theme1 h1, .theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5, .theme1 h6 {
43
+ font-weight: 400;
44
+ color: var(--t-text-color);
45
+ margin: var(--t-header-margin, 0 0 20px 0);
46
+ }
47
+ .theme1 h1, .theme1 h2 {
48
+ font-size: 2em;
49
+ line-height: 1.5em;
50
+ }
51
+ .theme1 h3 {
52
+ font-size: 1.5em;
53
+ line-height: 1.1em;
54
+ }
55
+ .theme1 table {
56
+ color: inherit;
57
+ }
58
+ .theme1 table > tr {
59
+ color: inherit;
60
+ }
61
+ .theme1 table > tr > td {
62
+ color: inherit;
63
+ }
64
+ .theme1 p:empty {
65
+ margin: 0;
66
+ }
67
+ .theme1 p {
68
+ margin: var(--t-paragraf-margin);
69
+ hyphens: auto;
70
+ }
71
+ .theme1 p:last-child, .theme1 table:last-child {
72
+ margin-bottom: 0;
73
+ }
74
+ .theme1 address p {
75
+ margin: 0;
76
+ }
77
+ .theme1 section:last-of-type > * {
78
+ padding-bottom: 0;
79
+ }
80
+ .theme1 h1, .theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5 {
81
+ color: var(--t-text-color);
82
+ }
83
+ .theme1 h1 {
84
+ font-size: 2.4em;
85
+ line-height: 1.2em;
86
+ }
87
+ .theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5 {
88
+ line-height: 1.2em;
89
+ }
90
+ .theme1 h3, .theme1 h4, .theme1 h5 {
91
+ font-size: 1.15em;
92
+ }
93
+ .theme1 p {
94
+ line-height: 1.4em;
95
+ }
96
+ .theme1 .tjs__section-text h2 {
97
+ text-transform: uppercase;
98
+ font-weight: bold;
99
+ font-size: 16px;
100
+ color: var(--t-text-color-primary) !important;
101
+ margin: var(--t-paragraf-margin);
102
+ }
103
+ .theme1 .tjs__section-text blockquote > p {
104
+ font-size: 2.1em;
105
+ line-height: 1.2em;
106
+ color: var(--t-text-color) !important;
107
+ margin: var(--t-header-margin, 0 0 20px 0);
108
+ hyphens: manual;
109
+ }
110
+ .theme1 .tjs__section-text .table {
111
+ --bs-table-color: var(--t-text-color);
112
+ }
113
+ .theme1 .tjs__section-text *:last-child {
114
+ margin-bottom: 0;
115
+ }
116
+ .theme1 .section blockquote p {
117
+ font-size: 2.3em;
118
+ }
119
+ .theme1 .card-body {
120
+ color: var(--t-text-color);
121
+ }
122
+ .theme1 .card-body h3 {
123
+ font-weight: bold;
124
+ }
125
+ .theme1 .tjs__sec-legal-content {
126
+ padding-top: 100px;
127
+ }
128
+ .theme1 section:last-child {
129
+ padding-bottom: 0;
130
+ }
131
+ .theme1 a.btn.btn-primary {
132
+ color: white !important;
133
+ }
134
+ .theme1 input.btn.btn-primary {
135
+ color: white !important;
136
+ }
137
+ .theme1 .btn {
138
+ border-radius: 0;
139
+ }
140
+ .theme1 map {
141
+ --joda-class: ":: aspect-1x1 :lg: aspcect-16x9";
142
+ }
143
+ .theme1 .title_image {
144
+ background: linear-gradient(180deg, rgb(230, 225, 221) 0%, rgb(245, 240, 236) 35%, rgb(238, 238, 238) 100%);
145
+ }
146
+ .theme1 .title_image > img {
147
+ object-position: 80% 0;
148
+ object-fit: contain;
149
+ }
150
+ .theme1 .as__accordion {
151
+ border: 1px solid var(--bs-gray-100);
152
+ --as-accordion-open-bg: #fff;
153
+ }
154
+ .theme1 .as__accordion h3 {
155
+ padding-top: 10px;
156
+ padding-bottom: 10px;
157
+ }
158
+ .theme1 .as__accordion .section-h3 {
159
+ border: 1px solid var(--bs-gray-200);
160
+ background-color: var(--bs-gray-100);
161
+ }
162
+ .theme1 .as__accordion .content {
163
+ background-color: #fff;
164
+ }
165
+ .theme1 .as__accordion .content p {
166
+ margin: 20px 20px 20px 0;
167
+ }
168
+
169
+ .openhours {
170
+ --joda-class: "table table-borderless";
171
+ }
172
+ /*!***************************************************************************************************************************************!*\
173
+ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./src.dev/dev.scss ***!
174
+ \***************************************************************************************************************************************/
175
+ showcase-element {
176
+ --aspect-ratio: calc(16 / 9);
177
+ }
178
+ showcase-element.big {
179
+ --aspect-ratio: 0.5;
180
+ }
181
+ showcase-element .preview {
182
+ --scale: 0.2;
183
+ --width: 350px;
184
+ --height: calc(var(--width) / var(--aspect-ratio));
185
+ position: relative;
186
+ width: var(--width);
187
+ height: var(--height);
188
+ overflow: hidden;
189
+ display: inline-block;
190
+ border: 3px solid #ccc;
191
+ }
192
+ showcase-element .preview iframe {
193
+ position: relative;
194
+ right: calc(var(--width) / var(--scale) / 2 - var(--width) / 2);
195
+ bottom: calc(var(--height) / var(--scale) / 2 - var(--height) / 2);
196
+ width: calc(var(--width) / var(--scale));
197
+ height: calc(var(--height) / var(--scale));
198
+ transform: scale(var(--scale));
199
+ }
200
+ showcase-element .preview .overlay {
201
+ position: absolute;
202
+ top: 0;
203
+ left: 0;
204
+ right: 0;
205
+ bottom: 0;
206
+ background: rgba(0, 0, 0, 0.5);
207
+ display: flex;
208
+ align-items: center;
209
+ justify-content: center;
210
+ color: #fff;
211
+ font-size: 1.5rem;
212
+ font-weight: bold;
213
+ text-align: center;
214
+ opacity: 0;
215
+ transition: opacity 0.3s ease-in-out;
216
+ cursor: pointer;
217
+ }
218
+ showcase-element .preview .overlay:hover {
219
+ opacity: 1;
220
+ }
221
+
222
+ /*# sourceMappingURL=index.css.map*/
@@ -0,0 +1 @@
1
+ {"version":3,"file":"assets/dist/index.css","mappings":";;;AAGA;AA8BA;EACI;AC/BJ;;ACAA;EACI;ADGJ;;ACDA;EAGI;EACA;EA6DA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;AD9DJ;AE1BI;EACI;EAGA;AF0BR;AEvBI;EACI;AFyBR;AExBQ;EACI;AF0BZ;AEtBI;EACI;EACA;EACA;AFwBR;AErBI;EACI;EACA;AFuBR;AErBI;EACI;EACA;AFuBR;AEnBI;EACI;AFqBR;AEpBQ;EACI;AFsBZ;AErBY;EACI;AFuBhB;AEfI;EACI;AFiBR;AEdI;EACI;EACA;AFgBR;AERI;EACI;AFUR;AELQ;EACI;AFOZ;AEJI;EACI;AFMR;AC9DI;EACI;ADgER;AC7DI;EACI;EACA;AD+DR;AC7DI;EACI;AD+DR;AC7DI;EACI;AD+DR;AC5DI;EACI;AD8DR;AC1DQ;EACI;EACA;EACA;EACA;EACA;AD4DZ;AC1DQ;EACI;EACA;EACA;EACA;EACA;AD4DZ;ACzDQ;EACI;AD2DZ;ACxDQ;EACI;AD0DZ;ACrDQ;EACI;ADuDZ;AClDI;EAII;ADiDR;ACpDQ;EACI;ADsDZ;AC7BI;EACI;AD+BR;AC5BI;EACI;AD8BR;ACzBI;EACI;AD2BR;ACzBI;EACI;AD2BR;ACxBI;EACI;AD0BR;ACvBI;EACI;ADyBR;ACrBI;EACI;ADuBR;ACtBQ;EACI;EACA;ADwBZ;ACpBI;EACI;EACA;ADsBR;ACrBQ;EACI;EACA;ADuBZ;ACrBQ;EACI;EACA;ADuBZ;ACrBQ;EACI;ADuBZ;ACtBY;EACI;ADwBhB;;AChBA;EACI;ADmBJ,C;;;;AGpKA;EACE;AAFF;AAGE;EACE;AADJ;AAGE;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;AAJJ;AAKI;EACE;EACA;EACA;EACA;EACA;EACA;AAHN;AAMI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAJN;AAKM;EACE;AAHR,C","sources":["webpack://@leuffen/themejs1/./_variables.scss","webpack://@leuffen/themejs1/./theme1.scss","webpack://@leuffen/themejs1/./themes/theme1/index.scss","webpack://@leuffen/themejs1/./themes/_mixins/default-element-format.scss","webpack://@leuffen/themejs1/./src.dev/dev.scss"],"sourcesContent":["\n\n\n/* always add !default to variables */\n\n\n//$font-family-base: Ubuntu-R,sans-serif;\n$font-family-base: sans-serif !default;\n\n$primary: #a3979b !default;\n$success: #22b573 !default;\n$danger: #bf1c0a !default;\n$warning: #bf760a !default;\n$dark: #006837 !default;\n\n$background-primary: #b7eaf9 !default;\n$background-accent: #ddd !default;\n\n$content-offset-top: 100px !default;\n$content-height-adjustment: 200px !default;\n\n$font-size-base: 0.9rem !default;\n$line-height-base: 1.2 !default;\n$paragraph-margin-bottom: 1.5rem !default;\n\n$minibar-text-color: black !default;\n$minibar-color: transparent !default;\n\n$border-radius: 0 !default;\n\n\n\n\n.tjs__navbar-blox {\n --height: 88px !important;\n}\n\n\n","/* always add !default to variables */\n.tjs__navbar-blox {\n --height: 88px !important;\n}\n\n:root {\n --layout-container: container;\n}\n\n.theme1 {\n color: var(--t-text-color);\n background: var(--t-background);\n font-size: 1.1rem;\n --t-background: #f5f5f5;\n --t-background-footer: #fff;\n --t-section-background: transparent;\n --t-section-background-accent: #e7e7eb;\n --t-section-background-primary: #b7eaf9;\n --t-text-background: #fff;\n --t-text-color: #707070;\n --t-text-background-light: var(--t-background);\n --t-text-color-accent: var(--bs-gray-900);\n --t-text-color-primary: var(--bs-primary);\n --t-header-margin: 0 0 20px 0;\n --t-paragraf-margin: 0 0 20px 0;\n --t-section-padding: 40px 0;\n --t-section-inner-padding: 3rem;\n}\n.theme1 section h2 {\n text-transform: uppercase;\n margin: var(--t-paragraf-margin);\n}\n.theme1 ul > li {\n color: var(--t-text-color);\n}\n.theme1 ul > li * {\n color: var(--t-text-color);\n}\n.theme1 h1, .theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5, .theme1 h6 {\n font-weight: 400;\n color: var(--t-text-color);\n margin: var(--t-header-margin, 0 0 20px 0);\n}\n.theme1 h1, .theme1 h2 {\n font-size: 2em;\n line-height: 1.5em;\n}\n.theme1 h3 {\n font-size: 1.5em;\n line-height: 1.1em;\n}\n.theme1 table {\n color: inherit;\n}\n.theme1 table > tr {\n color: inherit;\n}\n.theme1 table > tr > td {\n color: inherit;\n}\n.theme1 p:empty {\n margin: 0;\n}\n.theme1 p {\n margin: var(--t-paragraf-margin);\n hyphens: auto;\n}\n.theme1 p:last-child, .theme1 table:last-child {\n margin-bottom: 0;\n}\n.theme1 address p {\n margin: 0;\n}\n.theme1 section:last-of-type > * {\n padding-bottom: 0;\n}\n.theme1 h1, .theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5 {\n color: var(--t-text-color);\n}\n.theme1 h1 {\n font-size: 2.4em;\n line-height: 1.2em;\n}\n.theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5 {\n line-height: 1.2em;\n}\n.theme1 h3, .theme1 h4, .theme1 h5 {\n font-size: 1.15em;\n}\n.theme1 p {\n line-height: 1.4em;\n}\n.theme1 .tjs__section-text h2 {\n text-transform: uppercase;\n font-weight: bold;\n font-size: 16px;\n color: var(--t-text-color-primary) !important;\n margin: var(--t-paragraf-margin);\n}\n.theme1 .tjs__section-text blockquote > p {\n font-size: 2.1em;\n line-height: 1.2em;\n color: var(--t-text-color) !important;\n margin: var(--t-header-margin, 0 0 20px 0);\n hyphens: manual;\n}\n.theme1 .tjs__section-text .table {\n --bs-table-color: var(--t-text-color);\n}\n.theme1 .tjs__section-text *:last-child {\n margin-bottom: 0;\n}\n.theme1 .section blockquote p {\n font-size: 2.3em;\n}\n.theme1 .card-body {\n color: var(--t-text-color);\n}\n.theme1 .card-body h3 {\n font-weight: bold;\n}\n.theme1 .tjs__sec-legal-content {\n padding-top: 100px;\n}\n.theme1 section:last-child {\n padding-bottom: 0;\n}\n.theme1 a.btn.btn-primary {\n color: white !important;\n}\n.theme1 input.btn.btn-primary {\n color: white !important;\n}\n.theme1 .btn {\n border-radius: 0;\n}\n.theme1 map {\n --joda-class: \":: aspect-1x1 :lg: aspcect-16x9\";\n}\n.theme1 .title_image {\n background: linear-gradient(180deg, rgb(230, 225, 221) 0%, rgb(245, 240, 236) 35%, rgb(238, 238, 238) 100%);\n}\n.theme1 .title_image > img {\n object-position: 80% 0;\n object-fit: contain;\n}\n.theme1 .as__accordion {\n border: 1px solid var(--bs-gray-100);\n --as-accordion-open-bg: #fff;\n}\n.theme1 .as__accordion h3 {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.theme1 .as__accordion .section-h3 {\n border: 1px solid var(--bs-gray-200);\n background-color: var(--bs-gray-100);\n}\n.theme1 .as__accordion .content {\n background-color: #fff;\n}\n.theme1 .as__accordion .content p {\n margin: 20px 20px 20px 0;\n}\n\n.openhours {\n --joda-class: \"table table-borderless\";\n}","@import \"../../variables\";\n@import \"../_mixins/default-element-format\";\n\n:root {\n --layout-container: container;\n}\n.theme1 {\n @include default-element-format();\n\n color: var(--t-text-color);\n background: var(--t-background);\n\n\n h1,h2,h3,h4,h5 {\n color: var(--t-text-color);\n }\n\n h1 {\n font-size: 2.4em;\n line-height: 1.2em;\n }\n h2, h3,h4,h5 {\n line-height: 1.2em;\n }\n h3,h4,h5 {\n font-size: 1.15em;\n }\n\n p {\n line-height: 1.4em;\n }\n\n .tjs__section-text {\n h2 {\n text-transform: uppercase;\n font-weight: bold;\n font-size: 16px;\n color: var(--t-text-color-primary) !important;\n margin: var(--t-paragraf-margin);\n }\n blockquote > p {\n font-size: 2.1em;\n line-height: 1.2em;\n color: var(--t-text-color) !important;\n margin: var(--t-header-margin, 0 0 20px 0);\n hyphens: manual;\n }\n\n .table {\n --bs-table-color: var(--t-text-color);\n }\n\n *:last-child {\n margin-bottom: 0;\n }\n }\n\n .section {\n blockquote p {\n font-size: 2.3em;\n }\n }\n\n\n .card-body {\n h3 {\n font-weight: bold;\n }\n color: var(--t-text-color);\n }\n\n font-size: 1.1rem;\n\n --t-background: #f5f5f5;\n --t-background-footer: #fff;\n --t-section-background: transparent;\n --t-section-background-accent: #e7e7eb;\n --t-section-background-primary: #{$background-primary};\n --t-text-background: #fff;\n --t-text-color: #707070;\n --t-text-background-light: var(--t-background);\n --t-text-color-accent: var(--bs-gray-900);\n --t-text-color-primary: var(--bs-primary);\n\n\n --t-header-margin: 0 0 20px 0;\n --t-paragraf-margin: 0 0 20px 0;\n\n --t-section-padding: 40px 0;\n --t-section-inner-padding: 3rem;\n\n .tjs__sec-legal-content {\n padding-top: 100px;\n }\n\n section:last-child {\n padding-bottom: 0;\n }\n\n // background: var(--bs-light);\n\n a.btn.btn-primary {\n color: white !important;\n }\n input.btn.btn-primary {\n color: white !important;\n }\n\n .btn {\n border-radius: 0;\n }\n\n map {\n --joda-class: \":: aspect-1x1 :lg: aspcect-16x9\";\n }\n\n\n .title_image {\n background: linear-gradient(180deg, rgba(230,225,221,1) 0%, rgba(245,240,236,1) 35%, rgba(238,238,238,1) 100%);;\n & > img {\n object-position: 80% 0;\n object-fit: contain;\n }\n }\n\n .as__accordion {\n border: 1px solid var(--bs-gray-100);\n --as-accordion-open-bg: #fff;\n h3 {\n padding-top: 10px;\n padding-bottom: 10px;\n }\n .section-h3 {\n border: 1px solid var(--bs-gray-200);\n background-color: var(--bs-gray-100);\n }\n .content {\n background-color: #fff;\n p {\n margin: 20px 20px 20px 0;\n }\n }\n\n }\n\n\n}\n.openhours {\n --joda-class: \"table table-borderless\";\n}\n","@mixin default-element-format() {\n section h2 {\n text-transform: uppercase;\n // font-weight: bold;\n\n margin: var(--t-paragraf-margin);\n }\n\n ul > li {\n color: var(--t-text-color);\n * {\n color: var(--t-text-color);\n }\n }\n\n h1,h2,h3,h4,h5,h6 {\n font-weight: 400;\n color: var(--t-text-color);\n margin: var(--t-header-margin, 0 0 20px 0);\n }\n\n h1,h2 {\n font-size: 2em;\n line-height: 1.5em;\n }\n h3 {\n font-size: 1.5em;\n line-height: 1.1em;\n }\n\n\n table {\n color: inherit;\n &> tr {\n color: inherit;\n &>td {\n color: inherit;\n }\n }\n }\n\n\n\n // Paragraph styling\n p:empty {\n margin: 0;\n }\n\n p {\n margin: var(--t-paragraf-margin);\n hyphens: auto; // Wortumbruch\n }\n\n p:first-child {\n //color: var(--t-text-color-accent)\n }\n\n // Important: Remove margin from last paragraph in section\n p:last-child,table:last-child {\n margin-bottom: 0;\n }\n\n\n address {\n p {\n margin: 0;\n }\n }\n section:last-of-type > * {\n padding-bottom: 0;\n }\n\n}\n","\n\n\nshowcase-element {\n --aspect-ratio: calc(16 / 9);\n &.big {\n --aspect-ratio: 0.5;\n }\n .preview {\n --scale: 0.2;\n\n --width: 350px;\n --height: calc(var(--width) / var(--aspect-ratio));\n position: relative;\n width: var(--width);\n height: var(--height);\n overflow: hidden;\n display: inline-block;\n\n\n border: 3px solid #ccc;\n iframe {\n position: relative;\n right: calc((var(--width) / var(--scale) / 2) - var(--width) / 2);\n bottom: calc((var(--height) / var(--scale) / 2) - var(--height) / 2);\n width: calc(var(--width) / var(--scale));\n height: calc(var(--height) / var(--scale));\n transform: scale(var(--scale));\n }\n\n .overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.5rem;\n font-weight: bold;\n text-align: center;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n cursor: pointer;\n &:hover {\n opacity: 1;\n }\n }\n }\n\n}\n"],"names":[],"sourceRoot":""}