add sharkey files

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