diff --git a/custom/assets/instance.css b/custom/assets/instance.css index d03282d71..45af7d40a 100644 --- a/custom/assets/instance.css +++ b/custom/assets/instance.css @@ -16,6 +16,156 @@ .main a.name[href$="shark.ouroboros.gay"] { color: #1afddc; } :is(article, .reply-to > .main) a.avatar:not([title*="@"]) + :is(span, div) a.name { color: #c0ffee; } +/** ThatOneCalculator MisskeyTweaks **/ +.profile .banner::after, +._popup .banner::after { + content: ""; + background-image: inherit; + position: fixed; + inset: 0; + background-size: cover; + background-position: center; + pointer-events: none; + opacity: 0.1; + filter: blur(10px); +} + +/*** BETTER PROFILES ***/ +.narrow { + position: relative; + } + .wide > .main + .sub { + position: sticky; + height: max-content; + min-height: calc(100vh - 35px); + bottom: 15px; + align-self: flex-end; + } + .profile { + margin-bottom: var(--margin); + } + .profile .banner-container, + .profile .banner, + .profile .fade { + border-bottom-left-radius: var(--radius) !important; + border-bottom-right-radius: var(--radius) !important; + } + .profile .fields { + display: flex; + flex-wrap: wrap; + padding: 0 24px !important; + border: 0 !important; + } + .profile .fields .field { + background-color: var(--panelHighlight); + border-radius: 1em; + margin: 0 0.5em 0.5em 0 !important; + font-size: 0.9em; + } + .profile .fields .field > * { + padding: 6px 10px; + } + .profile .fields .field .name { + width: auto !important; + } + .profile .fields .field .value { + width: auto !important; + padding-left: 0; + } + .profile .fields .field .value a[rel*="nofollow"] { + margin: -6px -10px; + margin-left: 0; + padding: 6px 10px; + display: flex; + position: relative; + } + .profile .fields .field .value a[rel*="nofollow"]::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--link); + border-radius: var(--radius); + opacity: 0.1; + } + .profile .fields .field .value a[rel*="nofollow"] .fa-external-link-square-alt { + display: none; + } + .profile .fields.system { + margin-top: -24px; + padding-top: 1em !important; + padding-bottom: 0.5em !important; + } + .profile .fields.system .field { + background: none; + opacity: 0.8; + max-width: 300px !important; + font-size: 1em; + padding-right: 10px !important; + } + .profile .fields.system .field > * { + padding: 0; + } + .profile .fields.system .field > *.name { + min-width: max-content; + padding-right: 0.4rem; + font-weight: 500 !important; + font-size: 0; + } + .profile .fields.system .field > *.name i { + font-size: 0.9rem; + } + .profile ~ .contents { + position: relative; + } + .profile ~ .contents > div > ._panel .content.omitted > div { + padding-inline: 0; + } + .profile ~ .contents > div > ._panel .content.omitted .stream { + display: flex; + overflow-x: auto; + scroll-padding: 24px; + padding-left: 24px; + scrollbar-color: transparent transparent; + mask: linear-gradient(to right, #000 calc(100% - 400px), rgba(0,0,0,0.4), transparent); + } + .profile ~ .contents > div > ._panel .content.omitted .stream a { + min-width: max-content; + scroll-snap-align: start; + height: 100px; + } + .profile ~ .contents > div > ._panel .content.omitted button.fade { + background: linear-gradient(to right, transparent, var(--panel)); + background: none; + top: 0; + bottom: 0; + right: 0; + left: unset; + height: unset; + width: auto; + padding: 24px; + } + .profile ~ .contents > div > ._panel .content:not(.omitted) { + padding: 0 14px !important; + padding: 0 !important; + padding-top: 14px !important; + } + .profile ~ .contents > div > ._panel .content:not(.omitted) > div { + padding: 0; + } + .profile ~ .contents > div > ._panel .content:not(.omitted) .stream { + display: flex; + flex-wrap: wrap; + } + .profile ~ .contents > div > ._panel .content:not(.omitted) .stream a { + flex-grow: 1; + height: auto; + max-height: 60vh; + border-radius: 0; + } + .profile ~ .contents > div > ._panel .content:not(.omitted) .empty { + display: none; + } + /** jormungandr css **/ /* Make foreground of mobile pencil icon dark */