Mirrors/catask
1
0
Fork 0
mirror of https://codeberg.org/catask-org/catask.git synced 2025-04-20 13:53:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
catask/static/css/style.css
mst 2d2ba12379
some style updates
2025-02-28 07:22:35 +03:00

367 lines
11 KiB
CSS
Raw Blame History

: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 var(--bs-primary-bg-subtle);
box-shadow: var(--bs-box-shadow);
}
.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;
}
}
Reference in a new issue View git blame Copy permalink