@font-face { font-family: "Rubik"; font-display: swap; font-weight: 100 900; src: url("../fonts/rubik.woff2") format('woff2-variations'); } :root { --bs-font-sans-serif: "Rubik", sans-serif; --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-subtle: color-mix(in srgb, var(--bs-primary) 10%, 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: var(--bs-primary); --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); } [data-bs-theme=dark] { --bs-body-bg: #202020; --bs-body-bg-rgb: 32, 32, 32; --bs-primary: #7f62f0; --bs-primary-rgb: 127,98,240; --bs-primary-subtle: color-mix(in srgb, var(--bs-primary) 10%, transparent); --bs-danger-bg-subtle: #2c0b0e; --bs-link-color: color-mix(in srgb, var(--bs-primary) 65%, 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); } [data-bs-theme=light] .light-invert, [data-bs-theme=dark] .dark-invert { filter: invert(); } .btn { --bs-btn-border-radius: .5rem; } .btn:not(.btn-primary,.btn-danger,.btn-success):focus-visible { outline: revert; } [data-bs-theme=light] .btn-primary { --bs-btn-bg: var(--bs-primary); --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); } [data-bs-theme=dark] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 80%, 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); } .btn.btn-primary { font-weight: 500; border: none; background-image: var(--bs-gradient); padding: 7px 13px; } .btn:not(.btn-primary, .btn-success, .btn-danger,.btn-outline-danger):hover, .btn:not(.btn-primary, .btn-success, .btn-danger,.btn-outline-danger):focus { background-color: var(--bs-basic-btn-hover-bg); } .btn:not(.btn-primary, .btn-success, .btn-danger,.btn-outline-danger):active { background-color: var(--bs-basic-btn-active-bg); } .card-footer .btn:not(.btn-primary, .btn-success, .btn-danger,.btn-outline-danger):hover, .card-footer .btn:not(.btn-primary, .btn-success, .btn-danger,.btn-outline-danger):focus { background-color: var(--bs-basic-btn-hover-bg-strong) !important; color: var(--bs-body-color) !important; } .card-footer .btn:not(.btn-primary, .btn-success, .btn-danger,.btn-outline-danger):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; } [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: var(--bs-primary-subtle); --bs-dropdown-link-hover-color: var(--bs-primary); } [data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus { --bs-dropdown-link-hover-bg: var(--bs-primary-subtle); --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 70%, white); } .dropdown-item.active, .dropdown-item:active { background-color: var(--bs-primary); } .dropdown-menu { padding: .5em; } .dropdown-toggle::after { border-top: .275em solid; border-right: .275em solid transparent; border-left: .275em solid transparent; } .dropdown-menu, .dropdown-item { border-radius: var(--bs-border-radius); } .dropdown-item { padding-left: .6em; padding-right: .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: red !important; color: white !important; --bs-dropdown-link-active-color: white; } .form-control:focus, .form-check-input: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), transparent); } .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); } .no-arrow.dropdown-toggle::after { border: none; display: none; } .markdown-content p { margin: 0; } .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }