Mirrors/catask
1
0
Fork 0
mirror of https://codeberg.org/catask-org/catask.git synced 2025-04-20 05:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

update styles

Browse source
This commit is contained in:
mst 2024-10-19 23:59:12 +03:00
parent b7208381cb
commit 1e9973cfa8
2 changed files with 65 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
static/css/style.css
View file

@ -25,8 +25,8 @@
--bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, 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: 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-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); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), black);
--bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, black);
} }
[data-bs-theme=dark] { [data-bs-theme=dark] {
@ -44,8 +44,8 @@
--bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, 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: 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-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); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), white);
--bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, white);
} }
[data-bs-theme=light] .light-invert, [data-bs-theme=light] .light-invert,
@ -63,6 +63,16 @@
--bs-btn-border-color: var(--bs-basic-btn-active-bg-strong); --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 { .btn-outline-danger {
--bs-btn-color: var(--bs-danger); --bs-btn-color: var(--bs-danger);
--bs-btn-border-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
@ -110,11 +120,29 @@
--bs-btn-active-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 { .btn-basic:hover, .btn-basic:focus {
background-color: var(--bs-basic-btn-hover-bg); background-color: var(--bs-basic-btn-hover-bg);
} }
.btn-basic:active { .btn-basic:active {
background-color: var(--bs-basic-btn-active-bg); background-color: var(--bs-basic-btn-active-bg) !important;
} }
.card-footer .btn-basic:hover, .card-footer .btn-basic:focus { .card-footer .btn-basic:hover, .card-footer .btn-basic:focus {
background-color: var(--bs-basic-btn-hover-bg-strong) !important; background-color: var(--bs-basic-btn-hover-bg-strong) !important;
@ -125,6 +153,7 @@
} }
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
border-color: transparent; border-color: transparent;
background-color: var(--bs-btn-active-bg) !important;
} }
[data-bs-theme=light] .nav-link, a { [data-bs-theme=light] .nav-link, a {
@ -282,3 +311,29 @@ a:hover {
.text-bg-primary { .text-bg-primary {
background-color: var(--bs-primary) !important; background-color: var(--bs-primary) !important;
} }
.emoji {
transition: .2s;
}
.emoji:hover {
scale: 1.3;
}
.fw-buttons button {
width: 100%;
margin-top: .25rem;
margin-bottom: .25rem;
}
.markdown-content p:not(:first-child) {
margin-top: .5rem;
}
.scale-parent:hover .scale-child,
.scale-parent.active .scale-child {
scale: 1.2;
}
.scale-parent .scale-child {
transition: .2s;
}

8
static/css/tinted.css
View file

@ -16,12 +16,12 @@
--bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black); --bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black);
--bs-tertiary-bg: var(--bs-primary-bg-subtle); --bs-tertiary-bg: var(--bs-primary-bg-subtle);
--bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color)); --bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color));
--bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, black);
} }
[data-bs-theme=dark] { [data-bs-theme=dark] {
--bs-body-bg-untinted: #202020; --bs-body-bg-untinted: #202020;
--bs-body-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg-untinted)); --bs-body-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg-untinted));
/* --bs-body-bg-rgb: 32, 32, 32;*/
--bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent);
--bs-danger-bg-subtle: #2c0b0e; --bs-danger-bg-subtle: #2c0b0e;
--bs-link-color: color-mix(in srgb, var(--bs-primary) 55%, white); --bs-link-color: color-mix(in srgb, var(--bs-primary) 55%, white);
@ -35,6 +35,7 @@
--bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black); --bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black);
--bs-tertiary-bg: var(--bs-primary-bg-subtle); --bs-tertiary-bg: var(--bs-primary-bg-subtle);
--bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color)); --bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color));
--bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, white);
} }
.btn-check:checked + .btn-secondary, .btn-check:checked + .btn-outline-secondary { .btn-check:checked + .btn-secondary, .btn-check:checked + .btn-outline-secondary {
@ -91,3 +92,8 @@
--bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, transparent); --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) 70%, black); --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 70%, black);
} }
hr {
border-color: var(--bs-border-color);
opacity: .75;
}