Render widget groups in the back end with CSS grid (see #7087)

Description
-----------

Reviving #2053 with this for Contao ^5.3 and the new introduced classes (w25, w33, w50, w66, w75).
Could be merged with additional changes and would be BC-compatible due to the `widget-group` wrapper.

Keep in mind this is the reworked CSS-Grid based on @m-vo's solution for the backend widgets as discussed in the contao call for #1024.

___

#### Rewrite

Also grouped most media-queries so it's mobile first (not the split-button tho, doesn't make sense for that one)

___

#### Additional classes

Introcuded `.w16` on that occasion

___

#### Custom properties

Following custom properties were added:

| Custom property | Description |
| :- | :- |
| `--widget-col-amount` | Column amount of the backend-grid<br>_(Defaults to 12)_ |
| `--widget-cols` | Amount of space that this takes per row<br>_(Can be used to create more specific widget classes)_ |
| `--widget-gap-rows` | Row gap for widget-group container |
| `--widget-gap-cols` | Column gap for widget-group container |

Commits
-------

df706f1 Rewrite #2053 for Contao 5.3 (5.x)
13ff350 Mobile and tablet styles for grid widgets
67d15bd Revert editorConfig
8524095 Add a size range for grid template columns
84ca874 Update grid-layout
b8fab3f Use `grid-column-end` for widget cols
abd0710 Rebuild the assets
608b93e Use custom properties for backend widgets and introduce `w16`
87c308d Mobile first + CS
ef4799a Update widget layout
1ec3509 Revert the unrelated changes
5c0d886 Consider more classes for backwards compatibility
937c34b Run the tools
8ab3b5a Use `align-items: center` instead of `.m12`
00c3545 Use `align-items: center` instead of `.m12`
0e6e8ff Consider `m12` for backwards compatibility
0ad58fb Remove unnecessary margins for `.tl_checkbox`
c0f6333 Rebuild the assets

Co-authored-by: leofeyer <1192057+leofeyer@users.noreply.github.com>

core-bundle/contao/drivers/DC_File.php

@@ -185,7 +185,7 @@ public function edit()
 					}
 				}
 
-				$return .= "\n\n" . '<fieldset class="' . $class . ($legend ? '' : ' nolegend') . '" data-controller="contao--toggle-fieldset" data-contao--toggle-fieldset-id-value="' . $key . '" data-contao--toggle-fieldset-table-value="' . $this->strTable . '" data-contao--toggle-fieldset-collapsed-class="collapsed" data-contao--jump-targets-target="section" data-contao--jump-targets-label-value="' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '" data-action="contao--jump-targets:scrollto->contao--toggle-fieldset#open">' . $legend;
+				$return .= "\n\n" . '<fieldset class="' . $class . ($legend ? '' : ' nolegend') . '" data-controller="contao--toggle-fieldset" data-contao--toggle-fieldset-id-value="' . $key . '" data-contao--toggle-fieldset-table-value="' . $this->strTable . '" data-contao--toggle-fieldset-collapsed-class="collapsed" data-contao--jump-targets-target="section" data-contao--jump-targets-label-value="' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '" data-action="contao--jump-targets:scrollto->contao--toggle-fieldset#open">' . $legend . "\n" . '<div class="widget-group">';
 
 				// Build rows of the current box
 				foreach ($v as $vv)
@@ -207,7 +207,7 @@ public function edit()
 					{
 						$thisId = 'sub_' . substr($vv, 1, -1);
 						$blnAjax = $ajaxId == $thisId && Environment::get('isAjaxRequest');
-						$return .= "\n  " . '<div id="' . $thisId . '" class="subpal cf">';
+						$return .= "\n  " . '<div id="' . $thisId . '" class="subpal widget-group">';
 
 						continue;
 					}
@@ -246,7 +246,7 @@ public function edit()
 				}
 
 				$class = 'tl_box';
-				$return .= "\n" . '</fieldset>';
+				$return .= "\n</div>\n</fieldset>";
 			}
 		}
 

core-bundle/contao/drivers/DC_Table.php

@@ -2060,7 +2060,7 @@ public function edit($intId=null, $ajaxId=null)
 					}
 				}
 
-				$return .= "\n\n" . '<fieldset class="' . $class . ($legend ? '' : ' nolegend') . '" data-controller="contao--toggle-fieldset" data-contao--toggle-fieldset-id-value="' . $key . '" data-contao--toggle-fieldset-table-value="' . $this->strTable . '" data-contao--toggle-fieldset-collapsed-class="collapsed" data-contao--jump-targets-target="section" data-contao--jump-targets-label-value="' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '" data-action="contao--jump-targets:scrollto->contao--toggle-fieldset#open">' . $legend;
+				$return .= "\n\n" . '<fieldset class="' . $class . ($legend ? '' : ' nolegend') . '" data-controller="contao--toggle-fieldset" data-contao--toggle-fieldset-id-value="' . $key . '" data-contao--toggle-fieldset-table-value="' . $this->strTable . '" data-contao--toggle-fieldset-collapsed-class="collapsed" data-contao--jump-targets-target="section" data-contao--jump-targets-label-value="' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '" data-action="contao--jump-targets:scrollto->contao--toggle-fieldset#open">' . $legend . "\n" . '<div class="widget-group">';
 				$thisId = '';
 
 				// Build rows of the current box
@@ -2082,7 +2082,7 @@ public function edit($intId=null, $ajaxId=null)
 
 							if (\count($arrAjax) > 1)
 							{
-								$current = "\n" . '<div id="' . $thisId . '" class="subpal cf">' . $arrAjax[$thisId] . '</div>';
+								$current = "\n" . '<div id="' . $thisId . '" class="subpal widget-group">' . $arrAjax[$thisId] . '</div>';
 								unset($arrAjax[$thisId]);
 								end($arrAjax);
 								$thisId = key($arrAjax);
@@ -2100,7 +2100,7 @@ public function edit($intId=null, $ajaxId=null)
 						$thisId = 'sub_' . substr($vv, 1, -1);
 						$arrAjax[$thisId] = '';
 						$blnAjax = ($ajaxId == $thisId && Environment::get('isAjaxRequest')) ? true : $blnAjax;
-						$return .= "\n" . '<div id="' . $thisId . '" class="subpal cf">';
+						$return .= "\n" . '<div id="' . $thisId . '" class="subpal widget-group">';
 
 						continue;
 					}
@@ -2139,7 +2139,7 @@ public function edit($intId=null, $ajaxId=null)
 				}
 
 				$class = 'tl_box';
-				$return .= "\n" . '</fieldset>';
+				$return .= "\n</div>\n</fieldset>";
 			}
 
 			$this->submit();
@@ -2598,7 +2598,7 @@ public function editAll($intId=null, $ajaxId=null)
 							$thisId = 'sub_' . substr($v, 1, -1) . '_' . $id;
 							$arrAjax[$thisId] = '';
 							$blnAjax = ($ajaxId == $thisId && Environment::get('isAjaxRequest')) ? true : $blnAjax;
-							$box .= "\n  " . '<div id="' . $thisId . '" class="subpal cf">';
+							$box .= "\n  " . '<div id="' . $thisId . '" class="subpal widget-group">';
 
 							continue;
 						}

core-bundle/contao/themes/flexible/entrypoints.json

@@ -2,37 +2,37 @@
   "entrypoints": {
     "backend": {
       "css": [
-        "/system/themes/flexible/backend.49ffe8ed.css"
+        "/system/themes/flexible/backend.353c4100.css"
       ]
     },
     "confirm": {
       "css": [
-        "/system/themes/flexible/confirm.c2996dd4.css"
+        "/system/themes/flexible/confirm.991697ac.css"
       ]
     },
     "conflict": {
       "css": [
-        "/system/themes/flexible/conflict.aa6b9c95.css"
+        "/system/themes/flexible/conflict.381df210.css"
       ]
     },
     "diff": {
       "css": [
-        "/system/themes/flexible/diff.171af75f.css"
+        "/system/themes/flexible/diff.f1c62306.css"
       ]
     },
     "help": {
       "css": [
-        "/system/themes/flexible/help.2ee3bcf2.css"
+        "/system/themes/flexible/help.cdc2c472.css"
       ]
     },
     "login": {
       "css": [
-        "/system/themes/flexible/login.fb2833be.css"
+        "/system/themes/flexible/login.9947cbb8.css"
       ]
     },
     "popup": {
       "css": [
-        "/system/themes/flexible/popup.4728c2fc.css"
+        "/system/themes/flexible/popup.d743ea46.css"
       ]
     },
     "tinymce": {

core-bundle/contao/themes/flexible/manifest.json

@@ -1,20 +1,20 @@
 {
-  "backend.css": "/system/themes/flexible/backend.49ffe8ed.css",
-  "confirm.css": "/system/themes/flexible/confirm.c2996dd4.css",
-  "conflict.css": "/system/themes/flexible/conflict.aa6b9c95.css",
-  "diff.css": "/system/themes/flexible/diff.171af75f.css",
-  "help.css": "/system/themes/flexible/help.2ee3bcf2.css",
-  "login.css": "/system/themes/flexible/login.fb2833be.css",
-  "popup.css": "/system/themes/flexible/popup.4728c2fc.css",
+  "backend.css": "/system/themes/flexible/backend.353c4100.css",
+  "confirm.css": "/system/themes/flexible/confirm.991697ac.css",
+  "conflict.css": "/system/themes/flexible/conflict.381df210.css",
+  "diff.css": "/system/themes/flexible/diff.f1c62306.css",
+  "help.css": "/system/themes/flexible/help.cdc2c472.css",
+  "login.css": "/system/themes/flexible/login.9947cbb8.css",
+  "popup.css": "/system/themes/flexible/popup.d743ea46.css",
   "tinymce.css": "/system/themes/flexible/tinymce.e5009f94.css",
   "tinymce-dark.css": "/system/themes/flexible/tinymce-dark.596023db.css",
-  "backend.49ffe8ed.css.map": "/system/themes/flexible/backend.49ffe8ed.css.map",
-  "confirm.c2996dd4.css.map": "/system/themes/flexible/confirm.c2996dd4.css.map",
-  "conflict.aa6b9c95.css.map": "/system/themes/flexible/conflict.aa6b9c95.css.map",
-  "diff.171af75f.css.map": "/system/themes/flexible/diff.171af75f.css.map",
-  "help.2ee3bcf2.css.map": "/system/themes/flexible/help.2ee3bcf2.css.map",
-  "login.fb2833be.css.map": "/system/themes/flexible/login.fb2833be.css.map",
-  "popup.4728c2fc.css.map": "/system/themes/flexible/popup.4728c2fc.css.map",
+  "backend.353c4100.css.map": "/system/themes/flexible/backend.353c4100.css.map",
+  "confirm.991697ac.css.map": "/system/themes/flexible/confirm.991697ac.css.map",
+  "conflict.381df210.css.map": "/system/themes/flexible/conflict.381df210.css.map",
+  "diff.f1c62306.css.map": "/system/themes/flexible/diff.f1c62306.css.map",
+  "help.cdc2c472.css.map": "/system/themes/flexible/help.cdc2c472.css.map",
+  "login.9947cbb8.css.map": "/system/themes/flexible/login.9947cbb8.css.map",
+  "popup.d743ea46.css.map": "/system/themes/flexible/popup.d743ea46.css.map",
   "tinymce.e5009f94.css.map": "/system/themes/flexible/tinymce.e5009f94.css.map",
   "tinymce-dark.596023db.css.map": "/system/themes/flexible/tinymce-dark.596023db.css.map"
 }