From a36e3da19ed33632cc3eb81a1212999c0d750b8a Mon Sep 17 00:00:00 2001 From: Ruben Date: Sat, 10 May 2025 03:18:51 -0500 Subject: [PATCH] update synth.download css --- assets/synth.download/sharkey/sharkey.css | 106 +++++++----------- assets/synth.download/sharkey/sharkey.min.css | 1 + 2 files changed, 39 insertions(+), 68 deletions(-) create mode 100644 assets/synth.download/sharkey/sharkey.min.css diff --git a/assets/synth.download/sharkey/sharkey.css b/assets/synth.download/sharkey/sharkey.css index 9189c1c..4b244f2 100644 --- a/assets/synth.download/sharkey/sharkey.css +++ b/assets/synth.download/sharkey/sharkey.css @@ -1,15 +1,15 @@ /* this SHOULD just be the landing page, and shouldn't effect anything else */ -#sharkey_app .mk-app { -.main .contents:has([class^="pages-welcome-timeline-root-"]) { +#sharkey_app [class^="visitor-root-"] { +[class^="visitor-main-"] [class^="visitor-content-"] { /* 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-"] { + [class^="pages-welcome-entrance-a-shape1-"], [class^="pages-welcome-entrance-a-shape2-"], [class^="pages-welcome-timeline-root-"] { display: none; } /* color text appropriately */ - .logo-wrapper { + [class^="pages-welcome-entrance-a-logoWrapper-"] [class^="pages-welcome-entrance-a-poweredBy-"] { color: var(--MI_THEME-fg); } @@ -24,22 +24,23 @@ width: 100% !important; height: 100% !important; opacity: .8; - animation: animatebg 60s linear infinite; + animation: animatebg 100s linear infinite; } /* the main instance info page thing */ - .contents { + [class^="pages-welcome-entrance-a-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); - transition: width .2s; - - /* margins around the instance info stuff to fit the background */ - [class^="MkVisitorDashboard-root-"] { - padding: 1.5rem; + /* blurred background effect behind instance information */ + [class^="MkVisitorDashboard-root-"]::before { + position: absolute; + content: ''; + top: .5rem; + left: -1.7rem; + width: 34rem; + height: 132.4rem; background: var(--MI_THEME-acrylicPanel); -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); @@ -47,53 +48,43 @@ transition: padding .2s; } - /* instance stats - i don't like these being displayed right on the front page */ - [class^="MkVisitorDashboard-stats-"] { - display: none !important; + /* instance stats - i don't like these being displayed right on the front page + * disabled, nice to keep probably + * [class^="MkVisitorDashboard-stats-"] { + * display: none !important; + } */ + + /* expand the timeline widget view */ + [class^="MkVisitorDashboard-tl-"] { + [class^="MkVisitorDashboard-tlBody-"] { + height: 50rem !important; + } } } /* federation scrolling bar thingy */ - .federation { + [class^="pages-welcome-entrance-a-federation-"] { bottom: unset !important; top: 16px !important; z-index: 50 !important; } - - /* expand the timeline widget view */ - [class^="MkVisitorDashboard-tl-"] { - [class^="MkVisitorDashboard-tlBody-"] { - height: 600px !important; - } - } } -/* contents on the sidebar, usually only visible when viewing content directly while logged out */ -.side:has(.dashboard) { - background: unset !important; +/* sidebar */ +[class^="visitor-side-"] { + background: linear-gradient(var(--MI_THEME-bg), var(--MI_THEME-accent)); - /* reuse the banner as the background */ - .banner { + /* banner image */ + [class^="visitor-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; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !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: animatebg 100s linear infinite; } } } @@ -104,34 +95,13 @@ 100% { background-position: -960px -960px; } } -/* 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; - transition: padding .2s; - } - } - } -} - /* disable the background animation if browser doesn't want animations */ @media (prefers-reduced-motion) { - .main .contents:has([class^="pages-welcome-timeline-root-"]) { + #sharkey_app [class^="visitor-root-"] { + [class^="visitor-main-"] [class^="visitor-content-"] { [class^="MkFeaturedPhotos-root-"] { animation: unset !important; } } - - .side:has(.dashboard) { - .banner { - animation: unset !important; - } } } diff --git a/assets/synth.download/sharkey/sharkey.min.css b/assets/synth.download/sharkey/sharkey.min.css new file mode 100644 index 0000000..8aa7445 --- /dev/null +++ b/assets/synth.download/sharkey/sharkey.min.css @@ -0,0 +1 @@ + #sharkey_app [class^="visitor-root-"] {[class^="visitor-main-"] [class^="visitor-content-"] {[class^="pages-welcome-entrance-a-shape1-"], [class^="pages-welcome-entrance-a-shape2-"], [class^="pages-welcome-timeline-root-"] {display: none;}[class^="pages-welcome-entrance-a-logoWrapper-"] [class^="pages-welcome-entrance-a-poweredBy-"] {color: var(--MI_THEME-fg);}[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 100s linear infinite;}[class^="pages-welcome-entrance-a-contents-"] {margin-left: auto !important;margin-right: auto !important;padding: 130px 0;[class^="MkVisitorDashboard-root-"]::before {position: absolute;content: '';top: .5rem;left: -1.7rem;width: 34rem;height: 132.4rem;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;}[class^="MkVisitorDashboard-tl-"] {[class^="MkVisitorDashboard-tlBody-"] {height: 50rem !important;}}}[class^="pages-welcome-entrance-a-federation-"] {bottom: unset !important;top: 16px !important;z-index: 50 !important;}}[class^="visitor-side-"] {background: linear-gradient(var(--MI_THEME-bg), var(--MI_THEME-accent));[class^="visitor-banner-"] {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 100s linear infinite;}}}@keyframes animatebg {0% {background-position: 0px 0px;}100% {background-position: -960px -960px;}}@media (prefers-reduced-motion) {#sharkey_app [class^="visitor-root-"] {[class^="visitor-main-"] [class^="visitor-content-"] {[class^="MkFeaturedPhotos-root-"] {animation: unset !important;}}}}