update sharkey css, add roundify js
All checks were successful
/ build (push) Successful in 3m50s

This commit is contained in:
Ruben 2025-07-23 16:09:16 -05:00
commit 782abc7bb9
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
4 changed files with 75 additions and 13 deletions

View file

@ -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);
}
})();

View file

@ -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)}();

View file

@ -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;
}
}

View file

@ -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}}
#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}}