mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 08:22:57 -03:00
2822 lines
56 KiB
CSS
2822 lines
56 KiB
CSS
|
|
|
|
// 🦊 BEFORE CLICKING INSTALL:
|
|
// ---------------------------
|
|
// Add your home instance to the "Custom included sites"
|
|
// textbox in the left panel following this format:
|
|
// *://domain.tld/*
|
|
|
|
/* Update 2.1.5 (v4.6.0-nightly.2025-12-04)
|
|
- Fixes glitch-soc styling
|
|
*/
|
|
|
|
/* ==UserStyle==
|
|
@name MastoModern
|
|
@version 2.1.5
|
|
@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
|
|
@supportURL https://git.gay/Freeplay/Mastodon-Modern/issues
|
|
@preprocessor stylus
|
|
|
|
@var range tlWidth "Timeline Width" [720, 600, 860, 20, "px"]
|
|
@var checkbox sideHeader "Move header to sidebar" 1
|
|
@var checkbox navOnLeft "Move navigation sidebar to the left" 0
|
|
@var checkbox spaceBetween "Move sidebars to edges" 0
|
|
@var checkbox largerEmoji "Larger custom emoji" 1
|
|
@var checkbox emojiZoom "Zoom custom emoji on hover (follows prefers-reduced-motion)" 1
|
|
@var checkbox collapseHidden "Collapse hidden media" 1
|
|
@var checkbox hideClickArea "Increase click area for hide media button" 1
|
|
@var checkbox flatterUI "Flatter UI" 0
|
|
@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
|
|
|
|
@namespace Freeplay
|
|
@author Freeplay (https://freeplay.floof.company/)
|
|
==/UserStyle== */
|
|
|
|
@-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 = 760px
|
|
|
|
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, .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 var(--color-bg-secondary)
|
|
--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 {
|
|
--panel-radius 0px
|
|
}
|
|
}
|
|
.layout-multiple-columns {
|
|
--panel-radius 0px
|
|
}
|
|
|
|
//// BODY
|
|
body {
|
|
font-display swap !important
|
|
if !flatterUI {
|
|
&.app-body::before {
|
|
content ""
|
|
position fixed
|
|
inset 0
|
|
background rgba(0,0,0,0.09)
|
|
pointer-events none
|
|
}
|
|
}
|
|
}
|
|
|
|
//// 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
|
|
}
|
|
}
|
|
}
|
|
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)
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
button.icon-button {
|
|
--hover-bg-color: var(--hover-color);
|
|
}
|
|
|
|
: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) {
|
|
.ui__navigation-bar__item,
|
|
.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 slideUpFadeBig {
|
|
from {
|
|
transform translateY(200px)
|
|
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%
|
|
.search, /.drawer .search {
|
|
margin-bottom 25px
|
|
}
|
|
}
|
|
.compose-form__uploads {
|
|
padding 0
|
|
margin-inline 12px
|
|
width unset
|
|
}
|
|
.search {
|
|
border-radius var(--radius)
|
|
margin-inline -5px
|
|
input {
|
|
border-radius var(--radius-round) !important
|
|
}
|
|
/.search__popout {
|
|
border-radius var(--radius)
|
|
animation scaleIn .2s
|
|
box-shadow var(--shadow-low)
|
|
margin-top 10px
|
|
margin-inline 4px
|
|
width calc(100% - 8px)
|
|
}
|
|
}
|
|
.compose-form {
|
|
min-height unset
|
|
overflow unset
|
|
gap 15px
|
|
margin-bottom 20px
|
|
flex 1 0 auto !important
|
|
.spoiler-input__border {
|
|
display none
|
|
}
|
|
.autosuggest-input.autosuggest-input {
|
|
border-block 0
|
|
}
|
|
#cw-spoiler-input {
|
|
padding-inline 12px
|
|
border-radius 0
|
|
}
|
|
.compose-form__upload__thumbnail {
|
|
display flex
|
|
flex-direction column
|
|
}
|
|
.compose-form__upload__actions {
|
|
z-index 10
|
|
}
|
|
.compose-form__upload__warning {
|
|
position relative
|
|
flex-grow 1
|
|
display flex
|
|
button.active {
|
|
background: rgba(0,0,0,0.75);
|
|
backdrop-filter: none;
|
|
box-shadow 0 0 0 100px rgba(0,0,0,0.75)
|
|
width 100%
|
|
height 100%
|
|
font-weight bold
|
|
font-size 1.1em
|
|
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)
|
|
.columns-area__panels__main & {
|
|
background none
|
|
}
|
|
> .compose-form__dropdowns {
|
|
flex-wrap: nowrap;
|
|
button {
|
|
border 0
|
|
padding 4px
|
|
transition background .2s
|
|
&:hover:not(.active) {
|
|
background var(--hover-color)
|
|
}
|
|
}
|
|
}
|
|
.compose-form__dropdowns + .autosuggest-textarea textarea {
|
|
padding-top 0
|
|
}
|
|
.compose-form__actions {
|
|
position relative
|
|
}
|
|
.compose-form__buttons {
|
|
display flex
|
|
flex-wrap wrap
|
|
flex-direction row
|
|
gap 4px
|
|
flex-grow 9999
|
|
:not(.character-counter) {
|
|
display flex
|
|
justify-content center
|
|
flex-grow 1
|
|
aspect-ratio 1
|
|
max-width 38px
|
|
padding 0
|
|
border-radius 6px
|
|
}
|
|
label {
|
|
display none !important
|
|
}
|
|
.character-counter {
|
|
margin-inline-start auto
|
|
flex-grow: 0;
|
|
min-width: 4ch;
|
|
padding-inline: 10px 4px;
|
|
}
|
|
}
|
|
/* .character-counter {
|
|
position absolute
|
|
inset-inline-end 0
|
|
bottom calc(100%)
|
|
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
|
|
@media (min-width responsiveW2) {
|
|
border-radius var(--radius) var(--radius) 0 0 !important
|
|
& > :first-child {
|
|
border-radius var(--radius) var(--radius) 0 0 !important
|
|
}
|
|
}
|
|
}
|
|
.columns-area__panels__main {
|
|
background: none;
|
|
@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
|
|
}
|
|
}
|
|
}
|
|
|
|
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(--color-bg-ambient)
|
|
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)
|
|
}
|
|
}
|
|
.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 {
|
|
gap 12px
|
|
}
|
|
/.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(--color-bg-secondary-solid)
|
|
overflow-y auto !important
|
|
}
|
|
.collapsed {
|
|
display none
|
|
}
|
|
/.announcements__root {
|
|
display flex !important
|
|
flex-direction column
|
|
z-index -1
|
|
position relative
|
|
}
|
|
/.announcements {
|
|
width 100%
|
|
overflow visible
|
|
}
|
|
/.announcements__pagination {
|
|
inset-inline-start 0
|
|
top 100%
|
|
bottom unset
|
|
padding-block 0
|
|
}
|
|
/.announcements__mastodon {
|
|
display unset
|
|
order 2
|
|
}
|
|
/.column-header__wrapper {
|
|
> :not(.column-header):not(.collapsed) {
|
|
border-top 2px solid var(--color-bg-ambient) !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
|
|
&: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(--color-bg-secondary-solid)
|
|
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
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@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(--color-bg-secondary-solid)
|
|
}
|
|
}
|
|
.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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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
|
|
}
|
|
}
|
|
|
|
// 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(--color-bg-ambient)
|
|
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
|
|
}
|
|
|
|
@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
|
|
}
|
|
}
|
|
/.column-link {
|
|
border 0
|
|
gap 12px
|
|
}
|
|
/.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
|
|
top -6px
|
|
box-sizing border-box
|
|
}
|
|
@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 3em !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
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 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__quote .status__wrapper {
|
|
margin: 0;
|
|
max-width: unset;
|
|
}
|
|
|
|
// 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(--color-bg-secondary) !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
|
|
}
|
|
}
|
|
/.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-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 {
|
|
/.notification-ungrouped__header {
|
|
margin-bottom 10px
|
|
}
|
|
.status__wrapper {
|
|
margin-inline 0
|
|
max-width unset
|
|
&::before, &::after {
|
|
content unset
|
|
}
|
|
}
|
|
}
|
|
.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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&: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
|
|
> 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(--color-bg-ambient)
|
|
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
|
|
margin 0 !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)
|
|
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
|
|
}
|
|
|
|
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
|
|
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)
|
|
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(--color-bg-secondary-solid)
|
|
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(--color-bg-ambient)
|
|
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) {
|
|
.columns-area__panels__pane--navigational {
|
|
margin-top 50px
|
|
}
|
|
.navigation-panel__menu {
|
|
padding 10px
|
|
}
|
|
.navigation-panel__compose-button {
|
|
margin-block 10px
|
|
margin-inline 6px
|
|
padding-inline 16px
|
|
border-radius 100px
|
|
justify-content center
|
|
}
|
|
.navigation-panel__sign-in-banner {
|
|
display block !important
|
|
margin-block 10px
|
|
padding-block 10px
|
|
border-block 1px solid var(--border-color)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//// MOBILE
|
|
/ {
|
|
@media (max-width mobileW - 1) {
|
|
.tabs-bar__wrapper {
|
|
background var(--color-bg-primary)
|
|
backdrop-filter none
|
|
&::before {
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
background var(--elevated-tint)
|
|
z-index -1
|
|
}
|
|
}
|
|
.ui__navigation-bar {
|
|
border 0
|
|
background var(--color-bg-tertiary)
|
|
}
|
|
.ui__navigation-bar {
|
|
color var(--on-input-color)
|
|
height 70px
|
|
padding-inline 5px
|
|
}
|
|
.ui__navigation-bar__item {
|
|
position relative
|
|
border 0 !important
|
|
padding-block 12px
|
|
gap 6px
|
|
opacity .7
|
|
&::before {
|
|
content ""
|
|
position absolute
|
|
width 60px
|
|
top 10px
|
|
bottom 30px
|
|
background currentColor
|
|
border-radius 100px
|
|
z-index -1
|
|
opacity 0
|
|
transform scaleX(.8)
|
|
transition opacity .2s, transform .2s
|
|
}
|
|
&::after {
|
|
content attr(aria-label)
|
|
font-size 12px
|
|
max-width 100%
|
|
padding-inline 4px
|
|
text-overflow ellipsis
|
|
overflow hidden
|
|
white-space nowrap
|
|
box-sizing border-box
|
|
}
|
|
&.active {
|
|
opacity 1
|
|
&::before {
|
|
opacity .15
|
|
transform none
|
|
}
|
|
}
|
|
}
|
|
|
|
.columns-area__panels__pane--navigational {
|
|
z-index 100
|
|
padding 40px 10px
|
|
padding-top 60vh
|
|
min-width unset
|
|
overflow-y scroll
|
|
box-sizing border-box
|
|
overscroll-behavior contain
|
|
visibility hidden
|
|
box-shadow unquote("0 0 0 200px rgb(from var(--color-bg-overlay) r g b/50%)")
|
|
transition visibility 0s 0.2s
|
|
.columns-area__panels__pane__inner {
|
|
width 100%
|
|
position relative
|
|
inset unset
|
|
height max-content
|
|
border-radius 24px
|
|
margin-top auto
|
|
transform translateY(100vh) !important
|
|
transition transform .2s cubic-bezier(0,0,1,0), opacity 1s
|
|
}
|
|
.navigation-panel__compose-button {
|
|
display none
|
|
}
|
|
html:not(:has(.sign-in-banner)) & {
|
|
[href="/home"],
|
|
[href="/explore"],
|
|
[href="/notifications"] {
|
|
display none
|
|
}
|
|
}
|
|
.navigation-panel {
|
|
display contents
|
|
}
|
|
.navigation-panel__menu {
|
|
padding 10px 5px !important
|
|
}
|
|
&.columns-area__panels__pane--overlay {
|
|
visibility visible
|
|
transition none
|
|
// for some reason transitioning the .pane__inner stutters
|
|
// a ton even with !important, so we're just doing an animation
|
|
// on the container instead !
|
|
animation slideUpFadeBig .3s cubic-bezier(0,0.9,0,1.05) forwards
|
|
.columns-area__panels__pane__inner {
|
|
transform none !important
|
|
transition none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//// 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
|
|
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
|
|
/ {
|
|
.modal-root__modal:has(.focal-point) {
|
|
width unset
|
|
max-width 90vw
|
|
.dialog-modal__content {
|
|
overflow hidden
|
|
display flex
|
|
flex-direction column
|
|
}
|
|
.dialog-modal__content__preview {
|
|
padding 0 !important
|
|
min-height 0
|
|
max-width 100%
|
|
img {
|
|
max-width 100% !important
|
|
max-height 100% !important
|
|
border-radius 0
|
|
max-height unset
|
|
min-height 0
|
|
}
|
|
}
|
|
.focal-point__reticle {
|
|
transition box-shadow .2s;
|
|
}
|
|
.focal-point {
|
|
min-height 0 !important
|
|
&:not(:hover) .focal-point__reticle {
|
|
box-shadow none
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 630px) {
|
|
|
|
}
|
|
}
|
|
|
|
//// 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)
|
|
}
|
|
|
|
&:hover {
|
|
img, span {
|
|
transform scale(1.2)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.emoji-picker-dropdown__modifiers {
|
|
top 16px
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//// GLITCH-SOC FIXES
|
|
/ {
|
|
/html[data-user-flavour="glitch"] #mastodon {
|
|
// Compose Form
|
|
.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
|
|
.focusable[tabindex]:not(.notification-ungrouped) .full-width {
|
|
margin-inline 0
|
|
}
|
|
.media-gallery__item > .media-gallery__preview {
|
|
display unset
|
|
opacity .5
|
|
}
|
|
|
|
.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
|
|
}
|
|
}
|
|
|
|
/.reactions-bar {
|
|
width unset
|
|
margin-top 8px
|
|
button {
|
|
border-radius 6px !important
|
|
padding-block 2px
|
|
.reactions-bar__item__emoji {
|
|
width unset
|
|
height 2em
|
|
max-width 70px
|
|
min-width @height
|
|
.detailed-status & {
|
|
max-width 400px
|
|
}
|
|
}
|
|
&:not(.active) {
|
|
border 1px solid var(--border-color)
|
|
background none
|
|
}
|
|
}
|
|
&:empty {
|
|
display none
|
|
}
|
|
.emoji-picker-dropdown {
|
|
align-self stretch
|
|
button {
|
|
align-self stretch
|
|
height 100%
|
|
aspect-ratio 1
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// GLITCH-SOC 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)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|