From 1e9973cfa8ec6d46d65648be1efb927ce7e838ba Mon Sep 17 00:00:00 2001
From: mst <oivan2401@gmail.com>
Date: Sat, 19 Oct 2024 23:59:12 +0300
Subject: [PATCH] update styles

---
 static/css/style.css  | 61 ++++++++++++++++++++++++++++++++++++++++---
 static/css/tinted.css |  8 +++++-
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 4fe56f3..69ce459 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -25,8 +25,8 @@
 	--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);
-	--bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, black);
 }
 
 [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-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);
-	--bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, white);
 }
 
 [data-bs-theme=light] .light-invert,
@@ -63,6 +63,16 @@
 	--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);
@@ -110,11 +120,29 @@
 	--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);
+	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;
@@ -125,6 +153,7 @@
 }
 .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;
 }
 
 [data-bs-theme=light] .nav-link, a {
@@ -282,3 +311,29 @@ a:hover {
 .text-bg-primary {
 	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;
+}
diff --git a/static/css/tinted.css b/static/css/tinted.css
index 17674c7..cad3ea2 100644
--- a/static/css/tinted.css
+++ b/static/css/tinted.css
@@ -16,12 +16,12 @@
 	--bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black);
 	--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-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, black);
 }
 
 [data-bs-theme=dark] {
 	--bs-body-bg-untinted: #202020;
 	--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-danger-bg-subtle: #2c0b0e;
 	--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-tertiary-bg: var(--bs-primary-bg-subtle);
 	--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 {
@@ -90,4 +91,9 @@
 [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) 70%, black);
+}
+
+hr {
+	border-color: var(--bs-border-color);
+	opacity: .75;
 }
\ No newline at end of file