From 782abc7bb978feae4b9b20e1b408857a2289059b Mon Sep 17 00:00:00 2001 From: Ruben Date: Wed, 23 Jul 2025 16:09:16 -0500 Subject: [PATCH] update sharkey css, add roundify js --- assets/synth.download/sharkey/roundify.js | 53 +++++++++++++++++++ assets/synth.download/sharkey/roundify.min.js | 1 + assets/synth.download/sharkey/sharkey.css | 32 ++++++----- assets/synth.download/sharkey/sharkey.min.css | 2 +- 4 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 assets/synth.download/sharkey/roundify.js create mode 100644 assets/synth.download/sharkey/roundify.min.js diff --git a/assets/synth.download/sharkey/roundify.js b/assets/synth.download/sharkey/roundify.js new file mode 100644 index 0000000..c9610ab --- /dev/null +++ b/assets/synth.download/sharkey/roundify.js @@ -0,0 +1,53 @@ +// sets misskey corner roundness for users who are logged out +(function() { + 'use strict'; + + function roundifyLoggedOut() { + // try and see if user has a session + const hasAuthToken = localStorage.getItem('account'); + + // check if we have visitor-root + const isWelcomePage = document.querySelector('[class*="visitor-root-"]'); + + // compared both values to execute + const isLoggedOut = !hasAuthToken && isWelcomePage; + + if (isLoggedOut) { + // add radius-misskey if logged out + document.documentElement.classList.add('radius-misskey'); + observer.disconnect(); // stop observing once we've done our job + } + } + + // watch and wait to execute once sharkey modifies the html element + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + // check if html element changes or elements were added + if ((mutation.type === 'attributes' && mutation.attributeName === 'class') || + mutation.type === 'childList') { + roundifyLoggedOut(); + } + }); + }); + + // observe both html classes and body elements for changes + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['class'], + childList: true, + subtree: true + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); + + // also run immediately as a backup + roundifyLoggedOut(); + + // and once it finishes loading + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', roundifyLoggedOut); + } +})(); \ No newline at end of file diff --git a/assets/synth.download/sharkey/roundify.min.js b/assets/synth.download/sharkey/roundify.min.js new file mode 100644 index 0000000..ae888ae --- /dev/null +++ b/assets/synth.download/sharkey/roundify.min.js @@ -0,0 +1 @@ +!function(){"use strict";function t(){const t=localStorage.getItem("account"),n=document.querySelector('[class*="visitor-root-"]');!t&&n&&(document.documentElement.classList.add("radius-misskey"),e.disconnect())}const e=new MutationObserver(function(e){e.forEach(function(e){("attributes"===e.type&&"class"===e.attributeName||"childList"===e.type)&&t()})});e.observe(document.documentElement,{attributes:!0,attributeFilter:["class"],childList:!0,subtree:!0}),e.observe(document.body,{childList:!0,subtree:!0}),t(),"loading"===document.readyState&&document.addEventListener("DOMContentLoaded",t)}(); \ No newline at end of file diff --git a/assets/synth.download/sharkey/sharkey.css b/assets/synth.download/sharkey/sharkey.css index 4686375..e973b49 100644 --- a/assets/synth.download/sharkey/sharkey.css +++ b/assets/synth.download/sharkey/sharkey.css @@ -10,17 +10,21 @@ #sharkey_app { [class^="visitor-root-"] { [class^="visitor-main-"] { + /* home button should be more visible */ [class^="visitor-homeButton-"] { background: var(--MI_THEME-accent) !important; color: var(--MI_THEME-fgOnAccent) !important; } - + [class^="visitor-content-"] { + /* multiple elements i'd prefer hidden * shape1 and shape2 refer to the weird shape things on the left * pages-welcome-timeline-root refers to the scrolling and very buggy timeline on the right */ - [class^="pages-welcome-entrance-a-shape1-"], [class^="pages-welcome-entrance-a-shape2-"], [class^="pages-welcome-timeline-root-"] { + [class^="pages-welcome-entrance-a-shape1-"], + [class^="pages-welcome-entrance-a-shape2-"], + [class^="pages-welcome-timeline-root-"] { display: none; } @@ -34,13 +38,13 @@ width: 120px !important; } } - + /* give logo blurred background */ [class^="pages-welcome-entrance-a-logoWrapper-"]::before { -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); background: var(--MI_THEME-acrylicPanel); - border-radius: var(--MI-radius-ellipse); + border-radius: var(--MI-radius); content: ''; height: 6.5rem; left: -1rem; @@ -51,7 +55,7 @@ } /* re-centers the background due to shape1/2 being removed - * as well as also replacing it with one that allows us to animate it with a pattern */ + * as well as also replacing it with one that allows us to animate it with a pattern */ [class^="MkFeaturedPhotos-root-"] { animation: animatebg 100s linear infinite; background-image: url("https://cdn.booping.synth.download/assets/synth+grid+bg.png") !important; @@ -75,14 +79,13 @@ -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); background: var(--MI_THEME-acrylicPanel); - border-radius: var(--MI-radius-ellipse); + border-radius: var(--MI-radius); content: ''; - height: 122.4rem; - left: -1.7rem; position: absolute; top: .5rem; - transition: padding .2s; - width: 34.1rem; + bottom: -1.5rem; + left: -1.5rem; + right: -1.5rem; } /* expand the timeline widget view */ @@ -142,6 +145,11 @@ /* animation for the background on the landing page */ @keyframes animatebg { - 0% { background-position: 0px 0px; } - 100% { background-position: -960px -960px; } + 0% { + background-position: 0px 0px; + } + + 100% { + background-position: -960px -960px; + } } \ No newline at end of file diff --git a/assets/synth.download/sharkey/sharkey.min.css b/assets/synth.download/sharkey/sharkey.min.css index c444b95..b48bab8 100644 --- a/assets/synth.download/sharkey/sharkey.min.css +++ b/assets/synth.download/sharkey/sharkey.min.css @@ -1 +1 @@ -#splash{& #splashSpinner{transform:unset!important;margin:1.5rem 0 0 1.5rem!important}}#sharkey_app{& [class^=visitor-root-]{& [class^=visitor-main-]{& [class^=visitor-homeButton-]{background:var(--MI_THEME-accent)!important;color:var(--MI_THEME-fgOnAccent)!important}& [class^=visitor-content-]{& [class^=pages-welcome-entrance-a-shape1-],& [class^=pages-welcome-entrance-a-shape2-],& [class^=pages-welcome-timeline-root-]{display:none}& [class^=pages-welcome-entrance-a-logoWrapper-]{& [class^=pages-welcome-entrance-a-poweredBy-]{color:var(--MI_THEME-fg)}& [class^=pages-welcome-entrance-a-misskey-]{width:120px!important}}& [class^=pages-welcome-entrance-a-logoWrapper-]:before{backdrop-filter:var(--MI-blur,blur(15px));background:var(--MI_THEME-acrylicPanel);border-radius:var(--MI-radius-ellipse);content:"";z-index:-5;width:10.6rem;height:6.5rem;position:absolute;top:-1rem;left:-1rem}& [class^=MkFeaturedPhotos-root-]{opacity:.8;background-repeat:repeat;background-size:auto;animation:100s linear infinite animatebg;background-image:url(https://cdn.booping.synth.download/assets/synth+grid+bg.png)!important;width:100%!important;height:100%!important;top:0!important;left:0!important}& [class^=pages-welcome-entrance-a-contents-]{padding:130px 0;margin-left:auto!important;margin-right:auto!important;& [class^=MkVisitorDashboard-root-]:before{backdrop-filter:var(--MI-blur,blur(15px));background:var(--MI_THEME-acrylicPanel);border-radius:var(--MI-radius-ellipse);content:"";width:34.1rem;height:122.4rem;transition:padding .2s;position:absolute;top:.5rem;left:-1.7rem}& [class^=MkVisitorDashboard-tl-]{& [class^=MkVisitorDashboard-tlBody-]{height:50rem!important}}}& [class^=pages-welcome-entrance-a-federation-]{bottom:unset!important;z-index:50!important;top:16px!important}}}& [class^=visitor-side-]{background:linear-gradient(var(--MI_THEME-bg),var(--MI_THEME-accent));& [class^=visitor-banner-]{opacity:.8;background-repeat:repeat;background-size:auto;animation:100s linear infinite animatebg;background-image:url(https://cdn.booping.synth.download/assets/synth+grid+bg.png)!important;width:100%!important;height:100%!important;top:0!important;left:0!important}}@media (prefers-reduced-motion:reduce){& [class^=visitor-side-] [class^=visitor-banner-],& [class^=visitor-main-] [class^=visitor-content-] [class^=MkFeaturedPhotos-root-]{animation:unset!important}}}& [class^=SkNote-renote-]{& [class^=_noSelect\ MkAvatar-root-]{display:unset!important}}}@keyframes animatebg{0%{background-position:0 0}to{background-position:-960px -960px}} \ No newline at end of file +#splash{& #splashSpinner{transform:unset!important;margin:1.5rem 0 0 1.5rem!important}}#sharkey_app{& [class^=visitor-root-]{& [class^=visitor-main-]{& [class^=visitor-homeButton-]{background:var(--MI_THEME-accent)!important;color:var(--MI_THEME-fgOnAccent)!important}& [class^=visitor-content-]{& [class^=pages-welcome-entrance-a-shape1-],& [class^=pages-welcome-entrance-a-shape2-],& [class^=pages-welcome-timeline-root-]{display:none}& [class^=pages-welcome-entrance-a-logoWrapper-]{& [class^=pages-welcome-entrance-a-poweredBy-]{color:var(--MI_THEME-fg)}& [class^=pages-welcome-entrance-a-misskey-]{width:120px!important}}& [class^=pages-welcome-entrance-a-logoWrapper-]:before{backdrop-filter:var(--MI-blur,blur(15px));background:var(--MI_THEME-acrylicPanel);border-radius:var(--MI-radius);content:"";z-index:-5;width:10.6rem;height:6.5rem;position:absolute;top:-1rem;left:-1rem}& [class^=MkFeaturedPhotos-root-]{opacity:.8;background-repeat:repeat;background-size:auto;animation:100s linear infinite animatebg;background-image:url(https://cdn.booping.synth.download/assets/synth+grid+bg.png)!important;width:100%!important;height:100%!important;top:0!important;left:0!important}& [class^=pages-welcome-entrance-a-contents-]{padding:130px 0;margin-left:auto!important;margin-right:auto!important;& [class^=MkVisitorDashboard-root-]:before{backdrop-filter:var(--MI-blur,blur(15px));background:var(--MI_THEME-acrylicPanel);border-radius:var(--MI-radius);content:"";position:absolute;inset:.5rem -1.5rem -1.5rem}& [class^=MkVisitorDashboard-tl-]{& [class^=MkVisitorDashboard-tlBody-]{height:50rem!important}}}& [class^=pages-welcome-entrance-a-federation-]{bottom:unset!important;z-index:50!important;top:16px!important}}}& [class^=visitor-side-]{background:linear-gradient(var(--MI_THEME-bg),var(--MI_THEME-accent));& [class^=visitor-banner-]{opacity:.8;background-repeat:repeat;background-size:auto;animation:100s linear infinite animatebg;background-image:url(https://cdn.booping.synth.download/assets/synth+grid+bg.png)!important;width:100%!important;height:100%!important;top:0!important;left:0!important}}@media (prefers-reduced-motion:reduce){& [class^=visitor-side-] [class^=visitor-banner-],& [class^=visitor-main-] [class^=visitor-content-] [class^=MkFeaturedPhotos-root-]{animation:unset!important}}}& [class^=SkNote-renote-]{& [class^=_noSelect\ MkAvatar-root-]{display:unset!important}}}@keyframes animatebg{0%{background-position:0 0}to{background-position:-960px -960px}} \ No newline at end of file