update sharkey css
All checks were successful
/ build (push) Successful in 49s

This commit is contained in:
Ruben 2025-05-01 09:15:20 -05:00
commit 9aec8f717f
No known key found for this signature in database
GPG key ID: AE181294E97E4802

View file

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