diff --git a/assets/synth.download/sharkey/sharkey.css b/assets/synth.download/sharkey/sharkey.css index dbd2427..30a5329 100644 --- a/assets/synth.download/sharkey/sharkey.css +++ b/assets/synth.download/sharkey/sharkey.css @@ -1,9 +1,9 @@ /* this SHOULD just be the landing page, and shouldn't effect anything else */ #sharkey_app .mk-app { -.main .contents { +.main .contents:has([class^="pages-welcome-timeline-root-"]) { /* 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 */ + * 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 */ .shape1, .shape2, [class^="pages-welcome-timeline-root-"] { display: none; } @@ -14,7 +14,7 @@ } /* re-centers the background due to shape1/2 being removed - * as well as also replacing it entirely with a custom one that animates */ + * as well as also replacing it with one that allows us to animate it with a pattern */ [class^="MkFeaturedPhotos-root-"] { background-image: url("https://booping.s3.us-east-005.backblazeb2.com/assets/synth+grid+bg.png") !important; background-repeat: repeat; @@ -24,13 +24,14 @@ width: 100% !important; height 100% !important; opacity: .8; - animation: animateBg 60s linear infinite; + animation: animatebg 60s linear infinite; } /* the main instance info page thing */ .contents { margin-left: auto !important; margin-right: auto !important; + padding: 130px 0; /* larger width so the contents of the instance info doesn't end up being squished inside with the background */ width: min(480px,100% - 32px); @@ -59,6 +60,7 @@ z-index: 50 !important; } + /* expand the timeline widget view */ [class^="MkVisitorDashboard-tl-"] { [class^="MkVisitorDashboard-tlBody-"] { height: 600px !important; @@ -67,36 +69,39 @@ } /* contents on the sidebar, usually only visible when viewing content directly while logged out */ -.side .dashboard { - [class^="MkVisitorDashboard-root-"] { - [class^="MkVisitorDashboard-stats-"] { - display: none !important; - } +.side:has(.dashboard) { + background: unset !important; - [class^="MkVisitorDashboard-tl-"] [class^="MkVisitorDashboard-tlBody-"] { - height: 600px !important; + /* remove the banner that sits on the top */ + .banner { + background-image: url("https://booping.s3.us-east-005.backblazeb2.com/assets/synth+grid+bg.png") !important; + height: 100%; + background-repeat: repeat; + background-size: auto; + aspect-ratio: unset !important; + opacity: .8; + animation: animatebg 60s linear infinite; + } + + .dashboard { + [class^="MkVisitorDashboard-root-"] { + /* repeating our edits from above */ + [class^="MkVisitorDashboard-stats-"] { + display: none !important; + } + + [class^="MkVisitorDashboard-tl-"] [class^="MkVisitorDashboard-tlBody-"] { + height: 600px !important; + } } } } } /* animation for the background on the landing page */ -@keyframes animateBg { - from { - background-position: 0 0; - } - to { - background-position: -960px -960px; - } -} - -/* disable the background animation if browser doesn't want animations */ -@media (prefers-reduced-motion) { - .main .contents { - [class^="MkFeaturedPhotos-root-"] { - animation: unset !important; - } - } +@keyframes animatebg { + 0% { background-position: 0px 0px; } + 100% { background-position: -960px -960px; } } /* shrinks down the blur margins on instance info if display is small enough */ @@ -119,3 +124,18 @@ } } } + +/* disable the background animation if browser doesn't want animations */ +@media (prefers-reduced-motion) { + .main .contents:has([class^="pages-welcome-timeline-root-"]) { + [class^="MkFeaturedPhotos-root-"] { + animation: unset !important; + } + } + + .side:has(.dashboard) { + .banner { + animation: unset !important; + } + } +}