aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2023-01-20 20:07:37 +0000
committerMario <mario@mariovavti.com>2023-01-20 20:07:37 +0000
commit2d5e09f93022f8e31986e331f67901fe755ae6ec (patch)
treeb7a4b8bc4fb1f3de0c92702457837d80174cceaa
parentfbda34935d7cdb1a8672738d613f053b9530ff28 (diff)
downloadvolse-hubzilla-2d5e09f93022f8e31986e331f67901fe755ae6ec.tar.gz
volse-hubzilla-2d5e09f93022f8e31986e331f67901fe755ae6ec.tar.bz2
volse-hubzilla-2d5e09f93022f8e31986e331f67901fe755ae6ec.zip
theme fixes
-rw-r--r--view/css/bootstrap-red.css5
-rw-r--r--view/css/conversation.css4
-rw-r--r--view/theme/redbasic/css/style.css57
-rw-r--r--view/theme/redbasic/js/redbasic.js4
-rw-r--r--view/tpl/notifications_widget.tpl10
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}}