theme fixes

5 files changed, 44 insertions, 36 deletions

diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index b85889c87..bda0ab3ca 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -7,9 +7,8 @@
   }
 }
 
-.nav-link,
-.form-control {
-	transition: none;
+* {
+	transition: none !important;
 }
 
 /* nav overrides */
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 5a0117939..bd6401f45 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -223,10 +223,10 @@ a.wall-item-name-link {
 
 
 .comment-edit-text {
-	padding: 0.5rem;
+	padding: .5rem;
 	width: 100%;
 	display: inherit;
-	line-height: 1.25;
+	line-height: 1.5;
 	height: 2.5rem;
 	resize: none;
 	overflow: hidden;
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index ce791720c..b93738b00 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -5,7 +5,6 @@
  * Originally by Fabio Comuni <fabrix.xm@gmail.com>
  */
 
-
 /* bootstrap variables */
 
 :root {
@@ -1563,13 +1562,13 @@ dl.bb-dl > dd > li {
 
 /* Turn checkboxes into switches */
 .onoffswitch.checkbox > div {
-    position: relative; width: 60px;
-    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
-    display:inline-block;
+	position: relative; width: 60px;
+	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+	display:inline-block;
 }
 
 .onoffswitch.checkbox input {
-    display: none;
+	display: none;
 }
 
 .onoffswitch.checkbox > div label {
@@ -1581,51 +1580,53 @@ dl.bb-dl > dd > li {
 }
 
 .onoffswitch.checkbox:hover label {
-	color: var(--bs-primary);
+	color: var(--bs-link-color);
 }
 
 .onoffswitch.checkbox:hover > div label {
-	border-color: var(--bs-primary);
+	border-color: var(--bs-link-color);
 }
 
 .onoffswitch-inner {
-    display: block; width: 200%; margin-left: -100%;
+	display: block; width: 200%; margin-left: -100%;
+	transition: margin 0.19s ease-in-out;
 }
 
 .onoffswitch-inner:before, .onoffswitch-inner:after {
-    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
-    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+	display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
+	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
 .onoffswitch-inner:before {
-    content: attr(data-on);
-    padding-right: 21px;
-    background-color: rgba(var(--bs-body-color-rgb), 0);
-    text-align: right;
+	content: attr(data-on);
+	padding-right: 21px;
+	background-color: rgba(var(--bs-body-color-rgb), 0);
+	text-align: right;
 }
 
 .onoffswitch-inner:after {
-    content: attr(data-off);
-    padding-left: 21px;
-    background-color: rgba(var(--bs-body-color-rgb), 0);
-    color: var(--bs-border-color);
-    text-align: left;
+	content: attr(data-off);
+	padding-left: 21px;
+	background-color: rgba(var(--bs-body-color-rgb), 0);
+	color: var(--bs-border-color);
+	text-align: left;
 }
 
 .onoffswitch-switch {
-    display: block; width: 15px; margin:4px;
-    background: var(--bs-secondary-bg);
-    border-radius: 10px;
-    position: absolute; top: 0; bottom: 0; right: 36px;
+	display: block; width: 15px; margin:4px;
+	background: var(--bs-secondary-bg);
+	border-radius: 10px;
+	position: absolute; top: 0; bottom: 0; right: 36px;
+	transition: right 0.2s ease-in-out;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner {
-    margin-left: 0px;
+	margin-left: 0px;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
-    right: 0px;
-    background-color: var(--bs-primary);
+	right: 0px;
+	background-color: var(--bs-link-color);
 }
 
 
@@ -1755,3 +1756,7 @@ dl.bb-dl > dd > li {
 .jg-entry img {
 	border-radius: var(--bs-border-radius);
 }
+
+.disable-transition {
+	transition: none !important;
+}
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 7584f9421..27ad9e15f 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -54,6 +54,8 @@ $(document).ready(function() {
 	});
 
 	$('#theme-switch').click(function() {
+		// $('*').addClass('disable-transition');
+
 		if ($('html').attr('data-bs-theme') === 'dark') {
 			$('html').attr('data-bs-theme', 'light');
 			localStorage.setItem('redbasic_dark_mode', 1);
@@ -64,6 +66,8 @@ $(document).ready(function() {
 			localStorage.setItem('redbasic_dark_mode', 2);
 			$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
 		}
+
+		// setTimeout(() => { $('*').removeClass('disable-transition') }, 100);
 	});
 
 
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index f9499695b..4ca439c3f 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -531,7 +531,7 @@
 		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 	</div>
 	<div id="nav-notifications-template" rel="template">
-		<a class="list-group-item text-decoration-none text-reset clearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
+		<a class="list-group-item list-group-item-action text-decoration-none text-reset clearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
 			<img class="menu-img-3" data-src="{1}" loading="lazy">
 			<div class="contactname"><span class="text-reset fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
 			<span class="text-muted">{4}</span><br>
@@ -539,7 +539,7 @@
 		</a>
 	</div>
 	<div id="nav-notifications-forums-template" rel="template">
-		<a class="list-group-item text-decoration-none clearfix notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
+		<a class="list-group-item list-group-item-action text-decoration-none clearfix notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
 			<span class="float-end badge bg-secondary">{10}</span>
 			<img class="menu-img-1" data-src="{1}" loading="lazy">
 			<span class="">{2}</span>
@@ -556,18 +556,18 @@
 		</div>
 		<div id="nav-{{$notification.type}}-sub" class="rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">
 			{{if $notification.viewall}}
-			<a class="list-group-item text-decoration-none text-reset" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
+			<a class="list-group-item list-group-item-action text-decoration-none" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
 				<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
 			</a>
 			{{/if}}
 			{{if $notification.markall}}
-			<div class="list-group-item cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
+			<div class="list-group-item list-group-item-action cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;">
 				<i class="fa fa-fw fa-check"></i> {{$notification.markall.label}}
 			</div>
 			{{/if}}
 			{{if $notification.filter}}
 			{{if $notification.filter.posts_label}}
-			<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
+			<div class="list-group-item list-group-item-action cursor-pointer" id="tt-{{$notification.type}}-only">
 				<i class="fa fa-fw fa-filter"></i> {{$notification.filter.posts_label}}
 			</div>
 			{{/if}}