aboutsummaryrefslogtreecommitdiffstats
path: root/view/theme/redbasic
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2023-01-20 11:05:15 +0000
committerMario <mario@mariovavti.com>2023-01-20 11:05:15 +0000
commit9dc949b62c6b5e3c8872211f71b11714d9d22b22 (patch)
tree38c06e7a128742e219eb74d6adb035f2f106918a /view/theme/redbasic
parent40394b94d7c8a8bf1f61f5482195164fff434b90 (diff)
downloadvolse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.gz
volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.bz2
volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.zip
native dark theme initial checkin
Diffstat (limited to 'view/theme/redbasic')
-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
10 files changed, 277 insertions, 327 deletions
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}}