diff --git a/assets/synth.download/sharkey/grid_bg.png b/assets/synth.download/sharkey/grid_bg.png new file mode 100644 index 0000000..a182036 Binary files /dev/null and b/assets/synth.download/sharkey/grid_bg.png differ diff --git a/assets/synth.download/sharkey/sharkey.css b/assets/synth.download/sharkey/sharkey.css new file mode 100644 index 0000000..dbd2427 --- /dev/null +++ b/assets/synth.download/sharkey/sharkey.css @@ -0,0 +1,121 @@ +/* this SHOULD just be the landing page, and shouldn't effect anything else */ +#sharkey_app .mk-app { +.main .contents { + /* 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, .shape2, [class^="pages-welcome-timeline-root-"] { + display: none; + } + + /* color text appropriately */ + .logo-wrapper { + color: var(--MI_THEME-fg); + } + + /* re-centers the background due to shape1/2 being removed + * as well as also replacing it entirely with a custom one that animates */ + [class^="MkFeaturedPhotos-root-"] { + background-image: url("https://booping.s3.us-east-005.backblazeb2.com/assets/synth+grid+bg.png") !important; + background-repeat: repeat; + background-size: auto; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height 100% !important; + opacity: .8; + animation: animateBg 60s linear infinite; + } + + /* the main instance info page thing */ + .contents { + margin-left: auto !important; + margin-right: auto !important; + + /* larger width so the contents of the instance info doesn't end up being squished inside with the background */ + width: min(480px,100% - 32px); + transition: width .2s; + + /* margins around the instance info stuff to fit the background */ + [class^="MkVisitorDashboard-root-"] { + padding: 1.5rem; + background: var(--MI_THEME-acrylicPanel); + -webkit-backdrop-filter: var(--MI-blur, blur(15px)); + backdrop-filter: var(--MI-blur, blur(15px)); + border-radius: var(--MI-radius-ellipse); + transition: padding .2s; + } + + /* instance stats - i don't like these being displayed right on the front page */ + [class^="MkVisitorDashboard-stats-"] { + display: none !important; + } + } + + /* federation scrolling bar thingy */ + .federation { + bottom: unset !important; + top: 16px !important; + z-index: 50 !important; + } + + [class^="MkVisitorDashboard-tl-"] { + [class^="MkVisitorDashboard-tlBody-"] { + height: 600px !important; + } + } +} + +/* 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; + } + + [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; + } + } +} + +/* shrinks down the blur margins on instance info if display is small enough */ +@media screen and (max-width: 515px) { + .main .contents { + .contents { + /* restore original values */ + width: min(430px,100% - 32px) !important; + transition: width .2s; + + /* margins around the instance info stuff to fit the background */ + [class^="MkVisitorDashboard-root-"] { + padding: .5rem !important; + background: var(--MI_THEME-acrylicPanel); + -webkit-backdrop-filter: var(--MI-blur, blur(15px)); + backdrop-filter: var(--MI-blur, blur(15px)); + border-radius: var(--MI-radius-ellipse); + transition: padding .2s; + } + } + } +}