eSales Media Git repositories
Browse code

Initial commit

Benjamin Roth authored on09/10/2024 01:09:48
Showing11 changed files
contao/dca/tl_content.php
History View file @7214d4d
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,215 @@
1 
+<?php
2 
+
3 
+declare(strict_types=1);
4 
+
5 
+use Contao\System;
6 
+
7 
+$GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_addImage';
8 
+$GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_minHeight';
9 
+$GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_width';
10 
+$GLOBALS['TL_DCA']['tl_content']['palettes']['background_wrapper'] = '
11 
+    {type_legend},type,headline;
12 
+    {background_legend},vr_bw_addImage,vr_bw_bgColor,vr_bw_bgWidthRestriction;
13 
+    {content_legend},vr_bw_minHeight,vr_bw_width,vr_bw_vAlign,vr_bw_padding,vr_bw_colorInvert;
14 
+    {template_legend:hide},customTpl;
15 
+    {protected_legend:hide},protected;
16 
+    {expert_legend:hide},cssID;
17 
+    {invisible_legend:hide},invisible,start,stop
18 
+';
19 
+
20 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_addImage'] = 'vr_bw_bgSRC,size,vr_bw_bgSize,vr_bw_bgPos,vr_bw_bgOpacity';
21 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_minHeight_-mh-ratio'] = 'vr_bw_mh_ratio';
22 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_minHeight_-mh-vh'] = 'vr_bw_mh_viewport';
23 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-extended'] = 'vr_bw_widthText';
24 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-default-left'] = 'vr_bw_widthText';
25 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-default-right'] = 'vr_bw_widthText';
26 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-extended-left'] = 'vr_bw_widthText';
27 
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-extended-right'] = 'vr_bw_widthText';
28 
+
29 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_addImage'] = [
30 
+    'inputType'               => 'checkbox',
31 
+    'eval'                    => ['submitOnChange' =>true],
32 
+    'sql'                     => ['type' => 'boolean', 'default' => false]
33 
+];
34 
+
35 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgSRC'] = [
36 
+    'inputType' => 'fileTree',
37 
+    'eval'      => [
38 
+        'tl_class'   => 'clr',
39 
+        'multiple'   => false,
40 
+        'fieldType'  => 'radio',
41 
+        'filesOnly'  => true,
42 
+        'extensions' => array_merge(System::getContainer()->getParameter('contao.image.valid_extensions'),['mp4', 'm4v', 'mov', 'wmv', 'webm', 'ogv']),
43 
+    ],
44 
+    'sql'       => "binary(16) NULL"
45 
+];
46 
+
47 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgSize'] = [
48 
+    'inputType' => 'select',
49 
+    'options'   => [
50 
+        ''          => 'Beschnitten',
51 
+        '-bg-size-contain'   => 'Proportional',
52 
+        '-bg-size-stretch' => 'Verzerrt',
53 
+        '-bg-size-auto' => 'Originalgröße',
54 
+    ],
55 
+    'eval'      => ['tl_class' => 'w50'],
56 
+    'sql'       => "varchar(16) NOT NULL default ''"
57 
+];
58 
+
59 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgPos'] = [
60 
+    'inputType' => 'select',
61 
+    'options'   => [
62 
+        '-bg-pos-0-0'       => 'Links | Oben',
63 
+        '-bg-pos-50-0'     => 'Mitte | Oben',
64 
+        '-bg-pos-100-0'    => 'Rechts | Oben',
65 
+        '-bg-pos-0-50'     => 'Links | Mitte',
66 
+        '-bg-pos-50-50'   => 'Mitte | Mitte',
67 
+        '-bg-pos-100-50'  => 'Rechts | Mitte',
68 
+        '-bg-pos-0-100'    => 'Links | Unten',
69 
+        '-bg-pos-50-100'  => 'Mitte | Unten',
70 
+        '-bg-pos-100-100' => 'Rechts | Unten',
71 
+    ],
72 
+    'eval'      => ['tl_class' => 'w50', 'includeBlankOption' => true],
73 
+    'sql'       => "varchar(16) NOT NULL default ''"
74 
+];
75 
+
76 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgOpacity'] = [
77 
+    'inputType' => 'select',
78 
+    'options'   => [
79 
+        '-bg-opacity-10'  => '10%',
80 
+        '-bg-opacity-20'  => '20%',
81 
+        '-bg-opacity-30'  => '30%',
82 
+        '-bg-opacity-40'  => '40%',
83 
+        '-bg-opacity-50'  => '50%',
84 
+        '-bg-opacity-60'  => '60%',
85 
+        '-bg-opacity-70'  => '70%',
86 
+        '-bg-opacity-80'  => '80%',
87 
+        '-bg-opacity-90'  => '90%',
88 
+        '-bg-opacity-100' => '100%',
89 
+    ],
90 
+    'eval'      => ['tl_class' => 'w50', 'includeBlankOption' => true],
91 
+    'sql'       => "varchar(16) NOT NULL default ''"
92 
+];
93 
+
94 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgColor'] = [
95 
+    'inputType' => 'select',
96 
+    'options'   => [
97 
+        '-alt-color-1'  => 'Alternative 1',
98 
+        '-alt-color-2' => 'Alternative 2',
99 
+        '-alt-color-3' => 'Alternative 3',
100 
+        '-alt-color-black' => 'Schwarz',
101 
+        '-alt-color-white' => 'Weiß',
102 
+    ],
103 
+    'eval'      => ['tl_class' => 'w50', 'includeBlankOption' => true],
104 
+    'sql'       => "varchar(16) NOT NULL default ''"
105 
+];
106 
+
107 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgWidthRestriction'] = [
108 
+    'inputType'               => 'checkbox',
109 
+    'eval'                    => ['tl_class' => 'w50 m12'],
110 
+    'sql'                     => ['type' => 'boolean', 'default' => false]
111 
+];
112 
+
113 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_minHeight'] = [
114 
+    'inputType' => 'select',
115 
+    'options'   => [
116 
+        '-mh-small'          => 'Schmal',
117 
+        '-mh-medium'         => 'Mittel',
118 
+        '-mh-large'          => 'Groß',
119 
+        '-mh-vh'        => 'Am Viewport orientiert',
120 
+        '-mh-ratio'        => 'Seitenverhältnis',
121 
+        '-mh-bgimage'        => 'an Hintergrundbild ausrichten',
122 
+        '-mh-custom' => 'Projektdefiniert',
123 
+    ],
124 
+    'eval'      => ['tl_class' => 'w50', 'includeBlankOption' => true, 'submitOnChange' =>true],
125 
+    'sql'       => "varchar(16) NOT NULL default ''"
126 
+];
127 
+
128 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_mh_ratio'] = [
129 
+    'inputType' => 'select',
130 
+    'options'   => [
131 
+        '-mh-ratio-21-9' => '21:9',
132 
+        '-mh-ratio-16-10' => '16:10',
133 
+        '-mh-ratio-16-9' => '16:9',
134 
+        '-mh-ratio-8-3' => '8:3',
135 
+        '-mh-ratio-5-4' => '5:4',
136 
+        '-mh-ratio-4-3' => '4:3',
137 
+        '-mh-ratio-3-2' => '3:2',
138 
+        '-mh-ratio-5-1' => '5:1',
139 
+        '-mh-ratio-4-1' => '4:1',
140 
+        '-mh-ratio-3-1' => '3:1',
141 
+        '-mh-ratio-2-1' => '2:1',
142 
+        '-mh-ratio-1-1' => '1:1',
143 
+    ],
144 
+    'eval'      => ['mandatory' => true, 'tl_class' => 'w50', 'includeBlankOption' => true],
145 
+    'sql'       => "varchar(16) NOT NULL default ''"
146 
+];
147 
+
148 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_mh_viewport'] = [
149 
+    'inputType' => 'select',
150 
+    'options'   => [
151 
+        '-mh-viewport-100' => '100%',
152 
+        '-mh-viewport-66' => '66%',
153 
+        '-mh-viewport-50' => '50%',
154 
+        '-mh-viewport-33' => '33%',
155 
+    ],
156 
+    'eval'      => ['mandatory' => true, 'tl_class' => 'w50', 'includeBlankOption' => true],
157 
+    'sql'       => "varchar(16) NOT NULL default ''"
158 
+];
159 
+
160 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_vAlign'] = [
161 
+    'inputType' => 'select',
162 
+    'options'   => [
163 
+        ''          => 'oben',
164 
+        '-va-center'         => 'mitte',
165 
+        '-va-bottom'          => 'unten',
166 
+    ],
167 
+    'eval'      => ['tl_class' => 'clr w50'],
168 
+    'sql'       => "varchar(16) NOT NULL default ''"
169 
+];
170 
+
171 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_width'] = [
172 
+    'inputType' => 'select',
173 
+    'options' => [
174 
+        ''                      => 'Standard',
175 
+        '-width-small'          => 'Schmal',
176 
+        '-width-extended'       => 'Erweitert',
177 
+        '-width-default-left'   => 'Nach links versetzt',
178 
+        '-width-default-right'  => 'Nach rechts versetzt',
179 
+        '-width-extended-left'  => 'Nach links erweitert',
180 
+        '-width-extended-right' => 'Nach rechts erweitert',
181 
+        '-width-full'           => 'Gesamte Viewport-Breite',
182 
+    ],
183 
+    'eval'      => ['mandatory' => false, 'tl_class' => 'clr w50'],
184 
+    'sql'       => "varchar(24) NOT NULL default ''"
185 
+];
186 
+
187 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_widthText'] = [
188 
+    'inputType'               => 'checkbox',
189 
+    'eval'                    => ['tl_class' => 'w50 m12'],
190 
+    'sql'                     => ['type' => 'boolean', 'default' => false]
191 
+];
192 
+
193 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_colorInvert'] = [
194 
+    'inputType'               => 'checkbox',
195 
+    'eval'                    => ['tl_class' => 'w50 m12'],
196 
+    'sql'                     => ['type' => 'boolean', 'default' => false]
197 
+];
198 
+
199 
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_padding'] = [
200 
+    'inputType' => 'select',
201 
+    'options'   => [
202 
+        ''                       => '-',
203 
+        '-padding'               => 'Default',
204 
+        '-padding-medium'        => 'Medium',
205 
+        '-padding-large'         => 'Large',
206 
+        '-padding-top'           => 'Small Top',
207 
+        '-padding-top-medium'    => 'Medium Top',
208 
+        '-padding-top-large'     => 'Large Top',
209 
+        '-padding-bottom'        => 'Small Bottom',
210 
+        '-padding-bottom-medium' => 'Medium Bottom',
211 
+        '-padding-bottom-large'  => 'Large Bottom',
212 
+    ],
213 
+    'eval'      => ['mandatory' => false, 'tl_class' => 'w50'],
214 
+    'sql'       => "varchar(16) NOT NULL default ''"
215 
+];
contao/languages/de/default.xlf
History View file @7214d4d
0 216 
new file mode 100644
... ... 
@@ -0,0 +1,31 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<xliff version="1.1">
3 
+    <file>
4 
+        <body>
5 
+            <trans-unit id="CTE.background_wrapper.0">
6 
+                <source>Centered background wrapper</source>
7 
+                <target>Zentrierter Hintergrund-Umschlag</target>
8 
+            </trans-unit>
9 
+            <trans-unit id="CTE.background_wrapper.1">
10 
+                <source>Provides a background wrapper with centered content area.</source>
11 
+                <target>Stellt einen Hintergrundumschlag zur Verfügung mit zentriertem Inhaltsbereich.</target>
12 
+            </trans-unit>
13 
+            <trans-unit id="FMD.managed_property.0">
14 
+                <source>Managed properties</source>
15 
+                <target>Verwaltete Objekte</target>
16 
+            </trans-unit>
17 
+            <trans-unit id="FMD.managed_property.1">
18 
+                <source>Administration of managed properties.</source>
19 
+                <target>Pflege von verwalteten Objekten.</target>
20 
+            </trans-unit>
21 
+            <trans-unit id="FMD.managed_property_reader.0">
22 
+                <source>Managed property reader</source>
23 
+                <target>Verwaltetes Objekt Leser</target>
24 
+            </trans-unit>
25 
+            <trans-unit id="FMD.managed_property_reader.1">
26 
+                <source>Shows details of a managed property.</source>
27 
+                <target>Zeigt Details eines verwalteten Objektes.</target>
28 
+            </trans-unit>
29 
+        </body>
30 
+    </file>
31 
+</xliff>
contao/languages/de/tl_content.xlf
History View file @7214d4d
0 32 
new file mode 100644
... ... 
@@ -0,0 +1,145 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<xliff version="1.1">
3 
+    <file source-language="en" target-language="de">
4 
+        <body>
5 
+            <trans-unit id="tl_content.vr_bw_addImage.0">
6 
+                <source>Add background image/video</source>
7 
+                <target>Ein Hintergrundbild hinzufügen</target>
8 
+            </trans-unit>
9 
+            <trans-unit id="tl_content.vr_bw_addImage.1">
10 
+                <source>Adds a background image/video to the wrapper element.</source>
11 
+                <target>Dem Wrapper-Element ein Hintergrundbild oder -video hinzufügen.</target>
12 
+            </trans-unit>
13 
+            <trans-unit id="tl_content.vr_bw_bgSRC.0">
14 
+                <source>Background source file</source>
15 
+                <target>Hintergrund Quelldatei</target>
16 
+            </trans-unit>
17 
+            <trans-unit id="tl_content.vr_bw_bgSRC.1">
18 
+                <source>Please choose an image or video file from the files directory.</source>
19 
+                <target>Bitte wählen Sie eine Bild- oder Videodatei aus der Dateiübersicht.</target>
20 
+            </trans-unit>
21 
+            <trans-unit id="tl_content.vr_bw_bgSize.0">
22 
+                <source>Background scaling</source>
23 
+                <target>Hintergrund-Skalierung</target>
24 
+            </trans-unit>
25 
+            <trans-unit id="tl_content.vr_bw_bgSize.1">
26 
+                <source>Please choose how the background should be scaled.</source>
27 
+                <target>Bitte wählen Sie, wie der Hintergrund skaliert werden soll.</target>
28 
+            </trans-unit>
29 
+            <trans-unit id="tl_content.vr_bw_bgPos.0">
30 
+                <source>Background position</source>
31 
+                <target>Hintergrund-Position</target>
32 
+            </trans-unit>
33 
+            <trans-unit id="tl_content.vr_bw_bgPos.1">
34 
+                <source>Please choose the positioning of the background.</source>
35 
+                <target>Bitte wählen Sie die Positionierung des Hintergrunds.</target>
36 
+            </trans-unit>
37 
+            <trans-unit id="tl_content.vr_bw_bgOpacity.0">
38 
+                <source>Background opacity</source>
39 
+                <target>Hintergrund-Transparenz</target>
40 
+            </trans-unit>
41 
+            <trans-unit id="tl_content.vr_bw_bgOpacity.1">
42 
+                <source>You can set the background image/video opacity.</source>
43 
+                <target>Sie können die Deckkraft des Hintergrundbildes/-videos einstellen.</target>
44 
+            </trans-unit>
45 
+            <trans-unit id="tl_content.vr_bw_bgColor.0">
46 
+                <source>Background color</source>
47 
+                <target>Hintergrund-Farbe</target>
48 
+            </trans-unit>
49 
+            <trans-unit id="tl_content.vr_bw_bgColor.1">
50 
+                <source>Set a background color to the wrapper element.</source>
51 
+                <target>Dem Wrapper-Element eine Hintergrundfarbe zuweisen.</target>
52 
+            </trans-unit>
53 
+            <trans-unit id="tl_content.vr_bw_bgWidthRestriction.0">
54 
+                <source>Restrict background width</source>
55 
+                <target>Hintergrundbreite beschränken</target>
56 
+            </trans-unit>
57 
+            <trans-unit id="tl_content.vr_bw_bgWidthRestriction.1">
58 
+                <source>Restrict background image/video to the content area width.</source>
59 
+                <target>Die Breite des Hintergrundbildes/-videos auf den Inhaltsbereich beschränken.</target>
60 
+            </trans-unit>
61 
+
62 
+            <trans-unit id="tl_content.vr_bw_minHeight.0">
63 
+                <source>Minimum height</source>
64 
+                <target>Minimalhöhe</target>
65 
+            </trans-unit>
66 
+            <trans-unit id="tl_content.vr_bw_minHeight.1">
67 
+                <source>Set a minimum height for the wrapper element.</source>
68 
+                <target>Dem Wrapper-Element eine Minimalhöhe zuweisen.</target>
69 
+            </trans-unit>
70 
+            <trans-unit id="tl_content.vr_bw_mh_viewport.0">
71 
+                <source>Viewport oriented height</source>
72 
+                <target>Viewport orientierte Höhe</target>
73 
+            </trans-unit>
74 
+            <trans-unit id="tl_content.vr_bw_mh_viewport.1">
75 
+                <source>Set a minimum height in relation to the viewport.</source>
76 
+                <target>Eine Minimalhöhe in Relation zum Viewport setzen.</target>
77 
+            </trans-unit>
78 
+            <trans-unit id="tl_content.vr_bw_mh_ratio.0">
79 
+                <source>Aspect ratio</source>
80 
+                <target>Seitenverhältnis</target>
81 
+            </trans-unit>
82 
+            <trans-unit id="tl_content.vr_bw_mh_ratio.1">
83 
+                <source>Set an aspect ratio as minimum height.</source>
84 
+                <target>Legen Sie ein Seitenverhältnis als Mindesthöhe fest.</target>
85 
+            </trans-unit>
86 
+            <trans-unit id="tl_content.vr_bw_width.0">
87 
+                <source>Content area width</source>
88 
+                <target>Inhaltsbereich-Breite</target>
89 
+            </trans-unit>
90 
+            <trans-unit id="tl_content.vr_bw_width.1">
91 
+                <source>Set the content area width inside the wrapper element.</source>
92 
+                <target>Bestimmen Sie die Breite des Inhaltsbereichs innerhalb des Wrapper-Elements.</target>
93 
+            </trans-unit>
94 
+            <trans-unit id="tl_content.vr_bw_width.0">
95 
+                <source>Content area width</source>
96 
+                <target>Inhaltsbereich-Breite</target>
97 
+            </trans-unit>
98 
+            <trans-unit id="tl_content.vr_bw_width.1">
99 
+                <source>Set the content area width inside the wrapper element.</source>
100 
+                <target>Bestimmen Sie die Breite des Inhaltsbereichs innerhalb des Wrapper-Elements.</target>
101 
+            </trans-unit>
102 
+            <trans-unit id="tl_content.vr_bw_width.0">
103 
+                <source>Content area width</source>
104 
+                <target>Inhaltsbereich-Breite</target>
105 
+            </trans-unit>
106 
+            <trans-unit id="tl_content.vr_bw_width.1">
107 
+                <source>Set the content area width inside the wrapper element.</source>
108 
+                <target>Bestimmen Sie die Breite des Inhaltsbereichs innerhalb des Wrapper-Elements.</target>
109 
+            </trans-unit>
110 
+            <trans-unit id="tl_content.vr_bw_vAlign.0">
111 
+                <source>Vertical alignment</source>
112 
+                <target>Vertikale Ausrichtung</target>
113 
+            </trans-unit>
114 
+            <trans-unit id="tl_content.vr_bw_vAlign.1">
115 
+                <source>Sets the content area's vertical alignment.</source>
116 
+                <target>Legt die vertikale Ausrichtung des Inhaltsbereichs fest.</target>
117 
+            </trans-unit>
118 
+            <trans-unit id="tl_content.vr_bw_padding.0">
119 
+                <source>Inner spacing</source>
120 
+                <target>Innerer Abstand</target>
121 
+            </trans-unit>
122 
+            <trans-unit id="tl_content.vr_bw_padding.1">
123 
+                <source>Sets the content area's inner padding.</source>
124 
+                <target>Legt den Innenabstand des Inhaltsbereichs fest.</target>
125 
+            </trans-unit>
126 
+            <trans-unit id="tl_content.vr_bw_colorInvert.0">
127 
+                <source>Invert text color</source>
128 
+                <target>Textfarbe invertieren</target>
129 
+            </trans-unit>
130 
+            <trans-unit id="tl_content.vr_bw_colorInvert.1">
131 
+                <source>Invert the color of the text.</source>
132 
+                <target>Die Farbe des Textes invertieren.</target>
133 
+            </trans-unit>
134 
+
135 
+            <trans-unit id="tl_content.background_legend">
136 
+                <source>Background settings</source>
137 
+                <target>Hintergrund-Einstellungen</target>
138 
+            </trans-unit>
139 
+            <trans-unit id="tl_content.content_legend">
140 
+                <source>Content settings</source>
141 
+                <target>Inhalts-Einstellungen</target>
142 
+            </trans-unit>
143 
+        </body>
144 
+    </file>
145 
+</xliff>
contao/languages/en/default.xlf
History View file @7214d4d
0 146 
new file mode 100644
... ... 
@@ -0,0 +1,25 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<xliff version="1.1">
3 
+    <file>
4 
+        <body>
5 
+            <trans-unit id="CTE.background_wrapper.0">
6 
+                <source>Centered background wrapper</source>
7 
+            </trans-unit>
8 
+            <trans-unit id="CTE.background_wrapper.1">
9 
+                <source>Provides a background wrapper with centered content area.</source>
10 
+            </trans-unit>
11 
+            <trans-unit id="FMD.managed_property.0">
12 
+                <source>Managed properties</source>
13 
+            </trans-unit>
14 
+            <trans-unit id="FMD.managed_property.1">
15 
+                <source>Administration of managed properties.</source>
16 
+            </trans-unit>
17 
+            <trans-unit id="FMD.managed_property_reader.0">
18 
+                <source>Managed property reader</source>
19 
+            </trans-unit>
20 
+            <trans-unit id="FMD.managed_property_reader.1">
21 
+                <source>Shows details of a managed property.</source>
22 
+            </trans-unit>
23 
+        </body>
24 
+    </file>
25 
+</xliff>
contao/templates/.twig-root
History View file @7214d4d
0 26 
new file mode 100644
contao/templates/content_element/background_wrapper.html.twig
History View file @7214d4d
1 27 
new file mode 100644
... ... 
@@ -0,0 +1,47 @@
1 
+{% extends "@Contao/content_element/_base.html.twig" %}
2 
+{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}
3 
+
4 
+{% block content %}
5 
+    {% block background %}
6 
+        <div class="content-background-wrapper-bg">
7 
+            {% if background_figure is defined %}
8 
+                {{- studio.figure(background_figure) -}}
9 
+            {% endif %}
10 
+            {% if background_video is defined %}
11 
+                <figure>
12 
+                    <video autoplay muted loop playsinline>
13 
+                        <source src="{{ background_video.path }}" type="video/{{ background_video.extension }}">
14 
+                    </video>
15 
+                </figure>
16 
+            {% endif %}
17 
+        </div>
18 
+    {% endblock %}
19 
+
20 
+    {% block foreground %}
21 
+        <div id="content-background-wrapper-fg--{{ data.id }}" class="content-background-wrapper-fg">
22 
+            <div class="content-grid">
23 
+                <div class="fragments">
24 
+                    {% for fragment in nested_fragments %}
25 
+                        {{ content_element(fragment) }}
26 
+                    {% endfor %}
27 
+                </div>
28 
+            </div>
29 
+        </div>
30 
+    {% endblock %}
31 
+{% endblock %}
32 
+
33 
+{% block script %}
34 
+    {% if minHeight_ratio is defined %}
35 
+        {% add "background_wrapper" to head %}
36 
+            <style>
37 
+                #content-background-wrapper-fg--{{ data.id }} { display: flow-root; }
38 
+                #content-background-wrapper-fg--{{ data.id }}::before {
39 
+                    display: table;
40 
+                    content: "";
41 
+                    padding-top: {{ minHeight_ratio }}%;
42 
+                    float: left;
43 
+                }
44 
+            </style>
45 
+        {% endadd %}
46 
+    {% endif %}
47 
+{% endblock %}
public/css/background-wrapper.css
History View file @7214d4d
0 48 
new file mode 100644
... ... 
@@ -0,0 +1,386 @@
1 
+:root {
2 
+  /* Heights */
3 
+  --vr-bw-height-small: 240px;
4 
+  --vr-bw-height-medium: 480px;
5 
+  --vr-bw-height-large: 720px;
6 
+  /* Colors */
7 
+  --vr-bw-bgcolor-1: #f0f0f0;
8 
+  --vr-bw-bgcolor-2: #777777;
9 
+  --vr-bw-bgcolor-3: #323232;
10 
+  --vr-bw-color-inverted: #FFF;
11 
+  --vr-bw-color-headline-inverted: #FFF;
12 
+  /* Padding */
13 
+  --vr-bw-padding-small: 3rem;
14 
+  --vr-bw-padding-medium: 5rem;
15 
+  --vr-bw-padding-large: 8rem;
16 
+  /* Width */
17 
+  --vr-bw-padding-inline: 1rem;
18 
+  --vr-bw-indent-max-width: 760px;
19 
+  --vr-bw-content-max-width: 1120px;
20 
+  --vr-bw-breakout-max-width: 1480px;
21 
+  --vr-bw-content-size: calc(
22 
+    (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
23 
+  );
24 
+  --vr-bw-breakout-size: calc(
25 
+    (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2
26 
+  );
27 
+}
28 
+@media screen and (max-width: 599px) {
29 
+  :root {
30 
+    --vr-bw-padding-inline: .5rem;
31 
+  }
32 
+}
33 
+
34 
+.content-background-wrapper {
35 
+  position: relative;
36 
+  /* Background base */
37 
+  /* Background scaling */
38 
+  /* Background position */
39 
+  /* Background opacity */
40 
+  /* Background color */
41 
+  /* Foreground base */
42 
+  /* Height */
43 
+  /* Content width */
44 
+  /* Vertical alignment */
45 
+  /* Padding */
46 
+  /* Color */
47 
+}
48 
+.content-background-wrapper .content-background-wrapper-bg {
49 
+  position: absolute;
50 
+  inset: 0;
51 
+}
52 
+.content-background-wrapper .content-background-wrapper-bg img,
53 
+.content-background-wrapper .content-background-wrapper-bg video {
54 
+  position: absolute;
55 
+  inset: 0;
56 
+  object-fit: cover;
57 
+  object-position: 50% 50%;
58 
+  display: block;
59 
+  width: 100%;
60 
+  height: 100%;
61 
+}
62 
+.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
63 
+  object-fit: contain;
64 
+}
65 
+
66 
+.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
67 
+  object-fit: fill;
68 
+}
69 
+
70 
+.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
71 
+  object-fit: none;
72 
+}
73 
+
74 
+.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
75 
+  object-position: 0 0;
76 
+}
77 
+
78 
+.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
79 
+  object-position: 50% 0;
80 
+}
81 
+
82 
+.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
83 
+  object-position: 100% 0;
84 
+}
85 
+
86 
+.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
87 
+  object-position: 0 50%;
88 
+}
89 
+
90 
+.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
91 
+  object-position: 50% 50%;
92 
+}
93 
+
94 
+.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
95 
+  object-position: 100% 50%;
96 
+}
97 
+
98 
+.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
99 
+  object-position: 0 100%;
100 
+}
101 
+
102 
+.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
103 
+  object-position: 50% 100%;
104 
+}
105 
+
106 
+.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video {
107 
+  object-position: 100% 100%;
108 
+}
109 
+
110 
+.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg {
111 
+  opacity: 0.1;
112 
+}
113 
+
114 
+.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg {
115 
+  opacity: 0.2;
116 
+}
117 
+
118 
+.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg {
119 
+  opacity: 0.3;
120 
+}
121 
+
122 
+.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg {
123 
+  opacity: 0.4;
124 
+}
125 
+
126 
+.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg {
127 
+  opacity: 0.5;
128 
+}
129 
+
130 
+.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg {
131 
+  opacity: 0.6;
132 
+}
133 
+
134 
+.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg {
135 
+  opacity: 0.7;
136 
+}
137 
+
138 
+.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg {
139 
+  opacity: 0.8;
140 
+}
141 
+
142 
+.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg {
143 
+  opacity: 0.9;
144 
+}
145 
+
146 
+.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg {
147 
+  opacity: 1;
148 
+}
149 
+
150 
+.content-background-wrapper.-alt-color-1 {
151 
+  background-color: var(--vr-bw-bgcolor-1);
152 
+}
153 
+.content-background-wrapper.-alt-color-2 {
154 
+  background-color: var(--vr-bw-bgcolor-2);
155 
+}
156 
+.content-background-wrapper.-alt-color-3 {
157 
+  background-color: var(--vr-bw-bgcolor-3);
158 
+}
159 
+.content-background-wrapper.-alt-color-black {
160 
+  background-color: #000;
161 
+}
162 
+.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,
163 
+.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6 {
164 
+  color: #FFFFFF;
165 
+}
166 
+.content-background-wrapper.-alt-color-white {
167 
+  background-color: white;
168 
+}
169 
+.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,
170 
+.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6 {
171 
+  color: #000000;
172 
+}
173 
+.content-background-wrapper .content-background-wrapper-fg {
174 
+  position: relative;
175 
+  box-sizing: border-box;
176 
+}
177 
+.-mh-small.content-background-wrapper .content-background-wrapper-fg {
178 
+  min-height: var(--vr-bw-height-small);
179 
+}
180 
+
181 
+.-mh-medium.content-background-wrapper .content-background-wrapper-fg {
182 
+  min-height: var(--vr-bw-height-medium);
183 
+}
184 
+
185 
+.-mh-large.content-background-wrapper .content-background-wrapper-fg {
186 
+  min-height: var(--vr-bw-height-large);
187 
+}
188 
+
189 
+.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
190 
+  min-height: 100svh;
191 
+}
192 
+
193 
+.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
194 
+  min-height: 66.666svh;
195 
+}
196 
+
197 
+.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
198 
+  min-height: 50svh;
199 
+}
200 
+
201 
+.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg {
202 
+  min-height: 33.333svh;
203 
+}
204 
+
205 
+.-mh-ratio.content-background-wrapper .content-background-wrapper-fg {
206 
+  display: flow-root;
207 
+}
208 
+.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
209 
+  display: table;
210 
+  content: "";
211 
+  padding-top: 100%;
212 
+  float: left;
213 
+}
214 
+.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
215 
+  padding-top: 42.857%;
216 
+}
217 
+
218 
+.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
219 
+  padding-top: 62.5%;
220 
+}
221 
+
222 
+.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
223 
+  padding-top: 56.25%;
224 
+}
225 
+
226 
+.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
227 
+  padding-top: 37.5%;
228 
+}
229 
+
230 
+.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
231 
+  padding-top: 80%;
232 
+}
233 
+
234 
+.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
235 
+  padding-top: 75%;
236 
+}
237 
+
238 
+.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
239 
+  padding-top: 66.666%;
240 
+}
241 
+
242 
+.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
243 
+  padding-top: 20%;
244 
+}
245 
+
246 
+.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
247 
+  padding-top: 25%;
248 
+}
249 
+
250 
+.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
251 
+  padding-top: 33.333%;
252 
+}
253 
+
254 
+.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
255 
+  padding-top: 50%;
256 
+}
257 
+
258 
+.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before {
259 
+  padding-top: 100%;
260 
+}
261 
+
262 
+.content-background-wrapper .content-background-wrapper-fg .content-grid {
263 
+  width: 100%;
264 
+  display: grid;
265 
+  grid-template-columns: [full-width-start] minmax(var(--vr-bw-padding-inline), 1fr) [breakout-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [content-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [indent-start] min(100% - var(--vr-bw-padding-inline) * 6, var(--vr-bw-indent-max-width)) [indent-end] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [content-end] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [breakout-end] minmax(var(--vr-bw-padding-inline), 1fr) [full-width-end];
266 
+}
267 
+.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
268 
+  grid-column: content;
269 
+  position: relative;
270 
+}
271 
+.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
272 
+  grid-column: indent;
273 
+}
274 
+
275 
+.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
276 
+  grid-column: breakout;
277 
+}
278 
+
279 
+.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
280 
+  grid-column: breakout/indent;
281 
+}
282 
+
283 
+.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
284 
+  grid-column: indent/breakout;
285 
+}
286 
+
287 
+.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
288 
+  grid-column: breakout/content;
289 
+}
290 
+
291 
+.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
292 
+  grid-column: content/breakout;
293 
+}
294 
+
295 
+.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
296 
+  grid-column: full-width;
297 
+}
298 
+
299 
+@media screen and (max-width: 599px) {
300 
+  .-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
301 
+    grid-column: full-width;
302 
+  }
303 
+  .-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
304 
+    grid-column: full-width/content;
305 
+  }
306 
+  .-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
307 
+    grid-column: content/full-width;
308 
+  }
309 
+  .-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
310 
+    grid-column: full-width/content;
311 
+  }
312 
+  .-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
313 
+    grid-column: content/full-width;
314 
+  }
315 
+  .-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
316 
+    padding: 0 calc(var(--vr-bw-padding-inline) * 2);
317 
+  }
318 
+  .-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
319 
+    padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2);
320 
+  }
321 
+  .-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
322 
+    padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0;
323 
+  }
324 
+  .-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
325 
+    padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2);
326 
+  }
327 
+  .-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments {
328 
+    padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0;
329 
+  }
330 
+}
331 
+.content-background-wrapper .content-background-wrapper-fg {
332 
+  display: flex;
333 
+  align-items: flex-start;
334 
+}
335 
+.-va-center.content-background-wrapper .content-background-wrapper-fg {
336 
+  align-items: center;
337 
+}
338 
+
339 
+.-va-bottom.content-background-wrapper .content-background-wrapper-fg {
340 
+  align-items: flex-end;
341 
+}
342 
+
343 
+.-padding.content-background-wrapper .content-background-wrapper-fg .fragments {
344 
+  padding: var(--vr-bw-padding-small) 0;
345 
+}
346 
+
347 
+.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments {
348 
+  padding: var(--vr-bw-padding-medium) 0;
349 
+}
350 
+
351 
+.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments {
352 
+  padding: var(--vr-bw-padding-large) 0;
353 
+}
354 
+
355 
+.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments {
356 
+  padding: var(--vr-bw-padding-small) 0 0;
357 
+}
358 
+
359 
+.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments {
360 
+  padding: var(--vr-bw-padding-medium) 0 0;
361 
+}
362 
+
363 
+.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments {
364 
+  padding: var(--vr-bw-padding-large) 0 0;
365 
+}
366 
+
367 
+.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments {
368 
+  padding: 0 0 var(--vr-bw-padding-small);
369 
+}
370 
+
371 
+.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments {
372 
+  padding: 0 0 var(--vr-bw-padding-medium);
373 
+}
374 
+
375 
+.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments {
376 
+  padding: 0 0 var(--vr-bw-padding-large);
377 
+}
378 
+
379 
+.-color-inverted.content-background-wrapper .content-background-wrapper-fg {
380 
+  color: var(--vr-bw-color-inverted);
381 
+}
382 
+.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h2, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h3, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h4, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h5, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h6 {
383 
+  color: var(--vr-bw-color-headline-inverted);
384 
+}
385 
+
386 
+/*# sourceMappingURL=background-wrapper.css.map */
public/css/background-wrapper.css.map
History View file @7214d4d
0 387 
new file mode 100644
... ... 
@@ -0,0 +1 @@
1 
+{"version":3,"sourceRoot":"","sources":["background-wrapper.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAIA;EA3BF;IA4BI;;;;AAKJ;EACE;AAEA;AAoBA;AAUA;AAgBA;AAcA;AAyBA;AAMA;AAmCA;AAiDA;AASA;AAeA;;AAtMA;EACE;EACA;;AAKA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAQS;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAqB;;;AAQrB;EAAmB;;;AACnB;EAAoB;;;AACpB;EAAqB;;;AACrB;EAAoB;;;AACpB;EAAqB;;;AACrB;EAAsB;;;AACtB;EAAqB;;;AACrB;EAAsB;;;AACtB;EAAuB;;;AAMzB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAuB;;;AAIlC;EAAiB;;AACjB;EAAiB;;AACjB;EAAiB;;AACjB;EACE;;AAGE;AAAA;EAEE;;AAIN;EACE;;AAGE;AAAA;EAEE;;AAMN;EACE;EACA;;AAKS;EAAiB;;;AACjB;EAAkB;;;AAClB;EAAiB;;;AAEf;EAAwB;;;AACxB;EAAuB;;;AACvB;EAAuB;;;AACvB;EAAuB;;;AAEzB;EACP;;AACA;EACE;EACA;EACA;EACA;;AAES;EAAsB;;;AACtB;EAAuB;;;AACvB;EAAsB;;;AACtB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AACrB;EAAqB;;;AAOlC;EACE;EACA;EACA,uBACA;;AAYA;EACE;EACA;;AAES;EAAoB;;;AACpB;EAAuB;;;AACvB;EAA2B;;;AAC3B;EAA4B;;;AAC5B;EAA4B;;;AAC5B;EAA6B;;;AAC7B;EAAmB;;;AAE5B;EACW;IAAuB;;EACvB;IAA2B;;EAC3B;IAA4B;;EAC5B;IAA4B;;EAC5B;IAA6B;;EAG3B;IAAuB;;EACvB;IAA2B;;EAC3B;IAA4B;;EAC5B;IAA4B;;EAC5B;IAA6B;;;AAQhD;EACE;EACA;;AAES;EAAkB;;;AAClB;EAAkB;;;AAMhB;EAAgB;;;AAChB;EAAuB;;;AACvB;EAAsB;;;AACtB;EAAoB;;;AACpB;EAA2B;;;AAC3B;EAA0B;;;AAC1B;EAAuB;;;AACvB;EAA6B;;;AAC7B;EAA6B;;;AAOtC;EAAI;;AACJ;EAAoB","file":"background-wrapper.css"}
0 2 
\ No newline at end of file
public/css/background-wrapper.min.css
History View file @7214d4d
1 3 
new file mode 100644
... ... 
@@ -0,0 +1,5 @@
1 
+:root{--vr-bw-height-small:240px;--vr-bw-height-medium:480px;--vr-bw-height-large:720px;--vr-bw-bgcolor-1:#f0f0f0;--vr-bw-bgcolor-2:#777777;--vr-bw-bgcolor-3:#323232;--vr-bw-color-inverted:#FFF;--vr-bw-color-headline-inverted:#FFF;--vr-bw-padding-small:3rem;--vr-bw-padding-medium:5rem;--vr-bw-padding-large:8rem;--vr-bw-padding-inline:1rem;--vr-bw-indent-max-width:760px;--vr-bw-content-max-width:1120px;--vr-bw-breakout-max-width:1480px;--vr-bw-content-size:calc(
2 
+    (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
3 
+  );--vr-bw-breakout-size:calc(
4 
+    (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2
5 
+  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg{display:flow-root}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content;position:relative}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}
0 6 
\ No newline at end of file
public/css/background-wrapper.scss
History View file @7214d4d
1 7 
new file mode 100644
... ... 
@@ -0,0 +1,243 @@
1 
+:root {
2 
+  /* Heights */
3 
+  --vr-bw-height-small: 240px;
4 
+  --vr-bw-height-medium: 480px;
5 
+  --vr-bw-height-large: 720px;
6 
+  /* Colors */
7 
+  --vr-bw-bgcolor-1: #f0f0f0;
8 
+  --vr-bw-bgcolor-2: #777777;
9 
+  --vr-bw-bgcolor-3: #323232;
10 
+  --vr-bw-color-inverted: #FFF;
11 
+  --vr-bw-color-headline-inverted: #FFF;
12 
+  /* Padding */
13 
+  --vr-bw-padding-small: 3rem;
14 
+  --vr-bw-padding-medium: 5rem;
15 
+  --vr-bw-padding-large: 8rem;
16 
+  /* Width */
17 
+  --vr-bw-padding-inline: 1rem;
18 
+  --vr-bw-indent-max-width: 760px;
19 
+  --vr-bw-content-max-width: 1120px;
20 
+  --vr-bw-breakout-max-width: 1480px;
21 
+  --vr-bw-content-size: calc(
22 
+    (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
23 
+  );
24 
+  --vr-bw-breakout-size: calc(
25 
+    (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2
26 
+  );
27 
+
28 
+  @media screen and (max-width: 599px) {
29 
+    --vr-bw-padding-inline: .5rem;
30 
+  }
31 
+
32 
+}
33 
+
34 
+.content-background-wrapper {
35 
+  position: relative;
36 
+
37 
+  /* Background base */
38 
+  .content-background-wrapper-bg {
39 
+    position: absolute;
40 
+    inset: 0;
41 
+
42 
+    figure {
43 
+
44 
+    }
45 
+    img,
46 
+    video {
47 
+      position: absolute;
48 
+      inset: 0;
49 
+      object-fit: cover;
50 
+      object-position: 50% 50%;
51 
+      display: block;
52 
+      width: 100%;
53 
+      height: 100%;
54 
+    }
55 
+  }
56 
+
57 
+  /* Background scaling */
58 
+  .content-background-wrapper-bg {
59 
+    img,
60 
+    video {
61 
+      @at-root .-bg-size-contain#{&} { object-fit: contain; }
62 
+      @at-root .-bg-size-stretch#{&} { object-fit: fill; }
63 
+      @at-root .-bg-size-auto#{&} { object-fit: none; }
64 
+    }
65 
+  }
66 
+
67 
+  /* Background position */
68 
+  .content-background-wrapper-bg {
69 
+    img,
70 
+    video {
71 
+      @at-root .-bg-pos-0-0#{&} { object-position: 0 0; }
72 
+      @at-root .-bg-pos-50-0#{&} { object-position: 50% 0; }
73 
+      @at-root .-bg-pos-100-0#{&} { object-position: 100% 0; }
74 
+      @at-root .-bg-pos-0-50#{&} { object-position: 0 50%; }
75 
+      @at-root .-bg-pos-50-50#{&} { object-position: 50% 50%; }
76 
+      @at-root .-bg-pos-100-50#{&} { object-position: 100% 50%; }
77 
+      @at-root .-bg-pos-0-100#{&} { object-position: 0 100%; }
78 
+      @at-root .-bg-pos-50-100#{&} { object-position: 50% 100%; }
79 
+      @at-root .-bg-pos-100-100#{&} { object-position: 100% 100%; }
80 
+    }
81 
+  }
82 
+
83 
+  /* Background opacity */
84 
+  .content-background-wrapper-bg {
85 
+    @at-root .-bg-opacity-10#{&} { opacity: .1 }
86 
+    @at-root .-bg-opacity-20#{&} { opacity: .2 }
87 
+    @at-root .-bg-opacity-30#{&} { opacity: .3 }
88 
+    @at-root .-bg-opacity-40#{&} { opacity: .4 }
89 
+    @at-root .-bg-opacity-50#{&} { opacity: .5 }
90 
+    @at-root .-bg-opacity-60#{&} { opacity: .6 }
91 
+    @at-root .-bg-opacity-70#{&} { opacity: .7 }
92 
+    @at-root .-bg-opacity-80#{&} { opacity: .8 }
93 
+    @at-root .-bg-opacity-90#{&} { opacity: .9 }
94 
+    @at-root .-bg-opacity-100#{&} { opacity: 1 }
95 
+  }
96 
+
97 
+  /* Background color */
98 
+  &.-alt-color-1 { background-color: var(--vr-bw-bgcolor-1); }
99 
+  &.-alt-color-2 { background-color: var(--vr-bw-bgcolor-2); }
100 
+  &.-alt-color-3 { background-color: var(--vr-bw-bgcolor-3); }
101 
+  &.-alt-color-black {
102 
+    background-color: #000;
103 
+
104 
+    .content-background-wrapper-fg {
105 
+      &,
106 
+      h1,h2,h3,h4,h5,h6 {
107 
+        color: #FFFFFF;
108 
+      }
109 
+    }
110 
+  }
111 
+  &.-alt-color-white {
112 
+    background-color: white;
113 
+
114 
+    .content-background-wrapper-fg {
115 
+      &,
116 
+      h1,h2,h3,h4,h5,h6 {
117 
+        color: #000000;
118 
+      }
119 
+    }
120 
+  }
121 
+
122 
+  /* Foreground base */
123 
+  .content-background-wrapper-fg {
124 
+    position: relative;
125 
+    box-sizing: border-box;
126 
+  }
127 
+
128 
+  /* Height */
129 
+  .content-background-wrapper-fg {
130 
+    @at-root .-mh-small#{&} { min-height: var(--vr-bw-height-small); }
131 
+    @at-root .-mh-medium#{&} { min-height: var(--vr-bw-height-medium); }
132 
+    @at-root .-mh-large#{&} { min-height: var(--vr-bw-height-large); }
133 
+    @at-root .-mh-vh#{&} {
134 
+      @at-root .-mh-viewport-100#{&} { min-height: 100svh; }
135 
+      @at-root .-mh-viewport-66#{&} { min-height: 66.666svh; }
136 
+      @at-root .-mh-viewport-50#{&} { min-height: 50svh; }
137 
+      @at-root .-mh-viewport-33#{&} { min-height: 33.333svh; }
138 
+    }
139 
+    @at-root .-mh-ratio#{&} {
140 
+      display: flow-root;
141 
+      &:before {
142 
+        display: table;
143 
+        content: "";
144 
+        padding-top: 100%;
145 
+        float: left;
146 
+
147 
+        @at-root .-mh-ratio-21-9#{&} { padding-top: 42.857%; }
148 
+        @at-root .-mh-ratio-16-10#{&} { padding-top: 62.5%; }
149 
+        @at-root .-mh-ratio-16-9#{&} { padding-top: 56.25%; }
150 
+        @at-root .-mh-ratio-8-3#{&} { padding-top: 37.5%; }
151 
+        @at-root .-mh-ratio-5-4#{&} { padding-top: 80%; }
152 
+        @at-root .-mh-ratio-4-3#{&} { padding-top: 75%; }
153 
+        @at-root .-mh-ratio-3-2#{&} { padding-top: 66.666%; }
154 
+        @at-root .-mh-ratio-5-1#{&} { padding-top: 20%; }
155 
+        @at-root .-mh-ratio-4-1#{&} { padding-top: 25%; }
156 
+        @at-root .-mh-ratio-3-1#{&} { padding-top: 33.333%; }
157 
+        @at-root .-mh-ratio-2-1#{&} { padding-top: 50%; }
158 
+        @at-root .-mh-ratio-1-1#{&} { padding-top: 100%; }
159 
+      }
160 
+    }
161 
+  }
162 
+
163 
+  /* Content width */
164 
+  .content-background-wrapper-fg {
165 
+    .content-grid {
166 
+      width: 100%;
167 
+      display: grid;
168 
+      grid-template-columns:
169 
+      [full-width-start] minmax(var(--vr-bw-padding-inline), 1fr)
170 
+      [breakout-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size))
171 
+      [content-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size))
172 
+      [indent-start] min(
173 
+        100% - (var(--vr-bw-padding-inline) * 6),
174 
+        var(--vr-bw-indent-max-width)
175 
+      )
176 
+      [indent-end]
177 
+      minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [content-end]
178 
+      minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [breakout-end]
179 
+      minmax(var(--vr-bw-padding-inline), 1fr) [full-width-end];
180 
+
181 
+      > .fragments {
182 
+        grid-column: content;
183 
+        position: relative;
184 
+
185 
+        @at-root .-width-small#{&} { grid-column: indent; }
186 
+        @at-root .-width-extended#{&} { grid-column: breakout; }
187 
+        @at-root .-width-default-left#{&} { grid-column: breakout / indent; }
188 
+        @at-root .-width-default-right#{&} { grid-column: indent / breakout; }
189 
+        @at-root .-width-extended-left#{&} { grid-column: breakout / content; }
190 
+        @at-root .-width-extended-right#{&} { grid-column: content / breakout; }
191 
+        @at-root .-width-full#{&} { grid-column: full-width; }
192 
+
193 
+        @media screen and (max-width: 599px) {
194 
+          @at-root .-width-extended#{&} { grid-column: full-width; }
195 
+          @at-root .-width-default-left#{&} { grid-column: full-width / content; }
196 
+          @at-root .-width-default-right#{&} { grid-column: content / full-width; }
197 
+          @at-root .-width-extended-left#{&} { grid-column: full-width / content; }
198 
+          @at-root .-width-extended-right#{&} { grid-column: content / full-width; }
199 
+
200 
+          @at-root .-add-text-indent#{&} {
201 
+            @at-root .-width-extended#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2); }
202 
+            @at-root .-width-default-left#{&} { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); }
203 
+            @at-root .-width-default-right#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; }
204 
+            @at-root .-width-extended-left#{&} { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); }
205 
+            @at-root .-width-extended-right#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; }
206 
+          }
207 
+        }
208 
+      }
209 
+    }
210 
+  }
211 
+
212 
+  /* Vertical alignment */
213 
+  .content-background-wrapper-fg {
214 
+    display: flex;
215 
+    align-items: flex-start;
216 
+
217 
+    @at-root .-va-center#{&} { align-items: center; }
218 
+    @at-root .-va-bottom#{&} { align-items: flex-end; }
219 
+  }
220 
+
221 
+  /* Padding */
222 
+  .content-background-wrapper-fg {
223 
+    .fragments {
224 
+      @at-root .-padding#{&} { padding: var(--vr-bw-padding-small) 0; }
225 
+      @at-root .-padding-medium#{&} { padding: var(--vr-bw-padding-medium) 0; }
226 
+      @at-root .-padding-large#{&} { padding: var(--vr-bw-padding-large) 0; }
227 
+      @at-root .-padding-top#{&} { padding: var(--vr-bw-padding-small) 0 0; }
228 
+      @at-root .-padding-top-medium#{&} { padding: var(--vr-bw-padding-medium) 0 0; }
229 
+      @at-root .-padding-top-large#{&} { padding: var(--vr-bw-padding-large) 0 0; }
230 
+      @at-root .-padding-bottom#{&} { padding: 0 0 var(--vr-bw-padding-small); }
231 
+      @at-root .-padding-bottom-medium#{&} {padding:  0 0 var(--vr-bw-padding-medium); }
232 
+      @at-root .-padding-bottom-large#{&} { padding: 0 0 var(--vr-bw-padding-large); }
233 
+    }
234 
+  }
235 
+
236 
+  /* Color */
237 
+  .content-background-wrapper-fg {
238 
+    @at-root .-color-inverted#{&} {
239 
+      & { color: var(--vr-bw-color-inverted) }
240 
+      h1,h2,h3,h4,h5,h6 { color: var(--vr-bw-color-headline-inverted) }
241 
+    }
242 
+  }
243 
+}
src/Controller/ContentElement/BackgroundWrapperController.php
History View file @7214d4d
0 244 
new file mode 100644
... ... 
@@ -0,0 +1,138 @@
1 
+<?php
2 
+
3 
+declare(strict_types=1);
4 
+
5 
+namespace vonRotenberg\CoretoolsBundle\Controller\ContentElement;
6 
+
7 
+use Contao\ContentModel;
8 
+use Contao\CoreBundle\Controller\ContentElement\AbstractContentElementController;
9 
+use Contao\CoreBundle\DependencyInjection\Attribute\AsContentElement;
10 
+use Contao\CoreBundle\Twig\FragmentTemplate;
11 
+use Contao\FilesModel;
12 
+use Contao\System;
13 
+use Symfony\Component\HttpFoundation\Request;
14 
+use Symfony\Component\HttpFoundation\Response;
15 
+
16 
+#[AsContentElement(category: 'miscellaneous', nestedFragments: true)]
17 
+class BackgroundWrapperController extends AbstractContentElementController
18 
+{
19 
+    protected function getResponse(FragmentTemplate $template, ContentModel $model, Request $request): Response
20 
+    {
21 
+        $GLOBALS['TL_CSS']['vr_coretools'] = 'bundles/vonrotenbergcoretools/css/background-wrapper.min.css|static';
22 
+        $arrData = array_merge($template->getData(),[
23 
+            'element_css_classes' => trim($template->element_css_classes . ' ' . $this->getWrapperClasses($model))
24 
+        ]);
25 
+
26 
+        if ($model->vr_bw_addImage)
27 
+        {
28 
+            $objFile = FilesModel::findByUuid($model->vr_bw_bgSRC);
29 
+
30 
+            if ($objFile !== null && is_file(System::getContainer()->getParameter('kernel.project_dir') . '/' . $objFile->path))
31 
+            {
32 
+
33 
+                if (!in_array($objFile->extension,['mp4', 'm4v', 'mov', 'wmv', 'webm', 'ogv']))
34 
+                {
35 
+                    $figure = System::getContainer()
36 
+                        ->get('contao.image.studio')
37 
+                        ->createFigureBuilder()
38 
+                        ->from($objFile)
39 
+                        ->setSize($model->size)
40 
+                        ->buildIfResourceExists();
41 
+
42 
+                    if ($figure !== null && $model->vr_bw_minHeight === '-mh-bgimage')
43 
+                    {
44 
+                        $imageData = $figure->getImage()->getPicture()->getImg();
45 
+
46 
+                        $ratio = round(100 / $imageData['width'] * $imageData['height'],3);
47 
+                        $arrData['minHeight_ratio'] = $ratio;
48 
+                    }
49 
+
50 
+                    $arrData['background_figure'] = $figure;
51 
+                } else {
52 
+                    $arrData['background_video'] = [
53 
+                        'path' => System::getContainer()->get('contao.assets.files_context')->getStaticUrl() . $objFile->path,
54 
+                        'extension' => $objFile->extension
55 
+                    ];
56 
+                }
57 
+            }
58 
+        }
59 
+
60 
+        $template->setData($arrData);
61 
+
62 
+        return $template->getResponse();
63 
+    }
64 
+
65 
+    /**
66 
+     * @param ContentModel $model
67 
+     *
68 
+     * @return string
69 
+     */
70 
+    protected function getWrapperClasses(ContentModel $model): string
71 
+    {
72 
+        $arrCssClasses = [];
73 
+
74 
+        // Add background image classes
75 
+        if ($model->vr_bw_addImage)
76 
+        {
77 
+            if (!empty($model->vr_bw_bgSize))
78 
+            {
79 
+                $arrCssClasses[] = $model->vr_bw_bgSize;
80 
+            }
81 
+            if (!empty($model->vr_bw_bgPos))
82 
+            {
83 
+                $arrCssClasses[] = $model->vr_bw_bgPos;
84 
+            }
85 
+            if (!empty($model->vr_bw_bgOpacity))
86 
+            {
87 
+                $arrCssClasses[] = $model->vr_bw_bgOpacity;
88 
+            }
89 
+        }
90 
+        if (!empty($model->vr_bw_bgColor))
91 
+        {
92 
+            $arrCssClasses[] = $model->vr_bw_bgColor;
93 
+        }
94 
+        if ($model->vr_bw_bgWidthRestriction)
95 
+        {
96 
+            $arrCssClasses[] = '-bg-width-restrict';
97 
+        }
98 
+
99 
+        // Add content area classes
100 
+        if (!empty($model->vr_bw_width))
101 
+        {
102 
+            $arrCssClasses[] = $model->vr_bw_width;
103 
+        }
104 
+        if (!empty($model->vr_bw_minHeight))
105 
+        {
106 
+            $arrCssClasses[] = $model->vr_bw_minHeight;
107 
+
108 
+            if ($model->vr_bw_minHeight == '-mh-vh' && !empty($model->vr_bw_mh_viewport))
109 
+            {
110 
+                $arrCssClasses[] = $model->vr_bw_mh_viewport;
111 
+            }
112 
+            if ($model->vr_bw_minHeight == '-mh-ratio' && !empty($model->vr_bw_mh_ratio))
113 
+            {
114 
+                $arrCssClasses[] = $model->vr_bw_mh_ratio;
115 
+            }
116 
+        }
117 
+        if (!empty($model->vr_bw_vAlign))
118 
+        {
119 
+            $arrCssClasses[] = $model->vr_bw_vAlign;
120 
+        }
121 
+        if ($model->vr_bw_colorInvert)
122 
+        {
123 
+            $arrCssClasses[] = '-color-inverted';
124 
+        }
125 
+        if (
126 
+            in_array($model->vr_bw_width,['-width-extended','-width-default-left','-width-default-right','-width-extended-left','-width-extended-right'])
127 
+            && $model->vr_bw_widthText)
128 
+        {
129 
+            $arrCssClasses[] = '-add-text-indent';
130 
+        }
131 
+        if (!empty($model->vr_bw_padding))
132 
+        {
133 
+            $arrCssClasses[] = $model->vr_bw_padding;
134 
+        }
135 
+
136 
+        return implode(' ', $arrCssClasses);
137 
+    }
138 
+}