removed #crm-container - https://lab.civicrm.org/extensions/riverlea/…

…-/issues/2

ext/riverlea/README.md

@@ -9,7 +9,8 @@ The extension is licensed under [AGPL-3.0](LICENSE.txt).
 - 0.1 - proof-of-concept, Brunswick, empty theme structure doing just two things: for older CMS interfaces enforces a 100% font-size default to cascade the browser default font-size, and demonstrates a 1rem variable on top of that for some Civi body text sizes. The computed font-size of Civi paragraph and table text should show as 16px in Inspector (for standard setups).
 - 0.2 - adds a bunch of css variables for testing/dev, adds the entirity of the current Greenwich Bootstrap 3 build to start cutting it back, and adds a components directory with initial component 'accordions' (with animated exapnd/close + CSS variables). Separate components files will likely be merged when the extension is moving to testing, to reduce http requests.
 - 0.3 - Backdrop, Drupal7 + Seven, Drupal9 + Claro/Seven, Joomla 4, Standalone, WordPress. Loads with two theme variations/streams: Minetta and Walbrook. Does not cover: front-end layouts, < 1000px screens, Joomla 3, other Drupal admin themes, light/dark modes. 
-- 0.4 - CSS files restructure into `/core/css` and `/streams/[stream-name]/css/` with stream variables defined in `[stream-name]/css/_variables.css`. Variables files are version-numbered - 0.4 with this version. Version numbers should only increase when the CSS Variables in these files change name, are removed or added.
+- 0.4 - CSS files restructure into `/core/css` and `/streams/[stream-name]/css/` with stream variables defined in `[stream-name]/css/_variables.css`. Variables files are version-numbered - 0.4 with this version. *Version numbers should only increase when the CSS Variables in these files change name, are removed or added*.
+- 0.5 - Various fixes follow testing in CiviCamp Hamburg. Instances of `#crm-container` removed or replaced with `.crm-container` - which will impact the cascade order of elements and so have breaking changes (which is why this is being done now, and on a new release version / branch). Version compatibility number raised to 5.72 from 5.69 because of Search Kit Builder interface changes: if that interface isn't used then compatibility before 5.69 should be fine. 
 
 ## Installation (CLI, Zip)
 

ext/riverlea/core/css/_base.css

@@ -7,12 +7,10 @@
 .crm-container *::after {
     box-sizing: border-box;
 }
-#crm-container .hiddenElement,
 .crm-container .hiddenElement,
 .crm-container .collapse {
 	display: none;
 } 
-#crm-container .clear,
 .crm-container .clear {
 	clear: both;
 }
@@ -37,10 +35,6 @@
 .crm-container tr:focus {
 	background-color: transparent;
 }
-#crm-container .clear,
-.crm-container .clear {
-	clear: both;
-}
 /* Remove list styles (bullets/numbers) */
 .crm-container ol,
 .crm-container ul,
@@ -52,11 +46,6 @@
     max-inline-size: 100%;
     max-block-size: 100%;
 }
-#crm-container .hiddenElement,
-.crm-container .hiddenElement,
-.crm-container .collapse {
-    display: none;
-}
 .crm-container table {
     border-collapse: collapse;
 }
@@ -112,7 +101,7 @@
 
 /* Set Default Type */
 
-.crm-container, #crm-container {
+.crm-container {
     font-family: var(--crm-font);
     font-size: var(--crm-font-size);
     color: var(--crm-c-text);
@@ -180,7 +169,7 @@
 .crm-container td.tasklist a:link {
     color: var(--crm-c-alert) !important;
 }
-#crm-container td.tasklist a:visited {
+.crm-container td.tasklist a:visited {
     color: var(--crm-c-success);
 }
 .crm-container .disabled, 
@@ -260,32 +249,32 @@
 	background-color: var(--crm-c-success);
     color: var(--crm-c-success-text);
 }
-#crm-container a.bg-success:hover, 
-#crm-container a.bg-success:focus {
+.crm-container a.bg-success:hover, 
+.crm-container a.bg-success:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-success);
 }
-#crm-container .bg-info {
+.crm-container .bg-info {
 	background-color: var(--crm-c-info);
     color: var(--crm-c-info-text);
 }
-#crm-container a.bg-info:hover, 
-#crm-container a.bg-info:focus {
+.crm-container a.bg-info:hover, 
+.crm-container a.bg-info:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-info-text);
 }
-#crm-container .bg-warning {
+.crm-container .bg-warning {
 	background-color: var(--crm-c-warning);
     color: var(--crm-c-warning-text);
 }
-#crm-container a.bg-warning:hover, 
-#crm-container a.bg-warning:focus {
+.crm-container a.bg-warning:hover, 
+.crm-container a.bg-warning:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-warning);
 }
-#crm-container .bg-danger {
+.crm-container .bg-danger {
 	background-color: var(--crm-c-alert);
     color: var(--crm-c-alert-text);
 }
-#crm-container a.bg-danger:hover, 
-#crm-container a.bg-danger:focus {
+.crm-container a.bg-danger:hover, 
+.crm-container a.bg-danger:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-alert);
 }
 .crm-container pre {
@@ -336,7 +325,7 @@
    POSITION
 *******************/
 
-#crm-container {
+.crm-container {
 	max-width: 100%;
 	padding: var(--crm-page-padding);
 }

ext/riverlea/core/css/_cms.css

@@ -135,7 +135,7 @@ body.wp-admin {
     --crm-page-padding: 1rem 2rem;
     font-size: 100%;
 }
-body.wp-admin #crm-container {
+body.wp-admin .crm-container {
     background: transparent;
 }
 body.wp-admin .crm-container:has(.crm-summary-contactname-block) .breadcrumb {

ext/riverlea/core/css/_fixes.css

@@ -10,7 +10,7 @@
 /* Reset */
 
 .crm-container .widget-content .crm-accordion-wrapper.collapsed .crm-accordion-header,
-#crm-container .widget-content .crm-accordion-header,
+.crm-container .widget-content .crm-accordion-header,
 .crm-container .crm-accordion-inner .crm-accordion-header, 
 .crm-container .crm-accordion-wrapper .crm-master-accordion-header, 
 .crm-container .crm-collapsible .collapsible-title,
@@ -89,7 +89,7 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
 	color: inherit;
 }
 
-/* Header  - NB: use of #crm-container is typically used to override external css files, e.g. dashboard.css */
+/* Header */
 
 .crm-container .crm-accordion-header,
 .crm-container .crm-collapsible .collapsible-title,
@@ -107,7 +107,7 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
 .crm-container .crm-collapsible.collapsed .collapsible-title {
 	border-radius: var(--crm-roundness);
 }
-#crm-container .widget-content .crm-accordion-header,
+.crm-container .widget-content .crm-accordion-header,
 .crm-container .crm-accordion-inner .crm-accordion-header,
 .crm-container .crm-collapsible .collapsible-title{
 	background-color: transparent;
@@ -140,15 +140,15 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
 	box-shadow: var(--crm-expand-body-box-shadow);
 	animation: crm-details-show .3s ease-in-out;
 }
-#crm-container .widget-content .crm-accordion-body,
+.crm-container .widget-content .crm-accordion-body,
 .crm-container .crm-collapsible .crm-summary-block {
 	padding: var(--crm-expand-body-padding);
 }
 .crm-container .crm-master-accordion-header + .crm-accordion-body {
 	border: var(--crm-expand-body2-border);
 	background-color: var(--crm-expand-body2-bg);
 }
-#crm-container summary label {
+.crm-container summary label {
 	color: inherit;
 	font-size: inherit;
 }
@@ -176,7 +176,7 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
 	  For buttons not using .crm-button or .btn or <button>
 *******************/
 
-#crm-container a.button,
+.crm-container a.button,
 .crm-container button,
 .crm-container .ui-button:not(.ui-button-icon-only) {
 	display: inline-block;
@@ -193,7 +193,7 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
 	user-select: none;
 	margin-bottom: 0;
 	background-color: var(--crm-c-primary);
-	color: var(--crm-c-primary-text) !important;
+	color: var(--crm-c-primary-text); /* Somewhere this needs to be !important but removing for now */
 	line-height: 1.5;
 	display: flex;
 	align-items: center;
@@ -213,7 +213,7 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
     color: inherit;
     padding: 0;
 }
-#crm-container a.button,
+.crm-container a.button,
 .crm-container [type="button"] {
     background: var(--crm-c-secondary);
     color: var(--crm-c-secondary-text);
@@ -233,8 +233,8 @@ a.crm-expand-row:hover,a.crm-expand-row:focus {
     font-weight: normal;
 	text-decoration: none;
 }
-#crm-container .crm-actions-ribbon a.button:not(.delete):hover,
-#crm-container .crm-actions-ribbon a.button:not(.delete):focus,
+.crm-container .crm-actions-ribbon a.button:not(.delete):hover,
+.crm-container .crm-actions-ribbon a.button:not(.delete):focus,
 .crm-container .action-link a.button:hover,
 .crm-container .action-link a.button:focus {
     background: var(--crm-c-secondary-hover);
@@ -265,7 +265,7 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi
     font-size: var(--crm-small-font-size);
     border-radius: var(--crm-roundness);
 } 
-#crm-container .btn-group-xs button {
+.crm-container .btn-group-xs button {
     padding: var(--crm-xs) var(--crm-s);
     font-size: var(--crm-small-font-size);
 }
@@ -414,7 +414,7 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi
 	padding-inline: var(--crm-expand-2-body-padding);
 	margin-bottom: var(--crm-expand-2-body-padding);
 }
-#crm-container .crm-add-address-wrapper {
+.crm-container .crm-add-address-wrapper {
 	height: auto;
 }
 
@@ -424,8 +424,8 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi
 	grid-template-columns: 1fr 1fr;
 	column-gap: var(--crm-dash-panel-padding);
 }
-#crm-container div.contactCardLeft,
-#crm-container div.contactCardRight {
+.crm-container div.contactCardLeft,
+.crm-container div.contactCardRight {
 	width: 100%;
 	display: block;
 	float: none;
@@ -440,14 +440,14 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi
 #crm-main-content-wrapper:has(.crm-contact-page) {
     box-shadow: var(--crm-block-shadow);
 }
-#crm-container div.crm-summary-contactname-block {
+.crm-container div.crm-summary-contactname-block {
     background: var(--crm-dash-header-bg);
     color: var(--crm-dash-header-col);
     min-height: 60px;
     padding: var(--crm-dash-header-padding);
     position: relative;
 }
-#crm-container #crm-contactname-content .crm-summary-display_name {
+.crm-container #crm-contactname-content .crm-summary-display_name {
     padding: var(--crm-dash-header-padding);
     font-size: var(--crm-dash-header-size);
     padding-inline: 0;
@@ -458,12 +458,12 @@ div.crm-summary-contactname-block + .crm-actions-ribbon {
     margin-bottom: 0;
     clear: both;
 }
-#crm-container #crm-contactname-content > .crm-inline-block-content {
+.crm-container #crm-contactname-content > .crm-inline-block-content {
     display: flex;
     gap: var(--crm-r);
     align-items: center;
 }
-#crm-container #crm-contactname-content .crm-edit-help {
+.crm-container #crm-contactname-content .crm-edit-help {
     order: 2;
     position: relative;
     height: var(--crm-l);
@@ -665,7 +665,7 @@ div.crm-summary-contactname-block + .crm-actions-ribbon {
 	display: flex;
 	align-items: center;
 }
-#crm-container .api4-explorer-row .panel-heading h3 {
+.crm-container .api4-explorer-row .panel-heading h3 {
 	background: transparent;
 }
 .crm-container .api4-explorer-row .explorer-code-panel .panel-heading {

ext/riverlea/core/css/components/_alerts.css

@@ -18,7 +18,7 @@
     border-color: var(--crm-alert-border-warning);
     color: var(--crm-alert-text-warning);
 }
-#crm-container .alert-info {
+.crm-container .alert-info {
     background-color: var(--crm-alert-background-info);
     border-color: var(--crm-alert-border-info);
     color: var(--crm-alert-text-info);

ext/riverlea/core/css/components/_buttons.css

@@ -62,14 +62,12 @@
     color: var(--crm-c-secondary-text);
 }
 .crm-container a.button.delete-button, 
-.crm-container a.button.delete, 
-#crm-container a.button.delete {
+.crm-container a.button.delete{
     background: var(--crm-cancel-color);
 }
 .crm-container a.button.delete-button:hover,
 .crm-container a.button.delete-button:focus,
-.crm-container a.button.delete:hover,
-#crm-container a.button.delete:hover {
+.crm-container a.button.delete:hover {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-cancel-color);
 }
 .crm-container .crm-button-type-cancel:hover,