diff options
Diffstat (limited to 'view/theme')
| -rw-r--r-- | view/theme/redbasic/css/narrow_navbar.css | 18 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 350 | ||||
| -rw-r--r-- | view/theme/redbasic/js/redbasic.js | 65 | ||||
| -rw-r--r-- | view/theme/redbasic/php/config.php | 63 | ||||
| -rw-r--r-- | view/theme/redbasic/php/style.php | 103 | ||||
| -rw-r--r-- | view/theme/redbasic/php/theme.php | 23 | ||||
| -rw-r--r-- | view/theme/redbasic/schema/Focus-Boxy.css | 10 | ||||
| -rw-r--r-- | view/theme/redbasic/schema/Focus-Light.css | 5 | ||||
| -rw-r--r-- | view/theme/redbasic/schema/Focus-Light.php | 13 | ||||
| -rw-r--r-- | view/theme/redbasic/schema/dark.css | 51 | ||||
| -rw-r--r-- | view/theme/redbasic/schema/dark.php | 43 | ||||
| -rw-r--r-- | view/theme/redbasic/tpl/theme_settings.tpl | 33 |
12 files changed, 342 insertions, 435 deletions
diff --git a/view/theme/redbasic/css/narrow_navbar.css b/view/theme/redbasic/css/narrow_navbar.css index 99f083638..7a48fc71e 100644 --- a/view/theme/redbasic/css/narrow_navbar.css +++ b/view/theme/redbasic/css/narrow_navbar.css @@ -1,24 +1,16 @@ @media screen and (min-width: 767px) { - nav.navbar { - padding-top: 1px; - padding-bottom: 1px - } - - nav .badge { - top: 0px; - left: -0.25rem; + .navbar { + --bs-navbar-padding-y: 1px; } .contextual-help-content-open { top: 2.5rem; } - aside { - padding-top: 3.5rem; - } - - section { + #region_1, + #region_2, + #region_3 { padding-top: 3.5rem; } diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 9069500d9..480e951a9 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -5,31 +5,37 @@ * Originally by Fabio Comuni <fabrix.xm@gmail.com> */ - -/* 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); } -.nav-tabs { - --bs-nav-tabs-border-radius: $radius; +[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'); } -.nav-pills { - --bs-nav-pills-border-radius: $radius; +[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'); } -.btn { - --bs-btn-border-radius: $radius; +[data-bs-theme=light] .navbar.bg-body-tertiary { + background-color: $nav_bg !important; } -.card { - --bs-card-border-radius: $radius; +[data-bs-theme=dark] .navbar.bg-body-tertiary { + background-color: $nav_bg_dark !important; +} + +.btn { + --bs-btn-border-radius: $radius; } @@ -41,12 +47,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 { @@ -58,7 +64,7 @@ aside#region_1 { aside#region_3 { width: $right_aside_widthrem; - min-width: $left_aside_widthrem; + min-width: $right_aside_widthrem; max-width: $right_aside_widthrem; } @@ -107,15 +113,15 @@ h6, .h6 { font-size: 0.75rem; } -#banner { - color: $banner_colour; +.navbar-banner { font-weight: bold; + color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -#banner img { +.navbar-banner img { max-height: 1.35rem; width: auto; } @@ -154,8 +160,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 +182,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 +218,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 +244,6 @@ nav { } .contextual-help-tool i { - color: $font_colour; font-size: 1.05rem; } @@ -279,10 +279,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 +410,7 @@ footer { } .vcard-card { - background-color: rgba(254,254,254,0.5); + background-color: rgba(var(--bs-body-bg-rgb), .7); } .vcard { @@ -465,7 +465,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 +479,6 @@ footer { .photo, .contact-block-img { border-radius: $radius; - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } #side-bar-photos-albums { @@ -493,7 +492,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 +500,7 @@ footer { } #photo-view-wrapper { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } .pmenu.horizontal { @@ -573,10 +571,6 @@ footer { margin-left: 15px; } -.wall-item-conv { - background-color: $comment_item_colour; -} - #nav-notifications-template, #nav-notifications-forums-template { display: none; @@ -631,7 +625,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 +676,7 @@ nav .acpopup { padding: 10px; height: 250px; overflow: auto; - border: 1px solid #ddd; + border: 1px solid var(--bs-border-color); } #prof-separator { @@ -694,7 +688,7 @@ nav .acpopup { padding: 10px; height: 450px; overflow: auto; - border: 1px solid #ddd; + border: 1px solid var(--bs-border-color); } #prof-edit-desc { @@ -774,32 +768,12 @@ div.jGrowl div.jGrowl-notification { text-align: center; } -.conv-participants { - color: $font_colour; -} - .contactname { display: block; overflow: hidden; text-overflow: ellipsis; } -.dropdown-notification, -.notification, -.member-item { - line-height: 1.2em; - font-size: 0.75rem; - overflow: hidden; - text-overflow: ellipsis; - display: block; - white-space: nowrap; -} - -.notification.notification-forum { - font-size: 0.9rem; - color: $font_colour; -} - #acl-search::-webkit-input-placeholder { /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ font-family: ForkAwesome, sans-serif, arial, freesans; @@ -920,20 +894,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 +914,6 @@ a .generic-icons-right:hover { .drop-icons, a .drop-icons { font-size: 1rem; - color: $font_colour; text-decoration: none; cursor: pointer; } @@ -1018,8 +982,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); } @@ -1053,12 +1017,6 @@ img.mail-conv-sender-photo { /* conversation */ - -.top-radius { - border-top-right-radius: var(--bs-border-radius); - border-top-left-radius: var(--bs-border-radius); -} - .wall-event-item { padding: 10px; color: #fff; @@ -1079,19 +1037,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 +1064,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 +1081,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 { @@ -1131,11 +1088,6 @@ img.mail-conv-sender-photo { height: $reply_photo; } -.wall-item-ago, -.dropdown-sub-text { - color: #777; -} - .wall-item-content, .mail-conv-body, .page-body, @@ -1144,9 +1096,8 @@ img.mail-conv-sender-photo { font-size: 1rem; } - .comment-edit-text { - border: 1px solid #e0e0e0; + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } @@ -1161,13 +1112,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 +1137,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 +1166,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 { @@ -1223,17 +1174,17 @@ img.mail-conv-sender-photo { } .menu-img-3 { - width: 2.7rem; - height: 2.7rem; - margin-right: 5px; + width: 3rem; + height: 3rem; + margin-right: .5rem; border-radius: var(--bs-border-radius); float: left; } .menu-img-2 { - height: 1.8rem; - width: 1.8rem; - margin-right: 5px; + height: 2.3rem; + width: 2.3rem; + margin-right: .5rem; border-radius: var(--bs-border-radius); float: left; } @@ -1271,17 +1222,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 +1250,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 +1272,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 +1280,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 +1288,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 +1307,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 +1359,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 +1367,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,67 +1387,32 @@ 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; + max-height: 20rem; + max-width: 17rem; + min-width: 15rem; overflow: auto; } -.dropdown-item.active { +.dropdown-item.active, +.textcomplete-item.active { color: #fff; - background-color: #007bff; -} - -.bg-dark { - background-color: $nav_bg !important; + background-color: var(--bs-tertiary-bg); } .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) { - aside#region_1 { - border-right: 1px solid $nav_bd; - } - main { left: -$left_aside_widthrem; width: calc( 100% + $left_aside_widthrem ); @@ -1578,8 +1494,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 +1505,13 @@ dl.bb-dl > dd > li { .bootstrap-tagsinput input { height: 2.5rem; + margin: 0; + max-width: 30%; +} + +.bootstrap-tagsinput { + width: 100%; + padding: 0 .5rem; } /* Abusing theme-green is less work than makeing a new new one */ @@ -1599,23 +1523,20 @@ dl.bb-dl > dd > li { /* Turn checkboxes into switches */ .onoffswitch.checkbox > div { - position: relative; width: 60px; - -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; - display:inline-block; + position: relative; width: 60px; + -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; + display:inline-block; } .onoffswitch.checkbox input { - display: none; + display: none; } .onoffswitch.checkbox > div label { 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; } @@ -1628,47 +1549,45 @@ dl.bb-dl > dd > li { } .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; + display: block; width: 200%; margin-left: -100%; + transition: margin 0.19s ease-in-out; } .onoffswitch-inner:before, .onoffswitch-inner:after { - display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px; - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px; + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner:before { - content: attr(data-on); - padding-right: 21px; - background-color: $item_colour; - color: $font_colour; - text-align: right; + content: attr(data-on); + padding-right: 21px; + background-color: rgba(var(--bs-body-color-rgb), 0); + text-align: right; } .onoffswitch-inner:after { - content: attr(data-off); - padding-left: 21px; - background-color: $item_colour; color: #e0e0e0; - text-align: left; + content: attr(data-off); + padding-left: 21px; + background-color: rgba(var(--bs-body-color-rgb), 0); + color: var(--bs-border-color); + text-align: left; } .onoffswitch-switch { - display: block; width: 15px; margin:4px; - background: #e0e0e0; - 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; + display: block; width: 15px; margin:4px; + background: var(--bs-secondary-bg); + border-radius: 10px; + position: absolute; top: 0; bottom: 0; right: 36px; + transition: right 0.2s ease-in-out; } .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner { - margin-left: 0px; + margin-left: 0px; } .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch { - right: 0px; - background-color: var(--bs-link-color); + right: 0px; + background-color: var(--bs-link-color); } @@ -1747,7 +1666,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); } @@ -1791,10 +1710,29 @@ dl.bb-dl > dd > li { opacity: 1; } -.bootstrap-tagsinput { - width: 100%; -} - .jg-entry img { border-radius: var(--bs-border-radius); } + +.disable-transition { + transition: none !important; +} + +.page-loader { + z-index: 10000; + width: 20vw; + height: 3px; + position: fixed; + top: 0px; + left: 0px; + animation: pageloader_move 2s ease-out infinite; +} + +@keyframes pageloader_move { + 0% { + transform: translateX(0px); + } + 50% { + transform: translateX(80vw); + } +} diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 04469cb85..706bf2808 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -2,7 +2,50 @@ * redbasic theme specific JavaScript */ +let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode'); +let redbasic_theme_color = localStorage.getItem('redbasic_theme_color'); + +if (redbasic_dark_mode == 1) { + $('html').attr('data-bs-theme', 'dark'); +} +if (redbasic_dark_mode == 0) { + $('html').attr('data-bs-theme', 'light'); +} + + + + + +if (redbasic_theme_color) { + $('meta[name=theme-color]').attr('content', redbasic_theme_color); +} + + + $(document).ready(function() { + // provide a fake progress bar for pwa standalone mode + if (window.matchMedia('(display-mode: standalone)').matches) { + $(window).on('beforeunload', function(){ + if ($('.page-loader').length) { + return; + } + $('<div class="bg-primary page-loader"></div>').prependTo('body'); + }); + } + + if (redbasic_dark_mode == 1) { + $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); + $('[data-bs-theme="light"]').attr('data-bs-theme', 'dark'); + } + if (redbasic_dark_mode == 0) { + $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o'); + $('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light'); + } + + if (redbasic_theme_color != $('nav').css('background-color')) { + $('meta[name=theme-color]').attr('content', $('nav').css('background-color')); + localStorage.setItem('redbasic_theme_color', $('nav').css('background-color')); + } // CSS3 calc() fallback (for unsupported browsers) $('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>'); @@ -17,6 +60,7 @@ $(document).ready(function() { } $('#css3-calc').remove(); // Remove the test element + if (document.querySelector('#region_1')) { stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); } @@ -40,6 +84,27 @@ $(document).ready(function() { } }); + $('#theme-switch').click(function() { + if ($('html').attr('data-bs-theme') === 'dark') { + if ($('nav').data('bs-theme') === 'dark') { + $('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light'); + } + else { + $('[data-bs-theme="dark"]').attr('data-bs-theme', 'light'); + } + localStorage.setItem('redbasic_dark_mode', 0); + $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o'); + } + else { + $('[data-bs-theme="light"]').attr('data-bs-theme', 'dark'); + localStorage.setItem('redbasic_dark_mode', 1); + $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); + } + $('meta[name=theme-color]').attr('content', $('nav').css('background-color')); + localStorage.setItem('redbasic_theme_color', $('nav').css('background-color')); + }); + + $('#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..b4cb281b9 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -37,21 +37,21 @@ class RedbasicConfig { } $arr = array(); + $arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode'); + $arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_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['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['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['font_size'] = get_pconfig(local_channel(),'redbasic', 'font_size' ); - $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['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 +66,20 @@ class RedbasicConfig { if (isset($_POST['redbasic-settings-submit'])) { set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']); + set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']); + 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', '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', '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', 'font_size', $_POST['redbasic_font_size']); - set_pconfig(local_channel(), 'redbasic', 'font_colour', $_POST['redbasic_font_colour']); set_pconfig(local_channel(), 'redbasic', 'radius', $_POST['redbasic_radius']); - 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 +100,24 @@ class RedbasicConfig { '$theme' => \App::$channel['channel_theme'], '$expert' => $expert, '$title' => t("Theme settings"), + '$dark' => t('Dark style'), + '$light' => t('Light style'), + '$common' => t('Common settings'), + '$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), + '$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light 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']), + '$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']), + '$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']), '$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']), '$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']), '$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..d29de1b15 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,47 @@ 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(248, 249, 250, 1)'; + +if (! $nav_bg_dark) + $nav_bg_dark = 'rgba(43, 48, 53, 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 (! $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'; @@ -116,10 +121,6 @@ if(file_exists('view/theme/redbasic/css/style.css')) { $x = file_get_contents('view/theme/redbasic/css/style.css'); - if($schema === 'dark' && file_exists('view/theme/redbasic/schema/bootstrap-nightfall.css')) { - $x .= file_get_contents('view/theme/redbasic/schema/bootstrap-nightfall.css'); - } - if($narrow_navbar && file_exists('view/theme/redbasic/css/narrow_navbar.css')) { $x .= file_get_contents('view/theme/redbasic/css/narrow_navbar.css'); } @@ -128,8 +129,8 @@ if(file_exists('view/theme/redbasic/css/style.css')) { $x .= $schemecss; } - $left_aside_width = 21; //unit: rem - $right_aside_width = 21; //unit: rem + $left_aside_width = 22; //unit: rem + $right_aside_width = 22; //unit: rem $main_width = $left_aside_width + $right_aside_width + intval($converse_width); @@ -138,19 +139,17 @@ 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, '$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 +158,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..b7e08705c 100644 --- a/view/theme/redbasic/php/theme.php +++ b/view/theme/redbasic/php/theme.php @@ -9,10 +9,31 @@ * * Author: Fabrixxm * * Maintainer: Mike Macgirvin * * Maintainer: Mario Vavti - * * Theme_Color: #343a40 + * * Theme_Color: rgb(248, 249, 250) * * Background_Color: rgb(254,254,254) */ + function redbasic_init(&$a) { + $mode = ''; + $navbar_mode = ''; + + if (local_channel()) { + $mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light'); + $navbar_mode = ((get_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode')) ? 'dark' : 'light'); + } + + if (App::$profile_uid) { + $mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light'); + $navbar_mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'navbar_dark_mode')) ? 'dark' : 'light'); + } + + if (!$mode) { + $mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light'); + $navbar_mode = ((get_config('redbasic', 'navbar_dark_mode')) ? 'dark' : 'light'); + } + + App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"'; + App::$page['navbar_color_mode'] = (($navbar_mode === 'dark') ? 'data-bs-theme="' . $navbar_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 deleted file mode 100644 index 7289acffe..000000000 --- a/view/theme/redbasic/schema/Focus-Light.css +++ /dev/null @@ -1,5 +0,0 @@ -.dropdown-header.text-white-50, -.navbar-dark .navbar-toggler, -.navbar-dark .nav-link.active { - color: rgba(0,0,0,0.7) !important; -} diff --git a/view/theme/redbasic/schema/Focus-Light.php b/view/theme/redbasic/schema/Focus-Light.php deleted file mode 100644 index 8a542d1b8..000000000 --- a/view/theme/redbasic/schema/Focus-Light.php +++ /dev/null @@ -1,13 +0,0 @@ -<?php - - if (! $nav_bg) - $nav_bg = "#f8f9fa"; - if (! $nav_icon_colour) - $nav_icon_colour = "rgba(0, 0, 0, 0.5)"; - if (! $nav_active_icon_colour) - $nav_active_icon_colour = "rgba(0, 0, 0, 0.7)"; - if (! $radius) - $radius = "4px"; - if (! $banner_colour) - $banner_colour = "rgba(0, 0, 0, 0.7)"; - 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..6bf1666ed 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_checkbox.tpl" field=$navbar_dark_mode}} {{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_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, #id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'}); }); </script> {{/if}} |