Skip to content

RiverLea: issue149, restructure/simplify colours to ease stream-making/customiser #33640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

RiverLea: issue149, restructure/simplify colours to ease stream-making/customiser #33640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
087fdd3
RiverLea: Colour change, rebase & auto-gen emphasis colours from one …
vingle Oct 1, 2025
07515ec
Edits after tests across all four streams and darkmode versions
vingle Oct 9, 2025
3c77397
Merge branch 'master' into simplify-colours2
vingle Oct 9, 2025
e06d425
Merge branch 'master' into simplify-colours2
vingle Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ext/riverlea/core/civi_mail-ang/crmMailing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
height: 20em;
}
.crmMailing-recip-est {
background: var(--crm-checkbox-list-bg);
color: var(--crm-checkbox-list-col);
background: var(--crm-c-yellow-light);
font-size: var(--crm-small-font-size);
padding: var(--crm-padding-small);
margin: 0 0 0 var(--crm-m);
Expand Down
16 changes: 10 additions & 6 deletions ext/riverlea/core/css/_base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ body {
.crm-container table.dataTable.display tbody tr:hover {
background-color: transparent;
}
.crm-container td:empty {
padding: 0 !important; /* allows empty cells to collapse to 0 width */
}
/* Remove list styles (bullets/numbers) */
.crm-container ol,
.crm-container ul {
Expand Down Expand Up @@ -156,7 +159,7 @@ body {
font-size: var(--crm-font-size);
line-height: 1.4;
color: var(--crm-c-text);
background: var(--crm-c-page-background);
background: var(--crm-c-page-bg);
}
.crm-container table,
.crm-container tr,
Expand Down Expand Up @@ -288,7 +291,8 @@ dl dl {
.crm-container tr.disabled,
.crm-container tr:has(td.disabled),
.crm-container .table-striped > tbody > tr:has(td.disabled) {
background-color: var(--crm-c-page-background);
--crm-striped-bg: var(--crm-c-page-bg) /* for striped rows */;
background-color: var(--crm-striped-bg) !important /* vs jquery */;
}
.crm-container tr.disabled td *:not(.btn,button,i,a),
.crm-container td.disabled,
Expand Down Expand Up @@ -365,8 +369,8 @@ dl dl {
}
.crm-container code {
display: inline;
background-color: var(--crm-c-code-background);
border: 1px solid var(--crm-c-background4);
background-color: var(--crm-c-code-bg);
border: var(--crm-c-code-border);
color: var(--crm-c-text);
border-radius: 2px;
padding: 2px;
Expand All @@ -380,8 +384,8 @@ dl dl {
font-size: var(--crm-font-size) !important /* vs inline css on api3 */;
line-height: 1.4 !important /* vs inline css on api3 */;
color: var(--crm-c-text);
background-color: var(--crm-c-code-background);
border: 1px solid var(--crm-c-background4);
background-color: var(--crm-c-code-bg);
border: var(--crm-c-code-border);
border-radius: var(--crm-roundness);
}
.crm-container pre code {
Expand Down
27 changes: 13 additions & 14 deletions ext/riverlea/core/css/_bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1290,7 +1290,7 @@
#bootstrap-theme .form-control[disabled],
#bootstrap-theme .form-control[readonly],
fieldset[disabled] #bootstrap-theme .form-control {
background-color: var(--crm-c-background2);
background-color: var(--crm-c-layer1-bg);
opacity: 1;
}
#bootstrap-theme .form-control[disabled],
Expand Down Expand Up @@ -1782,7 +1782,7 @@ fieldset[disabled] #bootstrap-theme .btn-link {
#bootstrap-theme .btn-link[disabled]:focus,
fieldset[disabled] #bootstrap-theme .btn-link:hover,
fieldset[disabled] #bootstrap-theme .btn-link:focus {
color: var(--crm-c-gray-800);
color: var(--crm-c-inactive);
text-decoration: none;
}
#bootstrap-theme .input-group-addon {
Expand All @@ -1792,7 +1792,7 @@ fieldset[disabled] #bootstrap-theme .btn-link:focus {
line-height: inherit;
color: var(--crm-input-color);
text-align: left;
background-color: var(--crm-input-background);
background-color: var(--crm-input-bg);
/* width: 100%; */
border-radius: var(--crm-roundness);
}
Expand Down Expand Up @@ -2539,7 +2539,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: var(--crm-c-background);
background-color: var(--crm-c-container-bg);
}
#bootstrap-theme .jumbotron h1,
#bootstrap-theme .jumbotron .h1 {
Expand Down Expand Up @@ -2782,7 +2782,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
#bootstrap-theme button.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: var(--crm-c-background);
background-color: var(--crm-c-container-bg);
}
#bootstrap-theme button.list-group-item {
width: 100%;
Expand Down Expand Up @@ -2945,7 +2945,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: var(--crm-c-background);
background-color: var(--crm-c-container-bg);
border: var(--crm-c-divider);
border-radius: var(--crm-c-roundness);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
Expand Down Expand Up @@ -3395,17 +3395,16 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
}
#bootstrap-theme a.label:hover,
#bootstrap-theme a.label:focus {
color: var(--crm-c-text-light);
text-decoration: none;
cursor: var(--crm-hover-clickable);
}
#bootstrap-theme .label-default {
background-color: var(--crm-c-text);
background: var(--crm-c-darkest);
color: var(--crm-c-text-light);
}
#bootstrap-theme .label-default[href]:hover,
#bootstrap-theme .label-default[href]:focus {
background-color: var(--crm-c-background4);
background: color-mix(in srgb, var(--crm-c-darkest) 87.5%, #fff 12.5%);
}
#bootstrap-theme .label-primary {
background: var(--crm-c-primary);
Expand All @@ -3421,34 +3420,34 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
}
#bootstrap-theme .label-success[href]:hover,
#bootstrap-theme .label-success[href]:focus {
background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-success);
background: color-mix(in srgb, var(--crm-c-success) 87.5%, #000 12.5%);
}
#bootstrap-theme .label-info {
background: var(--crm-c-info);
color: var(--crm-c-info-text);
}
#bootstrap-theme .label-info[href]:hover,
#bootstrap-theme .label-info[href]:focus {
background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-info);
background: color-mix(in srgb, var(--crm-c-info) 87.5%, #000 12.5%);
}
#bootstrap-theme .label-warning {
background: var(--crm-c-warning);
color: var(--crm-c-warning-text);
}
#bootstrap-theme .label-warning[href]:hover,
#bootstrap-theme .label-warning[href]:focus {
background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-warning);
background: color-mix(in srgb, var(--crm-c-warning) 87.5%, #000 12.5%);
}
#bootstrap-theme .label-danger {
background: var(--crm-c-danger);
color: var(--crm-c-danger-text);
}
#bootstrap-theme .label-danger[href]:hover,
#bootstrap-theme .label-danger[href]:focus {
background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-danger);
background: color-mix(in srgb, var(--crm-c-danger) 87.5%, #000 12.5%);
}
#bootstrap-theme .label i.crm-i {
color: inherit; /* resets icons inside lables to use the label text colour */
color: inherit; /* resets icons inside labels to use the label text colour */
}

/* Panels */
Expand Down
18 changes: 9 additions & 9 deletions ext/riverlea/core/css/_cms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
/* Backdrop - html.admin-bar */

html.admin-bar body {
background-color: var(--crm-c-page-background);
background-color: var(--crm-c-page-bg);
}
html.admin-bar .crm-container {
--crm-page-padding: 0;
Expand Down Expand Up @@ -38,13 +38,13 @@ body.page-civicrm .crm-container div.status {
/* D8+ */
body.page-civicrm header.content-header {
margin-bottom: 0;
background-color: var(--crm-c-background);
background-color: var(--crm-c-container-bg);
}
body.page-civicrm main.page-content {
margin-top: 0;
}
body.page-civicrm header + div.layout-container {
background-color: var(--crm-c-page-background) !important;
background-color: var(--crm-c-page-bg) !important;
margin: 0 !important; /* use of important vs some themes */
}
body.page-civicrm .button {
Expand All @@ -59,7 +59,7 @@ body.page-civicrm #squeeze #crm-container,
.region-sidebar-first .block-civicrm {
padding: 0;
--crm-page-padding: 0;
--crm-c-page-background: transparent;
--crm-c-page-bg: transparent;
--crm-input-label-width: 12em;
}
body.page-civicrm #squeeze .crm-container ul li:not(.ui-tab) {
Expand All @@ -69,7 +69,7 @@ body.page-civicrm #squeeze .crm-container ul li:not(.ui-tab) {

/* D7 Seven */
body.page-civicrm > #branding {
background-color: var(--crm-c-page-background);
background-color: var(--crm-c-page-bg);
}
body.page-civicrm > #branding + #page {
--crm-page-padding: 0.5rem 1.25rem;
Expand Down Expand Up @@ -130,15 +130,15 @@ body.page-civicrm .page-content:has(#block-claro-content) {
/* Bootstrap 4 */
body.page-civicrm main > .container:has(#block-bootstrap4-content) {
max-width: 100%;
background: var(--crm-c-page-background);
background: var(--crm-c-page-bg);
}

/******************
WORDPRESS
*******************/

body.toplevel_page_CiviCRM.wp-admin {
background: var(--crm-c-page-background);
background: var(--crm-c-page-bg);
}
body.toplevel_page_CiviCRM #wpcontent {
padding-left: 0; /* resets WP padding */
Expand Down Expand Up @@ -208,8 +208,8 @@ html.crm-standalone body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif; /* Adds fallback for base font */
}
html.crm-standalone #crm-container:has(.standalone-auth-form) {
background: var(--crm-c-background);
background: var(--crm-c-container-bg);
}
html.crm-standalone .standalone-auth-box {
background: var(--crm-c-page-background);
background: var(--crm-c-page-bg);
}
6 changes: 3 additions & 3 deletions ext/riverlea/core/css/_fixes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,7 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi
.crm-container .tag-tree-wrapper div.tag-info {
width: auto;
position: relative;
background: var(--crm-c-background);
background: var(--crm-c-container-bg);
border: 0 solid transparent;
box-shadow: var(--crm-block-shadow);
padding: var(--crm-padding-reg);
Expand Down Expand Up @@ -625,7 +625,7 @@ tr.crm-preferences-display-form-block-contact_edit_options td table {
/* Custom searches */
.crm-container > #crm-main-content-wrapper > fieldset {
display: grid;
background: var(--crm-c-background);
background: var(--crm-c-container-bg);
border: 0 solid transparent;
box-shadow: var(--crm-block-shadow);
padding: var(--crm-padding-reg);
Expand Down Expand Up @@ -844,7 +844,7 @@ details + .crm-content-block:has(.dataTables_wrapper) {
gap: var(--crm-flex-gap);
}
.crm-mosaico-wizard .crm-mosaico-template-item.thumbnail {
background: var(--crm-c-background2) !important /* vs _template-item.scss */;
background: var(--crm-c-layer1-bg) !important /* vs _template-item.scss */;
border: var(--crm-c-divider) !important /* vs _template-item.scss */;
border-radius: var(--crm-roundness) !important /* vs _template-item.scss */;
}
Expand Down
Loading