aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/css/bootstrap-red.css5
-rw-r--r--view/css/conversation.css11
-rw-r--r--view/css/widgets.css3
-rw-r--r--view/php/default.php2
-rw-r--r--view/theme/redbasic/css/style.css223
-rw-r--r--view/theme/redbasic/js/redbasic.js27
-rw-r--r--view/theme/redbasic/php/config.php78
-rw-r--r--view/theme/redbasic/php/style.php111
-rw-r--r--view/theme/redbasic/php/theme.php19
-rw-r--r--view/theme/redbasic/schema/Focus-Boxy.css10
-rw-r--r--view/theme/redbasic/schema/Focus-Light.css9
-rw-r--r--view/theme/redbasic/schema/dark.css51
-rw-r--r--view/theme/redbasic/schema/dark.php43
-rw-r--r--view/theme/redbasic/tpl/theme_settings.tpl33
-rw-r--r--view/tpl/cdav_widget_calendar.tpl26
-rw-r--r--view/tpl/channel_activities.tpl2
-rw-r--r--view/tpl/navbar_default.tpl11
-rw-r--r--view/tpl/notifications_widget.tpl6
18 files changed, 315 insertions, 355 deletions
diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index f1296d7b2..b85889c87 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -7,6 +7,11 @@
}
}
+.nav-link,
+.form-control {
+ transition: none;
+}
+
/* nav overrides */
nav .badge {
diff --git a/view/css/conversation.css b/view/css/conversation.css
index d6a99f853..5a0117939 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -21,12 +21,12 @@
#jot-pagetitle-wrap,
#jot-category-wrap,
#jot-customjotheaders-wrap {
- border-bottom: 1px solid rgba(0, 0, 0, .2);
+ border-bottom: 1px solid var(--bs-border-color);
}
#jot-attachment-wrap,
#jot-poll-wrap {
- border-top: 1px solid rgba(0, 0, 0, .2);
+ border-top: 1px solid rvar(--bs-border-color);
}
#jot-title-wrap input,
@@ -89,7 +89,7 @@
}
#profile-jot-submit-wrapper {
- border-top: 1px solid rgba(0, 0, 0, .2);
+ border-top: 1px solid var(--bs-border-color);
}
/* conversation */
@@ -226,10 +226,11 @@ a.wall-item-name-link {
padding: 0.5rem;
width: 100%;
display: inherit;
- line-height: 1;
- height: 2rem;
+ line-height: 1.25;
+ height: 2.5rem;
resize: none;
overflow: hidden;
+ outline: none;
}
.comment-edit-text.expanded {
diff --git a/view/css/widgets.css b/view/css/widgets.css
index ebe0f47b0..463f53d22 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -213,7 +213,7 @@ a.wikilist {
top: 0px;
left: 0px;
padding: 4.5rem .5rem 1rem .5rem;
- background-color: white;
+ background-color: var(--bs-body-bg);
width: 100%;
max-width: 100%;
height: 100%;
@@ -223,6 +223,7 @@ a.wikilist {
#notifications {
margin-bottom: 1rem;
+ background-color: var(--bs-body-bg);
}
.tt-filter-active,
diff --git a/view/php/default.php b/view/php/default.php
index 10e150906..f0699090a 100644
--- a/view/php/default.php
+++ b/view/php/default.php
@@ -11,7 +11,7 @@
*/
?>
<!DOCTYPE html >
-<html prefix="og: http://ogp.me/ns#">
+<html prefix="og: http://ogp.me/ns#" <?php if(x($page,'color_mode')) echo $page['color_mode'] ?>>
<head>
<title><?php if(x($page,'title')) echo $page['title'] ?></title>
<script>var baseurl="<?php echo z_root() ?>";</script>
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 9069500d9..ce791720c 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -6,14 +6,33 @@
*/
-/* bootstrap variable */
+/* bootstrap variables */
:root {
--bs-border-radius: $radius;
- --bs-link-color: $link_colour;
- --bs-link-hover-color: $link_hover_colour;
- --bs-body-bg: $bgcolour;
- --bs-highlight-bg: yellow;
+ --bs-highlight-bg: var(--bs-warning);
+}
+
+[data-bs-theme=light] {
+ --bs-link-color: $link_color;
+ --bs-link-hover-color: $link_hover_color;
+ --hz-body-bg: $bgcolor;
+ --hz-body-bg-image: url('$background_image');
+}
+
+[data-bs-theme=dark] {
+ --bs-link-color: $link_color_dark;
+ --bs-link-hover-color: $link_hover_color_dark;
+ --hz-body-bg: $bgcolor_dark;
+ --hz-body-bg-image: url('$background_image_dark');
+}
+
+[data-bs-theme=light] .navbar-dark.bg-dark {
+ background-color: $nav_bg !important;
+}
+
+[data-bs-theme=dark] .navbar-dark.bg-dark {
+ background-color: $nav_bg_dark !important;
}
.nav-tabs {
@@ -41,12 +60,12 @@ html {
body {
font-size: 0.9rem;
- background-color: var(--bs-body-bg);
- background-image: url('$background_image');
+ background-color: var(--hz-body-bg);
+ background-image: var(--hz-body-bg-image);
background-attachment: fixed;
background-size: cover;
- color: $font_colour;
- margin: 0px;
+ color: var(--bs-body-color);
+ margin: 0;
}
aside#region_1 {
@@ -108,7 +127,6 @@ h6, .h6 {
}
#banner {
- color: $banner_colour;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
@@ -154,8 +172,8 @@ input, optgroup, select, textarea {
input[type=text], textarea {
resize: vertical;
- background-color: $comment_item_colour;
- color: $font_colour;
+ background-color: var(--bs-body-bg);
+ color: var(--bs-body-color);
}
.selected-doco-nav {
@@ -176,11 +194,6 @@ input[type=text], textarea {
color: #FF0000;
}
-nav {
- opacity: $nav_float_min_opacity;
- filter:alpha(opacity=$nav_percent_min_opacity);
-}
-
#powered-by {
font-size: 0.5rem;
position: absolute;
@@ -217,7 +230,7 @@ nav {
left: 0px;
width: 100%;
max-height: 50%;
- background: $comment_item_colour;
+ background: var(--bs-body-bg);
padding: 1rem;
border-bottom: #e0e0e0 1px solid;
overflow: auto;
@@ -243,7 +256,6 @@ nav {
}
.contextual-help-tool i {
- color: $font_colour;
font-size: 1.05rem;
}
@@ -279,10 +291,10 @@ nav {
-moz-animation: rotation 1s infinite linear;
-o-animation: rotation 1s infinite linear;
animation: rotation 1s infinite linear;
- border-left: .2rem solid rgba(77, 77, 77, .15);
- border-right: .2rem solid rgba(77, 77, 77, .15);
- border-bottom: .2rem solid rgba(77, 77, 77, .15);
- border-top: .2rem solid rgba(77, 77, 77, .5);
+ border-left: .2rem solid var(--bs-border-color);
+ border-right: .2rem solid var(--bs-border-color);
+ border-bottom: .2rem solid var(--bs-border-color);
+ border-top: .2rem solid var(--bs-tertiary-color);
border-radius: 100%;
}
@@ -410,7 +422,7 @@ footer {
}
.vcard-card {
- background-color: rgba(254,254,254,0.5);
+ background-color: rgba(var(--bs-body-bg-rgb), .7);
}
.vcard {
@@ -465,7 +477,7 @@ footer {
.pager-prev,
.pager-next,
.pager_n {
- border: 1px solid #e0e0e0;
+ border: 1px solid var(--bs-border-color);
background: transparent;
padding: 4px;
}
@@ -479,7 +491,6 @@ footer {
.photo,
.contact-block-img {
border-radius: $radius;
- box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
}
#side-bar-photos-albums {
@@ -493,7 +504,6 @@ footer {
.profile-match-photo img,
.directory-photo-img {
border-radius: $radius;
- box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
}
.profile-match-photo img {
@@ -502,7 +512,7 @@ footer {
}
#photo-view-wrapper {
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
}
.pmenu.horizontal {
@@ -573,10 +583,6 @@ footer {
margin-left: 15px;
}
-.wall-item-conv {
- background-color: $comment_item_colour;
-}
-
#nav-notifications-template,
#nav-notifications-forums-template {
display: none;
@@ -631,7 +637,7 @@ nav .acpopup {
#cboxContent {
padding: 3px;
- border: 0px solid #fff;
+ border: 0px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
background-color: #fff;
z-index: 1052;
@@ -682,7 +688,7 @@ nav .acpopup {
padding: 10px;
height: 250px;
overflow: auto;
- border: 1px solid #ddd;
+ border: 1px solid var(--bs-border-color);
}
#prof-separator {
@@ -694,7 +700,7 @@ nav .acpopup {
padding: 10px;
height: 450px;
overflow: auto;
- border: 1px solid #ddd;
+ border: 1px solid var(--bs-border-color);
}
#prof-edit-desc {
@@ -774,10 +780,6 @@ div.jGrowl div.jGrowl-notification {
text-align: center;
}
-.conv-participants {
- color: $font_colour;
-}
-
.contactname {
display: block;
overflow: hidden;
@@ -797,7 +799,6 @@ div.jGrowl div.jGrowl-notification {
.notification.notification-forum {
font-size: 0.9rem;
- color: $font_colour;
}
#acl-search::-webkit-input-placeholder {
@@ -920,20 +921,11 @@ margin-right: 50px;
a .generic-icons {
font-size: 1rem;
margin-right: 0.5rem;
- color: $font_colour;
}
.generic-icons-right {
font-size: 1rem;
margin-left: 0.5rem;
- color: $font_colour;
-}
-
-.generic-icons:hover,
-a .generic-icons:hover,
-.generic-icons-right:hover,
-a .generic-icons-right:hover {
- color: $font_colour;
}
.generic-icons-nav {
@@ -949,7 +941,6 @@ a .generic-icons-right:hover {
.drop-icons,
a .drop-icons {
font-size: 1rem;
- color: $font_colour;
text-decoration: none;
cursor: pointer;
}
@@ -1018,8 +1009,8 @@ img.mail-conv-sender-photo {
}
#profile-jot-wrapper {
- background-color: rgba(254, 254, 254, 1);
- border: 1px solid rgba(0, 0, 0, .2);
+ background-color: var(--bs-body-bg);
+ border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
@@ -1079,19 +1070,19 @@ img.mail-conv-sender-photo {
}
.wall-item-content-wrapper {
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
border-top-right-radius: var(--bs-border-radius);
border-top-left-radius: var(--bs-border-radius);
}
.wall-item-content-wrapper.comment {
- background-color: $comment_item_colour;
+ background-color: var(--bs-body-bg);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
.hide-comments-outer {
- background-color: $comment_item_colour;
+ background-color: var(--bs-body-bg);
border-top-color: #e0e0e0;
border-style: solid;
border-top-style: dashed;
@@ -1106,15 +1097,15 @@ img.mail-conv-sender-photo {
.wall-item-comment-wrapper {
padding: 7px 10px;
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
border-radius: 0px;
border-bottom-right-radius: var(--bs-border-radius);
border-bottom-left-radius: var(--bs-border-radius);
- border-top: 3px solid $comment_item_colour;
+ border-top: 3px solid var(--bs-body-bg);
}
.wall-item-comment-wrapper-wc {
- border-top: 0px solid $comment_item_colour;
+ border-top: 0px solid var(--bs-body-bg);
}
@@ -1123,7 +1114,6 @@ img.mail-conv-sender-photo {
height: $top_photo;
border: none;
border-radius: var(--bs-border-radius);
- box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
}
.comment .wall-item-photo {
@@ -1146,7 +1136,7 @@ img.mail-conv-sender-photo {
.comment-edit-text {
- border: 1px solid #e0e0e0;
+ border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
@@ -1161,13 +1151,13 @@ img.mail-conv-sender-photo {
}
.directory-item .divgrow-showmore {
- background-color: $comment_item_colour;
+ background-color: var(--bs-body-bg);
}
/* widgets */
.widget {
- background-color: rgba(254,254,254,.5);
+ background-color: rgba(var(--bs-body-bg-rgb), .7);
border-radius: var(--bs-border-radius);
}
@@ -1186,7 +1176,7 @@ img.mail-conv-sender-photo {
}
#datebrowse-sidebar select {
- border: 1px solid #e0e0e0;
+ border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
@@ -1215,7 +1205,7 @@ img.mail-conv-sender-photo {
.chat-item-title,
.chat-item-title-self {
border-radius: var(--bs-border-radius);
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
}
#chatMembers img {
@@ -1271,17 +1261,17 @@ img.mail-conv-sender-photo {
}
.generic-content-wrapper {
- border: 1px solid #e0e0e0;
+ border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
margin-bottom: 1.5rem;
}
.section-title-wrapper {
padding: 7px 10px;
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
border-top-left-radius: var(--bs-border-radius);
border-top-right-radius: var(--bs-border-radius);
- border-bottom: 3px solid $comment_item_colour;
+ border-bottom: 3px solid var(--bs-body-bg);
}
.section-title-wrapper h2,
@@ -1299,21 +1289,21 @@ img.mail-conv-sender-photo {
.section-subtitle-wrapper {
padding: 4px 10px;
- background-color: $item_colour;
- border-bottom: 3px solid $comment_item_colour;
+ background-color: var(--bs-tertiary-bg);
+ border-bottom: 3px solid var(--bs-body-bg);
}
.section-content-tools-wrapper {
padding: 7px 10px;
- background-color: $comment_item_colour;
- border-bottom: 3px solid $comment_item_colour;
+ background-color: var(--bs-body-bg);
+ border-bottom: 3px solid var(--bs-body-bg);
}
.section-content-success-wrapper {
padding: 21px 10px;
color: #155724;
background-color: #d4edda;
- border-bottom: 3px solid $comment_item_colour;
+ border-bottom: 3px solid var(--bs-body-bg);
text-align: center;
}
@@ -1321,7 +1311,7 @@ img.mail-conv-sender-photo {
padding: 21px 10px;
color: #0c5460;
background-color: #d1ecf1;
- border-bottom: 3px solid $comment_item_colour;
+ border-bottom: 3px solid var(--bs-body-bg);
text-align: center;
}
@@ -1329,7 +1319,7 @@ img.mail-conv-sender-photo {
padding: 21px 10px;
color: #856404;
background-color: #fff3cd;
- border-bottom: 3px solid $comment_item_colour;
+ border-bottom: 3px solid var(--bs-body-bg);
text-align: center;
}
@@ -1337,7 +1327,7 @@ img.mail-conv-sender-photo {
padding: 21px 10px;
color: #721c24;
background-color: #f8d7da;
- border-bottom: 3px solid $comment_item_colour;
+ border-bottom: 3px solid var(--bs-body-bg);
text-align: center;
}
.section-content-tools-wrapper .section-content-success-wrapper,
@@ -1356,14 +1346,14 @@ img.mail-conv-sender-photo {
.section-content-wrapper {
padding: 7px 10px;
- background-color: $comment_item_colour;
+ background-color: var(--bs-body-bg);
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
word-wrap: break-word;
}
.section-content-wrapper-np {
- background-color: $comment_item_colour;
+ background-color: var(--bs-body-bg);
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
word-wrap: break-word;
@@ -1408,7 +1398,7 @@ main.fullscreen .section-content-wrapper-np {
.locs-index-row:hover td,
[id^="cloud-index-"]:hover td,
.cloud-index-active {
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
}
[id^="webpage-list-item-"]:hover td,
@@ -1416,15 +1406,15 @@ main.fullscreen .section-content-wrapper-np {
[id^="layout-list-item-"]:hover td,
[id^="menu-list-item-"]:hover td,
[id^="mitem-list-item-"]:hover td {
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
}
#perms-tool-table .highlight:hover {
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
}
.notify-seen {
- background-color: $item_colour;
+ background-color: var(--bs-tertiary-bg);
}
/* bootstrap overrides */
@@ -1436,30 +1426,11 @@ main.fullscreen .section-content-wrapper-np {
blockquote {
font-size: 1rem;
font-style: italic;
- border-left: 3px solid #e0e0e0;
+ border-left: 3px solid var(--bs-border-color);
padding: 1em 0px 1em 1.5em;
margin: 0px;
}
-.dropdown-menu {
- color: $font_colour;
-}
-
-.dropdown-item {
- color: $font_colour;
-}
-
-.dropdown-item:active,
-.dropdown-item:focus,
-.dropdown-item:hover,
-.textcomplete-item:focus .dropdown-item,
-.textcomplete-item:hover .dropdown-item,
-.textcomplete-item.active .dropdown-item,
-.textcomplete-item:active .dropdown-item {
- color: $font_colour;
- background-color: $item_colour;
-}
-
.textcomplete-dropdown {
max-height: 300px;
max-width: 250px;
@@ -1471,25 +1442,11 @@ blockquote {
background-color: #007bff;
}
-.bg-dark {
- background-color: $nav_bg !important;
-}
-
.navbar {
z-index:1030;
}
-.navbar-dark .navbar-nav .nav-link,
-.usermenu i {
- color: $nav_icon_colour;
-}
-.navbar-dark .navbar-nav .nav-link:focus,
-.navbar-dark .navbar-nav .nav-link:hover,
-.usermenu:focus i,
-.usermenu:hover i {
- color: $nav_active_icon_colour;
-}
@media screen and (max-width: 992px) {
@@ -1578,8 +1535,9 @@ dl.bb-dl > dd > li {
display: inline-block;
border-radius: var(--bs-border-radius);
cursor: text;
- padding: 0px 10px;
- width: 100%;
+ border-radius: 0px;
+ background-color: var(--bs-body-bg);
+
}
.bootstrap-tagsinput .label {
@@ -1588,6 +1546,12 @@ dl.bb-dl > dd > li {
.bootstrap-tagsinput input {
height: 2.5rem;
+ margin: 0;
+ max-width: 30%;
+}
+
+.bootstrap-tagsinput {
+ padding: 0 .5rem;
}
/* Abusing theme-green is less work than makeing a new new one */
@@ -1610,27 +1574,22 @@ dl.bb-dl > dd > li {
.onoffswitch.checkbox > div label {
display: block; overflow: hidden; cursor: pointer;
- border: 1px solid #e0e0e0;
+ border: 1px solid var(--bs-border-color);
border-radius: 12px;
margin:0px;
- -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
- -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
- transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
font-weight: normal;
}
.onoffswitch.checkbox:hover label {
- color: var(--bs-link-color);
+ color: var(--bs-primary);
}
.onoffswitch.checkbox:hover > div label {
- border-color: var(--bs-link-color);
+ border-color: var(--bs-primary);
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
- -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
- -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
@@ -1641,25 +1600,23 @@ dl.bb-dl > dd > li {
.onoffswitch-inner:before {
content: attr(data-on);
padding-right: 21px;
- background-color: $item_colour;
- color: $font_colour;
+ background-color: rgba(var(--bs-body-color-rgb), 0);
text-align: right;
}
.onoffswitch-inner:after {
content: attr(data-off);
padding-left: 21px;
- background-color: $item_colour; color: #e0e0e0;
+ 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: #e0e0e0;
+ background: var(--bs-secondary-bg);
border-radius: 10px;
position: absolute; top: 0; bottom: 0; right: 36px;
- -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
- -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner {
@@ -1668,7 +1625,7 @@ dl.bb-dl > dd > li {
.onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
right: 0px;
- background-color: var(--bs-link-color);
+ background-color: var(--bs-primary);
}
@@ -1747,7 +1704,7 @@ dl.bb-dl > dd > li {
.cloud-icon-container {
width: 64px;
height: 64px;
- border: 1px solid #eee;
+ border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 04469cb85..7584f9421 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -2,6 +2,19 @@
* redbasic theme specific JavaScript
*/
+let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
+
+if (redbasic_dark_mode == 1) {
+ $('html').attr('data-bs-theme', 'light');
+ $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
+}
+
+
+if (redbasic_dark_mode == 2) {
+ $('html').attr('data-bs-theme', 'dark');
+ $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
+}
+
$(document).ready(function() {
// CSS3 calc() fallback (for unsupported browsers)
@@ -40,6 +53,20 @@ $(document).ready(function() {
}
});
+ $('#theme-switch').click(function() {
+ if ($('html').attr('data-bs-theme') === 'dark') {
+ $('html').attr('data-bs-theme', 'light');
+ localStorage.setItem('redbasic_dark_mode', 1);
+ $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
+ }
+ else {
+ $('html').attr('data-bs-theme', 'dark');
+ localStorage.setItem('redbasic_dark_mode', 2);
+ $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
+ }
+ });
+
+
$('#menu-btn').click(function() {
if($('#navbar-collapse-1').hasClass('show')){
$('#navbar-collapse-1').removeClass('show');
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 65834526d..96b9354ed 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -37,21 +37,27 @@ class RedbasicConfig {
}
$arr = array();
+ $arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
$arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' );
- $arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' );
- $arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' );
- $arr['link_colour'] = get_pconfig(local_channel(),'redbasic', 'link_colour' );
- $arr['link_hover_colour'] = get_pconfig(local_channel(),'redbasic', 'link_hover_colour' );
- $arr['banner_colour'] = get_pconfig(local_channel(),'redbasic', 'banner_colour' );
- $arr['bgcolour'] = get_pconfig(local_channel(),'redbasic', 'background_colour' );
+ $arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' );
+// $arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' );
+// $arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' );
+ $arr['link_color'] = get_pconfig(local_channel(),'redbasic', 'link_color' );
+ $arr['link_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_color_dark' );
+ $arr['link_hover_color'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color' );
+ $arr['link_hover_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color_dark' );
+// $arr['banner_color'] = get_pconfig(local_channel(),'redbasic', 'banner_color' );
+ $arr['bgcolor'] = get_pconfig(local_channel(),'redbasic', 'background_color' );
+ $arr['bgcolor_dark'] = get_pconfig(local_channel(),'redbasic', 'background_color_dark' );
$arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' );
- $arr['item_colour'] = get_pconfig(local_channel(),'redbasic', 'item_colour' );
- $arr['comment_item_colour'] = get_pconfig(local_channel(),'redbasic', 'comment_item_colour' );
+ $arr['background_image_dark'] = get_pconfig(local_channel(),'redbasic', 'background_image_dark' );
+// $arr['item_color'] = get_pconfig(local_channel(),'redbasic', 'item_color' );
+// $arr['comment_item_color'] = get_pconfig(local_channel(),'redbasic', 'comment_item_color' );
$arr['font_size'] = get_pconfig(local_channel(),'redbasic', 'font_size' );
- $arr['font_colour'] = get_pconfig(local_channel(),'redbasic', 'font_colour' );
+// $arr['font_colour'] = get_pconfig(local_channel(),'redbasic', 'font_colour' );
$arr['radius'] = get_pconfig(local_channel(),'redbasic', 'radius' );
- $arr['shadow'] = get_pconfig(local_channel(),'redbasic', 'photo_shadow' );
+// $arr['shadow'] = get_pconfig(local_channel(),'redbasic', 'photo_shadow' );
$arr['converse_width']=get_pconfig(local_channel(),"redbasic","converse_width");
$arr['top_photo']=get_pconfig(local_channel(),"redbasic","top_photo");
$arr['reply_photo']=get_pconfig(local_channel(),"redbasic","reply_photo");
@@ -66,20 +72,26 @@ class RedbasicConfig {
if (isset($_POST['redbasic-settings-submit'])) {
set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
+ set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']);
set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']);
- set_pconfig(local_channel(), 'redbasic', 'nav_icon_colour', $_POST['redbasic_nav_icon_colour']);
- set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_colour', $_POST['redbasic_nav_active_icon_colour']);
- set_pconfig(local_channel(), 'redbasic', 'link_colour', $_POST['redbasic_link_colour']);
- set_pconfig(local_channel(), 'redbasic', 'link_hover_colour', $_POST['redbasic_link_hover_colour']);
- set_pconfig(local_channel(), 'redbasic', 'background_colour', $_POST['redbasic_background_colour']);
- set_pconfig(local_channel(), 'redbasic', 'banner_colour', $_POST['redbasic_banner_colour']);
+ set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']);
+// set_pconfig(local_channel(), 'redbasic', 'nav_icon_color', $_POST['redbasic_nav_icon_color']);
+// set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_color', $_POST['redbasic_nav_active_icon_color']);
+ set_pconfig(local_channel(), 'redbasic', 'link_color', $_POST['redbasic_link_color']);
+ set_pconfig(local_channel(), 'redbasic', 'link_color_dark', $_POST['redbasic_link_color_dark']);
+ set_pconfig(local_channel(), 'redbasic', 'link_hover_color', $_POST['redbasic_link_hover_color']);
+ set_pconfig(local_channel(), 'redbasic', 'link_hover_color_dark', $_POST['redbasic_link_hover_color_dark']);
+ set_pconfig(local_channel(), 'redbasic', 'background_color', $_POST['redbasic_background_color']);
+ set_pconfig(local_channel(), 'redbasic', 'background_color_dark', $_POST['redbasic_background_color_dark']);
+// set_pconfig(local_channel(), 'redbasic', 'banner_color', $_POST['redbasic_banner_color']);
set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']);
- set_pconfig(local_channel(), 'redbasic', 'item_colour', $_POST['redbasic_item_colour']);
- set_pconfig(local_channel(), 'redbasic', 'comment_item_colour', $_POST['redbasic_comment_item_colour']);
+ set_pconfig(local_channel(), 'redbasic', 'background_image_dark', $_POST['redbasic_background_image_dark']);
+// set_pconfig(local_channel(), 'redbasic', 'item_color', $_POST['redbasic_item_color']);
+// set_pconfig(local_channel(), 'redbasic', 'comment_item_color', $_POST['redbasic_comment_item_color']);
set_pconfig(local_channel(), 'redbasic', 'font_size', $_POST['redbasic_font_size']);
- set_pconfig(local_channel(), 'redbasic', 'font_colour', $_POST['redbasic_font_colour']);
+// set_pconfig(local_channel(), 'redbasic', 'font_color', $_POST['redbasic_font_color']);
set_pconfig(local_channel(), 'redbasic', 'radius', $_POST['redbasic_radius']);
- set_pconfig(local_channel(), 'redbasic', 'photo_shadow', $_POST['redbasic_shadow']);
+// set_pconfig(local_channel(), 'redbasic', 'photo_shadow', $_POST['redbasic_shadow']);
set_pconfig(local_channel(), 'redbasic', 'converse_width', $_POST['redbasic_converse_width']);
set_pconfig(local_channel(), 'redbasic', 'top_photo', $_POST['redbasic_top_photo']);
set_pconfig(local_channel(), 'redbasic', 'reply_photo', $_POST['redbasic_reply_photo']);
@@ -100,21 +112,27 @@ class RedbasicConfig {
'$theme' => \App::$channel['channel_theme'],
'$expert' => $expert,
'$title' => t("Theme settings"),
+ '$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']),
- '$nav_icon_colour' => array('redbasic_nav_icon_colour', t('Navigation bar icon color '), $arr['nav_icon_colour']),
- '$nav_active_icon_colour' => array('redbasic_nav_active_icon_colour', t('Navigation bar active icon color '), $arr['nav_active_icon_colour']),
- '$link_colour' => array('redbasic_link_colour', t('Link color'), $arr['link_colour']),
- '$link_hover_colour' => array('redbasic_link_hover_colour', t('Link hover color'), $arr['link_hover_colour']),
- '$banner_colour' => array('redbasic_banner_colour', t('Set font-color for banner'), $arr['banner_colour']),
- '$bgcolour' => array('redbasic_background_colour', t('Set the background color'), $arr['bgcolour']),
+ '$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']),
+// '$nav_icon_colour' => array('redbasic_nav_icon_color', t('Navigation bar icon color '), $arr['nav_icon_color']),
+// '$nav_active_icon_colour' => array('redbasic_nav_active_icon_color', t('Navigation bar active icon color '), $arr['nav_active_icon_color']),
+ '$link_color' => array('redbasic_link_color', t('Link color'), $arr['link_color']),
+ '$link_color_dark' => array('redbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']),
+ '$link_hover_color' => array('redbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']),
+ '$link_hover_color_dark' => array('redbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']),
+// '$banner_color' => array('redbasic_banner_color', t('Set font-color for banner'), $arr['banner_colour']),
+ '$bgcolor' => array('redbasic_background_color', t('Set the background color'), $arr['bgcolor']),
+ '$bgcolor_dark' => array('redbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']),
'$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']),
- '$item_colour' => array('redbasic_item_colour', t('Set the background color of items'), $arr['item_colour']),
- '$comment_item_colour' => array('redbasic_comment_item_colour', t('Set the background color of comments'), $arr['comment_item_colour']),
+ '$background_image_dark' => array('redbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']),
+// '$item_color' => array('redbasic_item_color', t('Set the background color of items'), $arr['item_color']),
+// '$comment_item_color' => array('redbasic_comment_item_color', t('Set the background color of comments'), $arr['comment_item_color']),
'$font_size' => array('redbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')),
- '$font_colour' => array('redbasic_font_colour', t('Set font-color for posts and comments'), $arr['font_colour']),
+// '$font_colour' => array('redbasic_font_color', t('Set font-color for posts and comments'), $arr['font_color']),
'$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')),
- '$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']),
+// '$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']),
'$converse_width' => array('redbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')),
'$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']),
'$reply_photo' => array('redbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']),
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 667377838..8485d4dfe 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -11,22 +11,19 @@ if(! App::$install) {
// Load the owners pconfig
$nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg');
- $nav_icon_colour = get_pconfig($uid, 'redbasic', 'nav_icon_colour');
- $nav_active_icon_colour = get_pconfig($uid, 'redbasic', 'nav_active_icon_colour');
- $banner_colour = get_pconfig($uid,'redbasic','banner_colour');
+ $nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark');
$narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar');
- $link_colour = get_pconfig($uid, 'redbasic', 'link_colour');
- $link_hover_colour = get_pconfig($uid, 'redbasic', 'link_hover_colour');
+ $link_color = get_pconfig($uid, 'redbasic', 'link_color');
+ $link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark');
+ $link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color');
+ $link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark');
+ $bgcolor = get_pconfig($uid, 'redbasic', 'background_color');
+ $bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark');
$schema = get_pconfig($uid,'redbasic','schema');
- $bgcolour = get_pconfig($uid, 'redbasic', 'background_colour');
$background_image = get_pconfig($uid, 'redbasic', 'background_image');
- $item_colour = get_pconfig($uid, 'redbasic', 'item_colour');
- $comment_item_colour = get_pconfig($uid, 'redbasic', 'comment_item_colour');
- $item_opacity = get_pconfig($uid, 'redbasic', 'item_opacity');
+ $background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark');
$font_size = get_pconfig($uid, 'redbasic', 'font_size');
- $font_colour = get_pconfig($uid, 'redbasic', 'font_colour');
$radius = get_pconfig($uid, 'redbasic', 'radius');
- $shadow = get_pconfig($uid,'redbasic','photo_shadow');
$converse_width=get_pconfig($uid,'redbasic','converse_width');
$top_photo=get_pconfig($uid,'redbasic','top_photo');
$reply_photo=get_pconfig($uid,'redbasic','reply_photo');
@@ -75,39 +72,59 @@ if ((!$schema) || ($schema == '---')) {
//Set some defaults - we have to do this after pulling owner settings, and we have to check for each setting
//individually. If we don't, we'll have problems if a user has set one, but not all options.
if (! $nav_bg)
- $nav_bg = '#343a40';
-if (! $nav_icon_colour)
- $nav_icon_colour = 'rgba(255, 255, 255, 0.55)';
-if (! $nav_active_icon_colour)
- $nav_active_icon_colour = 'rgba(255, 255, 255, 0.75)';
-if (! $link_colour)
- $link_colour = '#0d6efd';
-if (! $link_hover_colour)
- $link_hover_colour = '#0a58ca;';
-if (! $banner_colour)
- $banner_colour = '#efefef';
-if (! $bgcolour)
- $bgcolour = 'rgb(254,254,254)';
+ $nav_bg = 'rgba(33, 37, 41, 1)';
+
+if (! $nav_bg_dark)
+ $nav_bg_dark = 'rgba(0, 0, 0, 1)';
+
+if (! $link_color)
+ $link_color = '#0d6efd';
+
+if (! $link_color_dark)
+ $link_color_dark = '#6ea8fe';
+
+if (! $link_hover_color)
+ $link_hover_color = '#0a58ca';
+
+if (! $link_hover_color_dark)
+ $link_hover_color_dark = '#9ec5fe';
+
+if (! $bgcolor)
+ $bgcolor = '#fff';
+
+if (! $bgcolor_dark)
+ $bgcolor_dark = '#212529';
+
if (! $background_image)
- $background_image ='';
-if (! $item_colour)
- $item_colour = '#f6f6f6';
-if (! $comment_item_colour)
- $comment_item_colour = 'rgb(255,255,255)';
-if (! $item_opacity)
- $item_opacity = '1';
+ $background_image = '';
+
+if (! $background_image_dark)
+ $background_image_dark = '';
+
+if (! $item_color)
+ $item_color = '#fff';
+
+if (! $item_color_dark)
+ $item_color_dark = '#212529';
+
+if (! $header_item_color)
+ $header_item_color = '#f8f9fa';
+
+if (! $header_item_color_dark)
+ $header_item_color_dark = '#212529';
+
if (! $font_size)
$font_size = '0.875rem';
-if (! $font_colour)
- $font_colour = '#4d4d4d';
+
if (! $radius)
$radius = '0.375rem';
-if (! $shadow)
- $shadow = '0';
+
if (! $converse_width)
$converse_width = '52'; //unit: rem
+
if(! $top_photo)
$top_photo = '2.3rem';
+
if(! $reply_photo)
$reply_photo = '2.3rem';
@@ -138,19 +155,21 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
$options = array (
'$nav_bg' => $nav_bg,
- '$nav_icon_colour' => $nav_icon_colour,
- '$nav_active_icon_colour' => $nav_active_icon_colour,
- '$link_colour' => $link_colour,
- '$link_hover_colour' => $link_hover_colour,
- '$banner_colour' => $banner_colour,
- '$bgcolour' => $bgcolour,
+ '$nav_bg_dark' => $nav_bg_dark,
+ '$link_color' => $link_color,
+ '$link_color_dark' => $link_color_dark,
+ '$link_hover_color' => $link_hover_color,
+ '$link_hover_color_dark' => $link_hover_color_dark,
+ '$bgcolor' => $bgcolor,
+ '$bgcolor_dark' => $bgcolor_dark,
'$background_image' => $background_image,
- '$item_colour' => $item_colour,
- '$comment_item_colour' => $comment_item_colour,
+ '$background_image_dark' => $background_image_dark,
+ '$item_color' => $item_color,
+ '$item_color_dark' => $item_color_dark,
+ '$header_item_color' => $header_item_color,
+ '$header_item_color_dark' => $header_item_color_dark,
'$font_size' => $font_size,
- '$font_colour' => $font_colour,
'$radius' => $radius,
- '$shadow' => $shadow,
'$converse_width' => $converse_width,
'$top_photo' => $top_photo,
'$reply_photo' => $reply_photo,
@@ -159,7 +178,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
'$right_aside_width' => $right_aside_width
);
- echo str_replace(array_keys($options), array_values($options), $x);
+ echo strtr($x, $options);
}
diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php
index fefd7d26c..5803198fd 100644
--- a/view/theme/redbasic/php/theme.php
+++ b/view/theme/redbasic/php/theme.php
@@ -9,10 +9,27 @@
* * Author: Fabrixxm
* * Maintainer: Mike Macgirvin
* * Maintainer: Mario Vavti
- * * Theme_Color: #343a40
+ * * Theme_Color: #212529
* * Background_Color: rgb(254,254,254)
*/
+use App;
+
function redbasic_init(&$a) {
+ $mode = '';
+
+ if (local_channel()) {
+ $mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light');
+ }
+
+ if (App::$profile_uid) {
+ $mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light');
+ }
+
+ if (!$mode) {
+ $mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light');
+ }
+
+ App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"';
}
diff --git a/view/theme/redbasic/schema/Focus-Boxy.css b/view/theme/redbasic/schema/Focus-Boxy.css
index 1b09137a9..e9fa0381d 100644
--- a/view/theme/redbasic/schema/Focus-Boxy.css
+++ b/view/theme/redbasic/schema/Focus-Boxy.css
@@ -2,8 +2,8 @@
padding-left: 3rem;
}
-.wall-item-content-wrapper {
- border-bottom: 1px solid rgba(0,0,0,.125);
+.wall-item-content-wrapper.comment {
+ border-bottom: 1px solid var(--bs-border-color);
}
.hide-comments-outer,
@@ -12,7 +12,7 @@
}
.widget {
- border: 1px solid rgba(0,0,0,.125);
+ border: 1px solid var(--bs-border-color);
}
#note-text {
@@ -20,7 +20,7 @@
}
.vcard-card {
- border: 1px solid rgba(0,0,0,.125);
+ border: 1px solid var(--bs-border-color);
border-bottom: 0;
}
@@ -31,7 +31,7 @@
}
.vcard-card .vcard {
- border: 1px solid rgba(0,0,0,.125);
+ border: 1px solid var(--bs-border-color);
border-top: 0;
border-right: 0;
border-left: 0;
diff --git a/view/theme/redbasic/schema/Focus-Light.css b/view/theme/redbasic/schema/Focus-Light.css
index 7289acffe..bc5da2a1d 100644
--- a/view/theme/redbasic/schema/Focus-Light.css
+++ b/view/theme/redbasic/schema/Focus-Light.css
@@ -1,5 +1,10 @@
.dropdown-header.text-white-50,
.navbar-dark .navbar-toggler,
-.navbar-dark .nav-link.active {
- color: rgba(0,0,0,0.7) !important;
+.navbar-dark .nav-link:active, .navbar-dark .nav-link.active,
+.navbar-dark .navbar-text, .navbar-dark .nav-link, .navbar-dark .nav-link:hover {
+ color: var(--bs-secondary) !important;
+}
+
+.navbar-dark.bg-dark {
+ background-color: var(--bs-tertiary-bg) !important;
}
diff --git a/view/theme/redbasic/schema/dark.css b/view/theme/redbasic/schema/dark.css
deleted file mode 100644
index bc1a84ec8..000000000
--- a/view/theme/redbasic/schema/dark.css
+++ /dev/null
@@ -1,51 +0,0 @@
-
-:root {
- color-scheme: dark;
- --bs-dark-rgb: #e1e1e1;
- --bs-border-color: rgba(250, 250, 250, 0.125);
- --bs-body-bg: #111;
-}
-
-.widget,
-.vcard-card {
- background-color: unset;
-}
-
-.comment-edit-text {
- border: 1px solid var(--bs-border-color);
-}
-
-.generic-content-wrapper {
- border: 1px solid var(--bs-border-color);
-}
-
-#profile-jot-wrapper {
- background-color: unset;
- border: 1px solid var(--bs-border-color);
-}
-
-.bootstrap-tagsinput {
- background-color: unset;
-}
-
-a,
-.fakelink {
- color: var(--bs-link-color);
-}
-.item-category {
- background-color: #293a4f !important;
-}
-#cboxContent {
- background-color: #273039;
-}
-#jot-title-wrap,
-#jot-summary-wrap,
-#jot-pagetitle-wrap,
-#jot-category-wrap,
-#jot-customjotheaders-wrap {
- border-bottom: 1px solid var(--bs-border-color);
-}
-#adminpage table tr:hover {
- background-color: #2E3136;
-}
-
diff --git a/view/theme/redbasic/schema/dark.php b/view/theme/redbasic/schema/dark.php
deleted file mode 100644
index cd9653a23..000000000
--- a/view/theme/redbasic/schema/dark.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
- if (! $nav_bg)
- $nav_bg = "#000";
- if (! $nav_gradient_top)
- $nav_gradient_top = "#000";
- if (! $nav_gradient_bottom)
- $nav_gradient_bottom = "#000";
- if (! $nav_active_gradient_top)
- $nav_active_gradient_top = "#333";
- if (! $nav_active_gradient_bottom)
- $nav_active_gradient_bottom = "#111";
- if (! $nav_bd)
- $nav_bd = "#111";
- if (! $nav_icon_colour)
- $nav_icon_colour = "#999";
- if (! $nav_active_icon_colour)
- $nav_active_icon_colour = "#fff";
- if (! $link_colour)
- $link_colour = "#5f7b99;";
- if (! $link_hover_colour)
- $link_hover_colour = "#4b6b8c";
- if (! $banner_colour)
- $banner_colour = "#999";
- if (! $bgcolour)
- $bgcolour = "#111";
- if (! $item_colour)
- $item_colour = "rgba(28,28,28,0.8)";
- if (! $comment_item_colour)
- $comment_item_colour = "rgba(18,18,18,0.4)";
- if (! $comment_border_colour)
- $comment_border_colour = "rgba(28,28,28,0.8)";
- if (! $toolicon_colour)
- $toolicon_colour = '#999';
- if (! $toolicon_activecolour)
- $toolicon_activecolour = '#fff';
- if (! $font_colour)
- $font_colour = "#ccc";
- if (! $converse_width)
- $converse_width = '52'; //unit: rem;
-
-
-
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index 65b3a7883..e91a68265 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -1,32 +1,33 @@
+{{include file="field_checkbox.tpl" field=$dark_mode}}
{{include file="field_checkbox.tpl" field=$narrow_navbar}}
{{include file="field_input.tpl" field=$converse_width}}
{{include file="field_input.tpl" field=$font_size}}
{{include file="field_checkbox.tpl" field=$advanced_theming}}
+
{{if $expert}}
+ <h3>Light</h3>
{{include file="field_colorinput.tpl" field=$nav_bg}}
- {{include file="field_colorinput.tpl" field=$nav_icon_colour}}
- {{include file="field_colorinput.tpl" field=$nav_active_icon_colour}}
- {{include file="field_colorinput.tpl" field=$banner_colour}}
- {{include file="field_colorinput.tpl" field=$bgcolour}}
+ {{include file="field_colorinput.tpl" field=$bgcolor}}
{{include file="field_colorinput.tpl" field=$background_image}}
- {{include file="field_colorinput.tpl" field=$item_colour}}
- {{include file="field_colorinput.tpl" field=$comment_item_colour}}
- {{*include file="field_colorinput.tpl" field=$comment_border_colour*}}
- {{*include file="field_input.tpl" field=$comment_indent*}}
- {{include file="field_colorinput.tpl" field=$font_colour}}
- {{include file="field_colorinput.tpl" field=$link_colour}}
- {{include file="field_colorinput.tpl" field=$link_hover_colour}}
+ {{include file="field_colorinput.tpl" field=$link_color}}
+ {{include file="field_colorinput.tpl" field=$link_hover_color}}
+
+ <h3>Dark</h3>
+ {{include file="field_colorinput.tpl" field=$nav_bg_dark}}
+ {{include file="field_colorinput.tpl" field=$bgcolor_dark}}
+ {{include file="field_colorinput.tpl" field=$background_image_dark}}
+ {{include file="field_colorinput.tpl" field=$link_color_dark}}
+ {{include file="field_colorinput.tpl" field=$link_hover_color_dark}}
+
+ <h3>Common</h3>
{{include file="field_input.tpl" field=$radius}}
- {{include file="field_input.tpl" field=$shadow}}
{{include file="field_input.tpl" field=$top_photo}}
{{include file="field_input.tpl" field=$reply_photo}}
<script>
$(function(){
- $('#id_redbasic_nav_bg, #id_redbasic_nav_icon_colour, #id_redbasic_nav_active_icon_colour, #id_redbasic_banner_colour').colorpicker({format: 'rgba'});
- $('#id_redbasic_link_colour,#id_redbasic_link_hover_colour,#id_redbasic_background_colour').colorpicker();
- $('#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
- $('#id_redbasic_item_colour,#id_redbasic_comment_item_colour,#id_redbasic_comment_border_colour').colorpicker({format: 'rgba'});
+ $('#id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'});
+ $('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark').colorpicker();
});
</script>
{{/if}}
diff --git a/view/tpl/cdav_widget_calendar.tpl b/view/tpl/cdav_widget_calendar.tpl
index c27f4789e..b076a3320 100644
--- a/view/tpl/cdav_widget_calendar.tpl
+++ b/view/tpl/cdav_widget_calendar.tpl
@@ -3,9 +3,9 @@
{{foreach $channel_calendars as $channel_calendar}}
<div id="calendar-{{$channel_calendar.calendarid}}">
<div class="ml-3{{if !$channel_calendar@last}} mb-3{{/if}}">
- <i id="calendar-btn-{{$channel_calendar.calendarid}}" class="fa {{if $channel_calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$channel_calendar.json_source}}', '{{$channel_calendar.color}}', {{$channel_calendar.editable}})" style="color: {{$channel_calendar.color}};"></i>{{$channel_calendar.displayname}}
+ <i id="calendar-btn-{{$channel_calendar.calendarid}}" class="fa {{if $channel_calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons cursor-pointer" onclick="add_remove_json_source('{{$channel_calendar.json_source}}', '{{$channel_calendar.color}}', {{$channel_calendar.editable}})" style="color: {{$channel_calendar.color}};"></i>{{$channel_calendar.displayname}}
<div class="float-end">
- <a href="#" onclick="exportDate(); return false;"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons-right"></i></a>
+ <a class="text-reset" href="#" onclick="exportDate(); return false;"><i id="download-icon" class="fa fa-cloud-download cursor-pointer generic-icons-right"></i></a>
</div>
</div>
</div>
@@ -18,12 +18,12 @@
{{foreach $my_calendars as $calendar}}
<div id="calendar-{{$calendar.calendarid}}">
<div class="ml-3{{if !$calendar@last}} mb-3{{/if}}">
- <i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}}
+ <i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons cursor-pointer" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}}
<div class="float-end">
- <i id="edit-icon" class="fa fa-pencil fakelink generic-icons" onclick="openClose('edit-calendar-{{$calendar.calendarid}}')"></i>
- <a href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
- <i id="share-icon" class="fa fa-share-alt fakelink generic-icons" onclick="openClose('share-calendar-{{$calendar.calendarid}}')"></i>
- <a href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
+ <i id="edit-icon" class="fa fa-pencil cursor-pointer generic-icons" onclick="openClose('edit-calendar-{{$calendar.calendarid}}')"></i>
+ <a class="text-reset" href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download cursor-pointer generic-icons"></i></a>
+ <i id="share-icon" class="fa fa-share-alt cursor-pointer generic-icons" onclick="openClose('share-calendar-{{$calendar.calendarid}}')"></i>
+ <a class="text-reset" href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
</div>
<div id="share-calendar-{{$calendar.calendarid}}" class="sub-menu" style="display: none; border-color: {{$calendar.color}};">
{{if $calendar.sharees}}
@@ -31,7 +31,7 @@
<div id="sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}" class="mb-3">
<i class="fa fa-share generic-icons"></i>{{$sharee.name}}&nbsp;{{$sharee.access}}
<div class="float-end">
- <a href="#" onclick="dropItem('/cdav/calendar/dropsharee/{{$calendar.calendarid}}/{{$calendar.instanceid}}/{{$sharee.hash}}', '#sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
+ <a class="text-reset" href="#" onclick="dropItem('/cdav/calendar/dropsharee/{{$calendar.calendarid}}/{{$calendar.instanceid}}/{{$sharee.hash}}', '#sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
</div>
</div>
{{/foreach}}
@@ -80,10 +80,10 @@
<h3>{{$shared_calendars_label}}</h3>
{{foreach $shared_calendars as $calendar}}
<div id="shared-calendar-{{$calendar.calendarid}}" class="ml-3{{if !$calendar@last}} mb-3{{/if}}">
- <i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}{{if $calendar.access == 'read-write'}}fa-calendar-check-o{{else}}fa-calendar-times-o{{/if}}{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, {{if $calendar.access == 'read-write'}}'fa-calendar-check-o'{{else}}'fa-calendar-times-o'{{/if}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}} ({{$calendar.sharer}})
+ <i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}{{if $calendar.access == 'read-write'}}fa-calendar-check-o{{else}}fa-calendar-times-o{{/if}}{{else}}fa-calendar-o{{/if}} generic-icons cursor-pointer" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, {{if $calendar.access == 'read-write'}}'fa-calendar-check-o'{{else}}'fa-calendar-times-o'{{/if}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}} ({{$calendar.sharer}})
<div class="float-end">
- <a href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
- <a href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#shared-calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
+ <a class="text-reset" href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download cursor-pointer generic-icons"></i></a>
+ <a class="text-reset" href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#shared-calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
</div>
</div>
{{/foreach}}
@@ -94,7 +94,7 @@
<h3>{{$tools_label}}</h3>
<div class="nav nav-pills flex-column">
<li class="nav-item">
- <a class="nav-link" href="#" onclick="openClose('create-calendar'); return false;"><i class="fa fa-calendar-plus-o generic-icons"></i> {{$create_label}}</a>
+ <a class="nav-link text-reset" href="#" onclick="openClose('create-calendar'); return false;"><i class="fa fa-calendar-plus-o generic-icons"></i> {{$create_label}}</a>
</li>
<div id="create-calendar" class="sub-menu-wrapper">
<div class="sub-menu">
@@ -111,7 +111,7 @@
</div>
</div>
<li class="nav-item">
- <a class="nav-link" href="#" onclick="openClose('upload-form'); return false;"><i class="fa fa-cloud-upload generic-icons"></i> {{$import_label}}</a>
+ <a class="nav-link text-reset" href="#" onclick="openClose('upload-form'); return false;"><i class="fa fa-cloud-upload generic-icons"></i> {{$import_label}}</a>
</li>
<div id="upload-form" class="sub-menu-wrapper">
<div class="sub-menu">
diff --git a/view/tpl/channel_activities.tpl b/view/tpl/channel_activities.tpl
index 242fc519a..acce3cb13 100644
--- a/view/tpl/channel_activities.tpl
+++ b/view/tpl/channel_activities.tpl
@@ -5,7 +5,7 @@
{{foreach $items as $i}}
<div class="col">
<div class="card">
- <a href="{{$i.url}}" class="text-dark">
+ <a href="{{$i.url}}" class="text-reset">
<div class="card-body">
{{if $i.title}}
<strong>{{$i.title}}</strong>
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 4861c196f..58c6506b6 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -3,9 +3,9 @@
{{if $userinfo}}
<div class="d-flex" style="max-width: 50%">
<div class="dropdown">
- <div class="fakelink usermenu" data-bs-toggle="dropdown">
+ <div class="cursor-pointer usermenu" data-bs-toggle="dropdown">
<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
- <i class="fa fa-caret-down"></i>
+ <i class="navbar-text fa fa-caret-down"></i>
</div>
{{if $is_owner}}
<div class="dropdown-menu">
@@ -162,8 +162,9 @@
</nav>
<div class="offcanvas offcanvas-end" tabindex="-1" id="app-bin" aria-labelledby="app-bin-label">
<div class="offcanvas-header">
+
{{if $nav.login && !$userinfo}}
- <div class="d-lg-none pt-1 pb-1">
+ <div class="hstack gap-1 d-lg-none pt-1 pb-1">
{{if $nav.loginmenu.1.4}}
<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-bs-toggle="modal" data-bs-target="#nav-login">
{{$nav.loginmenu.1.1}}
@@ -178,8 +179,9 @@
{{$nav.register.1}}
</a>
{{/if}}
+
</div>
- <div class="nav d-lg-flex"></div>
+ <div class="nav d-lg-flex w-100"></div>
{{else}}
<div class="lh-sm w-100" id="app-bin-label">
{{if $name}}
@@ -193,6 +195,7 @@
<i id="app-bin-trash" class="fa fa-2x fa-fw fa-trash-o d-none"></i>
{{/if}}
+ <button id="theme-switch" type="button" class="btn btn-outline-secondary border-0"><i id="theme-switch-icon" class="fa fa-{{$theme_switch_icon}}-o"></i></button>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 7a4e909c7..f9499695b 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -531,9 +531,9 @@
{{$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-dark 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 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-dark fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
+ <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>
<span class="text-muted notifications-autotime" title="{5}">{5}</span>
</a>
@@ -556,7 +556,7 @@
</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-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
+ <a class="list-group-item text-decoration-none text-reset" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
</a>
{{/if}}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-12 04:40:59 +0000