, Bootstrap 2 habit: "btn btn-mini", ~90 in the ManagerBox): Bootstrap 3's
.btn set no colour, so they kept the link colour; Bootstrap 5 gives them the body text colour.
Remove when: those links get a button variant or the redesign restyles them. */
a.btn:not(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark,
.btn-link, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info,
.btn-outline-warning, .btn-outline-danger, .btn-outline-light, .btn-outline-dark) {
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
/* Bootstrap 3 help blocks used the page text size; Bootstrap 5 form-text is 0.875em, too small on top of
default_admin.css (body 0.8em).
Remove when: the redesign styles help texts. */
.form-text {
font-size: inherit;
}
/* Bootstrap 3 placeholders were light grey (#999); the Bootstrap 5 ones are dark enough to look like typed values
(app registration form: "John", "Doe").
Remove when: the redesign styles its form controls. */
.form-control::placeholder {
color: #999;
}
/* --- Code blocks ---------------------------------------------------------------------------------------- */
/* Bootstrap 3 boxed blocks (grey background, border, padding); Bootstrap 5 only sets their font. Used by
the ManagerBox audit tools (testfurigana, testphrasesvoc, testkanjiphrases, lot 1.4).
Remove when: the redesign styles code blocks. */
pre {
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.428571429;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
/* --- Cards (Bootstrap 3 panels) ------------------------------------------------------------------------- */
/* Bootstrap 3 panel padding: 15px body, 10px 15px heading/footer; Bootstrap 5 cards use 16px and 8px 16px. The
extra pixel wrapped the labels of the lab quiz settings (horizontal form in a panel, lot 1.5).
Remove when: the redesign styles its cards. */
.card {
--bs-card-spacer-y: 15px;
--bs-card-spacer-x: 15px;
--bs-card-cap-padding-y: 10px;
--bs-card-cap-padding-x: 15px;
}
/* --- Thumbnails ----------------------------------------------------------------------------------------- */
/* Bootstrap 3 .thumbnail frames (now .img-thumbnail d-block) kept their image inside: block, max-width 100%,
centred. Bootstrap 5 .img-thumbnail only limits the frame itself, so lesson and culture book illustrations and
the "other articles" pictures overflowed the column (and the page sideways on mobile).
Remove when: the redesign rewrites the illustration and thumbnail blocks. */
.img-thumbnail > img,
.img-thumbnail a > img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
/* Bootstrap 3 thumbnail captions (culture book "other articles"): 9px padding and dark text, not the link colour.
Remove when: the redesign rewrites the thumbnail blocks. */
.img-thumbnail .caption {
padding: 9px;
color: #333;
}
/* --- Modals --------------------------------------------------------------------------------------------- */
/* Bootstrap 3 modal widths: 600px (900px for .modal-lg from 992px); Bootstrap 5 uses 500px and 800px, which
wrapped the titles and lengthened the sheets of the vocabulary, counters and situations labs (lot 1.5).
Remove when: the redesign sizes its modals. */
.modal {
--bs-modal-width: 600px;
}
@media (min-width: 992px) {
.modal-lg {
--bs-modal-width: 900px;
}
}
/* --- Forms ---------------------------------------------------------------------------------------------- */
/* Bootstrap 3 labels were bold (checkbox labels excepted); Bootstrap 5 labels use the body weight.
Remove when: the redesign styles its form labels. */
label {
font-weight: 700;
}
.form-check-label {
font-weight: 400;
}
/* Bootstrap 3 (normalize.css + forms.less) gave unclassed inputs a normal line height and native checkboxes and
radios a 4px top margin only; Bootstrap 5 Reboot makes inputs inherit the body line height and leaves the
browser margins. Plain forms (members list and detail, lot 1.4) grow taller without these rules. Classed
controls (.form-control, .form-check-input, .btn) keep their Bootstrap 5 metrics.
Remove when: the redesign styles those forms. */
input {
line-height: normal;
}
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
margin: 4px 0 0;
}
/* Bootstrap 3 inline forms (.form-inline, kept in the migrated views): from 768px the controls are inline-block
with an automatic width, below they stack full width. Bootstrap 5 has no .form-inline; rewriting these forms
with flex utilities breaks the ones whose labels wrap their control or that use
(news search, lot 1.5).
Remove when: the redesign rewrites the inline forms. */
@media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control,
.form-inline .form-select {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .input-group {
display: inline-flex;
width: auto;
vertical-align: middle;
}
.form-inline .control-label,
.form-inline label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-check {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
}
/*