catask/static/css/style.css

@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);
}