121 lines
3.9 KiB
CSS
121 lines
3.9 KiB
CSS
/* 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;
|
|
}
|
|
}
|
|
}
|
|
}
|