diff --git a/glitch-fixes.css b/glitch-fixes.css index 4be0e87..5d78bce 100644 --- a/glitch-fixes.css +++ b/glitch-fixes.css @@ -59,35 +59,8 @@ body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after { body.app-body.flavour-glitch > #mastodon .collapsed.muted .status__content__text ~ * { display: none; } -@media (pointer: coarse) { - body.app-body.flavour-glitch > #mastodon .status__info { - align-items: center; - } - body.app-body.flavour-glitch > #mastodon .status__info__icons { - height: auto; - } -} -body.app-body.flavour-glitch > #mastodon .status { - isolation: isolate; - overflow: hidden; -} -body.app-body.flavour-glitch > #mastodon .status__info { - pointer-events: none; -} -body.app-body.flavour-glitch > #mastodon .status__avatar, -body.app-body.flavour-glitch > #mastodon .status__info__icons { - pointer-events: all; -} -body.app-body.flavour-glitch > #mastodon .status > :not(.status__content):not(.status__line) { - position: relative; - z-index: 2; -} -body.app-body.flavour-glitch > #mastodon .status:not(.status-direct) > .status__content { - margin-block: -100px !important; - padding-block: 100px !important; -} -body.app-body.flavour-glitch > #mastodon .full-width { - margin-inline: 0 !important; +body.app-body.flavour-glitch > #mastodon .focusable[tabindex]:not(.notification-ungrouped) .full-width { + margin-inline: 0; } body.app-body.flavour-glitch > #mastodon .media-gallery__item > .media-gallery__preview { display: unset; diff --git a/modern.css b/modern.css index 8100021..8ec37cf 100644 --- a/modern.css +++ b/modern.css @@ -193,7 +193,7 @@ a:focus-visible, .reduce-motion * { animation-duration: 0s !important; } -@-moz-keyframes bounceIn { + @-moz-keyframes bounceIn { 0% { transform: scale(1.1); opacity: 0; @@ -210,8 +210,8 @@ a:focus-visible, transform: scale(1); opacity: 1; } -} -@-webkit-keyframes bounceIn { + } + @-webkit-keyframes bounceIn { 0% { transform: scale(1.1); opacity: 0; @@ -228,8 +228,8 @@ a:focus-visible, transform: scale(1); opacity: 1; } -} -@-o-keyframes bounceIn { + } + @-o-keyframes bounceIn { 0% { transform: scale(1.1); opacity: 0; @@ -246,8 +246,8 @@ a:focus-visible, transform: scale(1); opacity: 1; } -} -@keyframes bounceIn { + } + @keyframes bounceIn { 0% { transform: scale(1.1); opacity: 0; @@ -264,183 +264,183 @@ a:focus-visible, transform: scale(1); opacity: 1; } -} -@-moz-keyframes slideUp { + } + @-moz-keyframes slideUp { from { transform: translateY(20px); } -} -@-webkit-keyframes slideUp { + } + @-webkit-keyframes slideUp { from { transform: translateY(20px); } -} -@-o-keyframes slideUp { + } + @-o-keyframes slideUp { from { transform: translateY(20px); } -} -@keyframes slideUp { + } + @keyframes slideUp { from { transform: translateY(20px); } -} -@-moz-keyframes slideUpFade { + } + @-moz-keyframes slideUpFade { from { transform: translateY(20px); filter: opacity(0); } -} -@-webkit-keyframes slideUpFade { + } + @-webkit-keyframes slideUpFade { from { transform: translateY(20px); filter: opacity(0); } -} -@-o-keyframes slideUpFade { + } + @-o-keyframes slideUpFade { from { transform: translateY(20px); filter: opacity(0); } -} -@keyframes slideUpFade { + } + @keyframes slideUpFade { from { transform: translateY(20px); filter: opacity(0); } -} -@-moz-keyframes slideDownFade { + } + @-moz-keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } -} -@-webkit-keyframes slideDownFade { + } + @-webkit-keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } -} -@-o-keyframes slideDownFade { + } + @-o-keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } -} -@keyframes slideDownFade { + } + @keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } -} -@-moz-keyframes slideUpBig { + } + @-moz-keyframes slideUpBig { from { transform: translateY(50vh); } -} -@-webkit-keyframes slideUpBig { + } + @-webkit-keyframes slideUpBig { from { transform: translateY(50vh); } -} -@-o-keyframes slideUpBig { + } + @-o-keyframes slideUpBig { from { transform: translateY(50vh); } -} -@keyframes slideUpBig { + } + @keyframes slideUpBig { from { transform: translateY(50vh); } -} -@-moz-keyframes fadeUp { + } + @-moz-keyframes fadeUp { from { transform: translateY(10px); opacity: 0; } -} -@-webkit-keyframes fadeUp { + } + @-webkit-keyframes fadeUp { from { transform: translateY(10px); opacity: 0; } -} -@-o-keyframes fadeUp { + } + @-o-keyframes fadeUp { from { transform: translateY(10px); opacity: 0; } -} -@keyframes fadeUp { + } + @keyframes fadeUp { from { transform: translateY(10px); opacity: 0; } -} -@-moz-keyframes scaleIn { + } + @-moz-keyframes scaleIn { from { transform: scale(0.98); opacity: 0; } -} -@-webkit-keyframes scaleIn { + } + @-webkit-keyframes scaleIn { from { transform: scale(0.98); opacity: 0; } -} -@-o-keyframes scaleIn { + } + @-o-keyframes scaleIn { from { transform: scale(0.98); opacity: 0; } -} -@keyframes scaleIn { + } + @keyframes scaleIn { from { transform: scale(0.98); opacity: 0; } -} -@-moz-keyframes fadeLeft { + } + @-moz-keyframes fadeLeft { from { transform: translateX(20px) opacity(0); } -} -@-webkit-keyframes fadeLeft { + } + @-webkit-keyframes fadeLeft { from { transform: translateX(20px) opacity(0); } -} -@-o-keyframes fadeLeft { + } + @-o-keyframes fadeLeft { from { transform: translateX(20px) opacity(0); } -} -@keyframes fadeLeft { + } + @keyframes fadeLeft { from { transform: translateX(20px) opacity(0); } -} -@-moz-keyframes rainbow { + } + @-moz-keyframes rainbow { to { filter: hue-rotate(360deg); } -} -@-webkit-keyframes rainbow { + } + @-webkit-keyframes rainbow { to { filter: hue-rotate(360deg); } -} -@-o-keyframes rainbow { + } + @-o-keyframes rainbow { to { filter: hue-rotate(360deg); } -} -@keyframes rainbow { + } + @keyframes rainbow { to { filter: hue-rotate(360deg); } -} + } } .columns-area__panels { --top: 5px; @@ -760,7 +760,8 @@ a:focus-visible, .layout-single-column .statuses-grid__item .detailed-status, .layout-single-column .story, .layout-single-column .scrollable :not(.focusable) > .account:not(.account--minimal), - .layout-single-column .timeline-hint { + .layout-single-column .timeline-hint, + .layout-single-column .notification-request { margin-inline: 10px; max-width: calc(100% - 20px); } @@ -851,6 +852,7 @@ a:focus-visible, } .column-header__wrapper > :not(.column-header):not(.collapsed) { border-top: 2px solid var(--background-color) !important; + border: 0; } .column-header { overflow: hidden; @@ -921,6 +923,9 @@ a:focus-visible, border-radius: var(--radius); overflow: hidden; } + .tabs-bar__wrapper .column-header__wrapper > div { + background: var(--surface-background-color); + } .tabs-bar__wrapper .column-header { background: none !important; overflow: hidden; @@ -1168,7 +1173,8 @@ a:focus-visible, .trends__item, .story, .scrollable :not(.focusable) > .account:not(.account--minimal), -.timeline-hint { +.timeline-hint, +.notification-request { overflow: hidden; contain: paint inline-size; position: relative; @@ -1181,7 +1187,8 @@ a:focus-visible, .trends__item.focusable, .story.focusable, .scrollable :not(.focusable) > .account:not(.account--minimal).focusable, -.timeline-hint.focusable { +.timeline-hint.focusable, +.notification-request.focusable { background: none; } @media (pointer: fine) { @@ -1191,7 +1198,8 @@ a:focus-visible, .trends__item::before, .story::before, .scrollable :not(.focusable) > .account:not(.account--minimal)::before, - .timeline-hint::before { + .timeline-hint::before, + .notification-request::before { content: ""; position: absolute; inset: 0px !important; @@ -1207,13 +1215,15 @@ a:focus-visible, .story:hover::before, .scrollable :not(.focusable) > .account:not(.account--minimal):hover::before, .timeline-hint:hover::before, + .notification-request:hover::before, .focusable:focus-within::before, .entry:focus-within::before, .statuses-grid__item .detailed-status:focus-within::before, .trends__item:focus-within::before, .story:focus-within::before, .scrollable :not(.focusable) > .account:not(.account--minimal):focus-within::before, - .timeline-hint:focus-within::before { + .timeline-hint:focus-within::before, + .notification-request:focus-within::before { background-color: var(--hover-color); } } @@ -1485,10 +1495,8 @@ a:focus-visible, margin-bottom: -6px; gap: 0; margin-inline-start: -8px; - pointer-events: none; } .status__action-bar__button-wrapper { - pointer-events: all; flex-grow: 1; max-width: 55px; min-width: max-content; @@ -1560,9 +1568,6 @@ a:focus-visible, pointer-events: none; } @media (min-width: 890px) { - .layout-single-column .item-list > article > div { - position: relative; - } .layout-single-column .item-list > article > div::after { inset-inline: calc(var(--radius) + 10px); } @@ -3161,4 +3166,5 @@ a:focus-visible, } .emoji-picker-dropdown__modifiers { top: 16px; -} \ No newline at end of file +} + diff --git a/modern.user.css b/modern.user.css index c893d08..9efc73f 100644 --- a/modern.user.css +++ b/modern.user.css @@ -6,14 +6,17 @@ // textbox in the left panel following this format: // *://domain.tld/* -/* Update 2.0.3 (Mastodon 4.4) -- Fixed missing navigation header -- Fixed doubled-borders in the timeline +/* Update 2.0.4 (Mastodon 4.4) +- Fixed filtered notification filter controls (#6) +Glitch-soc: +- Fixed unclickable timestamp +- broken padding and clipping in post content +w/ help from pull req #7 */ /* ==UserStyle== @name MastoModern -@version 2.0.3 +@version 2.0.4 @description Improves the look & feel of Mastodon @updateURL https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css @homepageURL https://git.gay/Freeplay/Mastodon-Modern @@ -32,7 +35,7 @@ @var range borderRadius "Border radius" [12, 0, 24, 4, "px"] @var range radiusRound "Border radius round" [24, 0, 24, 4, "px"] @var range avatarRadius "Avatar radius" [30, 0, 50, 10, "%"] -@var color warn "Some options may not apply depending on the server's style defaults and how the option was implemented" #ff6b00 +@var color warn "Some options may not apply depending on the server's style defaults and how the option was implemented" #ff6b00 @namespace Freeplay @author Freeplay (https://freeplay.floof.company/) @@ -40,3279 +43,3254 @@ @-moz-document domain("mastodon.social"), domain("mastodon.online"), domain("mstdn.social"), domain("tech.lgbt"), domain("meow.social"), domain("corteximplant.com"), domain("bark.lgbt"), domain("yiff.life"), domain("furry.engineer"), domain("aus.social"), domain("infosec.exchange"), domain("ohai.social"), domain("eldritch.cafe"), domain("octodon.social"), domain("donphan.social"), domain("peoplemaking.games"), domain("toot.cat"), domain("vt.social") { / { -responsiveW1 = 1320px -responsiveW2 = 1175px -mobileW = 890px + responsiveW1 = 1320px + responsiveW2 = 1175px + mobileW = 890px -transBounce1 = .2s cubic-bezier(0,0,0,1.1) + transBounce1 = .2s cubic-bezier(0,0,0,1.1) -statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .scrollable :not(.focusable) > .account:not(.account--minimal), .timeline-hint" -media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder" + statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .scrollable :not(.focusable) > .account:not(.account--minimal), .timeline-hint, .notification-request" + media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder" -:root { - --tl-width tlWidth - if tlWidth == 860 { - --tl-width 100% - } - if !largerEmoji { - --emoji-size 1.2em - } - if largerEmoji { - --emoji-size 2em - } - - --avatar-size 46px - --radius borderRadius - --radius-round radiusRound - --panel-radius var(--radius) - --hover-color rgba(170,170,170, 0.07) - --elevated-color rgba(150,150,200,0.1) - --elevated-tint rgba(200,200,240,0.07) - --border-color rgba(120,120,200, 0.2) - --border-color-2 rgba(120,120,120, 1) - --shadow 0 10px 40px -10px rgba(0,0,0,0.15) - --shadow-low 0 8px 24px -16px rgba(0,0,0,0.2) - --shadow-med 0 8px 60px -30px rgba(0,0,0,0.1) - --column-shadow 0 8px 24px 12px rgba(0,0,0,0.02) - --background-border-color var(--border-color) - if flatterUI { - --column-shadow 0 - --elevated-tint 0 - } - - // --accent // not applied everywhere, just for if you have custom color scheme and want to match it -} + :root { + --tl-width tlWidth + if tlWidth == 860 { + --tl-width 100% + } + if !largerEmoji { + --emoji-size 1.2em + } + if largerEmoji { + --emoji-size 2em + } -desktop() { - @media (min-width mobileW) { - .layout-single-column { - {block} + --avatar-size 46px + --radius borderRadius + --radius-round radiusRound + --panel-radius var(--radius) + --hover-color rgba(170,170,170, 0.07) + --elevated-color rgba(150,150,200,0.1) + --elevated-tint rgba(200,200,240,0.07) + --border-color rgba(120,120,200, 0.2) + --border-color-2 rgba(120,120,120, 1) + --shadow 0 10px 40px -10px rgba(0,0,0,0.15) + --shadow-low 0 8px 24px -16px rgba(0,0,0,0.2) + --shadow-med 0 8px 60px -30px rgba(0,0,0,0.1) + --column-shadow 0 8px 24px 12px rgba(0,0,0,0.02) + --background-border-color var(--border-color) + if flatterUI { + --column-shadow 0 + --elevated-tint 0 + } + + // --accent // not applied everywhere, just for if you have custom color scheme and want to match it + } + + desktop() { + @media (min-width mobileW) { + .layout-single-column { + {block} + } } } -} -@media (max-width mobileW - 1) { - :root { + @media (max-width mobileW - 1) { + :root { + --panel-radius 0px + } + } + .layout-multiple-columns { --panel-radius 0px } -} -.layout-multiple-columns { - --panel-radius 0px -} -//// BODY -body { - font-display swap !important - if !flatterUI { - &:not(.admin)::before { - content "" - position fixed - inset 0 - background rgba(0,0,0,0.06) - z-index -1 - } - } -} - -//// GLOBAL -/ { - p { - line-height 1.5 - } - input { - text-align start - } - .button--block { - font-weight bold - } - .unhandled-link, .mention { - span { - text-decoration none !important - } - &:not(:focus):not(:hover) { - span { - text-decoration underline !important + //// BODY + body { + font-display swap !important + if !flatterUI { + &:not(.admin)::before { + content "" + position fixed + inset 0 + background rgba(0,0,0,0.06) + z-index -1 } } } - input, .input-copy, select, textarea, - .compose-form__upload-thumbnail, .button, - :not(.notification__filter-bar) > button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track, - .reply-indicator, .compose-form__warning { - border-radius var(--radius) - } - button, .focusable, a, .media-gallery__item-thumbnail { - &:focus-visible { - box-shadow inset 0 0 0 2px #dc7b18 - outline 2px #dc7b18 solid - outline-offset -2px - } - } - :not(.radio-button__input):not(span) { - border-color var(--border-color) !important - } - .nothing-here - .column-inline-form, - .scrollable, - .detailed-status__action-bar, - .column-back-button, .column-header__collapsible.collapsed, .column-header__collapsible-inner, - .audio-player, .search__input { - border 0 !important - } - .account__section-headline, .notification__filter-bar, - .column-header { - border-inline 0 - } - - .account__section-headline, .notification__filter-bar - .column > .scrollable { - background none - } - - .account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img { - border-radius avatarRadius - flex none - } - - :not(body):not(.scrollable) { - &::-webkit-scrollbar { - width 6px - margin-block 10px - &-track { - background none - } - &-thumb { - border-radius 100px - transition background-color .2s - } - } - &:not(:hover) { - &::-webkit-scrollbar-thumb { - background none - padding-block 10px - } - } - } -} -// ANIMATIONS -/ { - @media (prefers-reduced-motion: no-preference) { - body:not(.reduce-motion) { - .load-more, .setting-toggle, .column-header__back-button, .column-back-button, - .trends__item, .story, .account__avatar, .button, - .media-gallery__item, .column-link, select, .status-card, .audio-player, .account { - transition transform .4s cubic-bezier(0,0,0,3), background .2s, opacity .2s !important - &:active, &:focus-visible { - transform scale(.99) - transition transform .4s cubic-bezier(0,0,0,1) !important - } - } - .column-header__button, .column-header__buttons > .column-header__back-button, - .react-toggle-track, .icon-button, .floating-action-button { - transition transform .4s cubic-bezier(0,0,0,4), background .2s !important - &:active { - transform scale(.95) - transition transform .4s cubic-bezier(0,0,0,1) !important - } - } - .status__content__spoiler-link { - span { - display inline-block - transition transform .4s cubic-bezier(0,0,0,4) !important - } - - &:active span { - transition transform .4s cubic-bezier(0,0,0,1) !important - transform translateY(1px) - } - } - } - .reduce-motion * { - animation-duration 0s !important - } - - @keyframes bounceIn { - 0% { transform: scale(1.1); opacity: 0 } - 30% { transform: scale(.99); opacity: 1 } - 60% { transform: scale(1.005); opacity: 1 } - 100% { transform: scale(1); opacity: 1 } - } - - @keyframes slideUp { - from { - transform translateY(20px) - } - } - @keyframes slideUpFade { - from { - transform translateY(20px) - filter opacity(0) - } - } - @keyframes slideDownFade { - from { - transform translateY(-20px) - filter opacity(0) - } - } - @keyframes slideUpBig { - from { - transform translateY(50vh) - } - } - @keyframes fadeUp { - from { - transform translateY(10px) - opacity 0 - } - } - @keyframes scaleIn { - from { - transform scale(.98) - opacity 0 - } - } - @keyframes fadeLeft { - from { - transform: translateX(20px) opacity(0) - } - } - @keyframes rainbow { - to { - filter hue-rotate(360deg) - } - } - } -} - -//// ALL COLUMNS -/ { - .columns-area__panels { - --top 5px - gap 0 - if navOnLeft { - flex-direction row-reverse - } - if spaceBetween { - justify-content space-between - } - } - @media (min-width responsiveW2) { - .columns-area__panels { - padding-inline 10px - padding-top var(--top) - box-sizing border-box - transition padding .4s - --top 20px - } - } - @media (min-width responsiveW1) { - .columns-area__panels { - --top 30px - } - if spaceBetween { - .columns-area__panels { - --top 10px - } - .columns-area__panels__main { - margin-top 20px !important - } - } - } -} - -// LEFT COLUMN -/ { - .columns-area__panels__pane--compositional { - @media (min-width responsiveW1) { - if spaceBetween { - .columns-area__panels__pane__inner::before { - content "" - position absolute - inset -100px -11px - border-inline 1px solid var(--border-color) - z-index -1 - } - } - } - - } - - // COMPOSE - .compose-panel { - overflow-y auto - margin-top calc(0px - var(--top)) - padding-top var(--top) - padding-bottom 20px - padding-inline 10px - box-sizing border-box - max-height unset !important - height 100% - > * { - padding-inline 0 - } - > .navigation-bar { - padding-top 0 !important - } - .search, /.drawer .search { - margin-bottom 25px - } - } - .compose-form__uploads { - padding 0 - margin-block 0 !important - margin-inline 12px - width unset - } - .search { - border-radius var(--radius) - margin-inline -5px - label { - // padding-inline 20px - box-sizing border-box + //// GLOBAL + / { + p { + line-height 1.5 } input { - border-radius var(--radius-round) !important + text-align start } - .search__icon > i { - margin-inline 5px + .button--block { + font-weight bold } - /.search__popout { - border-radius var(--radius) - animation scaleIn .2s - box-shadow var(--shadow-low) - margin-top 10px - margin-inline 4px - width calc(100% - 8px) - } - } - .navigation-bar { - .icon-button { - width auto !important - height auto !important - padding 8px - } - } - .compose-form { - min-height unset - overflow unset - gap 15px - flex 1 0 auto !important - > * { - margin 0 !important - } - > [aria-hidden="true"] { - display none - } - > .navigation-bar { - margin-top 10px - } - .reply-indicator { - position relative - transition min-height .1s - } - .reply-indicator__display-name { - padding 0 - } - .spoiler-input__border { - display none - } - #cw-spoiler-input { - padding-inline 12px - } - .compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { - border-radius var(--radius) var(--radius) 0 0 !important - border-bottom 0 - } - .compose-form__buttons-wrapper { - border-radius 0 0 var(--radius) var(--radius) !important - } - .compose-form__publish-button-wrapper { - overflow visible !important - max-width 100% - padding 0 - } - .compose-form__upload__actions { - z-index 5 - position relative - button { - background none - } - } - .compose-form__upload__thumbnail { - display flex - flex-direction column - } - .compose-form__upload__warning { - //display contents - position relative - flex-grow 1 - display flex - button { - margin-top auto - } - button.active { - box-shadow 0 0 0 100px rgba(0,0,0,0.75) - width 100% - height 100% - font-weight bold - font-size 1.1em - color inherit - transition background .2s, transform .2s cubic-bezier(0,0,0,1) !important - svg { - height 1.2em - width @height - } - &:hover, &:focus { - background rgba(20,20,20,0.75) - } - } - } - } - .compose-form__highlightable { - border-radius var(--radius) - overflow visible !important - #cw-spoiler-input { - border-radius 0 !important - } - textarea { - background none !important - } - .compose-form__dropdowns { - max-width calc(100% - 7ch) - } - .compose-form__actions { - position relative - } - .compose-form__buttons { - display flex - flex-wrap wrap - flex-direction row - gap 0 - flex-grow 9999 - * { - display flex - flex-grow 1 - } - label { - display none - } - button { - flex-grow 1 - padding 5px - } - } - .compose-form__submit { - button { - padding 8px 16px - } - } - .character-counter { - position absolute - inset-inline-end 0 - bottom calc(100% + 12px) - padding 4px - font-size 13px - } - } - - //// SERVER INFO - .server-banner { - .server-banner__hero { - border-radius var(--radius) - // margin-inline -10px - width 100% - // width calc(100% + 20px) - border-radius var(--radius) var(--radius) 0 0 - border 1px solid var(--border-color) - box-sizing border-box - } - .server-banner__description { - border 1px solid var(--border-color) - padding 14px 12px - margin-top -20px - line-height 1.5 - border-radius 0 0 var(--radius) var(--radius) - } - .server-banner__meta { - flex-direction column - .server-banner__meta__column { - width unset - overflow visible - display flex - flex-direction row - flex-wrap wrap - align-items flex-end - h4 { - margin 0 - font-size .9em !important - width 100% - // font-weight 500 - } - .account { - margin-inline -10px - padding 10px !important - width 100% - &::after { - content unset !important - } - } - .server-banner__number, .server-banner__number-label { - font-size 1.1em - line-height 2 - margin-inline-end .5em - } - .server-banner__number-label { - font-weight 400 !important - } - } - } - } - .navigation-panel__sign-in-banner { - margin-inline 5px - // border-top 1px solid - position relative - } - .link-footer { - margin-top 20px - > p:last-child { - margin-bottom 0 - } - } -} - -//// CENTER COLUMN -/ { - .columns-area { - box-shadow var(--column-shadow) - padding 0 - overflow visible - } - .columns-area__panels__main { - @media (min-width responsiveW2) { - width 0 - flex-grow 1 - margin-inline 10px - max-width var(--tl-width) !important - } - @media (min-width responsiveW1) { - margin 0 20px - } - if sideHeader { - @media (min-width mobileW) { - display grid - grid-template-columns 100% - .column, .columns-area { - grid-column 1 - overflow clip !important - border-radius var(--radius) var(--radius) 0 0 !important - > :first-child { - border-radius var(--radius) var(--radius) 0 0 !important - } - } - } - } - - overflow visible !important - contain inline-size style !important - transition max-width transBounce1, margin transBounce1 - - if !sideHeader { - overflow clip !important - border-radius var(--radius) var(--radius) 0 0 !important - } - - > div { - grid-row 1 - } - } - .column { - background var(--background-color) - overflow clip - &::before { - content "" - position absolute - inset 0 - background var(--elevated-tint) - pointer-events none - } - } - if flatterUI { - .columns-area.columns-area, .column.column { - overflow visible !important - } - .scrollable { - contain unset !important - } - } - +desktop() { - .scrollable > [tabindex="-1"]:first-child { - margin-top 10px - } - .item-list { - > article:first-of-type { - margin-top 10px - } - > article::after { - inset-inline calc(var(--radius) + 10px) - } - } - .load-more - .trends__item, - {statuses-list} { - margin-inline 10px - max-width calc(100% - 20px) - } - } - .scrollable { - padding-bottom 40vh !important - } - .empty-column-indicator, .error-column { - background none - } - .dismissable-banner { - display flex - align-items center - flex-direction row-reverse - gap 20px - margin 0 - border-radius 0 - border 0 - padding 25px - > div { - padding 0 - } - button { - padding 16px - margin -16px -14px - } - } - - // COLUMN HEADER - .tabs-bar__wrapper { - if sideHeader { - grid-column 2 - @media (min-width mobileW) { - margin-top -100vh - } - } - border 0 !important - padding-top 0 - transition margin transBounce1, top .4s - /.column-header, /.column-inline-form { - font-weight 600 - border-bottom-left-radius 0 !important - border-bottom-right-radius 0 !important - & ~ .scrollable { - border-top-left-radius 0 !important - border-top-right-radius 0 !important - } - } - /.column-header__title { - display inline - svg { - vertical-align -.4em - } - } - /.announcements, /.column-header__collapsible:not(.collapsed) { - flex-direction column-reverse - align-items flex-start - border 0 - animation slideDownFade .3s backwards cubic-bezier(0,1,0,1.2) - } - /.column-header__collapsible { - transition none - background var(--surface-background-color) - overflow-y auto !important - } - .collapsed { - display none - } - /.announcements { - background var(--surface-background-color) - } - /.announcements__container { - width 100% !important - } - /.announcements__mastodon { - display block !important - z-index -1 - position relative - } - /.announcements__pagination { - bottom unset - padding-block 0 - display flex - align-items center - } - /.column-header__wrapper { - > :not(.column-header):not(.collapsed) { - border-top 2px solid var(--background-color) !important - } - } - /.column-header { - overflow hidden - } - /.column-header > button { - z-index 2 - } - /.column-header__buttons { - isolation isolate - } - /.column-header__buttons button { - transition background .2s, transform .3s !important - position relative - border-radius 100px !important - min-width 40px - margin 5px - margin-inline-start 0 - font-size .9em - padding-inline 10px - //transform none !important - &:not(.active) { - background var(--elevated-color) !important - z-index 2 - } - svg { - margin 0 - } + .unhandled-link, .mention { span { - display none + text-decoration none !important } - &::before { - content "" - position absolute - inset -20px -800px - transform scale(0) - transform-origin bottom center - background var(--surface-background-color) - z-index -1 - border-radius 100px - pointer-events none - opacity 0 - transition transform .3s, opacity .3s - @media (prefers-reduced-motion) { - transition none !important + &:not(:focus):not(:hover) { + span { + text-decoration underline !important } } - &.active { - &::before { - transform scale(1, 5) - opacity 1 - transition transform .3s, opacity .1s - } + } + input, .input-copy, select, textarea, + .compose-form__upload-thumbnail, .button, + :not(.notification__filter-bar) > button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track, + .reply-indicator, .compose-form__warning { + border-radius var(--radius) + } + button, .focusable, a, .media-gallery__item-thumbnail { + &:focus-visible { + box-shadow inset 0 0 0 2px #dc7b18 + outline 2px #dc7b18 solid + outline-offset -2px } } + :not(.radio-button__input):not(span) { + border-color var(--border-color) !important + } - - @media (min-width mobileW) { - inset-inline unset !important - height 50px !important - top 0 - .column-header__wrapper { - display flex - flex-direction column - border-radius var(--radius) - overflow hidden - } - .column-header { - background none !important - overflow hidden - border 0 - } - if sideHeader { - top var(--top) !important - width 285px - border-radius var(--radius) var(--radius) !important - box-shadow 0 12px 12px -12px rgba(0,0,0,0.1) - - if !spaceBetween { - margin-inline-start 20px - @media (max-width responsiveW1 - 1) { - margin-inline-start 10px - } - } - @media (max-width responsiveW2 - 1) { - width 265px - top 10px !important - } - - if spaceBetween { - position fixed - inset-inline-end 10px !important - margin 0 !important - } - - if navOnLeft { - grid-column 1 - if !spaceBetween { - margin-inline-start -285px - 20px !important - @media (max-width responsiveW1 - 1) { - margin-inline-start -285px - 10px !important - } - @media (max-width responsiveW2 - 1) { - margin-inline-start -285px + 10px !important - } - } - if spaceBetween { - inset-inline-start 10px !important - } - } - } - if !sideHeader { - border-bottom 1px solid var(--border-color) !important - &::after { - content "" - position absolute - inset 0 - background var(--elevated-tint) - } - .column-header { - padding-inline 10px - } - } + .nothing-here + .column-inline-form, + .scrollable, + .detailed-status__action-bar, + .column-back-button, .column-header__collapsible.collapsed, .column-header__collapsible-inner, + .audio-player, .search__input { + border 0 !important } - } - if sideHeader { - @media (min-width mobileW) { - .column-back-button--slim { - margin-left auto !important - order -1 - > .column-back-button { - margin-top 0 !important - top unset !important - } - } - @media (max-width responsiveW2 - 1) { - .column-back-button--slim > .column-back-button { - margin-top -55px !important - top unset !important - } - } - } - } - - // COLUMN HEADER SETTINGS - .column-settings__row, .column-settings__hashtags { - gap 0 - } - .column-settings h3 { - font-size 1em - margin-bottom 8px - } - .column-select__control { - border-radius var(--radius) - } - .local-settings__page__item, - .glitch-setting-text.glitch-setting-text, - .setting-toggle, .app-form__toggle { - display flex - align-items center - margin-bottom 14px - position relative - padding .7em - background var(--elevated-color) - margin-block 0 2px !important - overflow hidden - &:first-of-type { - border-top-left-radius var(--radius) - border-top-right-radius var(--radius) - } - &:last-of-type { - border-bottom-left-radius var(--radius) - border-bottom-right-radius var(--radius) - } - label, legend { - padding-block 2px !important - } - label span { - &::before { - content "" - position absolute - inset -900px - } + .account__section-headline, .notification__filter-bar, + .column-header { + border-inline 0 } - // border-radius var(--radius) - .react-toggle { - order 2 - } - .setting-toggle__label { - margin-bottom 0 !important - flex-grow 1 - width 0 - } - - &::before { - content "" - position absolute - inset 0 - background var(--hover-color) - opacity 0 - transition opacity .2s - pointer-events none - } - &:hover, &:focus-within { - &::before { - opacity 1 - } - } - } -} - -//// RIGHT COLUMN -/ { - .columns-area__panels__pane--navigational { - @media (min-width responsiveW1) { - if spaceBetween { - .columns-area__panels__pane__inner { - &::before, &::after { - content "" - position absolute - inset -100px -10px - background var(--background-color) - z-index -1 - } - &::after { - background var(--elevated-tint) - } - } - } - } - } - - //// NAV PANEL - .navigation-panel.navigation-panel { - box-sizing border-box - if sideHeader { - height calc(100vh - var(--top) - 50px + var(--radius)) - } - padding-bottom 10px - margin 0 - border 0 - margin-top calc(0px - var(--radius)) - padding-top calc(10px + var(--radius)) - overflow hidden auto - hr { - display none - } - .navigation-panel__menu { - display contents - } - - @media (min-width responsiveW2) { - if sideHeader { - padding-top calc(var(--radius) + 10px) - margin-top calc(50px - var(--radius)) - .navigation-panel__logo { - margin 0 - .column-link, hr { - display none !important - } - } - } - if !sideHeader { - margin-top calc(0px - var(--top)) - height 100vh - padding-top var(--top) - } - .switch-to-advanced { - border-radius var(--radius) - margin-top 0 - } - [href="/settings/preferences"] { - display none !important - } - } - /.column-link { - border 0 - gap 0 - } - /.icon-with-badge__badge { - display flex !important - align-items center - justify-content center - padding 0 .3em !important - width 2em - height 2em - min-width max-content - border-radius 2em - font-weight 600 - font-size .6em !important - top -10px - box-sizing border-box - } - /.column-header__back-button - /.column-back-button > svg - /.column-link__icon, /.column-header > button .column-header__icon { - margin-inline-end .7em - font-size 16px !important - padding-right 0 !important - } - @media (min-width mobileW) { - /.column-link { - flex-grow 100 !important - display flex !important - align-items center !important - align-content center - max-height 3em - min-height 2.7em !important - padding-block 0 - border-radius 100px - position relative - box-sizing border-box - opacity .9 - overflow hidden - background none !important - &::before { - content: "" !important; - position absolute - border-radius: 100px; - width unset !important - height unset !important - inset 0px 0px !important - // min-height 43px - opacity 0 !important - background-color rgba(150,150,150,0.1) - transition opacity .2s - } - &.active { - opacity 1 !important - font-weight 600 - } - &:hover, &:focus { - &:before { - opacity 1 !important - } - } - &[href="/lists"] { - & + div { - hr { - display none - } - .column-link { - margin-bottom 2px - - i { - opacity .2 - } - } - } - } - } - .getting-started__trends { - display unset !important - } - } - - .trends__item { - margin 0 !important - } - } -} - - -//// STATUSES -/ { - .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper { - &::after { - content unset - } - } - {statuses-list} { - overflow hidden - contain paint inline-size - position relative - border-radius var(--panel-radius) - border 0 - - &.focusable { + .account__section-headline, .notification__filter-bar + .column > .scrollable { background none } - // Hover - @media (pointer fine) { - &::before { - content "" - position absolute - inset 0px !important - height unset !important - width unset !important - pointer-events none - transition background-color .2s + + .account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img { + border-radius avatarRadius + flex none + } + + :not(body):not(.scrollable) { + &::-webkit-scrollbar { + width 6px + margin-block 10px + &-track { + background none + } + &-thumb { + border-radius 100px + transition background-color .2s + } } - &:hover, &:focus-within { - &::before { - background-color var(--hover-color) + &:not(:hover) { + &::-webkit-scrollbar-thumb { + background none + padding-block 10px } } } } - .status:not(.status--first-in-thread) { - border 0 - } - .detailed-status - .status { - padding 16px - } - .status__info { - .account__avatar, .status__avatar { - max-width var(--avatar-size) !important - max-height var(--avatar-size) !important - } - } - .status__line { - left calc(16px + (var(--avatar-size) / 2)) - } - .status__prepend { - & + .status:not(.status-direct) { - padding-top 5px - } - } - - // STATUS REPLY - .status--in-thread { - @media (max-width 450px) { - --avatar-size 34px - .status__info ~ * { - margin-inline-start calc(var(--avatar-size) + 10px) - width calc(100% - (var(--avatar-size) + 10px)) + // ANIMATIONS + / { + @media (prefers-reduced-motion: no-preference) { + body:not(.reduce-motion) { + .load-more, .setting-toggle, .column-header__back-button, .column-back-button, + .trends__item, .story, .account__avatar, .button, + .media-gallery__item, .column-link, select, .status-card, .audio-player, .account { + transition transform .4s cubic-bezier(0,0,0,3), background .2s, opacity .2s !important + &:active, &:focus-visible { + transform scale(.99) + transition transform .4s cubic-bezier(0,0,0,1) !important + } + } + .column-header__button, .column-header__buttons > .column-header__back-button, + .react-toggle-track, .icon-button, .floating-action-button { + transition transform .4s cubic-bezier(0,0,0,4), background .2s !important + &:active { + transform scale(.95) + transition transform .4s cubic-bezier(0,0,0,1) !important + } + } + .status__content__spoiler-link { + span { + display inline-block + transition transform .4s cubic-bezier(0,0,0,4) !important + } + + &:active span { + transition transform .4s cubic-bezier(0,0,0,1) !important + transform translateY(1px) + } + } + } + .reduce-motion * { + animation-duration 0s !important + } + + @keyframes bounceIn { + 0% { transform: scale(1.1); opacity: 0 } + 30% { transform: scale(.99); opacity: 1 } + 60% { transform: scale(1.005); opacity: 1 } + 100% { transform: scale(1); opacity: 1 } + } + + @keyframes slideUp { + from { + transform translateY(20px) + } + } + @keyframes slideUpFade { + from { + transform translateY(20px) + filter opacity(0) + } + } + @keyframes slideDownFade { + from { + transform translateY(-20px) + filter opacity(0) + } + } + @keyframes slideUpBig { + from { + transform translateY(50vh) + } + } + @keyframes fadeUp { + from { + transform translateY(10px) + opacity 0 + } + } + @keyframes scaleIn { + from { + transform scale(.98) + opacity 0 + } + } + @keyframes fadeLeft { + from { + transform: translateX(20px) opacity(0) + } + } + @keyframes rainbow { + to { + filter hue-rotate(360deg) + } } } } - - // STATUS CONTENT - .status__content { - text-align unset !important - line-height 1.5 - &.status__content--with-spoiler { - overflow visible - > p { - margin-inline -100px - padding-inline 100px - overflow hidden + + //// ALL COLUMNS + / { + .columns-area__panels { + --top 5px + gap 0 + if navOnLeft { + flex-direction row-reverse } - > p:first-child { + if spaceBetween { + justify-content space-between + } + } + @media (min-width responsiveW2) { + .columns-area__panels { + padding-inline 10px + padding-top var(--top) + box-sizing border-box + transition padding .4s + --top 20px + } + } + @media (min-width responsiveW1) { + .columns-area__panels { + --top 30px + } + if spaceBetween { + .columns-area__panels { + --top 10px + } + .columns-area__panels__main { + margin-top 20px !important + } + } + } + } + + // LEFT COLUMN + / { + .columns-area__panels__pane--compositional { + @media (min-width responsiveW1) { + if spaceBetween { + .columns-area__panels__pane__inner::before { + content "" + position absolute + inset -100px -11px + border-inline 1px solid var(--border-color) + z-index -1 + } + } + } + + } + + // COMPOSE + .compose-panel { + overflow-y auto + margin-top calc(0px - var(--top)) + padding-top var(--top) + padding-bottom 20px + padding-inline 10px + box-sizing border-box + max-height unset !important + height 100% + > * { + padding-inline 0 + } + > .navigation-bar { + padding-top 0 !important + } + .search, /.drawer .search { + margin-bottom 25px + } + } + .compose-form__uploads { + padding 0 + margin-block 0 !important + margin-inline 12px + width unset + } + .search { + border-radius var(--radius) + margin-inline -5px + label { + // padding-inline 20px + box-sizing border-box + } + input { + border-radius var(--radius-round) !important + } + .search__icon > i { + margin-inline 5px + } + /.search__popout { + border-radius var(--radius) + animation scaleIn .2s + box-shadow var(--shadow-low) + margin-top 10px + margin-inline 4px + width calc(100% - 8px) + } + } + .navigation-bar { + .icon-button { + width auto !important + height auto !important + padding 8px + } + } + .compose-form { + min-height unset + overflow unset + gap 15px + flex 1 0 auto !important + > * { + margin 0 !important + } + > [aria-hidden="true"] { + display none + } + > .navigation-bar { + margin-top 10px + } + .reply-indicator { + position relative + transition min-height .1s + } + .reply-indicator__display-name { + padding 0 + } + .spoiler-input__border { + display none + } + #cw-spoiler-input { + padding-inline 12px + } + .compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { + border-radius var(--radius) var(--radius) 0 0 !important + border-bottom 0 + } + .compose-form__buttons-wrapper { + border-radius 0 0 var(--radius) var(--radius) !important + } + .compose-form__publish-button-wrapper { + overflow visible !important + max-width 100% + padding 0 + } + .compose-form__upload__actions { + z-index 5 + position relative + button { + background none + } + } + .compose-form__upload__thumbnail { + display flex + flex-direction column + } + .compose-form__upload__warning { + //display contents + position relative + flex-grow 1 + display flex + button { + margin-top auto + } + button.active { + box-shadow 0 0 0 100px rgba(0,0,0,0.75) + width 100% + height 100% + font-weight bold + font-size 1.1em + color inherit + transition background .2s, transform .2s cubic-bezier(0,0,0,1) !important + svg { + height 1.2em + width @height + } + &:hover, &:focus { + background rgba(20,20,20,0.75) + } + } + } + } + .compose-form__highlightable { + border-radius var(--radius) + overflow visible !important + #cw-spoiler-input { + border-radius 0 !important + } + textarea { + background none !important + } + .compose-form__dropdowns { + max-width calc(100% - 7ch) + } + .compose-form__actions { + position relative + } + .compose-form__buttons { + display flex + flex-wrap wrap + flex-direction row + gap 0 + flex-grow 9999 + * { + display flex + flex-grow 1 + } + label { + display none + } + button { + flex-grow 1 + padding 5px + } + } + .compose-form__submit { + button { + padding 8px 16px + } + } + .character-counter { + position absolute + inset-inline-end 0 + bottom calc(100% + 12px) + padding 4px + font-size 13px + } + } + + //// SERVER INFO + .server-banner { + .server-banner__hero { + border-radius var(--radius) + // margin-inline -10px + width 100% + // width calc(100% + 20px) + border-radius var(--radius) var(--radius) 0 0 + border 1px solid var(--border-color) + box-sizing border-box + } + .server-banner__description { + border 1px solid var(--border-color) + padding 14px 12px + margin-top -20px + line-height 1.5 + border-radius 0 0 var(--radius) var(--radius) + } + .server-banner__meta { + flex-direction column + .server-banner__meta__column { + width unset + overflow visible + display flex + flex-direction row + flex-wrap wrap + align-items flex-end + h4 { + margin 0 + font-size .9em !important + width 100% + // font-weight 500 + } + .account { + margin-inline -10px + padding 10px !important + width 100% + &::after { + content unset !important + } + } + .server-banner__number, .server-banner__number-label { + font-size 1.1em + line-height 2 + margin-inline-end .5em + } + .server-banner__number-label { + font-weight 400 !important + } + } + } + } + .navigation-panel__sign-in-banner { + margin-inline 5px + // border-top 1px solid + position relative + } + .link-footer { + margin-top 20px + > p:last-child { margin-bottom 0 } } - p:empty { - max-height 0 - } - picture { - display contents - } - .custom-emoji { - display inline-block - height var(--emoji-size) !important - min-width var(--emoji-size) !important - width auto !important - margin -.2ex 0 .2ex - - if emojiZoom { - @media (prefers-reduced-motion: no-preference) { - /^[-1..-1] { - transition transform 1s cubic-bezier(0,0.7,0,1) - &:hover { - transform scale(1.7) - transition transform .4s cubic-bezier(0,0.7,0,1) - } - } - } - } - } - // max-height to media - & ~ [style*="aspect-ratio"] { - max-height 80vh - } } - - // STATUS DIRECT - .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { - .status__content { - position relative !important - background var(--elevated-color) - padding 12px 14px - border-radius var(--radius-round) - border-top-left-radius 6px - box-sizing border-box - margin-bottom 0 - overflow hidden !important - max-width max-content - .media-gallery { - width 999px - max-width 100% !important - } - } - } - .status__wrapper-direct:not(.detailed-status__wrapper-direct) { - .status__prepend { - position absolute - contain strict - } - } - - // STATUS DETAILED - .detailed-status { - border 0 - padding-bottom 4px - } - .detailed-status__wrapper, .detailed-status { - box-shadow var(--shadow) - .status__content { - min-height unset !important - } - } - .detailed-status__wrapper { - isolation isolate - background none - &::before { - content "" - position absolute - inset 0 - background var(--elevated-tint) !important - pointer-events none - z-index -1 - } - .detailed-status { - box-shadow none - } - } - - .detailed-status__meta { - margin-top 14px - line-height 2 - > * { - display inline-flex - border 0 !important - padding 0 !important - margin-inline-end 8px - &:not(:last-child) { - &::after { - content "·" - } - } - } - } - - // STATUS MEDIA - {media} { - box-shadow var(--shadow-low) - border-radius var(--radius) !important - margin-block 10px - animation scaleIn .4s - max-width unset !important - } - if collapseHidden { - .media-gallery:has(.spoiler-button:not(.spoiler-button--minified)) { - height 150px !important - aspect-ratio unset !important - } - } - .media-gallery__item { - border-radius 0 - outline none - } - .spoiler-button--minified { - button { - padding 6px !important - background rgba(0,0,0,0.2) !important - if hideClickArea { - &::after { - content "" - position absolute - inset -50px - } - } - &:hover { - background rgba(0,0,0,0.4) !important - } - } - .icon { - width 18px - height 18px - } - } - // link embeds - .status-card { - align-items stretch - gap 0 - &:not(.horizontal) { - border 1px solid var(--border-color) !important - } - &:not(.expanded) .status-card__image { - overflow hidden - img { - border-radius 0 - } - } - &:not(.interactive) .status-card__image { - position relative - aspect-ratio unset !important - } - /.status-card__content { - margin-block auto - padding 15px - } - /.status-card__host { - font-size .85em - line-height 1.5 - margin 0 - } - /.status-card__title { - font-size 1em - margin-top .2em - margin-bottom 0 - line-height 1.4 - } - /.status-card__description { - line-height 1.4 !important - margin 0 - @supports (-webkit-line-clamp 8) { - display -webkit-box - -webkit-line-clamp 8 - -webkit-box-orient vertical - white-space unset - } - } - /.status-card__author { - margin-top 0.4em - font-size .85em - } - &:hover { - background-color var(--hover-color) - } - } - .more-from-author { - background none - border 0 - padding-top 0 - border-radius var(--radius) - } - - .audio-player { - .video-player__seek { - margin var(--radius) - } - } - - .hashtag-bar { - margin-top 10px - a, button { - color var(--accent, #8c8dff) - transition opacity .2s - padding 5px 10px - } - a { - position relative - border-radius var(--radius-round) - background var(--elevated-color) - &::after { - content "" - position absolute - inset 0 - background var(--elevated-color) - border-radius inherit - opacity 0 - transition opacity .2s - } - &:hover, &:focus { - opacity 1 - &::after { - opacity 1 - } - } - } - button { - padding-block 0 - } - } - - - // STATUS FOOTER - .status__action-bar { - flex-wrap wrap - margin-top .4em - margin-bottom -6px - gap 0 - margin-inline-start -8px - pointer-events none - /.status__action-bar__button-wrapper { - pointer-events all - flex-grow 1 - max-width 55px - min-width max-content - } - * { - display flex !important - justify-content center !important - flex-grow 1 !important - } - .icon-button { - margin 0 - &::before { // Increase the click area - content "" - position absolute - inset -.5em - } - } - } - - .status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer { - position relative - z-index 2 - justify-content unset - .icon-button { - display inline-flex - align-items center - justify-content center - padding .5em .4em !important - border-radius var(--radius) - position relative - .icon-button__counter { - width auto !important - } - } - .icon-button--with-counter { - padding-inline .7em !important - } - } - .detailed-status__action-bar, .picture-in-picture__footer { - padding-inline 15px !important - gap 0 - .icon-button { - flex-grow 1 !important - } - div { - display flex - justify-content center - flex-grow 1 - } - } - -} -//// ITEMS -/ { - .item-list > article > div { - position relative - &::after { - content "" - position absolute - bottom 0px - inset-inline 0 - border-top 1px solid var(--border-color) - pointer-events none + //// CENTER COLUMN + / { + .columns-area { + box-shadow var(--column-shadow) + padding 0 + overflow visible } - } - +desktop() { - .item-list > article > div { - &::after { - inset-inline calc(var(--radius) + 10px) + .columns-area__panels__main { + @media (min-width responsiveW2) { + width 0 + flex-grow 1 + margin-inline 10px + max-width var(--tl-width) !important } - } - } - .account__wrapper { - line-height 1.5 - /.account__contents { - display flex - flex-wrap wrap - flex-grow 1 - gap 0 10px - } - /.display-name { - margin-bottom 1px !important - } - /.account:not(.account--minimal) .display-name__account { - display block - width 300px - } - /.account__details { - font-size .9em - opacity .8 - width 100px - flex-grow 1 - text-align end - align-items center - line-height 1.2 - &:has(.verified-badge) { - > :not(.verified-badge) { - display none - } + @media (min-width responsiveW1) { + margin 0 20px } - } - button:not(:hover):not(:focus) { - background var(--elevated-color) - color inherit - } - } -} - -//// PAGES - -//// NOTIFICATIONS -.notification-ungrouped { - padding 0 - /.notification-ungrouped__header { - padding-top 16px - margin-bottom 0 - } - .status__wrapper { - margin-inline 0 - max-width unset - &::before, &::after { - content unset - } - } - .status { - padding 16px - } -} -.notification-group { - padding 16px -} -.notification-group__main__additional-content { - display none -} - -//// EXPLORE -/ { - .trends__item, .story, .account-card { - animation slideUpFade backwards .4s (.04s * 6) cubic-bezier(0,1,1,1) - border-radius var(--radius) - for row in 1..6 { - &:nth-child({row}) { - animation-delay .04s * row - } - } - } - .explore__links { - padding 10px - display flex - flex-wrap wrap - align-content flex-start - > .dismissable-banner { - margin -10px - margin-bottom 10px - } - .story { - margin-inline 0 !important - } - // / includes trends items in right sidebar - /.trends__item { - display flex !important - margin-inline 0 !important - } - /.trends__item__name a { - &::before { - content "" - position absolute - inset 0 - } - } - /.trends__item__current { - display none - } - /.trends__item__sparkline { - overflow visible !important - pointer-events none - svg { - overflow visible !important - } - path:first-child { - filter blur(8px) - } - path:last-child { - mask linear-gradient(to left, black, black, transparent) - -webkit-mask @mask - } - /.rtl & { - transform scaleX(-1) - } - } - - .trends__item { - margin 7.5px !important - padding 25px !important - box-shadow var(--shadow-med) - width 200px - background var(--elevated-color) - flex-grow 1 - &::after { - content unset !important - } - a { - font-size 1.4em - line-height 1.7em - &::before { - content "" - position absolute - inset 0 - } - } - .trends__item__sparkline { - height 100% - svg { - height 100% - float right - overflow visible !important - position relative - - path { - display unset !important - transition transform 1s - &:first-child { - transform-origin center + if sideHeader { + @media (min-width mobileW) { + display grid + grid-template-columns 100% + .column, .columns-area { + grid-column 1 + overflow clip !important + border-radius var(--radius) var(--radius) 0 0 !important + > :first-child { + border-radius var(--radius) var(--radius) 0 0 !important } } } } - &:hover, &:focus-within { - svg path:first-child { - transform scale(2) - } - } - } - .story { - width 100% - margin 0 - } - } -} -//// PROFILE -/ { - .account__header { - overflow visible - } - .follow-request-banner { - margin-bottom -100px - padding-bottom 120px - } - .account__header__image { - height 0 - padding-bottom 35% - if sideHeader { - border-radius var(--panel-radius) var(--panel-radius) 0 0 - } - position sticky - top calc(0px - var(--panel-radius)) - overflow clip - img { - position absolute - } - .account__header__info { - position absolute - z-index 2 - height 100% - > span { - position sticky - top var(--radius) - } - } - } - .account__header__bar { - position relative - z-index 2 - border 0 - padding-inline 20px - @media (max-width mobileW) { - padding-inline 15px - } - border-radius var(--radius) var(--radius) 0 0 - margin-top calc(0px - var(--radius)) !important - display flex - flex-direction column - background var(--background-color) - isolation isolate - &::before { - content "" - background var(--elevated-tint) - position absolute - inset 0 - pointer-events none - } - - &::after { - content "" - position absolute - inset-inline 0 - height 150px - 55px - background inherit - z-index -1 - border-radius var(--radius) - mask linear-gradient(to bottom, transparent, black) - } - - /.account__header__tabs { overflow visible !important - align-items flex-end - padding 0 - // padding-top 10px - height unset !important - margin-top -55px !important - &::before { // Add blur below the account header + contain inline-size style !important + transition max-width transBounce1, margin transBounce1 + + if !sideHeader { + overflow clip !important + border-radius var(--radius) var(--radius) 0 0 !important + } + + > div { + grid-row 1 + } + } + .column { + background var(--background-color) + overflow clip + &::before { content "" position absolute - top -55px - inset-inline 0 - height 150px - backdrop-filter blur(40px) - filter brightness(1.1) + inset 0 + background var(--elevated-tint) pointer-events none - opacity .7 - z-index -2 - clip-path inset(55px 0 0 0 round var(--radius)); - } - & ~ div { - z-index 2 } } - .avatar { - margin-inline-start 0 !important - overflow visible !important - position relative - margin-top 20px - .account-role { - position absolute - bottom 0 - left 110% - border-radius var(--radius) + if flatterUI { + .columns-area.columns-area, .column.column { + overflow visible !important + } + .scrollable { + contain unset !important } } - .account__avatar { - border 0 - box-shadow var(--shadow) + +desktop() { + .scrollable > [tabindex="-1"]:first-child { + margin-top 10px + } + .item-list { + > article:first-of-type { + margin-top 10px + } + > article::after { + inset-inline calc(var(--radius) + 10px) + } + } + .load-more + .trends__item, + {statuses-list} { + margin-inline 10px + max-width calc(100% - 20px) + } + } + .scrollable { + padding-bottom 40vh !important + } + .empty-column-indicator, .error-column { background none - background-size cover !important } - } - .account__header__tabs__name { - margin-bottom 0 - padding 0 - margin-top 16px - h1 { + .dismissable-banner { display flex - flex-wrap wrap - white-space unset - gap 0 .4em - font-weight 600 - } - } - .account__header__extra { - margin-top 8px - } - - // account fields - .account__header__fields, .account__header__account-note { - display flex - flex-wrap wrap - gap 2px - background none - border-radius var(--radius) !important - overflow hidden - max-width max-content - border 0 !important - } - .account__header__fields { - dl { - display inline + align-items center + flex-direction row-reverse + gap 20px + margin 0 border-radius 0 - overflow hidden - &:not(.verified) { - background-color var(--elevated-color) + border 0 + padding 25px + > div { + padding 0 + } + button { + padding 16px + margin -16px -14px + } + } + + // COLUMN HEADER + .tabs-bar__wrapper { + if sideHeader { + grid-column 2 + @media (min-width mobileW) { + margin-top -100vh + } } border 0 !important - padding 8px 12px !important - position relative - overflow hidden - flex-grow 1 - dt { - all unset !important - color unset !important - opacity .9 !important + padding-top 0 + transition margin transBounce1, top .4s + /.column-header, /.column-inline-form { + font-weight 600 + border-bottom-left-radius 0 !important + border-bottom-right-radius 0 !important + & ~ .scrollable { + border-top-left-radius 0 !important + border-top-right-radius 0 !important + } + } + /.column-header__title { + display inline + svg { + vertical-align -.4em + } + } + /.announcements, /.column-header__collapsible:not(.collapsed) { + flex-direction column-reverse + align-items flex-start + border 0 + animation slideDownFade .3s backwards cubic-bezier(0,1,0,1.2) + } + /.column-header__collapsible { + transition none + background var(--surface-background-color) + overflow-y auto !important + } + .collapsed { + display none + } + /.announcements { + background var(--surface-background-color) + } + /.announcements__container { + width 100% !important + } + /.announcements__mastodon { + display block !important + z-index -1 + position relative + } + /.announcements__pagination { + bottom unset + padding-block 0 + display flex + align-items center + } + /.column-header__wrapper { + > :not(.column-header):not(.collapsed) { + border-top 2px solid var(--background-color) !important + border 0 + } + } + /.column-header { + overflow hidden + } + /.column-header > button { + z-index 2 + } + /.column-header__buttons { + isolation isolate + } + /.column-header__buttons button { + transition background .2s, transform .3s !important + position relative + border-radius 100px !important + min-width 40px + margin 5px + margin-inline-start 0 + font-size .9em + padding-inline 10px + //transform none !important + &:not(.active) { + background var(--elevated-color) !important + z-index 2 + } + svg { + margin 0 + } + span { + display none + } + &::before { + content "" + position absolute + inset -20px -800px + transform scale(0) + transform-origin bottom center + background var(--surface-background-color) + z-index -1 + border-radius 100px + pointer-events none + opacity 0 + transition transform .3s, opacity .3s + @media (prefers-reduced-motion) { + transition none !important + } + } + &.active { + &::before { + transform scale(1, 5) + opacity 1 + transition transform .3s, opacity .1s + } + } } - dd { - padding 0 - white-space unset - max-height unset - text-align unset - & > span > a:first-child:last-child, .h-card:first-child:last-child a { + + @media (min-width mobileW) { + inset-inline unset !important + height 50px !important + top 0 + .column-header__wrapper { + display flex + flex-direction column + border-radius var(--radius) + overflow hidden + > div { + background var(--surface-background-color) + } + } + .column-header { + background none !important + overflow hidden + border 0 + } + if sideHeader { + top var(--top) !important + width 285px + border-radius var(--radius) var(--radius) !important + box-shadow 0 12px 12px -12px rgba(0,0,0,0.1) + + if !spaceBetween { + margin-inline-start 20px + @media (max-width responsiveW1 - 1) { + margin-inline-start 10px + } + } + @media (max-width responsiveW2 - 1) { + width 265px + top 10px !important + } + + if spaceBetween { + position fixed + inset-inline-end 10px !important + margin 0 !important + } + + if navOnLeft { + grid-column 1 + if !spaceBetween { + margin-inline-start -285px - 20px !important + @media (max-width responsiveW1 - 1) { + margin-inline-start -285px - 10px !important + } + @media (max-width responsiveW2 - 1) { + margin-inline-start -285px + 10px !important + } + } + if spaceBetween { + inset-inline-start 10px !important + } + } + } + if !sideHeader { + border-bottom 1px solid var(--border-color) !important &::after { content "" position absolute inset 0 - background-color var(--hover-color) - opacity 0 - transition opacity .2s + background var(--elevated-tint) } - &:hover:after, &:focus:after { - opacity 1 - } - } - &.verified { - overflow visible !important - border 0 - background none - a { - &::before, &::after { - content "" - position absolute - inset 0 - background currentcolor - opacity .2 - } - &::after { - background linear-gradient(20deg, currentcolor, transparent) !important - opacity .2 !important - z-index -2 - } + .column-header { + padding-inline 10px } } } } - } - .account__header__account-note { - position relative - font-size .9em - max-width unset - padding .5em 10px !important - margin-block -5px 10px - margin-inline -10px !important - border-radius var(--radius) !important - &::after { - content "" - position absolute - bottom 0 - inset-inline 10px - border-top 1px solid var(--border-color) - transition opacity .2s - } - &:focus-within::after { - opacity 0 - } - label { - z-index 2 - margin 0 - pointer-events none - font-size inherit - } - textarea { - margin -100px !important - padding 100px !important - padding-inline-end .7em !important - margin-inline-end -.7em !important - box-sizing content-box - width 100% - font-size inherit - transition background .2s - &::placeholder { - font-weight 600 + if sideHeader { + @media (min-width mobileW) { + .column-back-button--slim { + margin-left auto !important + order -1 + > .column-back-button { + margin-top 0 !important + top unset !important + } + } + @media (max-width responsiveW2 - 1) { + .column-back-button--slim > .column-back-button { + margin-top -55px !important + top unset !important + } + } } } - } - - // GALLERY - .account-gallery__container { - border-radius var(--radius) - overflow clip - padding 0 - margin 4px - gap 4px - } -} -//// FOLLOW REQ'S -/ { - .account-authorize__wrapper { - background var(--elevated-color) - border-radius var(--radius) - overflow hidden - flex-grow 1 - margin 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 - } - } -} -//// ABOUT -/ { - .about__meta { - border-radius var(--radius) - } - .account--minimal { - max-width 100% - } - .about__section { - margin 30px -20px - padding-inline 20px - contain inline-size paint - &.active .about__section__title { - margin-inline -20px - border-radius 0 - border-inline 0 - border-bottom 0 - } - } - .about__section__title { - position sticky - top -1px - z-index 2 - background var(--background-color-tint) - border 1px solid var(--border-color) - border-radius var(--radius) - overflow hidden - transition margin .2s cubic-bezier(0,1,0,1), border-radius .2s - - &::after { - content "" - position absolute - inset 0 - background var(--elevated-tint) - backdrop-filter blur(10px) - z-index -1 - } - } - .about__section__body { - border 0 - padding 0 - animation slideDownFade .4s .1s backwards cubic-bezier(0, 1, 0, 1.2) - } -} -//// SEARCH -/ { - .explore__search-results { - border 0 - } - .search-results__section__header { - margin 0px 0px 10px - color unset - background none - padding-inline 25px - font-weight 600 - } - .search-results__section { - border 0 - margin-bottom 20px - } -} -//// SETTINGS PAGE -/ { - /.admin-wrapper { - - .content__heading { - margin-bottom 2em + // COLUMN HEADER SETTINGS + .column-settings__row, .column-settings__hashtags { + gap 0 } - - h4 { - margin 0 - border-bottom 0 + .column-settings h3 { + font-size 1em + margin-bottom 8px } - - form > h4 { - margin-top 2em !important - border-bottom 0 !important - margin-bottom 0 !important - } - - .lead { - margin-bottom 15px - } - .flash-message, - .applications-list__item, .filters-list__item { + .column-select__control { border-radius var(--radius) - border 0 - overflow clip } - .fields-row { - margin-inline 0 - // gap 1em - border-radius var(--radius) - overflow clip - padding-top 0 - gap 2px + .local-settings__page__item, + .glitch-setting-text.glitch-setting-text, + .setting-toggle, .app-form__toggle { display flex - flex-wrap wrap - } - .fields-group:not(.fields-row__column), .fields-row { - margin-bottom 1em !important - } - .fields-row > .fields-row__column { - max-width unset - width 300px - // height max-content - border-radius 0 !important - display flex - flex-direction column - flex-grow 1 - margin 0 !important - .fields-group { - border-radius 0 !important - margin 0 !important - } - .with_block_label { - display flex - flex-direction column - height 100% - > .label_input { - display flex - flex-direction column - flex-grow 1 - > textarea { - min-height 300px - flex-grow 1 - } - } - } - > :last-child { - flex-grow 1 - align-items flex-start - border 0 - } - & > :not(:first-child):not(:last-child) { - padding-block .5em !important - margin-block -3px - } - } - - :not(.fields-row__column) > .fields-group, - .fields-row > *, - .label_input > ul, - .label_input__wrapper > ul, - .with_block_label.radio_buttons .label_input - { - border-radius var(--radius) + align-items center + margin-bottom 14px + position relative + padding .7em + background var(--elevated-color) + margin-block 0 2px !important overflow hidden - padding 0 - display flex - flex-direction column - gap 2px - > * { - background-color var(--elevated-color) - padding .8rem - margin-block 0px - position relative - border-radius 0 !important - overflow hidden - &::after { - content "" - position absolute - inset 0 - background-color var(--hover-color) - z-index -1 - opacity 0 - transition opacity .2s - } - &:hover, &:focus-within { - &::after { - opacity 1 - } - } + &:first-of-type { + border-top-left-radius var(--radius) + border-top-right-radius var(--radius) } - :not(.input.with_block_label) > label { + &:last-of-type { + border-bottom-left-radius var(--radius) + border-bottom-right-radius var(--radius) + } + label, legend { + padding-block 2px !important + } + label span { &::before { content "" position absolute inset -900px } } - } - .label_input__wrapper { - > :not([type="checkbox"]):not(label) { - margin-top 4px + + // border-radius var(--radius) + .react-toggle { + order 2 } - } - .label_input { - position relative - } - label { - margin 0 !important - display flex - align-items center - padding 0 !important - input { - margin 0 - margin-inline-end 10px !important - position static !important - } - } - input, .select { - border-radius var(--radius) !important - z-index 2 - } - .radio { - flex-grow 1 - &:not(:last-child) { + .setting-toggle__label { margin-bottom 0 !important + flex-grow 1 + width 0 } - } - .hint:last-child { - margin-bottom 0 !important - } - - .input.with_block_label { - > .row { - flex-wrap wrap - margin 0 - > .string { - padding 0 - width 100% - margin 0 - &:first-child input { - border-radius var(--radius) var(--radius) 0 0 !important - } - &:last-child input { - border-radius 0 0 var(--radius) var(--radius) !important - } - } - &:not(:last-child) { - margin-bottom 8px - } - } - } - - li.checkbox { - flex-grow 1 - overflow hidden - } - - ul { - flex-direction row !important - flex-wrap wrap - gap 2px - flex-grow 1 - } - li.checkbox { - flex-basis 45% - } - .spacer { - border-top 1px solid var(--border-color) !important - } - } - /.batch-table label { - padding-inline-start 20px !important - } - .batch-table, .table, :not(.batch-table__row__content) > table { - overflow clip - border-radius var(--radius) - border-spacing 0 2px - border-collapse separate - /.batch-table__toolbar, /.batch-table__row, tr > * { - border 0 - margin-bottom 2px !important - } - td, th, /.batch-table__row { - position relative - } - tr { - > td, > th { - // padding-block 0 - > div > span { - padding-inline .7em - display inline-block - } - } - } - /.keyboard-shortcuts { - padding 0 - margin-top -4px - table { - width 100% - border-radius 0 - } - td { - padding .7em - } - } - /.batch-table__row, th, > tbody > tr > td, tfoot td { - background var(--elevated-color) !important - vertical-align middle - &::after { - content "" - position absolute - inset 0 0 - background var(--hover-color) - opacity 0 - transition .2s - pointer-events: none - } - &:hover, &:focus-within { - &::after { - opacity 1 - } - } - > a:first-child:last-child { - margin 0 - width 100% - padding .5em - } - } - th, tr { - &:hover { - td, th { - &:not([rowspan])::after { - opacity 1 !important - } - } - } - [rowspan] { - &:hover { - & ~ td::after { - opacity 0 !important - } - } - &::after { - inset-inline -900px - } - } - } - - } -} - -//// ADVANCED VIEW -/ { - .layout-multiple-columns.layout-multiple-columns { - --column-header-height: 45px; - .column-header, .column-header button { - background none - } - .column-header, .scrollable, .column-back-button, .account__header__image { - border-radius 0 !important - gap 0 !important - } - .columns-area { - background none !important - height 100% - > div { - border 0 !important - padding 0 !important - &:not(.drawer):not(:last-child) { - margin-inline-end 2px !important - } - &.column { - flex-grow 1 - max-width 600px - } - &:first-child { - margin-inline-start auto !important - } - &:last-child { - margin-inline-end auto !important - } - } - } - - .drawer.drawer { - padding-top 15px !important - overflow clip - flex-grow 1 - max-width 350px - /.drawer__header { - border-radius var(--radius-round) - background var(--elevated-color) - margin-inline 15px - overflow hidden - border 0 !important - a { - border 0 - &:first-child { - padding-inline-start 15px !important - } - &:last-child { - padding-inline-end 15px !important - } - } - } - .search { - z-index 2 - margin-inline 15px - margin-bottom 0 - } - & > .drawer__pager { - border 0 - overflow visible !important - } - .drawer__inner:not(.darker) { - margin-top -20px - padding-top 30px - height unset - bottom 0 - } - .drawer__inner__mastodon { - margin-inline -6px - z-index -1 - } - } - .compose-form { - margin-inline 5px - } - .drawer__inner:not(.darker), .drawer__inner__mastodon { - background-color transparent !important - } - .darker { - background-color var(--surface-background-color) - border-radius var(--radius) var(--radius) 0 0 - top 10px - width unset - inset-inline 2px - } - - .column { - background none - &::after { + &::before { content "" position absolute inset 0 - top var(--column-header-height) - background var(--background-color) - z-index -1 + background var(--hover-color) + opacity 0 + transition opacity .2s + pointer-events none } - &::before, &::after { - top var(--column-header-height) - border-radius var(--radius) var(--radius) 0 0 - } - } - .column-back-button, - .column-header__wrapper { - &.active { - box-shadow none + &:hover, &:focus-within { &::before { - inset-inline var(--radius) + opacity 1 } } - .column-header { - border 0 !important - height var(--column-header-height) - } - .column-header__buttons { - height 100% - } - svg { - height 1.4em - } - & + .scrollable.scrollable { - border-radius var(--radius) var(--radius) 0 0 !important - overflow-y scroll - } - } - - .getting-started__trends { - padding 0px 20px - } - - - } -} - -//// GETTING STARTED PAGE -/ { - .column[aria-labelledby="Misc"] > .scrollable, - .column[aria-labelledby="Getting-started"] > .scrollable - .getting-started { - position relative - padding 5px 10px !important - .getting-started__wrapper { - background none - } - .column-link, .column-subheading { - border 0 !important - padding 20px !important - background none - } - .getting-started__footer { - padding-inline 20px - a span { - font-size 1.1em !important - line-height 2 - } } } -} - -//// TABLET -/ { - @media (min-width mobileW) and (max-width responsiveW2) { - .ui__header { - background none !important - backdrop-filter none - position relative - if !navOnLeft { - margin-inline-end 285px - } - if navOnLeft { - margin-inline-start 285px - } - border 0 !important - } - .navigation-panel { - padding-inline 10px - if !sideHeader { - margin-top -55px !important + //// RIGHT COLUMN + / { + .columns-area__panels__pane--navigational { + @media (min-width responsiveW1) { + if spaceBetween { + .columns-area__panels__pane__inner { + &::before, &::after { + content "" + position absolute + inset -100px -10px + background var(--background-color) + z-index -1 + } + &::after { + background var(--elevated-tint) + } + } + } } } - } -} - -//// MOBILE -/ { - @media (max-width mobileW - 1) { - /.ui__header { - border-bottom 0 - box-sizing content-box - height auto - position relative + //// NAV PANEL + .navigation-panel.navigation-panel { box-sizing border-box - gap 5px 10px - flex-wrap wrap - padding-block 12px - border 0 !important - backdrop-filter none !important - background none !important - .ui__header__logo { - padding-block 5px !important + if sideHeader { + height calc(100vh - var(--top) - 50px + var(--radius)) } - .ui__header__links { - min-width max-content - position sticky - inset-inline-end 55px - background inherit - :has(body) & { - right 0 - } - } - [href="/search"] { + padding-bottom 10px + margin 0 + border 0 + margin-top calc(0px - var(--radius)) + padding-top calc(10px + var(--radius)) + overflow hidden auto + hr { display none } - [href="/publish"] { - position fixed - bottom 15px - inset-inline-end 15px - border-radius 100px !important - border-radius var(--radius) !important - height 60px - width 60px - font-size 0 - box-shadow var(--shadow-low) - background var(--surface-background-color) - border-color var(--border-color) - -webkit-user-drag: none; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; - user-drag: none; - user-select: none; - -webkit-user-select: none; - -webkit-touch-callout: none; - touch-action manipulation - animation scaleIn transBounce1 - visibility visible - + .navigation-panel__menu { + display contents + } + + @media (min-width responsiveW2) { + if sideHeader { + padding-top calc(var(--radius) + 10px) + margin-top calc(50px - var(--radius)) + .navigation-panel__logo { + margin 0 + .column-link, hr { + display none !important + } + } + } + if !sideHeader { + margin-top calc(0px - var(--top)) + height 100vh + padding-top var(--top) + } + .switch-to-advanced { + border-radius var(--radius) + margin-top 0 + } + [href="/settings/preferences"] { + display none !important + } + } + /.column-link { + border 0 + gap 0 + } + /.icon-with-badge__badge { + display flex !important + align-items center + justify-content center + padding 0 .3em !important + width 2em + height 2em + min-width max-content + border-radius 2em + font-weight 600 + font-size .6em !important + top -10px + box-sizing border-box + } + /.column-header__back-button + /.column-back-button > svg + /.column-link__icon, /.column-header > button .column-header__icon { + margin-inline-end .7em + font-size 16px !important + padding-right 0 !important + } + @media (min-width mobileW) { + /.column-link { + flex-grow 100 !important + display flex !important + align-items center !important + align-content center + max-height 3em + min-height 2.7em !important + padding-block 0 + border-radius 100px + position relative + box-sizing border-box + opacity .9 + overflow hidden + background none !important + &::before { + content: "" !important; + position absolute + border-radius: 100px; + width unset !important + height unset !important + inset 0px 0px !important + // min-height 43px + opacity 0 !important + background-color rgba(150,150,150,0.1) + transition opacity .2s + } + &.active { + opacity 1 !important + font-weight 600 + } + &:hover, &:focus { + &:before { + opacity 1 !important + } + } + &[href="/lists"] { + & + div { + hr { + display none + } + .column-link { + margin-bottom 2px + + i { + opacity .2 + } + } + } + } + } + .getting-started__trends { + display unset !important + } + } + + .trends__item { + margin 0 !important + } + } + } + + + //// STATUSES + / { + .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper { + &::after { + content unset + } + } + {statuses-list} { + overflow hidden + contain paint inline-size + position relative + border-radius var(--panel-radius) + border 0 + + &.focusable { + background none + } + // Hover + @media (pointer fine) { + &::before { + content "" + position absolute + inset 0px !important + height unset !important + width unset !important + pointer-events none + transition background-color .2s + } + &:hover, &:focus-within { + &::before { + background-color var(--hover-color) + } + } + } + } + .status:not(.status--first-in-thread) { + border 0 + } + .detailed-status + .status { + padding 16px + } + .status__info { + .account__avatar, .status__avatar { + max-width var(--avatar-size) !important + max-height var(--avatar-size) !important + } + } + .status__line { + left calc(16px + (var(--avatar-size) / 2)) + } + .status__prepend { + & + .status:not(.status-direct) { + padding-top 5px + } + } + + // STATUS REPLY + .status--in-thread { + @media (max-width 450px) { + --avatar-size 34px + .status__info ~ * { + margin-inline-start calc(var(--avatar-size) + 10px) + width calc(100% - (var(--avatar-size) + 10px)) + } + } + } + + // STATUS CONTENT + .status__content { + text-align unset !important + line-height 1.5 + &.status__content--with-spoiler { + overflow visible + > p { + margin-inline -100px + padding-inline 100px + overflow hidden + } + > p:first-child { + margin-bottom 0 + } + } + p:empty { + max-height 0 + } + picture { + display contents + } + .custom-emoji { + display inline-block + height var(--emoji-size) !important + min-width var(--emoji-size) !important + width auto !important + margin -.2ex 0 .2ex + + if emojiZoom { + @media (prefers-reduced-motion: no-preference) { + /^[-1..-1] { + transition transform 1s cubic-bezier(0,0.7,0,1) + &:hover { + transform scale(1.7) + transition transform .4s cubic-bezier(0,0.7,0,1) + } + } + } + } + } + // max-height to media + & ~ [style*="aspect-ratio"] { + max-height 80vh + } + } + + // STATUS DIRECT + .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { + .status__content { + position relative !important + background var(--elevated-color) + padding 12px 14px + border-radius var(--radius-round) + border-top-left-radius 6px + box-sizing border-box + margin-bottom 0 + overflow hidden !important + max-width max-content + .media-gallery { + width 999px + max-width 100% !important + } + } + } + .status__wrapper-direct:not(.detailed-status__wrapper-direct) { + .status__prepend { + position absolute + contain strict + } + } + + // STATUS DETAILED + .detailed-status { + border 0 + padding-bottom 4px + } + .detailed-status__wrapper, .detailed-status { + box-shadow var(--shadow) + .status__content { + min-height unset !important + } + } + .detailed-status__wrapper { + isolation isolate + background none + &::before { + content "" + position absolute + inset 0 + background var(--elevated-tint) !important + pointer-events none + z-index -1 + } + .detailed-status { + box-shadow none + } + } + + .detailed-status__meta { + margin-top 14px + line-height 2 + > * { + display inline-flex + border 0 !important + padding 0 !important + margin-inline-end 8px + &:not(:last-child) { + &::after { + content "·" + } + } + } + } + + // STATUS MEDIA + {media} { + box-shadow var(--shadow-low) + border-radius var(--radius) !important + margin-block 10px + animation scaleIn .4s + max-width unset !important + } + if collapseHidden { + .media-gallery:has(.spoiler-button:not(.spoiler-button--minified)) { + height 150px !important + aspect-ratio unset !important + } + } + .media-gallery__item { + border-radius 0 + outline none + } + .spoiler-button--minified { + button { + padding 6px !important + background rgba(0,0,0,0.2) !important + if hideClickArea { + &::after { + content "" + position absolute + inset -50px + } + } + &:hover { + background rgba(0,0,0,0.4) !important + } + } + .icon { + width 18px + height 18px + } + } + // link embeds + .status-card { + align-items stretch + gap 0 + &:not(.horizontal) { + border 1px solid var(--border-color) !important + } + &:not(.expanded) .status-card__image { + overflow hidden + img { + border-radius 0 + } + } + &:not(.interactive) .status-card__image { + position relative + aspect-ratio unset !important + } + /.status-card__content { + margin-block auto + padding 15px + } + /.status-card__host { + font-size .85em + line-height 1.5 + margin 0 + } + /.status-card__title { + font-size 1em + margin-top .2em + margin-bottom 0 + line-height 1.4 + } + /.status-card__description { + line-height 1.4 !important + margin 0 + @supports (-webkit-line-clamp 8) { + display -webkit-box + -webkit-line-clamp 8 + -webkit-box-orient vertical + white-space unset + } + } + /.status-card__author { + margin-top 0.4em + font-size .85em + } + &:hover { + background-color var(--hover-color) + } + } + .more-from-author { + background none + border 0 + padding-top 0 + border-radius var(--radius) + } + + .audio-player { + .video-player__seek { + margin var(--radius) + } + } + + .hashtag-bar { + margin-top 10px + a, button { + color var(--accent, #8c8dff) + transition opacity .2s + padding 5px 10px + } + a { + position relative + border-radius var(--radius-round) + background var(--elevated-color) + &::after { + content "" + position absolute + inset 0 + background var(--elevated-color) + border-radius inherit + opacity 0 + transition opacity .2s + } + &:hover, &:focus { + opacity 1 + &::after { + opacity 1 + } + } + } + button { + padding-block 0 + } + } + + + // STATUS FOOTER + .status__action-bar { + flex-wrap wrap + margin-top .4em + margin-bottom -6px + gap 0 + margin-inline-start -8px + /.status__action-bar__button-wrapper { + flex-grow 1 + max-width 55px + min-width max-content + } + * { + display flex !important + justify-content center !important + flex-grow 1 !important + } + .icon-button { + margin 0 + &::before { // Increase the click area + content "" + position absolute + inset -.5em + } + } + } + + .status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer { + position relative + z-index 2 + justify-content unset + .icon-button { + display inline-flex + align-items center + justify-content center + padding .5em .4em !important + border-radius var(--radius) + position relative + .icon-button__counter { + width auto !important + } + } + .icon-button--with-counter { + padding-inline .7em !important + } + } + .detailed-status__action-bar, .picture-in-picture__footer { + padding-inline 15px !important + gap 0 + .icon-button { + flex-grow 1 !important + } + div { + display flex + justify-content center + flex-grow 1 + } + } + + } + + //// ITEMS + / { + .item-list > article > div { + position relative + &::after { + content "" + position absolute + bottom 0px + inset-inline 0 + border-top 1px solid var(--border-color) + pointer-events none + } + } + +desktop() { + .item-list > article > div { + &::after { + inset-inline calc(var(--radius) + 10px) + } + } + } + .account__wrapper { + line-height 1.5 + /.account__contents { + display flex + flex-wrap wrap + flex-grow 1 + gap 0 10px + } + /.display-name { + margin-bottom 1px !important + } + /.account:not(.account--minimal) .display-name__account { + display block + width 300px + } + /.account__details { + font-size .9em + opacity .8 + width 100px + flex-grow 1 + text-align end + align-items center + line-height 1.2 + &:has(.verified-badge) { + > :not(.verified-badge) { + display none + } + } + } + button:not(:hover):not(:focus) { + background var(--elevated-color) + color inherit + } + } + } + + //// PAGES + + //// NOTIFICATIONS + .notification-ungrouped { + padding 0 + /.notification-ungrouped__header { + padding-top 16px + margin-bottom 0 + } + .status__wrapper { + margin-inline 0 + max-width unset + &::before, &::after { + content unset + } + } + .status { + padding 16px + } + } + .notification-group { + padding 16px + } + .notification-group__main__additional-content { + display none + } + + //// EXPLORE + / { + .trends__item, .story, .account-card { + animation slideUpFade backwards .4s (.04s * 6) cubic-bezier(0,1,1,1) + border-radius var(--radius) + for row in 1..6 { + &:nth-child({row}) { + animation-delay .04s * row + } + } + } + .explore__links { + padding 10px + display flex + flex-wrap wrap + align-content flex-start + > .dismissable-banner { + margin -10px + margin-bottom 10px + } + .story { + margin-inline 0 !important + } + // / includes trends items in right sidebar + /.trends__item { + display flex !important + margin-inline 0 !important + } + /.trends__item__name a { &::before { content "" position absolute inset 0 - display flex - justify-content center - align-items center - border-radius inherit - transition transform .4s cubic-bezier(0,0,0,1) !important - background-position center - background-repeat no-repeat - background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMzU3bC04MCA4MEgyMDB2NTYwaDU2MHYtMjc4bDgwLTgwdjM1OHEwIDMzLTIzLjUgNTYuNVQ3NjAtMTIwSDIwMFptMjgwLTM2MFpNMzYwLTM2MHYtMTcwbDM2Ny0zNjdxMTItMTIgMjctMTh0MzAtNnExNiAwIDMwLjUgNnQyNi41IDE4bDU2IDU3cTExIDEyIDE3IDI2LjV0NiAyOS41cTAgMTUtNS41IDI5LjVUODk3LTcyOEw1MzAtMzYwSDM2MFptNDgxLTQyNC01Ni01NiA1NiA1NlpNNDQwLTQ0MGg1NmwyMzItMjMyLTI4LTI4LTI5LTI4LTIzMSAyMzF2NTdabTI2MC0yNjAtMjktMjggMjkgMjggMjggMjgtMjgtMjhaIi8+PC9zdmc+") - } - /body:not(:has(.column-link.active)) &:not(:focus) { - transform scale(0.97) !important - opacity 0 !important - pointer-events none } } - [href^="/@"], a.permalink[href] { - position fixed - inset-inline-end 1px - width 53px - display flex - justify-content center - background inherit + /.trends__item__current { + display none } - :has(body) & { - [href^="/@"], a.permalink[href] { - position static !important - width unset + /.trends__item__sparkline { + overflow visible !important + pointer-events none + svg { + overflow visible !important + } + path:first-child { + filter blur(8px) + } + path:last-child { + mask linear-gradient(to left, black, black, transparent) + -webkit-mask @mask + } + /.rtl & { + transform scaleX(-1) + } + } + + .trends__item { + margin 7.5px !important + padding 25px !important + box-shadow var(--shadow-med) + width 200px + background var(--elevated-color) + flex-grow 1 + &::after { + content unset !important + } + a { + font-size 1.4em + line-height 1.7em + &::before { + content "" + position absolute + inset 0 + } + } + .trends__item__sparkline { + height 100% + svg { + height 100% + float right + overflow visible !important + position relative + + path { + display unset !important + transition transform 1s + &:first-child { + transform-origin center + } + } + } + } + &:hover, &:focus-within { + svg path:first-child { + transform scale(2) + } + } + } + .story { + width 100% + margin 0 + } + } + } + //// PROFILE + / { + .account__header { + overflow visible + } + .follow-request-banner { + margin-bottom -100px + padding-bottom 120px + } + .account__header__image { + height 0 + padding-bottom 35% + if sideHeader { + border-radius var(--panel-radius) var(--panel-radius) 0 0 + } + position sticky + top calc(0px - var(--panel-radius)) + overflow clip + img { + position absolute + } + .account__header__info { + position absolute + z-index 2 + height 100% + > span { + position sticky + top var(--radius) } } } - .tabs-bar__wrapper { - top 0 - z-index 200 + .account__header__bar { + position relative + z-index 2 + border 0 + padding-inline 20px + @media (max-width mobileW) { + padding-inline 15px + } + border-radius var(--radius) var(--radius) 0 0 + margin-top calc(0px - var(--radius)) !important + display flex + flex-direction column + background var(--background-color) + isolation isolate + + &::before { + content "" + background var(--elevated-tint) + position absolute + inset 0 + pointer-events none + } + + &::after { + content "" + position absolute + inset-inline 0 + height 150px - 55px + background inherit + z-index -1 + border-radius var(--radius) + mask linear-gradient(to bottom, transparent, black) + } + + /.account__header__tabs { + overflow visible !important + align-items flex-end + padding 0 + // padding-top 10px + height unset !important + margin-top -55px !important + &::before { // Add blur below the account header + content "" + position absolute + top -55px + inset-inline 0 + height 150px + backdrop-filter blur(40px) + filter brightness(1.1) + pointer-events none + opacity .7 + z-index -2 + clip-path inset(55px 0 0 0 round var(--radius)); + } + & ~ div { + z-index 2 + } + } + .avatar { + margin-inline-start 0 !important + overflow visible !important + position relative + margin-top 20px + .account-role { + position absolute + bottom 0 + left 110% + border-radius var(--radius) + } + } + .account__avatar { + border 0 + box-shadow var(--shadow) + background none + background-size cover !important + } + } + .account__header__tabs__name { + margin-bottom 0 + padding 0 + margin-top 16px + h1 { + display flex + flex-wrap wrap + white-space unset + gap 0 .4em + font-weight 600 + } + } + .account__header__extra { + margin-top 8px + } + + // account fields + .account__header__fields, .account__header__account-note { + display flex + flex-wrap wrap + gap 2px + background none + border-radius var(--radius) !important + overflow hidden + max-width max-content + border 0 !important + } + .account__header__fields { + dl { + display inline + border-radius 0 + overflow hidden + &:not(.verified) { + background-color var(--elevated-color) + } + border 0 !important + padding 8px 12px !important + position relative + overflow hidden + flex-grow 1 + dt { + all unset !important + color unset !important + opacity .9 !important + } + + dd { + padding 0 + white-space unset + max-height unset + text-align unset + & > span > a:first-child:last-child, .h-card:first-child:last-child a { + &::after { + content "" + position absolute + inset 0 + background-color var(--hover-color) + opacity 0 + transition opacity .2s + } + &:hover:after, &:focus:after { + opacity 1 + } + } + &.verified { + overflow visible !important + border 0 + background none + a { + &::before, &::after { + content "" + position absolute + inset 0 + background currentcolor + opacity .2 + } + &::after { + background linear-gradient(20deg, currentcolor, transparent) !important + opacity .2 !important + z-index -2 + } + } + } + } + } + } + .account__header__account-note { + position relative + font-size .9em + max-width unset + padding .5em 10px !important + margin-block -5px 10px + margin-inline -10px !important + border-radius var(--radius) !important + &::after { + content "" + position absolute + bottom 0 + inset-inline 10px + border-top 1px solid var(--border-color) + transition opacity .2s + } + &:focus-within::after { + opacity 0 + } + label { + z-index 2 + margin 0 + pointer-events none + font-size inherit + } + textarea { + margin -100px !important + padding 100px !important + padding-inline-end .7em !important + margin-inline-end -.7em !important + box-sizing content-box + width 100% + font-size inherit + transition background .2s + &::placeholder { + font-weight 600 + } + } + } + + // GALLERY + .account-gallery__container { + border-radius var(--radius) + overflow clip + padding 0 + margin 4px + gap 4px + } + } + //// FOLLOW REQ'S + / { + .account-authorize__wrapper { + background var(--elevated-color) + border-radius var(--radius) + overflow hidden + flex-grow 1 + margin 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 + } + } + } + //// ABOUT + / { + .about__meta { + border-radius var(--radius) + } + .account--minimal { + max-width 100% + } + .about__section { + margin 30px -20px + padding-inline 20px + contain inline-size paint + &.active .about__section__title { + margin-inline -20px + border-radius 0 + border-inline 0 + border-bottom 0 + } + } + .about__section__title { + position sticky + top -1px + z-index 2 + background var(--background-color-tint) + border 1px solid var(--border-color) + border-radius var(--radius) + overflow hidden + transition margin .2s cubic-bezier(0,1,0,1), border-radius .2s + &::after { content "" position absolute inset 0 background var(--elevated-tint) - pointer-events none - z-index 2 + backdrop-filter blur(10px) + z-index -1 } } - - // Navigation - @supports unquote("selector(.foxxo:has(.waf))") { - [href="/publish"] { - bottom 70px !important + .about__section__body { + border 0 + padding 0 + animation slideDownFade .4s .1s backwards cubic-bezier(0, 1, 0, 1.2) + } + } + //// SEARCH + / { + .explore__search-results { + border 0 + } + .search-results__section__header { + margin 0px 0px 10px + color unset + background none + padding-inline 25px + font-weight 600 + } + .search-results__section { + border 0 + margin-bottom 20px + } + } + + //// SETTINGS PAGE + / { + /.admin-wrapper { + + .content__heading { + margin-bottom 2em } - .columns-area__panels { + + h4 { + margin 0 + border-bottom 0 + } + + form > h4 { + margin-top 2em !important + border-bottom 0 !important + margin-bottom 0 !important + } + + .lead { + margin-bottom 15px + } + .flash-message, + .applications-list__item, .filters-list__item { + border-radius var(--radius) + border 0 + overflow clip + } + .fields-row { + margin-inline 0 + // gap 1em + border-radius var(--radius) + overflow clip + padding-top 0 + gap 2px + display flex + flex-wrap wrap + } + .fields-group:not(.fields-row__column), .fields-row { + margin-bottom 1em !important + } + .fields-row > .fields-row__column { + max-width unset + width 300px + // height max-content + border-radius 0 !important + display flex flex-direction column - } - .columns-area__panels__main { - width 100% - border-radius var(--radius) !important - margin 0 !important - border 0 !important - overflow clip !important flex-grow 1 - } - .tabs-bar__wrapper { - transition none !important - } - - .columns-area__panels__pane--navigational { - display contents - .columns-area__panels__pane__inner { - position static !important - order -1 - width unset - height auto - white-space nowrap + margin 0 !important + .fields-group { + border-radius 0 !important + margin 0 !important } - .navigation-panel { - flex-direction row - margin 0 - padding 12px - border-top 1px solid - align-items center - overflow visible - height auto - .flex-spacer { - display none + .with_block_label { + display flex + flex-direction column + height 100% + > .label_input { + display flex + flex-direction column + flex-grow 1 + > textarea { + min-height 300px + flex-grow 1 + } } } - hr { - display none - } - .trends__item__name > span, .trends__item__sparkline { - display none - } - h4 a span::after { - content ":" !important - } - .navigation-panel__legal { - display contents - } - a { - position relative - overflow hidden - border-radius var(--radius) - font-weight 600 - font-size 1.1em + > :last-child { flex-grow 1 - text-align center + align-items flex-start + border 0 + } + & > :not(:first-child):not(:last-child) { + padding-block .5em !important + margin-block -3px + } + } + + :not(.fields-row__column) > .fields-group, + .fields-row > *, + .label_input > ul, + .label_input__wrapper > ul, + .with_block_label.radio_buttons .label_input + { + border-radius var(--radius) + overflow hidden + padding 0 + display flex + flex-direction column + gap 2px + > * { + background-color var(--elevated-color) + padding .8rem + margin-block 0px + position relative + border-radius 0 !important + overflow hidden + &::after { + content "" + position absolute + inset 0 + background-color var(--hover-color) + z-index -1 + opacity 0 + transition opacity .2s + } + &:hover, &:focus-within { + &::after { + opacity 1 + } + } + } + :not(.input.with_block_label) > label { + &::before { + content "" + position absolute + inset -900px + } + } + } + .label_input__wrapper { + > :not([type="checkbox"]):not(label) { + margin-top 4px + } + } + .label_input { + position relative + } + label { + margin 0 !important + display flex + align-items center + padding 0 !important + input { + margin 0 + margin-inline-end 10px !important + position static !important + } + } + input, .select { + border-radius var(--radius) !important + z-index 2 + } + .radio { + flex-grow 1 + &:not(:last-child) { + margin-bottom 0 !important + } + } + .hint:last-child { + margin-bottom 0 !important + } + + .input.with_block_label { + > .row { + flex-wrap wrap + margin 0 + > .string { + padding 0 + width 100% + margin 0 + &:first-child input { + border-radius var(--radius) var(--radius) 0 0 !important + } + &:last-child input { + border-radius 0 0 var(--radius) var(--radius) !important + } + } + &:not(:last-child) { + margin-bottom 8px + } + } + } + + li.checkbox { + flex-grow 1 + overflow hidden + } + + ul { + flex-direction row !important + flex-wrap wrap + gap 2px + flex-grow 1 + } + li.checkbox { + flex-basis 45% + } + .spacer { + border-top 1px solid var(--border-color) !important + } + } + /.batch-table label { + padding-inline-start 20px !important + } + .batch-table, .table, :not(.batch-table__row__content) > table { + overflow clip + border-radius var(--radius) + border-spacing 0 2px + border-collapse separate + /.batch-table__toolbar, /.batch-table__row, tr > * { + border 0 + margin-bottom 2px !important + } + td, th, /.batch-table__row { + position relative + } + tr { + > td, > th { + // padding-block 0 + > div > span { + padding-inline .7em + display inline-block + } + } + } + /.keyboard-shortcuts { + padding 0 + margin-top -4px + table { + width 100% + border-radius 0 + } + td { + padding .7em + } + } + + /.batch-table__row, th, > tbody > tr > td, tfoot td { + background var(--elevated-color) !important + vertical-align middle + &::after { + content "" + position absolute + inset 0 0 + background var(--hover-color) + opacity 0 + transition .2s + pointer-events: none + } + &:hover, &:focus-within { + &::after { + opacity 1 + } + } + > a:first-child:last-child { + margin 0 + width 100% + padding .5em + } + } + th, tr { + &:hover { + td, th { + &:not([rowspan])::after { + opacity 1 !important + } + } + } + [rowspan] { + &:hover { + & ~ td::after { + opacity 0 !important + } + } + &::after { + inset-inline -900px + } + } + } + + } + } + + //// ADVANCED VIEW + / { + .layout-multiple-columns.layout-multiple-columns { + --column-header-height: 45px; + .column-header, .column-header button { + background none + } + .column-header, .scrollable, .column-back-button, .account__header__image { + border-radius 0 !important + gap 0 !important + } + .columns-area { + background none !important + height 100% + > div { + border 0 !important + padding 0 !important + &:not(.drawer):not(:last-child) { + margin-inline-end 2px !important + } + &.column { + flex-grow 1 + max-width 600px + } + &:first-child { + margin-inline-start auto !important + } + &:last-child { + margin-inline-end auto !important + } + } + } + + .drawer.drawer { + padding-top 15px !important + overflow clip + flex-grow 1 + max-width 350px + /.drawer__header { + border-radius var(--radius-round) + background var(--elevated-color) + margin-inline 15px + overflow hidden + border 0 !important + a { + border 0 + &:first-child { + padding-inline-start 15px !important + } + &:last-child { + padding-inline-end 15px !important + } + } + } + .search { + z-index 2 + margin-inline 15px + margin-bottom 0 + } + & > .drawer__pager { + border 0 + overflow visible !important + } + .drawer__inner:not(.darker) { + margin-top -20px + padding-top 30px + height unset + bottom 0 + } + .drawer__inner__mastodon { + margin-inline -6px + z-index -1 + } + } + .compose-form { + margin-inline 5px + } + .drawer__inner:not(.darker), .drawer__inner__mastodon { + background-color transparent !important + } + .darker { + background-color var(--surface-background-color) + border-radius var(--radius) var(--radius) 0 0 + top 10px + width unset + inset-inline 2px + } + + .column { + background none + &::after { + content "" + position absolute + inset 0 + top var(--column-header-height) + background var(--background-color) + z-index -1 + } + &::before, &::after { + top var(--column-header-height) + border-radius var(--radius) var(--radius) 0 0 + } + } + .column-back-button, + .column-header__wrapper { + &.active { + box-shadow none + &::before { + inset-inline var(--radius) + } + } + .column-header { + border 0 !important + height var(--column-header-height) + } + .column-header__buttons { + height 100% + } + svg { + height 1.4em + } + & + .scrollable.scrollable { + border-radius var(--radius) var(--radius) 0 0 !important + overflow-y scroll + } + } + + .getting-started__trends { + padding 0px 20px + } + + + } + } + + //// GETTING STARTED PAGE + / { + .column[aria-labelledby="Misc"] > .scrollable, + .column[aria-labelledby="Getting-started"] > .scrollable + .getting-started { + position relative + padding 5px 10px !important + .getting-started__wrapper { + background none + } + .column-link, .column-subheading { + border 0 !important + padding 20px !important + background none + } + .getting-started__footer { + padding-inline 20px + a span { + font-size 1.1em !important + line-height 2 + } + } + } + } + + + //// TABLET + / { + @media (min-width mobileW) and (max-width responsiveW2) { + .ui__header { + background none !important + backdrop-filter none + position relative + if !navOnLeft { + margin-inline-end 285px + } + if navOnLeft { + margin-inline-start 285px + } + border 0 !important + } + .navigation-panel { + padding-inline 10px + if !sideHeader { + margin-top -55px !important + } + } + } + } + + + //// MOBILE + / { + @media (max-width mobileW - 1) { + /.ui__header { + border-bottom 0 + box-sizing content-box + height auto + position relative + box-sizing border-box + gap 5px 10px + flex-wrap wrap + padding-block 12px + border 0 !important + backdrop-filter none !important + background none !important + .ui__header__logo { + padding-block 5px !important + } + .ui__header__links { min-width max-content - justify-content center - transition padding .2s - padding-inline 6px - gap 6px + position sticky + inset-inline-end 55px + background inherit + :has(body) & { + right 0 + } + } + [href="/search"] { + display none + } + [href="/publish"] { + position fixed + bottom 15px + inset-inline-end 15px + border-radius 100px !important + border-radius var(--radius) !important + height 60px + width 60px + font-size 0 + box-shadow var(--shadow-low) + background var(--surface-background-color) + border-color var(--border-color) + -webkit-user-drag: none; + -khtml-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + user-drag: none; + user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; + touch-action manipulation + animation scaleIn transBounce1 + visibility visible + &::before { content "" position absolute inset 0 - background currentcolor - opacity 0 + display flex + justify-content center + align-items center border-radius inherit - transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s + transition transform .4s cubic-bezier(0,0,0,1) !important + background-position center + background-repeat no-repeat + background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMzU3bC04MCA4MEgyMDB2NTYwaDU2MHYtMjc4bDgwLTgwdjM1OHEwIDMzLTIzLjUgNTYuNVQ3NjAtMTIwSDIwMFptMjgwLTM2MFpNMzYwLTM2MHYtMTcwbDM2Ny0zNjdxMTItMTIgMjctMTh0MzAtNnExNiAwIDMwLjUgNnQyNi41IDE4bDU2IDU3cTExIDEyIDE3IDI2LjV0NiAyOS41cTAgMTUtNS41IDI5LjVUODk3LTcyOEw1MzAtMzYwSDM2MFptNDgxLTQyNC01Ni01NiA1NiA1NlpNNDQwLTQ0MGg1NmwyMzItMjMyLTI4LTI4LTI5LTI4LTIzMSAyMzF2NTdabTI2MC0yNjAtMjktMjggMjkgMjggMjggMjgtMjgtMjhaIi8+PC9zdmc+") } - svg { - width 1em - height @width - margin-inline-end 0 !important + /body:not(:has(.column-link.active)) &:not(:focus) { + transform scale(0.97) !important + opacity 0 !important + pointer-events none } - &.active { - position relative - &::before { - inset 0 !important - opacity .1 + } + [href^="/@"], a.permalink[href] { + position fixed + inset-inline-end 1px + width 53px + display flex + justify-content center + background inherit + } + :has(body) & { + [href^="/@"], a.permalink[href] { + position static !important + width unset + } + } + } + .tabs-bar__wrapper { + top 0 + z-index 200 + &::after { + content "" + position absolute + inset 0 + background var(--elevated-tint) + pointer-events none + z-index 2 + } + } + + // Navigation + @supports unquote("selector(.foxxo:has(.waf))") { + [href="/publish"] { + bottom 70px !important + } + .columns-area__panels { + flex-direction column + } + .columns-area__panels__main { + width 100% + border-radius var(--radius) !important + margin 0 !important + border 0 !important + overflow clip !important + flex-grow 1 + } + .tabs-bar__wrapper { + transition none !important + } + + .columns-area__panels__pane--navigational { + display contents + .columns-area__panels__pane__inner { + position static !important + order -1 + width unset + height auto + white-space nowrap + } + .navigation-panel { + flex-direction row + margin 0 + padding 12px + border-top 1px solid + align-items center + overflow visible + height auto + .flex-spacer { + display none + } + } + hr { + display none + } + .trends__item__name > span, .trends__item__sparkline { + display none + } + h4 a span::after { + content ":" !important + } + .navigation-panel__legal { + display contents + } + a { + position relative + overflow hidden + border-radius var(--radius) + font-weight 600 + font-size 1.1em + flex-grow 1 + text-align center + min-width max-content + justify-content center + transition padding .2s + padding-inline 6px + gap 6px + &::before { + content "" + position absolute + inset 0 + background currentcolor + opacity 0 + border-radius inherit + transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s + } + svg { + width 1em + height @width + margin-inline-end 0 !important + } + &.active { + position relative + &::before { + inset 0 !important + opacity .1 + } } } - } - span { - display unset !important - width 0 - flex-grow 1 - max-width max-content - overflow hidden - text-overflow ellipsis - } - } - } - - - // bottom bar - - &:not(:has(.navigation-panel__sign-in-banner)) { - .columns-area__panels__main { - margin-top 2px !important - } - .columns-area--mobile .column { - padding-bottom 60px - } - .ui__header { - z-index 199 - &::before, &::after { - all unset - content "" - position fixed - bottom 0 - inset-inline 0 - background var(--background-color) - z-index 200 - height 60px - visibility visible - z-index -1 - border-top 1px solid var(--background-border-color) - } - &::after { - background var(--elevated-tint) - border 0 - } - } - .navigation-panel { - flex-wrap wrap - border-top none - margin-bottom 8px - padding-block 0 - a { span { - display none !important + display unset !important + width 0 + flex-grow 1 + max-width max-content + overflow hidden + text-overflow ellipsis } } - [href="/settings/preferences"] { - position absolute - top 12px - inset-inline-end 60px - z-index 900 + } + + + // bottom bar + + &:not(:has(.navigation-panel__sign-in-banner)) { + .columns-area__panels__main { + margin-top 2px !important + } + .columns-area--mobile .column { + padding-bottom 60px + } + .ui__header { + z-index 199 + &::before, &::after { + all unset + content "" + position fixed + bottom 0 + inset-inline 0 + background var(--background-color) + z-index 200 + height 60px + visibility visible + z-index -1 + border-top 1px solid var(--background-border-color) + } + &::after { + background var(--elevated-tint) + border 0 + } + } + .navigation-panel { + flex-wrap wrap + border-top none + margin-bottom 8px padding-block 0 - height 35px - width 35px + a { + span { + display none !important + } + } + [href="/settings/preferences"] { + position absolute + top 12px + inset-inline-end 60px + z-index 900 + padding-block 0 + height 35px + width 35px + box-sizing border-box + margin 0 + border 1px solid var(--border-color) + } + } + + bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'" + bottomBarItemsSelector() { + waf = "" + for i in arguments { + waf += ( ",.column-link[href=" + i + "]" ) + } + return substr(waf, 1) + } + /:root { + --selector bottomBarItemsSelector(bottomBarButtons) + } + {bottomBarItemsSelector(bottomBarButtons)} { + position fixed !important + display flex + flex-direction column + bottom 4px + z-index 201 + font-size 1.7em + margin 0 !important + padding 0 !important + height 50px + align-items center + justify-content center + width 19% + left 0 box-sizing border-box - margin 0 - border 1px solid var(--border-color) + padding 1px !important + &::before { + inset-inline 6px + } + span { + margin 0 + font-size 0 + line-height 1 + opacity 0 + transition font-size .4s, margin .7s, opacity .2s + } + svg { + width 24px + height @width + transition transform .1s + } } - } - - bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'" - bottomBarItemsSelector() { - waf = "" - for i in arguments { - waf += ( ",.column-link[href=" + i + "]" ) - } - return substr(waf, 1) - } - /:root { - --selector bottomBarItemsSelector(bottomBarButtons) - } - {bottomBarItemsSelector(bottomBarButtons)} { - position fixed !important - display flex - flex-direction column - bottom 4px - z-index 201 - font-size 1.7em - margin 0 !important - padding 0 !important - height 50px - align-items center - justify-content center - width 19% - left 0 - box-sizing border-box - padding 1px !important - &::before { - inset-inline 6px - } - span { - margin 0 - font-size 0 - line-height 1 - opacity 0 - transition font-size .4s, margin .7s, opacity .2s - } - svg { - width 24px - height @width - transition transform .1s - } - } - for row, i in bottomBarButtons { - .column-link[href={row}] { - left 2% + (20% * i) - (.75% * i) + for row, i in bottomBarButtons { + .column-link[href={row}] { + left 2% + (20% * i) - (.75% * i) + } } } } } -} -//// POPUPS -/ { - #hover-card, - .dropdown-menu { - border-radius var(--radius) - animation scaleIn .2s cubic-bezier(0,0,0,1.1) - } - .dropdown-menu__container__list { - overflow hidden auto - border-radius var(--radius) - max-height 70vh - } - .dropdown-menu__item { - overflow hidden - a { - padding .7em 1em !important - transition background-color .2s, color .2s - min-width 150px - } - } - .dropdown-menu__separator { - margin 0 !important - } - - .interaction-modal { - border-radius var(--radius) - overflow-y auto - box-sizing border-box - width 700px - text-align center - } - .interaction-modal__choices { - gap 10px - display flex - flex-wrap wrap - .interaction-modal__choices__choice { - max-height 50vh - overflow-y auto - border 1px solid var(--border-color) - padding 24px - margin 0 + //// POPUPS + / { + #hover-card, + .dropdown-menu { border-radius var(--radius) - transition background .2s - position relative + animation scaleIn .2s cubic-bezier(0,0,0,1.1) } - .prose:last-child { - margin-bottom 0 + .dropdown-menu__container__list { + overflow hidden auto + border-radius var(--radius) + max-height 70vh } - h3 { - margin-bottom 10px + .dropdown-menu__item { + overflow hidden + a { + padding .7em 1em !important + transition background-color .2s, color .2s + min-width 150px + } } - } - - .modal-root__container { - animation bounceIn .7s - } - .modal-root__modal { - @media (max-width mobileW) { - margin-top auto - max-width 100% - border-radius var(--radius) var(--radius) 0 0 - } - } - - .picture-in-picture { - z-index 101 - .picture-in-picture__header { - border-radius var(--radius) var(--radius) 0 0 - } - {media} { - --radius 0 + .dropdown-menu__separator { margin 0 !important } - .picture-in-picture__footer { - border-radius 0 0 var(--radius) var(--radius) - } - } -} -/// ALT TEXT MODAL -/ { - .report-modal[style="max-width: 960px;"] { - background var(--background-color) - &, * { - color inherit !important - } - .report-modal__comment { - min-width unset - width 370px - max-width unset - flex none - padding 20px - height 100% + .interaction-modal { + border-radius var(--radius) overflow-y auto + box-sizing border-box + width 700px + text-align center } - .setting-text__wrapper { - border-radius var(--radius) - overflow hidden - background none - textarea { - border 0 - max-height unset !important + .interaction-modal__choices { + gap 10px + display flex + flex-wrap wrap + .interaction-modal__choices__choice { + max-height 50vh + overflow-y auto + border 1px solid var(--border-color) + padding 24px + margin 0 + border-radius var(--radius) + transition background .2s + position relative + } + .prose:last-child { + margin-bottom 0 + } + h3 { + margin-bottom 10px + } + } + + .modal-root__container { + animation bounceIn .7s + } + .modal-root__modal { + @media (max-width mobileW) { + margin-top auto + max-width 100% + border-radius var(--radius) var(--radius) 0 0 + } + } + + .picture-in-picture { + z-index 101 + .picture-in-picture__header { + border-radius var(--radius) var(--radius) 0 0 + } + {media} { + --radius 0 + margin 0 !important + } + .picture-in-picture__footer { + border-radius 0 0 var(--radius) var(--radius) + } + } + } + + /// ALT TEXT MODAL + / { + .report-modal[style="max-width: 960px;"] { + background var(--background-color) + &, * { + color inherit !important + } + .report-modal__comment { + min-width unset + width 370px + max-width unset + flex none + padding 20px + height 100% + overflow-y auto + } + .setting-text__wrapper { + border-radius var(--radius) + overflow hidden background none + textarea { + border 0 + max-height unset !important + background none + } } - } - .focal-point-modal__content { - position sticky - top 0 - max-height 100vh - flex-grow 0 !important - max-width 100% - } - .focal-point { - width 100% - height 100% - } - .audio-player - .focal-point img { - width unset !important - height unset !important - max-height 100% !important - max-width 100% !important - } - .audio-player { - margin 10px !important - width 600px !important - max-width calc(100% - 20px) !important - } - .focal-point__reticle { - box-shadow: 0 0 300px 200px rgba(0,0,0,0.2); - } - - @media not all and (max-width: 900px) { - max-width max-content !important - max-height 98vh - border 0 - box-shadow var(--shadow) - overflow hidden - border-radius var(--radius) - width 98vw - - .report-modal__container { - flex-wrap nowrap - border 0 - max-width max-content - max-height 100% + .focal-point-modal__content { + position sticky + top 0 + max-height 100vh + flex-grow 0 !important + max-width 100% } - - .report-modal__target { - position: absolute; - padding: 24px 20px 12px; - font-weight: bold; - width 348px - box-sizing border-box - text-align start - background inherit - } - .report-modal__close { - position: fixed !important; - right: 12px; - top: 12px; - order: 2; - color: white; - background: var(--modal-background-color); - padding: 12px; - } - .report-modal__comment { - padding-top: calc(30px + 2em); - padding-bottom 160px - } - .focal-point-modal__content .focal-point { - overflow visible - } - .focal-point img { - min-width 500px - } - .focal-point__preview { - inset-inline-start -220px - right unset - bottom 20px - pointer-events none - text-align end - strong { - color inherit - } - div { - border-radius var(--radius) - box-shadow none - } - } - } - @media (max-width 900px) { - height auto - width 100vw - max-width unset !important - border-radius 0 - .report-modal__container { - height auto - min-height 0 - } - .report-modal__container { - flex-direction column-reverse - flex-wrap nowrap - flex-grow 1 - } - .report-modal__comment { width 100% + height 100% + } + .audio-player + .focal-point img { + width unset !important + height unset !important + max-height 100% !important + max-width 100% !important + } + .audio-player { + margin 10px !important + width 600px !important + max-width calc(100% - 20px) !important + } + .focal-point__reticle { + box-shadow: 0 0 300px 200px rgba(0,0,0,0.2); + } + + @media not all and (max-width: 900px) { + max-width max-content !important + max-height 98vh border 0 - max-height 70% - flex 0 0 auto - height unset - order unset - } - } - - } -} + box-shadow var(--shadow) + overflow hidden + border-radius var(--radius) + width 98vw -//// 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 0 !important - 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) + .report-modal__container { + flex-wrap nowrap + border 0 + max-width max-content + max-height 100% + } + + .report-modal__target { + position: absolute; + padding: 24px 20px 12px; + font-weight: bold; + width 348px + box-sizing border-box + text-align start + background inherit + } + .report-modal__close { + position: fixed !important; + right: 12px; + top: 12px; + order: 2; + color: white; + background: var(--modal-background-color); + padding: 12px; + } + .report-modal__comment { + padding-top: calc(30px + 2em); + padding-bottom 160px + } + .focal-point-modal__content + .focal-point { + overflow visible + } + .focal-point img { + min-width 500px + } + .focal-point__preview { + inset-inline-start -220px + right unset + bottom 20px + pointer-events none + text-align end + strong { + color inherit + } + div { + border-radius var(--radius) + box-shadow none + } + } + } + @media (max-width 900px) { + height auto + width 100vw + max-width unset !important + border-radius 0 + .report-modal__container { + height auto + min-height 0 + } + .report-modal__container { + flex-direction column-reverse + flex-wrap nowrap + flex-grow 1 + } + .report-modal__comment { + width 100% + border 0 + max-height 70% + flex 0 0 auto + height unset + order unset + } } - &:hover { + } + } + + //// 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 0 !important + padding-top 100% !important img, span { - transform scale(1.2) + 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 + } } - .emoji-picker-dropdown__modifiers { - top 16px - } -} } //// GLITCH-SOC FIXES / { -:root { - --background-color-alt transparent -} -/body.app-body.flavour-glitch > #mastodon { - // Compose Form - .compose-form__autosuggest-wrapper > :last-child { - padding-bottom 2em !important + :root { + --background-color-alt transparent } - .compose-form__buttons { - width 100% - > div:last-child { - margin-inline-start auto + /body.app-body.flavour-glitch > #mastodon { + // Compose Form + .compose-form__autosuggest-wrapper > :last-child { + padding-bottom 2em !important } - } - .compose-form__buttons-wrapper { - position relative - } - .character-counter__wrapper { - position absolute - inset-inline-end 0 - bottom 100% - margin 4px 4px - border-radius 6px - padding .1em .5em - span { - font-size .9em - font-weight 500 + .compose-form__buttons { + width 100% + > div:last-child { + margin-inline-start auto + } } - } - .compose-form__highlightable { - margin-bottom 50px !important - } - .compose-form__submit { - position absolute - right -12px - top 100% - margin-top 24px - button { - padding 10px 20px + .compose-form__buttons-wrapper { + position relative + } + .character-counter__wrapper { + position absolute + inset-inline-end 0 + bottom 100% + margin 4px 4px + border-radius 6px + padding .1em .5em + span { + font-size .9em + font-weight 500 + } + } + .compose-form__highlightable { + margin-bottom 50px !important + } + .compose-form__submit { + position absolute + right -12px + top 100% + margin-top 24px + button { + padding 10px 20px + } } - } - // GLITCH STATUSES - .collapsed { - .status__content { - height auto !important - overflow visible - mask unset !important - .status__content__text { - mask linear-gradient(to bottom, black 50px, transparent) !important - -webkit-mask @mask - max-height 100px + // GLITCH STATUSES + .collapsed { + .status__content { + height auto !important + overflow visible + mask unset !important + .status__content__text { + mask linear-gradient(to bottom, black 50px, transparent) !important + -webkit-mask @mask + max-height 100px + } + p:not(:last-child) { + margin-bottom .4em + } + br { + display block + } + &::after { + content unset + } } - p:not(:last-child) { - margin-bottom .4em + &.muted { + .status__content__text ~ * { + display none + } } - br { - display block + } + + .focusable[tabindex]:not(.notification-ungrouped) .full-width { + margin-inline 0 + } + .media-gallery__item > .media-gallery__preview { + display unset + } + + .status__action-bar-spacer { + min-width 5px + } + + .status__relative-time { + margin-inline auto 5px !important + z-index 2 + flex-grow 0 !important + min-width 5ch !important + max-width unset !important + justify-content flex-end + time { + display inline !important + } + } + + // CW + .status__content__spoiler-link { + display flex + align-items center + position relative + padding .4em 1.2em + border-radius var(--radius-round) + color inherit + background var(--elevated-color) + margin-block 8px + &::before, &::after { + content "" + position absolute + inset 0 + border-radius var(--radius-round) + background-color var(--hover-color) + opacity 0 + transition opacity .2s } &::after { - content unset + inset -6px -9999px + } + + &:hover, &:focus { + &::before, &::after { + opacity 1 + } } } - &.muted { - .status__content__text ~ * { + + .reactions-bar { + width unset + margin-top 8px + pointer-events none + button { + pointer-events all + border-radius 6px !important + padding-block 2px + .reactions-bar__item__emoji { + height 2em + width @height + } + border 1px solid var(--border-color) + &:not(.active) { + background none + } + } + &:empty { display none } - } - } - @media (pointer coarse) { - .status__info { - align-items center - } - .status__info__icons { - height auto - } - } - - // make entire post clickable - .status { - isolation isolate - overflow hidden - } - .status__info { - pointer-events none - } - .status__avatar, .status__info__icons { - pointer-events all - } - .status > :not(.status__content):not(.status__line) { - position relative - z-index 2 - } - .status:not(.status-direct) > .status__content { - margin-block -100px !important - padding-block 100px !important - } - .full-width { - margin-inline 0 !important - } - .media-gallery__item > .media-gallery__preview { - display unset - } - - .status__action-bar-spacer { - min-width 5px - } - - .status__relative-time { - margin-inline auto 5px !important - z-index 2 - flex-grow 0 !important - min-width 5ch !important - max-width unset !important - justify-content flex-end - time { - display inline !important - } - } - - // CW - .status__content__spoiler-link { - display flex - align-items center - position relative - padding .4em 1.2em - border-radius var(--radius-round) - color inherit - background var(--elevated-color) - margin-block 8px - &::before, &::after { - content "" - position absolute - inset 0 - border-radius var(--radius-round) - background-color var(--hover-color) - opacity 0 - transition opacity .2s - } - &::after { - inset -6px -9999px - } - - &:hover, &:focus { - &::before, &::after { - opacity 1 + .emoji-picker-dropdown { + align-self stretch + button { + align-self stretch + height 100% + aspect-ratio 1 + } } } - } - .reactions-bar { - width unset - margin-top 8px - pointer-events none - button { - pointer-events all - border-radius 6px !important - padding-block 2px - .reactions-bar__item__emoji { - height 2em - width @height + + // timeline settings + .column-settings__pillbar { + border-radius var(--radius) + } + .pillbar-button { + padding 10px + border-radius 4px + } + .column-header__notif-cleaning-buttons { + flex-wrap wrap + button { + min-width 50% !important } - border 1px solid var(--border-color) - &:not(.active) { + } + .notification__dismiss-overlay { + position absolute !important + .wrappy { + box-shadow none + background none + border-top 0 + } + } + + + // OPTIONS + + .local-settings { + max-height 700px !important + width 100% + } + .glitch.local-settings__page { + padding 20px + } + .local-settings__navigation { + display flex + flex-direction column + padding 8px + background none + border-right 1px solid var(--border-color) + width auto + .local-settings__navigation__item:not(.close):not(.active) { background none } - } - &:empty { - display none - } - .emoji-picker-dropdown { - align-self stretch - button { - align-self stretch - height 100% - aspect-ratio 1 + .local-settings__navigation__item { + border 0 + flex-direction column + padding-inline 8px + span { + font-size .8em + } + } + [href="/settings/preferences"] { + margin-block auto 10px + border-radius var(--radius) + border 1px solid var(--border-color) } } } - - - // timeline settings - .column-settings__pillbar { - border-radius var(--radius) - } - .pillbar-button { - padding 10px - border-radius 4px - } - .column-header__notif-cleaning-buttons { - flex-wrap wrap - button { - min-width 50% !important - } - } - .notification__dismiss-overlay { - position absolute !important - .wrappy { - box-shadow none - background none - border-top 0 - } - } - - - // OPTIONS - - .local-settings { - max-height 700px !important - width 100% - } - .glitch.local-settings__page { - padding 20px - } - .local-settings__navigation { - display flex - flex-direction column - padding 8px - background none - border-right 1px solid var(--border-color) - width auto - .local-settings__navigation__item:not(.close):not(.active) { - background none - } - .local-settings__navigation__item { - border 0 - flex-direction column - padding-inline 8px - span { - font-size .8em - } - } - [href="/settings/preferences"] { - margin-block auto 10px - border-radius var(--radius) - border 1px solid var(--border-color) - } - } -} }