diff --git a/pyproject.toml b/pyproject.toml index 42671038c..9238e805a 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -11,7 +11,7 @@ dependencies = [ "django-ace-overlay", "django-bitfield==2.2.0", "django-bootstrap-icons==0.9.0", - "django-bootstrap5==22.2", + "django-bootstrap5==25.1", "django-celery-beat==2.8.1", "django-cors-headers==3.13.0", "django-countries==7.6.1", diff --git a/scss/base.scss b/scss/base.scss index 97b51005a..564a2d77d 100644 --- a/scss/base.scss +++ b/scss/base.scss @@ -5,16 +5,16 @@ @import "superuser"; // Add imports to adjust default colors and theme maps -@import "bootstrap-5.2.0/scss/functions"; +@import "bootstrap-5.3.3/scss/functions"; @import "custom-variables"; -@import "bootstrap-5.2.0/scss/variables"; +@import "bootstrap-5.3.3/scss/variables"; @import "custom-maps"; // import study-responses after custom variables because it uses a color variable @import "study-responses"; // Add all bootstrap features -@import "bootstrap-5.2.0/scss/bootstrap"; +@import "bootstrap-5.3.3/scss/bootstrap"; .empty-text { @@ -36,7 +36,7 @@ // Screen widths xs to lg .home-title-text { - font-size: calc(1.325rem + 0.9vw) !important; // fs-2 + font-size: calc(1.325rem + 0.9vw) !important; // fs-2 } .home-subtitle-text { @@ -46,7 +46,7 @@ // Screen widths xl and xxl @include media-breakpoint-up(xl) { .home-title-text { - font-size: calc(1.375rem + 1.5vw) !important; // fs-1 + font-size: calc(1.375rem + 1.5vw) !important; // fs-1 } .home-subtitle-text { @@ -54,7 +54,8 @@ } } -.img-hover:hover, .img-hover:focus { +.img-hover:hover, +.img-hover:focus { color: #636464; background-color: #e5e5e5; } diff --git a/uv.lock b/uv.lock index a3e41e576..3aa19dd0b 100644 --- a/uv.lock +++ b/uv.lock @@ -363,14 +363,14 @@ wheels = [ [[package]] name = "django-bootstrap5" -version = "22.2" +version = "25.1" source = { registry = "https://pypi.org/simple" } dependencies = [ { name = "django" }, ] -sdist = { url = "https://files.pythonhosted.org/packages/5c/65/28852aa87ce4a96377b4bda99c644cb0761f2ad264a12be4cb450bcdf529/django-bootstrap5-22.2.tar.gz", hash = "sha256:e944f5ced342e0e16cde77e1ddacb4b9fd5bce4cc190df2f7da0b8e18a24c9cb", size = 78914, upload-time = "2022-11-22T12:42:17.68Z" } +sdist = { url = "https://files.pythonhosted.org/packages/37/e3/1a52b8a5d2d85cbade624ec0de29a27b8a47df8859cb65e8425c3d4589df/django_bootstrap5-25.1.tar.gz", hash = "sha256:e81c77eb710356f94e426a51f4f469890d5720f5e7e53d650f4405d4cc94da04", size = 122024, upload-time = "2025-03-01T10:29:59.514Z" } wheels = [ - { url = "https://files.pythonhosted.org/packages/48/11/922e10876262ab6b14091f8da1b64d2fb6c18510d9c3b74047ad85eaf4e0/django_bootstrap5-22.2-py3-none-any.whl", hash = "sha256:5d677bbfb94207c1a034d63a5f39d95ce287ef509e0b31dfb4d233cc81f93bcc", size = 24536, upload-time = "2022-11-22T12:42:15.553Z" }, + { url = "https://files.pythonhosted.org/packages/49/6b/e28da7dd51d94f00975ab9db3ceda8ea7cfac6b92b2323fc4db7871534d4/django_bootstrap5-25.1-py3-none-any.whl", hash = "sha256:964ad2d970d0495b030b86f31b33033dfdfe839a67b32ea599fa02eb39988ae7", size = 26404, upload-time = "2025-03-01T10:29:57.281Z" }, ] [[package]] @@ -898,7 +898,7 @@ requires-dist = [ { name = "django-ace-overlay", git = "https://github.com/lookit/django-ace-overlay.git?rev=master" }, { name = "django-bitfield", specifier = "==2.2.0" }, { name = "django-bootstrap-icons", specifier = "==0.9.0" }, - { name = "django-bootstrap5", specifier = "==22.2" }, + { name = "django-bootstrap5", specifier = "==25.1" }, { name = "django-celery-beat", specifier = "==2.8.1" }, { name = "django-cors-headers", specifier = "==3.13.0" }, { name = "django-countries", specifier = "==7.6.1" }, diff --git a/web/management/commands/custom_bootstrap5.py b/web/management/commands/custom_bootstrap5.py index b0e8f478a..19cf6eeb6 100644 --- a/web/management/commands/custom_bootstrap5.py +++ b/web/management/commands/custom_bootstrap5.py @@ -1,7 +1,10 @@ import hashlib +import os +import shutil import urllib.request import zipfile from pathlib import Path +from urllib.parse import urlparse import sass from django.core.management.base import BaseCommand, CommandError @@ -25,37 +28,42 @@ def handle(self, *args, **kwargs): js_url = get_bootstrap_setting("javascript_url").get("url") bs5_version = js_url.split("/")[4].split("@")[1] - # download BS5 scss from https://getbootstrap.com/docs/5.2/getting-started/download/ - bs5_url = f"https://github.com/twbs/bootstrap/archive/v{bs5_version}.zip" - bs5_filename = bs5_url.split("/")[-1] + # download BS5 scss + bs5_url = urlparse( + f"https://github.com/twbs/bootstrap/archive/v{bs5_version}.zip" + ) + + bs5_filename = os.path.basename(bs5_url.path) # the known root directory of the BS5 archive zip file - zip_root_dir = Path("bootstrap-5.2.0") + zip_root_dir = Path(f"bootstrap-{bs5_version}") # get the hash of the exisiting compiled css file css_hash = self.get_css_hash() - # when the root directory doesn't exists, download and extract file - if not zip_root_dir.exists(): - print(f"Downloading bootstrap v{bs5_version}....") - urllib.request.urlretrieve(bs5_url, bs5_filename) + # download and extract file + print(f"Downloading bootstrap v{bs5_version}.") + urllib.request.urlretrieve(bs5_url.geturl(), bs5_filename) - print("Unzip bootstrap file...") - with zipfile.ZipFile(bs5_filename) as zip_ref: - zip_ref.extractall("./") + print("Unzip bootstrap file.") + with zipfile.ZipFile(bs5_filename) as zip_ref: + zip_ref.extractall("./") - print("Remove downloaded compressed file...") - Path(bs5_filename).unlink() + print("Remove downloaded compressed file.") + Path(bs5_filename).unlink() - if not zip_root_dir.exists(): - raise CommandError( - f'Expected directory "{zip_root_dir}" was not found after unzip.' - ) + if not zip_root_dir.exists(): + raise CommandError( + f'Expected directory "{zip_root_dir}" was not found after unzip.' + ) - print("Compile sass to css...") + print("Compile sass to css.") with open(self.output_css, "w") as fp: fp.write(sass.compile(filename="scss/base.scss")) + print("Remove bootstrap directory.") + shutil.rmtree(zip_root_dir) + if self.get_css_hash() != css_hash: raise CommandError("The custom bootstrap 5 css file has been updated.") else: diff --git a/web/static/custom_bootstrap5.css b/web/static/custom_bootstrap5.css index a6492fa07..afcfeb1c8 100644 --- a/web/static/custom_bootstrap5.css +++ b/web/static/custom_bootstrap5.css @@ -57,12 +57,12 @@ input[type="checkbox"].researcher-editable:disabled + label .icon-star { -webkit-box-orient: vertical; } /*! - * Bootstrap v5.2.0 (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Bootstrap v5.3.3 (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -:root { +:root, +[data-bs-theme="light"] { --bs-blue: #147899; --bs-indigo: #6610f2; --bs-purple: #6f42c1; @@ -104,10 +104,32 @@ input[type="checkbox"].researcher-editable:disabled + label .icon-star { --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-red-rgb: 255, 95, 92; + --bs-primary-text-emphasis: #08303d; + --bs-secondary-text-emphasis: #2b2f32; + --bs-success-text-emphasis: #0a3622; + --bs-info-text-emphasis: #055160; + --bs-warning-text-emphasis: #615006; + --bs-danger-text-emphasis: #662625; + --bs-light-text-emphasis: #495057; + --bs-dark-text-emphasis: #495057; + --bs-primary-bg-subtle: #d0e4eb; + --bs-secondary-bg-subtle: #e2e3e5; + --bs-success-bg-subtle: #d1e7dd; + --bs-info-bg-subtle: #cff4fc; + --bs-warning-bg-subtle: #fdf4cf; + --bs-danger-bg-subtle: #ffdfde; + --bs-light-bg-subtle: #fcfcfd; + --bs-dark-bg-subtle: #ced4da; + --bs-primary-border-subtle: #a1c9d6; + --bs-secondary-border-subtle: #c4c8cb; + --bs-success-border-subtle: #a3cfbb; + --bs-info-border-subtle: #9eeaf9; + --bs-warning-border-subtle: #fae99f; + --bs-danger-border-subtle: #ffbfbe; + --bs-light-border-subtle: #e9ecef; + --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; - --bs-body-color-rgb: 33, 37, 41; - --bs-body-bg-rgb: 255, 255, 255; --bs-font-sans-serif: "Noto Sans", sans-serif; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); @@ -116,7 +138,28 @@ input[type="checkbox"].researcher-editable:disabled + label .icon-star { --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #212529; + --bs-body-color-rgb: 33, 37, 41; --bs-body-bg: #fff; + --bs-body-bg-rgb: 255, 255, 255; + --bs-emphasis-color: #000; + --bs-emphasis-color-rgb: 0, 0, 0; + --bs-secondary-color: rgba(33, 37, 41, 0.75); + --bs-secondary-color-rgb: 33, 37, 41; + --bs-secondary-bg: #e9ecef; + --bs-secondary-bg-rgb: 233, 236, 239; + --bs-tertiary-color: rgba(33, 37, 41, 0.5); + --bs-tertiary-color-rgb: 33, 37, 41; + --bs-tertiary-bg: #f8f9fa; + --bs-tertiary-bg-rgb: 248, 249, 250; + --bs-heading-color: inherit; + --bs-link-color: #147899; + --bs-link-color-rgb: 20, 120, 153; + --bs-link-decoration: underline; + --bs-link-hover-color: #10607a; + --bs-link-hover-color-rgb: 16, 96, 122; + --bs-code-color: #d63384; + --bs-highlight-color: #212529; + --bs-highlight-bg: #fdf4cf; --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #dee2e6; @@ -125,12 +168,75 @@ input[type="checkbox"].researcher-editable:disabled + label .icon-star { --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; - --bs-border-radius-2xl: 2rem; + --bs-border-radius-xxl: 2rem; + --bs-border-radius-2xl: var(--bs-border-radius-xxl); --bs-border-radius-pill: 50rem; - --bs-link-color: #147899; - --bs-link-hover-color: #10607a; - --bs-code-color: #d63384; - --bs-highlight-bg: #fdf4cf; } + --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); + --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); + --bs-focus-ring-width: 0.25rem; + --bs-focus-ring-opacity: 0.25; + --bs-focus-ring-color: rgba(20, 120, 153, 0.25); + --bs-form-valid-color: #198754; + --bs-form-valid-border-color: #198754; + --bs-form-invalid-color: #ff5f5c; + --bs-form-invalid-border-color: #ff5f5c; } + +[data-bs-theme="dark"] { + color-scheme: dark; + --bs-body-color: #dee2e6; + --bs-body-color-rgb: 222, 226, 230; + --bs-body-bg: #212529; + --bs-body-bg-rgb: 33, 37, 41; + --bs-emphasis-color: #fff; + --bs-emphasis-color-rgb: 255, 255, 255; + --bs-secondary-color: rgba(222, 226, 230, 0.75); + --bs-secondary-color-rgb: 222, 226, 230; + --bs-secondary-bg: #343a40; + --bs-secondary-bg-rgb: 52, 58, 64; + --bs-tertiary-color: rgba(222, 226, 230, 0.5); + --bs-tertiary-color-rgb: 222, 226, 230; + --bs-tertiary-bg: #2b3035; + --bs-tertiary-bg-rgb: 43, 48, 53; + --bs-primary-text-emphasis: #72aec2; + --bs-secondary-text-emphasis: #a7acb1; + --bs-success-text-emphasis: #75b798; + --bs-info-text-emphasis: #6edff6; + --bs-warning-text-emphasis: #f8df6f; + --bs-danger-text-emphasis: #ff9f9d; + --bs-light-text-emphasis: #f8f9fa; + --bs-dark-text-emphasis: #dee2e6; + --bs-primary-bg-subtle: #04181f; + --bs-secondary-bg-subtle: #161719; + --bs-success-bg-subtle: #051b11; + --bs-info-bg-subtle: #032830; + --bs-warning-bg-subtle: #312803; + --bs-danger-bg-subtle: #331312; + --bs-light-bg-subtle: #343a40; + --bs-dark-bg-subtle: #1a1d20; + --bs-primary-border-subtle: #0c485c; + --bs-secondary-border-subtle: #41464b; + --bs-success-border-subtle: #0f5132; + --bs-info-border-subtle: #087990; + --bs-warning-border-subtle: #927909; + --bs-danger-border-subtle: #993937; + --bs-light-border-subtle: #495057; + --bs-dark-border-subtle: #343a40; + --bs-heading-color: inherit; + --bs-link-color: #72aec2; + --bs-link-hover-color: #8ebece; + --bs-link-color-rgb: 114, 174, 194; + --bs-link-hover-color-rgb: 142, 190, 206; + --bs-code-color: #e685b5; + --bs-highlight-color: #dee2e6; + --bs-highlight-bg: #615006; + --bs-border-color: #495057; + --bs-border-color-translucent: rgba(255, 255, 255, 0.15); + --bs-form-valid-color: #75b798; + --bs-form-valid-border-color: #75b798; + --bs-form-invalid-color: #ff9f9d; + --bs-form-invalid-border-color: #ff9f9d; } *, *::before, @@ -157,14 +263,15 @@ hr { margin: 1rem 0; color: inherit; border: 0; - border-top: 1px solid; + border-top: var(--bs-border-width) solid; opacity: 0.25; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; - line-height: 1.2; } + line-height: 1.2; + color: var(--bs-heading-color); } h1, .h1 { font-size: calc(1.375rem + 1.5vw); } @@ -241,6 +348,7 @@ small, .small { mark, .mark { padding: 0.1875em; + color: var(--bs-highlight-color); background-color: var(--bs-highlight-bg); } sub, @@ -257,10 +365,10 @@ sup { top: -.5em; } a { - color: var(--bs-link-color); + color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); text-decoration: underline; } a:hover { - color: var(--bs-link-hover-color); } + --bs-link-color-rgb: var(--bs-link-hover-color-rgb); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; @@ -315,7 +423,7 @@ table { caption { padding-top: 0.5rem; padding-bottom: 0.5rem; - color: #6c757d; + color: var(--bs-secondary-color); text-align: left; } th { @@ -416,8 +524,8 @@ legend { height: auto; } [type="search"] { - outline-offset: -2px; - -webkit-appearance: textfield; } + -webkit-appearance: textfield; + outline-offset: -2px; } /* rtl:raw: [type="tel"], @@ -536,9 +644,9 @@ progress { .img-thumbnail { padding: 0.25rem; - background-color: #fff; - border: 1px solid var(--bs-border-color); - border-radius: 0.375rem; + background-color: var(--bs-body-bg); + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); max-width: 100%; height: auto; } @@ -551,7 +659,7 @@ progress { .figure-caption { font-size: 0.875em; - color: #6c757d; } + color: var(--bs-secondary-color); } .container, .container-fluid, @@ -588,6 +696,14 @@ progress { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } } +:root { + --bs-breakpoint-xs: 0; + --bs-breakpoint-sm: 576px; + --bs-breakpoint-md: 768px; + --bs-breakpoint-lg: 992px; + --bs-breakpoint-xl: 1200px; + --bs-breakpoint-xxl: 1400px; } + .row, .search-bar { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; @@ -1389,33 +1505,37 @@ progress { --bs-gutter-y: 3rem; } } .table { - --bs-table-color: var(--bs-body-color); - --bs-table-bg: transparent; + --bs-table-color-type: initial; + --bs-table-bg-type: initial; + --bs-table-color-state: initial; + --bs-table-bg-state: initial; + --bs-table-color: var(--bs-emphasis-color); + --bs-table-bg: var(--bs-body-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-accent-bg: transparent; - --bs-table-striped-color: var(--bs-body-color); - --bs-table-striped-bg: rgba(0, 0, 0, 0.05); - --bs-table-active-color: var(--bs-body-color); - --bs-table-active-bg: rgba(0, 0, 0, 0.1); - --bs-table-hover-color: var(--bs-body-color); - --bs-table-hover-bg: rgba(0, 0, 0, 0.075); + --bs-table-striped-color: var(--bs-emphasis-color); + --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05); + --bs-table-active-color: var(--bs-emphasis-color); + --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1); + --bs-table-hover-color: var(--bs-emphasis-color); + --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); width: 100%; margin-bottom: 1rem; - color: var(--bs-table-color); vertical-align: top; border-color: var(--bs-table-border-color); } .table > :not(caption) > * > * { padding: 0.5rem 0.5rem; + color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); background-color: var(--bs-table-bg); - border-bottom-width: 1px; - box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); } + border-bottom-width: var(--bs-border-width); + box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); } .table > tbody { vertical-align: inherit; } .table > thead { vertical-align: bottom; } .table-group-divider { - border-top: 2px solid currentcolor; } + border-top: calc(var(--bs-border-width) * 2) solid currentcolor; } .caption-top { caption-side: top; } @@ -1424,9 +1544,9 @@ progress { padding: 0.25rem 0.25rem; } .table-bordered > :not(caption) > * { - border-width: 1px 0; } + border-width: var(--bs-border-width) 0; } .table-bordered > :not(caption) > * > * { - border-width: 0 1px; } + border-width: 0 var(--bs-border-width); } .table-borderless > :not(caption) > * > * { border-bottom-width: 0; } @@ -1435,25 +1555,25 @@ progress { border-top-width: 0; } .table-striped > tbody > tr:nth-of-type(odd) > * { - --bs-table-accent-bg: var(--bs-table-striped-bg); - color: var(--bs-table-striped-color); } + --bs-table-color-type: var(--bs-table-striped-color); + --bs-table-bg-type: var(--bs-table-striped-bg); } .table-striped-columns > :not(caption) > tr > :nth-child(even) { - --bs-table-accent-bg: var(--bs-table-striped-bg); - color: var(--bs-table-striped-color); } + --bs-table-color-type: var(--bs-table-striped-color); + --bs-table-bg-type: var(--bs-table-striped-bg); } .table-active { - --bs-table-accent-bg: var(--bs-table-active-bg); - color: var(--bs-table-active-color); } + --bs-table-color-state: var(--bs-table-active-color); + --bs-table-bg-state: var(--bs-table-active-bg); } .table-hover > tbody > tr:hover > * { - --bs-table-accent-bg: var(--bs-table-hover-bg); - color: var(--bs-table-hover-color); } + --bs-table-color-state: var(--bs-table-hover-color); + --bs-table-bg-state: var(--bs-table-hover-bg); } .table-primary { --bs-table-color: #000; --bs-table-bg: #d0e4eb; - --bs-table-border-color: #bbcdd4; + --bs-table-border-color: #a6b6bc; --bs-table-striped-bg: #c6d9df; --bs-table-striped-color: #000; --bs-table-active-bg: #bbcdd4; @@ -1466,7 +1586,7 @@ progress { .table-secondary { --bs-table-color: #000; --bs-table-bg: #e2e3e5; - --bs-table-border-color: #cbccce; + --bs-table-border-color: #b5b6b7; --bs-table-striped-bg: #d7d8da; --bs-table-striped-color: #000; --bs-table-active-bg: #cbccce; @@ -1479,7 +1599,7 @@ progress { .table-success { --bs-table-color: #000; --bs-table-bg: #d1e7dd; - --bs-table-border-color: #bcd0c7; + --bs-table-border-color: #a7b9b1; --bs-table-striped-bg: #c7dbd2; --bs-table-striped-color: #000; --bs-table-active-bg: #bcd0c7; @@ -1492,7 +1612,7 @@ progress { .table-info { --bs-table-color: #000; --bs-table-bg: #cff4fc; - --bs-table-border-color: #badce3; + --bs-table-border-color: #a6c3ca; --bs-table-striped-bg: #c5e8ef; --bs-table-striped-color: #000; --bs-table-active-bg: #badce3; @@ -1505,7 +1625,7 @@ progress { .table-warning { --bs-table-color: #000; --bs-table-bg: #fdf4cf; - --bs-table-border-color: #e4dcba; + --bs-table-border-color: #cac3a6; --bs-table-striped-bg: #f0e8c5; --bs-table-striped-color: #000; --bs-table-active-bg: #e4dcba; @@ -1518,7 +1638,7 @@ progress { .table-danger { --bs-table-color: #000; --bs-table-bg: #ffdfde; - --bs-table-border-color: #e6c9c8; + --bs-table-border-color: #ccb2b2; --bs-table-striped-bg: #f2d4d3; --bs-table-striped-color: #000; --bs-table-active-bg: #e6c9c8; @@ -1531,7 +1651,7 @@ progress { .table-light { --bs-table-color: #000; --bs-table-bg: #f8f9fa; - --bs-table-border-color: #dfe0e1; + --bs-table-border-color: #c6c7c8; --bs-table-striped-bg: #ecedee; --bs-table-striped-color: #000; --bs-table-active-bg: #dfe0e1; @@ -1544,7 +1664,7 @@ progress { .table-dark { --bs-table-color: #fff; --bs-table-bg: #212529; - --bs-table-border-color: #373b3e; + --bs-table-border-color: #4d5154; --bs-table-striped-bg: #2c3034; --bs-table-striped-color: #fff; --bs-table-active-bg: #373b3e; @@ -1587,26 +1707,26 @@ progress { margin-bottom: 0.5rem; } .col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); + padding-top: calc(0.375rem + var(--bs-border-width)); + padding-bottom: calc(0.375rem + var(--bs-border-width)); margin-bottom: 0; font-size: inherit; line-height: 1.5; } .col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); + padding-top: calc(0.5rem + var(--bs-border-width)); + padding-bottom: calc(0.5rem + var(--bs-border-width)); font-size: 1.25rem; } .col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); + padding-top: calc(0.25rem + var(--bs-border-width)); + padding-bottom: calc(0.25rem + var(--bs-border-width)); font-size: 0.875rem; } .form-text { margin-top: 0.25rem; font-size: 0.875em; - color: #6c757d; } + color: var(--bs-secondary-color); } .form-control { display: block; @@ -1615,12 +1735,12 @@ progress { font-size: 1rem; font-weight: 400; line-height: 1.5; - color: #212529; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; + color: var(--bs-body-color); appearance: none; - border-radius: 0.375rem; + background-color: var(--bs-body-bg); + background-clip: padding-box; + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { @@ -1630,37 +1750,42 @@ progress { .form-control[type="file"]:not(:disabled):not([readonly]) { cursor: pointer; } .form-control:focus { - color: #212529; - background-color: #fff; + color: var(--bs-body-color); + background-color: var(--bs-body-bg); border-color: #8abccc; outline: 0; box-shadow: 0 0 0 0.25rem rgba(20, 120, 153, 0.25); } .form-control::-webkit-date-and-time-value { - height: 1.5em; } + min-width: 85px; + height: 1.5em; + margin: 0; } + .form-control::-webkit-datetime-edit { + display: block; + padding: 0; } .form-control::placeholder { - color: #6c757d; + color: var(--bs-secondary-color); opacity: 1; } .form-control:disabled { - background-color: #e9ecef; + background-color: var(--bs-secondary-bg); opacity: 1; } .form-control::file-selector-button { padding: 0.375rem 0.75rem; margin: -0.375rem -0.75rem; margin-inline-end: 0.75rem; - color: #212529; - background-color: #e9ecef; + color: var(--bs-body-color); + background-color: var(--bs-tertiary-bg); pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; - border-inline-end-width: 1px; + border-inline-end-width: var(--bs-border-width); border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control::file-selector-button { transition: none; } } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { - background-color: #dde0e3; } + background-color: var(--bs-secondary-bg); } .form-control-plaintext { display: block; @@ -1668,10 +1793,10 @@ progress { padding: 0.375rem 0; margin-bottom: 0; line-height: 1.5; - color: #212529; + color: var(--bs-body-color); background-color: transparent; border: solid transparent; - border-width: 1px 0; } + border-width: var(--bs-border-width) 0; } .form-control-plaintext:focus { outline: 0; } .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { @@ -1679,68 +1804,69 @@ progress { padding-left: 0; } .form-control-sm { - min-height: calc(1.5em + 0.5rem + 2px); + min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); padding: 0.25rem 0.5rem; font-size: 0.875rem; - border-radius: 0.25rem; } + border-radius: var(--bs-border-radius-sm); } .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; margin-inline-end: 0.5rem; } .form-control-lg { - min-height: calc(1.5em + 1rem + 2px); + min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); padding: 0.5rem 1rem; font-size: 1.25rem; - border-radius: 0.5rem; } + border-radius: var(--bs-border-radius-lg); } .form-control-lg::file-selector-button { padding: 0.5rem 1rem; margin: -0.5rem -1rem; margin-inline-end: 1rem; } textarea.form-control { - min-height: calc(1.5em + 0.75rem + 2px); } + min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2)); } textarea.form-control-sm { - min-height: calc(1.5em + 0.5rem + 2px); } + min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); } textarea.form-control-lg { - min-height: calc(1.5em + 1rem + 2px); } + min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); } .form-control-color { width: 3rem; - height: calc(1.5em + 0.75rem + 2px); + height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2)); padding: 0.375rem; } .form-control-color:not(:disabled):not([readonly]) { cursor: pointer; } .form-control-color::-moz-color-swatch { border: 0 !important; - border-radius: 0.375rem; } + border-radius: var(--bs-border-radius); } .form-control-color::-webkit-color-swatch { - border-radius: 0.375rem; } + border: 0 !important; + border-radius: var(--bs-border-radius); } .form-control-color.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); } + height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); } .form-control-color.form-control-lg { - height: calc(1.5em + 1rem + 2px); } + height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); } .form-select { + --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; - -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; - color: #212529; - background-color: #fff; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); + color: var(--bs-body-color); + appearance: none; + background-color: var(--bs-body-bg); + background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; - border: 1px solid #ced4da; - border-radius: 0.375rem; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - appearance: none; } + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-select { transition: none; } } @@ -1752,24 +1878,27 @@ textarea.form-control-lg { padding-right: 0.75rem; background-image: none; } .form-select:disabled { - background-color: #e9ecef; } + background-color: var(--bs-secondary-bg); } .form-select:-moz-focusring { color: transparent; - text-shadow: 0 0 0 #212529; } + text-shadow: 0 0 0 var(--bs-body-color); } .form-select-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; font-size: 0.875rem; - border-radius: 0.25rem; } + border-radius: var(--bs-border-radius-sm); } .form-select-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; font-size: 1.25rem; - border-radius: 0.5rem; } + border-radius: var(--bs-border-radius-lg); } + +[data-bs-theme="dark"] .form-select { + --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-check { display: block; @@ -1790,16 +1919,19 @@ textarea.form-control-lg { margin-left: 0; } .form-check-input { + --bs-form-check-bg: var(--bs-body-bg); + flex-shrink: 0; width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; - background-color: #fff; + appearance: none; + background-color: var(--bs-form-check-bg); + background-image: var(--bs-form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; - border: 1px solid rgba(0, 0, 0, 0.25); - appearance: none; + border: var(--bs-border-width) solid var(--bs-border-color); print-color-adjust: exact; } .form-check-input[type="checkbox"] { border-radius: 0.25em; } @@ -1815,13 +1947,13 @@ textarea.form-control-lg { background-color: #147899; border-color: #147899; } .form-check-input:checked[type="checkbox"] { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } + --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type="radio"] { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } + --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-input[type="checkbox"]:indeterminate { background-color: #147899; border-color: #147899; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } + --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } .form-check-input:disabled { pointer-events: none; filter: none; @@ -1833,9 +1965,10 @@ textarea.form-control-lg { .form-switch { padding-left: 2.5em; } .form-switch .form-check-input { + --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); width: 2em; margin-left: -2.5em; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); + background-image: var(--bs-form-switch-bg); background-position: left center; border-radius: 2em; transition: background-position 0.15s ease-in-out; } @@ -1843,10 +1976,10 @@ textarea.form-control-lg { .form-switch .form-check-input { transition: none; } } .form-switch .form-check-input:focus { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238abccc'/%3e%3c/svg%3e"); } + --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238abccc'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-position: right center; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } + --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } .form-switch.form-check-reverse { padding-right: 2.5em; padding-left: 0; } @@ -1867,12 +2000,15 @@ textarea.form-control-lg { filter: none; opacity: 0.65; } +[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) { + --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); } + .form-range { width: 100%; height: 1.5rem; padding: 0; - background-color: transparent; - appearance: none; } + appearance: none; + background-color: transparent; } .form-range:focus { outline: 0; } .form-range:focus::-webkit-slider-thumb { @@ -1885,11 +2021,11 @@ textarea.form-control-lg { width: 1rem; height: 1rem; margin-top: -0.25rem; + appearance: none; background-color: #147899; border: 0; border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - appearance: none; } + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-webkit-slider-thumb { transition: none; } } @@ -1900,17 +2036,17 @@ textarea.form-control-lg { height: 0.5rem; color: transparent; cursor: pointer; - background-color: #dee2e6; + background-color: var(--bs-secondary-bg); border-color: transparent; border-radius: 1rem; } .form-range::-moz-range-thumb { width: 1rem; height: 1rem; + appearance: none; background-color: #147899; border: 0; border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - appearance: none; } + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-moz-range-thumb { transition: none; } } @@ -1921,35 +2057,37 @@ textarea.form-control-lg { height: 0.5rem; color: transparent; cursor: pointer; - background-color: #dee2e6; + background-color: var(--bs-secondary-bg); border-color: transparent; border-radius: 1rem; } .form-range:disabled { pointer-events: none; } .form-range:disabled::-webkit-slider-thumb { - background-color: #adb5bd; } + background-color: var(--bs-secondary-color); } .form-range:disabled::-moz-range-thumb { - background-color: #adb5bd; } + background-color: var(--bs-secondary-color); } .form-floating { position: relative; } .form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select { - height: calc(3.5rem + 2px); + height: calc(3.5rem + calc(var(--bs-border-width) * 2)); + min-height: calc(3.5rem + calc(var(--bs-border-width) * 2)); line-height: 1.25; } .form-floating > label { position: absolute; top: 0; left: 0; - width: 100%; + z-index: 2; height: 100%; padding: 1rem 0.75rem; overflow: hidden; + text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; - border: 1px solid transparent; + border: var(--bs-border-width) solid transparent; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; } @media (prefers-reduced-motion: reduce) { @@ -1977,13 +2115,30 @@ textarea.form-control-lg { .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { - opacity: 0.65; + color: rgba(var(--bs-body-color-rgb), 0.65); transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } + .form-floating > .form-control:focus ~ label::after, + .form-floating > .form-control:not(:placeholder-shown) ~ label::after, + .form-floating > .form-control-plaintext ~ label::after, + .form-floating > .form-select ~ label::after { + position: absolute; + inset: 1rem 0.375rem; + z-index: -1; + height: 1.5em; + content: ""; + background-color: var(--bs-body-bg); + border-radius: var(--bs-border-radius); } .form-floating > .form-control:-webkit-autofill ~ label { - opacity: 0.65; + color: rgba(var(--bs-body-color-rgb), 0.65); transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > .form-control-plaintext ~ label { - border-width: 1px 0; } + border-width: var(--bs-border-width) 0; } + .form-floating > :disabled ~ label, + .form-floating > .form-control:disabled ~ label { + color: #6c757d; } + .form-floating > :disabled ~ label::after, + .form-floating > .form-control:disabled ~ label::after { + background-color: var(--bs-secondary-bg); } .input-group { position: relative; @@ -2001,12 +2156,12 @@ textarea.form-control-lg { .input-group > .form-control:focus, .input-group > .form-select:focus, .input-group > .form-floating:focus-within { - z-index: 3; } + z-index: 5; } .input-group .btn { position: relative; z-index: 2; } .input-group .btn:focus { - z-index: 3; } + z-index: 5; } .input-group-text { display: flex; @@ -2015,12 +2170,12 @@ textarea.form-control-lg { font-size: 1rem; font-weight: 400; line-height: 1.5; - color: #212529; + color: var(--bs-body-color); text-align: center; white-space: nowrap; - background-color: #e9ecef; - border: 1px solid #ced4da; - border-radius: 0.375rem; } + background-color: var(--bs-tertiary-bg); + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); } .input-group-lg > .form-control, .input-group-lg > .form-select, @@ -2028,7 +2183,7 @@ textarea.form-control-lg { .input-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; - border-radius: 0.5rem; } + border-radius: var(--bs-border-radius-lg); } .input-group-sm > .form-control, .input-group-sm > .form-select, @@ -2036,7 +2191,7 @@ textarea.form-control-lg { .input-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; - border-radius: 0.25rem; } + border-radius: var(--bs-border-radius-sm); } .input-group-lg > .form-select, .input-group-sm > .form-select { @@ -2056,10 +2211,13 @@ textarea.form-control-lg { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback), +.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { + margin-left: calc(var(--bs-border-width) * -1); + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select { - margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -2068,7 +2226,7 @@ textarea.form-control-lg { width: 100%; margin-top: 0.25rem; font-size: 0.875em; - color: #198754; } + color: var(--bs-form-valid-color); } .valid-tooltip { position: absolute; @@ -2080,8 +2238,8 @@ textarea.form-control-lg { margin-top: .1rem; font-size: 0.875rem; color: #fff; - background-color: rgba(25, 135, 84, 0.9); - border-radius: 0.375rem; } + background-color: var(--bs-success); + border-radius: var(--bs-border-radius); } .was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, @@ -2090,59 +2248,57 @@ textarea.form-control-lg { display: block; } .was-validated .form-control:valid, .form-control.is-valid { - border-color: #198754; + border-color: var(--bs-form-valid-border-color); padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #198754; - box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } + border-color: var(--bs-form-valid-border-color); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } .was-validated .form-select:valid, .form-select.is-valid { - border-color: #198754; } + border-color: var(--bs-form-valid-border-color); } .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { + --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); padding-right: 4.125rem; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-select:valid:focus, .form-select.is-valid:focus { - border-color: #198754; - box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } + border-color: var(--bs-form-valid-border-color); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated .form-control-color:valid, .form-control-color.is-valid { width: calc(3rem + calc(1.5em + 0.75rem)); } .was-validated .form-check-input:valid, .form-check-input.is-valid { - border-color: #198754; } + border-color: var(--bs-form-valid-border-color); } .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { - background-color: #198754; } + background-color: var(--bs-form-valid-color); } .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { - box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } + box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #198754; } + color: var(--bs-form-valid-color); } .form-check-inline .form-check-input ~ .valid-feedback { margin-left: .5em; } -.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid, .was-validated .input-group .form-select:valid, -.input-group .form-select.is-valid { - z-index: 1; } - .was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus, .was-validated .input-group .form-select:valid:focus, - .input-group .form-select.is-valid:focus { - z-index: 3; } +.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, +.input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, +.input-group > .form-floating:not(:focus-within).is-valid { + z-index: 3; } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; - color: #ff5f5c; } + color: var(--bs-form-invalid-color); } .invalid-tooltip { position: absolute; @@ -2153,9 +2309,9 @@ textarea.form-control-lg { padding: 0.25rem 0.5rem; margin-top: .1rem; font-size: 0.875rem; - color: #000; - background-color: rgba(255, 95, 92, 0.9); - border-radius: 0.375rem; } + color: #fff; + background-color: var(--bs-danger); + border-radius: var(--bs-border-radius); } .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, @@ -2164,52 +2320,50 @@ textarea.form-control-lg { display: block; } .was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #ff5f5c; + border-color: var(--bs-form-invalid-border-color); padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff5f5c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff5f5c' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #ff5f5c; - box-shadow: 0 0 0 0.25rem rgba(255, 95, 92, 0.25); } + border-color: var(--bs-form-invalid-border-color); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } .was-validated .form-select:invalid, .form-select.is-invalid { - border-color: #ff5f5c; } + border-color: var(--bs-form-invalid-border-color); } .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { + --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff5f5c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff5f5c' stroke='none'/%3e%3c/svg%3e"); padding-right: 4.125rem; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff5f5c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff5f5c' stroke='none'/%3e%3c/svg%3e"); background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { - border-color: #ff5f5c; - box-shadow: 0 0 0 0.25rem rgba(255, 95, 92, 0.25); } + border-color: var(--bs-form-invalid-border-color); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated .form-control-color:invalid, .form-control-color.is-invalid { width: calc(3rem + calc(1.5em + 0.75rem)); } .was-validated .form-check-input:invalid, .form-check-input.is-invalid { - border-color: #ff5f5c; } + border-color: var(--bs-form-invalid-border-color); } .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { - background-color: #ff5f5c; } + background-color: var(--bs-form-invalid-color); } .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { - box-shadow: 0 0 0 0.25rem rgba(255, 95, 92, 0.25); } + box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #ff5f5c; } + color: var(--bs-form-invalid-color); } .form-check-inline .form-check-input ~ .invalid-feedback { margin-left: .5em; } -.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid, .was-validated .input-group .form-select:invalid, -.input-group .form-select.is-invalid { - z-index: 2; } - .was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus, .was-validated .input-group .form-select:invalid:focus, - .input-group .form-select.is-invalid:focus { - z-index: 3; } +.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, +.input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, +.input-group > .form-floating:not(:focus-within).is-invalid { + z-index: 4; } .btn { --bs-btn-padding-x: 0.75rem; @@ -2218,11 +2372,12 @@ textarea.form-control-lg { --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; - --bs-btn-color: #212529; + --bs-btn-color: var(--bs-body-color); --bs-btn-bg: transparent; - --bs-btn-border-width: 1px; + --bs-btn-border-width: var(--bs-border-width); --bs-btn-border-color: transparent; - --bs-btn-border-radius: 0.375rem; + --bs-btn-border-radius: var(--bs-border-radius); + --bs-btn-hover-border-color: transparent; --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); --bs-btn-disabled-opacity: 0.65; --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5); @@ -2249,18 +2404,28 @@ textarea.form-control-lg { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } - .btn-check:focus + .btn, .btn:focus { + .btn-check + .btn:hover { + color: var(--bs-btn-color); + background-color: var(--bs-btn-bg); + border-color: var(--bs-btn-border-color); } + .btn:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-focus-box-shadow); } - .btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active, .btn.show { + .btn-check:focus-visible + .btn { + border-color: var(--bs-btn-hover-border-color); + outline: 0; + box-shadow: var(--bs-btn-focus-box-shadow); } + .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); } - .btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .btn.show:focus { + .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible { box-shadow: var(--bs-btn-focus-box-shadow); } + .btn-check:checked:focus-visible + .btn { + box-shadow: var(--bs-btn-focus-box-shadow); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { color: var(--bs-btn-disabled-color); pointer-events: none; @@ -2567,10 +2732,10 @@ textarea.form-control-lg { --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: #6c757d; --bs-btn-disabled-border-color: transparent; - --bs-btn-box-shadow: none; + --bs-btn-box-shadow: 0 0 0 #000; --bs-btn-focus-shadow-rgb: 55, 140, 168; text-decoration: underline; } - .btn-link:focus { + .btn-link:focus-visible { color: var(--bs-btn-color); } .btn-link:hover { color: var(--bs-btn-hover-color); } @@ -2579,13 +2744,13 @@ textarea.form-control-lg { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.25rem; - --bs-btn-border-radius: 0.5rem; } + --bs-btn-border-radius: var(--bs-border-radius-lg); } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.875rem; - --bs-btn-border-radius: 0.25rem; } + --bs-btn-border-radius: var(--bs-border-radius-sm); } .fade { transition: opacity 0.15s linear; } @@ -2635,33 +2800,34 @@ textarea.form-control-lg { margin-left: 0; } .dropdown-menu { + --bs-dropdown-zindex: 1000; --bs-dropdown-min-width: 10rem; --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; --bs-dropdown-font-size: 1rem; - --bs-dropdown-color: #212529; - --bs-dropdown-bg: #fff; + --bs-dropdown-color: var(--bs-body-color); + --bs-dropdown-bg: var(--bs-body-bg); --bs-dropdown-border-color: var(--bs-border-color-translucent); - --bs-dropdown-border-radius: 0.375rem; - --bs-dropdown-border-width: 1px; - --bs-dropdown-inner-border-radius: calc(0.375rem - 1px); + --bs-dropdown-border-radius: var(--bs-border-radius); + --bs-dropdown-border-width: var(--bs-border-width); + --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width)); --bs-dropdown-divider-bg: var(--bs-border-color-translucent); --bs-dropdown-divider-margin-y: 0.5rem; - --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --bs-dropdown-link-color: #212529; - --bs-dropdown-link-hover-color: #1e2125; - --bs-dropdown-link-hover-bg: #e9ecef; + --bs-dropdown-box-shadow: var(--bs-box-shadow); + --bs-dropdown-link-color: var(--bs-body-color); + --bs-dropdown-link-hover-color: var(--bs-body-color); + --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: #147899; - --bs-dropdown-link-disabled-color: #adb5bd; + --bs-dropdown-link-disabled-color: var(--bs-tertiary-color); --bs-dropdown-item-padding-x: 1rem; --bs-dropdown-item-padding-y: 0.25rem; --bs-dropdown-header-color: #6c757d; --bs-dropdown-header-padding-x: 1rem; --bs-dropdown-header-padding-y: 0.5rem; position: absolute; - z-index: 1000; + z-index: var(--bs-dropdown-zindex); display: none; min-width: var(--bs-dropdown-min-width); padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); @@ -2842,7 +3008,8 @@ textarea.form-control-lg { text-decoration: none; white-space: nowrap; background-color: transparent; - border: 0; } + border: 0; + border-radius: var(--bs-dropdown-item-border-radius, 0); } .dropdown-item:hover, .dropdown-item:focus { color: var(--bs-dropdown-link-hover-color); background-color: var(--bs-dropdown-link-hover-bg); } @@ -2916,10 +3083,10 @@ textarea.form-control-lg { width: auto; } .btn-group { - border-radius: 0.375rem; } - .btn-group > .btn:not(:first-child), + border-radius: var(--bs-border-radius); } + .btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) { - margin-left: -1px; } + margin-left: calc(var(--bs-border-width) * -1); } .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn { @@ -2956,7 +3123,7 @@ textarea.form-control-lg { width: 100%; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { - margin-top: -1px; } + margin-top: calc(var(--bs-border-width) * -1); } .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; @@ -2972,7 +3139,7 @@ textarea.form-control-lg { --bs-nav-link-font-weight: ; --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); - --bs-nav-link-disabled-color: #6c757d; + --bs-nav-link-disabled-color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; padding-left: 0; @@ -2986,66 +3153,77 @@ textarea.form-control-lg { font-weight: var(--bs-nav-link-font-weight); color: var(--bs-nav-link-color); text-decoration: none; + background: none; + border: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .nav-link { transition: none; } } .nav-link:hover, .nav-link:focus { color: var(--bs-nav-link-hover-color); } - .nav-link.disabled { + .nav-link:focus-visible { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(20, 120, 153, 0.25); } + .nav-link.disabled, .nav-link:disabled { color: var(--bs-nav-link-disabled-color); pointer-events: none; cursor: default; } .nav-tabs { - --bs-nav-tabs-border-width: 1px; - --bs-nav-tabs-border-color: #dee2e6; - --bs-nav-tabs-border-radius: 0.375rem; - --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6; - --bs-nav-tabs-link-active-color: #495057; - --bs-nav-tabs-link-active-bg: #fff; - --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff; + --bs-nav-tabs-border-width: var(--bs-border-width); + --bs-nav-tabs-border-color: var(--bs-border-color); + --bs-nav-tabs-border-radius: var(--bs-border-radius); + --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color); + --bs-nav-tabs-link-active-color: var(--bs-emphasis-color); + --bs-nav-tabs-link-active-bg: var(--bs-body-bg); + --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg); border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); } .nav-tabs .nav-link { - margin-bottom: calc(var(--bs-nav-tabs-border-width) * -1); - background: none; + margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); border: var(--bs-nav-tabs-border-width) solid transparent; border-top-left-radius: var(--bs-nav-tabs-border-radius); border-top-right-radius: var(--bs-nav-tabs-border-radius); } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { isolation: isolate; border-color: var(--bs-nav-tabs-link-hover-border-color); } - .nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled { - color: var(--bs-nav-link-disabled-color); - background-color: transparent; - border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--bs-nav-tabs-link-active-color); background-color: var(--bs-nav-tabs-link-active-bg); border-color: var(--bs-nav-tabs-link-active-border-color); } .nav-tabs .dropdown-menu { - margin-top: calc(var(--bs-nav-tabs-border-width) * -1); + margin-top: calc(-1 * var(--bs-nav-tabs-border-width)); border-top-left-radius: 0; border-top-right-radius: 0; } .nav-pills { - --bs-nav-pills-border-radius: 0.375rem; + --bs-nav-pills-border-radius: var(--bs-border-radius); --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-link-active-bg: #e7e7e7; } .nav-pills .nav-link { - background: none; - border: 0; border-radius: var(--bs-nav-pills-border-radius); } - .nav-pills .nav-link:disabled { - color: var(--bs-nav-link-disabled-color); - background-color: transparent; - border-color: transparent; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--bs-nav-pills-link-active-color); background-color: var(--bs-nav-pills-link-active-bg); } +.nav-underline { + --bs-nav-underline-gap: 1rem; + --bs-nav-underline-border-width: 0.125rem; + --bs-nav-underline-link-active-color: var(--bs-emphasis-color); + gap: var(--bs-nav-underline-gap); } + .nav-underline .nav-link { + padding-right: 0; + padding-left: 0; + border-bottom: var(--bs-nav-underline-border-width) solid transparent; } + .nav-underline .nav-link:hover, .nav-underline .nav-link:focus { + border-bottom-color: currentcolor; } + .nav-underline .nav-link.active, + .nav-underline .show > .nav-link { + font-weight: 700; + color: var(--bs-nav-underline-link-active-color); + border-bottom-color: currentcolor; } + .nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; @@ -3070,22 +3248,22 @@ textarea.form-control-lg { .navbar { --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0.5rem; - --bs-navbar-color: rgba(0, 0, 0, 0.55); - --bs-navbar-hover-color: rgba(0, 0, 0, 0.7); - --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3); - --bs-navbar-active-color: rgba(0, 0, 0, 0.9); + --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65); + --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8); + --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); + --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; --bs-navbar-brand-font-size: 1.25rem; - --bs-navbar-brand-color: rgba(0, 0, 0, 0.9); - --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9); + --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1); + --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; --bs-navbar-toggler-font-size: 1.25rem; - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --bs-navbar-toggler-border-radius: 0.375rem; + --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); + --bs-navbar-toggler-border-radius: var(--bs-border-radius); --bs-navbar-toggler-focus-width: 0.25rem; --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; @@ -3129,8 +3307,7 @@ textarea.form-control-lg { padding-left: 0; margin-bottom: 0; list-style: none; } - .navbar-nav .show > .nav-link, - .navbar-nav .nav-link.active { + .navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: var(--bs-navbar-active-color); } .navbar-nav .dropdown-menu { position: static; } @@ -3403,7 +3580,8 @@ textarea.form-control-lg { padding: 0; overflow-y: visible; } -.navbar-dark { +.navbar-dark, +.navbar[data-bs-theme="dark"] { --bs-navbar-color: rgba(255, 255, 255, 0.55); --bs-navbar-hover-color: rgba(255, 255, 255, 0.75); --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25); @@ -3413,22 +3591,27 @@ textarea.form-control-lg { --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } +[data-bs-theme="dark"] .navbar-toggler-icon { + --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } + .card { --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem; --bs-card-title-spacer-y: 0.5rem; - --bs-card-border-width: 1px; + --bs-card-title-color: ; + --bs-card-subtitle-color: ; + --bs-card-border-width: var(--bs-border-width); --bs-card-border-color: var(--bs-border-color-translucent); - --bs-card-border-radius: 0.375rem; + --bs-card-border-radius: var(--bs-border-radius); --bs-card-box-shadow: ; - --bs-card-inner-border-radius: calc(0.375rem - 1px); + --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); --bs-card-cap-padding-y: 0.5rem; --bs-card-cap-padding-x: 1rem; - --bs-card-cap-bg: rgba(0, 0, 0, 0.03); + --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03); --bs-card-cap-color: ; --bs-card-height: ; --bs-card-color: ; - --bs-card-bg: #fff; + --bs-card-bg: var(--bs-body-bg); --bs-card-img-overlay-padding: 1rem; --bs-card-group-margin: 0.75rem; position: relative; @@ -3436,6 +3619,7 @@ textarea.form-control-lg { flex-direction: column; min-width: 0; height: var(--bs-card-height); + color: var(--bs-body-color); word-wrap: break-word; background-color: var(--bs-card-bg); background-clip: border-box; @@ -3465,11 +3649,13 @@ textarea.form-control-lg { color: var(--bs-card-color); } .card-title { - margin-bottom: var(--bs-card-title-spacer-y); } + margin-bottom: var(--bs-card-title-spacer-y); + color: var(--bs-card-title-color); } .card-subtitle { margin-top: calc(-.5 * var(--bs-card-title-spacer-y)); - margin-bottom: 0; } + margin-bottom: 0; + color: var(--bs-card-subtitle-color); } .card-text:last-child { margin-bottom: 0; } @@ -3564,28 +3750,27 @@ textarea.form-control-lg { border-bottom-left-radius: 0; } } .accordion { - --bs-accordion-color: #000; - --bs-accordion-bg: #fff; + --bs-accordion-color: var(--bs-body-color); + --bs-accordion-bg: var(--bs-body-bg); --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; --bs-accordion-border-color: var(--bs-border-color); - --bs-accordion-border-width: 1px; - --bs-accordion-border-radius: 0.375rem; - --bs-accordion-inner-border-radius: calc(0.375rem - 1px); + --bs-accordion-border-width: var(--bs-border-width); + --bs-accordion-border-radius: var(--bs-border-radius); + --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); --bs-accordion-btn-padding-x: 1.25rem; --bs-accordion-btn-padding-y: 1rem; --bs-accordion-btn-color: var(--bs-body-color); --bs-accordion-btn-bg: var(--bs-accordion-bg); - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23126c8a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); - --bs-accordion-btn-focus-border-color: #8abccc; + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2308303d' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(20, 120, 153, 0.25); --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; - --bs-accordion-active-color: #126c8a; - --bs-accordion-active-bg: #e8f2f5; } + --bs-accordion-active-color: var(--bs-primary-text-emphasis); + --bs-accordion-active-bg: var(--bs-primary-bg-subtle); } .accordion-button { position: relative; @@ -3607,7 +3792,7 @@ textarea.form-control-lg { .accordion-button:not(.collapsed) { color: var(--bs-accordion-active-color); background-color: var(--bs-accordion-active-bg); - box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color); } + box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); } .accordion-button:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); transform: var(--bs-accordion-btn-icon-transform); } @@ -3628,7 +3813,6 @@ textarea.form-control-lg { z-index: 2; } .accordion-button:focus { z-index: 3; - border-color: var(--bs-accordion-btn-focus-border-color); outline: 0; box-shadow: var(--bs-accordion-btn-focus-box-shadow); } @@ -3642,7 +3826,7 @@ textarea.form-control-lg { .accordion-item:first-of-type { border-top-left-radius: var(--bs-accordion-border-radius); border-top-right-radius: var(--bs-accordion-border-radius); } - .accordion-item:first-of-type .accordion-button { + .accordion-item:first-of-type > .accordion-header .accordion-button { border-top-left-radius: var(--bs-accordion-inner-border-radius); border-top-right-radius: var(--bs-accordion-inner-border-radius); } .accordion-item:not(:first-of-type) { @@ -3650,29 +3834,32 @@ textarea.form-control-lg { .accordion-item:last-of-type { border-bottom-right-radius: var(--bs-accordion-border-radius); border-bottom-left-radius: var(--bs-accordion-border-radius); } - .accordion-item:last-of-type .accordion-button.collapsed { + .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed { border-bottom-right-radius: var(--bs-accordion-inner-border-radius); border-bottom-left-radius: var(--bs-accordion-inner-border-radius); } - .accordion-item:last-of-type .accordion-collapse { + .accordion-item:last-of-type > .accordion-collapse { border-bottom-right-radius: var(--bs-accordion-border-radius); border-bottom-left-radius: var(--bs-accordion-border-radius); } .accordion-body { padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x); } -.accordion-flush .accordion-collapse { - border-width: 0; } - -.accordion-flush .accordion-item { +.accordion-flush > .accordion-item { border-right: 0; border-left: 0; border-radius: 0; } - .accordion-flush .accordion-item:first-child { + .accordion-flush > .accordion-item:first-child { border-top: 0; } - .accordion-flush .accordion-item:last-child { + .accordion-flush > .accordion-item:last-child { border-bottom: 0; } - .accordion-flush .accordion-item .accordion-button { + .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { border-radius: 0; } + .accordion-flush > .accordion-item > .accordion-collapse { + border-radius: 0; } + +[data-bs-theme="dark"] .accordion-button::after { + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2372aec2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2372aec2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .breadcrumb { --bs-breadcrumb-padding-x: 0; @@ -3680,9 +3867,9 @@ textarea.form-control-lg { --bs-breadcrumb-margin-bottom: 1rem; --bs-breadcrumb-bg: ; --bs-breadcrumb-border-radius: ; - --bs-breadcrumb-divider-color: #6c757d; + --bs-breadcrumb-divider-color: var(--bs-secondary-color); --bs-breadcrumb-item-padding-x: 0.5rem; - --bs-breadcrumb-item-active-color: #6c757d; + --bs-breadcrumb-item-active-color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x); @@ -3708,22 +3895,22 @@ textarea.form-control-lg { --bs-pagination-padding-y: 0.375rem; --bs-pagination-font-size: 1rem; --bs-pagination-color: var(--bs-link-color); - --bs-pagination-bg: #fff; - --bs-pagination-border-width: 1px; - --bs-pagination-border-color: #dee2e6; - --bs-pagination-border-radius: 0.375rem; + --bs-pagination-bg: var(--bs-body-bg); + --bs-pagination-border-width: var(--bs-border-width); + --bs-pagination-border-color: var(--bs-border-color); + --bs-pagination-border-radius: var(--bs-border-radius); --bs-pagination-hover-color: var(--bs-link-hover-color); - --bs-pagination-hover-bg: #e9ecef; - --bs-pagination-hover-border-color: #dee2e6; + --bs-pagination-hover-bg: var(--bs-tertiary-bg); + --bs-pagination-hover-border-color: var(--bs-border-color); --bs-pagination-focus-color: var(--bs-link-hover-color); - --bs-pagination-focus-bg: #e9ecef; + --bs-pagination-focus-bg: var(--bs-secondary-bg); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(20, 120, 153, 0.25); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #147899; --bs-pagination-active-border-color: #147899; - --bs-pagination-disabled-color: #6c757d; - --bs-pagination-disabled-bg: #fff; - --bs-pagination-disabled-border-color: #dee2e6; + --bs-pagination-disabled-color: var(--bs-secondary-color); + --bs-pagination-disabled-bg: var(--bs-secondary-bg); + --bs-pagination-disabled-border-color: var(--bs-border-color); display: flex; padding-left: 0; list-style: none; } @@ -3764,22 +3951,27 @@ textarea.form-control-lg { border-color: var(--bs-pagination-disabled-border-color); } .page-item:not(:first-child) .page-link { - margin-left: -1px; } + margin-left: calc(var(--bs-border-width) * -1); } -.page-item .page-link { - border-radius: var(--bs-pagination-border-radius); } +.page-item:first-child .page-link { + border-top-left-radius: var(--bs-pagination-border-radius); + border-bottom-left-radius: var(--bs-pagination-border-radius); } + +.page-item:last-child .page-link { + border-top-right-radius: var(--bs-pagination-border-radius); + border-bottom-right-radius: var(--bs-pagination-border-radius); } .pagination-lg { --bs-pagination-padding-x: 1.5rem; --bs-pagination-padding-y: 0.75rem; --bs-pagination-font-size: 1.25rem; - --bs-pagination-border-radius: 0.5rem; } + --bs-pagination-border-radius: var(--bs-border-radius-lg); } .pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; --bs-pagination-font-size: 0.875rem; - --bs-pagination-border-radius: 0.25rem; } + --bs-pagination-border-radius: var(--bs-border-radius-sm); } .badge { --bs-badge-padding-x: 0.65em; @@ -3787,7 +3979,7 @@ textarea.form-control-lg { --bs-badge-font-size: 0.75em; --bs-badge-font-weight: 700; --bs-badge-color: #fff; - --bs-badge-border-radius: 0.375rem; + --bs-badge-border-radius: var(--bs-border-radius); display: inline-block; padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); font-size: var(--bs-badge-font-size); @@ -3812,8 +4004,9 @@ textarea.form-control-lg { --bs-alert-margin-bottom: 1rem; --bs-alert-color: inherit; --bs-alert-border-color: transparent; - --bs-alert-border: 1px solid var(--bs-alert-border-color); - --bs-alert-border-radius: 0.375rem; + --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color); + --bs-alert-border-radius: var(--bs-border-radius); + --bs-alert-link-color: inherit; position: relative; padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x); margin-bottom: var(--bs-alert-margin-bottom); @@ -3826,7 +4019,8 @@ textarea.form-control-lg { color: inherit; } .alert-link { - font-weight: 700; } + font-weight: 700; + color: var(--bs-alert-link-color); } .alert-dismissible { padding-right: 3rem; } @@ -3838,78 +4032,70 @@ textarea.form-control-lg { padding: 1.25rem 1rem; } .alert-primary { - --bs-alert-color: #0c485c; - --bs-alert-bg: #d0e4eb; - --bs-alert-border-color: #b9d7e0; } - .alert-primary .alert-link { - color: #0a3a4a; } + --bs-alert-color: var(--bs-primary-text-emphasis); + --bs-alert-bg: var(--bs-primary-bg-subtle); + --bs-alert-border-color: var(--bs-primary-border-subtle); + --bs-alert-link-color: var(--bs-primary-text-emphasis); } .alert-secondary { - --bs-alert-color: #41464b; - --bs-alert-bg: #e2e3e5; - --bs-alert-border-color: #d3d6d8; } - .alert-secondary .alert-link { - color: #34383c; } + --bs-alert-color: var(--bs-secondary-text-emphasis); + --bs-alert-bg: var(--bs-secondary-bg-subtle); + --bs-alert-border-color: var(--bs-secondary-border-subtle); + --bs-alert-link-color: var(--bs-secondary-text-emphasis); } .alert-success { - --bs-alert-color: #0f5132; - --bs-alert-bg: #d1e7dd; - --bs-alert-border-color: #badbcc; } - .alert-success .alert-link { - color: #0c4128; } + --bs-alert-color: var(--bs-success-text-emphasis); + --bs-alert-bg: var(--bs-success-bg-subtle); + --bs-alert-border-color: var(--bs-success-border-subtle); + --bs-alert-link-color: var(--bs-success-text-emphasis); } .alert-info { - --bs-alert-color: #055160; - --bs-alert-bg: #cff4fc; - --bs-alert-border-color: #b6effb; } - .alert-info .alert-link { - color: #04414d; } + --bs-alert-color: var(--bs-info-text-emphasis); + --bs-alert-bg: var(--bs-info-bg-subtle); + --bs-alert-border-color: var(--bs-info-border-subtle); + --bs-alert-link-color: var(--bs-info-text-emphasis); } .alert-warning { - --bs-alert-color: #615006; - --bs-alert-bg: #fdf4cf; - --bs-alert-border-color: #fbefb7; } - .alert-warning .alert-link { - color: #4e4005; } + --bs-alert-color: var(--bs-warning-text-emphasis); + --bs-alert-bg: var(--bs-warning-bg-subtle); + --bs-alert-border-color: var(--bs-warning-border-subtle); + --bs-alert-link-color: var(--bs-warning-text-emphasis); } .alert-danger { - --bs-alert-color: #993937; - --bs-alert-bg: #ffdfde; - --bs-alert-border-color: #ffcfce; } - .alert-danger .alert-link { - color: #7a2e2c; } + --bs-alert-color: var(--bs-danger-text-emphasis); + --bs-alert-bg: var(--bs-danger-bg-subtle); + --bs-alert-border-color: var(--bs-danger-border-subtle); + --bs-alert-link-color: var(--bs-danger-text-emphasis); } .alert-light { - --bs-alert-color: #636464; - --bs-alert-bg: #fefefe; - --bs-alert-border-color: #fdfdfe; } - .alert-light .alert-link { - color: #4f5050; } + --bs-alert-color: var(--bs-light-text-emphasis); + --bs-alert-bg: var(--bs-light-bg-subtle); + --bs-alert-border-color: var(--bs-light-border-subtle); + --bs-alert-link-color: var(--bs-light-text-emphasis); } .alert-dark { - --bs-alert-color: #141619; - --bs-alert-bg: #d3d3d4; - --bs-alert-border-color: #bcbebf; } - .alert-dark .alert-link { - color: #101214; } + --bs-alert-color: var(--bs-dark-text-emphasis); + --bs-alert-bg: var(--bs-dark-bg-subtle); + --bs-alert-border-color: var(--bs-dark-border-subtle); + --bs-alert-link-color: var(--bs-dark-text-emphasis); } .alert-red { - --bs-alert-color: #993937; - --bs-alert-bg: #ffdfde; - --bs-alert-border-color: #ffcfce; } - .alert-red .alert-link { - color: #7a2e2c; } + --bs-alert-color: var(--bs-red-text-emphasis); + --bs-alert-bg: var(--bs-red-bg-subtle); + --bs-alert-border-color: var(--bs-red-border-subtle); + --bs-alert-link-color: var(--bs-red-text-emphasis); } @keyframes progress-bar-stripes { 0% { background-position-x: 1rem; } } -.progress { +.progress, +.progress-stacked { --bs-progress-height: 1rem; --bs-progress-font-size: 0.75rem; - --bs-progress-bg: #e9ecef; - --bs-progress-border-radius: 0.375rem; - --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); + --bs-progress-bg: var(--bs-secondary-bg); + --bs-progress-border-radius: var(--bs-border-radius); + --bs-progress-box-shadow: var(--bs-box-shadow-inset); --bs-progress-bar-color: #fff; --bs-progress-bar-bg: #147899; --bs-progress-bar-transition: width 0.6s ease; @@ -3937,26 +4123,32 @@ textarea.form-control-lg { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: var(--bs-progress-height) var(--bs-progress-height); } +.progress-stacked > .progress { + overflow: visible; } + +.progress-stacked > .progress > .progress-bar { + width: 100%; } + .progress-bar-animated { animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } .list-group { - --bs-list-group-color: #212529; - --bs-list-group-bg: #fff; - --bs-list-group-border-color: rgba(0, 0, 0, 0.125); - --bs-list-group-border-width: 1px; - --bs-list-group-border-radius: 0.375rem; + --bs-list-group-color: var(--bs-body-color); + --bs-list-group-bg: var(--bs-body-bg); + --bs-list-group-border-color: var(--bs-border-color); + --bs-list-group-border-width: var(--bs-border-width); + --bs-list-group-border-radius: var(--bs-border-radius); --bs-list-group-item-padding-x: 1rem; --bs-list-group-item-padding-y: 0.5rem; - --bs-list-group-action-color: #495057; - --bs-list-group-action-hover-color: #495057; - --bs-list-group-action-hover-bg: #f8f9fa; - --bs-list-group-action-active-color: #212529; - --bs-list-group-action-active-bg: #e9ecef; - --bs-list-group-disabled-color: #6c757d; - --bs-list-group-disabled-bg: #fff; + --bs-list-group-action-color: var(--bs-secondary-color); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-tertiary-bg); + --bs-list-group-action-active-color: var(--bs-body-color); + --bs-list-group-action-active-bg: var(--bs-secondary-bg); + --bs-list-group-disabled-color: var(--bs-secondary-color); + --bs-list-group-disabled-bg: var(--bs-body-bg); --bs-list-group-active-color: #fff; --bs-list-group-active-bg: #147899; --bs-list-group-active-border-color: #147899; @@ -4012,15 +4204,15 @@ textarea.form-control-lg { .list-group-item + .list-group-item { border-top-width: 0; } .list-group-item + .list-group-item.active { - margin-top: calc(var(--bs-list-group-border-width) * -1); + margin-top: calc(-1 * var(--bs-list-group-border-width)); border-top-width: var(--bs-list-group-border-width); } .list-group-horizontal { flex-direction: row; } - .list-group-horizontal > .list-group-item:first-child { + .list-group-horizontal > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: var(--bs-list-group-border-radius); border-top-right-radius: 0; } - .list-group-horizontal > .list-group-item:last-child { + .list-group-horizontal > .list-group-item:last-child:not(:first-child) { border-top-right-radius: var(--bs-list-group-border-radius); border-bottom-left-radius: 0; } .list-group-horizontal > .list-group-item.active { @@ -4029,16 +4221,16 @@ textarea.form-control-lg { border-top-width: var(--bs-list-group-border-width); border-left-width: 0; } .list-group-horizontal > .list-group-item + .list-group-item.active { - margin-left: calc(var(--bs-list-group-border-width) * -1); + margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } @media (min-width: 576px) { .list-group-horizontal-sm { flex-direction: row; } - .list-group-horizontal-sm > .list-group-item:first-child { + .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: var(--bs-list-group-border-radius); border-top-right-radius: 0; } - .list-group-horizontal-sm > .list-group-item:last-child { + .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) { border-top-right-radius: var(--bs-list-group-border-radius); border-bottom-left-radius: 0; } .list-group-horizontal-sm > .list-group-item.active { @@ -4047,16 +4239,16 @@ textarea.form-control-lg { border-top-width: var(--bs-list-group-border-width); border-left-width: 0; } .list-group-horizontal-sm > .list-group-item + .list-group-item.active { - margin-left: calc(var(--bs-list-group-border-width) * -1); + margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } } @media (min-width: 768px) { .list-group-horizontal-md { flex-direction: row; } - .list-group-horizontal-md > .list-group-item:first-child { + .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: var(--bs-list-group-border-radius); border-top-right-radius: 0; } - .list-group-horizontal-md > .list-group-item:last-child { + .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) { border-top-right-radius: var(--bs-list-group-border-radius); border-bottom-left-radius: 0; } .list-group-horizontal-md > .list-group-item.active { @@ -4065,16 +4257,16 @@ textarea.form-control-lg { border-top-width: var(--bs-list-group-border-width); border-left-width: 0; } .list-group-horizontal-md > .list-group-item + .list-group-item.active { - margin-left: calc(var(--bs-list-group-border-width) * -1); + margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } } @media (min-width: 992px) { .list-group-horizontal-lg { flex-direction: row; } - .list-group-horizontal-lg > .list-group-item:first-child { + .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: var(--bs-list-group-border-radius); border-top-right-radius: 0; } - .list-group-horizontal-lg > .list-group-item:last-child { + .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) { border-top-right-radius: var(--bs-list-group-border-radius); border-bottom-left-radius: 0; } .list-group-horizontal-lg > .list-group-item.active { @@ -4083,16 +4275,16 @@ textarea.form-control-lg { border-top-width: var(--bs-list-group-border-width); border-left-width: 0; } .list-group-horizontal-lg > .list-group-item + .list-group-item.active { - margin-left: calc(var(--bs-list-group-border-width) * -1); + margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } } @media (min-width: 1200px) { .list-group-horizontal-xl { flex-direction: row; } - .list-group-horizontal-xl > .list-group-item:first-child { + .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: var(--bs-list-group-border-radius); border-top-right-radius: 0; } - .list-group-horizontal-xl > .list-group-item:last-child { + .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) { border-top-right-radius: var(--bs-list-group-border-radius); border-bottom-left-radius: 0; } .list-group-horizontal-xl > .list-group-item.active { @@ -4101,16 +4293,16 @@ textarea.form-control-lg { border-top-width: var(--bs-list-group-border-width); border-left-width: 0; } .list-group-horizontal-xl > .list-group-item + .list-group-item.active { - margin-left: calc(var(--bs-list-group-border-width) * -1); + margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } } @media (min-width: 1400px) { .list-group-horizontal-xxl { flex-direction: row; } - .list-group-horizontal-xxl > .list-group-item:first-child { + .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: var(--bs-list-group-border-radius); border-top-right-radius: 0; } - .list-group-horizontal-xxl > .list-group-item:last-child { + .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) { border-top-right-radius: var(--bs-list-group-border-radius); border-bottom-left-radius: 0; } .list-group-horizontal-xxl > .list-group-item.active { @@ -4119,7 +4311,7 @@ textarea.form-control-lg { border-top-width: var(--bs-list-group-border-width); border-left-width: 0; } .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { - margin-left: calc(var(--bs-list-group-border-width) * -1); + margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } } .list-group-flush { @@ -4130,145 +4322,166 @@ textarea.form-control-lg { border-bottom-width: 0; } .list-group-item-primary { - color: #0c485c; - background-color: #d0e4eb; } - .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { - color: #0c485c; - background-color: #bbcdd4; } - .list-group-item-primary.list-group-item-action.active { - color: #fff; - background-color: #0c485c; - border-color: #0c485c; } + --bs-list-group-color: var(--bs-primary-text-emphasis); + --bs-list-group-bg: var(--bs-primary-bg-subtle); + --bs-list-group-border-color: var(--bs-primary-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-primary-border-subtle); + --bs-list-group-active-color: var(--bs-primary-bg-subtle); + --bs-list-group-active-bg: var(--bs-primary-text-emphasis); + --bs-list-group-active-border-color: var(--bs-primary-text-emphasis); } .list-group-item-secondary { - color: #41464b; - background-color: #e2e3e5; } - .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #41464b; - background-color: #cbccce; } - .list-group-item-secondary.list-group-item-action.active { - color: #fff; - background-color: #41464b; - border-color: #41464b; } + --bs-list-group-color: var(--bs-secondary-text-emphasis); + --bs-list-group-bg: var(--bs-secondary-bg-subtle); + --bs-list-group-border-color: var(--bs-secondary-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle); + --bs-list-group-active-color: var(--bs-secondary-bg-subtle); + --bs-list-group-active-bg: var(--bs-secondary-text-emphasis); + --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis); } .list-group-item-success { - color: #0f5132; - background-color: #d1e7dd; } - .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { - color: #0f5132; - background-color: #bcd0c7; } - .list-group-item-success.list-group-item-action.active { - color: #fff; - background-color: #0f5132; - border-color: #0f5132; } + --bs-list-group-color: var(--bs-success-text-emphasis); + --bs-list-group-bg: var(--bs-success-bg-subtle); + --bs-list-group-border-color: var(--bs-success-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-success-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-success-border-subtle); + --bs-list-group-active-color: var(--bs-success-bg-subtle); + --bs-list-group-active-bg: var(--bs-success-text-emphasis); + --bs-list-group-active-border-color: var(--bs-success-text-emphasis); } .list-group-item-info { - color: #055160; - background-color: #cff4fc; } - .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { - color: #055160; - background-color: #badce3; } - .list-group-item-info.list-group-item-action.active { - color: #fff; - background-color: #055160; - border-color: #055160; } + --bs-list-group-color: var(--bs-info-text-emphasis); + --bs-list-group-bg: var(--bs-info-bg-subtle); + --bs-list-group-border-color: var(--bs-info-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-info-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-info-border-subtle); + --bs-list-group-active-color: var(--bs-info-bg-subtle); + --bs-list-group-active-bg: var(--bs-info-text-emphasis); + --bs-list-group-active-border-color: var(--bs-info-text-emphasis); } .list-group-item-warning { - color: #615006; - background-color: #fdf4cf; } - .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { - color: #615006; - background-color: #e4dcba; } - .list-group-item-warning.list-group-item-action.active { - color: #fff; - background-color: #615006; - border-color: #615006; } + --bs-list-group-color: var(--bs-warning-text-emphasis); + --bs-list-group-bg: var(--bs-warning-bg-subtle); + --bs-list-group-border-color: var(--bs-warning-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-warning-border-subtle); + --bs-list-group-active-color: var(--bs-warning-bg-subtle); + --bs-list-group-active-bg: var(--bs-warning-text-emphasis); + --bs-list-group-active-border-color: var(--bs-warning-text-emphasis); } .list-group-item-danger { - color: #993937; - background-color: #ffdfde; } - .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { - color: #993937; - background-color: #e6c9c8; } - .list-group-item-danger.list-group-item-action.active { - color: #fff; - background-color: #993937; - border-color: #993937; } + --bs-list-group-color: var(--bs-danger-text-emphasis); + --bs-list-group-bg: var(--bs-danger-bg-subtle); + --bs-list-group-border-color: var(--bs-danger-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-danger-border-subtle); + --bs-list-group-active-color: var(--bs-danger-bg-subtle); + --bs-list-group-active-bg: var(--bs-danger-text-emphasis); + --bs-list-group-active-border-color: var(--bs-danger-text-emphasis); } .list-group-item-light { - color: #636464; - background-color: #fefefe; } - .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { - color: #636464; - background-color: #e5e5e5; } - .list-group-item-light.list-group-item-action.active { - color: #fff; - background-color: #636464; - border-color: #636464; } + --bs-list-group-color: var(--bs-light-text-emphasis); + --bs-list-group-bg: var(--bs-light-bg-subtle); + --bs-list-group-border-color: var(--bs-light-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-light-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-light-border-subtle); + --bs-list-group-active-color: var(--bs-light-bg-subtle); + --bs-list-group-active-bg: var(--bs-light-text-emphasis); + --bs-list-group-active-border-color: var(--bs-light-text-emphasis); } .list-group-item-dark { - color: #141619; - background-color: #d3d3d4; } - .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { - color: #141619; - background-color: #bebebf; } - .list-group-item-dark.list-group-item-action.active { - color: #fff; - background-color: #141619; - border-color: #141619; } + --bs-list-group-color: var(--bs-dark-text-emphasis); + --bs-list-group-bg: var(--bs-dark-bg-subtle); + --bs-list-group-border-color: var(--bs-dark-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-dark-border-subtle); + --bs-list-group-active-color: var(--bs-dark-bg-subtle); + --bs-list-group-active-bg: var(--bs-dark-text-emphasis); + --bs-list-group-active-border-color: var(--bs-dark-text-emphasis); } .list-group-item-red { - color: #993937; - background-color: #ffdfde; } - .list-group-item-red.list-group-item-action:hover, .list-group-item-red.list-group-item-action:focus { - color: #993937; - background-color: #e6c9c8; } - .list-group-item-red.list-group-item-action.active { - color: #fff; - background-color: #993937; - border-color: #993937; } + --bs-list-group-color: var(--bs-red-text-emphasis); + --bs-list-group-bg: var(--bs-red-bg-subtle); + --bs-list-group-border-color: var(--bs-red-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-red-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-red-border-subtle); + --bs-list-group-active-color: var(--bs-red-bg-subtle); + --bs-list-group-active-bg: var(--bs-red-text-emphasis); + --bs-list-group-active-border-color: var(--bs-red-text-emphasis); } .btn-close { + --bs-btn-close-color: #000; + --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); + --bs-btn-close-opacity: 0.5; + --bs-btn-close-hover-opacity: 0.75; + --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(20, 120, 153, 0.25); + --bs-btn-close-focus-opacity: 1; + --bs-btn-close-disabled-opacity: 0.25; + --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; - color: #000; - background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + color: var(--bs-btn-close-color); + background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat; border: 0; border-radius: 0.375rem; - opacity: 0.5; } + opacity: var(--bs-btn-close-opacity); } .btn-close:hover { - color: #000; + color: var(--bs-btn-close-color); text-decoration: none; - opacity: 0.75; } + opacity: var(--bs-btn-close-hover-opacity); } .btn-close:focus { outline: 0; - box-shadow: 0 0 0 0.25rem rgba(20, 120, 153, 0.25); - opacity: 1; } + box-shadow: var(--bs-btn-close-focus-shadow); + opacity: var(--bs-btn-close-focus-opacity); } .btn-close:disabled, .btn-close.disabled { pointer-events: none; user-select: none; - opacity: 0.25; } + opacity: var(--bs-btn-close-disabled-opacity); } .btn-close-white { - filter: invert(1) grayscale(100%) brightness(200%); } + filter: var(--bs-btn-close-white-filter); } + +[data-bs-theme="dark"] .btn-close { + filter: var(--bs-btn-close-white-filter); } .toast { + --bs-toast-zindex: 1090; --bs-toast-padding-x: 0.75rem; --bs-toast-padding-y: 0.5rem; --bs-toast-spacing: 1.5rem; --bs-toast-max-width: 350px; --bs-toast-font-size: 0.875rem; --bs-toast-color: ; - --bs-toast-bg: rgba(255, 255, 255, 0.85); - --bs-toast-border-width: 1px; + --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85); + --bs-toast-border-width: var(--bs-border-width); --bs-toast-border-color: var(--bs-border-color-translucent); - --bs-toast-border-radius: 0.375rem; - --bs-toast-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --bs-toast-header-color: #6c757d; - --bs-toast-header-bg: rgba(255, 255, 255, 0.85); - --bs-toast-header-border-color: rgba(0, 0, 0, 0.05); + --bs-toast-border-radius: var(--bs-border-radius); + --bs-toast-box-shadow: var(--bs-box-shadow); + --bs-toast-header-color: var(--bs-secondary-color); + --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85); + --bs-toast-header-border-color: var(--bs-border-color-translucent); width: var(--bs-toast-max-width); max-width: 100%; font-size: var(--bs-toast-font-size); @@ -4285,8 +4498,9 @@ textarea.form-control-lg { display: none; } .toast-container { + --bs-toast-zindex: 1090; position: absolute; - z-index: 1090; + z-index: var(--bs-toast-zindex); width: max-content; max-width: 100%; pointer-events: none; } @@ -4304,7 +4518,7 @@ textarea.form-control-lg { border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); } .toast-header .btn-close { - margin-right: calc(var(--bs-toast-padding-x) * -.5); + margin-right: calc(-.5 * var(--bs-toast-padding-x)); margin-left: var(--bs-toast-padding-x); } .toast-body { @@ -4317,22 +4531,22 @@ textarea.form-control-lg { --bs-modal-padding: 1rem; --bs-modal-margin: 0.5rem; --bs-modal-color: ; - --bs-modal-bg: #fff; + --bs-modal-bg: var(--bs-body-bg); --bs-modal-border-color: var(--bs-border-color-translucent); - --bs-modal-border-width: 1px; - --bs-modal-border-radius: 0.5rem; - --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - --bs-modal-inner-border-radius: calc(0.5rem - 1px); + --bs-modal-border-width: var(--bs-border-width); + --bs-modal-border-radius: var(--bs-border-radius-lg); + --bs-modal-box-shadow: var(--bs-box-shadow-sm); + --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width))); --bs-modal-header-padding-x: 1rem; --bs-modal-header-padding-y: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-header-border-color: var(--bs-border-color); - --bs-modal-header-border-width: 1px; + --bs-modal-header-border-width: var(--bs-border-width); --bs-modal-title-line-height: 1.5; --bs-modal-footer-gap: 0.5rem; --bs-modal-footer-bg: ; --bs-modal-footer-border-color: var(--bs-border-color); - --bs-modal-footer-border-width: 1px; + --bs-modal-footer-border-width: var(--bs-border-width); position: fixed; top: 0; left: 0; @@ -4406,14 +4620,13 @@ textarea.form-control-lg { display: flex; flex-shrink: 0; align-items: center; - justify-content: space-between; padding: var(--bs-modal-header-padding); border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); border-top-left-radius: var(--bs-modal-inner-border-radius); border-top-right-radius: var(--bs-modal-inner-border-radius); } .modal-header .btn-close { padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5); - margin: calc(var(--bs-modal-header-padding-y) * -.5) calc(var(--bs-modal-header-padding-x) * -.5) calc(var(--bs-modal-header-padding-y) * -.5) auto; } + margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto; } .modal-title { margin-bottom: 0; @@ -4441,7 +4654,7 @@ textarea.form-control-lg { @media (min-width: 576px) { .modal { --bs-modal-margin: 1.75rem; - --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } + --bs-modal-box-shadow: var(--bs-box-shadow); } .modal-dialog { max-width: var(--bs-modal-width); margin-right: auto; @@ -4560,15 +4773,14 @@ textarea.form-control-lg { --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; --bs-tooltip-font-size: 0.875rem; - --bs-tooltip-color: #fff; - --bs-tooltip-bg: #000; - --bs-tooltip-border-radius: 0.375rem; + --bs-tooltip-color: var(--bs-body-bg); + --bs-tooltip-bg: var(--bs-emphasis-color); + --bs-tooltip-border-radius: var(--bs-border-radius); --bs-tooltip-opacity: 0.9; --bs-tooltip-arrow-width: 0.8rem; --bs-tooltip-arrow-height: 0.4rem; z-index: var(--bs-tooltip-zindex); display: block; - padding: var(--bs-tooltip-arrow-height); margin: var(--bs-tooltip-margin); font-family: var(--bs-font-sans-serif); font-style: normal; @@ -4600,7 +4812,7 @@ textarea.form-control-lg { border-style: solid; } .bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow { - bottom: 0; } + bottom: calc(-1 * var(--bs-tooltip-arrow-height)); } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { top: -1px; border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0; @@ -4608,7 +4820,7 @@ textarea.form-control-lg { /* rtl:begin:ignore */ .bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow { - left: 0; + left: calc(-1 * var(--bs-tooltip-arrow-height)); width: var(--bs-tooltip-arrow-height); height: var(--bs-tooltip-arrow-width); } .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { @@ -4618,7 +4830,7 @@ textarea.form-control-lg { /* rtl:end:ignore */ .bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow { - top: 0; } + top: calc(-1 * var(--bs-tooltip-arrow-height)); } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { bottom: -1px; border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height); @@ -4626,7 +4838,7 @@ textarea.form-control-lg { /* rtl:begin:ignore */ .bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow { - right: 0; + right: calc(-1 * var(--bs-tooltip-arrow-height)); width: var(--bs-tooltip-arrow-height); height: var(--bs-tooltip-arrow-width); } .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { @@ -4647,20 +4859,20 @@ textarea.form-control-lg { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; --bs-popover-font-size: 0.875rem; - --bs-popover-bg: #fff; - --bs-popover-border-width: 1px; + --bs-popover-bg: var(--bs-body-bg); + --bs-popover-border-width: var(--bs-border-width); --bs-popover-border-color: var(--bs-border-color-translucent); - --bs-popover-border-radius: 0.5rem; - --bs-popover-inner-border-radius: calc(0.5rem - 1px); - --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + --bs-popover-border-radius: var(--bs-border-radius-lg); + --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width)); + --bs-popover-box-shadow: var(--bs-box-shadow); --bs-popover-header-padding-x: 1rem; --bs-popover-header-padding-y: 0.5rem; --bs-popover-header-font-size: 1rem; - --bs-popover-header-color: var(--bs-heading-color); - --bs-popover-header-bg: #f0f0f0; + --bs-popover-header-color: inherit; + --bs-popover-header-bg: var(--bs-secondary-bg); --bs-popover-body-padding-x: 1rem; --bs-popover-body-padding-y: 1rem; - --bs-popover-body-color: #212529; + --bs-popover-body-color: var(--bs-body-color); --bs-popover-arrow-width: 1rem; --bs-popover-arrow-height: 0.5rem; --bs-popover-arrow-border: var(--bs-popover-border-color); @@ -4700,7 +4912,7 @@ textarea.form-control-lg { border-width: 0; } .bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow { - bottom: calc((var(--bs-popover-arrow-height) * -1) - var(--bs-popover-border-width)); } + bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); } .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0; } .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before { @@ -4712,7 +4924,7 @@ textarea.form-control-lg { /* rtl:begin:ignore */ .bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow { - left: calc((var(--bs-popover-arrow-height) * -1) - var(--bs-popover-border-width)); + left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); width: var(--bs-popover-arrow-height); height: var(--bs-popover-arrow-width); } .bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { @@ -4726,7 +4938,7 @@ textarea.form-control-lg { /* rtl:end:ignore */ .bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow { - top: calc((var(--bs-popover-arrow-height) * -1) - var(--bs-popover-border-width)); } + top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); } .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height); } .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before { @@ -4742,13 +4954,13 @@ textarea.form-control-lg { left: 50%; display: block; width: var(--bs-popover-arrow-width); - margin-left: calc(var(--bs-popover-arrow-width) * -.5); + margin-left: calc(-.5 * var(--bs-popover-arrow-width)); content: ""; border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg); } /* rtl:begin:ignore */ .bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow { - right: calc((var(--bs-popover-arrow-height) * -1) - var(--bs-popover-border-width)); + right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); width: var(--bs-popover-arrow-height); height: var(--bs-popover-arrow-width); } .bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { @@ -4808,7 +5020,6 @@ textarea.form-control-lg { .carousel-item-prev { display: block; } -/* rtl:begin:ignore */ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%); } @@ -4817,7 +5028,6 @@ textarea.form-control-lg { .active.carousel-item-start { transform: translateX(-100%); } -/* rtl:end:ignore */ .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; @@ -4882,19 +5092,11 @@ textarea.form-control-lg { background-position: 50%; background-size: 100% 100%; } -/* rtl:options: { - "autoRename": true, - "stringMap":[ { - "name" : "prev-next", - "search" : "prev", - "replace" : "next" - } ] -} */ .carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/; } .carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/; } .carousel-indicators { position: absolute; @@ -4907,8 +5109,7 @@ textarea.form-control-lg { padding: 0; margin-right: 15%; margin-bottom: 1rem; - margin-left: 15%; - list-style: none; } + margin-left: 15%; } .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; @@ -4952,6 +5153,17 @@ textarea.form-control-lg { .carousel-dark .carousel-caption { color: #000; } +[data-bs-theme="dark"] .carousel .carousel-control-prev-icon, +[data-bs-theme="dark"] .carousel .carousel-control-next-icon, [data-bs-theme="dark"].carousel .carousel-control-prev-icon, +[data-bs-theme="dark"].carousel .carousel-control-next-icon { + filter: invert(1) grayscale(100); } + +[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target], [data-bs-theme="dark"].carousel .carousel-indicators [data-bs-target] { + background-color: #000; } + +[data-bs-theme="dark"] .carousel .carousel-caption, [data-bs-theme="dark"].carousel .carousel-caption { + color: #000; } + .spinner-grow, .spinner-border { display: inline-block; @@ -5006,21 +5218,24 @@ textarea.form-control-lg { --bs-spinner-animation-speed: 1.5s; } } .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { + --bs-offcanvas-zindex: 1045; --bs-offcanvas-width: 400px; --bs-offcanvas-height: 30vh; --bs-offcanvas-padding-x: 1rem; --bs-offcanvas-padding-y: 1rem; - --bs-offcanvas-color: ; - --bs-offcanvas-bg: #fff; - --bs-offcanvas-border-width: 1px; + --bs-offcanvas-color: var(--bs-body-color); + --bs-offcanvas-bg: var(--bs-body-bg); + --bs-offcanvas-border-width: var(--bs-border-width); --bs-offcanvas-border-color: var(--bs-border-color-translucent); - --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } + --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm); + --bs-offcanvas-transition: transform 0.3s ease-in-out; + --bs-offcanvas-title-line-height: 1.5; } @media (max-width: 575.98px) { .offcanvas-sm { position: fixed; bottom: 0; - z-index: 1045; + z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; @@ -5029,7 +5244,7 @@ textarea.form-control-lg { background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; - transition: transform 0.3s ease-in-out; } } + transition: var(--bs-offcanvas-transition); } } @media (max-width: 575.98px) and (prefers-reduced-motion: reduce) { .offcanvas-sm { transition: none; } } @@ -5084,7 +5299,7 @@ textarea.form-control-lg { .offcanvas-md { position: fixed; bottom: 0; - z-index: 1045; + z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; @@ -5093,7 +5308,7 @@ textarea.form-control-lg { background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; - transition: transform 0.3s ease-in-out; } } + transition: var(--bs-offcanvas-transition); } } @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .offcanvas-md { transition: none; } } @@ -5148,7 +5363,7 @@ textarea.form-control-lg { .offcanvas-lg { position: fixed; bottom: 0; - z-index: 1045; + z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; @@ -5157,7 +5372,7 @@ textarea.form-control-lg { background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; - transition: transform 0.3s ease-in-out; } } + transition: var(--bs-offcanvas-transition); } } @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { .offcanvas-lg { transition: none; } } @@ -5212,7 +5427,7 @@ textarea.form-control-lg { .offcanvas-xl { position: fixed; bottom: 0; - z-index: 1045; + z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; @@ -5221,7 +5436,7 @@ textarea.form-control-lg { background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; - transition: transform 0.3s ease-in-out; } } + transition: var(--bs-offcanvas-transition); } } @media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) { .offcanvas-xl { transition: none; } } @@ -5276,7 +5491,7 @@ textarea.form-control-lg { .offcanvas-xxl { position: fixed; bottom: 0; - z-index: 1045; + z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; @@ -5285,7 +5500,7 @@ textarea.form-control-lg { background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; - transition: transform 0.3s ease-in-out; } } + transition: var(--bs-offcanvas-transition); } } @media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) { .offcanvas-xxl { transition: none; } } @@ -5339,7 +5554,7 @@ textarea.form-control-lg { .offcanvas { position: fixed; bottom: 0; - z-index: 1045; + z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; @@ -5348,7 +5563,7 @@ textarea.form-control-lg { background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; - transition: transform 0.3s ease-in-out; } + transition: var(--bs-offcanvas-transition); } @media (prefers-reduced-motion: reduce) { .offcanvas { transition: none; } } @@ -5400,17 +5615,14 @@ textarea.form-control-lg { .offcanvas-header { display: flex; align-items: center; - justify-content: space-between; padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); } .offcanvas-header .btn-close { padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5); - margin-top: calc(var(--bs-offcanvas-padding-y) * -.5); - margin-right: calc(var(--bs-offcanvas-padding-x) * -.5); - margin-bottom: calc(var(--bs-offcanvas-padding-y) * -.5); } + margin: calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto; } .offcanvas-title { margin-bottom: 0; - line-height: 1.5; } + line-height: var(--bs-offcanvas-title-line-height); } .offcanvas-body { flex-grow: 1; @@ -5460,84 +5672,132 @@ textarea.form-control-lg { .text-bg-primary { color: #fff !important; - background-color: RGBA(20, 120, 153, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(243, 201, 15, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #000 !important; - background-color: RGBA(255, 95, 92, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-red { color: #000 !important; - background-color: RGBA(255, 95, 92, var(--bs-bg-opacity, 1)) !important; } + background-color: RGBA(var(--bs-red-rgb), var(--bs-bg-opacity, 1)) !important; } .link-primary { - color: #147899 !important; } + color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-primary:hover, .link-primary:focus { - color: #10607a !important; } + color: RGBA(16, 96, 122, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(16, 96, 122, var(--bs-link-underline-opacity, 1)) !important; } .link-secondary { - color: #6c757d !important; } + color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { - color: #565e64 !important; } + color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important; } .link-success { - color: #198754 !important; } + color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-success:hover, .link-success:focus { - color: #146c43 !important; } + color: RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important; } .link-info { - color: #0dcaf0 !important; } + color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-info:hover, .link-info:focus { - color: #3dd5f3 !important; } + color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important; } .link-warning { - color: #f3c90f !important; } + color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-warning:hover, .link-warning:focus { - color: #f5d43f !important; } + color: RGBA(245, 212, 63, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(245, 212, 63, var(--bs-link-underline-opacity, 1)) !important; } .link-danger { - color: #ff5f5c !important; } + color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-danger:hover, .link-danger:focus { - color: #ff7f7d !important; } + color: RGBA(255, 127, 125, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(255, 127, 125, var(--bs-link-underline-opacity, 1)) !important; } .link-light { - color: #f8f9fa !important; } + color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-light:hover, .link-light:focus { - color: #f9fafb !important; } + color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important; } .link-dark { - color: #212529 !important; } + color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-dark:hover, .link-dark:focus { - color: #1a1e21 !important; } + color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important; } .link-red { - color: #ff5f5c !important; } + color: RGBA(var(--bs-red-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-red-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-red:hover, .link-red:focus { - color: #ff7f7d !important; } + color: RGBA(255, 127, 125, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(255, 127, 125, var(--bs-link-underline-opacity, 1)) !important; } + +.link-body-emphasis { + color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } + .link-body-emphasis:hover, .link-body-emphasis:focus { + color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important; + text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important; } + +.focus-ring:focus { + outline: 0; + box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); } + +.icon-link { + display: inline-flex; + gap: 0.375rem; + align-items: center; + text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); + text-underline-offset: 0.25em; + backface-visibility: hidden; } + .icon-link > .bi { + flex-shrink: 0; + width: 1em; + height: 1em; + fill: currentcolor; + transition: 0.2s ease-in-out transform; } + @media (prefers-reduced-motion: reduce) { + .icon-link > .bi { + transition: none; } } +.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi { + transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); } .ratio { position: relative; @@ -5653,7 +5913,6 @@ textarea.form-control-lg { .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { - position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; @@ -5662,6 +5921,9 @@ textarea.form-control-lg { clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } + .visually-hidden:not(caption), + .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) { + position: absolute !important; } .stretched-link::after { position: absolute; @@ -5680,7 +5942,7 @@ textarea.form-control-lg { .vr { display: inline-block; align-self: stretch; - width: 1px; + width: var(--bs-border-width); min-height: 1em; background-color: currentcolor; opacity: 0.25; } @@ -5712,6 +5974,21 @@ textarea.form-control-lg { .float-none { float: none !important; } +.object-fit-contain { + object-fit: contain !important; } + +.object-fit-cover { + object-fit: cover !important; } + +.object-fit-fill { + object-fit: fill !important; } + +.object-fit-scale { + object-fit: scale-down !important; } + +.object-fit-none { + object-fit: none !important; } + .opacity-0 { opacity: 0 !important; } @@ -5739,6 +6016,30 @@ textarea.form-control-lg { .overflow-scroll { overflow: scroll !important; } +.overflow-x-auto { + overflow-x: auto !important; } + +.overflow-x-hidden { + overflow-x: hidden !important; } + +.overflow-x-visible { + overflow-x: visible !important; } + +.overflow-x-scroll { + overflow-x: scroll !important; } + +.overflow-y-auto { + overflow-y: auto !important; } + +.overflow-y-hidden { + overflow-y: hidden !important; } + +.overflow-y-visible { + overflow-y: visible !important; } + +.overflow-y-scroll { + overflow-y: scroll !important; } + .d-inline { display: inline !important; } @@ -5751,6 +6052,9 @@ textarea.form-control-lg { .d-grid { display: grid !important; } +.d-inline-grid { + display: inline-grid !important; } + .d-table { display: table !important; } @@ -5770,17 +6074,44 @@ textarea.form-control-lg { display: none !important; } .shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } + box-shadow: var(--bs-box-shadow) !important; } .shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } + box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } + box-shadow: var(--bs-box-shadow-lg) !important; } .shadow-none { box-shadow: none !important; } +.focus-ring-primary { + --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-secondary { + --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-success { + --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-info { + --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-warning { + --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-danger { + --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-light { + --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-dark { + --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity)); } + +.focus-ring-red { + --bs-focus-ring-color: rgba(var(--bs-red-rgb), var(--bs-focus-ring-opacity)); } + .position-static { position: static !important; } @@ -5907,24 +6238,52 @@ textarea.form-control-lg { --bs-border-opacity: 1; border-color: rgba(var(--bs-red-rgb), var(--bs-border-opacity)) !important; } +.border-black { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; } + .border-white { --bs-border-opacity: 1; border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; } +.border-primary-subtle { + border-color: var(--bs-primary-border-subtle) !important; } + +.border-secondary-subtle { + border-color: var(--bs-secondary-border-subtle) !important; } + +.border-success-subtle { + border-color: var(--bs-success-border-subtle) !important; } + +.border-info-subtle { + border-color: var(--bs-info-border-subtle) !important; } + +.border-warning-subtle { + border-color: var(--bs-warning-border-subtle) !important; } + +.border-danger-subtle { + border-color: var(--bs-danger-border-subtle) !important; } + +.border-light-subtle { + border-color: var(--bs-light-border-subtle) !important; } + +.border-dark-subtle { + border-color: var(--bs-dark-border-subtle) !important; } + .border-1 { - --bs-border-width: 1px; } + border-width: 1px !important; } .border-2 { - --bs-border-width: 2px; } + border-width: 2px !important; } .border-3 { - --bs-border-width: 3px; } + border-width: 3px !important; } .border-4 { - --bs-border-width: 4px; } + border-width: 4px !important; } .border-5 { - --bs-border-width: 5px; } + border-width: 5px !important; } .border-opacity-10 { --bs-border-opacity: 0.1; } @@ -6435,6 +6794,42 @@ textarea.form-control-lg { .gap-5 { gap: 3rem !important; } +.row-gap-0 { + row-gap: 0 !important; } + +.row-gap-1 { + row-gap: 0.25rem !important; } + +.row-gap-2 { + row-gap: 0.5rem !important; } + +.row-gap-3 { + row-gap: 1rem !important; } + +.row-gap-4 { + row-gap: 1.5rem !important; } + +.row-gap-5 { + row-gap: 3rem !important; } + +.column-gap-0 { + column-gap: 0 !important; } + +.column-gap-1 { + column-gap: 0.25rem !important; } + +.column-gap-2 { + column-gap: 0.5rem !important; } + +.column-gap-3 { + column-gap: 1rem !important; } + +.column-gap-4 { + column-gap: 1.5rem !important; } + +.column-gap-5 { + column-gap: 3rem !important; } + .font-monospace { font-family: var(--bs-font-monospace) !important; } @@ -6462,21 +6857,24 @@ textarea.form-control-lg { .fst-normal { font-style: normal !important; } -.fw-light { - font-weight: 300 !important; } - .fw-lighter { font-weight: lighter !important; } +.fw-light { + font-weight: 300 !important; } + .fw-normal { font-weight: 400 !important; } -.fw-bold { - font-weight: 700 !important; } +.fw-medium { + font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } +.fw-bold { + font-weight: 700 !important; } + .fw-bolder { font-weight: bolder !important; } @@ -6581,7 +6979,7 @@ textarea.form-control-lg { .text-muted { --bs-text-opacity: 1; - color: #6c757d !important; } + color: var(--bs-secondary-color) !important; } .text-black-50 { --bs-text-opacity: 1; @@ -6591,6 +6989,18 @@ textarea.form-control-lg { --bs-text-opacity: 1; color: rgba(255, 255, 255, 0.5) !important; } +.text-body-secondary { + --bs-text-opacity: 1; + color: var(--bs-secondary-color) !important; } + +.text-body-tertiary { + --bs-text-opacity: 1; + color: var(--bs-tertiary-color) !important; } + +.text-body-emphasis { + --bs-text-opacity: 1; + color: var(--bs-emphasis-color) !important; } + .text-reset { --bs-text-opacity: 1; color: inherit !important; } @@ -6607,6 +7017,154 @@ textarea.form-control-lg { .text-opacity-100 { --bs-text-opacity: 1; } +.text-primary-emphasis { + color: var(--bs-primary-text-emphasis) !important; } + +.text-secondary-emphasis { + color: var(--bs-secondary-text-emphasis) !important; } + +.text-success-emphasis { + color: var(--bs-success-text-emphasis) !important; } + +.text-info-emphasis { + color: var(--bs-info-text-emphasis) !important; } + +.text-warning-emphasis { + color: var(--bs-warning-text-emphasis) !important; } + +.text-danger-emphasis { + color: var(--bs-danger-text-emphasis) !important; } + +.text-light-emphasis { + color: var(--bs-light-text-emphasis) !important; } + +.text-dark-emphasis { + color: var(--bs-dark-text-emphasis) !important; } + +.link-opacity-10 { + --bs-link-opacity: 0.1; } + +.link-opacity-10-hover:hover { + --bs-link-opacity: 0.1; } + +.link-opacity-25 { + --bs-link-opacity: 0.25; } + +.link-opacity-25-hover:hover { + --bs-link-opacity: 0.25; } + +.link-opacity-50 { + --bs-link-opacity: 0.5; } + +.link-opacity-50-hover:hover { + --bs-link-opacity: 0.5; } + +.link-opacity-75 { + --bs-link-opacity: 0.75; } + +.link-opacity-75-hover:hover { + --bs-link-opacity: 0.75; } + +.link-opacity-100 { + --bs-link-opacity: 1; } + +.link-opacity-100-hover:hover { + --bs-link-opacity: 1; } + +.link-offset-1 { + text-underline-offset: 0.125em !important; } + +.link-offset-1-hover:hover { + text-underline-offset: 0.125em !important; } + +.link-offset-2 { + text-underline-offset: 0.25em !important; } + +.link-offset-2-hover:hover { + text-underline-offset: 0.25em !important; } + +.link-offset-3 { + text-underline-offset: 0.375em !important; } + +.link-offset-3-hover:hover { + text-underline-offset: 0.375em !important; } + +.link-underline-primary { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-secondary { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-success { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-info { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-warning { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-danger { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-light { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-dark { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline-red { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-red-rgb), var(--bs-link-underline-opacity)) !important; } + +.link-underline { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } + +.link-underline-opacity-0 { + --bs-link-underline-opacity: 0; } + +.link-underline-opacity-0-hover:hover { + --bs-link-underline-opacity: 0; } + +.link-underline-opacity-10 { + --bs-link-underline-opacity: 0.1; } + +.link-underline-opacity-10-hover:hover { + --bs-link-underline-opacity: 0.1; } + +.link-underline-opacity-25 { + --bs-link-underline-opacity: 0.25; } + +.link-underline-opacity-25-hover:hover { + --bs-link-underline-opacity: 0.25; } + +.link-underline-opacity-50 { + --bs-link-underline-opacity: 0.5; } + +.link-underline-opacity-50-hover:hover { + --bs-link-underline-opacity: 0.5; } + +.link-underline-opacity-75 { + --bs-link-underline-opacity: 0.75; } + +.link-underline-opacity-75-hover:hover { + --bs-link-underline-opacity: 0.75; } + +.link-underline-opacity-100 { + --bs-link-underline-opacity: 1; } + +.link-underline-opacity-100-hover:hover { + --bs-link-underline-opacity: 1; } + .bg-primary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } @@ -6659,6 +7217,14 @@ textarea.form-control-lg { --bs-bg-opacity: 1; background-color: transparent !important; } +.bg-body-secondary { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; } + +.bg-body-tertiary { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; } + .bg-opacity-10 { --bs-bg-opacity: 0.1; } @@ -6674,6 +7240,30 @@ textarea.form-control-lg { .bg-opacity-100 { --bs-bg-opacity: 1; } +.bg-primary-subtle { + background-color: var(--bs-primary-bg-subtle) !important; } + +.bg-secondary-subtle { + background-color: var(--bs-secondary-bg-subtle) !important; } + +.bg-success-subtle { + background-color: var(--bs-success-bg-subtle) !important; } + +.bg-info-subtle { + background-color: var(--bs-info-bg-subtle) !important; } + +.bg-warning-subtle { + background-color: var(--bs-warning-bg-subtle) !important; } + +.bg-danger-subtle { + background-color: var(--bs-danger-bg-subtle) !important; } + +.bg-light-subtle { + background-color: var(--bs-light-bg-subtle) !important; } + +.bg-dark-subtle { + background-color: var(--bs-dark-bg-subtle) !important; } + .bg-gradient { background-image: var(--bs-gradient) !important; } @@ -6711,7 +7301,7 @@ textarea.form-control-lg { border-radius: var(--bs-border-radius-xl) !important; } .rounded-5 { - border-radius: var(--bs-border-radius-2xl) !important; } + border-radius: var(--bs-border-radius-xxl) !important; } .rounded-circle { border-radius: 50% !important; } @@ -6723,24 +7313,167 @@ textarea.form-control-lg { border-top-left-radius: var(--bs-border-radius) !important; border-top-right-radius: var(--bs-border-radius) !important; } +.rounded-top-0 { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; } + +.rounded-top-1 { + border-top-left-radius: var(--bs-border-radius-sm) !important; + border-top-right-radius: var(--bs-border-radius-sm) !important; } + +.rounded-top-2 { + border-top-left-radius: var(--bs-border-radius) !important; + border-top-right-radius: var(--bs-border-radius) !important; } + +.rounded-top-3 { + border-top-left-radius: var(--bs-border-radius-lg) !important; + border-top-right-radius: var(--bs-border-radius-lg) !important; } + +.rounded-top-4 { + border-top-left-radius: var(--bs-border-radius-xl) !important; + border-top-right-radius: var(--bs-border-radius-xl) !important; } + +.rounded-top-5 { + border-top-left-radius: var(--bs-border-radius-xxl) !important; + border-top-right-radius: var(--bs-border-radius-xxl) !important; } + +.rounded-top-circle { + border-top-left-radius: 50% !important; + border-top-right-radius: 50% !important; } + +.rounded-top-pill { + border-top-left-radius: var(--bs-border-radius-pill) !important; + border-top-right-radius: var(--bs-border-radius-pill) !important; } + .rounded-end { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; } +.rounded-end-0 { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; } + +.rounded-end-1 { + border-top-right-radius: var(--bs-border-radius-sm) !important; + border-bottom-right-radius: var(--bs-border-radius-sm) !important; } + +.rounded-end-2 { + border-top-right-radius: var(--bs-border-radius) !important; + border-bottom-right-radius: var(--bs-border-radius) !important; } + +.rounded-end-3 { + border-top-right-radius: var(--bs-border-radius-lg) !important; + border-bottom-right-radius: var(--bs-border-radius-lg) !important; } + +.rounded-end-4 { + border-top-right-radius: var(--bs-border-radius-xl) !important; + border-bottom-right-radius: var(--bs-border-radius-xl) !important; } + +.rounded-end-5 { + border-top-right-radius: var(--bs-border-radius-xxl) !important; + border-bottom-right-radius: var(--bs-border-radius-xxl) !important; } + +.rounded-end-circle { + border-top-right-radius: 50% !important; + border-bottom-right-radius: 50% !important; } + +.rounded-end-pill { + border-top-right-radius: var(--bs-border-radius-pill) !important; + border-bottom-right-radius: var(--bs-border-radius-pill) !important; } + .rounded-bottom { border-bottom-right-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; } +.rounded-bottom-0 { + border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; } + +.rounded-bottom-1 { + border-bottom-right-radius: var(--bs-border-radius-sm) !important; + border-bottom-left-radius: var(--bs-border-radius-sm) !important; } + +.rounded-bottom-2 { + border-bottom-right-radius: var(--bs-border-radius) !important; + border-bottom-left-radius: var(--bs-border-radius) !important; } + +.rounded-bottom-3 { + border-bottom-right-radius: var(--bs-border-radius-lg) !important; + border-bottom-left-radius: var(--bs-border-radius-lg) !important; } + +.rounded-bottom-4 { + border-bottom-right-radius: var(--bs-border-radius-xl) !important; + border-bottom-left-radius: var(--bs-border-radius-xl) !important; } + +.rounded-bottom-5 { + border-bottom-right-radius: var(--bs-border-radius-xxl) !important; + border-bottom-left-radius: var(--bs-border-radius-xxl) !important; } + +.rounded-bottom-circle { + border-bottom-right-radius: 50% !important; + border-bottom-left-radius: 50% !important; } + +.rounded-bottom-pill { + border-bottom-right-radius: var(--bs-border-radius-pill) !important; + border-bottom-left-radius: var(--bs-border-radius-pill) !important; } + .rounded-start { border-bottom-left-radius: var(--bs-border-radius) !important; border-top-left-radius: var(--bs-border-radius) !important; } +.rounded-start-0 { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + +.rounded-start-1 { + border-bottom-left-radius: var(--bs-border-radius-sm) !important; + border-top-left-radius: var(--bs-border-radius-sm) !important; } + +.rounded-start-2 { + border-bottom-left-radius: var(--bs-border-radius) !important; + border-top-left-radius: var(--bs-border-radius) !important; } + +.rounded-start-3 { + border-bottom-left-radius: var(--bs-border-radius-lg) !important; + border-top-left-radius: var(--bs-border-radius-lg) !important; } + +.rounded-start-4 { + border-bottom-left-radius: var(--bs-border-radius-xl) !important; + border-top-left-radius: var(--bs-border-radius-xl) !important; } + +.rounded-start-5 { + border-bottom-left-radius: var(--bs-border-radius-xxl) !important; + border-top-left-radius: var(--bs-border-radius-xxl) !important; } + +.rounded-start-circle { + border-bottom-left-radius: 50% !important; + border-top-left-radius: 50% !important; } + +.rounded-start-pill { + border-bottom-left-radius: var(--bs-border-radius-pill) !important; + border-top-left-radius: var(--bs-border-radius-pill) !important; } + .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } +.z-n1 { + z-index: -1 !important; } + +.z-0 { + z-index: 0 !important; } + +.z-1 { + z-index: 1 !important; } + +.z-2 { + z-index: 2 !important; } + +.z-3 { + z-index: 3 !important; } + @media (min-width: 576px) { .float-sm-start { float: left !important; } @@ -6748,6 +7481,16 @@ textarea.form-control-lg { float: right !important; } .float-sm-none { float: none !important; } + .object-fit-sm-contain { + object-fit: contain !important; } + .object-fit-sm-cover { + object-fit: cover !important; } + .object-fit-sm-fill { + object-fit: fill !important; } + .object-fit-sm-scale { + object-fit: scale-down !important; } + .object-fit-sm-none { + object-fit: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { @@ -6756,6 +7499,8 @@ textarea.form-control-lg { display: block !important; } .d-sm-grid { display: grid !important; } + .d-sm-inline-grid { + display: inline-grid !important; } .d-sm-table { display: table !important; } .d-sm-table-row { @@ -7074,6 +7819,30 @@ textarea.form-control-lg { gap: 1.5rem !important; } .gap-sm-5 { gap: 3rem !important; } + .row-gap-sm-0 { + row-gap: 0 !important; } + .row-gap-sm-1 { + row-gap: 0.25rem !important; } + .row-gap-sm-2 { + row-gap: 0.5rem !important; } + .row-gap-sm-3 { + row-gap: 1rem !important; } + .row-gap-sm-4 { + row-gap: 1.5rem !important; } + .row-gap-sm-5 { + row-gap: 3rem !important; } + .column-gap-sm-0 { + column-gap: 0 !important; } + .column-gap-sm-1 { + column-gap: 0.25rem !important; } + .column-gap-sm-2 { + column-gap: 0.5rem !important; } + .column-gap-sm-3 { + column-gap: 1rem !important; } + .column-gap-sm-4 { + column-gap: 1.5rem !important; } + .column-gap-sm-5 { + column-gap: 3rem !important; } .text-sm-start { text-align: left !important; } .text-sm-end { @@ -7088,6 +7857,16 @@ textarea.form-control-lg { float: right !important; } .float-md-none { float: none !important; } + .object-fit-md-contain { + object-fit: contain !important; } + .object-fit-md-cover { + object-fit: cover !important; } + .object-fit-md-fill { + object-fit: fill !important; } + .object-fit-md-scale { + object-fit: scale-down !important; } + .object-fit-md-none { + object-fit: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { @@ -7096,6 +7875,8 @@ textarea.form-control-lg { display: block !important; } .d-md-grid { display: grid !important; } + .d-md-inline-grid { + display: inline-grid !important; } .d-md-table { display: table !important; } .d-md-table-row { @@ -7414,6 +8195,30 @@ textarea.form-control-lg { gap: 1.5rem !important; } .gap-md-5 { gap: 3rem !important; } + .row-gap-md-0 { + row-gap: 0 !important; } + .row-gap-md-1 { + row-gap: 0.25rem !important; } + .row-gap-md-2 { + row-gap: 0.5rem !important; } + .row-gap-md-3 { + row-gap: 1rem !important; } + .row-gap-md-4 { + row-gap: 1.5rem !important; } + .row-gap-md-5 { + row-gap: 3rem !important; } + .column-gap-md-0 { + column-gap: 0 !important; } + .column-gap-md-1 { + column-gap: 0.25rem !important; } + .column-gap-md-2 { + column-gap: 0.5rem !important; } + .column-gap-md-3 { + column-gap: 1rem !important; } + .column-gap-md-4 { + column-gap: 1.5rem !important; } + .column-gap-md-5 { + column-gap: 3rem !important; } .text-md-start { text-align: left !important; } .text-md-end { @@ -7428,6 +8233,16 @@ textarea.form-control-lg { float: right !important; } .float-lg-none { float: none !important; } + .object-fit-lg-contain { + object-fit: contain !important; } + .object-fit-lg-cover { + object-fit: cover !important; } + .object-fit-lg-fill { + object-fit: fill !important; } + .object-fit-lg-scale { + object-fit: scale-down !important; } + .object-fit-lg-none { + object-fit: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { @@ -7436,6 +8251,8 @@ textarea.form-control-lg { display: block !important; } .d-lg-grid { display: grid !important; } + .d-lg-inline-grid { + display: inline-grid !important; } .d-lg-table { display: table !important; } .d-lg-table-row { @@ -7754,6 +8571,30 @@ textarea.form-control-lg { gap: 1.5rem !important; } .gap-lg-5 { gap: 3rem !important; } + .row-gap-lg-0 { + row-gap: 0 !important; } + .row-gap-lg-1 { + row-gap: 0.25rem !important; } + .row-gap-lg-2 { + row-gap: 0.5rem !important; } + .row-gap-lg-3 { + row-gap: 1rem !important; } + .row-gap-lg-4 { + row-gap: 1.5rem !important; } + .row-gap-lg-5 { + row-gap: 3rem !important; } + .column-gap-lg-0 { + column-gap: 0 !important; } + .column-gap-lg-1 { + column-gap: 0.25rem !important; } + .column-gap-lg-2 { + column-gap: 0.5rem !important; } + .column-gap-lg-3 { + column-gap: 1rem !important; } + .column-gap-lg-4 { + column-gap: 1.5rem !important; } + .column-gap-lg-5 { + column-gap: 3rem !important; } .text-lg-start { text-align: left !important; } .text-lg-end { @@ -7768,6 +8609,16 @@ textarea.form-control-lg { float: right !important; } .float-xl-none { float: none !important; } + .object-fit-xl-contain { + object-fit: contain !important; } + .object-fit-xl-cover { + object-fit: cover !important; } + .object-fit-xl-fill { + object-fit: fill !important; } + .object-fit-xl-scale { + object-fit: scale-down !important; } + .object-fit-xl-none { + object-fit: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { @@ -7776,6 +8627,8 @@ textarea.form-control-lg { display: block !important; } .d-xl-grid { display: grid !important; } + .d-xl-inline-grid { + display: inline-grid !important; } .d-xl-table { display: table !important; } .d-xl-table-row { @@ -8094,6 +8947,30 @@ textarea.form-control-lg { gap: 1.5rem !important; } .gap-xl-5 { gap: 3rem !important; } + .row-gap-xl-0 { + row-gap: 0 !important; } + .row-gap-xl-1 { + row-gap: 0.25rem !important; } + .row-gap-xl-2 { + row-gap: 0.5rem !important; } + .row-gap-xl-3 { + row-gap: 1rem !important; } + .row-gap-xl-4 { + row-gap: 1.5rem !important; } + .row-gap-xl-5 { + row-gap: 3rem !important; } + .column-gap-xl-0 { + column-gap: 0 !important; } + .column-gap-xl-1 { + column-gap: 0.25rem !important; } + .column-gap-xl-2 { + column-gap: 0.5rem !important; } + .column-gap-xl-3 { + column-gap: 1rem !important; } + .column-gap-xl-4 { + column-gap: 1.5rem !important; } + .column-gap-xl-5 { + column-gap: 3rem !important; } .text-xl-start { text-align: left !important; } .text-xl-end { @@ -8108,6 +8985,16 @@ textarea.form-control-lg { float: right !important; } .float-xxl-none { float: none !important; } + .object-fit-xxl-contain { + object-fit: contain !important; } + .object-fit-xxl-cover { + object-fit: cover !important; } + .object-fit-xxl-fill { + object-fit: fill !important; } + .object-fit-xxl-scale { + object-fit: scale-down !important; } + .object-fit-xxl-none { + object-fit: none !important; } .d-xxl-inline { display: inline !important; } .d-xxl-inline-block { @@ -8116,6 +9003,8 @@ textarea.form-control-lg { display: block !important; } .d-xxl-grid { display: grid !important; } + .d-xxl-inline-grid { + display: inline-grid !important; } .d-xxl-table { display: table !important; } .d-xxl-table-row { @@ -8434,6 +9323,30 @@ textarea.form-control-lg { gap: 1.5rem !important; } .gap-xxl-5 { gap: 3rem !important; } + .row-gap-xxl-0 { + row-gap: 0 !important; } + .row-gap-xxl-1 { + row-gap: 0.25rem !important; } + .row-gap-xxl-2 { + row-gap: 0.5rem !important; } + .row-gap-xxl-3 { + row-gap: 1rem !important; } + .row-gap-xxl-4 { + row-gap: 1.5rem !important; } + .row-gap-xxl-5 { + row-gap: 3rem !important; } + .column-gap-xxl-0 { + column-gap: 0 !important; } + .column-gap-xxl-1 { + column-gap: 0.25rem !important; } + .column-gap-xxl-2 { + column-gap: 0.5rem !important; } + .column-gap-xxl-3 { + column-gap: 1rem !important; } + .column-gap-xxl-4 { + column-gap: 1.5rem !important; } + .column-gap-xxl-5 { + column-gap: 3rem !important; } .text-xxl-start { text-align: left !important; } .text-xxl-end { @@ -8460,6 +9373,8 @@ textarea.form-control-lg { display: block !important; } .d-print-grid { display: grid !important; } + .d-print-inline-grid { + display: inline-grid !important; } .d-print-table { display: table !important; } .d-print-table-row { @@ -8485,7 +9400,8 @@ textarea.form-control-lg { .home-subtitle-text { font-size: calc(1.3rem + 0.6vw) !important; } } -.img-hover:hover, .img-hover:focus { +.img-hover:hover, +.img-hover:focus { color: #636464; background-color: #e5e5e5; }