1
2
3
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
| {
| "query": "body",
| "customCSS": [
| ".layout-container { display: grid; width: 100vw; height: 100vh; }",
| ".content { grid-area: content; display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 0; }",
| ".iframe-content { flex: 1; min-height: 0; position: relative; background-color: lightgrey; }",
| ".catalog { grid-area: catalog; background: #fff; box-shadow: 0 4px 4px rgba(0,0,0,.25); z-index: 1; overflow: hidden; }",
| ".catalog-content { height: 100%; }",
| ".catalog-steps { grid-area: catalogSteps; background: var(--catalog-steps-background-color,#F4F4F4); box-shadow: 0 4px 4px rgba(0,0,0,.25); z-index: 1; }",
| ".catalog-footer { grid-area: catalogFooter; background: var(--catalog-footer-background-color,#F4F4F4); box-shadow: 0 4px 4px rgba(0,0,0,.25); z-index: 1; display: flex; }",
| ".catalog-footer > * { flex: none; margin: auto; }",
| ".toolbar { position: absolute; bottom: 20px; margin: 0 auto; width: 100%; z-index: 1; pointer-events: none; }",
| ".price { position: absolute; z-index: 1; }",
| ".logo-container { position: absolute; z-index: 1; } .logo-container img { width: 100%; }",
| "@media (max-width: 520px) { .layout-container { grid-template-columns: 1fr; grid-template-rows: 1fr 300px minmax(50px,auto); grid-template-areas: 'content' 'catalog' 'catalogFooter'; } .catalog-steps,.toolbar { display: none; } .price { right: 13px; top: 17px; } .logo-container { left: 15px; top: 15px; width: 130px; } }",
| "@media (min-width: 521px) and (max-width: 980px) { .layout-container { grid-template-columns: 1fr; grid-template-rows: 1fr 420px minmax(50px,auto); grid-template-areas: 'content' 'catalog' 'catalogFooter'; } .catalog-steps,.toolbar { display: none; } .price { right: 13px; top: 17px; } .logo-container { left: 15px; top: 15px; width: 130px; } }",
| "@media (min-width: 981px) { .layout-container { grid-template-columns: 1fr 500px; grid-template-rows: min-content 1fr 130px; grid-template-areas: 'content catalogSteps' 'content catalog' 'content catalogFooter'; } .catalog-steps { display: block; } .toolbar { display: inline-flex; justify-content: center; bottom: 20px; margin: 0 auto; } .price { right: 30px; bottom: 36px; } .price.top { bottom: unset; top: 60px; } .logo-container { top: 50px; left: 50px; width: 200px; } }",
| ".close-filter-popup-button { width: fit-content; position: absolute; right: 1em; transform: rotate(45deg); }",
| ".filter-popup { transform: scaleX(1); transform-origin: 100%; transition: transform 400ms ease 0ms; }",
| ".filter-popup.hidden-by-animation { transform: scaleX(0); transition: transform 400ms ease 0ms; }"
| ],
| "modules": [
| {
| "tag": "fv-layout",
| "styleVars": {
| "--fv-layout-height": "100vh"
| },
| "index": 0,
| "properties": [
| {
| "key": "definition",
| "attribute": false,
| "value": {
| "catalog-steps": {},
| "catalog": { "nodes": { "catalog-content": {} } },
| "catalog-footer": {},
| "content": {
| "nodes": {
| "iframe-content": {},
| "toolbar": {},
| "price": {},
| "logo-container": {}
| }
| }
| }
| }
| ],
| "modules": [
| {
| "tag": "fv-webviewer",
| "index": 0,
| "properties": [
| { "key": "slot", "attribute": true, "value": "iframe-content" }
| ]
| }
| ],
| "areas":[
|
| ]
| }
| ]
| }
|
|
