@themarioga/grid-editor 4.0.0 → 5.0.0

package/dist/grideditor.css

@@ -28,7 +28,10 @@
 }
 .ge-mainControls .ge-addRowGroup .ge-row-icon {
   width: 48px;
+  /* A button shrinks to its content, and an equal column has none */
+  flex: 0 0 48px;
   margin: 0;
+  /* Nothing inside to be as wide as */
 }
 .ge-mainControls .ge-addRowGroup .ge-row-icon .column {
   height: 10px;
@@ -36,6 +39,9 @@
   padding: 0;
   border-left: 2px solid #f4f4f4;
 }
+.ge-mainControls .ge-addRowGroup .ge-row-icon .col-auto {
+  min-width: 8px;
+}
 .ge-mainControls .ge-layout-mode {
   margin-left: 5px;
 }
@@ -155,6 +161,8 @@
   margin: 0 -5px 5px;
   display: block;
   width: calc(100% + 2 * 5px);
+  /* Its node may align text, and the drawer's tools would follow */
+  text-align: left;
 }
 .ge-canvas.ge-editing .ge-tools-drawer.ge-picker-open {
   z-index: 200;
@@ -171,6 +179,7 @@
   padding: 5px;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: none;
+  /* The utility plugins' fields, folded under one toggle */
 }
 .ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a {
   color: #333;
@@ -194,6 +203,74 @@
 .ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-classes {
   width: 200px;
 }
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities {
+  margin-top: 5px;
+  font-size: 11px;
+  /* The spacing plugin: a side and a value per group */
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle {
+  color: #333;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle::before {
+  content: '\25B8';
+  display: inline-block;
+  width: 1em;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-toggle::before {
+  content: '\25BE';
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-body {
+  display: none;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-top: 4px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-body {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 0;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility select {
+  border: 1px solid #7F7F7F;
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 1px 2px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility-note {
+  color: #666;
+  font-size: 10px;
+  max-width: 160px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group {
+  display: inline-flex;
+  flex-direction: column;
+  /* The group names the field once */
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group > .ge-spacing-side {
+  border: 1px solid #7F7F7F;
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 1px 2px;
+  margin-bottom: 2px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group .ge-utility > .ge-utility-label {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-gutter {
+  flex-basis: 100%;
+  color: #666;
+  font-size: 10px;
+}
 .ge-canvas.ge-editing .row {
   background-color: #efefef;
   border: 1px solid #999999;
@@ -220,6 +297,9 @@
   position: relative;
 }
 .ge-canvas.ge-editing .column > .ge-tools-drawer {
+  /* The drawer is not content: an auto column is as wide as what
+               it holds, and its tools would make it as wide as a drawer */
+  contain: inline-size;
   background: #afd5ea;
 }
 .ge-canvas.ge-editing .column > .ge-tools-drawer a {
@@ -262,6 +342,7 @@
   background: rgba(47, 164, 231, 0.08);
   border: 1px solid rgba(47, 164, 231, 0.4);
   border-radius: 3px;
+  /* col and col-auto: a word, not a number */
   /* Wider than what is left of the row: allowed, but said so */
 }
 .ge-canvas.ge-editing .ge-size-picker > .ge-size:hover {
@@ -269,6 +350,11 @@
   border-color: #2FA4E7;
   color: #fff;
 }
+.ge-canvas.ge-editing .ge-size-picker > .ge-size.ge-size-flex {
+  width: auto;
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .ge-canvas.ge-editing .ge-size-picker > .ge-size.ge-size-tight {
   color: #999;
   background: transparent;
@@ -451,6 +537,11 @@
 .ge-canvas.ge-layout-all {
   max-width: none;
 }
+/*
+ * col and col-auto, in the order Bootstrap writes them: before the numbered
+ * sizes, so that of two classes for one tier the number wins, as it does on
+ * the real page.
+ */
 /*
  * Switching a tier off means giving the column back to bootstrap's default
  * for a row child - full width, stacked - which is what a browser really
@@ -470,6 +561,12 @@
            specificity, so the order they are written in is the rule. */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-xs .col-sm,
+.ge-canvas.ge-layout-xs .col-sm-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-sm-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -563,6 +660,12 @@
 .ge-canvas.ge-layout-xs .offset-sm-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-md,
+.ge-canvas.ge-layout-xs .col-md-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-md-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -656,6 +759,12 @@
 .ge-canvas.ge-layout-xs .offset-md-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-lg,
+.ge-canvas.ge-layout-xs .col-lg-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-lg-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -749,6 +858,12 @@
 .ge-canvas.ge-layout-xs .offset-lg-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-xl,
+.ge-canvas.ge-layout-xs .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -842,6 +957,12 @@
 .ge-canvas.ge-layout-xs .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col-xxl,
+.ge-canvas.ge-layout-xs .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -935,6 +1056,15 @@
 .ge-canvas.ge-layout-xs .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xs .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xs .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1041,6 +1171,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-sm .col-md,
+.ge-canvas.ge-layout-sm .col-md-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-md-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1134,6 +1270,12 @@
 .ge-canvas.ge-layout-sm .offset-md-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col-lg,
+.ge-canvas.ge-layout-sm .col-lg-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-lg-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1227,6 +1369,12 @@
 .ge-canvas.ge-layout-sm .offset-lg-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col-xl,
+.ge-canvas.ge-layout-sm .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1320,6 +1468,12 @@
 .ge-canvas.ge-layout-sm .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col-xxl,
+.ge-canvas.ge-layout-sm .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1413,6 +1567,15 @@
 .ge-canvas.ge-layout-sm .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-sm .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1506,6 +1669,15 @@
 .ge-canvas.ge-layout-sm .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-sm .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-sm .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1613,6 +1785,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-md .col-lg,
+.ge-canvas.ge-layout-md .col-lg-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-lg-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1706,6 +1884,12 @@
 .ge-canvas.ge-layout-md .offset-lg-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-md .col-xl,
+.ge-canvas.ge-layout-md .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1799,6 +1983,12 @@
 .ge-canvas.ge-layout-md .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-md .col-xxl,
+.ge-canvas.ge-layout-md .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -1892,6 +2082,15 @@
 .ge-canvas.ge-layout-md .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-md .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -1985,6 +2184,15 @@
 .ge-canvas.ge-layout-md .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-md .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2078,6 +2286,15 @@
 .ge-canvas.ge-layout-md .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-md .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-md .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2186,6 +2403,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-lg .col-xl,
+.ge-canvas.ge-layout-lg .col-xl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-xl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -2279,6 +2502,12 @@
 .ge-canvas.ge-layout-lg .offset-xl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-lg .col-xxl,
+.ge-canvas.ge-layout-lg .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -2372,6 +2601,15 @@
 .ge-canvas.ge-layout-lg .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-lg .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2465,6 +2703,15 @@
 .ge-canvas.ge-layout-lg .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-lg .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2558,6 +2805,15 @@
 .ge-canvas.ge-layout-lg .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-lg .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2651,6 +2907,15 @@
 .ge-canvas.ge-layout-lg .offset-md-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-lg .col-lg {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg .col-lg-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-lg .col-lg-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2760,6 +3025,12 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-xl .col-xxl,
+.ge-canvas.ge-layout-xl .col-xxl-auto {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-xxl-1 {
   flex: 0 0 auto;
   width: 100%;
@@ -2853,6 +3124,15 @@
 .ge-canvas.ge-layout-xl .offset-xxl-11 {
   margin-left: 0;
 }
+.ge-canvas.ge-layout-xl .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -2946,6 +3226,15 @@
 .ge-canvas.ge-layout-xl .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3039,6 +3328,15 @@
 .ge-canvas.ge-layout-xl .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3132,6 +3430,15 @@
 .ge-canvas.ge-layout-xl .offset-md-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-lg {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-lg-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-lg-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3225,6 +3532,15 @@
 .ge-canvas.ge-layout-xl .offset-lg-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xl .col-xl {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl .col-xl-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xl .col-xl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3335,6 +3651,15 @@
   /* this tier applies at the active one, so it is written by the pass below */
   /* this tier applies at the active one, so it is written by the pass below */
 }
+.ge-canvas.ge-layout-xxl .col {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3428,6 +3753,15 @@
 .ge-canvas.ge-layout-xxl .offset-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-sm {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-sm-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-sm-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3521,6 +3855,15 @@
 .ge-canvas.ge-layout-xxl .offset-sm-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-md {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-md-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-md-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3614,6 +3957,15 @@
 .ge-canvas.ge-layout-xxl .offset-md-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-lg {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-lg-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-lg-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3707,6 +4059,15 @@
 .ge-canvas.ge-layout-xxl .offset-lg-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-xl {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-xl-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-xl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3800,6 +4161,15 @@
 .ge-canvas.ge-layout-xxl .offset-xl-11 {
   margin-left: 91.66666667%;
 }
+.ge-canvas.ge-layout-xxl .col-xxl {
+  flex: 1 0 0%;
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl .col-xxl-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
 .ge-canvas.ge-layout-xxl .col-xxl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -3893,3 +4263,242 @@
 .ge-canvas.ge-layout-xxl .offset-xxl-11 {
   margin-left: 91.66666667%;
 }
+/*
+ * The visibility plugin. A node Bootstrap would hide is kept on the canvas -
+ * there would be nothing left to click to show it again - and shown the way
+ * the view sees it instead. The selectors outweigh Bootstrap's d-* classes,
+ * which are !important too.
+ */
+.ge-canvas.ge-editing {
+  /* The all view: hidden at some breakpoints, said in a corner */
+}
+.ge-canvas.ge-editing .ge-visibility {
+  display: block !important;
+}
+.ge-canvas.ge-editing .row.ge-visibility {
+  display: flex !important;
+}
+.ge-canvas.ge-editing .ge-hidden-in-view {
+  opacity: 0.45;
+  background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(0, 0, 0, 0.07) 6px, rgba(0, 0, 0, 0.07) 12px);
+}
+.ge-canvas.ge-editing [data-ge-hidden-in] {
+  position: relative;
+}
+.ge-canvas.ge-editing [data-ge-hidden-in]::after {
+  content: attr(data-ge-hidden-in);
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+/* The order plugin: a column ordered by class in this view says where */
+.ge-canvas.ge-editing .column[data-ge-order]::before {
+  content: attr(data-ge-order);
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  z-index: 1;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(23, 138, 204, 0.85);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+/*
+ * The gutters plugin. A row with gutter classes is drawn with its real
+ * gutters rather than the editor's frame: each column padded by half the
+ * horizontal gutter, and the vertical gutter above each column. Bootstrap
+ * takes the first line's back with a negative top margin on the row, which
+ * here would pull it over the row above, so the row's drawer takes it back
+ * instead and the gap shows between lines of columns only.
+ */
+.ge-canvas.ge-editing .row.ge-gutters {
+  margin-top: 0;
+}
+.ge-canvas.ge-editing .row.ge-gutters > .ge-tools-drawer {
+  margin-top: 0;
+  margin-bottom: calc(5px - var(--bs-gutter-y));
+  /* Bootstrap pads every child of a row by half its gutter, the drawer
+           too; it keeps the padding a row with no gutter class gives it */
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.ge-canvas.ge-editing .row.ge-gutters > .column {
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+}
+.ge-canvas.ge-editing .row.ge-gutters > .column > .ge-tools-drawer {
+  margin-left: calc(var(--bs-gutter-x) * -0.5);
+  margin-right: calc(var(--bs-gutter-x) * -0.5);
+  width: calc(100% + var(--bs-gutter-x));
+}
+/* A row whose row-cols sizes its columns in this view says how many */
+.ge-canvas.ge-editing .row[data-ge-row-cols] {
+  position: relative;
+}
+.ge-canvas.ge-editing .row[data-ge-row-cols]::before {
+  content: attr(data-ge-row-cols);
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  z-index: 1;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+/*
+ * The sections plugin: Bootstrap's containers on the canvas. A section is
+ * framed while editing, and in a breakpoint view each container class gets
+ * the max-width it has at that breakpoint - Bootstrap sets it for the
+ * window, and the window is not what a breakpoint view narrows.
+ */
+.ge-canvas.ge-editing > .ge-section {
+  border: 1px dashed #8a6d3b;
+  margin-bottom: 5px;
+  padding-bottom: 5px;
+}
+.ge-canvas.ge-editing > .ge-section > .ge-section-drawer {
+  background: rgba(138, 109, 59, 0.15);
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+.ge-canvas.ge-editing > .ge-section > .ge-section-drawer > a {
+  color: #785f33;
+}
+/* The width field, in the section's settings panel beside id and classes */
+.ge-canvas.ge-editing .ge-details .ge-section-width {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  font-size: 11px;
+}
+.ge-canvas.ge-editing .ge-details .ge-section-width select {
+  border: 1px solid #7F7F7F;
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 1px 2px;
+}
+.ge-canvas.ge-layout-xs > .container {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-sm {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-md {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-lg {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xs > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container {
+  max-width: 540px;
+}
+.ge-canvas.ge-layout-sm > .container-sm {
+  max-width: 540px;
+}
+.ge-canvas.ge-layout-sm > .container-md {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container-lg {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-sm > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md > .container {
+  max-width: 720px;
+}
+.ge-canvas.ge-layout-md > .container-sm {
+  max-width: 720px;
+}
+.ge-canvas.ge-layout-md > .container-md {
+  max-width: 720px;
+}
+.ge-canvas.ge-layout-md > .container-lg {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-md > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg > .container {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-sm {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-md {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-lg {
+  max-width: 960px;
+}
+.ge-canvas.ge-layout-lg > .container-xl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-lg > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xl > .container {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-sm {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-md {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-lg {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-xl {
+  max-width: 1140px;
+}
+.ge-canvas.ge-layout-xl > .container-xxl {
+  max-width: 100%;
+}
+.ge-canvas.ge-layout-xxl > .container {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-sm {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-md {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-lg {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-xl {
+  max-width: 1320px;
+}
+.ge-canvas.ge-layout-xxl > .container-xxl {
+  max-width: 1320px;
+}