diff --git a/modern.user.css b/modern.user.css index dc392dd..d8a488f 100644 --- a/modern.user.css +++ b/modern.user.css @@ -1,25 +1,21 @@ - ////////////////////////////////////////////////////////////////// ๐ŸฆŠ - // // - // !!! MAKE SURE TO ADD YOUR SERVER URL USING THE STEPS BELOW !!! // - // 1. Install the style // - // 2. Click "Edit" in the left sidebar // - // 3. Click "Settings" in the left sidebar // - // 4. Paste your server's URL in the // - // "Custom included sites" textbox like this: // - // *//DOMAIN HERE/* // - // 5. Click "Save" // - // // - //////////////////////////////////////////////////////////////////// + // ๐ŸฆŠ BEFORE CLICKING INSTALL: + // --------------------------- + // Add your home instance to the "Custom included sites" + // textbox in the left panel following this format: + // *://domain.tld/* -/* Hotfix 1.8.5 -- Fixed vertical status buttons in selected post +/* Update 1.9.0 +- Fixes & tweaks ! +- Made emoji reactions slightly larger (for instances that support them) +- Styled follow requests page +- Styled emoji picker, likely temporary as it may be changed in Masto in the future */ /* ==UserStyle== @name Mastodon Modern -@version 1.8.5 +@version 1.9.0 @description Drastically improves the look & feel of Mastodon @updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css @homepageURL https://codeberg.org/Freeplay/Mastodon-Modern @@ -269,11 +265,16 @@ .account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img { border-radius 30% !important } + .scrollable, .detailed-status__action-bar, .column-header__collapsible-inner, .audio-player, .search__input { border 0 !important } + .notification__filter-bar, + .column-header { + border-inline 0 + } @@ -325,6 +326,7 @@ .columns-area__panels { --top 5px + gap 0 } @media (min-width responsiveW2) { .columns-area__panels { @@ -340,25 +342,78 @@ --top 30px } } + + // EMOJI PICKER + // This is most likely temporary as the picker may be rewritten or unstylable in a later mastodon update + .emoji-picker-dropdown__menu { + border-radius var(--radius) + overflow hidden + resize both + width 400px + } + .emoji-mart { + display flex !important + flex-direction column !important + width 100% !important + height 100% !important + } + .emoji-mart-scroll { + flex-grow 1 + max-height unset !important + } + .emoji-mart-bar { + order 2 + } + .emoji-mart-category-list { + overflow visible !important + display grid + grid-template-columns repeat(auto-fill, minmax(calc(20px + 6%), 1fr)) + li { + display contents + } + button { + position relative + padding-top 100% !important + img, span { + height calc(100% - 10px) !important + width calc(100% - 10px) !important + inset 5px + position absolute !important + transition transform .1s cubic-bezier(0,0,0,1) + } + + &:hover { + img, span { + transform scale(1.2) + } + } + } + } + .emoji-picker-dropdown__modifiers { + top 16px + } + #mastodon { overflow clip // fix weird overflow in some smaller windows, ex iphone se 2nd gen // LEFT COLUMN .compose-panel { - margin-top 0 overflow-y auto margin-top calc(0px - var(--top)) padding-top var(--top) padding-bottom 20px + padding-inline 10px box-sizing border-box - // min-height 100vh !important max-height unset !important height 100% + > * { + padding-inline 0 + } } .search { - margin-inline 5px border-radius var(--radius) + //margin-bottom 25px !important label { // padding-inline 20px box-sizing border-box @@ -380,16 +435,17 @@ width calc(100% - 8px) } } - .compose__action-bar-dropdown { + .navigation-bar { .icon-button { width auto !important height auto !important padding 8px } } - + .compose-form__highlightable { + margin-top 8px + } .compose-form { - padding-top 10px min-height unset overflow unset .reply-indicator { @@ -399,6 +455,9 @@ .reply-indicator__display-name { padding 0 } + .compose-form__highlightable { + border-radius var(--radius) + } .compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { border-radius var(--radius) var(--radius) 0 0 !important border-bottom 0 @@ -441,12 +500,8 @@ /.server-banner { - // padding-inline 15px - padding-inline 10px - // overflow-y auto - .server-banner__introduction { - // padding-inline 10px - } + padding 10px + .server-banner__hero { border-radius var(--radius) // margin-inline -10px @@ -457,25 +512,14 @@ box-sizing border-box } .server-banner__description { - // margin-inline -10px - // background-color var(--hover-color) border 1px solid var(--border-color) padding 14px 12px margin-top -20px line-height 1.5 - // margin-top calc(-20px - var(--radius)) - // padding-top calc(15px + var(--radius)) border-radius 0 0 var(--radius) var(--radius) } .server-banner__meta { flex-direction column - // margin-inline -10px - // margin-top 30px !important - // border-top 2px solid var(--border-color-2) - // padding-top 20px - // border 1px solid var(--border-color) - // border-radius var(--radius) - // padding 15px .server-banner__meta__column { width unset overflow visible @@ -529,8 +573,11 @@ } } } - .link-footer > p:last-child { - margin-bottom 0 + .link-footer { + margin-top 20px + > p:last-child { + margin-bottom 0 + } } @@ -540,13 +587,14 @@ @media (min-width responsiveW2) { width 0 flex-grow 1 + padding-inline 10px } @media (min-width responsiveW1) { max-width var(--tl-width) !important padding 0 15px margin 0 10px } - + @media (min-width mobileW) { display grid grid-template-columns 100% @@ -577,7 +625,6 @@ padding 10px } - border 0 !important contain unset !important > [tabindex]:first-child > .focusable { margin-top 0 !important @@ -619,8 +666,8 @@ } } .column:not(.scrollable--flex) > .dismissable-banner { - border-radius var(--radius) var(--radius) 0 0 !important - margin 0 + //border-radius var(--radius) var(--radius) 0 0 !important + margin 0 !important & ~ .scrollable { border-radius 0 !important } @@ -1009,6 +1056,220 @@ } } + // OTHER ARTICLE COMPONENTS + // follow requests + #Follow-requests.column-header { + @media (max-width mobileW) { + display none + } + } + @media (min-width mobileW) { + #Follow-requests ~ .scrollable { + .item-list { + display grid + align-items stretch + grid-template-columns repeat(auto-fit, minmax(320px, 1fr)) + gap 0 10px + > article { + display flex + } + } + } + } + /.layout-multiple-columns { + article:first-child .account-authorize__wrapper { + margin-top 10px + } + } + @media (max-width mobileW) { + article:first-child .account-authorize__wrapper { + margin-top 10px + } + } + .account-authorize__wrapper { + background var(--elevated-color) + border-radius var(--radius) + overflow hidden + flex-grow 1 + margin-bottom 10px + @media (max-width mobileW) { + margin-inline 10px + } + /.layout-multiple-columns & { + margin-inline 10px + } + display flex + flex-direction column + .account-authorize { + padding 20px 15px 10px + } + .detailed-status__display-name { + margin-bottom 10px !important + } + .account--panel { + margin-top auto + border-bottom 0 + padding-inline 15px + gap 10px + background none + } + br { + display block + } + p { + margin-bottom .2em + } + .account--panel__button:first-child .icon-button { + &:not(:hover):not(:focus) { + background var(--elevated-color) + } + } + .icon-button { + width 100% !important + padding 10px + height unset !important + } + } + + // ACCOUNT CARDS + .account-card { + display flex + flex-direction column + max-height 360px + margin 0 + border-radius var(--radius) !important + background var(--elevated-color) + box-shadow none !important + + /.explore__suggestions, /.directory__list { + padding 15px + display grid + grid-template-columns repeat(auto-fit, minmax(300px, 1fr)) + gap 10px + &.directory__list { + padding 15px 10px + } + /.layout-multiple-columns & { + // this was done because having overflow scroll/hidden + display grid or flex breaks it ? + display block + > * { + margin 10px !important + } + } + @media (max-width mobileW) { + gap 0 !important + > * { + margin 10px !important + } + } + } + box-shadow var(--shadow) + .account-card__header { + padding 0 !important + } + .account-card__title { + margin-bottom 10px + margin-top -24px + } + .account-card__title__avatar { + padding-inline-end 10px + padding-bottom 0 + } + .display-name { + padding-bottom 0 + } + .display-name__account { + font-size .9em !important + } + .account-card__title__avatar .account__avatar, .account-card__title__avatar { + width 64px !important + height 64px !important + background-size 64px 64px !important + img { + width inherit + height inherit + } + } + .account-card__title { + padding-inline-end 15px + } + .display-name bdi { + white-space nowrap + text-overflow ellipsis + overflow hidden + } + .account-card__bio { + margin-top 0 !important + max-height unset + mask linear-gradient(black 65px, rgba(0,0,0,0.5), transparent) + -webkit-mask @mask + flex-grow 1 + margin-bottom -50px + margin-bottom -15px + font-size 1em + padding-bottom 60px + // min-height 60px + &::after { + content unset !important + } + br { + display block + } + } + .account-card__actions { + // display block + margin-top auto !important + // margin-top -15px + display unset !important + + .account-card__counters { + display flex + gap 1em + padding-inline 15px + } + .account-card__counters__item { + display flex + align-items center + font-size 1em + + > small { + display inline !important + margin-inline-start .4em + font-size 1em !important + } + } + .account-card__actions__button { + position absolute + top 10px + right 10px + padding 0 + background rgba(0,0,0,0.4) + // background white + border-radius var(--radius-round) + // box-shadow 0 0 70px rgba(0,0,0,0.7) + padding 4px + // border-radius var(--radius-round) + // border 8px solid rgba(0,0,0,0.5) !important + box-shadow 0 4px 12px rgba(0,0,0,0.2) + // border 4px solid rgba(0,0,0,0.4) !important + button, a { + border-radius var(--radius-round) !important + padding .7em 1.7em + min-height unset + font-size 14px !important + line-height 1.2 + font-size 1em !important + } + &:empty { + display none + } + } + } + &::after { + content unset !important + } + } + // STATUSES .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper { &::after { @@ -1024,6 +1285,7 @@ border-radius var(--radius) &.trends__item, &.story, &.account-card { animation-name slideUpFade + animation-delay .04s * 11 for row in 1..11 { &:nth-child({row}) { animation-delay .04s * row @@ -1112,11 +1374,9 @@ height 100% svg { height 100% - // width 100% float right overflow visible !important position relative - z-index -1 path { display unset !important @@ -1150,141 +1410,7 @@ overflow hidden } } - &.account-card.account-card.account-card { // specificity go brrrrr - display flex - flex-direction column - max-height 320px - margin 0 - border-radius var(--radius) !important - - /.explore__suggestions, /.directory__list { - padding 15px - display grid - grid-template-columns repeat(auto-fit, minmax(300px, 1fr)) - gap 15px - &.directory__list { - padding 15px 10px - } - /.layout-multiple-columns & { - // this was done because having overflow scroll/hidden + display grid or flex breaks it ? - display block !important - > * { - margin 10px !important - } - } - } - box-shadow var(--shadow) - .account-card__header { - padding 0 !important - } - .account-card__title { - margin-bottom 10px - margin-top -26px - } - .account-card__title__avatar { - padding-inline-end 10px - padding-bottom 0 - } - .display-name { - padding-bottom 0 - } - .display-name__account { - font-size .9em !important - } - .account-card__title__avatar .account__avatar, .account-card__title__avatar { - width 64px !important - height 64px !important - background-size 64px 64px !important - img { - width inherit - height inherit - } - } - .account-card__title { - padding-inline-end 15px - } - .display-name bdi { - white-space nowrap - text-overflow ellipsis - overflow hidden - } - .account-card__bio { - margin-top 0 !important - max-height unset - mask linear-gradient(black 65px, rgba(0,0,0,0.5), transparent) - -webkit-mask @mask - flex-grow 1 - margin-bottom -50px - margin-bottom -15px - font-size 1em - padding-bottom 60px - // min-height 60px - &::after { - content unset !important - } - p { - display inline - &:not(:first-child)::before { - content "โ€ƒยทโ€ƒ" - } - } - br { - display block - } - } - .account-card__actions { - // display block - margin-top auto !important - // margin-top -15px - display unset !important - - .account-card__counters { - display flex - gap 1em - padding-inline 15px - } - .account-card__counters__item { - display flex - align-items center - font-size 1em - - > small { - display inline !important - margin-inline-start .4em - font-size 1em !important - } - } - .account-card__actions__button { - position absolute - top 10px - right 10px - padding 0 - background rgba(0,0,0,0.4) - // background white - border-radius var(--radius-round) - // box-shadow 0 0 70px rgba(0,0,0,0.7) - padding 4px - // border-radius var(--radius-round) - // border 8px solid rgba(0,0,0,0.5) !important - box-shadow 0 4px 12px rgba(0,0,0,0.2) - // border 4px solid rgba(0,0,0,0.4) !important - button, a { - border-radius var(--radius-round) !important - padding .7em 1.7em - min-height unset - font-size 14px !important - line-height 1.2 - font-size 1em !important - } - &:empty { - display none - } - } - } - &::after { - content unset !important - } - } + &.empty-column-indicator { display block } @@ -1520,9 +1646,10 @@ min-width 2em width auto /^[-1..-1] { - transition transform .4s cubic-bezier(0,0.7,0,1) + transition transform 1s cubic-bezier(0,0.7,0,1) &:hover { - transform scale(1.3) + transform scale(1.7) + transition transform .4s cubic-bezier(0,0.7,0,1) } } } @@ -1848,7 +1975,7 @@ .icon-button { flex-grow 1 !important } - > div { + div, > div > span { display flex justify-content center flex-grow 1 @@ -2768,7 +2895,6 @@ } } } - } @@ -2866,6 +2992,7 @@ // Compose .compose-form { + padding 10px &::before { content "" position absolute @@ -3316,11 +3443,8 @@ background-color transparent !important } .drawer__inner.darker { + padding 0 !important border-radius var(--radius-round) var(--radius-round) 0 0 - // margin-inline 10px - // width calc(100% - 20px) - // padding-bottom 10px - // height calc(100% - 10px) } .getting-started__trends { @@ -3457,12 +3581,13 @@ button { border-radius 6px !important padding-block 2px - @media (pointer: coarse) { - padding 4px 8px !important - .reactions-bar__item__emoji { - height 18px - width @height - } + .reactions-bar__item__emoji { + height 2em + width @height + } + border 1px solid var(--border-color-2) + &:not(.active) { + background none } } &:empty { @@ -3479,9 +3604,6 @@ padding-inline 15px !important padding-top 18px !important } - .account { - padding-inline-start 0 !important - } } .notification__favourite-icon-wrapper { position static @@ -3565,40 +3687,14 @@ // Advanced View /.layout-multiple-columns.flavour-glitch { + .drawer { + flex-grow .2 + } .drawer__inner { margin-top -10px padding-top 30px !important } } } - - - - - -// below isn't needed for compilation, just for compatability w/ glitch-soc v's < 4.1.5 -/body.app-body.flavour-glitch > #mastodon { - .scrollable.detailed-status__wrapper { - box-shadow none - > div > .focusable[aria-label]:not(.status--in-thread) { - box-shadow var(--shadow) - } - } -} - -////////////////////////////// -// // -// STYLUS-ONLY OPTIONS // -// // -////////////////////////////// -:root { - -} - - - - - - } \ No newline at end of file