mirror of
https://codeberg.org/catask-org/catask.git
synced 2025-04-20 13:53:42 -05:00
142 lines
3.8 KiB
CSS
142 lines
3.8 KiB
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);
|
|
}
|
|
|
|
[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;
|
|
}
|
|
|
|
[data-bs-theme=dark] {
|
|
--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) 60%, white);
|
|
}
|
|
|
|
.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: color-mix(in srgb, var(--bs-primary) 90%, white);
|
|
--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;
|
|
}
|
|
|
|
[data-bs-theme=light] .nav-link {
|
|
color: color-mix(in srgb, var(--bs-primary) 90%, black);
|
|
}
|
|
|
|
[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);
|
|
}
|
|
|
|
.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);
|
|
}
|