improve styles

static/css/style.css

@@ -26,22 +26,26 @@
 	--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-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] {
 	--bs-body-bg: #202020;
 	--bs-body-bg-rgb: 32, 32, 32;
-	--bs-primary: #7f62f0;
+	--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) 65%, white);
+	--bs-link-color: color-mix(in srgb, var(--bs-primary) 55%, 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-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,
@@ -59,6 +63,11 @@
 	--bs-btn-border-color: var(--bs-basic-btn-active-bg-strong);
 }
 
+.btn-outline-danger {
+	--bs-btn-color: var(--bs-danger);
+	--bs-btn-border-color: var(--bs-danger);
+}
+
 .btn {
 	--bs-btn-border-radius: .5rem;
 }
@@ -67,7 +76,7 @@
 }
 
 [data-bs-theme=light] .btn-primary {
-	--bs-btn-bg: var(--bs-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);
@@ -93,17 +102,25 @@
 	padding: 7px 13px;
 }
 
-.btn:not(.btn-primary, .btn-outline-warning, .btn-success, .btn-secondary, .btn-danger,.btn-outline-danger):hover, .btn:not(.btn-primary, .btn-success, .btn-secondary, .btn-outline-warning, .btn-danger,.btn-outline-danger):focus {
+.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);
+}
+
+.btn-basic:hover, .btn-basic:focus {
 	background-color: var(--bs-basic-btn-hover-bg);
 }
-.btn:not(.btn-primary, .btn-outline-warning, .btn-success, .btn-secondary, .btn-danger,.btn-outline-danger):active {
+.btn-basic:active {
 	background-color: var(--bs-basic-btn-active-bg);
 }
-.card-footer .btn:not(.btn-primary, .btn-outline-warning, .btn-success, .btn-secondary, .btn-danger, .btn-outline-danger):hover, .card-footer .btn:not(.btn-primary, .btn-success, .btn-outline-warning, .btn-secondary, .btn-danger,.btn-outline-danger):focus {
+.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:not(.btn-primary, .btn-outline-warning, .btn-secondary, .btn-success, .btn-danger, .btn-outline-danger):active {
+.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 {
@@ -128,12 +145,12 @@ a:hover {
 
 [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: var(--bs-primary);
+	--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) 70%, white);
+	--bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 60%, white);
 }
 
 .dropdown-item.active, .dropdown-item:active {
@@ -144,9 +161,15 @@ a:hover {
 	padding: .5em;
 }
 .dropdown-toggle::after {
-	border-top: .275em solid;
+	content: '\f282';
-	border-right: .275em solid transparent;
+	font-family: bootstrap-icons;
-	border-left: .275em solid transparent;
+	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);
@@ -230,3 +253,32 @@ a:hover {
 	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;
+}