L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-84643 theme_boost: Fix form inputs colour contrast

Browse Source 
After the Bootstrap 5 upgrade the contrast of the form inputs was
not enough. This commit adds the same colour contrast as before.

Also fixed some inconsistencies in classic theme variables.
This commit is contained in:
Mikel Martín
2025-03-04 08:09:54 +01:00
parent 688478cfa4
commit 0a2b2620c1
3 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/boost/scss/preset/default.scss
+5 -1
View File
@@ -2,6 +2,9 @@
// Bootstrap variables
//
// Prefix for all CSS variables
$prefix: bs- !default;
// Colors
$white: #fff !default;
$gray-100: #f8f9fa !default;
@@ -71,7 +74,8 @@ $card-group-margin: .25rem;
// Inputs
$focus-ring-opacity: .75 !default;
$input-border-color: $gray-500 !default;
$input-border-color: var(--#{$prefix}gray-500) !default;
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}gray-500) !default;
// Dropdowns
$dropdown-link-hover-color: $white;
theme/boost/style/moodle.css
+14 -14
View File
@@ -15459,7 +15459,7 @@ progress {
appearance: none;
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: var(--bs-border-width) solid #8f959e;
border: var(--bs-border-width) solid var(--bs-gray-500);
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@@ -15612,7 +15612,7 @@ textarea.form-control-lg {
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: var(--bs-border-width) solid #8f959e;
border: var(--bs-border-width) solid var(--bs-gray-500);
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@@ -15693,7 +15693,7 @@ textarea.form-control-lg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
border: var(--bs-border-width) solid var(--bs-gray-500);
print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
@@ -15998,7 +15998,7 @@ textarea.form-control-lg {
text-align: center;
white-space: nowrap;
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid #8f959e;
border: var(--bs-border-width) solid var(--bs-gray-500);
border-radius: var(--bs-border-radius);
}
@@ -29308,14 +29308,14 @@ img.icon {
}
.admin_colourpicker .colourdialogue {
float: left;
border: 1px solid #8f959e;
border: 1px solid var(--bs-gray-500);
}
.admin_colourpicker .previewcolour {
border: 1px solid #8f959e;
border: 1px solid var(--bs-gray-500);
margin-left: 301px;
}
.admin_colourpicker .currentcolour {
border: 1px solid #8f959e;
border: 1px solid var(--bs-gray-500);
margin-left: 301px;
border-top-width: 0;
}
@@ -32250,7 +32250,7 @@ body.drawer-ease {
}
.fp-navbar {
border-color: #8f959e;
border-color: var(--bs-gray-500);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@@ -32803,7 +32803,7 @@ a.ygtvspacer:hover {
.filepicker-filelist,
.filemanager-container {
min-height: 140px;
border: 1px solid #8f959e;
border: 1px solid var(--bs-gray-500);
border-radius: 0.5rem;
}
@@ -34720,7 +34720,7 @@ body.path-question-type .mform fieldset.hidden {
margin: 0;
}
.simplesearchform .btn-submit {
border-color: #8f959e;
border-color: var(--bs-gray-500);
color: #6a737b;
}
.simplesearchform .btn-close,
@@ -35043,7 +35043,7 @@ div#dateselector-calendar-panel {
.form-autocomplete-suggestions {
position: absolute;
background-color: #fff;
border: 1px solid #8f959e;
border: 1px solid var(--bs-gray-500);
min-width: 206px;
max-height: 20em;
overflow: auto;
@@ -35729,7 +35729,7 @@ select {
height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
border-radius: 0;
background-color: var(--bs-body-bg);
border-color: #8f959e;
border-color: var(--bs-gray-500);
padding-left: calc(0.5rem + 8px);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@@ -35744,7 +35744,7 @@ select {
height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
border-radius: 0;
background-color: var(--bs-body-bg);
border-color: #8f959e;
border-color: var(--bs-gray-500);
padding-left: calc(0.5rem + 8px);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@@ -39297,7 +39297,7 @@ div.editor_atto_toolbar {
display: block;
background: #f2f2f2;
min-height: 35px;
border: 1px solid #8f959e;
border: 1px solid var(--bs-gray-500);
width: 100%;
padding: 0 0 9px 0;
border-top-left-radius: 0.5rem;
theme/classic/scss/preset/default.scss
+7 -3
View File
@@ -2,6 +2,9 @@
// Bootstrap variables
//
// Prefix for all CSS variables
$prefix: bs- !default;
// Colors
$white: #fff !default;
$gray-100: #f8f9fa !default;
@@ -49,13 +52,13 @@ $theme-colors: map-merge((
), $theme-colors);
// stylelint-enable
// Tables
$table-accent-bg: rgba($black, .03) !default;
// Fonts
$font-size-base: 0.9375rem !default;
$headings-font-weight: 300 !default;
// Links
$link-decoration: none !default;
// Navbar
$navbar-dark-hover-color: rgba($white, 1) !default;
$navbar-light-color: rgba($black, 0.6) !default;
@@ -71,6 +74,7 @@ $card-group-margin: .25rem;
// Inputs
$focus-ring-opacity: .75 !default;
$input-border-color: $gray-500 !default;
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}gray-500) !default;
// Dropdowns
$dropdown-link-hover-color: $white;