diff --git a/README.md b/README.md index f4b6953..112c728 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This themes has Focus (wgite background) and GreenGrey (dark background) schemes. Also this themes has Nolikes scheme (hide "Likes" feature) and Nominus scheme (hide "Minus" icon under one-side connections). -Adapted for Hubzilla version 8. +Adapted for Hubzilla version 10. - ussrbasic - default theme with custom GreenGrey schemes diff --git a/ussrbasic/css/blockmode.css b/ussrbasic/css/blockmode.css deleted file mode 100644 index cc1db20..0000000 --- a/ussrbasic/css/blockmode.css +++ /dev/null @@ -1,15 +0,0 @@ - -.wall-item-content.conv-list-mode { - max-width: 280px; - height:200px; - min-height: 200px; - overflow: hidden; -} - -.thread-wrapper.toplevel_item.conv-list-mode { - width: 300px; - height: 300px; - float: left; - margin-left: 5px; - margin-bottom: 35px; -} diff --git a/ussrbasic/css/mod_page.css b/ussrbasic/css/mod_page.css deleted file mode 100644 index 37f597f..0000000 --- a/ussrbasic/css/mod_page.css +++ /dev/null @@ -1,24 +0,0 @@ -/* -section { -left: 0px; -width: 800px; -margin-left: auto; -margin-right: auto; -} -body {background-color: #d00 !important;} - -.page-content-wrapper {background: #fff; - color: #000; - border-radius: 20px; - box-shadow: 5px 5px 5px #111; -} - -h3.page-title { -padding-top: 30px; - color: #033} -.page-body {padding: 40px;} - -.page-body strong {color: #033;} - -.nav-links {margin-top: 5px;} -*/ \ No newline at end of file diff --git a/ussrbasic/css/narrow_navbar.css b/ussrbasic/css/narrow_navbar.css index 9f91541..2b0ec9a 100644 --- a/ussrbasic/css/narrow_navbar.css +++ b/ussrbasic/css/narrow_navbar.css @@ -4,9 +4,4 @@ --bs-navbar-padding-y: 1px; } - #jGrowl.top-right { - top: 3.5rem; - right: 15px; - } - } diff --git a/ussrbasic/css/sample.scss b/ussrbasic/css/sample.scss new file mode 100644 index 0000000..f3271ff --- /dev/null +++ b/ussrbasic/css/sample.scss @@ -0,0 +1,14 @@ +// To compiled custom site bootstrap from sass, +// run this script from the document root for an example: +// php vendor/bin/pscss view/theme/ussrbasic/css/sample.scss view/theme/ussrbasic/css/bootstrap-custom.css + +// See https://getbootstrap.com/docs/5.3/customize/sass/ for more infos + +// required import +@import "vendor/twbs/bootstrap/scss/_functions"; + +$primary: #ff0000; // set the $primary variable + + +// set changes +@import "vendor/twbs/bootstrap/scss/bootstrap"; diff --git a/ussrbasic/css/sloppy_photos.css b/ussrbasic/css/sloppy_photos.css deleted file mode 100644 index 78aedc9..0000000 --- a/ussrbasic/css/sloppy_photos.css +++ /dev/null @@ -1,58 +0,0 @@ - -.rotleft1 { --webkit-transform: rotate(-1deg); --moz-transform: rotate(-1deg); --ms-transform: rotate(-1deg); --o-transform: rotate(-1deg); -} - -.rotleft2 { --webkit-transform: rotate(-2deg); --moz-transform: rotate(-2deg); --ms-transform: rotate(-2deg); --o-transform: rotate(-2deg); -} - -.rotleft3 { --webkit-transform: rotate(-3deg); --moz-transform: rotate(-3deg); --ms-transform: rotate(-3deg); --o-transform: rotate(-3deg); -} - -.rotleft4 { --webkit-transform: rotate(-4deg); --moz-transform: rotate(-4deg); --ms-transform: rotate(-4deg); --o-transform: rotate(-4deg); -} - - -.rotright1 { --webkit-transform: rotate(1deg); --moz-transform: rotate(1deg); --ms-transform: rotate(1deg); --o-transform: rotate(1deg); -} - -.rotright2 { --webkit-transform: rotate(2deg); --moz-transform: rotate(2deg); --ms-transform: rotate(2deg); --o-transform: rotate(2deg); -} - -.rotright3 { --webkit-transform: rotate(3deg); --moz-transform: rotate(3deg); --ms-transform: rotate(3deg); --o-transform: rotate(3deg); -} - -.rotright4 { --webkit-transform: rotate(4deg); --moz-transform: rotate(4deg); --ms-transform: rotate(4deg); --o-transform: rotate(4deg); -} - diff --git a/ussrbasic/css/style.css b/ussrbasic/css/style.css index 1aabaf7..28dd29e 100644 --- a/ussrbasic/css/style.css +++ b/ussrbasic/css/style.css @@ -7,21 +7,13 @@ /* bootstrap variables */ -:root { - --bs-border-radius: $radius; - --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'); } @@ -34,10 +26,6 @@ background-color: $nav_bg_dark !important; } -.btn { - --bs-btn-border-radius: $radius; -} - /* generals */ @@ -46,13 +34,10 @@ html { } body { - font-size: 0.9rem; background-color: var(--hz-body-bg); background-image: var(--hz-body-bg-image); background-attachment: fixed; background-size: cover; - color: var(--bs-body-color); - margin: 0; } aside#region_1 { @@ -87,30 +72,31 @@ main { height: 100vh; background: rgba(0, 0, 0, .3); cursor: pointer; + z-index: 1010; } h1, .h1 { - font-size: 2rem; + font-size: 2.1rem; } h2, .h2 { - font-size: 1.6rem; + font-size: 1.7rem; } h3, .h3 { - font-size: 1.2rem; + font-size: 1.3rem; } h4, .h4 { - font-size: 1.05rem; + font-size: 1.15rem; } h5, .h5 { - font-size: 0.9rem; + font-size: 1rem; } h6, .h6 { - font-size: 0.75rem; + font-size: 0.85rem; } .navbar-banner { @@ -155,7 +141,7 @@ a:focus, } input, optgroup, select, textarea { - font-size: 0.9rem !important; + font-size: 1rem !important; } input[type=text], textarea { @@ -164,24 +150,15 @@ input[type=text], textarea { color: var(--bs-body-color); } -.selected-doco-nav { - font-weight: bold; - text-shadow: 2px 2px 3px lightgray; -} - -#doco-content img { - width: 100%; -} - -#help-content pre code { - overflow-x: auto; - white-space: pre; -} - .heart { color: #FF0000; } +#toast-container { + z-index: 1060; + width: 300px; +} + #powered-by { font-size: 0.5rem; position: absolute; @@ -459,7 +436,7 @@ footer { .photo, .contact-block-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } #side-bar-photos-albums { @@ -472,7 +449,7 @@ footer { .profile-match-photo img, .directory-photo-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } .profile-match-photo img { @@ -722,29 +699,9 @@ nav .acpopup { color:#cc0000; } -/* popup notifications */ -div.jGrowl div.notice { - background: #511919 url("../../../../images/icons/48/notice.png") no-repeat 5px center; - color: #ffffff; - padding-left: 58px; -} -div.jGrowl div.info { - background: #364e59 url("../../../../images/icons/48/info.png") no-repeat 5px center; - color: #ffffff; - padding-left: 58px; -} -#jGrowl.top-right { - top: 4.5rem; - right: .25rem; -} - -div.jGrowl div.jGrowl-notification { - min-height: 60px; -} - .jslider .jslider-scale ins { color: #333; - font-size: 0.9rem; + font-size: 1rem; width: 100px; text-align: center; } @@ -810,7 +767,7 @@ div.jGrowl div.jGrowl-notification { .shared_header img { border-radius: var(--bs-border-radius); - margin-right: .75rem; + margin-right: .5rem; } .tag1 { @@ -873,28 +830,27 @@ margin-right: 50px; .generic-icons, a .generic-icons { - font-size: 1rem; - margin-right: 0.5rem; + font-size: 1.2rem; } .generic-icons-right { - font-size: 1rem; + font-size: 1.2rem; margin-left: 0.5rem; } .generic-icons-nav { - font-size: 1rem; - margin-right: 7px; + font-size: 1.2rem; + margin-right: 0.5rem; } .admin-icons { - font-size: 1.2em; - margin-right: 7px; + font-size: 1.2rem; + margin-right: 0.5rem; } .drop-icons, a .drop-icons { - font-size: 1rem; + font-size: 1.2rem; text-decoration: none; cursor: pointer; } @@ -924,25 +880,6 @@ a .drop-icons:hover { list-style-type: none; } -table { - border-spacing: 2px; - max-width: 100%; -} - -th,td { - padding: 3px; -} - -#channels > tbody > tr > td, #users > tbody > tr > td { - max-width: 19.4em; - overflow: hidden; -} - -/* mail */ - -img.mail-conv-sender-photo { - border-radius: var(--bs-border-radius); -} /* jot */ @@ -958,21 +895,23 @@ img.mail-conv-sender-photo { font-weight: bold; } +.jot-icons, +.comment-icon { + font-size: 1.2rem; +} + #profile-jot-wrapper { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); - } - - #profile-jot-text::-webkit-input-placeholder { - font-size: 1.2rem; + font-size: 1.3rem; } #profile-jot-text::-moz-placeholder { - font-size: 1.2rem; + font-size: 1.3rem; } #profile-jot-text:focus::-webkit-input-placeholder { @@ -1013,6 +952,10 @@ img.mail-conv-sender-photo { margin-top: 2em; } +.wall-item-pinned i { + transform: rotate(45deg); +} + .wall-item-content-wrapper { background-color: var(--bs-tertiary-bg); } @@ -1035,6 +978,19 @@ img.mail-conv-sender-photo { border-top: 1px dashed #adadad; } + +.hide-comments-icon, +.divgrow-showmore-icon { + font-size: $font_size; +} + +.divgrow-showmore-label, +.hide-comments-label { + text-transform: uppercase; + font-size: 0.7rem; +} + + .wall-item-comment-wrapper { padding: 7px 10px; background-color: var(--bs-tertiary-bg); @@ -1061,14 +1017,6 @@ img.mail-conv-sender-photo { height: $reply_photo; } -.wall-item-content, -.mail-conv-body, -.page-body, -.chat-item-text, -.chat-item-text-self { - font-size: 1rem; -} - .comment-edit-text { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); @@ -1119,7 +1067,7 @@ img.mail-conv-sender-photo { } .abook-self { - background-color: #ffdddd; + background-color: var(--bs-light-bg-subtle); } .abook-pending-contact, .abook-permschange { @@ -1155,16 +1103,16 @@ img.mail-conv-sender-photo { } .menu-img-2 { - height: 2.3rem; - width: 2.3rem; + height: 2.5rem; + width: 2.5rem; margin-right: .5rem; border-radius: var(--bs-border-radius); float: left; } .menu-img-1 { - height: 1.1rem; - width: 1.1rem; + height: 1.3rem; + width: 1.3rem; border-radius: var(--bs-border-radius); } @@ -1196,9 +1144,18 @@ img.mail-conv-sender-photo { .generic-content-wrapper { background-color: var(--bs-body-bg); - border: 1px solid var(--bs-border-color); + border: 1px solid var(--bs-light-border-subtle); border-radius: var(--bs-border-radius); margin-bottom: 1.5rem; + font-size: 1.1rem; +} + +.generic-content-wrapper.is-contained { + border: 1px solid var(--bs-primary-border-subtle); +} + +.generic-content-wrapper.is-new { + border-top: 2px solid var(--bs-primary); } .section-title-wrapper { @@ -1236,32 +1193,32 @@ img.mail-conv-sender-photo { .section-content-success-wrapper { padding: 21px 10px; - color: #155724; - background-color: #d4edda; + color: var(--bs-success-text-emphasis); + background-color: var(--bs-success-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-info-wrapper { padding: 21px 10px; - color: #0c5460; - background-color: #d1ecf1; + color: var(--bs-info-text-emphasis); + background-color: var(--bs-info-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-warning-wrapper { padding: 21px 10px; - color: #856404; - background-color: #fff3cd; + color: var(--bs-warning-text-emphasis); + background-color: var(--bs-warning-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-danger-wrapper { padding: 21px 10px; - color: #721c24; - background-color: #f8d7da; + color: var(--bs-danger-text-emphasis); + background-color: var(--bs-danger-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } @@ -1295,17 +1252,23 @@ img.mail-conv-sender-photo { } main.fullscreen { + position: fixed; + top: 0px; left: 0px; - width: 100%; + width: 100vw; height: 100vh; - max-width: none; + z-index: 1020; + overflow: auto; } main.fullscreen .generic-content-wrapper { - position: absolute; - width: 100%; + position: fixed; top: 0px; left: 0px; + width: 100vw; + height: 100vh; + z-index: 1020; + overflow: auto; border-radius: 0px; border-width: 0px; } @@ -1354,12 +1317,7 @@ main.fullscreen .section-content-wrapper-np { /* bootstrap overrides */ -.form-control { - border-radius: $radius; -} - blockquote { - font-size: 1rem; font-style: italic; border-left: 3px solid var(--bs-border-color); padding: 1em 0px 1em 1.5em; @@ -1419,12 +1377,16 @@ dl.bb-dl > dd > li { } .bootstrap-tagsinput .tag:before { - /* Copied from fa-asterisk, is there a better way to do it? */ - font-family: ForkAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - content:"\f069 "; + font-family: bootstrap-icons; + font-size: 0.5rem; + content: "\F151"; + margin-right: .25rem; +} + +.bootstrap-tagsinput .tag [data-role="remove"]:after { + font-family: bootstrap-icons; + font-size: 0.5rem; + content: "\F659"; } /* Modified original CSS to match input in Ussrbasic */ @@ -1447,7 +1409,6 @@ dl.bb-dl > dd > li { .bootstrap-tagsinput input { height: 2.5rem; margin: 0; - max-width: 30%; } .bootstrap-tagsinput { @@ -1674,3 +1635,5 @@ dl.bb-dl > dd > li { transform: translateX(80vw); } } + + diff --git a/ussrbasic/js/ussrbasic.js b/ussrbasic/js/ussrbasic.js index 4ff1f1a..c4fa41f 100644 --- a/ussrbasic/js/ussrbasic.js +++ b/ussrbasic/js/ussrbasic.js @@ -6,239 +6,251 @@ let ussrbasic_dark_mode = localStorage.getItem('ussrbasic_dark_mode'); let ussrbasic_theme_color = localStorage.getItem('ussrbasic_theme_color'); if (ussrbasic_dark_mode == 1) { - $('html').attr('data-bs-theme', 'dark'); + document.documentElement.setAttribute('data-bs-theme', 'dark'); } if (ussrbasic_dark_mode == 0) { - $('html').attr('data-bs-theme', 'light'); + document.documentElement.setAttribute('data-bs-theme', 'light'); } if (ussrbasic_theme_color) { - $('meta[name=theme-color]').attr('content', ussrbasic_theme_color); + document.querySelector('meta[name=theme-color]').setAttribute('content', ussrbasic_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; - } - $('
').prependTo('body'); - }); - } +document.addEventListener('DOMContentLoaded', function () { + // provide a fake progress bar for pwa standalone mode + if (window.matchMedia('(display-mode: standalone)').matches) { + window.addEventListener('beforeunload', function () { + if (!document.querySelector('.page-loader')) { + let loader = document.createElement('div'); + loader.classList.add('bg-primary', 'page-loader'); + document.body.prepend(loader); + } + }); + } - if (ussrbasic_dark_mode == 1) { - $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); - $('[data-bs-theme="light"]').attr('data-bs-theme', 'dark'); - } - if (ussrbasic_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 (ussrbasic_dark_mode == 1) { + document.getElementById('theme-switch-icon').classList.remove('bi-moon'); + document.getElementById('theme-switch-icon').classList.add('bi-sun'); + document.querySelector('[data-bs-theme="light"]').setAttribute('data-bs-theme', 'dark'); + } + if (ussrbasic_dark_mode == 0) { + document.getElementById('theme-switch-icon').classList.remove('bi-sun'); + document.getElementById('theme-switch-icon').classList.add('bi-moon'); + let darkElements = document.querySelectorAll('[data-bs-theme="dark"]:not(nav)'); + darkElements.forEach(el => el.setAttribute('data-bs-theme', 'light')); + } - if (ussrbasic_theme_color != $('nav').css('background-color')) { - $('meta[name=theme-color]').attr('content', $('nav').css('background-color')); - localStorage.setItem('ussrbasic_theme_color', $('nav').css('background-color')); - } + let navBackgroundColor = document.querySelector('nav').style.backgroundColor; + if (ussrbasic_theme_color !== navBackgroundColor) { + document.querySelector('meta[name=theme-color]').setAttribute('content', navBackgroundColor); + localStorage.setItem('ussrbasic_theme_color', navBackgroundColor); + } - // CSS3 calc() fallback (for unsupported browsers) - $('body').append(''); - if( $('#css3-calc').width() == 10) { - $(window).resize(function() { - if($(window).width() < 992) { - $('main').css('width', $(window).width() + $('aside').outerWidth() ); - } else { - $('main').css('width', '100%'); - } - }); - } - $('#css3-calc').remove(); // Remove the test element + // CSS3 calc() fallback (for unsupported browsers) + let testElem = document.createElement('div'); + testElem.style.width = 'calc(10px + 10px)'; + testElem.style.display = 'none'; + testElem.id = 'css3-calc'; + document.body.appendChild(testElem); + + if (testElem.offsetWidth === 10) { + window.addEventListener('resize', function () { + if (window.innerWidth < 992) { + document.querySelector('main').style.width = `${window.innerWidth + document.querySelector('aside').offsetWidth}px`; + } else { + document.querySelector('main').style.width = '100%'; + } + }); + } + testElem.remove(); // Remove the test element - if($(window).width() < 1200) { - $("#right_aside_wrapper").children().detach().appendTo('#left_aside_wrapper'); - $('#notifications_wrapper').addClass('d-none'); - } + if (window.innerWidth < 1200) { + let rightAsideWrapper = document.getElementById("right_aside_wrapper"); + let leftAsideWrapper = document.getElementById("left_aside_wrapper"); + leftAsideWrapper.appendChild(...rightAsideWrapper.children); + document.getElementById('notifications_wrapper').classList.add('d-none'); + } + if (document.getElementById('region_1')) { + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); + } - if (document.querySelector('#region_1')) { - stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); - } + if (document.getElementById('region_3')) { + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); + } - if (document.querySelector('#region_3')) { - stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); - } + document.querySelectorAll('.usermenu').forEach(function (element) { + element.addEventListener('click', function () { + let navCollapse = document.querySelectorAll('#navbar-collapse-1, #navbar-collapse-2'); + navCollapse.forEach(function (nav) { + if (nav.classList.contains('show')) { + nav.classList.remove('show'); + } + }); + }); + }); - $('.usermenu').click(function() { - if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){ - $('#navbar-collapse-1, #navbar-collapse-2').removeClass('show'); - } - }); + document.getElementById('theme-switch').addEventListener('click', function () { + let html = document.documentElement; + if (html.getAttribute('data-bs-theme') === 'dark') { + let nav = document.querySelector('nav'); + if (nav.dataset.bsTheme === 'dark') { + document.querySelectorAll('[data-bs-theme="dark"]:not(nav)').forEach(function (el) { + el.setAttribute('data-bs-theme', 'light'); + }); + } else { + document.querySelector('[data-bs-theme="dark"]').setAttribute('data-bs-theme', 'light'); + } + localStorage.setItem('ussrbasic_dark_mode', 0); + document.getElementById('theme-switch-icon').classList.remove('bi-sun'); + document.getElementById('theme-switch-icon').classList.add('bi-moon'); + } else { + document.querySelectorAll('[data-bs-theme="light"]').forEach(function (el) { + el.setAttribute('data-bs-theme', 'dark'); + }); + localStorage.setItem('ussrbasic_dark_mode', 1); + document.getElementById('theme-switch-icon').classList.remove('bi-moon'); + document.getElementById('theme-switch-icon').classList.add('bi-sun'); + } + document.querySelector('meta[name=theme-color]').setAttribute('content', document.querySelector('nav').style.backgroundColor); + localStorage.setItem('ussrbasic_theme_color', document.querySelector('nav').style.backgroundColor); + }); - $('#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('ussrbasic_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('ussrbasic_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('ussrbasic_theme_color', $('nav').css('background-color')); - }); + document.getElementById('menu-btn').addEventListener('click', function () { + let navCollapse = document.getElementById('navbar-collapse-1'); + if (navCollapse.classList.contains('show')) { + navCollapse.classList.remove('show'); + } + }); + document.querySelectorAll('.notifications-btn').forEach(function (element) { + element.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + let navCollapse = document.getElementById('navbar-collapse-2'); + if (navCollapse.classList.contains('show')) { + navCollapse.classList.remove('show'); + } + }); + }); - $('#menu-btn').click(function() { - if($('#navbar-collapse-1').hasClass('show')){ - $('#navbar-collapse-1').removeClass('show'); - } - }); + $("input[data-role=cat-tagsinput]").tagsinput({ + tagClass: 'badge rounded-pill bg-warning text-dark' + }); - $('.notifications-btn').click(function(e) { - e.preventDefault(); - e.stopPropagation(); - if($('#navbar-collapse-2').hasClass('show')){ - $('#navbar-collapse-2').removeClass('show'); - } - }); + document.querySelectorAll('a.disabled').forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + }); + }); - $("input[data-role=cat-tagsinput]").tagsinput({ - tagClass: 'badge rounded-pill bg-warning text-dark' - }); + let doctitle = document.title; + function checkNotify() { + let notifyUpdateElem = document.getElementById('notify-update'); + if (notifyUpdateElem && notifyUpdateElem.innerHTML !== '') { + document.title = '(' + notifyUpdateElem.innerHTML + ') ' + doctitle; + } else { + document.title = doctitle; + } + } - $('a.disabled').click(function(e) { - e.preventDefault(); - e.stopPropagation(); - }); + setInterval(checkNotify, 10 * 1000); - var doctitle = document.title; - function checkNotify() { - var notifyUpdateElem = document.getElementById('notify-update'); - if(notifyUpdateElem !== null) { - if(notifyUpdateElem.innerHTML !== "") - document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle; - else - document.title = doctitle; - } - } - setInterval(function () {checkNotify();}, 10 * 1000); + let touch_start = null; + let touch_max = window.innerWidth / 10; - var touch_start = null; - var touch_max = window.innerWidth / 10; - - window.addEventListener('touchstart', function(e) { - if (e.touches.length === 1){ - //just one finger touched - touch_start = e.touches.item(0).clientX; - if (touch_start < touch_max) { - $('body').css('overflow-y', 'hidden'); - } - } - else { - //a second finger hit the screen, abort the touch - touch_start = null; - } - }); - - window.addEventListener('touchend', function(e) { - $('body').css('overflow-y', ''); - - let touch_offset = 30; //at least 30px are a swipe - if (touch_start) { - //the only finger that hit the screen left it - let touch_end = e.changedTouches.item(0).clientX; - - if (touch_end > (touch_start + touch_offset)) { - //a left -> right swipe - if (touch_start < touch_max) { - toggleAside(); - } - } - if (touch_end < (touch_start - touch_offset)) { - //a right -> left swipe - } - } - }); + window.addEventListener('touchstart', function (e) { + if (e.touches.length === 1) { + touch_start = e.touches[0].clientX; + if (touch_start < touch_max) { + document.body.style.overflowY = 'hidden'; + } + } else { + touch_start = null; + } + }); + window.addEventListener('touchend', function (e) { + document.body.style.overflowY = ''; + let touch_offset = 30; // at least 30px are a swipe + if (touch_start) { + let touch_end = e.changedTouches[0].clientX; + if (touch_end > (touch_start + touch_offset)) { + if (touch_start < touch_max) { + toggleAside(); + } + } + if (touch_end < (touch_start - touch_offset)) { + // a right -> left swipe + } + } + }); }); function setStyle(element, cssProperty) { - for (var property in cssProperty){ - element.style[property] = cssProperty[property]; - } + for (var property in cssProperty) { + element.style[property] = cssProperty[property]; + } } function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + let lastScrollTop = 0; + let stickyElement = document.querySelector(sticky); - var lastScrollTop = 0; - var sticky = document.querySelector(sticky); + if (!stickyElement) { + return; + } - if (!sticky) { - return; - } + let stickyHeight = stickyElement.getBoundingClientRect().height; + let stickyTopElement = document.querySelector(stickyTop); + let content = document.querySelector(container); + let diff = window.innerHeight - stickyHeight; - var stickyHeight = sticky.getBoundingClientRect().height; - var stickyTop = document.querySelector(stickyTop); - var content = document.querySelector(container); - var diff = window.innerHeight - stickyHeight; - var h = 0; - var lasth = 0; - var st = window.pageYOffset || document.documentElement.scrollTop; + let h = 0; + let lasth = 0; + let st = window.pageYOffset || document.documentElement.scrollTop; - var resizeObserver = new ResizeObserver(function(entries) { - stickyHeight = sticky.getBoundingClientRect().height; - st = window.pageYOffset || document.documentElement.scrollTop; - diff = window.innerHeight - stickyHeight; - }); + let resizeObserver = new ResizeObserver(function () { + stickyHeight = stickyElement.getBoundingClientRect().height; + st = window.pageYOffset || document.documentElement.scrollTop; + diff = window.innerHeight - stickyHeight; + }); - resizeObserver.observe(sticky); - resizeObserver.observe(content); - - window.addEventListener('scroll', function() { - if(window.innerHeight > stickyHeight + topOffset) { - setStyle(stickyTop, { height: 0 + 'px' }); - setStyle(sticky, { position: 'sticky', top: topOffset + 'px'}); - } - else { - st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" - if (st > lastScrollTop){ - // downscroll code - setStyle(stickyTop, { height: lasth + 'px' }); - setStyle(sticky, { position: 'sticky', top: Math.round(diff) - bottomOffset + 'px', bottom: '' }); - } else { - // upscroll code - h = sticky.getBoundingClientRect().top - content.getBoundingClientRect().top; - if(Math.round(stickyTop.getBoundingClientRect().height) === lasth) { - setStyle(stickyTop, { height: Math.round(h) + 'px' }); - } - lasth = Math.round(h); - setStyle(sticky, { position: 'sticky', top: '', bottom: Math.round(diff) - topOffset + 'px' }); - } - lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling - } - }, false); + resizeObserver.observe(stickyElement); + resizeObserver.observe(content); + window.addEventListener('scroll', function () { + if (window.innerHeight > stickyHeight + topOffset) { + setStyle(stickyTopElement, { height: '0px' }); + setStyle(stickyElement, { position: 'sticky', top: `${topOffset}px` }); + } else { + st = window.pageYOffset || document.documentElement.scrollTop; + if (st > lastScrollTop) { + setStyle(stickyTopElement, { height: `${lasth}px` }); + setStyle(stickyElement, { position: 'sticky', top: `${Math.round(diff) - bottomOffset}px`, bottom: '' }); + } else { + h = stickyElement.getBoundingClientRect().top - content.getBoundingClientRect().top; + if (Math.round(stickyTopElement.getBoundingClientRect().height) === lasth) { + setStyle(stickyTopElement, { height: `${Math.round(h)}px` }); + } + lasth = Math.round(h); + setStyle(stickyElement, { position: 'sticky', top: '', bottom: `${Math.round(diff) - topOffset}px` }); + } + lastScrollTop = st <= 0 ? 0 : st; + } + }, false); } function makeFullScreen(full) { - if(typeof full=='undefined' || full == true) { - $('main').addClass('fullscreen'); - $('header, nav, aside, #fullscreen-btn').attr('style','display:none !important'); - $('#inline-btn').show(); - } - else { - $('main').removeClass('fullscreen'); - $('header, nav, aside, #fullscreen-btn').show(); - $('#inline-btn').hide(); - } + if (typeof full === 'undefined' || full === true) { + document.querySelector('main').classList.add('fullscreen'); + document.getElementById('fullscreen-btn').style.display = 'none'; + document.getElementById('inline-btn').style.display = 'inline-block'; + } else { + document.querySelector('main').classList.remove('fullscreen'); + document.getElementById('fullscreen-btn').style.display = ''; + document.getElementById('inline-btn').style.display = 'none'; + } } - - diff --git a/ussrbasic/php/config.php b/ussrbasic/php/config.php index a825dd1..ea0f76b 100644 --- a/ussrbasic/php/config.php +++ b/ussrbasic/php/config.php @@ -2,6 +2,9 @@ namespace Zotlabs\Theme; +use ScssPhp\ScssPhp\Compiler; +use ScssPhp\ScssPhp\OutputStyle; + class UssrbasicConfig { function get_schemas() { @@ -36,16 +39,16 @@ class UssrbasicConfig { return; } - $arr = array(); + $arr['primary_color'] = get_pconfig(local_channel(),'ussrbasic', 'primary_color'); + $arr['success_color'] = get_pconfig(local_channel(),'ussrbasic', 'success_color'); + $arr['info_color'] = get_pconfig(local_channel(),'ussrbasic', 'info_color'); + $arr['warning_color'] = get_pconfig(local_channel(),'ussrbasic', 'warning_color'); + $arr['danger_color'] = get_pconfig(local_channel(),'ussrbasic', 'danger_color'); $arr['dark_mode'] = get_pconfig(local_channel(),'ussrbasic', 'dark_mode'); $arr['navbar_dark_mode'] = get_pconfig(local_channel(),'ussrbasic', 'navbar_dark_mode'); $arr['narrow_navbar'] = get_pconfig(local_channel(),'ussrbasic', 'narrow_navbar' ); $arr['nav_bg'] = get_pconfig(local_channel(),'ussrbasic', 'nav_bg' ); $arr['nav_bg_dark'] = get_pconfig(local_channel(),'ussrbasic', 'nav_bg_dark' ); - $arr['link_color'] = get_pconfig(local_channel(),'ussrbasic', 'link_color' ); - $arr['link_color_dark'] = get_pconfig(local_channel(),'ussrbasic', 'link_color_dark' ); - $arr['link_hover_color'] = get_pconfig(local_channel(),'ussrbasic', 'link_hover_color' ); - $arr['link_hover_color_dark'] = get_pconfig(local_channel(),'ussrbasic', 'link_hover_color_dark' ); $arr['bgcolor'] = get_pconfig(local_channel(),'ussrbasic', 'background_color' ); $arr['bgcolor_dark'] = get_pconfig(local_channel(),'ussrbasic', 'background_color_dark' ); $arr['background_image'] = get_pconfig(local_channel(),'ussrbasic', 'background_image' ); @@ -65,15 +68,99 @@ class UssrbasicConfig { } if (isset($_POST['ussrbasic-settings-submit'])) { + if (isset($_POST['ussrbasic_primary_color']) || isset($_POST['ussrbasic_radius'])) { + + $primary_color = ''; + $success_color = ''; + $info_color = ''; + $warning_color = ''; + $danger_color = ''; + $radius = floatval($_POST['ussrbasic_radius']); + + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasic_primary_color'])) { + $primary_color = $_POST['ussrbasic_primary_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasic_success_color'])) { + $success_color = $_POST['ussrbasic_success_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasic_info_color'])) { + $info_color = $_POST['ussrbasic_info_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasic_warning_color'])) { + $warning_color = $_POST['ussrbasic_warning_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasic_danger_color'])) { + $danger_color = $_POST['ussrbasic_danger_color']; + } + + if ($primary_color || $success_color || $info_color || $warning_color || $danger_color || $radius) { + + try { + $cache_dir = 'store/[data]/[scss]/'; + if(!is_dir($cache_dir)) { + os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true); + } + + $options = [ + 'cacheDir' => $cache_dir, + 'prefix' => 'ussrbasic_', + 'forceRefresh' => false + ]; + + $compiler = new Compiler($options); + $compiler->setImportPaths('vendor/twbs/bootstrap/scss'); + $compiler->setOutputStyle(OutputStyle::COMPRESSED); + + // Set Variables + if ($primary_color) { + $variables['$primary'] = $primary_color; + } + if ($success_color) { + $variables['$success'] = $success_color; + } + if ($info_color) { + $variables['$info'] = $info_color; + } + if ($warning_color) { + $variables['$warning'] = $warning_color; + } + if ($danger_color) { + $variables['$danger'] = $danger_color; + } + if ($radius) { + $variables['$border-radius'] = $radius . 'rem'; + $variables['$border-radius-sm'] = $radius/1.5 . 'rem'; + $variables['$border-radius-lg'] = $radius*1.333 . 'rem'; + $variables['$border-radius-xl'] = $radius*2.666 . 'rem'; + $variables['$border-radius-xxl'] = $radius*5.333 . 'rem'; + } + + // Replace Bootstrap Variables with Customizer Variables + $compiler->replaceVariables($variables); + + $bs = $compiler->compileString('@import "bootstrap.scss";'); + + set_pconfig(local_channel(), 'ussrbasic', 'bootstrap', $bs->getCss()); + } catch (\Exception $e) { + logger('scssphp: Unable to compile content'); + } + } + else { + set_pconfig(local_channel(), 'ussrbasic', 'bootstrap', ''); + } + } + + set_pconfig(local_channel(), 'ussrbasic', 'primary_color', $_POST['ussrbasic_primary_color']); + set_pconfig(local_channel(), 'ussrbasic', 'success_color', $_POST['ussrbasic_success_color']); + set_pconfig(local_channel(), 'ussrbasic', 'info_color', $_POST['ussrbasic_info_color']); + set_pconfig(local_channel(), 'ussrbasic', 'warning_color', $_POST['ussrbasic_warning_color']); + set_pconfig(local_channel(), 'ussrbasic', 'danger_color', $_POST['ussrbasic_danger_color']); + set_pconfig(local_channel(), 'ussrbasic', 'narrow_navbar', $_POST['ussrbasic_narrow_navbar']); set_pconfig(local_channel(), 'ussrbasic', 'navbar_dark_mode', $_POST['ussrbasic_navbar_dark_mode']); set_pconfig(local_channel(), 'ussrbasic', 'dark_mode', $_POST['ussrbasic_dark_mode']); set_pconfig(local_channel(), 'ussrbasic', 'nav_bg', $_POST['ussrbasic_nav_bg']); set_pconfig(local_channel(), 'ussrbasic', 'nav_bg_dark', $_POST['ussrbasic_nav_bg_dark']); - set_pconfig(local_channel(), 'ussrbasic', 'link_color', $_POST['ussrbasic_link_color']); - set_pconfig(local_channel(), 'ussrbasic', 'link_color_dark', $_POST['ussrbasic_link_color_dark']); - set_pconfig(local_channel(), 'ussrbasic', 'link_hover_color', $_POST['ussrbasic_link_hover_color']); - set_pconfig(local_channel(), 'ussrbasic', 'link_hover_color_dark', $_POST['ussrbasic_link_hover_color_dark']); set_pconfig(local_channel(), 'ussrbasic', 'background_color', $_POST['ussrbasic_background_color']); set_pconfig(local_channel(), 'ussrbasic', 'background_color_dark', $_POST['ussrbasic_background_color_dark']); set_pconfig(local_channel(), 'ussrbasic', 'background_image', $_POST['ussrbasic_background_image']); @@ -84,6 +171,9 @@ class UssrbasicConfig { set_pconfig(local_channel(), 'ussrbasic', 'top_photo', $_POST['ussrbasic_top_photo']); set_pconfig(local_channel(), 'ussrbasic', 'reply_photo', $_POST['ussrbasic_reply_photo']); set_pconfig(local_channel(), 'ussrbasic', 'advanced_theming', $_POST['ussrbasic_advanced_theming']); + + // This is used to refresh the cache + set_pconfig(local_channel(), 'system', 'style_update', time()); } } @@ -103,24 +193,25 @@ class UssrbasicConfig { '$dark' => t('Dark style'), '$light' => t('Light style'), '$common' => t('Common settings'), + '$primary_color' => array('ussrbasic_primary_color', t('Primary theme color'), $arr['primary_color'], ' ' . t('Current color, leave empty for default')), + '$success_color' => array('ussrbasic_success_color', t('Success theme color'), $arr['success_color'], ' ' . t('Current color, leave empty for default')), + '$info_color' => array('ussrbasic_info_color', t('Info theme color'), $arr['info_color'], ' ' . t('Current color, leave empty for default')), + '$warning_color' => array('ussrbasic_warning_color', t('Warning theme color'), $arr['warning_color'], ' ' . t('Current color, leave empty for default')), + '$danger_color' => array('ussrbasic_danger_color', t('Danger theme color'), $arr['danger_color'], ' ' . t('Current color, leave empty for default')), '$dark_mode' => array('ussrbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), '$navbar_dark_mode' => array('ussrbasic_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('ussrbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))), '$nav_bg' => array('ussrbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']), '$nav_bg_dark' => array('ussrbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']), - '$link_color' => array('ussrbasic_link_color', t('Link color'), $arr['link_color']), - '$link_color_dark' => array('ussrbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']), - '$link_hover_color' => array('ussrbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']), - '$link_hover_color_dark' => array('ussrbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']), '$bgcolor' => array('ussrbasic_background_color', t('Set the background color'), $arr['bgcolor']), '$bgcolor_dark' => array('ussrbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']), '$background_image' => array('ussrbasic_background_image', t('Set the background image'), $arr['background_image']), '$background_image_dark' => array('ussrbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']), '$font_size' => array('ussrbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')), - '$radius' => array('ussrbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')), + '$radius' => array('ussrbasic_radius', t('Set radius of corners in rem'), $arr['radius'], t('Leave empty for default radius')), '$converse_width' => array('ussrbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')), - '$top_photo' => array('ussrbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']), - '$reply_photo' => array('ussrbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']), + '$top_photo' => array('ussrbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo'], t('Leave empty for default size')), + '$reply_photo' => array('ussrbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo'], t('Leave empty for default size')), '$advanced_theming' => ['ussrbasic_advanced_theming', t('Show advanced settings'), $arr['advanced_theming'], '', [t('No'), t('Yes')]] )); diff --git a/ussrbasic/php/style.php b/ussrbasic/php/style.php index 54efd95..c38431b 100644 --- a/ussrbasic/php/style.php +++ b/ussrbasic/php/style.php @@ -1,32 +1,48 @@ $nav_bg, '$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, '$background_image_dark' => $background_image_dark, '$font_size' => $font_size, - '$radius' => $radius, '$converse_width' => $converse_width, '$top_photo' => $top_photo, '$reply_photo' => $reply_photo, @@ -158,8 +135,12 @@ if(file_exists('view/theme/ussrbasic/css/style.css')) { '$right_aside_width' => $right_aside_width ); - echo strtr($x, $options); + $o = strtr($x, $options); + + header('Cache-Control: max-age=2592000'); + + echo $bs . $o; } // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. diff --git a/ussrbasic/php/theme.php b/ussrbasic/php/theme.php index daf7e6f..5b345c2 100644 --- a/ussrbasic/php/theme.php +++ b/ussrbasic/php/theme.php @@ -5,7 +5,7 @@ * * Description: ussr.win theme based on Hubzilla standard theme * * Version: 2.2 * * MinVersion: 8.9 - * * MaxVersion: 10.0 + * * MaxVersion: 11.0 * * Author: Fabrixxm * * Maintainer: ivan zlax * * Theme_Color: rgb(248, 249, 250) diff --git a/ussrbasic/php/theme_init.php b/ussrbasic/php/theme_init.php index 5bb4fb3..5f21448 100644 --- a/ussrbasic/php/theme_init.php +++ b/ussrbasic/php/theme_init.php @@ -1,10 +1,11 @@ +

{{$common}}

+ {{include file="field_colorinput.tpl" field=$primary_color}} + {{include file="field_colorinput.tpl" field=$success_color}} + {{include file="field_colorinput.tpl" field=$info_color}} + {{include file="field_colorinput.tpl" field=$warning_color}} + {{include file="field_colorinput.tpl" field=$danger_color}} + {{include file="field_input.tpl" field=$radius}} + {{include file="field_input.tpl" field=$top_photo}} + {{include file="field_input.tpl" field=$reply_photo}} +

{{$light}}

{{include file="field_checkbox.tpl" field=$navbar_dark_mode}} {{include file="field_colorinput.tpl" field=$nav_bg}} {{include file="field_colorinput.tpl" field=$bgcolor}} {{include file="field_colorinput.tpl" field=$background_image}} - {{include file="field_colorinput.tpl" field=$link_color}} - {{include file="field_colorinput.tpl" field=$link_hover_color}}

{{$dark}}

{{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}} - -

{{$common}}

- {{include file="field_input.tpl" field=$radius}} - {{include file="field_input.tpl" field=$top_photo}} - {{include file="field_input.tpl" field=$reply_photo}} {{/if}} +
- +
diff --git a/ussrbasicpub/css/blockmode.css b/ussrbasicpub/css/blockmode.css deleted file mode 100644 index cc1db20..0000000 --- a/ussrbasicpub/css/blockmode.css +++ /dev/null @@ -1,15 +0,0 @@ - -.wall-item-content.conv-list-mode { - max-width: 280px; - height:200px; - min-height: 200px; - overflow: hidden; -} - -.thread-wrapper.toplevel_item.conv-list-mode { - width: 300px; - height: 300px; - float: left; - margin-left: 5px; - margin-bottom: 35px; -} diff --git a/ussrbasicpub/css/mod_page.css b/ussrbasicpub/css/mod_page.css deleted file mode 100644 index 37f597f..0000000 --- a/ussrbasicpub/css/mod_page.css +++ /dev/null @@ -1,24 +0,0 @@ -/* -section { -left: 0px; -width: 800px; -margin-left: auto; -margin-right: auto; -} -body {background-color: #d00 !important;} - -.page-content-wrapper {background: #fff; - color: #000; - border-radius: 20px; - box-shadow: 5px 5px 5px #111; -} - -h3.page-title { -padding-top: 30px; - color: #033} -.page-body {padding: 40px;} - -.page-body strong {color: #033;} - -.nav-links {margin-top: 5px;} -*/ \ No newline at end of file diff --git a/ussrbasicpub/css/narrow_navbar.css b/ussrbasicpub/css/narrow_navbar.css index 9f91541..2b0ec9a 100644 --- a/ussrbasicpub/css/narrow_navbar.css +++ b/ussrbasicpub/css/narrow_navbar.css @@ -4,9 +4,4 @@ --bs-navbar-padding-y: 1px; } - #jGrowl.top-right { - top: 3.5rem; - right: 15px; - } - } diff --git a/ussrbasicpub/css/sample.scss b/ussrbasicpub/css/sample.scss new file mode 100644 index 0000000..a5e2dc0 --- /dev/null +++ b/ussrbasicpub/css/sample.scss @@ -0,0 +1,14 @@ +// To compiled custom site bootstrap from sass, +// run this script from the document root for an example: +// php vendor/bin/pscss view/theme/ussrbasicpub/css/sample.scss view/theme/ussrbasicpub/css/bootstrap-custom.css + +// See https://getbootstrap.com/docs/5.3/customize/sass/ for more infos + +// required import +@import "vendor/twbs/bootstrap/scss/_functions"; + +$primary: #ff0000; // set the $primary variable + + +// set changes +@import "vendor/twbs/bootstrap/scss/bootstrap"; diff --git a/ussrbasicpub/css/sloppy_photos.css b/ussrbasicpub/css/sloppy_photos.css deleted file mode 100644 index 78aedc9..0000000 --- a/ussrbasicpub/css/sloppy_photos.css +++ /dev/null @@ -1,58 +0,0 @@ - -.rotleft1 { --webkit-transform: rotate(-1deg); --moz-transform: rotate(-1deg); --ms-transform: rotate(-1deg); --o-transform: rotate(-1deg); -} - -.rotleft2 { --webkit-transform: rotate(-2deg); --moz-transform: rotate(-2deg); --ms-transform: rotate(-2deg); --o-transform: rotate(-2deg); -} - -.rotleft3 { --webkit-transform: rotate(-3deg); --moz-transform: rotate(-3deg); --ms-transform: rotate(-3deg); --o-transform: rotate(-3deg); -} - -.rotleft4 { --webkit-transform: rotate(-4deg); --moz-transform: rotate(-4deg); --ms-transform: rotate(-4deg); --o-transform: rotate(-4deg); -} - - -.rotright1 { --webkit-transform: rotate(1deg); --moz-transform: rotate(1deg); --ms-transform: rotate(1deg); --o-transform: rotate(1deg); -} - -.rotright2 { --webkit-transform: rotate(2deg); --moz-transform: rotate(2deg); --ms-transform: rotate(2deg); --o-transform: rotate(2deg); -} - -.rotright3 { --webkit-transform: rotate(3deg); --moz-transform: rotate(3deg); --ms-transform: rotate(3deg); --o-transform: rotate(3deg); -} - -.rotright4 { --webkit-transform: rotate(4deg); --moz-transform: rotate(4deg); --ms-transform: rotate(4deg); --o-transform: rotate(4deg); -} - diff --git a/ussrbasicpub/css/style.css b/ussrbasicpub/css/style.css index 5847f99..0d06c01 100644 --- a/ussrbasicpub/css/style.css +++ b/ussrbasicpub/css/style.css @@ -7,21 +7,13 @@ /* bootstrap variables */ -:root { - --bs-border-radius: $radius; - --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'); } @@ -34,10 +26,6 @@ background-color: $nav_bg_dark !important; } -.btn { - --bs-btn-border-radius: $radius; -} - /* generals */ @@ -46,13 +34,10 @@ html { } body { - font-size: 0.9rem; background-color: var(--hz-body-bg); background-image: var(--hz-body-bg-image); background-attachment: fixed; background-size: cover; - color: var(--bs-body-color); - margin: 0; } aside#region_1 { @@ -87,30 +72,31 @@ main { height: 100vh; background: rgba(0, 0, 0, .3); cursor: pointer; + z-index: 1010; } h1, .h1 { - font-size: 2rem; + font-size: 2.1rem; } h2, .h2 { - font-size: 1.6rem; + font-size: 1.7rem; } h3, .h3 { - font-size: 1.2rem; + font-size: 1.3rem; } h4, .h4 { - font-size: 1.05rem; + font-size: 1.15rem; } h5, .h5 { - font-size: 0.9rem; + font-size: 1rem; } h6, .h6 { - font-size: 0.75rem; + font-size: 0.85rem; } .navbar-banner { @@ -155,7 +141,7 @@ a:focus, } input, optgroup, select, textarea { - font-size: 0.9rem !important; + font-size: 1rem !important; } input[type=text], textarea { @@ -164,24 +150,15 @@ input[type=text], textarea { color: var(--bs-body-color); } -.selected-doco-nav { - font-weight: bold; - text-shadow: 2px 2px 3px lightgray; -} - -#doco-content img { - width: 100%; -} - -#help-content pre code { - overflow-x: auto; - white-space: pre; -} - .heart { color: #FF0000; } +#toast-container { + z-index: 1060; + width: 300px; +} + #powered-by { font-size: 0.5rem; position: absolute; @@ -459,7 +436,7 @@ footer { .photo, .contact-block-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } #side-bar-photos-albums { @@ -472,7 +449,7 @@ footer { .profile-match-photo img, .directory-photo-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } .profile-match-photo img { @@ -722,29 +699,9 @@ nav .acpopup { color:#cc0000; } -/* popup notifications */ -div.jGrowl div.notice { - background: #511919 url("../../../../images/icons/48/notice.png") no-repeat 5px center; - color: #ffffff; - padding-left: 58px; -} -div.jGrowl div.info { - background: #364e59 url("../../../../images/icons/48/info.png") no-repeat 5px center; - color: #ffffff; - padding-left: 58px; -} -#jGrowl.top-right { - top: 4.5rem; - right: .25rem; -} - -div.jGrowl div.jGrowl-notification { - min-height: 60px; -} - .jslider .jslider-scale ins { color: #333; - font-size: 0.9rem; + font-size: 1rem; width: 100px; text-align: center; } @@ -810,7 +767,7 @@ div.jGrowl div.jGrowl-notification { .shared_header img { border-radius: var(--bs-border-radius); - margin-right: .75rem; + margin-right: .5rem; } .tag1 { @@ -873,28 +830,27 @@ margin-right: 50px; .generic-icons, a .generic-icons { - font-size: 1rem; - margin-right: 0.5rem; + font-size: 1.2rem; } .generic-icons-right { - font-size: 1rem; + font-size: 1.2rem; margin-left: 0.5rem; } .generic-icons-nav { - font-size: 1rem; - margin-right: 7px; + font-size: 1.2rem; + margin-right: 0.5rem; } .admin-icons { - font-size: 1.2em; - margin-right: 7px; + font-size: 1.2rem; + margin-right: 0.5rem; } .drop-icons, a .drop-icons { - font-size: 1rem; + font-size: 1.2rem; text-decoration: none; cursor: pointer; } @@ -924,25 +880,6 @@ a .drop-icons:hover { list-style-type: none; } -table { - border-spacing: 2px; - max-width: 100%; -} - -th,td { - padding: 3px; -} - -#channels > tbody > tr > td, #users > tbody > tr > td { - max-width: 19.4em; - overflow: hidden; -} - -/* mail */ - -img.mail-conv-sender-photo { - border-radius: var(--bs-border-radius); -} /* jot */ @@ -958,21 +895,23 @@ img.mail-conv-sender-photo { font-weight: bold; } +.jot-icons, +.comment-icon { + font-size: 1.2rem; +} + #profile-jot-wrapper { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); - } - - #profile-jot-text::-webkit-input-placeholder { - font-size: 1.2rem; + font-size: 1.3rem; } #profile-jot-text::-moz-placeholder { - font-size: 1.2rem; + font-size: 1.3rem; } #profile-jot-text:focus::-webkit-input-placeholder { @@ -1013,6 +952,10 @@ img.mail-conv-sender-photo { margin-top: 2em; } +.wall-item-pinned i { + transform: rotate(45deg); +} + .wall-item-content-wrapper { background-color: var(--bs-tertiary-bg); } @@ -1035,6 +978,19 @@ img.mail-conv-sender-photo { border-top: 1px dashed #adadad; } + +.hide-comments-icon, +.divgrow-showmore-icon { + font-size: $font_size; +} + +.divgrow-showmore-label, +.hide-comments-label { + text-transform: uppercase; + font-size: 0.7rem; +} + + .wall-item-comment-wrapper { padding: 7px 10px; background-color: var(--bs-tertiary-bg); @@ -1061,14 +1017,6 @@ img.mail-conv-sender-photo { height: $reply_photo; } -.wall-item-content, -.mail-conv-body, -.page-body, -.chat-item-text, -.chat-item-text-self { - font-size: 1rem; -} - .comment-edit-text { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); @@ -1119,7 +1067,7 @@ img.mail-conv-sender-photo { } .abook-self { - background-color: #ffdddd; + background-color: var(--bs-light-bg-subtle); } .abook-pending-contact, .abook-permschange { @@ -1155,16 +1103,16 @@ img.mail-conv-sender-photo { } .menu-img-2 { - height: 2.3rem; - width: 2.3rem; + height: 2.5rem; + width: 2.5rem; margin-right: .5rem; border-radius: var(--bs-border-radius); float: left; } .menu-img-1 { - height: 1.1rem; - width: 1.1rem; + height: 1.3rem; + width: 1.3rem; border-radius: var(--bs-border-radius); } @@ -1196,9 +1144,18 @@ img.mail-conv-sender-photo { .generic-content-wrapper { background-color: var(--bs-body-bg); - border: 1px solid var(--bs-border-color); + border: 1px solid var(--bs-light-border-subtle); border-radius: var(--bs-border-radius); margin-bottom: 1.5rem; + font-size: 1.1rem; +} + +.generic-content-wrapper.is-contained { + border: 1px solid var(--bs-primary-border-subtle); +} + +.generic-content-wrapper.is-new { + border-top: 2px solid var(--bs-primary); } .section-title-wrapper { @@ -1236,32 +1193,32 @@ img.mail-conv-sender-photo { .section-content-success-wrapper { padding: 21px 10px; - color: #155724; - background-color: #d4edda; + color: var(--bs-success-text-emphasis); + background-color: var(--bs-success-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-info-wrapper { padding: 21px 10px; - color: #0c5460; - background-color: #d1ecf1; + color: var(--bs-info-text-emphasis); + background-color: var(--bs-info-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-warning-wrapper { padding: 21px 10px; - color: #856404; - background-color: #fff3cd; + color: var(--bs-warning-text-emphasis); + background-color: var(--bs-warning-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-danger-wrapper { padding: 21px 10px; - color: #721c24; - background-color: #f8d7da; + color: var(--bs-danger-text-emphasis); + background-color: var(--bs-danger-bg-subtle); border-bottom: 3px solid var(--bs-body-bg); text-align: center; } @@ -1295,17 +1252,23 @@ img.mail-conv-sender-photo { } main.fullscreen { + position: fixed; + top: 0px; left: 0px; - width: 100%; + width: 100vw; height: 100vh; - max-width: none; + z-index: 1020; + overflow: auto; } main.fullscreen .generic-content-wrapper { - position: absolute; - width: 100%; + position: fixed; top: 0px; left: 0px; + width: 100vw; + height: 100vh; + z-index: 1020; + overflow: auto; border-radius: 0px; border-width: 0px; } @@ -1354,12 +1317,7 @@ main.fullscreen .section-content-wrapper-np { /* bootstrap overrides */ -.form-control { - border-radius: $radius; -} - blockquote { - font-size: 1rem; font-style: italic; border-left: 3px solid var(--bs-border-color); padding: 1em 0px 1em 1.5em; @@ -1419,15 +1377,19 @@ dl.bb-dl > dd > li { } .bootstrap-tagsinput .tag:before { - /* Copied from fa-asterisk, is there a better way to do it? */ - font-family: ForkAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - content:"\f069 "; + font-family: bootstrap-icons; + font-size: 0.5rem; + content: "\F151"; + margin-right: .25rem; } -/* Modified original CSS to match input in Ussrbasicpub */ +.bootstrap-tagsinput .tag [data-role="remove"]:after { + font-family: bootstrap-icons; + font-size: 0.5rem; + content: "\F659"; +} + +/* Modified original CSS to match input in Ussrbasic */ .jothidden .bootstrap-tagsinput { border: 0px solid transparent; margin-bottom: 0px; @@ -1447,7 +1409,6 @@ dl.bb-dl > dd > li { .bootstrap-tagsinput input { height: 2.5rem; margin: 0; - max-width: 30%; } .bootstrap-tagsinput { @@ -1675,414 +1636,9 @@ dl.bb-dl > dd > li { } } -/* disable reashred content streching */ -.reshared-content img { - width: auto; -} - -/* hide theme switch */ -#theme-switch { - visibility: hidden; -} - -/* disable likes */ -.wall-item-like { - visibility: hidden; -} -.wall-item-tools-right > .btn-group > .btn:first-child { - visibility: hidden; -} - -/* disable minus icon */ -.oneway-overlay, .fa-minus-circle { - visibility: hidden; -} - -/* greengrey colors */ -body { - background-color: #383c4a; - color: #dddddd; -} - -.generic-content-wrapper { - background-color: #383c4a; -} - -.section-subtitle-wrapper, -.collapse, -.show, -.section-title-wrapper { - background-color: #404552; - border-bottom-color: #2b2b2b; -} - -.vcard, .h-card, -.widget, .settings-widget, .section-subtitle-wrapper { - background-color: #4B5162; - border-bottom: #383c4a; - border-left: #383c4a; - border-right: #383c4a; - border-top: #383c4a; -} - -.fn { - color: #ffffff; -} - -.contextual-help-content, -.section-content-tools-wrapper, .section-content-wrapper { - background-color: #353945; - border-bottom: #383c4a; - border-left: #383c4a; - border-right: #383c4a; - border-top: #383c4a; -} - -a:link { - color: #63bd65; -} -.zinlcxmi { - color: #63bd65; -} - -a:visited { - color: #87ab63; -} - -a:hover, a:active { - color: #3fec43; -} - -div.profile-match-wrapper > div > a { - color: #ffffff; -} - -.btn, .btn-primary { - background-color: #5c6b5b; - border-bottom-color: #47741c; - border-left-color: #47741c; - border-right-color: #47741c; - border-top-color: #47741c; - color: #ffffff !important; -} - -.btn:hover, .btn-primary:active { - background-color: #4aae40; - border-bottom-color: #29b136; - border-left-color: #29b136; - border-right-color: #29b136; - border-top-color: #29b136; -} - -.bg-dark, .navbar-collapse { - background-color: #2e323e !important; -} - -.form-group:active, .checkbox:hover { - color: #41d24f; -} - -.nav-link.active { - background-color: #315a2b !important; -} - -.list-group-item { - background-color: #4B5162; - border-bottom: #383c4a; - border-left: #383c4a; - border-right: #383c4a; - border-top: #383c4a; - color: #9e9e9e; - border: 1px solid #383c4a; -} - -.list-group-item:active { - color: #f4f4f4 !important; -} - -.text-dark { - color: #bdbdbd !important; -} - -a.text-dark:hover, a.text-dark:active { - color: #f4f4f4 !important; -} - -.contactname { - color: #bdbdbd; -} - -.wall-item-ago, .dropdown-sub-text { - color: #b3b3b3; -} - -.list-group-item.active { - background-color: #315a2b; - border-color: #0c4704; -} - -.form-control, -.form-control:focus, -input[type="text"]:hover, -input[type="text"]:active, -input[type="text"], textarea { - background-color: #2b2b2b; - border-color: #46583f; - color: #cdcdcd; - box-shadow: 0 0 0 .2rem #415240; -} - -.form-group.checkbox:checked, -.form-group.checkbox > div > input:checked + label .onoffswitch-switch { - background-color: #315a2b; -} - -.form-group.checkbox:hover label { - color: #315a2b; -} - -.dropdown-item.active { - background-color: #315a2b; -} - -.dropdown-divider { - border-top: 1px solid #3e3e3e; -} - -.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 { - background-color: #4b5162; - color: #b3b3b3; -} - -a.dropdown-item { - color: #f3f3f3; -} - -.profile-match-wrapper { - border-top: 0px solid #eee; - border-left: 0px solid #eee; -} - -.fakelink { - color: #87ab63; -} - -a:hover, a:focus, .fakelink:hover, .fakelink:focus { - color: #3fec43; -} - -.drop-icons { - color: #ff0000; -} - -.drop-icons, a .drop-icons { - color: #bd0000; -} - -.section-content-wrapper-np { - background-color: #404552; -} - -.atoken-index-row:hover td, .chatroom-index-row:hover td, .group-index-row:hover td, .wikis-index-row:hover td, .locs-index-row:hover td, [id^="cloud-index-"]:hover td, .cloud-index-active { - background-color: #4b5162; -} .generic-content-wrapper-styled { - background-color: #404552; -} - -#profile-jot-wrapper, -.bootstrap-tagsinput { - background-color: #2b2b2b; -} - -.wall-item-content-wrapper { - background-color: #404552; -} - -.item-highlight { - border-left: 0.2rem solid #00ff00; -} - -.wall-item-comment-wrapper-wc, -.hide-comments-outer, -.wall-item-comment-wrapper, -.wall-item-content-wrapper.comment { - background-color: #4b5162; -} - -.wall-item-head-new { - border-top: 0.2rem solid #31570b; -} - -.wall-item-comment-wrapper { - border-top: 3px solid #454853; -} - -blockquote { - border-left: 3px solid #344136; -} - -.hide-comments-outer { - border-top-color: #87ab63; -} - -.badge-warning { - background-color: #036811; - color: #dddddd; -} - -.divgrow-showmore { - border-top: 1px dashed #87ab63; -} - -.comment-edit-text { - border: 1px solid #004400; -} - -#doco-content h3 { - border-bottom: #87ab63 3px solid; -} - -.section-content-info-wrapper { - color: #2aa650; - background-color: #17221b; - border-bottom: 3px solid #060d08; -} - -.spinner.s, .spinner.m, .spinner.l { - color: #13c613; - border-top: .2rem solid #02c102; - border-left: .2rem solid #123312; - border-right: .2rem solid #123312; - border-bottom: .2rem solid #123312; -} - -.wall-event-item { - background-color: #123312; -} - -.fs { - background-color: #404552; -} - -.bg-primary { - background-color: #315a2b !important; -} - -.modal-content { - background-color: #171d16; -} - -.close { - color: #989898; -} - -.wall-item-conv { - background-color: #404552; - border-top: 1px solid #2e323e; -} - -.dropdown-menu.textcomplete-dropdown { - background-color: #8d9a87; -} - -.notification.notification-forum { - color: #63bd65; -} - -.wall-photo-item { - background-color: #315a2b; -} - -.directory-item .divgrow-showmore { - background-color: #353945; -} - -.vcard-header:hover, .vcard-header.active { - background-color: #4B5162; -} - -.alert-info { - color: #dddddd; - border-color: #2b2b2b; -} - -.conv-participants { - color: #539b55; -} - -#photo-view-wrapper { - background-color: #4B5162; -} - -.table { - color: #dddccc; -} - -#upgrade_info_aside { - border-color: #383c4a !important; -} - -.text-muted { - color: #a6a6b9 !important; -} - -.card { - background-color: #434753 !important; -} - -.border { - border: 1px solid #415240 !important; -} - -.item-category, .item-category > .text-dark { - color: #222222 !important; -} - -.nav-link:focus, .nav-link:hover { - color: #eeeeee; -} - -.nav-link.active > .fa-fw { - color: #eeeeee; -} - -.nav-tabs { - border-bottom: 1px solid #415240 !important; -} - -.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { - border-top-color: #444444; - border-right-color: #444444; - border-bottom-color: #444444; - border-left-color: #444444; -} - -.generic-content-wrapper { - border: 1px solid #444444; -} - -#notifications { - background-color: #383c4a; -} - -[data-bs-theme="light"] .navbar.bg-body-tertiary { - background-color: #2e323e !important; -} - -[data-bs-theme="dark"] .navbar.bg-body-tertiary { - background-color: #2e323e !important; -} - -.navbar { - --bs-navbar-color: #dddddd; -} - -.navbar-banner { - color: #dddddd; -} - -.bg-body-secondary { - --bs-bg-opacity: 0; + background-color: #aa2b2b; + padding: 10px; + border-radius: var(--bs-border-radius); } diff --git a/ussrbasicpub/js/ussrbasicpub.js b/ussrbasicpub/js/ussrbasicpub.js index 3bf36b8..ef004c3 100644 --- a/ussrbasicpub/js/ussrbasicpub.js +++ b/ussrbasicpub/js/ussrbasicpub.js @@ -6,239 +6,251 @@ let ussrbasicpub_dark_mode = localStorage.getItem('ussrbasicpub_dark_mode'); let ussrbasicpub_theme_color = localStorage.getItem('ussrbasicpub_theme_color'); if (ussrbasicpub_dark_mode == 1) { - $('html').attr('data-bs-theme', 'dark'); + document.documentElement.setAttribute('data-bs-theme', 'dark'); } if (ussrbasicpub_dark_mode == 0) { - $('html').attr('data-bs-theme', 'light'); + document.documentElement.setAttribute('data-bs-theme', 'light'); } if (ussrbasicpub_theme_color) { - $('meta[name=theme-color]').attr('content', ussrbasicpub_theme_color); + document.querySelector('meta[name=theme-color]').setAttribute('content', ussrbasicpub_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; - } - $('
').prependTo('body'); - }); - } +document.addEventListener('DOMContentLoaded', function () { + // provide a fake progress bar for pwa standalone mode + if (window.matchMedia('(display-mode: standalone)').matches) { + window.addEventListener('beforeunload', function () { + if (!document.querySelector('.page-loader')) { + let loader = document.createElement('div'); + loader.classList.add('bg-primary', 'page-loader'); + document.body.prepend(loader); + } + }); + } - if (ussrbasicpub_dark_mode == 1) { - $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); - $('[data-bs-theme="light"]').attr('data-bs-theme', 'dark'); - } - if (ussrbasicpub_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 (ussrbasicpub_dark_mode == 1) { + document.getElementById('theme-switch-icon').classList.remove('bi-moon'); + document.getElementById('theme-switch-icon').classList.add('bi-sun'); + document.querySelector('[data-bs-theme="light"]').setAttribute('data-bs-theme', 'dark'); + } + if (ussrbasicpub_dark_mode == 0) { + document.getElementById('theme-switch-icon').classList.remove('bi-sun'); + document.getElementById('theme-switch-icon').classList.add('bi-moon'); + let darkElements = document.querySelectorAll('[data-bs-theme="dark"]:not(nav)'); + darkElements.forEach(el => el.setAttribute('data-bs-theme', 'light')); + } - if (ussrbasicpub_theme_color != $('nav').css('background-color')) { - $('meta[name=theme-color]').attr('content', $('nav').css('background-color')); - localStorage.setItem('ussrbasicpub_theme_color', $('nav').css('background-color')); - } + let navBackgroundColor = document.querySelector('nav').style.backgroundColor; + if (ussrbasicpub_theme_color !== navBackgroundColor) { + document.querySelector('meta[name=theme-color]').setAttribute('content', navBackgroundColor); + localStorage.setItem('ussrbasicpub_theme_color', navBackgroundColor); + } - // CSS3 calc() fallback (for unsupported browsers) - $('body').append(''); - if( $('#css3-calc').width() == 10) { - $(window).resize(function() { - if($(window).width() < 992) { - $('main').css('width', $(window).width() + $('aside').outerWidth() ); - } else { - $('main').css('width', '100%'); - } - }); - } - $('#css3-calc').remove(); // Remove the test element + // CSS3 calc() fallback (for unsupported browsers) + let testElem = document.createElement('div'); + testElem.style.width = 'calc(10px + 10px)'; + testElem.style.display = 'none'; + testElem.id = 'css3-calc'; + document.body.appendChild(testElem); + + if (testElem.offsetWidth === 10) { + window.addEventListener('resize', function () { + if (window.innerWidth < 992) { + document.querySelector('main').style.width = `${window.innerWidth + document.querySelector('aside').offsetWidth}px`; + } else { + document.querySelector('main').style.width = '100%'; + } + }); + } + testElem.remove(); // Remove the test element - if($(window).width() < 1200) { - $("#right_aside_wrapper").children().detach().appendTo('#left_aside_wrapper'); - $('#notifications_wrapper').addClass('d-none'); - } + if (window.innerWidth < 1200) { + let rightAsideWrapper = document.getElementById("right_aside_wrapper"); + let leftAsideWrapper = document.getElementById("left_aside_wrapper"); + leftAsideWrapper.appendChild(...rightAsideWrapper.children); + document.getElementById('notifications_wrapper').classList.add('d-none'); + } + if (document.getElementById('region_1')) { + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); + } - if (document.querySelector('#region_1')) { - stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); - } + if (document.getElementById('region_3')) { + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); + } - if (document.querySelector('#region_3')) { - stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20); - } + document.querySelectorAll('.usermenu').forEach(function (element) { + element.addEventListener('click', function () { + let navCollapse = document.querySelectorAll('#navbar-collapse-1, #navbar-collapse-2'); + navCollapse.forEach(function (nav) { + if (nav.classList.contains('show')) { + nav.classList.remove('show'); + } + }); + }); + }); - $('.usermenu').click(function() { - if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){ - $('#navbar-collapse-1, #navbar-collapse-2').removeClass('show'); - } - }); + document.getElementById('theme-switch').addEventListener('click', function () { + let html = document.documentElement; + if (html.getAttribute('data-bs-theme') === 'dark') { + let nav = document.querySelector('nav'); + if (nav.dataset.bsTheme === 'dark') { + document.querySelectorAll('[data-bs-theme="dark"]:not(nav)').forEach(function (el) { + el.setAttribute('data-bs-theme', 'light'); + }); + } else { + document.querySelector('[data-bs-theme="dark"]').setAttribute('data-bs-theme', 'light'); + } + localStorage.setItem('ussrbasicpub_dark_mode', 0); + document.getElementById('theme-switch-icon').classList.remove('bi-sun'); + document.getElementById('theme-switch-icon').classList.add('bi-moon'); + } else { + document.querySelectorAll('[data-bs-theme="light"]').forEach(function (el) { + el.setAttribute('data-bs-theme', 'dark'); + }); + localStorage.setItem('ussrbasicpub_dark_mode', 1); + document.getElementById('theme-switch-icon').classList.remove('bi-moon'); + document.getElementById('theme-switch-icon').classList.add('bi-sun'); + } + document.querySelector('meta[name=theme-color]').setAttribute('content', document.querySelector('nav').style.backgroundColor); + localStorage.setItem('ussrbasicpub_theme_color', document.querySelector('nav').style.backgroundColor); + }); - $('#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('ussrbasicpub_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('ussrbasicpub_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('ussrbasicpub_theme_color', $('nav').css('background-color')); - }); + document.getElementById('menu-btn').addEventListener('click', function () { + let navCollapse = document.getElementById('navbar-collapse-1'); + if (navCollapse.classList.contains('show')) { + navCollapse.classList.remove('show'); + } + }); + document.querySelectorAll('.notifications-btn').forEach(function (element) { + element.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + let navCollapse = document.getElementById('navbar-collapse-2'); + if (navCollapse.classList.contains('show')) { + navCollapse.classList.remove('show'); + } + }); + }); - $('#menu-btn').click(function() { - if($('#navbar-collapse-1').hasClass('show')){ - $('#navbar-collapse-1').removeClass('show'); - } - }); + $("input[data-role=cat-tagsinput]").tagsinput({ + tagClass: 'badge rounded-pill bg-warning text-dark' + }); - $('.notifications-btn').click(function(e) { - e.preventDefault(); - e.stopPropagation(); - if($('#navbar-collapse-2').hasClass('show')){ - $('#navbar-collapse-2').removeClass('show'); - } - }); + document.querySelectorAll('a.disabled').forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + }); + }); - $("input[data-role=cat-tagsinput]").tagsinput({ - tagClass: 'badge rounded-pill bg-warning text-dark' - }); + let doctitle = document.title; + function checkNotify() { + let notifyUpdateElem = document.getElementById('notify-update'); + if (notifyUpdateElem && notifyUpdateElem.innerHTML !== '') { + document.title = '(' + notifyUpdateElem.innerHTML + ') ' + doctitle; + } else { + document.title = doctitle; + } + } - $('a.disabled').click(function(e) { - e.preventDefault(); - e.stopPropagation(); - }); + setInterval(checkNotify, 10 * 1000); - var doctitle = document.title; - function checkNotify() { - var notifyUpdateElem = document.getElementById('notify-update'); - if(notifyUpdateElem !== null) { - if(notifyUpdateElem.innerHTML !== "") - document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle; - else - document.title = doctitle; - } - } - setInterval(function () {checkNotify();}, 10 * 1000); + let touch_start = null; + let touch_max = window.innerWidth / 10; - var touch_start = null; - var touch_max = window.innerWidth / 10; - - window.addEventListener('touchstart', function(e) { - if (e.touches.length === 1){ - //just one finger touched - touch_start = e.touches.item(0).clientX; - if (touch_start < touch_max) { - $('body').css('overflow-y', 'hidden'); - } - } - else { - //a second finger hit the screen, abort the touch - touch_start = null; - } - }); - - window.addEventListener('touchend', function(e) { - $('body').css('overflow-y', ''); - - let touch_offset = 30; //at least 30px are a swipe - if (touch_start) { - //the only finger that hit the screen left it - let touch_end = e.changedTouches.item(0).clientX; - - if (touch_end > (touch_start + touch_offset)) { - //a left -> right swipe - if (touch_start < touch_max) { - toggleAside(); - } - } - if (touch_end < (touch_start - touch_offset)) { - //a right -> left swipe - } - } - }); + window.addEventListener('touchstart', function (e) { + if (e.touches.length === 1) { + touch_start = e.touches[0].clientX; + if (touch_start < touch_max) { + document.body.style.overflowY = 'hidden'; + } + } else { + touch_start = null; + } + }); + window.addEventListener('touchend', function (e) { + document.body.style.overflowY = ''; + let touch_offset = 30; // at least 30px are a swipe + if (touch_start) { + let touch_end = e.changedTouches[0].clientX; + if (touch_end > (touch_start + touch_offset)) { + if (touch_start < touch_max) { + toggleAside(); + } + } + if (touch_end < (touch_start - touch_offset)) { + // a right -> left swipe + } + } + }); }); function setStyle(element, cssProperty) { - for (var property in cssProperty){ - element.style[property] = cssProperty[property]; - } + for (var property in cssProperty) { + element.style[property] = cssProperty[property]; + } } function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + let lastScrollTop = 0; + let stickyElement = document.querySelector(sticky); - var lastScrollTop = 0; - var sticky = document.querySelector(sticky); + if (!stickyElement) { + return; + } - if (!sticky) { - return; - } + let stickyHeight = stickyElement.getBoundingClientRect().height; + let stickyTopElement = document.querySelector(stickyTop); + let content = document.querySelector(container); + let diff = window.innerHeight - stickyHeight; - var stickyHeight = sticky.getBoundingClientRect().height; - var stickyTop = document.querySelector(stickyTop); - var content = document.querySelector(container); - var diff = window.innerHeight - stickyHeight; - var h = 0; - var lasth = 0; - var st = window.pageYOffset || document.documentElement.scrollTop; + let h = 0; + let lasth = 0; + let st = window.pageYOffset || document.documentElement.scrollTop; - var resizeObserver = new ResizeObserver(function(entries) { - stickyHeight = sticky.getBoundingClientRect().height; - st = window.pageYOffset || document.documentElement.scrollTop; - diff = window.innerHeight - stickyHeight; - }); + let resizeObserver = new ResizeObserver(function () { + stickyHeight = stickyElement.getBoundingClientRect().height; + st = window.pageYOffset || document.documentElement.scrollTop; + diff = window.innerHeight - stickyHeight; + }); - resizeObserver.observe(sticky); - resizeObserver.observe(content); - - window.addEventListener('scroll', function() { - if(window.innerHeight > stickyHeight + topOffset) { - setStyle(stickyTop, { height: 0 + 'px' }); - setStyle(sticky, { position: 'sticky', top: topOffset + 'px'}); - } - else { - st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" - if (st > lastScrollTop){ - // downscroll code - setStyle(stickyTop, { height: lasth + 'px' }); - setStyle(sticky, { position: 'sticky', top: Math.round(diff) - bottomOffset + 'px', bottom: '' }); - } else { - // upscroll code - h = sticky.getBoundingClientRect().top - content.getBoundingClientRect().top; - if(Math.round(stickyTop.getBoundingClientRect().height) === lasth) { - setStyle(stickyTop, { height: Math.round(h) + 'px' }); - } - lasth = Math.round(h); - setStyle(sticky, { position: 'sticky', top: '', bottom: Math.round(diff) - topOffset + 'px' }); - } - lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling - } - }, false); + resizeObserver.observe(stickyElement); + resizeObserver.observe(content); + window.addEventListener('scroll', function () { + if (window.innerHeight > stickyHeight + topOffset) { + setStyle(stickyTopElement, { height: '0px' }); + setStyle(stickyElement, { position: 'sticky', top: `${topOffset}px` }); + } else { + st = window.pageYOffset || document.documentElement.scrollTop; + if (st > lastScrollTop) { + setStyle(stickyTopElement, { height: `${lasth}px` }); + setStyle(stickyElement, { position: 'sticky', top: `${Math.round(diff) - bottomOffset}px`, bottom: '' }); + } else { + h = stickyElement.getBoundingClientRect().top - content.getBoundingClientRect().top; + if (Math.round(stickyTopElement.getBoundingClientRect().height) === lasth) { + setStyle(stickyTopElement, { height: `${Math.round(h)}px` }); + } + lasth = Math.round(h); + setStyle(stickyElement, { position: 'sticky', top: '', bottom: `${Math.round(diff) - topOffset}px` }); + } + lastScrollTop = st <= 0 ? 0 : st; + } + }, false); } function makeFullScreen(full) { - if(typeof full=='undefined' || full == true) { - $('main').addClass('fullscreen'); - $('header, nav, aside, #fullscreen-btn').attr('style','display:none !important'); - $('#inline-btn').show(); - } - else { - $('main').removeClass('fullscreen'); - $('header, nav, aside, #fullscreen-btn').show(); - $('#inline-btn').hide(); - } + if (typeof full === 'undefined' || full === true) { + document.querySelector('main').classList.add('fullscreen'); + document.getElementById('fullscreen-btn').style.display = 'none'; + document.getElementById('inline-btn').style.display = 'inline-block'; + } else { + document.querySelector('main').classList.remove('fullscreen'); + document.getElementById('fullscreen-btn').style.display = ''; + document.getElementById('inline-btn').style.display = 'none'; + } } - - diff --git a/ussrbasicpub/php/config.php b/ussrbasicpub/php/config.php index fc270cb..7022b00 100644 --- a/ussrbasicpub/php/config.php +++ b/ussrbasicpub/php/config.php @@ -2,6 +2,9 @@ namespace Zotlabs\Theme; +use ScssPhp\ScssPhp\Compiler; +use ScssPhp\ScssPhp\OutputStyle; + class UssrbasicpubConfig { function get_schemas() { @@ -36,16 +39,16 @@ class UssrbasicpubConfig { return; } - $arr = array(); + $arr['primary_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'primary_color'); + $arr['success_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'success_color'); + $arr['info_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'info_color'); + $arr['warning_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'warning_color'); + $arr['danger_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'danger_color'); $arr['dark_mode'] = get_pconfig(local_channel(),'ussrbasicpub', 'dark_mode'); $arr['navbar_dark_mode'] = get_pconfig(local_channel(),'ussrbasicpub', 'navbar_dark_mode'); $arr['narrow_navbar'] = get_pconfig(local_channel(),'ussrbasicpub', 'narrow_navbar' ); $arr['nav_bg'] = get_pconfig(local_channel(),'ussrbasicpub', 'nav_bg' ); $arr['nav_bg_dark'] = get_pconfig(local_channel(),'ussrbasicpub', 'nav_bg_dark' ); - $arr['link_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'link_color' ); - $arr['link_color_dark'] = get_pconfig(local_channel(),'ussrbasicpub', 'link_color_dark' ); - $arr['link_hover_color'] = get_pconfig(local_channel(),'ussrbasicpub', 'link_hover_color' ); - $arr['link_hover_color_dark'] = get_pconfig(local_channel(),'ussrbasicpub', 'link_hover_color_dark' ); $arr['bgcolor'] = get_pconfig(local_channel(),'ussrbasicpub', 'background_color' ); $arr['bgcolor_dark'] = get_pconfig(local_channel(),'ussrbasicpub', 'background_color_dark' ); $arr['background_image'] = get_pconfig(local_channel(),'ussrbasicpub', 'background_image' ); @@ -65,15 +68,99 @@ class UssrbasicpubConfig { } if (isset($_POST['ussrbasicpub-settings-submit'])) { + if (isset($_POST['ussrbasicpub_primary_color']) || isset($_POST['ussrbasicpub_radius'])) { + + $primary_color = ''; + $success_color = ''; + $info_color = ''; + $warning_color = ''; + $danger_color = ''; + $radius = floatval($_POST['ussrbasicpub_radius']); + + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasicpub_primary_color'])) { + $primary_color = $_POST['ussrbasicpub_primary_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasicpub_success_color'])) { + $success_color = $_POST['ussrbasicpub_success_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasicpub_info_color'])) { + $info_color = $_POST['ussrbasicpub_info_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasicpub_warning_color'])) { + $warning_color = $_POST['ussrbasicpub_warning_color']; + } + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['ussrbasicpub_danger_color'])) { + $danger_color = $_POST['ussrbasicpub_danger_color']; + } + + if ($primary_color || $success_color || $info_color || $warning_color || $danger_color || $radius) { + + try { + $cache_dir = 'store/[data]/[scss]/'; + if(!is_dir($cache_dir)) { + os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true); + } + + $options = [ + 'cacheDir' => $cache_dir, + 'prefix' => 'ussrbasicpub_', + 'forceRefresh' => false + ]; + + $compiler = new Compiler($options); + $compiler->setImportPaths('vendor/twbs/bootstrap/scss'); + $compiler->setOutputStyle(OutputStyle::COMPRESSED); + + // Set Variables + if ($primary_color) { + $variables['$primary'] = $primary_color; + } + if ($success_color) { + $variables['$success'] = $success_color; + } + if ($info_color) { + $variables['$info'] = $info_color; + } + if ($warning_color) { + $variables['$warning'] = $warning_color; + } + if ($danger_color) { + $variables['$danger'] = $danger_color; + } + if ($radius) { + $variables['$border-radius'] = $radius . 'rem'; + $variables['$border-radius-sm'] = $radius/1.5 . 'rem'; + $variables['$border-radius-lg'] = $radius*1.333 . 'rem'; + $variables['$border-radius-xl'] = $radius*2.666 . 'rem'; + $variables['$border-radius-xxl'] = $radius*5.333 . 'rem'; + } + + // Replace Bootstrap Variables with Customizer Variables + $compiler->replaceVariables($variables); + + $bs = $compiler->compileString('@import "bootstrap.scss";'); + + set_pconfig(local_channel(), 'ussrbasicpub', 'bootstrap', $bs->getCss()); + } catch (\Exception $e) { + logger('scssphp: Unable to compile content'); + } + } + else { + set_pconfig(local_channel(), 'ussrbasicpub', 'bootstrap', ''); + } + } + + set_pconfig(local_channel(), 'ussrbasicpub', 'primary_color', $_POST['ussrbasicpub_primary_color']); + set_pconfig(local_channel(), 'ussrbasicpub', 'success_color', $_POST['ussrbasicpub_success_color']); + set_pconfig(local_channel(), 'ussrbasicpub', 'info_color', $_POST['ussrbasicpub_info_color']); + set_pconfig(local_channel(), 'ussrbasicpub', 'warning_color', $_POST['ussrbasicpub_warning_color']); + set_pconfig(local_channel(), 'ussrbasicpub', 'danger_color', $_POST['ussrbasicpub_danger_color']); + set_pconfig(local_channel(), 'ussrbasicpub', 'narrow_navbar', $_POST['ussrbasicpub_narrow_navbar']); set_pconfig(local_channel(), 'ussrbasicpub', 'navbar_dark_mode', $_POST['ussrbasicpub_navbar_dark_mode']); set_pconfig(local_channel(), 'ussrbasicpub', 'dark_mode', $_POST['ussrbasicpub_dark_mode']); set_pconfig(local_channel(), 'ussrbasicpub', 'nav_bg', $_POST['ussrbasicpub_nav_bg']); set_pconfig(local_channel(), 'ussrbasicpub', 'nav_bg_dark', $_POST['ussrbasicpub_nav_bg_dark']); - set_pconfig(local_channel(), 'ussrbasicpub', 'link_color', $_POST['ussrbasicpub_link_color']); - set_pconfig(local_channel(), 'ussrbasicpub', 'link_color_dark', $_POST['ussrbasicpub_link_color_dark']); - set_pconfig(local_channel(), 'ussrbasicpub', 'link_hover_color', $_POST['ussrbasicpub_link_hover_color']); - set_pconfig(local_channel(), 'ussrbasicpub', 'link_hover_color_dark', $_POST['ussrbasicpub_link_hover_color_dark']); set_pconfig(local_channel(), 'ussrbasicpub', 'background_color', $_POST['ussrbasicpub_background_color']); set_pconfig(local_channel(), 'ussrbasicpub', 'background_color_dark', $_POST['ussrbasicpub_background_color_dark']); set_pconfig(local_channel(), 'ussrbasicpub', 'background_image', $_POST['ussrbasicpub_background_image']); @@ -84,6 +171,9 @@ class UssrbasicpubConfig { set_pconfig(local_channel(), 'ussrbasicpub', 'top_photo', $_POST['ussrbasicpub_top_photo']); set_pconfig(local_channel(), 'ussrbasicpub', 'reply_photo', $_POST['ussrbasicpub_reply_photo']); set_pconfig(local_channel(), 'ussrbasicpub', 'advanced_theming', $_POST['ussrbasicpub_advanced_theming']); + + // This is used to refresh the cache + set_pconfig(local_channel(), 'system', 'style_update', time()); } } @@ -103,24 +193,25 @@ class UssrbasicpubConfig { '$dark' => t('Dark style'), '$light' => t('Light style'), '$common' => t('Common settings'), + '$primary_color' => array('ussrbasicpub_primary_color', t('Primary theme color'), $arr['primary_color'], ' ' . t('Current color, leave empty for default')), + '$success_color' => array('ussrbasicpub_success_color', t('Success theme color'), $arr['success_color'], ' ' . t('Current color, leave empty for default')), + '$info_color' => array('ussrbasicpub_info_color', t('Info theme color'), $arr['info_color'], ' ' . t('Current color, leave empty for default')), + '$warning_color' => array('ussrbasicpub_warning_color', t('Warning theme color'), $arr['warning_color'], ' ' . t('Current color, leave empty for default')), + '$danger_color' => array('ussrbasicpub_danger_color', t('Danger theme color'), $arr['danger_color'], ' ' . t('Current color, leave empty for default')), '$dark_mode' => array('ussrbasicpub_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), '$navbar_dark_mode' => array('ussrbasicpub_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('ussrbasicpub_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))), '$nav_bg' => array('ussrbasicpub_nav_bg', t('Navigation bar background color'), $arr['nav_bg']), '$nav_bg_dark' => array('ussrbasicpub_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']), - '$link_color' => array('ussrbasicpub_link_color', t('Link color'), $arr['link_color']), - '$link_color_dark' => array('ussrbasicpub_link_color_dark', t('Dark link color'), $arr['link_color_dark']), - '$link_hover_color' => array('ussrbasicpub_link_hover_color', t('Link hover color'), $arr['link_hover_color']), - '$link_hover_color_dark' => array('ussrbasicpub_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']), '$bgcolor' => array('ussrbasicpub_background_color', t('Set the background color'), $arr['bgcolor']), '$bgcolor_dark' => array('ussrbasicpub_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']), '$background_image' => array('ussrbasicpub_background_image', t('Set the background image'), $arr['background_image']), '$background_image_dark' => array('ussrbasicpub_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']), '$font_size' => array('ussrbasicpub_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')), - '$radius' => array('ussrbasicpub_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')), + '$radius' => array('ussrbasicpub_radius', t('Set radius of corners in rem'), $arr['radius'], t('Leave empty for default radius')), '$converse_width' => array('ussrbasicpub_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')), - '$top_photo' => array('ussrbasicpub_top_photo', t('Set size of conversation author photo'), $arr['top_photo']), - '$reply_photo' => array('ussrbasicpub_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']), + '$top_photo' => array('ussrbasicpub_top_photo', t('Set size of conversation author photo'), $arr['top_photo'], t('Leave empty for default size')), + '$reply_photo' => array('ussrbasicpub_reply_photo', t('Set size of followup author photos'), $arr['reply_photo'], t('Leave empty for default size')), '$advanced_theming' => ['ussrbasicpub_advanced_theming', t('Show advanced settings'), $arr['advanced_theming'], '', [t('No'), t('Yes')]] )); diff --git a/ussrbasicpub/php/style.php b/ussrbasicpub/php/style.php index 3ae90ff..1337a2e 100644 --- a/ussrbasicpub/php/style.php +++ b/ussrbasicpub/php/style.php @@ -1,32 +1,48 @@ $nav_bg, '$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, '$background_image_dark' => $background_image_dark, '$font_size' => $font_size, - '$radius' => $radius, '$converse_width' => $converse_width, '$top_photo' => $top_photo, '$reply_photo' => $reply_photo, @@ -158,8 +135,12 @@ if(file_exists('view/theme/ussrbasicpub/css/style.css')) { '$right_aside_width' => $right_aside_width ); - echo strtr($x, $options); + $o = strtr($x, $options); + + header('Cache-Control: max-age=2592000'); + + echo $bs . $o; } // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. diff --git a/ussrbasicpub/php/theme.php b/ussrbasicpub/php/theme.php index 07fd33a..27c856d 100644 --- a/ussrbasicpub/php/theme.php +++ b/ussrbasicpub/php/theme.php @@ -5,7 +5,7 @@ * * Description: ussr.win public theme based on Hubzilla standard theme * * Version: 2.2 * * MinVersion: 8.9 - * * MaxVersion: 10.0 + * * MaxVersion: 11.0 * * Author: Fabrixxm * * Maintainer: ivan zlax * * Theme_Color: rgb(248, 249, 250) diff --git a/ussrbasicpub/php/theme_init.php b/ussrbasicpub/php/theme_init.php index a77960f..73ef3f0 100644 --- a/ussrbasicpub/php/theme_init.php +++ b/ussrbasicpub/php/theme_init.php @@ -1,10 +1,11 @@ .btn-group > .btn:first-child { + visibility: hidden; +} + +/* disable minus icon */ +.oneway-overlay, .fa-minus-circle { + visibility: hidden; +} + +/* greengrey colors */ +body { + background-color: #383c4a; + color: #dddddd; +} + +.generic-content-wrapper { + background-color: #383c4a; +} + +.section-subtitle-wrapper, +.collapse, +.show, +.section-title-wrapper { + background-color: #404552; + border-bottom-color: #2b2b2b; +} + +.vcard, .h-card, +.widget, .settings-widget, .section-subtitle-wrapper { + background-color: #4B5162; + border-bottom: #383c4a; + border-left: #383c4a; + border-right: #383c4a; + border-top: #383c4a; +} + +.fn { + color: #ffffff; +} + +.contextual-help-content, +.section-content-tools-wrapper, .section-content-wrapper { + background-color: #353945; + border-bottom: #383c4a; + border-left: #383c4a; + border-right: #383c4a; + border-top: #383c4a; +} + +a:link { + color: #63bd65; +} +.zinlcxmi { + color: #63bd65; +} + +a:visited { + color: #87ab63; +} + +a:hover, a:active { + color: #3fec43; +} + +div.profile-match-wrapper > div > a { + color: #ffffff; +} + +.btn, .btn-primary { + background-color: #5c6b5b; + border-bottom-color: #47741c; + border-left-color: #47741c; + border-right-color: #47741c; + border-top-color: #47741c; + color: #ffffff !important; +} + +.btn:hover, .btn-primary:active { + background-color: #4aae40; + border-bottom-color: #29b136; + border-left-color: #29b136; + border-right-color: #29b136; + border-top-color: #29b136; +} + +.bg-dark, .navbar-collapse { + background-color: #2e323e !important; +} + +.form-group:active, .checkbox:hover { + color: #41d24f; +} + +.nav-link.active { + background-color: #315a2b !important; +} + +.list-group-item { + background-color: #4B5162; + border-bottom: #383c4a; + border-left: #383c4a; + border-right: #383c4a; + border-top: #383c4a; + color: #9e9e9e; + border: 1px solid #383c4a; +} + +.list-group-item:active { + color: #f4f4f4 !important; +} + +.text-dark { + color: #bdbdbd !important; +} + +a.text-dark:hover, a.text-dark:active { + color: #f4f4f4 !important; +} + +.contactname { + color: #bdbdbd; +} + +.wall-item-ago, .dropdown-sub-text { + color: #b3b3b3; +} + +.list-group-item.active { + background-color: #315a2b; + border-color: #0c4704; +} + +.form-control, +.form-control:focus, +input[type="text"]:hover, +input[type="text"]:active, +input[type="text"], textarea { + background-color: #2b2b2b; + border-color: #46583f; + color: #cdcdcd; + box-shadow: 0 0 0 .2rem #415240; +} + +.form-group.checkbox:checked, +.form-group.checkbox > div > input:checked + label .onoffswitch-switch { + background-color: #315a2b; +} + +.form-group.checkbox:hover label { + color: #315a2b; +} + +.dropdown-item.active { + background-color: #315a2b; +} + +.dropdown-divider { + border-top: 1px solid #3e3e3e; +} + +.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 { + background-color: #4b5162; + color: #b3b3b3; +} + +a.dropdown-item { + color: #f3f3f3; +} + +.profile-match-wrapper { + border-top: 0px solid #eee; + border-left: 0px solid #eee; +} + +.fakelink { + color: #87ab63; +} + +a:hover, a:focus, .fakelink:hover, .fakelink:focus { + color: #3fec43; +} + +.drop-icons { + color: #ff0000; +} + +.drop-icons, a .drop-icons { + color: #bd0000; +} + +.section-content-wrapper-np { + background-color: #404552; +} + +.atoken-index-row:hover td, .chatroom-index-row:hover td, .group-index-row:hover td, .wikis-index-row:hover td, .locs-index-row:hover td, [id^="cloud-index-"]:hover td, .cloud-index-active { + background-color: #4b5162; +} + +.generic-content-wrapper-styled { + background-color: #404552; +} + +#profile-jot-wrapper, +.bootstrap-tagsinput { + background-color: #2b2b2b; +} + +.wall-item-content-wrapper { + background-color: #404552; +} + +.item-highlight { + border-left: 0.2rem solid #00ff00; +} + +.wall-item-comment-wrapper-wc, +.hide-comments-outer, +.wall-item-comment-wrapper, +.wall-item-content-wrapper.comment { + background-color: #4b5162; +} + +.wall-item-head-new { + border-top: 0.2rem solid #31570b; +} + +.wall-item-comment-wrapper { + border-top: 3px solid #454853; +} + +blockquote { + border-left: 3px solid #344136; +} + +.hide-comments-outer { + border-top-color: #87ab63; +} + +.badge-warning { + background-color: #036811; + color: #dddddd; +} + +.divgrow-showmore { + border-top: 1px dashed #87ab63; +} + +.comment-edit-text { + border: 1px solid #004400; +} + +#doco-content h3 { + border-bottom: #87ab63 3px solid; +} + +.section-content-info-wrapper { + color: #2aa650; + background-color: #17221b; + border-bottom: 3px solid #060d08; +} + +.spinner.s, .spinner.m, .spinner.l { + color: #13c613; + border-top: .2rem solid #02c102; + border-left: .2rem solid #123312; + border-right: .2rem solid #123312; + border-bottom: .2rem solid #123312; +} + +.wall-event-item { + background-color: #123312; +} + +.fs { + background-color: #404552; +} + +.bg-primary { + background-color: #315a2b !important; +} + +.modal-content { + background-color: #171d16; +} + +.close { + color: #989898; +} + +.wall-item-conv { + background-color: #404552; + border-top: 1px solid #2e323e; +} + +.dropdown-menu.textcomplete-dropdown { + background-color: #8d9a87; +} + +.notification.notification-forum { + color: #63bd65; +} + +.wall-photo-item { + background-color: #315a2b; +} + +.directory-item .divgrow-showmore { + background-color: #353945; +} + +.vcard-header:hover, .vcard-header.active { + background-color: #4B5162; +} + +.alert-info { + color: #dddddd; + border-color: #2b2b2b; +} + +.conv-participants { + color: #539b55; +} + +#photo-view-wrapper { + background-color: #4B5162; +} + +.table { + color: #dddccc; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} + +.text-muted { + color: #a6a6b9 !important; +} + +.card { + background-color: #434753 !important; +} + +.border { + border: 1px solid #415240 !important; +} + +.item-category, .item-category > .text-dark { + color: #222222 !important; +} + +.nav-link:focus, .nav-link:hover { + color: #eeeeee; +} + +.nav-link.active > .fa-fw { + color: #eeeeee; +} + +.nav-tabs { + border-bottom: 1px solid #415240 !important; +} + +.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { + border-top-color: #444444; + border-right-color: #444444; + border-bottom-color: #444444; + border-left-color: #444444; +} + +.generic-content-wrapper { + border: 1px solid #444444; +} + +#notifications { + background-color: #383c4a; +} + +[data-bs-theme="light"] .navbar.bg-body-tertiary { + background-color: #2e323e !important; +} + +[data-bs-theme="dark"] .navbar.bg-body-tertiary { + background-color: #2e323e !important; +} + +.navbar { + --bs-navbar-color: #dddddd; +} + +.navbar-banner { + color: #dddddd; +} + +.bg-body-secondary { + --bs-bg-opacity: 0; +} + +.generic-content-wrapper.is-contained { + border: 1px solid #5f6271; +} + +.generic-content-wrapper.is-new { + border-top: 2px solid #63bd65; +} diff --git a/ussrbasicpub/tpl/navbar_default.tpl b/ussrbasicpub/tpl/navbar_default.tpl index 791a027..d4174da 100644 --- a/ussrbasicpub/tpl/navbar_default.tpl +++ b/ussrbasicpub/tpl/navbar_default.tpl @@ -5,7 +5,7 @@
{{$userinfo.name}} - +
{{if $is_owner}}
@@ -20,7 +20,7 @@ {{/if}} {{if $nav.channels}} {{foreach $nav.channels as $chan}} - {{$chan.channel_name}} + {{$chan.channel_name}} {{/foreach}} {{/if}} {{if $nav.profiles}} @@ -59,7 +59,7 @@ {{if $settings_url}} {{/if}} @@ -71,30 +71,32 @@
{{if $nav.help.6}} {{/if}} {{if $localuser || $nav.pubs}} {{/if}}
-
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + {{if $nav.help.6}}
  • - +
    • {{/if}} {{if $localuser || $nav.pubs}} {{/if}} {{if $navbar_apps}} @@ -163,7 +168,7 @@ {{/foreach}} {{/if}}
    @@ -171,8 +176,8 @@
    {{$nav.help.5}}
    -  {{$fulldocs}} - +  {{$fulldocs}} +
    {{/if}} @@ -210,11 +215,11 @@
    {{/if}} - + {{/if}}
    {{if $theme_switch_icon}} - + {{/if}}
    @@ -237,12 +242,13 @@ + {{/if}} {{if $is_owner}} -
    +
    {{$featured_apps}}
    - {{$addapps}} + {{$addapps}}
    {{else}}
    @@ -390,7 +396,7 @@ } }) .done( function() { - $('
    • ').insertBefore('#app-menu'); + $('
    • ').insertBefore('#app-menu'); }); }); @@ -424,7 +430,7 @@ } }) .done( function() { - $('' + app_name + '').appendTo('#app-bin-container'); + $('' + app_name + '').appendTo('#app-bin-container'); }); }); diff --git a/ussrbasicpub/tpl/theme_settings.tpl b/ussrbasicpub/tpl/theme_settings.tpl index 12240a3..61baeb5 100644 --- a/ussrbasicpub/tpl/theme_settings.tpl +++ b/ussrbasicpub/tpl/theme_settings.tpl @@ -5,32 +5,38 @@ {{include file="field_checkbox.tpl" field=$advanced_theming}} {{if $expert}} +
    +

    {{$common}}

    + {{include file="field_colorinput.tpl" field=$primary_color}} + {{include file="field_colorinput.tpl" field=$success_color}} + {{include file="field_colorinput.tpl" field=$info_color}} + {{include file="field_colorinput.tpl" field=$warning_color}} + {{include file="field_colorinput.tpl" field=$danger_color}} + {{include file="field_input.tpl" field=$radius}} + {{include file="field_input.tpl" field=$top_photo}} + {{include file="field_input.tpl" field=$reply_photo}} +

    {{$light}}

    {{include file="field_checkbox.tpl" field=$navbar_dark_mode}} {{include file="field_colorinput.tpl" field=$nav_bg}} {{include file="field_colorinput.tpl" field=$bgcolor}} {{include file="field_colorinput.tpl" field=$background_image}} - {{include file="field_colorinput.tpl" field=$link_color}} - {{include file="field_colorinput.tpl" field=$link_hover_color}}

    {{$dark}}

    {{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}} - -

    {{$common}}

    - {{include file="field_input.tpl" field=$radius}} - {{include file="field_input.tpl" field=$top_photo}} - {{include file="field_input.tpl" field=$reply_photo}} {{/if}} +
    - +