:root { --bs-link-color-rgb: var(--bs-primary-rgb); --bs-nav-link-color: var(--bs-primary); --bs-border-radius: .5rem; } [data-bs-theme=light] { --bs-primary: #6345d9; --bs-primary-rgb: 99, 69, 217; --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); --bs-danger: #dc3545; --bs-danger-bg-subtle: #f8e6e8; --bs-link-color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color)); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-basic-btn-hover-bg: color-mix(in srgb, var(--bs-body-bg) 95%, black); --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, black); --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 92%, black); --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-body-bg) 87%, black); --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), black); } [data-bs-theme=dark] { --bs-body-bg: #202020; --bs-body-bg-rgb: 32, 32, 32; --bs-primary: #7259d9; --bs-primary-rgb: 127,98,240; --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); --bs-danger: #e06672; --bs-danger-rgb: 224, 102, 114; --bs-danger-bg-subtle: #2c0b0e; --bs-link-color: color-mix(in srgb, var(--bs-primary), white); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); --bs-basic-btn-hover-bg:color-mix(in srgb, var(--bs-body-bg) 95%, white); --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, white); --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 92%, white); --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-body-bg) 87%, white); --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), white); } .bg-body { background-color: var(--bs-body-bg) !important; } .placeholder { border-radius: var(--bs-border-radius-sm); } [data-bs-theme=light] .light-invert, [data-bs-theme=dark] .dark-invert { filter: invert(); } .tooltip { --bs-tooltip-color: var(--bs-body-color); --bs-tooltip-bg: var(--bs-body-bg); --bs-tooltip-opacity: 1; } .tooltip-inner { border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent); box-shadow: var(--bs-box-shadow); } .tooltip-arrow { display: none !important; } .text-primary { color: var(--bs-primary) !important; } .btn-check:checked + .btn-secondary, .btn-check:checked + .btn-outline-secondary { --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong) !important; --bs-btn-active-color: var(--bs-body-color); background-color: var(--bs-btn-active-bg) !important; } .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-basic-btn-active-bg-strong); } [data-bs-theme=dark] .btn-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-basic-btn-hover-bg); } [data-bs-theme=light] .btn-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-basic-btn-hover-bg); } .btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: ; --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger-border-subtle) 60%, transparent); --bs-btn-hover-border-color: #dc3545; } [data-bs-theme=dark] .btn-outline-danger { --bs-btn-active-bg: var(--bs-danger-border-subtle); } [data-bs-theme=dark] .btn-danger { --bs-btn-border-color: var(--bs-danger-border-subtle); --bs-btn-bg: var(--bs-danger-border-subtle); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger-border-subtle) 80%, var(--bs-body-bg)); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger-border-subtle) 80%, var(--bs-body-bg)); --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger-border-subtle) 70%, var(--bs-body-bg)); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger-border-subtle) 70%, var(--bs-body-bg)); } .btn { --bs-btn-border-radius: .5rem; } .btn.disabled, .btn:disabled, fieldset:disabled .btn { background-color: var(--bs-btn-disabled-bg); } [data-bs-theme=light] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 90%, black); --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); --bs-btn-active-border-color: var(--bs-btn-active-bg); --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 70%, white); } [data-bs-theme=dark] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 65%, black); --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); --bs-btn-active-border-color: var(--bs-btn-active-bg); --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 70%, black); } .btn.btn-primary { font-weight: 500; border: none; background-image: var(--bs-gradient); padding: 7px 13px; } .btn-outline-secondary { --bs-btn-hover-border-color: var(--bs-basic-btn-hover-bg); --bs-btn-hover-bg: var(--bs-basic-btn-hover-bg); --bs-btn-active-bg: var(--bs-basic-btn-active-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-color: var(--bs-body-color); } [data-bs-theme=dark] .btn-secondary { --bs-btn-bg: var(--bs-basic-btn-hover-bg); --bs-btn-hover-border-color: var(--bs-basic-btn-hover-bg-strong); --bs-btn-hover-bg: var(--bs-basic-btn-hover-bg-strong); --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-color: var(--bs-body-color); } [data-bs-theme=light] .btn-secondary { --bs-btn-bg: var(--bs-basic-btn-hover-bg); --bs-btn-hover-border-color: var(--bs-basic-btn-hover-bg-strong); --bs-btn-hover-bg: var(--bs-basic-btn-hover-bg-strong); --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-color: var(--bs-body-color); } .btn-basic:hover, .btn-basic:focus { background-color: var(--bs-basic-btn-hover-bg); } .btn-basic:active { background-color: var(--bs-basic-btn-active-bg) !important; } .card-footer .btn-basic:hover, .card-footer .btn-basic:focus { background-color: var(--bs-basic-btn-hover-bg-strong) !important; color: var(--bs-body-color) !important; } .card-footer .btn-basic:active { background-color: var(--bs-basic-btn-active-bg-strong) !important; } .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { border-color: transparent; background-color: var(--bs-btn-active-bg) !important; } .modal { --bs-modal-padding: 1.3rem; --bs-modal-header-padding: 1.3rem; } .modal.fade .modal-dialog { transition: transform .2s ease-out; } [data-bs-theme=light] .nav-link, a { color: var(--bs-link-color); } .nav-underline .nav-link:not(.active):hover { color: var(--bs-nav-link-color); } /* [data-bs-theme=dark] .nav-link, [data-bs-theme=dark] a { */ /* color: var(--bs-link-color); */ /* } */ a:hover { color: var(--bs-link-hover-color); } [data-bs-theme=light] .dropdown-item:hover, [data-bs-theme=light] .dropdown-item:focus { --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, transparent); --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, black); } [data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus { --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, transparent); --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 60%, white); } .dropdown-item.active, .dropdown-item:active { background-color: var(--bs-primary); } .dropdown-menu { padding: .5em; } .dropdown-toggle::after { content: '\f282'; font-family: bootstrap-icons; font-size: .75rem; color: var(--bs-body-color); font-weight: bold; vertical-align: unset; border-top: 0; border-right: 0; border-left: 0; } .dropdown-menu, .dropdown-item { border-radius: var(--bs-border-radius); } .dropdown-item { padding: .25em .6em; } .bg-hover-danger.dropdown-item:hover { --bs-dropdown-link-hover-bg: var(--bs-danger-bg-subtle); --bs-dropdown-link-hover-color: var(--bs-danger); } /*.bg-hover-danger.dropdown-item.active, .bg-hover-danger.dropdown-item:active { --bs-dropdown-link-active-bg: var(--bs-danger); background-color: var(--bs-danger) !important; color: var(--bs-dropdown-bg) !important;*/ /* color: white !important; */ /* --bs-dropdown-link-active-color: white; */ /* } */ .bg-hover-danger.dropdown-item.active, .bg-hover-danger.dropdown-item:active { color: var(--bs-dropdown-link-active-color) !important; } .form-control:focus, .form-check-input:focus, .accordion-button:focus, .btn:focus-visible, .form-select:focus { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 25%, transparent); border-color: color-mix(in srgb, var(--bs-primary) 80%, transparent); outline: 0; } .list-group-item.active { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); } .card, .dropdown-menu { box-shadow: var(--bs-box-shadow); } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .nav-underline .nav-link.active, .nav-underline .show > .nav-link { font-weight: 500; } .spinner-border-sm { --bs-spinner-border-width: .15em; } /* #dee2e6 */ [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='%23dee2e6'%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='%23d7d8ea'%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"); } #rules li:not(:first-child, :last-child) { margin: .5em 0; } #rules li::marker { font-weight: bold; font-size: 1.5em; } .collapse { transition: 0 !important; } .icon-link > .bi { height: revert; } .clr-field button { background-image: none !important; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; } .nav-pills { --bs-nav-link-padding-x: .6rem; --bs-nav-link-padding-y: .2rem; --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle); --bs-nav-pills-link-active-color: var(--bs-dropdown-link-hover-color); } .nav-pills .nav-link:not(.active):hover { background-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 80%, var(--bs-body-bg)); color: var(--bs-link-color); } .text-bg-primary { background-color: var(--bs-primary) !important; } .emoji { transition: .2s; } .emoji:hover { scale: 1.5; } .scale-parent:hover .scale-child, .scale-parent.active .scale-child { scale: 1.2; } .scale-parent .scale-child { transition: .2s; } .badge { --bs-badge-padding-x: 0.5em; --bs-badge-padding-y: 0.25em; } @media screen and (max-width: 800px) { .dropdown-item { padding: .4em .6em; } } @media screen and (max-width: 991px) { .fs-mob-5 { font-size: 1.25rem !important; } }