diff --git a/ussrbasic/css/style.css b/ussrbasic/css/style.css index 75690da..4ea15ec 100644 --- a/ussrbasic/css/style.css +++ b/ussrbasic/css/style.css @@ -9,94 +9,96 @@ /* generals */ html { - font-size: $font_size; + font-size: $font_size; } body { - font-size: 0.9rem; - background-color: $bgcolour; - background-image: url('$background_image'); - background-attachment: fixed; - background-size: cover; - color: $font_colour; - margin: 0px; + font-size: 0.9rem; + background-color: $bgcolour; + background-image: url('$background_image'); + background-attachment: fixed; + background-size: cover; + color: $font_colour; + margin: 0px; } -aside { - width: $aside_widthpx; - min-width: $aside_widthpx; - max-width: $aside_widthpx; +aside#region_1 { + border-right: 1px solid transparent; + width: $left_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $left_aside_widthpx; } -aside #region_1 { - border-right: 1px solid transparent; +aside#region_3 { + width: $right_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $right_aside_widthpx; } -aside #left_aside_wrapper, -aside #right_aside_wrapper { - margin-bottom: 10px; +aside#left_aside_wrapper, +aside#right_aside_wrapper { + margin-bottom: 10px; } main { - margin-left: auto; - margin-right: auto; - max-width: $main_widthpx; + margin-left: auto; + margin-right: auto; + max-width: $main_widthpx; } #overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, .5); - cursor: pointer; - z-index: 1028; + position: fixed; + top: 0; + left: $left_aside_widthpx; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, .3); + cursor: pointer; } h1, .h1 { - font-size: 2rem; + font-size: 2rem; } h2, .h2 { - font-size: 1.6rem; + font-size: 1.6rem; } h3, .h3 { - font-size: 1.2rem; + font-size: 1.2rem; } h4, .h4 { - font-size: 1.05rem; + font-size: 1.05rem; } h5, .h5 { - font-size: 0.9rem; + font-size: 0.9rem; } h6, .h6 { - font-size: 0.75rem; + font-size: 0.75rem; } #banner { - color: $banner_colour; - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + color: $banner_colour; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #banner img { - max-height: 1.35rem; - width: auto; + max-height: 1.35rem; + width: auto; } .jslider { - font-family: sans-serif, arial, freesans; + font-family: sans-serif, arial, freesans; } abbr { - border-bottom: none; + border-bottom: none; } /* icons */ @@ -116,123 +118,123 @@ a:focus, .fakelink, .cursor-pointer { - cursor: pointer; + cursor: pointer; } input, optgroup, select, textarea { - font-size: 0.9rem !important; + font-size: 0.9rem !important; } input[type=text], textarea { - resize: vertical; - background-color: $comment_item_colour; - color: $font_colour; + resize: vertical; + background-color: $comment_item_colour; + color: $font_colour; } .selected-doco-nav { - font-weight: bold; - text-shadow: 2px 2px 3px lightgray; + font-weight: bold; + text-shadow: 2px 2px 3px lightgray; } #doco-content img { - width: 100%; + width: 100%; } #help-content pre code { - overflow-x: auto; - white-space: pre; + overflow-x: auto; + white-space: pre; } pre code { - border: none; - padding: 1em 1.5em; + border: none; + padding: 1em 1.5em; } code { - background: #ccc; - color: #000; + background: #ccc; + color: #000; } pre { - background: #F5F5F5; - color: #333; - border:1px solid #ccc; - border-radius: $radius; + background: #F5F5F5; + color: #333; + border:1px solid #ccc; + border-radius: $radius; } .heart { - color: #FF0000; + color: #FF0000; } nav { - opacity: $nav_float_min_opacity; - filter:alpha(opacity=$nav_percent_min_opacity); + opacity: $nav_float_min_opacity; + filter:alpha(opacity=$nav_percent_min_opacity); } #powered-by { - font-size: 0.5rem; - position: absolute; - top: 50px; - left: 16px; + font-size: 0.5rem; + position: absolute; + top: 50px; + left: 16px; } #powered-by img { - margin-top: -2px; - height: 10px; - width: 10px; + margin-top: -2px; + height: 10px; + width: 10px; } .error-message { - color: #FF0000; - font-size: 1.1em; - border: 1px solid #FF8888; - background-color: #FFEEEE; - padding: 10px; + color: #FF0000; + font-size: 1.1em; + border: 1px solid #FF8888; + background-color: #FFEEEE; + padding: 10px; } .nav-channel-select { margin-left: 8px; } /* contextual help */ .contextual-help-content { - display: none; + display: none; } .contextual-help-content-open { - display: block; - position: fixed; - top: 3.35rem; - left: 0px; - width: 100%; - max-height: 50%; - background: $comment_item_colour; - padding: 1rem; - border-bottom: #ccc 1px solid; - overflow: auto; - -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); - -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); - box-shadow: 0px 3px 3px rgba(0,0,0,0.2); + display: block; + position: fixed; + top: 3.35rem; + left: 0px; + width: 100%; + max-height: 50%; + background: $comment_item_colour; + padding: 1rem; + border-bottom: #ccc 1px solid; + overflow: auto; + -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); + -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); + box-shadow: 0px 3px 3px rgba(0,0,0,0.2); } .contextual-help-content dd { - margin-bottom: 1em; + margin-bottom: 1em; } .contextual-help-tool { - padding: 7px; - filter: alpha(opacity=20); - opacity: .5; + padding: 7px; + filter: alpha(opacity=20); + opacity: .5; } .contextual-help-tool:hover { - filter: alpha(opacity=50); - opacity: 1; - text-decoration: none; + filter: alpha(opacity=50); + opacity: 1; + text-decoration: none; } .contextual-help-tool i { - color: $font_colour; - font-size: 1.05rem; + color: $font_colour; + font-size: 1.05rem; } /* contextual help end */ @@ -240,232 +242,232 @@ nav { /* spinner */ .spinner-wrapper { - display: none; + display: none; } .spinner.s { - height: 1rem; - width: 1rem; + height: 1rem; + width: 1rem; } .spinner.m { - height: 2rem; - width: 2rem; + height: 2rem; + width: 2rem; } .spinner.l { - height: 3rem; - width: 3rem; + height: 3rem; + width: 3rem; } .spinner.s, .spinner.m, .spinner.l { - margin: 0 auto; - position: relative; - -webkit-animation: rotation 1s infinite linear; - -moz-animation: rotation 1s infinite linear; - -o-animation: rotation 1s infinite linear; - animation: rotation 1s infinite linear; - border-left: .2rem solid rgba(77, 77, 77, .15); - border-right: .2rem solid rgba(77, 77, 77, .15); - border-bottom: .2rem solid rgba(77, 77, 77, .15); - border-top: .2rem solid rgba(77, 77, 77, .5); - border-radius: 100%; + margin: 0 auto; + position: relative; + -webkit-animation: rotation 1s infinite linear; + -moz-animation: rotation 1s infinite linear; + -o-animation: rotation 1s infinite linear; + animation: rotation 1s infinite linear; + border-left: .2rem solid rgba(77, 77, 77, .15); + border-right: .2rem solid rgba(77, 77, 77, .15); + border-bottom: .2rem solid rgba(77, 77, 77, .15); + border-top: .2rem solid rgba(77, 77, 77, .5); + border-radius: 100%; } @-webkit-keyframes rotation { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(359deg); - } + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(359deg); + } } @-moz-keyframes rotation { - from { - -moz-transform: rotate(0deg); - } - to { - -moz-transform: rotate(359deg); - } + from { + -moz-transform: rotate(0deg); + } + to { + -moz-transform: rotate(359deg); + } } @-o-keyframes rotation { - from { - -o-transform: rotate(0deg); - } - to { - -o-transform: rotate(359deg); - } + from { + -o-transform: rotate(0deg); + } + to { + -o-transform: rotate(359deg); + } } @keyframes rotation { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } /* spinner end */ /* jumping dots */ .jumping-dots span { - position: relative; - bottom: 0px; - transition-timing-function: ease-in-out; - -webkit-animation: jump 1s infinite; - animation: jump 1s infinite; + position: relative; + bottom: 0px; + transition-timing-function: ease-in-out; + -webkit-animation: jump 1s infinite; + animation: jump 1s infinite; } .jumping-dots .dot-1 { - -webkit-animation-delay: 200ms; - animation-delay: 200ms; + -webkit-animation-delay: 200ms; + animation-delay: 200ms; } .jumping-dots .dot-2 { - -webkit-animation-delay: 400ms; - animation-delay: 400ms; + -webkit-animation-delay: 400ms; + animation-delay: 400ms; } .jumping-dots .dot-3 { - -webkit-animation-delay: 600ms; - animation-delay: 600ms; + -webkit-animation-delay: 600ms; + animation-delay: 600ms; } @-webkit-keyframes jump { - 0% { - bottom: 0px; - } - 20% { - bottom: 3px; - } - 40% { - bottom: 0px; - } + 0% { + bottom: 0px; + } + 20% { + bottom: 3px; + } + 40% { + bottom: 0px; + } } @keyframes jump { - 0% {bottom: 0px;} - 20% {bottom: 3px;} - 40% {bottom: 0px;} + 0% {bottom: 0px;} + 20% {bottom: 3px;} + 40% {bottom: 0px;} } /* jumping dots end */ /* footer */ footer { - position:fixed; - bottom:1px; - text-align: right; - padding-bottom: 1em; - padding-right: 3em; + position:fixed; + bottom:1px; + text-align: right; + padding-bottom: 1em; + padding-right: 3em; } .birthday-today, .event-today { - font-weight: bold; + font-weight: bold; } .warning-text { - font-size: 1.2em; - font-weight: bold; - color: #ff0000; + font-size: 1.2em; + font-weight: bold; + color: #ff0000; } #noperm-msg { - margin-top: 15px; + margin-top: 15px; } .preview-indicator { } #theme-preview { - margin: 15px 0px; + margin: 15px 0px; } #cropimage-wrapper, #cropimage-preview-wrapper { - margin-bottom: 10px; + margin-bottom: 10px; } .fn { - font-weight: bold; - font-size: 1rem; - color: #444444; + font-weight: bold; + font-size: 1rem; + color: #444444; } .vcard { - margin-bottom: 10px; - padding: 0px 10px 10px 10px; - background-color: rgba(254,254,254,0.5); - border: 1px solid rgba(254,254,254,0.5); - border-radius: $radius; - word-wrap: break-word; + margin-bottom: 10px; + padding: 0px 10px 10px 10px; + background-color: rgba(254,254,254,0.5); + border: 1px solid rgba(254,254,254,0.5); + border-radius: $radius; + word-wrap: break-word; } .vcard dl, .vcard .title { - margin-top: 10px; - margin-bottom: 0px; + margin-top: 10px; + margin-bottom: 0px; } .connect-btn-wrapper { - margin-bottom: 10px; + margin-bottom: 10px; } .profile-edit-side-link { - padding: 3px 0px; - opacity: 0; - filter:alpha(opacity=30); - float: right; + padding: 3px 0px; + opacity: 0; + filter:alpha(opacity=30); + float: right; } .vcard:hover .profile-edit-side-link { - opacity: 1; - filter:alpha(opacity=100); + opacity: 1; + filter:alpha(opacity=100); } #profile-photo-wrapper img { - width: 100%; - height: 100%; - max-width: 300px; - max-height: 300px; + width: 100%; + height: 100%; + max-width: 300px; + max-height: 300px; } #profile-photo-wrapper { - width: 251px; - height: 251px; - margin-bottom: 10px; - border-radius: $radius; + width: 251px; + height: 251px; + margin-bottom: 10px; + border-radius: $radius; } #hide-friends-yes-label, #hide-friends-no-label { - margin-left: 125px; - float: left; - width: 50px; + margin-left: 125px; + float: left; + width: 50px; } #fsuggest-desc, #fsuggest-submit-wrapper { - margin-top: 15px; - margin-bottom: 15px; + margin-top: 15px; + margin-bottom: 15px; } .app-name { - overflow: none; + overflow: none; } .app-container img { - margin-left: auto; - margin-right: auto; - width: 80px; - height: 80px; - display: block; + margin-left: auto; + margin-right: auto; + width: 80px; + height: 80px; + display: block; } .pager { @@ -481,287 +483,287 @@ footer { .pager_next, .pager-prev, .pager-next, -.pager_n { - border: 1px solid #ccc; - background: transparent; - padding: 4px; +.pager_n { + border: 1px solid #ccc; + background: transparent; + padding: 4px; } .pager_current { - border: 1px solid transparent; - background: transparent; - padding: 4px; + border: 1px solid transparent; + background: transparent; + padding: 4px; } .photo, .contact-block-img { - border-radius: $radius; - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; + border-radius: $radius; + box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } #side-bar-photos-albums { - margin-top: 15px; + margin-top: 15px; } #side-bar-photos-albums ul { - list-style: none; + list-style: none; } .profile-match-photo img, .directory-photo-img { - border-radius: $radius; - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; + border-radius: $radius; + box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } .profile-match-photo img { - width: $top_photo !important; - height: $top_photo !important; + width: $top_photo !important; + height: $top_photo !important; } #photo-view-wrapper { - background-color: $item_colour; + background-color: $item_colour; } .pmenu.horizontal { - padding: 0 0 0 0; - border-bottom: none; + padding: 0 0 0 0; + border-bottom: none; } .pmenu.horizontal .pmenu-title { - display: none; + display: none; } .pmenu.horizontal ul { - -moz-padding-start: 0; + -moz-padding-start: 0; } .pmenu.horizontal li { - margin-left: 0; - display: inline; - padding-right: 15px; + margin-left: 0; + display: inline; + padding-right: 15px; } .group-delete-wrapper { - float: right; + float: right; } #pause { - position: fixed; - bottom: 5px; - right: 5px; + position: fixed; + bottom: 5px; + right: 5px; } #contact-block { - width: 100%; + width: 100%; } #contact-block-numcontacts { - font-weight: bold; - margin-bottom:10px; + font-weight: bold; + margin-bottom:10px; } .contact-block-div { - display: inline; + display: inline; } .contact-block-textdiv { - width: 150px; - height: 34px; + width: 150px; + height: 34px; } .contact-block-img { - width:47px; - height:47px; - margin-bottom: 3px; + width:47px; + height:47px; + margin-bottom: 3px; } #tag-remove { - margin-bottom: 15px; + margin-bottom: 15px; } #tagrm li { - margin-bottom: 10px; + margin-bottom: 10px; } #tagrm-submit, #tagrm-cancel { - margin-top: 25px; + margin-top: 25px; } #tagrm-cancel { - margin-left: 15px; + margin-left: 15px; } .wall-item-conv { - background-color: $comment_item_colour; + background-color: $comment_item_colour; } #nav-notifications-template, #nav-notifications-forums-template { - display: none; + display: none; } #nav-search-spinner { - float: right; - margin-top: -1.4rem; - margin-right: 1rem; + float: right; + margin-top: -1.4rem; + margin-right: 1rem; } #nav-search-text { - width: 280px; - padding: .15rem .5rem; + width: 280px; + padding: .15rem .5rem; } nav .acpopup { - top: 46px !important; - margin-left: -35px; - width: 290px; + top: 46px !important; + margin-left: -35px; + width: 290px; } .clear { - clear: both; + clear: both; } .descriptive-text { - color: #888; + color: #888; } #plugin-settings-link, #account-settings-link { - margin-bottom: 10px; + margin-bottom: 10px; } #uexport-link { - margin-bottom: 20px; + margin-bottom: 20px; } #network-new-link { - margin-top: 15px; - margin-bottom: 15px; + margin-top: 15px; + margin-bottom: 15px; } #cboxOverlay { - z-index: 1050; + z-index: 1050; } #colorbox { - z-index: 1051; + z-index: 1051; } #cboxContent { - padding: 3px; - border: 0px solid #fff; - border-radius: $radius; - background-color: #fff; - z-index: 1052; + padding: 3px; + border: 0px solid #fff; + border-radius: $radius; + background-color: #fff; + z-index: 1052; } .app-title { - margin: 10px; + margin: 10px; } .profile-match-photo { - float: left; + float: left; } .profile-match-name { - width: 116px; - height: 1.5em; - overflow: hidden !important; + width: 120px; + height: 1.5em; + overflow: hidden !important; } .profile-match-note { - text-align: center; + text-align: center; } .profile-match-connect { - text-align: center; - font-weight: bold; + text-align: center; + font-weight: bold; } .profile-match-wrapper { float: left; - width: 118px; - height: 118px; + width: 120px; + height: 150px; padding: 10px; margin: 8px 10px 0 0; border-top: 1px solid #eee; border-left: 2px solid #eee; } .profile-match-ignore { - float: right; + float: right; } .side-link { - margin-bottom: 15px; + margin-bottom: 15px; } #prof-members { - margin-top: 20px; - padding: 10px; - height: 250px; - overflow: auto; - border: 1px solid #ddd; + margin-top: 20px; + padding: 10px; + height: 250px; + overflow: auto; + border: 1px solid #ddd; } #prof-separator { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 10px; } #prof-all-contacts { - padding: 10px; - height: 450px; - overflow: auto; - border: 1px solid #ddd; + padding: 10px; + height: 450px; + overflow: auto; + border: 1px solid #ddd; } #prof-edit-desc { - margin-top: 15px; + margin-top: 15px; } .required { - color: #ff0000; + color: #ff0000; } .notif-image { - height: 80px; - width: 80px; - margin-right: 15px; + height: 80px; + width: 80px; + margin-right: 15px; } /** * OAuth */ .oauthapp { - height: auto; overflow: auto; - border-bottom: 2px solid #cccccc; - padding-bottom: 1em; - margin-bottom: 1em; + height: auto; overflow: auto; + border-bottom: 2px solid #cccccc; + padding-bottom: 1em; + margin-bottom: 1em; } .oauthapp img { - float: left; - width: 48px; height: 48px; - margin: 10px; + float: left; + width: 48px; height: 48px; + margin: 10px; } .oauthapp .icon { - margin-right: 20px; + margin-right: 20px; } .oauthapp img.noicon { - background-image: url("../../../../images/icons/48/plugin.png"); - background-position: center center; - background-repeat: no-repeat; + background-image: url("../../../../images/icons/48/plugin.png"); + background-position: center center; + background-repeat: no-repeat; } .oauthapp a { - float: left; + float: left; } .body-attach { - margin-top: 10px; + margin-top: 10px; } .acpopup li div.taggable { - color:#cc0000; + color:#cc0000; } /* popup notifications */ @@ -776,8 +778,8 @@ div.jGrowl div.info { padding-left: 58px; } #jGrowl.top-right { - top: 4.5rem; - right: 15px; + top: 4.5rem; + right: .25rem; } div.jGrowl div.jGrowl-notification { @@ -785,120 +787,112 @@ div.jGrowl div.jGrowl-notification { } .jslider .jslider-scale ins { - color: #333; - font-size: 0.9rem; - width: 100px; - text-align: center; + color: #333; + font-size: 0.9rem; + width: 100px; + text-align: center; } .conv-participants { - color: $font_colour; + color: $font_colour; } .contactname { - font-weight: bold; - color: $font_colour; - display: block; - overflow: hidden; - text-overflow: ellipsis; + display: block; + overflow: hidden; + text-overflow: ellipsis; } .dropdown-notification, .notification, .member-item { - line-height: 1.2em; - font-size: 0.75rem; - overflow: hidden; - text-overflow: ellipsis; - display: block; - white-space: nowrap; + line-height: 1.2em; + font-size: 0.75rem; + overflow: hidden; + text-overflow: ellipsis; + display: block; + white-space: nowrap; } .notification.notification-forum { - font-size: 0.9rem; - color: $font_colour; + font-size: 0.9rem; + color: $font_colour; } #acl-search::-webkit-input-placeholder { - /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ - font-family: ForkAwesome, sans-serif, arial, freesans; + /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ + font-family: ForkAwesome, sans-serif, arial, freesans; } #acl-search::-moz-placeholder { - /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ - font-family: ForkAwesome, sans-serif, arial, freesans; + /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ + font-family: ForkAwesome, sans-serif, arial, freesans; } .acl-item-header { - width: 100%; + width: 100%; } .acl-list-item.grouphide { - border: 1px solid red; - z-index: 2; + border: 1px solid red; + z-index: 2; } .acl-list-item.groupshow { - border: 1px solid green; - z-index: 2; + border: 1px solid green; + z-index: 2; } .acl-list-item.taggable { - background-color: #ddddff; + background-color: #ddddff; } .acl-button-show, .acl-button-hide { - float: right; - margin-left: 5px; + float: right; + margin-left: 5px; } .contact-block-content { - margin-top: 10px; + margin-top: 10px; } .contact-block-img.archived, .app-deleted, .dim { - opacity: 0.3; - filter:alpha(opacity=30); + opacity: 0.3; + filter:alpha(opacity=30); } .profile-match-connect { - margin-top: 5px; + margin-top: 5px; } .reshared-content { - margin-left: 20px; -} - -.reshared-content img { - width: 100%; + margin-left: 20px; } .shared_header img { - border-radius: $radius; - margin-right: 10px; + border-radius: $radius; + margin-right: 10px; } .tag1 { font-size : 0.9em !important; } + .tag2 { font-size : 1.0em !important; } - .tag3 { font-size : 1.1em !important; } - .tag4 { font-size : 1.2em !important; } - .tag5 { font-size : 1.3em !important; } @@ -918,12 +912,10 @@ div.jGrowl div.jGrowl-notification { font-size : 1.6em !important; } - .tag9 { font-size : 1.7em !important; } - .tag10 { font-size : 1.8em !important; } @@ -940,231 +932,231 @@ margin-right: 50px; } .pmenu ul { - list-style-type: none; + list-style-type: none; } .generic-icons, a .generic-icons { - font-size: 1rem; - margin-right: 0.5rem; - color: $font_colour; + font-size: 1rem; + margin-right: 0.5rem; + color: $font_colour; } .generic-icons-right { - font-size: 1rem; - margin-left: 0.5rem; - color: $font_colour; + font-size: 1rem; + margin-left: 0.5rem; + color: $font_colour; } .generic-icons:hover, a .generic-icons:hover, .generic-icons-right:hover, a .generic-icons-right:hover { - color: $font_colour; + color: $font_colour; } .generic-icons-nav { - font-size: 1rem; - margin-right: 7px; + font-size: 1rem; + margin-right: 7px; } .admin-icons { - font-size: 1.2em; - margin-right: 7px; + font-size: 1.2em; + margin-right: 7px; } .drop-icons, a .drop-icons { - font-size: 1rem; - color: $font_colour; - text-decoration: none; - cursor: pointer; + font-size: 1rem; + color: $font_colour; + text-decoration: none; + cursor: pointer; } .drop-icons:hover, a .drop-icons:hover { - color: #FF0000; + color: #FF0000; } .lockview, .sys-apps-toggle { - cursor: pointer; + cursor: pointer; } .permission-inherited { - float: left; - margin-right: 10px; - color: #FF0000; + float: left; + margin-right: 10px; + color: #FF0000; } .perm-inherited { - color: #FF0000; + color: #FF0000; } #menulist { - list-style-type: none; + list-style-type: none; } #adminpage table tr:hover { - background-color: #BBC7D7; + background-color: #BBC7D7; } table { - border-spacing: 2px; - max-width: 100%; + border-spacing: 2px; + max-width: 100%; } th,td { - padding: 3px; + padding: 3px; } #channels > tbody > tr > td, #users > tbody > tr > td { - max-width: 19.4em; - overflow: hidden; + max-width: 19.4em; + overflow: hidden; } - + /* mail */ img.mail-conv-sender-photo { - border-radius: $radius; + border-radius: $radius; } /* jot */ .jothidden { - font-weight: bold; + font-weight: bold; } .jothidden input::-webkit-input-placeholder { - font-weight: bold; + font-weight: bold; } .jothidden input::-moz-placeholder { - font-weight: bold; + font-weight: bold; } #profile-jot-wrapper { - background-color: rgba(254, 254, 254, 1); - border: 1px solid rgba(0, 0, 0, .2); - border-radius: $radius; + background-color: rgba(254, 254, 254, 1); + border: 1px solid rgba(0, 0, 0, .2); + border-radius: $radius; } #jot-title, #jot-pagetitle, #profile-jot-text { - border-radius: $radius; + border-radius: $radius; } #profile-jot-text::-webkit-input-placeholder { - font-size: 1.2rem; + font-size: 1.2rem; } #profile-jot-text::-moz-placeholder { - font-size: 1.2rem; + font-size: 1.2rem; } #profile-jot-text:focus::-webkit-input-placeholder { - color: transparent; + color: transparent; } #profile-jot-text:focus::-moz-placeholder { - color: transparent; + color: transparent; } #profile-jot-text-loading { - color: #777; - display: none; + color: #777; + display: none; } .jot-icons.jot-lock-warn { - color: darkorange; + color: darkorange; } /* conversation */ .top-radius { - border-top-right-radius: $radius; - border-top-left-radius: $radius; + border-top-right-radius: $radius; + border-top-left-radius: $radius; } .wall-event-item { - padding: 10px; - color: #fff; - background-color: #3A87AD; /* should reflect calendar color */ - border-top-left-radius: $radius; - border-top-right-radius: $radius; + padding: 10px; + color: #fff; + background-color: #3A87AD; /* should reflect calendar color */ + border-top-left-radius: $radius; + border-top-right-radius: $radius; } .wall-photo-item img { - max-width: 100% !important; - border-top-right-radius: $radius; - border-top-left-radius: $radius; + max-width: 100% !important; + border-top-right-radius: $radius; + border-top-left-radius: $radius; } .wall-item-footer { - font-size: 0.75rem; - margin-top: 2em; + font-size: 0.75rem; + margin-top: 2em; } .wall-item-content-wrapper { - background-color: $item_colour; - border-top-right-radius: $radius; - border-top-left-radius: $radius; + background-color: $item_colour; + border-top-right-radius: $radius; + border-top-left-radius: $radius; } .wall-item-content-wrapper.comment { - background-color: $comment_item_colour; - border-top-right-radius: 0px; - border-top-left-radius: 0px; + background-color: $comment_item_colour; + border-top-right-radius: 0px; + border-top-left-radius: 0px; } .hide-comments-outer { - background-color: $comment_item_colour; - border-top-color: #ccc; - border-style: solid; - border-top-style: dashed; - border-width: 1px 0px 0px 0px; - text-align: center; - border-radius: 0px; + background-color: $comment_item_colour; + border-top-color: #ccc; + border-style: solid; + border-top-style: dashed; + border-width: 1px 0px 0px 0px; + text-align: center; + border-radius: 0px; } .hide-comments-outer:hover { - border-top: 1px dashed #adadad; + border-top: 1px dashed #adadad; } .wall-item-comment-wrapper { - padding: 7px 10px; - background-color: $item_colour; - border-radius: 0px; - border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; - border-top: 3px solid $comment_item_colour; + padding: 7px 10px; + background-color: $item_colour; + border-radius: 0px; + border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; + border-top: 3px solid $comment_item_colour; } .wall-item-comment-wrapper-wc { - border-top: 0px solid $comment_item_colour; + border-top: 0px solid $comment_item_colour; } .wall-item-photo { - width: $top_photo; - height: $top_photo; - border: none; - border-radius: $radius; - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; + width: $top_photo; + height: $top_photo; + border: none; + border-radius: $radius; + box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } .comment .wall-item-photo { - width: $reply_photo; - height: $reply_photo; + width: $reply_photo; + height: $reply_photo; } .wall-item-ago, .dropdown-sub-text { - color: #777; + color: #777; } .wall-item-content, @@ -1172,250 +1164,259 @@ img.mail-conv-sender-photo { .page-body, .chat-item-text, .chat-item-text-self { - font-size: 1rem; + font-size: 1rem; } .comment-edit-text { - border: 1px solid #ccc; - border-radius: $radius; + border: 1px solid #ccc; + border-radius: $radius; } .divgrow-showmore { - display: block; - border-top: 1px dashed #ccc; - text-align: center; + display: block; + border-top: 1px dashed #ccc; + text-align: center; } .divgrow-showmore:hover { - border-top: 1px dashed #adadad; + border-top: 1px dashed #adadad; } .directory-item .divgrow-showmore { - background-color: $comment_item_colour; + background-color: $comment_item_colour; } /* widgets */ .widget { - background-color: rgba(254,254,254,.5); - border: 1px solid rgba(254,254,254,.5); - border-radius: $radius; + background-color: rgba(254,254,254,.5); + border: 1px solid rgba(254,254,254,.5); + border-radius: $radius; } #note-text { - border-radius: $radius; + border-radius: $radius; } .fileas-ul { - list-style-type: none; + list-style-type: none; } #datebrowse-sidebar select { - border: 1px solid #ccc; - border-radius: $radius; + border: 1px solid #ccc; + border-radius: $radius; } .thing-show img { - margin: 10px; + margin: 10px; } .abook-self { - background-color: #ffdddd; + background-color: #ffdddd; } .abook-pending-contact, .abook-permschange { - background: orange; + background: orange; } .online-now { - color: red; - cursor: pointer; + color: red; + cursor: pointer; } .chat-item-photo, .chat-item-photo-self { - border-radius: $radius; + border-radius: $radius; } .chat-item-title, .chat-item-title-self { - border-radius: $radius; - background-color: $item_colour; + border-radius: $radius; + background-color: $item_colour; } #chatMembers img { - border-radius: $radius; + border-radius: $radius; } .menu-img-3 { - width: 3.3em; - height: 3.3em; - margin-right: 5px; - border-radius: $radius; - float: left; + width: 3.3em; + height: 3.3em; + margin-right: 5px; + border-radius: $radius; + float: left; } .menu-img-2 { - height: 2.2em; - width: 2.2em; - margin-right: 5px; - border-radius: $radius; - float: left; + height: 2.2em; + width: 2.2em; + margin-right: 5px; + border-radius: $radius; + float: left; } .menu-img-1 { - height: 1.28571429em; - width: 1.28571429em; - border-radius: $radius; + height: 1.28571429em; + width: 1.28571429em; + border-radius: $radius; } .usermenu { - width: 3.75rem; + width: 3.75rem; } #avatar { - width: 2.35rem; - height: 2.35rem; - border-radius: $radius; + width: 2.35rem; + height: 2.35rem; + border-radius: $radius; } #nav-app-link { - padding: 0 !important; - line-height: 1.175; - white-space: nowrap; + padding: 0 !important; + line-height: 1.175; + white-space: nowrap; } .page-title { - margin: 7px 0px; + margin: 7px 0px; } .generic-content-wrapper-styled { - background-color: $bgcolour; - padding: 10px; - border-radius: $radius; + background-color: $bgcolour; + padding: 10px; + border-radius: $radius; } .generic-content-wrapper { - border: 1px solid rgba(0, 0, 0, .2); - border-radius: $radius; - margin-bottom: 1.5rem; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: $radius; + margin-bottom: 1.5rem; } .section-title-wrapper { - padding: 7px 10px; - background-color: $item_colour; - border-top-left-radius: $radius; - border-top-right-radius: $radius; - border-bottom: 3px solid $comment_item_colour; + padding: 7px 10px; + background-color: $item_colour; + border-top-left-radius: $radius; + border-top-right-radius: $radius; + border-bottom: 3px solid $comment_item_colour; } .section-title-wrapper h2, .section-subtitle-wrapper h3 { - margin-top: 0px; - margin-bottom: 0px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + margin-top: 0px; + margin-bottom: 0px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .section-subtitle-wrapper h3 { - padding: 3px; + padding: 3px; } .section-subtitle-wrapper { - padding: 4px 10px; - background-color: $item_colour; - border-bottom: 3px solid $comment_item_colour; + padding: 4px 10px; + background-color: $item_colour; + border-bottom: 3px solid $comment_item_colour; } .section-content-tools-wrapper { - padding: 7px 10px; - background-color: $comment_item_colour; - border-bottom: 3px solid $comment_item_colour; + padding: 7px 10px; + background-color: $comment_item_colour; + border-bottom: 3px solid $comment_item_colour; +} + +.section-content-success-wrapper { + padding: 21px 10px; + color: #155724; + background-color: #d4edda; + border-bottom: 3px solid $comment_item_colour; + text-align: center; } .section-content-info-wrapper { - padding: 21px 10px; - color: #0c5460; - background-color: #d1ecf1; - border-bottom: 3px solid $comment_item_colour; - text-align: center; + padding: 21px 10px; + color: #0c5460; + background-color: #d1ecf1; + border-bottom: 3px solid $comment_item_colour; + text-align: center; } .section-content-warning-wrapper { - padding: 21px 10px; - color: #856404; - background-color: #fff3cd; - border-bottom: 3px solid $comment_item_colour; - text-align: center; + padding: 21px 10px; + color: #856404; + background-color: #fff3cd; + border-bottom: 3px solid $comment_item_colour; + text-align: center; } .section-content-danger-wrapper { - padding: 21px 10px; - color: #721c24; - background-color: #f8d7da; - border-bottom: 3px solid $comment_item_colour; - text-align: center; + padding: 21px 10px; + color: #721c24; + background-color: #f8d7da; + border-bottom: 3px solid $comment_item_colour; + text-align: center; } - +.section-content-tools-wrapper .section-content-success-wrapper, +.section-content-wrapper .section-content-success-wrapper, .section-content-tools-wrapper .section-content-info-wrapper, .section-content-wrapper .section-content-info-wrapper, .section-content-tools-wrapper .section-content-warning-wrapper, .section-content-wrapper .section-content-warning-wrapper, .section-content-tools-wrapper .section-content-danger-wrapper, .section-content-wrapper .section-content-danger-wrapper { - margin-bottom: 10px; - border-bottom: none; - border-radius: $radius; + margin-bottom: 10px; + border-bottom: none; + border-radius: $radius; } .section-content-wrapper { - padding: 7px 10px; - background-color: $comment_item_colour; - border-bottom-left-radius: $radius; - border-bottom-right-radius: $radius; - word-wrap: break-word; + padding: 7px 10px; + background-color: $comment_item_colour; + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; + word-wrap: break-word; } .section-content-wrapper-np { - background-color: $comment_item_colour; - border-bottom-left-radius: $radius; - border-bottom-right-radius: $radius; - word-wrap: break-word; + background-color: $comment_item_colour; + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; + word-wrap: break-word; } main.fullscreen { - left: 0px; - width: 100%; - height: 100vh; - max-width: none; + left: 0px; + width: 100%; + height: 100vh; + max-width: none; } main.fullscreen .generic-content-wrapper { - position: absolute; - width: 100%; - top: 0px; - left: 0px; - border-radius: 0px; - border-width: 0px; + position: absolute; + width: 100%; + top: 0px; + left: 0px; + border-radius: 0px; + border-width: 0px; } main.fullscreen .section-title-wrapper { - border-radius: 0px; - position: sticky; - top: 0; - z-index: 1020; + border-radius: 0px; + position: sticky; + top: 0; + z-index: 1020; } main.fullscreen .section-content-wrapper, main.fullscreen .section-content-wrapper-np { - border-radius: 0px; + border-radius: 0px; } #inline-btn { - display: none; + display: none; } .atoken-index-row:hover td, @@ -1425,7 +1426,7 @@ main.fullscreen .section-content-wrapper-np { .locs-index-row:hover td, [id^="cloud-index-"]:hover td, .cloud-index-active { - background-color: $item_colour; + background-color: $item_colour; } [id^="webpage-list-item-"]:hover td, @@ -1433,15 +1434,15 @@ main.fullscreen .section-content-wrapper-np { [id^="layout-list-item-"]:hover td, [id^="menu-list-item-"]:hover td, [id^="mitem-list-item-"]:hover td { - background-color: $item_colour; + background-color: $item_colour; } #perms-tool-table .highlight:hover { - background-color: $item_colour; + background-color: $item_colour; } .notify-seen { - background-color: $item_colour; + background-color: $item_colour; } /* bootstrap overrides */ @@ -1449,30 +1450,30 @@ main.fullscreen .section-content-wrapper-np { .form-control, .nav-pills .nav-link, .nav-tabs .nav-link { - border-radius: $radius; + border-radius: $radius; } .rounded-top { - border-top-left-radius: $radius !important; - border-top-right-radius: $radius !important; + border-top-left-radius: $radius !important; + border-top-right-radius: $radius !important; } blockquote { - font-size: 1rem; - font-style: italic; - border-left: 3px solid #ccc; - padding: 1em 0px 1em 1.5em; - margin: 0px; + font-size: 1rem; + font-style: italic; + border-left: 3px solid #ccc; + padding: 1em 0px 1em 1.5em; + margin: 0px; } .dropdown-menu { - color: $font_colour; - font-size: 0.9rem; - border-radius: $radius; + color: $font_colour; + font-size: 0.9rem; + border-radius: $radius; } .dropdown-item { - color: $font_colour; + color: $font_colour; } .dropdown-item:active, @@ -1482,141 +1483,145 @@ blockquote { .textcomplete-item:hover .dropdown-item, .textcomplete-item.active .dropdown-item, .textcomplete-item:active .dropdown-item { - color: $font_colour; - background-color: $item_colour; + color: $font_colour; + background-color: $item_colour; } .textcomplete-dropdown { - max-height: 300px; - max-width: 250px; - overflow: auto; + max-height: 300px; + max-width: 250px; + overflow: auto; } .dropdown-item.active { - color: #fff; - background-color: #007bff; + color: #fff; + background-color: #007bff; } .bg-dark { - background-color: $nav_bg !important; + background-color: $nav_bg !important; } .navbar { - z-index:1030; + z-index:1030; } .navbar-dark .navbar-nav .nav-link, .usermenu i { - color: $nav_icon_colour; + color: $nav_icon_colour; } .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .usermenu:focus i, .usermenu:hover i { - color: $nav_active_icon_colour; + color: $nav_active_icon_colour; } @media screen and (max-width: 992px) { - aside#region_1 { - border-right: 1px solid $nav_bd; - } + aside#region_1 { + border-right: 1px solid $nav_bd; + } - main { - left: -$aside_widthpx; - width: calc( 100% + $aside_widthpx ); - } + main { + left: -$left_aside_widthpx; + width: calc( 100% + $left_aside_widthpx ); + } - main.region_1-on { - left: 0px; - } + main.region_1-on { + left: 0px; + } - #nav-app-link-wrapper.has_location { - min-width: 0; - flex-basis: 25%; - } + #nav-app-link-wrapper.has_location { + min-width: 0; + flex-basis: 25%; + } - #nav-app-link-wrapper { - margin-right: 0.5rem; - } + #nav-app-link-wrapper { + margin-right: 0.5rem; + } - #navbar-collapse-2 .navbar-app i { - font-size: 1rem; - margin-right: 0.5rem; - } + #navbar-collapse-2 .navbar-app i { + font-size: 1rem; + margin-right: 0.5rem; + } } .shareable_element_text { - height: 300px; - width: 300px; + height: 300px; + width: 300px; } .bb_observer { - color: red; + color: red; } .bb_observer img { - border: 3px solid red !important; + border: 3px solid red !important; } .bb_rm-logo { - height: 1.3em; - width: auto; - margin-top:-3px; + height: 1.3em; + width: auto; + margin-top:-3px; } -dl.bb-dl > dt { - /* overriding the default dl style from bootstrap, as bootstrap's - style of a bold unindented line followed by a plain unindented - line is already acheivable in bbcode without dl */ - font-weight: normal; -} +dl.bb-dl > dt { + /* overriding the default dl style from bootstrap, as bootstrap's + style of a bold unindented line followed by a plain unindented + line is already acheivable in bbcode without dl */ + font-weight: normal; +} dl.dl-terms-monospace > dt { font-family: monospace; } dl.dl-terms-bold > dt { font-weight: bold; } dl.dl-terms-italic > dt { font-style: italic; } dl.dl-terms-underline > dt { text-decoration: underline; } dl.dl-terms-large > dt { font-size: 120%; } dl.bb-dl:not(.dl-horizontal) > dd { - display: block; - margin-left: 2em; + display: block; + margin-left: 2em; } dl.bb-dl > dd > li { - /* adding some indent so bullet-list items will line up better with - dl descriptions if someone wants to be impure and combine them */ - margin-left: 1em; + /* adding some indent so bullet-list items will line up better with + dl descriptions if someone wants to be impure and combine them */ + margin-left: 1em; } .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 "; + /* 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 "; } -/* Modified original CSS to match input in Ussrbasic */ +/* Modified original CSS to match input in Redbasic */ .jothidden .bootstrap-tagsinput { - border: 0px solid transparent; - margin-bottom: 0px; - box-shadow: none; - display: inline-block; - border-radius: $radius; - cursor: text; - padding: 0px 10px; - width: 100%; + border: 0px solid transparent; + margin-bottom: 0px; + box-shadow: none; + display: inline-block; + border-radius: $radius; + cursor: text; + padding: 0px 10px; + width: 100%; } .bootstrap-tagsinput .label { - font-size: 100%; + font-size: 100%; +} + +.bootstrap-tagsinput input { + height: 2.5rem; } /* Abusing theme-green is less work than makeing a new new one */ .theme-green .back-bar .selected-bar { - background-color: #000000; - background-image: none !important; + background-color: #000000; + background-image: none !important; } @@ -1632,21 +1637,22 @@ dl.bb-dl > dd > li { } .form-group.checkbox > div label { - display: block; overflow: hidden; cursor: pointer; - border: 1px solid #ccc; - border-radius: 12px; - margin:0px; - -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + display: block; overflow: hidden; cursor: pointer; + border: 1px solid #ccc; + border-radius: 12px; + margin:0px; + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + font-weight: normal; } .form-group.checkbox:hover label { - color: $link_colour; + color: $link_colour; } .form-group.checkbox:hover > div label { - border-color: $link_colour; + border-color: $link_colour; } .onoffswitch-inner { @@ -1664,7 +1670,7 @@ dl.bb-dl > dd > li { content: attr(data-on); padding-right: 21px; background-color: $item_colour; - color: $font_colour; + color: $font_colour; text-align: right; } @@ -1695,105 +1701,105 @@ dl.bb-dl > dd > li { .form-group.checkbox > div > input:disabled + label .onoffswitch-switch { - background-color: red; - opacity: 0.3; - filter:alpha(opacity=30); + background-color: red; + opacity: 0.3; + filter:alpha(opacity=30); } .help-searchlist { - list-style-type: none; + list-style-type: none; } .help-searchlist a { - font-size: 130%; + font-size: 130%; } .embed-photo-selected-photo { - border-color: blue; - border-style: solid; - border-width: 5px; + border-color: blue; + border-style: solid; + border-width: 5px; } #wiki-preview img { - max-width: 100%; + max-width: 100%; } #ace-editor, #editor { - border-bottom-left-radius: $radius; - border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; } .sub-menu-wrapper { - padding-left: 1rem; - display: none; + padding-left: 1rem; + display: none; } .sub-menu { - width: 100%; - margin-top: 0.5rem; - padding-left: 1rem; - border-left: 0.2rem solid #eee; + width: 100%; + margin-top: 0.5rem; + padding-left: 1rem; + border-left: 0.2rem solid #eee; } .app-icon { - color: #777; - font-size: 80px; - text-shadow: 3px 3px 3px lightgrey; + color: #777; + font-size: 80px; + text-shadow: 3px 3px 3px lightgrey; } .app-detail { - text-align: center; + text-align: center; } #login-main, .rmagic-button { - max-width: 400px; - margin-top: 20px; - margin-left: auto; - margin-right: auto; + max-width: 400px; + margin-top: 20px; + margin-left: auto; + margin-right: auto; } #permcat-index { - margin: 10px; + margin: 10px; } .cloud-container { - float: left; - width: 100px; - height: 110px; - margin: 5px; + float: left; + width: 100px; + height: 110px; + margin: 5px; } .cloud-icon-container { - width: 64px; - height: 64px; - border: 1px solid #eee; - border-radius: $radius; + width: 64px; + height: 64px; + border: 1px solid #eee; + border-radius: $radius; } .cloud-icon i { - font-size: 42px; - color: #888; - margin-top: 8px; - margin-left: 6px; + font-size: 42px; + color: #888; + margin-top: 8px; + margin-left: 6px; } .cloud-icon img { - max-width: 64px; - max-height: 64px; - border-radius: $radius; + max-width: 64px; + max-height: 64px; + border-radius: $radius; } .cloud-title { - width: 98px; - height: 36px; - overflow: hidden; + width: 98px; + height: 36px; + overflow: hidden; } .caption-visible { - max-height: 75%; + max-height: 75%; } .oneway-overlay { @@ -1802,21 +1808,22 @@ dl.bb-dl > dd > li { } .cover-photo-review { - margin-bottom: 10px; + margin-bottom: 10px; } .hover-fx-hide { - opacity: 0; + opacity: 0; } .hover-fx-show:hover .hover-fx-hide { - opacity: 1; + opacity: 1; } -.bg-primary { - background-color: #505050 !important; +/* default highlighted text if not specified by schema: */ +span.default-highlight { + background-color: yellow; } -.nav-link.active { - background-color: #505050 !important; +.bootstrap-tagsinput { + width: 100%; } diff --git a/ussrbasic/js/ussrbasic.js b/ussrbasic/js/ussrbasic.js index 941b259..08fdd41 100644 --- a/ussrbasic/js/ussrbasic.js +++ b/ussrbasic/js/ussrbasic.js @@ -11,44 +11,21 @@ $(document).ready(function() { if($(window).width() < 992) { $('main').css('width', $(window).width() + $('aside').outerWidth() ); } else { - $('main').css('width', '100%' ); + $('main').css('width', '100%'); } }); } $('#css3-calc').remove(); // Remove the test element - if($(window).width() >= 992) { - $('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({ - offset_top: parseInt($('aside').css('padding-top')), - parent: 'main', - spacer: '.aside_spacer' - }); - } + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); - $('#expand-aside').on('click', toggleAside); - - $('section').on('click', function() { + $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ - toggleAside(); + toggleAside('left'); } - }); - - var left_aside_height = $('#left_aside_wrapper').height(); - - $('#left_aside_wrapper').on('click', function() { - if(left_aside_height != $('#left_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - left_aside_height = $('#left_aside_wrapper').height(); - } - }); - - - var right_aside_height = $('#right_aside_wrapper').height(); - - $('#right_aside_wrapper').on('click', function() { - if(right_aside_height != $('#right_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - right_aside_height = $('#right_aside_wrapper').height(); + else { + toggleAside('right'); } }); @@ -84,7 +61,7 @@ $(document).ready(function() { var doctitle = document.title; function checkNotify() { var notifyUpdateElem = document.getElementById('notify-update'); - if(notifyUpdateElem !== null) { + if(notifyUpdateElem !== null) { if(notifyUpdateElem.innerHTML !== "") document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle; else @@ -92,8 +69,103 @@ $(document).ready(function() { } } setInterval(function () {checkNotify();}, 10 * 1000); + + 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) { + $('html, body').css('overflow-y', 'hidden'); + } + } + else { + //a second finger hit the screen, abort the touch + touch_start = null; + } + }); + + window.addEventListener('touchend', function(e) { + $('html, 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('right'); + } + } + if (touch_end < (touch_start - touch_offset)) { + //a right -> left swipe + //toggleAside('left'); + } + } + }); + + $(document).on('hz:hqControlsClickAction', function(e) { + toggleAside('left'); + }); + }); +function setStyle(element, cssProperty) { + for (var property in cssProperty){ + element.style[property] = cssProperty[property]; + } +} + +function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + var lastScrollTop = 0; + var sticky = document.querySelector(sticky); + 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; + + var resizeObserver = new ResizeObserver(function(entries) { + stickyHeight = sticky.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 - topOffset; + 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); + +} + function makeFullScreen(full) { if(typeof full=='undefined' || full == true) { $('main').addClass('fullscreen'); @@ -104,26 +176,21 @@ function makeFullScreen(full) { $('main').removeClass('fullscreen'); $('header, nav, aside, #fullscreen-btn').show(); $('#inline-btn').hide(); - $(document.body).trigger("sticky_kit:recalc"); } } -function toggleAside() { - $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); - if($('main').hasClass('region_1-on')){ - $('html, body').css('overflow-x', ''); - $('main').removeClass('region_1-on') +function toggleAside(swipe) { + + if ($('main').hasClass('region_1-on') && swipe === 'left') { + $('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': '', left: '' }); + $('main').removeClass('region_1-on'); $('#overlay').remove(); - $('#left_aside_wrapper').trigger("sticky_kit:detach"); } - else { - $('html, body').css('overflow-x', 'hidden'); - $('main').addClass('region_1-on') - $('
').appendTo('section'); - $('#left_aside_wrapper').stick_in_parent({ - offset_top: $('nav').outerHeight(true) + 10, - parent: '#region_1', - spacer: '#left_aside_spacer' - }); + if (!$('main').hasClass('region_1-on') && swipe === 'right') { + $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': 'sticky', 'left': '0px'}); + $('main').addClass('region_1-on'); + $('
').appendTo('body').one('click', function() { toggleAside('left'); }); } } diff --git a/ussrbasic/php/style.php b/ussrbasic/php/style.php index c8ef793..0cf2c5d 100644 --- a/ussrbasic/php/style.php +++ b/ussrbasic/php/style.php @@ -120,10 +120,10 @@ if(file_exists('view/theme/ussrbasic/css/style.css')) { $x .= $schemecss; } - $aside_width = 288; + $left_aside_width = 288; + $right_aside_width = 288; - // left aside and right aside are 285px + converse width - $main_width = (($aside_width * 2) + intval($converse_width)); + $main_width = $left_aside_width + $right_aside_width + intval($converse_width); // prevent main_width smaller than 768px $main_width = (($main_width < 768) ? 768 : $main_width); @@ -150,7 +150,8 @@ if(file_exists('view/theme/ussrbasic/css/style.css')) { '$pmenu_top' => $pmenu_top, '$pmenu_reply' => $pmenu_reply, '$main_width' => $main_width, - '$aside_width' => $aside_width + '$left_aside_width' => $left_aside_width, + '$right_aside_width' => $right_aside_width ); echo str_replace(array_keys($options), array_values($options), $x); @@ -159,5 +160,5 @@ if(file_exists('view/theme/ussrbasic/css/style.css')) { // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. -// if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasic') -// set_pconfig(local_channel(), 'ussrbasic', 'schema', '---'); +if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasic') + set_pconfig(local_channel(), 'ussrbasic', 'schema', '---'); diff --git a/ussrbasic/php/theme.php b/ussrbasic/php/theme.php index aa16bcb..7a4294f 100644 --- a/ussrbasic/php/theme.php +++ b/ussrbasic/php/theme.php @@ -2,15 +2,13 @@ /** * * Name: Ussrbasic - * * Description: ussr.win default 3 column theme - * * Version: 4.4.2 - * * MinVersion: 3.8 - * * MaxVersion: 6.0 + * * Description: ussr.win 3 column based on Hubzilla standard theme + * * Version: 2.1 + * * MinVersion: 5.9 + * * MaxVersion: 7.0 * * Author: Fabrixxm */ function ussrbasic_init(&$a) { -App::$theme_info['extends'] = 'redbasic'; - } diff --git a/ussrbasic/php/theme_init.php b/ussrbasic/php/theme_init.php index 5f73f67..0ac580f 100644 --- a/ussrbasic/php/theme_init.php +++ b/ussrbasic/php/theme_init.php @@ -13,5 +13,3 @@ head_add_js('/library/bootbox/bootbox.min.js'); head_add_js('/library/bootstrap-tagsinput/bootstrap-tagsinput.js'); head_add_js('/library/datetimepicker/jquery.datetimepicker.js'); head_add_js('/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js'); - - diff --git a/ussrbasic/schema/Focus-Light.php b/ussrbasic/schema/Focus-Light.php index 14ee130..8a542d1 100644 --- a/ussrbasic/schema/Focus-Light.php +++ b/ussrbasic/schema/Focus-Light.php @@ -3,10 +3,11 @@ if (! $nav_bg) $nav_bg = "#f8f9fa"; if (! $nav_icon_colour) - $nav_icon_colour = "rgba(0, 0, 0, 0.5);"; + $nav_icon_colour = "rgba(0, 0, 0, 0.5)"; if (! $nav_active_icon_colour) $nav_active_icon_colour = "rgba(0, 0, 0, 0.7)"; if (! $radius) $radius = "4px"; if (! $banner_colour) $banner_colour = "rgba(0, 0, 0, 0.7)"; + diff --git a/ussrbasic/schema/GreenGrey-Nolikes.css b/ussrbasic/schema/GreenGrey-Nolikes.css index 3632a8f..ddef622 100644 --- a/ussrbasic/schema/GreenGrey-Nolikes.css +++ b/ussrbasic/schema/GreenGrey-Nolikes.css @@ -324,4 +324,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasic/schema/GreenGrey-Nominus-Nolikes.css b/ussrbasic/schema/GreenGrey-Nominus-Nolikes.css index 142cbd3..ef2a749 100644 --- a/ussrbasic/schema/GreenGrey-Nominus-Nolikes.css +++ b/ussrbasic/schema/GreenGrey-Nominus-Nolikes.css @@ -333,4 +333,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasic/schema/GreenGrey-Nominus.css b/ussrbasic/schema/GreenGrey-Nominus.css index 8880851..30e6419 100644 --- a/ussrbasic/schema/GreenGrey-Nominus.css +++ b/ussrbasic/schema/GreenGrey-Nominus.css @@ -325,4 +325,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasic/schema/GreenGrey.css b/ussrbasic/schema/GreenGrey.css index dcb6c92..cec0d9b 100644 --- a/ussrbasic/schema/GreenGrey.css +++ b/ussrbasic/schema/GreenGrey.css @@ -319,4 +319,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasic/schema/dark.css b/ussrbasic/schema/dark.css index 71f7bc3..bf55fec 100644 --- a/ussrbasic/schema/dark.css +++ b/ussrbasic/schema/dark.css @@ -322,9 +322,6 @@ a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link { .text-dark { color: #aaa !important; } -a.text-dark:focus, a.text-dark:hover { - color: #ddd !important; -} .group-selected, .fileas-selected, .categories-selected, .search-selected, a.active { color: #fff !important; @@ -480,3 +477,26 @@ pre { .widget-nav-pills-checkbox:hover + a { background-color: #222; } + + +/* category badge fix: */ +a.text-dark:focus, a.text-dark:hover { + color: #ddd !important; +} + +.badge-warning { +/* background-color: #ffc927; */ +} +.badge-warning a.text-dark { + color: #333 !important; +} +.badge-warning a.text-dark:focus, .badge-warning a.text-dark:hover { + color: red !important; + text-decoration: none; +} + +/* fix color for highlithed text */ +span.default-highlight { + color: #333; + border-radius: 4px; +} diff --git a/ussrbasic/schema/zlax.css b/ussrbasic/schema/zlax.css index 53f2feb..4f862de 100644 --- a/ussrbasic/schema/zlax.css +++ b/ussrbasic/schema/zlax.css @@ -345,4 +345,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicleft/css/style.css b/ussrbasicleft/css/style.css index df86091..ce033cf 100644 --- a/ussrbasicleft/css/style.css +++ b/ussrbasicleft/css/style.css @@ -22,18 +22,21 @@ body { margin: 0px; } -aside { - width: $aside_widthpx; - min-width: $aside_widthpx; - max-width: $aside_widthpx; -} - -aside #region_1 { +aside#region_1 { border-right: 1px solid transparent; + width: $left_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $left_aside_widthpx; } -aside #left_aside_wrapper, -aside #right_aside_wrapper { +aside#region_3 { + width: $right_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $right_aside_widthpx; +} + +aside#left_aside_wrapper, +aside#right_aside_wrapper { margin-bottom: 10px; } @@ -44,14 +47,13 @@ main { } #overlay { - position: absolute; + position: fixed; top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, .5); + left: $left_aside_widthpx; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, .3); cursor: pointer; - z-index: 1028; } h1, .h1 { @@ -362,7 +364,7 @@ footer { bottom:1px; text-align: right; padding-bottom: 1em; - padding-right: 3em; + padding-right: 3em; } .birthday-today, @@ -481,7 +483,7 @@ footer { .pager_next, .pager-prev, .pager-next, -.pager_n { +.pager_n { border: 1px solid #ccc; background: transparent; padding: 4px; @@ -663,7 +665,7 @@ nav .acpopup { } .profile-match-name { - width: 116px; + width: 120px; height: 1.5em; overflow: hidden !important; } @@ -679,8 +681,8 @@ nav .acpopup { .profile-match-wrapper { float: left; - width: 118px; - height: 118px; + width: 120px; + height: 150px; padding: 10px; margin: 8px 10px 0 0; border-top: 1px solid #eee; @@ -735,7 +737,7 @@ nav .acpopup { height: auto; overflow: auto; border-bottom: 2px solid #cccccc; padding-bottom: 1em; - margin-bottom: 1em; + margin-bottom: 1em; } .oauthapp img { float: left; @@ -777,7 +779,7 @@ div.jGrowl div.info { } #jGrowl.top-right { top: 4.5rem; - right: 15px; + right: .25rem; } div.jGrowl div.jGrowl-notification { @@ -796,8 +798,6 @@ div.jGrowl div.jGrowl-notification { } .contactname { - font-weight: bold; - color: $font_colour; display: block; overflow: hidden; text-overflow: ellipsis; @@ -872,10 +872,6 @@ div.jGrowl div.jGrowl-notification { margin-left: 20px; } -.reshared-content img { - width: 100%; -} - .shared_header img { border-radius: $radius; margin-right: 10px; @@ -884,21 +880,19 @@ div.jGrowl div.jGrowl-notification { .tag1 { font-size : 0.9em !important; } + .tag2 { font-size : 1.0em !important; } - .tag3 { font-size : 1.1em !important; } - .tag4 { font-size : 1.2em !important; } - .tag5 { font-size : 1.3em !important; } @@ -918,12 +912,10 @@ div.jGrowl div.jGrowl-notification { font-size : 1.6em !important; } - .tag9 { font-size : 1.7em !important; } - .tag10 { font-size : 1.8em !important; } @@ -1023,7 +1015,7 @@ th,td { max-width: 19.4em; overflow: hidden; } - + /* mail */ img.mail-conv-sender-photo { @@ -1335,6 +1327,14 @@ img.mail-conv-sender-photo { border-bottom: 3px solid $comment_item_colour; } +.section-content-success-wrapper { + padding: 21px 10px; + color: #155724; + background-color: #d4edda; + border-bottom: 3px solid $comment_item_colour; + text-align: center; +} + .section-content-info-wrapper { padding: 21px 10px; color: #0c5460; @@ -1358,7 +1358,8 @@ img.mail-conv-sender-photo { border-bottom: 3px solid $comment_item_colour; text-align: center; } - +.section-content-tools-wrapper .section-content-success-wrapper, +.section-content-wrapper .section-content-success-wrapper, .section-content-tools-wrapper .section-content-info-wrapper, .section-content-wrapper .section-content-info-wrapper, .section-content-tools-wrapper .section-content-warning-wrapper, @@ -1524,10 +1525,8 @@ blockquote { } main { - - left: -$aside_widthpx; - width: calc( 100% + $aside_widthpx ); - + left: -$left_aside_widthpx; + width: calc( 100% + $left_aside_widthpx ); } main.region_1-on { @@ -1569,12 +1568,12 @@ blockquote { margin-top:-3px; } -dl.bb-dl > dt { +dl.bb-dl > dt { /* overriding the default dl style from bootstrap, as bootstrap's style of a bold unindented line followed by a plain unindented line is already acheivable in bbcode without dl */ - font-weight: normal; -} + font-weight: normal; +} dl.dl-terms-monospace > dt { font-family: monospace; } dl.dl-terms-bold > dt { font-weight: bold; } dl.dl-terms-italic > dt { font-style: italic; } @@ -1585,7 +1584,7 @@ dl.bb-dl:not(.dl-horizontal) > dd { margin-left: 2em; } dl.bb-dl > dd > li { - /* adding some indent so bullet-list items will line up better with + /* adding some indent so bullet-list items will line up better with dl descriptions if someone wants to be impure and combine them */ margin-left: 1em; } @@ -1599,6 +1598,7 @@ dl.bb-dl > dd > li { content:"\f069 "; } +/* Modified original CSS to match input in Redbasic */ .jothidden .bootstrap-tagsinput { border: 0px solid transparent; margin-bottom: 0px; @@ -1614,6 +1614,10 @@ dl.bb-dl > dd > li { font-size: 100%; } +.bootstrap-tagsinput input { + height: 2.5rem; +} + /* Abusing theme-green is less work than makeing a new new one */ .theme-green .back-bar .selected-bar { background-color: #000000; @@ -1633,13 +1637,14 @@ dl.bb-dl > dd > li { } .form-group.checkbox > div label { - display: block; overflow: hidden; cursor: pointer; - border: 1px solid #ccc; - border-radius: 12px; - margin:0px; + display: block; overflow: hidden; cursor: pointer; + border: 1px solid #ccc; + border-radius: 12px; + margin:0px; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + font-weight: normal; } .form-group.checkbox:hover label { @@ -1803,25 +1808,26 @@ dl.bb-dl > dd > li { } .cover-photo-review { - margin-bottom: 10px; + margin-bottom: 10px; } .hover-fx-hide { - opacity: 0; + opacity: 0; } .hover-fx-show:hover .hover-fx-hide { - opacity: 1; + opacity: 1; } -.bg-primary { - background-color: #505050 !important; +/* default highlighted text if not specified by schema: */ +span.default-highlight { + background-color: yellow; } -.nav-link.active { - background-color: #505050 !important; +.bootstrap-tagsinput { + width: 100%; } #region_3 { - display: none !important; -} + display: none !important; +} \ No newline at end of file diff --git a/ussrbasicleft/js/ussrbasicleft.js b/ussrbasicleft/js/ussrbasicleft.js index ecaf8dd..e108951 100644 --- a/ussrbasicleft/js/ussrbasicleft.js +++ b/ussrbasicleft/js/ussrbasicleft.js @@ -11,44 +11,21 @@ $(document).ready(function() { if($(window).width() < 992) { $('main').css('width', $(window).width() + $('aside').outerWidth() ); } else { - $('main').css('width', '100%' ); + $('main').css('width', '100%'); } }); } $('#css3-calc').remove(); // Remove the test element - if($(window).width() >= 992) { - $('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({ - offset_top: parseInt($('aside').css('padding-top')), - parent: 'main', - spacer: '.aside_spacer' - }); - } + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); - $('#expand-aside').on('click', toggleAside); - - $('section').on('click', function() { + $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ - toggleAside(); + toggleAside('left'); } - }); - - var left_aside_height = $('#left_aside_wrapper').height(); - - $('#left_aside_wrapper').on('click', function() { - if(left_aside_height != $('#left_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - left_aside_height = $('#left_aside_wrapper').height(); - } - }); - - - var right_aside_height = $('#right_aside_wrapper').height(); - - $('#right_aside_wrapper').on('click', function() { - if(right_aside_height != $('#right_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - right_aside_height = $('#right_aside_wrapper').height(); + else { + toggleAside('right'); } }); @@ -84,7 +61,7 @@ $(document).ready(function() { var doctitle = document.title; function checkNotify() { var notifyUpdateElem = document.getElementById('notify-update'); - if(notifyUpdateElem !== null) { + if(notifyUpdateElem !== null) { if(notifyUpdateElem.innerHTML !== "") document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle; else @@ -92,8 +69,103 @@ $(document).ready(function() { } } setInterval(function () {checkNotify();}, 10 * 1000); + + 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) { + $('html, body').css('overflow-y', 'hidden'); + } + } + else { + //a second finger hit the screen, abort the touch + touch_start = null; + } + }); + + window.addEventListener('touchend', function(e) { + $('html, 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('right'); + } + } + if (touch_end < (touch_start - touch_offset)) { + //a right -> left swipe + //toggleAside('left'); + } + } + }); + + $(document).on('hz:hqControlsClickAction', function(e) { + toggleAside('left'); + }); + }); +function setStyle(element, cssProperty) { + for (var property in cssProperty){ + element.style[property] = cssProperty[property]; + } +} + +function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + var lastScrollTop = 0; + var sticky = document.querySelector(sticky); + 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; + + var resizeObserver = new ResizeObserver(function(entries) { + stickyHeight = sticky.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 - topOffset; + 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); + +} + function makeFullScreen(full) { if(typeof full=='undefined' || full == true) { $('main').addClass('fullscreen'); @@ -104,26 +176,21 @@ function makeFullScreen(full) { $('main').removeClass('fullscreen'); $('header, nav, aside, #fullscreen-btn').show(); $('#inline-btn').hide(); - $(document.body).trigger("sticky_kit:recalc"); } } -function toggleAside() { - $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); - if($('main').hasClass('region_1-on')){ - $('html, body').css('overflow-x', ''); - $('main').removeClass('region_1-on') +function toggleAside(swipe) { + + if ($('main').hasClass('region_1-on') && swipe === 'left') { + $('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': '', left: '' }); + $('main').removeClass('region_1-on'); $('#overlay').remove(); - $('#left_aside_wrapper').trigger("sticky_kit:detach"); } - else { - $('html, body').css('overflow-x', 'hidden'); - $('main').addClass('region_1-on') - $('
').appendTo('section'); - $('#left_aside_wrapper').stick_in_parent({ - offset_top: $('nav').outerHeight(true) + 10, - parent: '#region_1', - spacer: '#left_aside_spacer' - }); + if (!$('main').hasClass('region_1-on') && swipe === 'right') { + $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': 'sticky', 'left': '0px'}); + $('main').addClass('region_1-on'); + $('
').appendTo('body').one('click', function() { toggleAside('left'); }); } } diff --git a/ussrbasicleft/php/style.php b/ussrbasicleft/php/style.php index 34c449a..85e1db0 100644 --- a/ussrbasicleft/php/style.php +++ b/ussrbasicleft/php/style.php @@ -120,10 +120,10 @@ if(file_exists('view/theme/ussrbasicleft/css/style.css')) { $x .= $schemecss; } - $aside_width = 288; + $left_aside_width = 288; + $right_aside_width = 288; - // left aside and right aside are 285px + converse width - $main_width = (($aside_width * 2) + intval($converse_width)); + $main_width = $left_aside_width + $right_aside_width + intval($converse_width); // prevent main_width smaller than 768px $main_width = (($main_width < 768) ? 768 : $main_width); @@ -150,7 +150,8 @@ if(file_exists('view/theme/ussrbasicleft/css/style.css')) { '$pmenu_top' => $pmenu_top, '$pmenu_reply' => $pmenu_reply, '$main_width' => $main_width, - '$aside_width' => $aside_width + '$left_aside_width' => $left_aside_width, + '$right_aside_width' => $right_aside_width ); echo str_replace(array_keys($options), array_values($options), $x); @@ -159,5 +160,5 @@ if(file_exists('view/theme/ussrbasicleft/css/style.css')) { // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. -// if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasicleft') -// set_pconfig(local_channel(), 'ussrbasicleft', 'schema', '---'); +if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasicleft') + set_pconfig(local_channel(), 'ussrbasicleft', 'schema', '---'); diff --git a/ussrbasicleft/php/theme.php b/ussrbasicleft/php/theme.php index 6a59b54..1f32d8c 100644 --- a/ussrbasicleft/php/theme.php +++ b/ussrbasicleft/php/theme.php @@ -2,15 +2,13 @@ /** * * Name: Ussrbasicleft - * * Description: 2 column, left navigation panel - * * Version: 4.4.2 - * * MinVersion: 3.8 - * * MaxVersion: 6.0 + * * Description: ussr.win 2 column left based on Hubzilla standard theme + * * Version: 2.1 + * * MinVersion: 5.9 + * * MaxVersion: 7.0 * * Author: Fabrixxm */ function ussrbasicleft_init(&$a) { -App::$theme_info['extends'] = 'redbasic'; - } diff --git a/ussrbasicleft/php/theme_init.php b/ussrbasicleft/php/theme_init.php index 5f73f67..0ac580f 100644 --- a/ussrbasicleft/php/theme_init.php +++ b/ussrbasicleft/php/theme_init.php @@ -13,5 +13,3 @@ head_add_js('/library/bootbox/bootbox.min.js'); head_add_js('/library/bootstrap-tagsinput/bootstrap-tagsinput.js'); head_add_js('/library/datetimepicker/jquery.datetimepicker.js'); head_add_js('/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js'); - - diff --git a/ussrbasicleft/schema/Focus-Light.php b/ussrbasicleft/schema/Focus-Light.php index 14ee130..8a542d1 100644 --- a/ussrbasicleft/schema/Focus-Light.php +++ b/ussrbasicleft/schema/Focus-Light.php @@ -3,10 +3,11 @@ if (! $nav_bg) $nav_bg = "#f8f9fa"; if (! $nav_icon_colour) - $nav_icon_colour = "rgba(0, 0, 0, 0.5);"; + $nav_icon_colour = "rgba(0, 0, 0, 0.5)"; if (! $nav_active_icon_colour) $nav_active_icon_colour = "rgba(0, 0, 0, 0.7)"; if (! $radius) $radius = "4px"; if (! $banner_colour) $banner_colour = "rgba(0, 0, 0, 0.7)"; + diff --git a/ussrbasicleft/schema/GreenGrey-Nolikes.css b/ussrbasicleft/schema/GreenGrey-Nolikes.css index 3632a8f..ddef622 100644 --- a/ussrbasicleft/schema/GreenGrey-Nolikes.css +++ b/ussrbasicleft/schema/GreenGrey-Nolikes.css @@ -324,4 +324,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicleft/schema/GreenGrey-Nominus-Nolikes.css b/ussrbasicleft/schema/GreenGrey-Nominus-Nolikes.css index 142cbd3..ef2a749 100644 --- a/ussrbasicleft/schema/GreenGrey-Nominus-Nolikes.css +++ b/ussrbasicleft/schema/GreenGrey-Nominus-Nolikes.css @@ -333,4 +333,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicleft/schema/GreenGrey-Nominus.css b/ussrbasicleft/schema/GreenGrey-Nominus.css index 8880851..30e6419 100644 --- a/ussrbasicleft/schema/GreenGrey-Nominus.css +++ b/ussrbasicleft/schema/GreenGrey-Nominus.css @@ -325,4 +325,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicleft/schema/GreenGrey.css b/ussrbasicleft/schema/GreenGrey.css index dcb6c92..cec0d9b 100644 --- a/ussrbasicleft/schema/GreenGrey.css +++ b/ussrbasicleft/schema/GreenGrey.css @@ -319,4 +319,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicleft/schema/dark.css b/ussrbasicleft/schema/dark.css index 71f7bc3..bf55fec 100644 --- a/ussrbasicleft/schema/dark.css +++ b/ussrbasicleft/schema/dark.css @@ -322,9 +322,6 @@ a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link { .text-dark { color: #aaa !important; } -a.text-dark:focus, a.text-dark:hover { - color: #ddd !important; -} .group-selected, .fileas-selected, .categories-selected, .search-selected, a.active { color: #fff !important; @@ -480,3 +477,26 @@ pre { .widget-nav-pills-checkbox:hover + a { background-color: #222; } + + +/* category badge fix: */ +a.text-dark:focus, a.text-dark:hover { + color: #ddd !important; +} + +.badge-warning { +/* background-color: #ffc927; */ +} +.badge-warning a.text-dark { + color: #333 !important; +} +.badge-warning a.text-dark:focus, .badge-warning a.text-dark:hover { + color: red !important; + text-decoration: none; +} + +/* fix color for highlithed text */ +span.default-highlight { + color: #333; + border-radius: 4px; +} diff --git a/ussrbasicleft/schema/zlax.css b/ussrbasicleft/schema/zlax.css index 53f2feb..4f862de 100644 --- a/ussrbasicleft/schema/zlax.css +++ b/ussrbasicleft/schema/zlax.css @@ -345,4 +345,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicpub/css/style.css b/ussrbasicpub/css/style.css index f051de4..a64af42 100644 --- a/ussrbasicpub/css/style.css +++ b/ussrbasicpub/css/style.css @@ -22,18 +22,21 @@ body { margin: 0px; } -aside { - width: $aside_widthpx; - min-width: $aside_widthpx; - max-width: $aside_widthpx; -} - -aside #region_1 { +aside#region_1 { border-right: 1px solid transparent; + width: $left_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $left_aside_widthpx; } -aside #left_aside_wrapper, -aside #right_aside_wrapper { +aside#region_3 { + width: $right_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $right_aside_widthpx; +} + +aside#left_aside_wrapper, +aside#right_aside_wrapper { margin-bottom: 10px; } @@ -44,14 +47,13 @@ main { } #overlay { - position: absolute; + position: fixed; top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, .5); + left: $left_aside_widthpx; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, .3); cursor: pointer; - z-index: 1028; } h1, .h1 { @@ -362,7 +364,7 @@ footer { bottom:1px; text-align: right; padding-bottom: 1em; - padding-right: 3em; + padding-right: 3em; } .birthday-today, @@ -481,7 +483,7 @@ footer { .pager_next, .pager-prev, .pager-next, -.pager_n { +.pager_n { border: 1px solid #ccc; background: transparent; padding: 4px; @@ -663,7 +665,7 @@ nav .acpopup { } .profile-match-name { - width: 116px; + width: 120px; height: 1.5em; overflow: hidden !important; } @@ -679,8 +681,8 @@ nav .acpopup { .profile-match-wrapper { float: left; - width: 118px; - height: 118px; + width: 120px; + height: 150px; padding: 10px; margin: 8px 10px 0 0; border-top: 1px solid #eee; @@ -735,7 +737,7 @@ nav .acpopup { height: auto; overflow: auto; border-bottom: 2px solid #cccccc; padding-bottom: 1em; - margin-bottom: 1em; + margin-bottom: 1em; } .oauthapp img { float: left; @@ -777,7 +779,7 @@ div.jGrowl div.info { } #jGrowl.top-right { top: 4.5rem; - right: 15px; + right: .25rem; } div.jGrowl div.jGrowl-notification { @@ -796,8 +798,6 @@ div.jGrowl div.jGrowl-notification { } .contactname { - font-weight: bold; - color: $font_colour; display: block; overflow: hidden; text-overflow: ellipsis; @@ -872,10 +872,6 @@ div.jGrowl div.jGrowl-notification { margin-left: 20px; } -.reshared-content img { - width: 100%; -} - .shared_header img { border-radius: $radius; margin-right: 10px; @@ -884,21 +880,19 @@ div.jGrowl div.jGrowl-notification { .tag1 { font-size : 0.9em !important; } + .tag2 { font-size : 1.0em !important; } - .tag3 { font-size : 1.1em !important; } - .tag4 { font-size : 1.2em !important; } - .tag5 { font-size : 1.3em !important; } @@ -918,12 +912,10 @@ div.jGrowl div.jGrowl-notification { font-size : 1.6em !important; } - .tag9 { font-size : 1.7em !important; } - .tag10 { font-size : 1.8em !important; } @@ -1023,7 +1015,7 @@ th,td { max-width: 19.4em; overflow: hidden; } - + /* mail */ img.mail-conv-sender-photo { @@ -1335,6 +1327,14 @@ img.mail-conv-sender-photo { border-bottom: 3px solid $comment_item_colour; } +.section-content-success-wrapper { + padding: 21px 10px; + color: #155724; + background-color: #d4edda; + border-bottom: 3px solid $comment_item_colour; + text-align: center; +} + .section-content-info-wrapper { padding: 21px 10px; color: #0c5460; @@ -1358,7 +1358,8 @@ img.mail-conv-sender-photo { border-bottom: 3px solid $comment_item_colour; text-align: center; } - +.section-content-tools-wrapper .section-content-success-wrapper, +.section-content-wrapper .section-content-success-wrapper, .section-content-tools-wrapper .section-content-info-wrapper, .section-content-wrapper .section-content-info-wrapper, .section-content-tools-wrapper .section-content-warning-wrapper, @@ -1524,10 +1525,8 @@ blockquote { } main { - - left: -$aside_widthpx; - width: calc( 100% + $aside_widthpx ); - + left: -$left_aside_widthpx; + width: calc( 100% + $left_aside_widthpx ); } main.region_1-on { @@ -1569,12 +1568,12 @@ blockquote { margin-top:-3px; } -dl.bb-dl > dt { +dl.bb-dl > dt { /* overriding the default dl style from bootstrap, as bootstrap's style of a bold unindented line followed by a plain unindented line is already acheivable in bbcode without dl */ - font-weight: normal; -} + font-weight: normal; +} dl.dl-terms-monospace > dt { font-family: monospace; } dl.dl-terms-bold > dt { font-weight: bold; } dl.dl-terms-italic > dt { font-style: italic; } @@ -1585,7 +1584,7 @@ dl.bb-dl:not(.dl-horizontal) > dd { margin-left: 2em; } dl.bb-dl > dd > li { - /* adding some indent so bullet-list items will line up better with + /* adding some indent so bullet-list items will line up better with dl descriptions if someone wants to be impure and combine them */ margin-left: 1em; } @@ -1599,6 +1598,7 @@ dl.bb-dl > dd > li { content:"\f069 "; } +/* Modified original CSS to match input in Redbasic */ .jothidden .bootstrap-tagsinput { border: 0px solid transparent; margin-bottom: 0px; @@ -1614,6 +1614,10 @@ dl.bb-dl > dd > li { font-size: 100%; } +.bootstrap-tagsinput input { + height: 2.5rem; +} + /* Abusing theme-green is less work than makeing a new new one */ .theme-green .back-bar .selected-bar { background-color: #000000; @@ -1633,13 +1637,14 @@ dl.bb-dl > dd > li { } .form-group.checkbox > div label { - display: block; overflow: hidden; cursor: pointer; - border: 1px solid #ccc; - border-radius: 12px; - margin:0px; + display: block; overflow: hidden; cursor: pointer; + border: 1px solid #ccc; + border-radius: 12px; + margin:0px; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + font-weight: normal; } .form-group.checkbox:hover label { @@ -1803,25 +1808,26 @@ dl.bb-dl > dd > li { } .cover-photo-review { - margin-bottom: 10px; + margin-bottom: 10px; } .hover-fx-hide { - opacity: 0; + opacity: 0; } .hover-fx-show:hover .hover-fx-hide { - opacity: 1; + opacity: 1; } -.bg-primary { - background-color: #505050 !important; +/* default highlighted text if not specified by schema: */ +span.default-highlight { + background-color: yellow; } -.nav-link.active { - background-color: #505050 !important; +.bootstrap-tagsinput { + width: 100%; } #region_3 { - display: none !important; -} + display: none !important; +} \ No newline at end of file diff --git a/ussrbasicpub/js/ussrbasicpub.js b/ussrbasicpub/js/ussrbasicpub.js index b8f8c34..87b7a5e 100644 --- a/ussrbasicpub/js/ussrbasicpub.js +++ b/ussrbasicpub/js/ussrbasicpub.js @@ -11,44 +11,21 @@ $(document).ready(function() { if($(window).width() < 992) { $('main').css('width', $(window).width() + $('aside').outerWidth() ); } else { - $('main').css('width', '100%' ); + $('main').css('width', '100%'); } }); } $('#css3-calc').remove(); // Remove the test element - if($(window).width() >= 992) { - $('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({ - offset_top: parseInt($('aside').css('padding-top')), - parent: 'main', - spacer: '.aside_spacer' - }); - } + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); - $('#expand-aside').on('click', toggleAside); - - $('section').on('click', function() { + $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ - toggleAside(); + toggleAside('left'); } - }); - - var left_aside_height = $('#left_aside_wrapper').height(); - - $('#left_aside_wrapper').on('click', function() { - if(left_aside_height != $('#left_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - left_aside_height = $('#left_aside_wrapper').height(); - } - }); - - - var right_aside_height = $('#right_aside_wrapper').height(); - - $('#right_aside_wrapper').on('click', function() { - if(right_aside_height != $('#right_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - right_aside_height = $('#right_aside_wrapper').height(); + else { + toggleAside('right'); } }); @@ -84,7 +61,7 @@ $(document).ready(function() { var doctitle = document.title; function checkNotify() { var notifyUpdateElem = document.getElementById('notify-update'); - if(notifyUpdateElem !== null) { + if(notifyUpdateElem !== null) { if(notifyUpdateElem.innerHTML !== "") document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle; else @@ -92,8 +69,103 @@ $(document).ready(function() { } } setInterval(function () {checkNotify();}, 10 * 1000); + + 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) { + $('html, body').css('overflow-y', 'hidden'); + } + } + else { + //a second finger hit the screen, abort the touch + touch_start = null; + } + }); + + window.addEventListener('touchend', function(e) { + $('html, 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('right'); + } + } + if (touch_end < (touch_start - touch_offset)) { + //a right -> left swipe + //toggleAside('left'); + } + } + }); + + $(document).on('hz:hqControlsClickAction', function(e) { + toggleAside('left'); + }); + }); +function setStyle(element, cssProperty) { + for (var property in cssProperty){ + element.style[property] = cssProperty[property]; + } +} + +function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + var lastScrollTop = 0; + var sticky = document.querySelector(sticky); + 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; + + var resizeObserver = new ResizeObserver(function(entries) { + stickyHeight = sticky.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 - topOffset; + 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); + +} + function makeFullScreen(full) { if(typeof full=='undefined' || full == true) { $('main').addClass('fullscreen'); @@ -104,26 +176,21 @@ function makeFullScreen(full) { $('main').removeClass('fullscreen'); $('header, nav, aside, #fullscreen-btn').show(); $('#inline-btn').hide(); - $(document.body).trigger("sticky_kit:recalc"); } } -function toggleAside() { - $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); - if($('main').hasClass('region_1-on')){ - $('html, body').css('overflow-x', ''); - $('main').removeClass('region_1-on') +function toggleAside(swipe) { + + if ($('main').hasClass('region_1-on') && swipe === 'left') { + $('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': '', left: '' }); + $('main').removeClass('region_1-on'); $('#overlay').remove(); - $('#left_aside_wrapper').trigger("sticky_kit:detach"); } - else { - $('html, body').css('overflow-x', 'hidden'); - $('main').addClass('region_1-on') - $('
').appendTo('section'); - $('#left_aside_wrapper').stick_in_parent({ - offset_top: $('nav').outerHeight(true) + 10, - parent: '#region_1', - spacer: '#left_aside_spacer' - }); + if (!$('main').hasClass('region_1-on') && swipe === 'right') { + $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': 'sticky', 'left': '0px'}); + $('main').addClass('region_1-on'); + $('
').appendTo('body').one('click', function() { toggleAside('left'); }); } } diff --git a/ussrbasicpub/php/style.php b/ussrbasicpub/php/style.php index 544068d..2bb9df6 100644 --- a/ussrbasicpub/php/style.php +++ b/ussrbasicpub/php/style.php @@ -120,10 +120,10 @@ if(file_exists('view/theme/ussrbasicpub/css/style.css')) { $x .= $schemecss; } - $aside_width = 288; + $left_aside_width = 288; + $right_aside_width = 288; - // left aside and right aside are 285px + converse width - $main_width = (($aside_width * 2) + intval($converse_width)); + $main_width = $left_aside_width + $right_aside_width + intval($converse_width); // prevent main_width smaller than 768px $main_width = (($main_width < 768) ? 768 : $main_width); @@ -150,7 +150,8 @@ if(file_exists('view/theme/ussrbasicpub/css/style.css')) { '$pmenu_top' => $pmenu_top, '$pmenu_reply' => $pmenu_reply, '$main_width' => $main_width, - '$aside_width' => $aside_width + '$left_aside_width' => $left_aside_width, + '$right_aside_width' => $right_aside_width ); echo str_replace(array_keys($options), array_values($options), $x); @@ -159,5 +160,5 @@ if(file_exists('view/theme/ussrbasicpub/css/style.css')) { // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. -// if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasicpub') -// set_pconfig(local_channel(), 'ussrbasicpub', 'schema', '---'); +if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasicpub') + set_pconfig(local_channel(), 'ussrbasicpub', 'schema', '---'); diff --git a/ussrbasicpub/php/theme.php b/ussrbasicpub/php/theme.php index c286303..49155df 100644 --- a/ussrbasicpub/php/theme.php +++ b/ussrbasicpub/php/theme.php @@ -2,15 +2,13 @@ /** * * Name: Ussrbasicpub - * * Description: 2 column theme with special informative navbar - * * Version: 4.4.2 - * * MinVersion: 3.8 - * * MaxVersion: 6.0 + * * Description: ussr.win 2 column pub based on Hubzilla standard theme + * * Version: 2.1 + * * MinVersion: 5.9 + * * MaxVersion: 7.0 * * Author: Fabrixxm */ function ussrbasicpub_init(&$a) { -App::$theme_info['extends'] = 'redbasic'; - } diff --git a/ussrbasicpub/php/theme_init.php b/ussrbasicpub/php/theme_init.php index 5f73f67..0ac580f 100644 --- a/ussrbasicpub/php/theme_init.php +++ b/ussrbasicpub/php/theme_init.php @@ -13,5 +13,3 @@ head_add_js('/library/bootbox/bootbox.min.js'); head_add_js('/library/bootstrap-tagsinput/bootstrap-tagsinput.js'); head_add_js('/library/datetimepicker/jquery.datetimepicker.js'); head_add_js('/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js'); - - diff --git a/ussrbasicpub/schema/Focus-Light.php b/ussrbasicpub/schema/Focus-Light.php index 14ee130..8a542d1 100644 --- a/ussrbasicpub/schema/Focus-Light.php +++ b/ussrbasicpub/schema/Focus-Light.php @@ -3,10 +3,11 @@ if (! $nav_bg) $nav_bg = "#f8f9fa"; if (! $nav_icon_colour) - $nav_icon_colour = "rgba(0, 0, 0, 0.5);"; + $nav_icon_colour = "rgba(0, 0, 0, 0.5)"; if (! $nav_active_icon_colour) $nav_active_icon_colour = "rgba(0, 0, 0, 0.7)"; if (! $radius) $radius = "4px"; if (! $banner_colour) $banner_colour = "rgba(0, 0, 0, 0.7)"; + diff --git a/ussrbasicpub/schema/GreenGrey-Nolikes.css b/ussrbasicpub/schema/GreenGrey-Nolikes.css index 3632a8f..ddef622 100644 --- a/ussrbasicpub/schema/GreenGrey-Nolikes.css +++ b/ussrbasicpub/schema/GreenGrey-Nolikes.css @@ -324,4 +324,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicpub/schema/GreenGrey-Nominus-Nolikes.css b/ussrbasicpub/schema/GreenGrey-Nominus-Nolikes.css index 142cbd3..ef2a749 100644 --- a/ussrbasicpub/schema/GreenGrey-Nominus-Nolikes.css +++ b/ussrbasicpub/schema/GreenGrey-Nominus-Nolikes.css @@ -333,4 +333,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicpub/schema/GreenGrey-Nominus.css b/ussrbasicpub/schema/GreenGrey-Nominus.css index 8880851..30e6419 100644 --- a/ussrbasicpub/schema/GreenGrey-Nominus.css +++ b/ussrbasicpub/schema/GreenGrey-Nominus.css @@ -325,4 +325,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicpub/schema/GreenGrey.css b/ussrbasicpub/schema/GreenGrey.css index dcb6c92..cec0d9b 100644 --- a/ussrbasicpub/schema/GreenGrey.css +++ b/ussrbasicpub/schema/GreenGrey.css @@ -319,4 +319,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicpub/schema/dark.css b/ussrbasicpub/schema/dark.css index 71f7bc3..bf55fec 100644 --- a/ussrbasicpub/schema/dark.css +++ b/ussrbasicpub/schema/dark.css @@ -322,9 +322,6 @@ a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link { .text-dark { color: #aaa !important; } -a.text-dark:focus, a.text-dark:hover { - color: #ddd !important; -} .group-selected, .fileas-selected, .categories-selected, .search-selected, a.active { color: #fff !important; @@ -480,3 +477,26 @@ pre { .widget-nav-pills-checkbox:hover + a { background-color: #222; } + + +/* category badge fix: */ +a.text-dark:focus, a.text-dark:hover { + color: #ddd !important; +} + +.badge-warning { +/* background-color: #ffc927; */ +} +.badge-warning a.text-dark { + color: #333 !important; +} +.badge-warning a.text-dark:focus, .badge-warning a.text-dark:hover { + color: red !important; + text-decoration: none; +} + +/* fix color for highlithed text */ +span.default-highlight { + color: #333; + border-radius: 4px; +} diff --git a/ussrbasicpub/schema/zlax.css b/ussrbasicpub/schema/zlax.css index 53f2feb..4f862de 100644 --- a/ussrbasicpub/schema/zlax.css +++ b/ussrbasicpub/schema/zlax.css @@ -345,4 +345,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicright/css/style.css b/ussrbasicright/css/style.css index e817e4a..ac5b2da 100644 --- a/ussrbasicright/css/style.css +++ b/ussrbasicright/css/style.css @@ -22,18 +22,21 @@ body { margin: 0px; } -aside { - width: $aside_widthpx; - min-width: $aside_widthpx; - max-width: $aside_widthpx; -} - -aside #region_1 { +aside#region_1 { border-right: 1px solid transparent; + width: $left_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $left_aside_widthpx; } -aside #left_aside_wrapper, -aside #right_aside_wrapper { +aside#region_3 { + width: $right_aside_widthpx; + min-width: $left_aside_widthpx; + max-width: $right_aside_widthpx; +} + +aside#left_aside_wrapper, +aside#right_aside_wrapper { margin-bottom: 10px; } @@ -44,14 +47,13 @@ main { } #overlay { - position: absolute; + position: fixed; top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, .5); + left: $left_aside_widthpx; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, .3); cursor: pointer; - z-index: 1028; } h1, .h1 { @@ -362,7 +364,7 @@ footer { bottom:1px; text-align: right; padding-bottom: 1em; - padding-right: 3em; + padding-right: 3em; } .birthday-today, @@ -481,7 +483,7 @@ footer { .pager_next, .pager-prev, .pager-next, -.pager_n { +.pager_n { border: 1px solid #ccc; background: transparent; padding: 4px; @@ -663,7 +665,7 @@ nav .acpopup { } .profile-match-name { - width: 116px; + width: 120px; height: 1.5em; overflow: hidden !important; } @@ -679,8 +681,8 @@ nav .acpopup { .profile-match-wrapper { float: left; - width: 118px; - height: 118px; + width: 120px; + height: 150px; padding: 10px; margin: 8px 10px 0 0; border-top: 1px solid #eee; @@ -735,7 +737,7 @@ nav .acpopup { height: auto; overflow: auto; border-bottom: 2px solid #cccccc; padding-bottom: 1em; - margin-bottom: 1em; + margin-bottom: 1em; } .oauthapp img { float: left; @@ -777,7 +779,7 @@ div.jGrowl div.info { } #jGrowl.top-right { top: 4.5rem; - right: 15px; + right: .25rem; } div.jGrowl div.jGrowl-notification { @@ -796,8 +798,6 @@ div.jGrowl div.jGrowl-notification { } .contactname { - font-weight: bold; - color: $font_colour; display: block; overflow: hidden; text-overflow: ellipsis; @@ -872,10 +872,6 @@ div.jGrowl div.jGrowl-notification { margin-left: 20px; } -.reshared-content img { - width: 100%; -} - .shared_header img { border-radius: $radius; margin-right: 10px; @@ -884,21 +880,19 @@ div.jGrowl div.jGrowl-notification { .tag1 { font-size : 0.9em !important; } + .tag2 { font-size : 1.0em !important; } - .tag3 { font-size : 1.1em !important; } - .tag4 { font-size : 1.2em !important; } - .tag5 { font-size : 1.3em !important; } @@ -918,12 +912,10 @@ div.jGrowl div.jGrowl-notification { font-size : 1.6em !important; } - .tag9 { font-size : 1.7em !important; } - .tag10 { font-size : 1.8em !important; } @@ -1023,7 +1015,7 @@ th,td { max-width: 19.4em; overflow: hidden; } - + /* mail */ img.mail-conv-sender-photo { @@ -1335,6 +1327,14 @@ img.mail-conv-sender-photo { border-bottom: 3px solid $comment_item_colour; } +.section-content-success-wrapper { + padding: 21px 10px; + color: #155724; + background-color: #d4edda; + border-bottom: 3px solid $comment_item_colour; + text-align: center; +} + .section-content-info-wrapper { padding: 21px 10px; color: #0c5460; @@ -1358,7 +1358,8 @@ img.mail-conv-sender-photo { border-bottom: 3px solid $comment_item_colour; text-align: center; } - +.section-content-tools-wrapper .section-content-success-wrapper, +.section-content-wrapper .section-content-success-wrapper, .section-content-tools-wrapper .section-content-info-wrapper, .section-content-wrapper .section-content-info-wrapper, .section-content-tools-wrapper .section-content-warning-wrapper, @@ -1524,10 +1525,8 @@ blockquote { } main { - - left: 0px; - width: 100%; - + left: -$left_aside_widthpx; + width: calc( 100% + $left_aside_widthpx ); } main.region_1-on { @@ -1569,12 +1568,12 @@ blockquote { margin-top:-3px; } -dl.bb-dl > dt { +dl.bb-dl > dt { /* overriding the default dl style from bootstrap, as bootstrap's style of a bold unindented line followed by a plain unindented line is already acheivable in bbcode without dl */ - font-weight: normal; -} + font-weight: normal; +} dl.dl-terms-monospace > dt { font-family: monospace; } dl.dl-terms-bold > dt { font-weight: bold; } dl.dl-terms-italic > dt { font-style: italic; } @@ -1585,7 +1584,7 @@ dl.bb-dl:not(.dl-horizontal) > dd { margin-left: 2em; } dl.bb-dl > dd > li { - /* adding some indent so bullet-list items will line up better with + /* adding some indent so bullet-list items will line up better with dl descriptions if someone wants to be impure and combine them */ margin-left: 1em; } @@ -1599,6 +1598,7 @@ dl.bb-dl > dd > li { content:"\f069 "; } +/* Modified original CSS to match input in Redbasic */ .jothidden .bootstrap-tagsinput { border: 0px solid transparent; margin-bottom: 0px; @@ -1614,6 +1614,10 @@ dl.bb-dl > dd > li { font-size: 100%; } +.bootstrap-tagsinput input { + height: 2.5rem; +} + /* Abusing theme-green is less work than makeing a new new one */ .theme-green .back-bar .selected-bar { background-color: #000000; @@ -1633,13 +1637,14 @@ dl.bb-dl > dd > li { } .form-group.checkbox > div label { - display: block; overflow: hidden; cursor: pointer; - border: 1px solid #ccc; - border-radius: 12px; - margin:0px; + display: block; overflow: hidden; cursor: pointer; + border: 1px solid #ccc; + border-radius: 12px; + margin:0px; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + font-weight: normal; } .form-group.checkbox:hover label { @@ -1803,25 +1808,26 @@ dl.bb-dl > dd > li { } .cover-photo-review { - margin-bottom: 10px; + margin-bottom: 10px; } .hover-fx-hide { - opacity: 0; + opacity: 0; } .hover-fx-show:hover .hover-fx-hide { - opacity: 1; + opacity: 1; } -.bg-primary { - background-color: #505050 !important; +/* default highlighted text if not specified by schema: */ +span.default-highlight { + background-color: yellow; } -.nav-link.active { - background-color: #505050 !important; +.bootstrap-tagsinput { + width: 100%; } #region_1 { - display: none; + display: none !important;; } diff --git a/ussrbasicright/js/ussrbasicright.js b/ussrbasicright/js/ussrbasicright.js index 0881c9d..608a758 100644 --- a/ussrbasicright/js/ussrbasicright.js +++ b/ussrbasicright/js/ussrbasicright.js @@ -11,44 +11,21 @@ $(document).ready(function() { if($(window).width() < 992) { $('main').css('width', $(window).width() + $('aside').outerWidth() ); } else { - $('main').css('width', '100%' ); + $('main').css('width', '100%'); } }); } $('#css3-calc').remove(); // Remove the test element - if($(window).width() >= 992) { - $('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({ - offset_top: parseInt($('aside').css('padding-top')), - parent: 'main', - spacer: '.aside_spacer' - }); - } + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); - $('#expand-aside').on('click', toggleAside); - - $('section').on('click', function() { + $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ - toggleAside(); + toggleAside('left'); } - }); - - var left_aside_height = $('#left_aside_wrapper').height(); - - $('#left_aside_wrapper').on('click', function() { - if(left_aside_height != $('#left_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - left_aside_height = $('#left_aside_wrapper').height(); - } - }); - - - var right_aside_height = $('#right_aside_wrapper').height(); - - $('#right_aside_wrapper').on('click', function() { - if(right_aside_height != $('#right_aside_wrapper').height()) { - $(document.body).trigger("sticky_kit:recalc"); - right_aside_height = $('#right_aside_wrapper').height(); + else { + toggleAside('right'); } }); @@ -84,7 +61,7 @@ $(document).ready(function() { var doctitle = document.title; function checkNotify() { var notifyUpdateElem = document.getElementById('notify-update'); - if(notifyUpdateElem !== null) { + if(notifyUpdateElem !== null) { if(notifyUpdateElem.innerHTML !== "") document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle; else @@ -92,8 +69,103 @@ $(document).ready(function() { } } setInterval(function () {checkNotify();}, 10 * 1000); + + 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) { + $('html, body').css('overflow-y', 'hidden'); + } + } + else { + //a second finger hit the screen, abort the touch + touch_start = null; + } + }); + + window.addEventListener('touchend', function(e) { + $('html, 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('right'); + } + } + if (touch_end < (touch_start - touch_offset)) { + //a right -> left swipe + //toggleAside('left'); + } + } + }); + + $(document).on('hz:hqControlsClickAction', function(e) { + toggleAside('left'); + }); + }); +function setStyle(element, cssProperty) { + for (var property in cssProperty){ + element.style[property] = cssProperty[property]; + } +} + +function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) { + var lastScrollTop = 0; + var sticky = document.querySelector(sticky); + 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; + + var resizeObserver = new ResizeObserver(function(entries) { + stickyHeight = sticky.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 - topOffset; + 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); + +} + function makeFullScreen(full) { if(typeof full=='undefined' || full == true) { $('main').addClass('fullscreen'); @@ -104,29 +176,21 @@ function makeFullScreen(full) { $('main').removeClass('fullscreen'); $('header, nav, aside, #fullscreen-btn').show(); $('#inline-btn').hide(); - $(document.body).trigger("sticky_kit:recalc"); } } -function toggleAside() { - $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); - if($('main').hasClass('region_1-on')){ - $('html, body').css('overflow-x', ''); - $('#region_1').css('display', 'none'); - $('main').removeClass('region_1-on') +function toggleAside(swipe) { + + if ($('main').hasClass('region_1-on') && swipe === 'left') { + $('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': '', left: '' }); + $('main').removeClass('region_1-on'); $('#overlay').remove(); - $('#right_aside_wrapper').trigger("sticky_kit:detach"); } - else { - $('html, body').css('overflow-x', 'hidden'); - $('#region_1').css('display', 'initial'); - $('#left_aside_wrapper').css('width', '274px'); - $('main').addClass('region_1-on') - $('
').appendTo('section'); - $('#left_aside_wrapper').stick_in_parent({ - offset_top: $('nav').outerHeight(true) + 10, - parent: '#region_1', - spacer: '#left_aside_spacer' - }); + if (!$('main').hasClass('region_1-on') && swipe === 'right') { + $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); + $('html, body').css({ 'position': 'sticky', 'left': '0px'}); + $('main').addClass('region_1-on'); + $('
').appendTo('body').one('click', function() { toggleAside('left'); }); } } diff --git a/ussrbasicright/php/style.php b/ussrbasicright/php/style.php index d42b8b1..937751f 100644 --- a/ussrbasicright/php/style.php +++ b/ussrbasicright/php/style.php @@ -120,10 +120,10 @@ if(file_exists('view/theme/ussrbasicright/css/style.css')) { $x .= $schemecss; } - $aside_width = 288; + $left_aside_width = 288; + $right_aside_width = 288; - // left aside and right aside are 285px + converse width - $main_width = (($aside_width * 2) + intval($converse_width)); + $main_width = $left_aside_width + $right_aside_width + intval($converse_width); // prevent main_width smaller than 768px $main_width = (($main_width < 768) ? 768 : $main_width); @@ -150,7 +150,8 @@ if(file_exists('view/theme/ussrbasicright/css/style.css')) { '$pmenu_top' => $pmenu_top, '$pmenu_reply' => $pmenu_reply, '$main_width' => $main_width, - '$aside_width' => $aside_width + '$left_aside_width' => $left_aside_width, + '$right_aside_width' => $right_aside_width ); echo str_replace(array_keys($options), array_values($options), $x); @@ -159,5 +160,5 @@ if(file_exists('view/theme/ussrbasicright/css/style.css')) { // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. -// if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasicright') -// set_pconfig(local_channel(), 'ussrbasicright', 'schema', '---'); +if(local_channel() && App::$channel && App::$channel['channel_theme'] != 'ussrbasicright') + set_pconfig(local_channel(), 'ussrbasicright', 'schema', '---'); diff --git a/ussrbasicright/php/theme.php b/ussrbasicright/php/theme.php index e6145e4..6a0e05a 100644 --- a/ussrbasicright/php/theme.php +++ b/ussrbasicright/php/theme.php @@ -2,15 +2,13 @@ /** * * Name: Ussrbasicright - * * Description: 2 column, right navigation panel [BETA - some features could not work] - * * Version: 4.4.2 - * * MinVersion: 3.8 - * * MaxVersion: 6.0 + * * Description: ussr.win 2 column left based on Hubzilla standard theme + * * Version: 2.1 + * * MinVersion: 5.9 + * * MaxVersion: 7.0 * * Author: Fabrixxm */ function ussrbasicright_init(&$a) { -App::$theme_info['extends'] = 'redbasic'; - } diff --git a/ussrbasicright/php/theme_init.php b/ussrbasicright/php/theme_init.php index 5f73f67..0ac580f 100644 --- a/ussrbasicright/php/theme_init.php +++ b/ussrbasicright/php/theme_init.php @@ -13,5 +13,3 @@ head_add_js('/library/bootbox/bootbox.min.js'); head_add_js('/library/bootstrap-tagsinput/bootstrap-tagsinput.js'); head_add_js('/library/datetimepicker/jquery.datetimepicker.js'); head_add_js('/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js'); - - diff --git a/ussrbasicright/schema/Focus-Light.php b/ussrbasicright/schema/Focus-Light.php index 14ee130..8a542d1 100644 --- a/ussrbasicright/schema/Focus-Light.php +++ b/ussrbasicright/schema/Focus-Light.php @@ -3,10 +3,11 @@ if (! $nav_bg) $nav_bg = "#f8f9fa"; if (! $nav_icon_colour) - $nav_icon_colour = "rgba(0, 0, 0, 0.5);"; + $nav_icon_colour = "rgba(0, 0, 0, 0.5)"; if (! $nav_active_icon_colour) $nav_active_icon_colour = "rgba(0, 0, 0, 0.7)"; if (! $radius) $radius = "4px"; if (! $banner_colour) $banner_colour = "rgba(0, 0, 0, 0.7)"; + diff --git a/ussrbasicright/schema/GreenGrey-Nolikes.css b/ussrbasicright/schema/GreenGrey-Nolikes.css index 3632a8f..ddef622 100644 --- a/ussrbasicright/schema/GreenGrey-Nolikes.css +++ b/ussrbasicright/schema/GreenGrey-Nolikes.css @@ -324,4 +324,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicright/schema/GreenGrey-Nominus-Nolikes.css b/ussrbasicright/schema/GreenGrey-Nominus-Nolikes.css index 142cbd3..ef2a749 100644 --- a/ussrbasicright/schema/GreenGrey-Nominus-Nolikes.css +++ b/ussrbasicright/schema/GreenGrey-Nominus-Nolikes.css @@ -333,4 +333,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicright/schema/GreenGrey-Nominus.css b/ussrbasicright/schema/GreenGrey-Nominus.css index 8880851..30e6419 100644 --- a/ussrbasicright/schema/GreenGrey-Nominus.css +++ b/ussrbasicright/schema/GreenGrey-Nominus.css @@ -325,4 +325,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicright/schema/GreenGrey.css b/ussrbasicright/schema/GreenGrey.css index dcb6c92..cec0d9b 100644 --- a/ussrbasicright/schema/GreenGrey.css +++ b/ussrbasicright/schema/GreenGrey.css @@ -319,4 +319,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +} diff --git a/ussrbasicright/schema/dark.css b/ussrbasicright/schema/dark.css index 71f7bc3..bf55fec 100644 --- a/ussrbasicright/schema/dark.css +++ b/ussrbasicright/schema/dark.css @@ -322,9 +322,6 @@ a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link { .text-dark { color: #aaa !important; } -a.text-dark:focus, a.text-dark:hover { - color: #ddd !important; -} .group-selected, .fileas-selected, .categories-selected, .search-selected, a.active { color: #fff !important; @@ -480,3 +477,26 @@ pre { .widget-nav-pills-checkbox:hover + a { background-color: #222; } + + +/* category badge fix: */ +a.text-dark:focus, a.text-dark:hover { + color: #ddd !important; +} + +.badge-warning { +/* background-color: #ffc927; */ +} +.badge-warning a.text-dark { + color: #333 !important; +} +.badge-warning a.text-dark:focus, .badge-warning a.text-dark:hover { + color: red !important; + text-decoration: none; +} + +/* fix color for highlithed text */ +span.default-highlight { + color: #333; + border-radius: 4px; +} diff --git a/ussrbasicright/schema/zlax.css b/ussrbasicright/schema/zlax.css index 53f2feb..4f862de 100644 --- a/ussrbasicright/schema/zlax.css +++ b/ussrbasicright/schema/zlax.css @@ -345,4 +345,13 @@ blockquote { .table { color: #dddccc; -} \ No newline at end of file +} + +#notifications, #nav-notify-sub, #nav-network-sub, #nav-all_events-sub { + border: 1px solid #383c4a !important; + border-bottom-color: #383c4a !important; +} + +#upgrade_info_aside { + border-color: #383c4a !important; +}