mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 08:22:57 -03:00
3374 lines
69 KiB
CSS
3374 lines
69 KiB
CSS
|
||
////////////////////////////////////////////////////////////////// 🦊
|
||
// //
|
||
// !!! MAKE SURE TO ADD YOUR SERVER URL USING THE STEPS BELOW !!! //
|
||
// 1. Install the style //
|
||
// 2. Click "Edit" in the left sidebar //
|
||
// 3. Click "Settings" in the left sidebar //
|
||
// 4. Paste your server's URL in the //
|
||
// "Custom included sites" textbox like this: //
|
||
// *//DOMAIN HERE/* //
|
||
// 5. Click "Save" //
|
||
// //
|
||
////////////////////////////////////////////////////////////////////
|
||
|
||
|
||
/* Update 1.7.0
|
||
- New navbar design for when logged out, uses less space
|
||
- fix sidebar height (footer had too much bottom padding)
|
||
- fix multiple images in gallery being cut off
|
||
- style hashtags bar
|
||
- fixes
|
||
*/
|
||
|
||
/* ==UserStyle==
|
||
@name Mastodon Modern
|
||
@version 1.7.1
|
||
@description Drastically improves the look & feel of Mastodon
|
||
@updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
|
||
@homepageURL https://codeberg.org/Freeplay/Mastodon-Modern
|
||
@supportURL https://codeberg.org/Freeplay/Mastodon-Modern/issues
|
||
@preprocessor stylus
|
||
|
||
-- AUTHOR STUFF --
|
||
@namespace Freeplay
|
||
@author Freeplay (https://freeplay.codeberg.page/)
|
||
==/UserStyle== */
|
||
|
||
@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io") {
|
||
/ { // This is just so I can easily collapse everything, shouldn't affect compiled code
|
||
responsiveW1 = 1320px
|
||
responsiveW2 = 1175px
|
||
mobileW = 890px
|
||
|
||
transBounce1 = .2s cubic-bezier(0,0,0,1.1)
|
||
|
||
statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, .scrollable :not(.focusable) > .account, .timeline-hint"
|
||
media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder"
|
||
|
||
/:root {
|
||
--tl-width 750px
|
||
--radius 12px
|
||
--radius-round 24px
|
||
--hover-color rgba(170,170,170, 0.07)
|
||
--elevated-color rgba(150,150,200,0.1)
|
||
--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 16px -10px rgba(0,0,0,0.4)
|
||
--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
|
||
|
||
// --accent // not applied everywhere, just for if you have custom color scheme and want to match it
|
||
}
|
||
|
||
: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
|
||
}
|
||
}
|
||
}
|
||
|
||
fa() {
|
||
font: normal normal normal 14px/1 FontAwesome;
|
||
}
|
||
compactStatuses() {
|
||
.scrollable:not(.scrollable--flex) {
|
||
padding 0px !important
|
||
padding-bottom 40vh !important
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset 0
|
||
background-color inherit
|
||
z-index -1
|
||
}
|
||
.account-timeline__header {
|
||
margin 0px !important
|
||
}
|
||
}
|
||
|
||
{statuses-list} {
|
||
border-radius 0
|
||
&::before {
|
||
border-radius 0 !important
|
||
}
|
||
&::after {
|
||
inset-inline 0 !important
|
||
}
|
||
}
|
||
[class*="explore__"] {
|
||
> * {
|
||
border-radius var(--radius) !important
|
||
}
|
||
}
|
||
.detailed-status__wrapper {
|
||
margin 0 !important
|
||
}
|
||
.status__action-bar {
|
||
margin-bottom 0px
|
||
gap 0
|
||
margin-inline-end 0 !important
|
||
:not(i):not(.status__action-bar-spacer) {
|
||
display flex
|
||
flex-grow 9999
|
||
justify-content center !important
|
||
max-width 55px
|
||
min-width max-content
|
||
}
|
||
> .icon-button:first-child {
|
||
margin-inline-start -8px !important
|
||
}
|
||
}
|
||
.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
|
||
flex-wrap wrap
|
||
}
|
||
}
|
||
|
||
.rtl {
|
||
textarea {
|
||
text-align right
|
||
}
|
||
}
|
||
|
||
a, button, label {
|
||
user-select none
|
||
}
|
||
.button--block {
|
||
font-weight 700
|
||
}
|
||
.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,
|
||
button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track,
|
||
.reply-indicator, .compose-form__warning {
|
||
border-radius var(--radius) !important
|
||
}
|
||
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(input) {
|
||
font-display swap !important
|
||
}
|
||
:not(.radio-button__input):not(span) {
|
||
border-color var(--border-color) !important
|
||
}
|
||
.setting-text {
|
||
padding-inline 10px
|
||
}
|
||
@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 !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) !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 slideDowFade {
|
||
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)
|
||
}
|
||
}
|
||
}
|
||
.account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img {
|
||
border-radius 30% !important
|
||
}
|
||
.detailed-status__action-bar,
|
||
.column-header__collapsible-inner,
|
||
.audio-player, .search__input {
|
||
border 0 !important
|
||
}
|
||
|
||
|
||
|
||
.dropdown-menu, .dropdown-animation {
|
||
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
|
||
}
|
||
.interaction-modal__choices {
|
||
gap 10px
|
||
display flex
|
||
flex-wrap wrap
|
||
.interaction-modal__choices__choice {
|
||
max-height 50vh
|
||
overflow-y auto
|
||
// background-color var(--elevated-color)
|
||
border 1px solid var(--border-color)
|
||
flex 1 0 270px
|
||
border-radius var(--radius)
|
||
transition background .2s
|
||
position relative
|
||
}
|
||
}
|
||
.compare-history-modal {
|
||
margin-block 20px
|
||
}
|
||
.compare-history-modal__container {
|
||
overflow hidden auto
|
||
}
|
||
|
||
.columns-area__panels {
|
||
--top 5px
|
||
}
|
||
@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
|
||
}
|
||
}
|
||
|
||
#mastodon {
|
||
|
||
// LEFT COLUMN
|
||
.compose-panel {
|
||
margin-top 0
|
||
overflow-y auto
|
||
margin-top calc(0px - var(--top))
|
||
padding-top var(--top)
|
||
padding-bottom 20px
|
||
box-sizing border-box
|
||
// min-height 100vh !important
|
||
max-height unset !important
|
||
height 100%
|
||
}
|
||
.search {
|
||
margin-inline 5px
|
||
border-radius var(--radius)
|
||
label {
|
||
// padding-inline 20px
|
||
box-sizing border-box
|
||
}
|
||
input {
|
||
border-radius var(--radius-round) !important
|
||
padding-inline-start 20px !important
|
||
padding-inline-end 40px !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)
|
||
}
|
||
}
|
||
.compose__action-bar-dropdown {
|
||
.icon-button {
|
||
width auto !important
|
||
height auto !important
|
||
padding 8px
|
||
}
|
||
}
|
||
|
||
.compose-form {
|
||
padding-top 10px
|
||
min-height unset
|
||
overflow unset
|
||
.reply-indicator {
|
||
position relative
|
||
transition min-height .1s
|
||
}
|
||
.reply-indicator__display-name {
|
||
padding 0
|
||
}
|
||
.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%
|
||
}
|
||
.compose-form__upload__actions {
|
||
z-index 5
|
||
position relative
|
||
}
|
||
.compose-form__upload-thumbnail {
|
||
display flex
|
||
flex-direction column
|
||
}
|
||
.compose-form__upload__warning {
|
||
position relative
|
||
display flex
|
||
justify-content center
|
||
background rgba(0,0,0,0.7)
|
||
flex-grow 1
|
||
box-shadow 0 -50px rgba(0,0,0,0.7)
|
||
> button {
|
||
width 100%
|
||
height 100%
|
||
font-weight 700
|
||
padding-inline 1em
|
||
color white
|
||
i {
|
||
margin-inline-end .2em
|
||
transform scale(1.2)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/.server-banner {
|
||
// padding-inline 15px
|
||
padding-inline 10px
|
||
// overflow-y auto
|
||
.server-banner__introduction {
|
||
// padding-inline 10px
|
||
}
|
||
.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 {
|
||
// margin-inline -10px
|
||
// background-color var(--hover-color)
|
||
border 1px solid var(--border-color)
|
||
padding 14px 12px
|
||
margin-top -20px
|
||
line-height 1.5
|
||
// margin-top calc(-20px - var(--radius))
|
||
// padding-top calc(15px + var(--radius))
|
||
border-radius 0 0 var(--radius) var(--radius)
|
||
}
|
||
.server-banner__meta {
|
||
flex-direction column
|
||
// margin-inline -10px
|
||
// margin-top 30px !important
|
||
// border-top 2px solid var(--border-color-2)
|
||
// padding-top 20px
|
||
// border 1px solid var(--border-color)
|
||
// border-radius var(--radius)
|
||
// padding 15px
|
||
.server-banner__meta__column {
|
||
width unset
|
||
overflow visible
|
||
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
|
||
.sign-in-banner {
|
||
// padding 0
|
||
// border 1px solid var(--border-color)
|
||
// border-radius var(--radius)
|
||
// padding 15px
|
||
p {
|
||
// color inherit !important
|
||
// font-weight 500
|
||
// opacity .
|
||
line-height 1.5
|
||
// text-align justify
|
||
}
|
||
> :last-child {
|
||
margin-bottom 0
|
||
}
|
||
}
|
||
}
|
||
.link-footer > p:last-child {
|
||
margin-bottom 0
|
||
}
|
||
|
||
|
||
// CENTER COLUMN
|
||
|
||
/.columns-area__panels__main {
|
||
@media (min-width responsiveW2) {
|
||
width 0
|
||
flex-grow 1
|
||
.column, .columns-area {
|
||
overflow visible !important
|
||
border-radius var(--radius) var(--radius) 0 0 !important
|
||
> :first-child {
|
||
border-radius var(--radius) var(--radius) 0 0 !important
|
||
}
|
||
}
|
||
}
|
||
@media (min-width responsiveW1) {
|
||
max-width var(--tl-width) !important
|
||
padding 0 15px
|
||
margin 0 10px
|
||
}
|
||
|
||
@media (min-width mobileW) {
|
||
display grid
|
||
grid-template-columns 100%
|
||
}
|
||
|
||
overflow visible !important
|
||
transition max-width transBounce1, margin transBounce1
|
||
|
||
> div {
|
||
border-radius var(--radius) var(--radius) 0 0
|
||
grid-row 1
|
||
&:last-child {
|
||
box-shadow var(--shadow-med)
|
||
}
|
||
}
|
||
:not(.scrollable--flex) > .scrollable {
|
||
padding-bottom 40vh !important
|
||
}
|
||
.column-actions {
|
||
position static
|
||
.column-actions__background {
|
||
border-bottom-left-radius var(--radius)
|
||
}
|
||
}
|
||
}
|
||
.scrollable {
|
||
border-radius var(--radius) var(--radius) 0 0 !important
|
||
border 0
|
||
&:first-child {
|
||
overflow clip
|
||
}
|
||
}
|
||
.column-header__wrapper ~ .scrollable {
|
||
overflow auto !important
|
||
}
|
||
.scrollable:not(.scrollable--flex), .activity-stream {
|
||
&:not(.activity-stream):not(.privacy-policy) {
|
||
padding 10px
|
||
}
|
||
|
||
border 0 !important
|
||
contain unset !important
|
||
> [tabindex]:first-child > .focusable {
|
||
margin-top 0 !important
|
||
}
|
||
}
|
||
.columns-area {
|
||
box-sizing border-box
|
||
padding-bottom 0
|
||
height 100% !important
|
||
}
|
||
.explore__search-results {
|
||
padding 10px
|
||
}
|
||
.dismissable-banner, .follow_requests-unlocked_explanation {
|
||
border-inline 0
|
||
border-top 0
|
||
margin -10px
|
||
margin-bottom 10px
|
||
border-radius 0
|
||
padding 15px
|
||
isolation isolate
|
||
overflow hidden
|
||
/.dismissable-banner__message {
|
||
padding-block 10px
|
||
padding-inline-end 30px
|
||
}
|
||
/.dismissable-banner__action {
|
||
margin 10px
|
||
}
|
||
}
|
||
.column:not(.scrollable--flex) > .dismissable-banner {
|
||
border-radius var(--radius) var(--radius) 0 0 !important
|
||
margin 0
|
||
& ~ .scrollable {
|
||
border-radius 0 !important
|
||
}
|
||
}
|
||
.scrollable > .dismissable-banner {
|
||
margin 0 !important
|
||
}
|
||
|
||
.empty-column-indicator {
|
||
contain unset
|
||
padding 10px !important
|
||
color unset
|
||
opacity .8
|
||
font-size 1.2em
|
||
line-height 2
|
||
a {
|
||
display block
|
||
font-weight 700
|
||
font-size 1.1em
|
||
}
|
||
}
|
||
|
||
|
||
// ACCOUNT PAGE
|
||
.scrollable--flex .account-timeline__header {
|
||
margin 0 !important
|
||
}
|
||
.item-list {
|
||
background-color inherit
|
||
border-radius var(--radius)
|
||
}
|
||
.account-timeline__header {
|
||
margin -10px
|
||
margin-bottom 10px
|
||
background-color inherit
|
||
border-radius var(--radius) !important
|
||
animation slideUp backwards .4s cubic-bezier(0,1,1,1)
|
||
.account__moved-note {
|
||
box-sizing border-box
|
||
border-radius var(--radius)
|
||
margin-bottom calc(0px - var(--radius))
|
||
// margin-bottom -30px
|
||
padding 30px
|
||
padding-bottom calc(var(--radius) + 30px)
|
||
background inherit
|
||
.detailed-status__display-name {
|
||
overflow visible !important
|
||
}
|
||
}
|
||
.account__header {
|
||
overflow visible !important
|
||
border-radius var(--radius) var(--radius) 0 0
|
||
background inherit
|
||
}
|
||
.account__header__info {
|
||
z-index 2
|
||
}
|
||
.account__header__image {
|
||
height 0
|
||
padding-bottom 35%
|
||
border-radius var(--radius) var(--radius) 0 0
|
||
position sticky
|
||
top calc(0px - var(--radius))
|
||
overflow clip
|
||
img {
|
||
position absolute
|
||
}
|
||
.account__header__info {
|
||
// position sticky
|
||
height 100%
|
||
> span {
|
||
position sticky
|
||
top var(--radius)
|
||
}
|
||
}
|
||
}
|
||
.account__header__bar {
|
||
border 0
|
||
padding 0 20px
|
||
/body:not(.flavour-glitch) & {
|
||
background inherit !important
|
||
}
|
||
border-radius var(--radius) var(--radius) 0 0
|
||
margin-top calc(0px - var(--radius)) !important
|
||
display flex
|
||
flex-direction column
|
||
background inherit
|
||
// &::before {
|
||
// content ""
|
||
// position absolute
|
||
// inset 0
|
||
// border-radius inherit
|
||
// background rgba(220,220,255,0.05)
|
||
// }
|
||
|
||
.account__header__tabs {
|
||
overflow visible !important
|
||
position relative
|
||
padding 0
|
||
padding-top 10px
|
||
height unset !important
|
||
margin-top -55px !important
|
||
&::before { // Add blur below the account header
|
||
content ""
|
||
position absolute
|
||
top 0
|
||
left -20px
|
||
right -20px
|
||
bottom -40px
|
||
backdrop-filter blur(40px)
|
||
filter brightness(1.1)
|
||
pointer-events none
|
||
opacity .7
|
||
clip-path: inset(55px 0 0 0 round var(--radius));
|
||
mask linear-gradient(transparent 55px, black 50px, transparent)
|
||
-webkit-mask @mask
|
||
}
|
||
& ~ div {
|
||
z-index 2
|
||
}
|
||
}
|
||
.avatar {
|
||
margin-inline-start 0 !important
|
||
overflow visible !important
|
||
position relative
|
||
.account-role {
|
||
position absolute
|
||
bottom 0
|
||
left 100%
|
||
border-radius var(--radius-round)
|
||
}
|
||
}
|
||
.account__avatar {
|
||
border 0
|
||
box-shadow var(--shadow)
|
||
// background none
|
||
}
|
||
}
|
||
.account__header__tabs__name {
|
||
margin-bottom 0
|
||
padding 0
|
||
margin-top 16px
|
||
h1 {
|
||
display flex
|
||
flex-wrap wrap
|
||
white-space unset
|
||
gap 0 .4em
|
||
}
|
||
}
|
||
.account__header__bio {
|
||
padding 0
|
||
margin 0
|
||
> * {
|
||
padding-inline 0
|
||
}
|
||
}
|
||
|
||
.account__header__extra {
|
||
line-height 1.5
|
||
margin-top 1em
|
||
}
|
||
}
|
||
:not(.admin-account-bio) > div > .account__header__fields, .account__header__account-note {
|
||
display flex
|
||
flex-wrap wrap
|
||
gap 2px
|
||
background none
|
||
// margin-inline -10px
|
||
border-radius var(--radius)
|
||
overflow hidden
|
||
width max-content
|
||
// max-width calc(100% + 20px)
|
||
max-width 100%
|
||
border 0
|
||
&.account__header__fields:not(:first-child) {
|
||
margin-top 10px
|
||
margin-bottom -10px
|
||
}
|
||
/ .public-account-bio .account__header__fields {
|
||
padding 20px !important
|
||
padding-bottom 0 !important
|
||
}
|
||
dl, &.account__header__account-note.account__header__account-note {
|
||
// border-radius var(--radius)
|
||
display inline
|
||
border-radius 0
|
||
overflow hidden
|
||
&:not(.verified) {
|
||
background-color var(--elevated-color)
|
||
}
|
||
|
||
border 0
|
||
// border 1px solid var(--border-color)
|
||
padding 8px 12px !important
|
||
position relative
|
||
overflow hidden
|
||
// min-width max-content
|
||
flex-grow 1
|
||
// max-width max-content !important
|
||
dt {
|
||
all unset
|
||
color unset
|
||
opacity .9
|
||
}
|
||
|
||
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.account__header__account-note {
|
||
// padding 0 !important
|
||
display flex
|
||
margin-bottom 10px
|
||
gap 0
|
||
border 0
|
||
padding 0 !important
|
||
margin-inline 0 !important
|
||
// padding .4em .8em !important
|
||
// transition padding .01s, margin .01s
|
||
// display inline
|
||
background none !important
|
||
border-radius 8px
|
||
font-size 12px
|
||
width unset
|
||
background none
|
||
label {
|
||
z-index 2
|
||
padding 0 !important
|
||
padding-inline-end .7em !important
|
||
pointer-events none
|
||
line-height inherit
|
||
font-size inherit
|
||
font-weight inherit
|
||
vertical-align unset
|
||
&::after {
|
||
// content ":"
|
||
}
|
||
}
|
||
&:focus-within {
|
||
padding .5em .7em !important
|
||
margin-inline -5px !important
|
||
border 1px solid
|
||
}
|
||
&:not(:focus-within) {
|
||
border-radius 0
|
||
border-bottom 1px solid
|
||
padding-bottom .4em !important
|
||
}
|
||
textarea {
|
||
width 0
|
||
flex-grow 1
|
||
margin 0 !important
|
||
border-radius 0
|
||
padding 0
|
||
margin -100px !important
|
||
padding 100px !important
|
||
padding-inline-end .7em !important
|
||
margin-inline-end -.7em !important
|
||
line-height inherit
|
||
font-size inherit
|
||
font-weight inherit
|
||
vertical-align unset
|
||
background none
|
||
&::placeholder {
|
||
// opacity .7 !important
|
||
font-weight 600
|
||
}
|
||
}
|
||
label {
|
||
margin 0
|
||
font-weight 600
|
||
padding-inline 14px
|
||
}
|
||
}
|
||
}
|
||
.account__section-headline {
|
||
background none
|
||
position relative
|
||
z-index 2
|
||
/.with-modals & {
|
||
border 0 !important
|
||
}
|
||
a, button {
|
||
background none
|
||
border-radius 0 !important
|
||
span {
|
||
font-weight 400
|
||
opacity .7
|
||
transition opacity .2s
|
||
}
|
||
&.active span {
|
||
font-weight 700
|
||
opacity 1
|
||
}
|
||
&:hover span, &:active span {
|
||
opacity 1 !important
|
||
}
|
||
&::before {
|
||
border-color transparent transparent var(--border-color)
|
||
}
|
||
}
|
||
}
|
||
.notification__filter-bar {
|
||
border 0 !important
|
||
margin-bottom calc(0px - var(--radius))
|
||
padding-bottom var(--radius)
|
||
& + .scrollable {
|
||
overflow clip
|
||
}
|
||
}
|
||
|
||
// Gallery
|
||
.account-gallery__container {
|
||
border-radius var(--radius)
|
||
overflow clip
|
||
padding 0
|
||
margin 4px
|
||
gap 4px
|
||
margin-bottom calc(-40vh + 4px)
|
||
/.account-gallery__item {
|
||
margin 0
|
||
flex 1 1 calc(100px + 15%)
|
||
transition flex .7s cubic-bezier(0,0,0,1)
|
||
min-height 180px !important
|
||
/.media-gallery__item-thumbnail {
|
||
transition transform .2s
|
||
}
|
||
&:hover, &:focus-within {
|
||
flex-grow 1.5
|
||
.media-gallery__item-thumbnail {
|
||
transform scale(1.02)
|
||
}
|
||
}
|
||
}
|
||
> button {
|
||
// order 2
|
||
width unset
|
||
flex-grow 1
|
||
// min-width 30%
|
||
flex 1 1 calc(100px + 15% - 24px)
|
||
margin 12px
|
||
font-size 1.2em
|
||
font-weight 700
|
||
background var(--elevated-color)
|
||
color inherit
|
||
&:hover:not(:focus) {
|
||
transform scale(1.01)
|
||
}
|
||
}
|
||
}
|
||
|
||
// STATUSES
|
||
.scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper {
|
||
&::after {
|
||
content unset
|
||
}
|
||
}
|
||
|
||
/{statuses-list} {
|
||
overflow hidden
|
||
transition background .2s, box-shadow .4s, margin .2s, border .2s
|
||
animation slideUp backwards .4s cubic-bezier(0,1,1,1)
|
||
position relative
|
||
border-radius var(--radius)
|
||
&.trends__item, &.story, &.account-card {
|
||
animation-name slideUpFade
|
||
for row in 1..11 {
|
||
&:nth-child({row}) {
|
||
animation-delay .04s * row
|
||
}
|
||
}
|
||
}
|
||
&.focusable {
|
||
background none
|
||
}
|
||
&.entry {
|
||
margin-bottom 10px
|
||
}
|
||
&:not(.detailed-status__wrapper) {
|
||
// Hover
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset 0px !important
|
||
height unset !important
|
||
width unset !important
|
||
border-radius var(--radius)
|
||
pointer-events none
|
||
transition background-color .2s
|
||
}
|
||
&.unread {
|
||
&::before {
|
||
border-start-start-radius 0 !important
|
||
border-end-start-radius 0 !important
|
||
}
|
||
}
|
||
&:hover, &:focus-within {
|
||
&::before {
|
||
background-color var(--hover-color)
|
||
}
|
||
}
|
||
// borders
|
||
&:not(.status__wrapper) {
|
||
border-radius var(--radius)
|
||
border 0
|
||
&::after {
|
||
content ""
|
||
position absolute
|
||
bottom 0px
|
||
inset-inline var(--radius)
|
||
border-top 1px solid var(--border-color)
|
||
pointer-events none
|
||
}
|
||
/.status__wrapper-reply.status--in-thread {
|
||
&::after {
|
||
top 0
|
||
}
|
||
}
|
||
/.status--in-thread.status__wrapper-reply:not(.status--first-in-thread),
|
||
/.status--in-thread:not(.status__wrapper-reply) {
|
||
&::after {
|
||
border-top 0 !important
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
/.explore__links {
|
||
padding 10px !important
|
||
display flex
|
||
flex-wrap wrap
|
||
.trends__item {
|
||
margin 7.5px
|
||
padding 25px !important
|
||
box-shadow var(--shadow-med)
|
||
width 200px
|
||
background var(--elevated-color)
|
||
// font-size 2em
|
||
// overflow visible !important
|
||
&::after {
|
||
content unset !important
|
||
inset 0 !important
|
||
border-radius var(--radius)
|
||
pointer-events none
|
||
border 1px solid var(--border-color) !important
|
||
}
|
||
a {
|
||
font-size 1.4em
|
||
line-height 1.7em
|
||
}
|
||
.trends__item__sparkline {
|
||
height 100%
|
||
svg {
|
||
height 100%
|
||
// width 100%
|
||
float right
|
||
overflow visible !important
|
||
position relative
|
||
z-index -1
|
||
|
||
path {
|
||
display unset !important
|
||
transition transform 1s
|
||
&:first-child {
|
||
transform-origin center
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&:hover, &:focus-within {
|
||
svg path:first-child {
|
||
transform scale(2)
|
||
// filter blur(40px) !important
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.trends__item, &.story {
|
||
padding 10px
|
||
flex-grow 1
|
||
}
|
||
&.story {
|
||
padding 15px
|
||
.story__details {
|
||
padding-inline-start 0 !important
|
||
}
|
||
.story__thumbnail {
|
||
margin-inline-end 0
|
||
border-radius var(--radius)
|
||
overflow hidden
|
||
}
|
||
}
|
||
&.account-card.account-card.account-card { // specificity go brrrrr
|
||
display flex
|
||
flex-direction column
|
||
max-height 320px
|
||
margin 0
|
||
border-radius var(--radius) !important
|
||
|
||
/.explore__suggestions, /.directory__list {
|
||
padding 15px
|
||
display grid
|
||
grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
|
||
gap 15px
|
||
&.directory__list {
|
||
padding 15px 10px
|
||
}
|
||
}
|
||
box-shadow var(--shadow)
|
||
.account-card__header {
|
||
padding 0 !important
|
||
}
|
||
.account-card__title {
|
||
margin-bottom 10px
|
||
margin-top -26px
|
||
}
|
||
.account-card__title__avatar {
|
||
padding-inline-end 10px
|
||
padding-bottom 0
|
||
}
|
||
.display-name {
|
||
padding-bottom 0
|
||
}
|
||
.display-name__account {
|
||
font-size .9em !important
|
||
}
|
||
.account-card__title__avatar .account__avatar, .account-card__title__avatar {
|
||
width 64px !important
|
||
height 64px !important
|
||
background-size 64px 64px !important
|
||
img {
|
||
width inherit
|
||
height inherit
|
||
}
|
||
}
|
||
.account-card__title {
|
||
padding-inline-end 15px
|
||
}
|
||
.display-name bdi {
|
||
white-space nowrap
|
||
text-overflow ellipsis
|
||
overflow hidden
|
||
}
|
||
.account-card__bio {
|
||
margin-top 0 !important
|
||
max-height unset
|
||
mask linear-gradient(black 65px, rgba(0,0,0,0.5), transparent)
|
||
-webkit-mask @mask
|
||
flex-grow 1
|
||
margin-bottom -50px
|
||
margin-bottom -15px
|
||
font-size 1em
|
||
padding-bottom 60px
|
||
// min-height 60px
|
||
&::after {
|
||
content unset !important
|
||
}
|
||
p {
|
||
display inline
|
||
&:not(:first-child)::before {
|
||
content " · "
|
||
}
|
||
}
|
||
br {
|
||
display block
|
||
}
|
||
}
|
||
.account-card__actions {
|
||
// display block
|
||
margin-top auto !important
|
||
// margin-top -15px
|
||
display unset !important
|
||
|
||
.account-card__counters {
|
||
display flex
|
||
gap 1em
|
||
padding-inline 15px
|
||
}
|
||
.account-card__counters__item {
|
||
display flex
|
||
align-items center
|
||
font-size 1em
|
||
|
||
> small {
|
||
display inline !important
|
||
margin-inline-start .4em
|
||
font-size 1em !important
|
||
}
|
||
}
|
||
.account-card__actions__button {
|
||
position absolute
|
||
top 10px
|
||
right 10px
|
||
padding 0
|
||
background rgba(0,0,0,0.4)
|
||
// background white
|
||
border-radius var(--radius-round)
|
||
// box-shadow 0 0 70px rgba(0,0,0,0.7)
|
||
padding 4px
|
||
// border-radius var(--radius-round)
|
||
// border 8px solid rgba(0,0,0,0.5) !important
|
||
box-shadow 0 4px 12px rgba(0,0,0,0.2)
|
||
// border 4px solid rgba(0,0,0,0.4) !important
|
||
button, a {
|
||
border-radius var(--radius-round) !important
|
||
padding .7em 1.7em
|
||
min-height unset
|
||
font-size 14px !important
|
||
line-height 1.2
|
||
font-size 1em !important
|
||
}
|
||
&:empty {
|
||
display none
|
||
}
|
||
}
|
||
}
|
||
&::after {
|
||
content unset !important
|
||
}
|
||
}
|
||
&.empty-column-indicator {
|
||
display block
|
||
}
|
||
&.timeline-hint {
|
||
display block
|
||
}
|
||
&.timeline-hint a {
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset 0
|
||
}
|
||
}
|
||
}
|
||
|
||
.status, .scrollable .account {
|
||
padding-block 15px
|
||
&::before {
|
||
inset -10px
|
||
border-radius var(--radius)
|
||
}
|
||
}
|
||
|
||
// Fix dropdown note preview
|
||
.status.light {
|
||
overflow hidden !important
|
||
.boost-modal__status-header {
|
||
display flow-root !important
|
||
}
|
||
}
|
||
|
||
.account__relationship:empty {
|
||
display none
|
||
}
|
||
.status__prepend {
|
||
white-space nowrap
|
||
> span {
|
||
display flex
|
||
flex-grow 1
|
||
gap .3em
|
||
align-items center
|
||
> a {
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
}
|
||
}
|
||
}
|
||
.notification .status {
|
||
padding-top 0
|
||
}
|
||
.status__prepend, .notification__message {
|
||
display flex
|
||
padding-top 15px !important
|
||
padding-bottom 0 !important
|
||
margin 0 !important
|
||
z-index 2
|
||
position relative
|
||
[class*="icon-wrapper"] {
|
||
display flex
|
||
align-items center
|
||
}
|
||
a {
|
||
white-space nowrap
|
||
font-weight 700
|
||
text-overflow ellipsis
|
||
overflow hidden !important
|
||
}
|
||
bdi {
|
||
text-overflow ellipsis
|
||
overflow hidden
|
||
max-width 100%
|
||
}
|
||
}
|
||
.status__prepend {
|
||
margin-bottom -15px !important
|
||
}
|
||
.notification__message {
|
||
> span, > span > span {
|
||
display flex
|
||
flex-wrap wrap
|
||
align-items center
|
||
gap 0em .4em
|
||
line-height 1.4
|
||
max-width 100%
|
||
}
|
||
}
|
||
.notification-favourite, .notification-reblog {
|
||
.notification__message {
|
||
margin-bottom -10px !important
|
||
& ~ div {
|
||
.status__info, .status__action-bar {
|
||
display none
|
||
}
|
||
.status {
|
||
min-height unset
|
||
}
|
||
.attachment-list {
|
||
margin-top 0
|
||
}
|
||
.status__content__text.status__content__text {
|
||
max-height 80px !important
|
||
mask linear-gradient(black 60px, transparent)
|
||
-webkit-mask @mask
|
||
// min-height 1em
|
||
p {
|
||
margin 0
|
||
}
|
||
}
|
||
.attachment-list__list {
|
||
display flex
|
||
flex-direction row
|
||
// flex-wrap wrap
|
||
justify-content flex-start
|
||
gap 0 1em
|
||
margin-top 4px
|
||
z-index 2
|
||
pointer-events none
|
||
max-width 100%
|
||
li {
|
||
display contents
|
||
}
|
||
a {
|
||
pointer-events all
|
||
white-space nowrap
|
||
text-overflow ellipsis
|
||
overflow hidden
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.status__line:not(.status__line--full) {
|
||
height 20px
|
||
filter contrast(2)
|
||
}
|
||
.status__line::before {
|
||
top 20px
|
||
height 48px
|
||
}
|
||
.status__avatar {
|
||
min-width 45px
|
||
}
|
||
.account__avatar-overlay-base {
|
||
width 100%
|
||
height 100%
|
||
background-size cover
|
||
border-radius var(--radius)
|
||
.account__avatar {
|
||
width 90% !important
|
||
height 90% !important
|
||
}
|
||
}
|
||
.account__avatar-overlay-overlay {
|
||
border-radius var(--radius-round)
|
||
overflow hidden
|
||
}
|
||
.status__info {
|
||
margin-block 5px 0
|
||
padding 0 !important
|
||
align-items flex-start
|
||
> * {
|
||
position relative
|
||
z-index 2
|
||
}
|
||
.display-name {
|
||
color unset !important
|
||
strong {
|
||
font-weight 600
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
}
|
||
}
|
||
b {
|
||
unicode-bidi isolate
|
||
}
|
||
.status__relative-time {
|
||
display flex
|
||
font-weight 500
|
||
font-size 15px
|
||
// line-height 22px
|
||
.status__visibility-icon {
|
||
order 2
|
||
margin-inline-start .4em
|
||
}
|
||
abbr {
|
||
// text-decoration none
|
||
margin-inline-start .7em
|
||
&::after {
|
||
content: ""
|
||
fa()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// STATUS CONTENT
|
||
.status__content {
|
||
padding-top 2px
|
||
text-align unset !important
|
||
line-height 1.5
|
||
margin-top 10px
|
||
&.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
|
||
}
|
||
.custom-emoji {
|
||
height 2em
|
||
min-width 2em
|
||
width auto
|
||
/^[-1..-1] {
|
||
transition transform .4s cubic-bezier(0,0.7,0,1)
|
||
&:hover {
|
||
transform scale(1.3)
|
||
}
|
||
}
|
||
}
|
||
& ~ [style*="aspect-ratio"] {
|
||
max-height 80vh
|
||
}
|
||
}
|
||
.status > .status__content {
|
||
.status__content__text {
|
||
&:empty {
|
||
margin-top -5px !important
|
||
}
|
||
}
|
||
}
|
||
.status__content__spoiler-link {
|
||
display block
|
||
position relative
|
||
padding .4em 1.2em
|
||
border-radius var(--radius-round) !important
|
||
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 {
|
||
// background none
|
||
&::before, &::after {
|
||
opacity 1
|
||
}
|
||
}
|
||
}
|
||
.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
|
||
.status__prepend {
|
||
position absolute
|
||
font-size 0
|
||
}
|
||
|
||
.status__content {
|
||
position relative !important
|
||
background var(--elevated-color)
|
||
padding 8px 12px
|
||
padding .7em .9em !important
|
||
border-radius var(--radius-round)
|
||
border-top-left-radius 6px
|
||
box-sizing border-box
|
||
margin-top 5px !important
|
||
margin-bottom 0
|
||
overflow hidden !important
|
||
max-width max-content
|
||
.media-gallery {
|
||
width 999px
|
||
max-width 100% !important
|
||
}
|
||
/.detailed-status__wrapper-direct ^[-1..-1] {
|
||
font-size 17px
|
||
}
|
||
}
|
||
}
|
||
|
||
.detailed-status__wrapper-direct {
|
||
.fa-at, .status__visibility-icon {
|
||
font-family inherit
|
||
font-weight 600
|
||
color var(--accent, #8c8dff)
|
||
width auto !important
|
||
&::before {
|
||
font-family FontAwesome !important
|
||
}
|
||
&::after {
|
||
content attr(title)
|
||
margin-left .4em
|
||
}
|
||
}
|
||
}
|
||
.status-direct {
|
||
.fa-at, .status__visibility-icon {
|
||
color var(--accent, #8c8dff)
|
||
}
|
||
.status__info .status__relative-time {
|
||
height auto
|
||
color var(--accent, #8c8dff)
|
||
}
|
||
&.status--in-thread {
|
||
.status__info {
|
||
align-items center
|
||
gap 10px
|
||
> span {
|
||
width 0
|
||
flex-grow 1
|
||
}
|
||
}
|
||
.status__info> span, .status__display-name {
|
||
overflow visible !important
|
||
}
|
||
.status__display-name {
|
||
overflow hidden
|
||
width 0
|
||
flex-grow 1
|
||
}
|
||
.status__avatar {
|
||
height auto
|
||
margin-bottom -100px
|
||
.account__avatar {
|
||
position absolute
|
||
top 0 !important
|
||
height 46px !important
|
||
width 46px !important
|
||
}
|
||
}
|
||
.display-name {
|
||
* {
|
||
display inline
|
||
margin-right .2em
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
{media} {
|
||
box-shadow var(--shadow-low)
|
||
border-radius var(--radius)
|
||
margin-top 10px !important
|
||
margin-bottom 10px !important
|
||
animation scaleIn .4s
|
||
max-width unset !important
|
||
// max-height 80vh !important
|
||
}
|
||
.status .media-gallery__item {
|
||
max-height 80vh
|
||
}
|
||
/.status-card {
|
||
&:not(.horizontal) {
|
||
border 1px solid var(--border-color) !important
|
||
}
|
||
line-height 1
|
||
/.status-card__content {
|
||
padding 12px !important
|
||
margin-block auto
|
||
}
|
||
.status-card__image {
|
||
border-radius 0
|
||
width 90px
|
||
min-height 100%
|
||
img {
|
||
border-radius 0
|
||
height 100%
|
||
}
|
||
}
|
||
&.compact:not(.interactive) .status-card__image {
|
||
position relative
|
||
aspect-ratio unset !important
|
||
img {
|
||
position absolute
|
||
inset 0
|
||
}
|
||
}
|
||
/.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 !important
|
||
}
|
||
/.status-card__author {
|
||
margin-top 0.4em
|
||
font-size .85em
|
||
}
|
||
&:hover {
|
||
background-color var(--hover-color)
|
||
}
|
||
}
|
||
/.audio-player {
|
||
.video-player__seek {
|
||
margin var(--radius)
|
||
}
|
||
}
|
||
.hashtag-bar {
|
||
margin-top 8px
|
||
a, button {
|
||
font-size .85em
|
||
font-weight 600
|
||
opacity .8
|
||
padding .2em .6em
|
||
transition opacity .2s
|
||
}
|
||
a {
|
||
position relative
|
||
border-radius var(--radius)
|
||
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
|
||
}
|
||
}
|
||
|
||
|
||
.detailed-status__wrapper {
|
||
border-radius var(--radius)
|
||
overflow clip
|
||
}
|
||
.detailed-status {
|
||
border 0 !important
|
||
padding 15px !important
|
||
padding-bottom 5px !important
|
||
.status__prepend {
|
||
padding-top 0 !important
|
||
margin-bottom 1em !important
|
||
}
|
||
.detailed-status__display-name {
|
||
margin-bottom 10px
|
||
}
|
||
}
|
||
div:empty + div > .detailed-status__wrapper {
|
||
margin-top 0 !important
|
||
}
|
||
.detailed-status__wrapper, .detailed-status, .picture-in-picture {
|
||
box-shadow var(--shadow)
|
||
{media} {
|
||
margin-inline 0 !important
|
||
max-height unset !important
|
||
}
|
||
.status__content {
|
||
min-height unset !important
|
||
}
|
||
}
|
||
.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)
|
||
}
|
||
}
|
||
|
||
.status__action-bar {
|
||
margin-top .4em
|
||
margin-bottom -8px
|
||
.icon-button {
|
||
padding .25em .25em !important
|
||
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
|
||
pointer-events none
|
||
gap 0 18px
|
||
justify-content unset
|
||
:not(i) {
|
||
height unset !important
|
||
width unset !important
|
||
pointer-events all
|
||
}
|
||
.icon-button {
|
||
display inline-flex
|
||
align-items center
|
||
justify-content center
|
||
width unset !important
|
||
padding .5em !important
|
||
|
||
height unset !important
|
||
// flex 0 1 auto !important
|
||
// min-width 55px
|
||
border-radius var(--radius)
|
||
position relative
|
||
&:last-child {
|
||
margin 0 !important
|
||
}
|
||
i {
|
||
min-width 22px
|
||
}
|
||
&[aria-label]::after {
|
||
all unset
|
||
// content attr(aria-label)
|
||
font-size 12px
|
||
margin-inline-start .5em
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
}
|
||
.icon-button__counter {
|
||
width auto !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
|
||
width 100%
|
||
:not(i) {
|
||
display flex
|
||
width 100% !important
|
||
}
|
||
}
|
||
}
|
||
&.picture-in-picture__footer {
|
||
.icon-button::after {
|
||
content unset !important
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
// RIGHT COLUMN
|
||
/.layout-single-column {
|
||
.tabs-bar__wrapper, .column-back-button--slim .column-back-button {
|
||
z-index 101
|
||
grid-column 2
|
||
border 0 !important
|
||
/#mastodon .column-header, /#mastodon .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
|
||
}
|
||
}
|
||
@media (min-width mobileW) {
|
||
// position absolute
|
||
width 285px
|
||
// margin-inline-start 600px
|
||
top 0 !important
|
||
top var(--top) !important
|
||
inset-inline unset !important
|
||
height 50px !important
|
||
margin-top -50px !important
|
||
margin-inline-start 10px
|
||
// &::before {
|
||
// content ""
|
||
// width var(--tl-width)
|
||
// display inline-block
|
||
// }
|
||
@media (min-width: responsiveW1) {
|
||
margin-inline-start 25px
|
||
// margin-inline-start calc(var(--tl-width) - 5px)
|
||
}
|
||
@media (max-width responsiveW2 - 1) {
|
||
// margin-inline-start calc(100% - 275px)
|
||
width 265px
|
||
margin-top -60px !important
|
||
top 10px !important
|
||
margin-inline-start 10px
|
||
}
|
||
&:not(.column-back-button) {
|
||
padding-top 0
|
||
}
|
||
margin-top 30px
|
||
// overflow clip
|
||
border-radius var(--radius) var(--radius) !important
|
||
box-shadow 0 12px 12px -12px rgba(0,0,0,0.1)
|
||
|
||
.column-header__wrapper {
|
||
gap 2px !important
|
||
display flex
|
||
flex-direction column
|
||
border-radius var(--radius)
|
||
overflow hidden
|
||
}
|
||
.column-back-button {
|
||
background none
|
||
}
|
||
|
||
.column-header/*, .column-header__buttons button:not(.active)*/ {
|
||
background none !important
|
||
overflow hidden
|
||
border 0
|
||
}
|
||
.column-header > button {
|
||
z-index 2
|
||
}
|
||
.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 15px
|
||
.icon-with-badge {
|
||
position absolute
|
||
inset 0
|
||
display flex
|
||
align-items center
|
||
justify-content center
|
||
.icon-with-badge__badge {
|
||
right -2px
|
||
left unset
|
||
top unset
|
||
bottom 0px
|
||
border-radius var(--radius-round)
|
||
}
|
||
}
|
||
.column-header__icon {
|
||
margin-inline-end 0
|
||
}
|
||
&:not(.active) {
|
||
background var(--elevated-color) !important
|
||
}
|
||
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset 0
|
||
top calc(100% + 5px)
|
||
bottom -5px
|
||
background inherit
|
||
z-index -1
|
||
transition inset .1s
|
||
border-radius 100px
|
||
pointer-events none
|
||
}
|
||
&::after {
|
||
// content ""
|
||
position absolute
|
||
inset 0
|
||
background var(--elevated-color)
|
||
border-radius 100%
|
||
}
|
||
&.active {
|
||
// filter contrast(1.1)
|
||
// z-index -1
|
||
// opacity .7
|
||
&::before {
|
||
inset -10px -300px
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.announcements, .column-header__collapsible:not(.collapsed) {
|
||
flex-direction column-reverse
|
||
align-items flex-start
|
||
border 0
|
||
animation slideDowFade .3s backwards cubic-bezier(0,1,0,1.2)
|
||
}
|
||
.column-header__collapsible {
|
||
transition none
|
||
}
|
||
.collapsed {
|
||
display none
|
||
}
|
||
.announcements__container {
|
||
width 100% !important
|
||
.react-swipeable-view-container {
|
||
// height unset !important
|
||
}
|
||
}
|
||
.announcements__mastodon {
|
||
z-index -1
|
||
position relative
|
||
}
|
||
|
||
}
|
||
transition margin transBounce1, top .4s
|
||
}
|
||
@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-settings__row, .column-settings__hashtags {
|
||
border-radius var(--radius)
|
||
margin-bottom 1em
|
||
}
|
||
.column-settings__section {
|
||
margin-bottom 4px
|
||
padding-inline 4px
|
||
}
|
||
.column-select__control {
|
||
border-radius var(--radius)
|
||
}
|
||
.setting-toggle {
|
||
display flex
|
||
// flex-direction row-reverse
|
||
align-items center
|
||
margin-bottom 14px
|
||
position relative
|
||
padding .7em
|
||
background var(--elevated-color)
|
||
margin-bottom 2px !important
|
||
overflow hidden
|
||
&:first-child {
|
||
border-top-left-radius var(--radius)
|
||
border-top-right-radius var(--radius)
|
||
}
|
||
&:last-child {
|
||
border-bottom-left-radius var(--radius)
|
||
border-bottom-right-radius var(--radius)
|
||
}
|
||
|
||
|
||
// 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
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.navigation-panel {
|
||
box-sizing border-box
|
||
height calc(100vh - var(--top) - 50px + var(--radius))
|
||
padding-bottom 10px
|
||
margin 0
|
||
margin-top calc(0px - var(--radius))
|
||
padding-top calc(10px + var(--radius))
|
||
> hr {
|
||
display none
|
||
}
|
||
hr {
|
||
margin-inline 15px
|
||
}
|
||
@media (min-width responsiveW2) {
|
||
// padding-top 20px !important
|
||
padding-top calc(var(--radius) + 10px)
|
||
margin-top calc(50px - var(--radius))
|
||
.navigation-panel__logo {
|
||
display none
|
||
}
|
||
[href="/settings/preferences"] {
|
||
display none !important
|
||
}
|
||
}
|
||
/.column-link {
|
||
border 0
|
||
}
|
||
@media (min-width mobileW) {
|
||
/.column-link {
|
||
flex-grow 100 !important
|
||
display flex !important
|
||
align-items center !important
|
||
align-content center
|
||
max-height 3.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
|
||
.column-link__icon, /.column-header > button .column-header__icon {
|
||
margin-inline-end 1em !important
|
||
font-size 16px !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
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.navigation-panel__legal {
|
||
// display contents
|
||
}
|
||
}
|
||
@media (min-width mobileW) {
|
||
.getting-started__trends {
|
||
display unset !important
|
||
}
|
||
}
|
||
|
||
.trends__item {
|
||
display flex !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 {
|
||
// display none
|
||
filter blur(10px)
|
||
}
|
||
path:last-child {
|
||
mask linear-gradient(to left, black, black, transparent)
|
||
-webkit-mask @mask
|
||
|
||
}
|
||
/.rtl & {
|
||
transform scaleX(-1)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
/.getting-started, .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable { // specificitiy yay
|
||
position relative
|
||
padding 5px 10px !important
|
||
.getting-started__wrapper {
|
||
background none
|
||
a, .column-subheading {
|
||
border 0 !important
|
||
padding 20px
|
||
background none
|
||
}
|
||
}
|
||
.getting-started__footer {
|
||
padding-inline 20px
|
||
a span {
|
||
font-size 1.1em !important
|
||
line-height 2
|
||
}
|
||
}
|
||
}
|
||
|
||
// ABOUT PAGE
|
||
/.about {
|
||
.account {
|
||
padding 0 !important
|
||
overflow visible !important
|
||
&::after {
|
||
content unset !important
|
||
}
|
||
}
|
||
.about__meta {
|
||
border-radius var(--radius)
|
||
}
|
||
.about__section__title {
|
||
position sticky
|
||
top 0
|
||
z-index 2
|
||
border-radius 0 !important
|
||
}
|
||
.about__section__body {
|
||
animation slideDowFade .3s .1s backwards cubic-bezier(0, 1, 0, 1.2)
|
||
}
|
||
.about__section {
|
||
margin 10px 0px !important
|
||
margin-top 20px
|
||
border-radius var(--radius)
|
||
overflow clip
|
||
transition margin .2s cubic-bezier(0,1,0,1), border-radius .2s
|
||
&:not(.active) {
|
||
border 0 !important
|
||
.about__section__title {
|
||
background var(--elevated-color) !important
|
||
border-radius var(--radius)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// FOLLOW PROMPT
|
||
&.modal-layout {
|
||
overflow hidden
|
||
.container-alt {
|
||
background inherit
|
||
height 100%
|
||
.public-layout {
|
||
padding 0 !important
|
||
}
|
||
.form-container {
|
||
max-width 500px !important
|
||
padding 0
|
||
background inherit
|
||
display flex
|
||
flex-direction column
|
||
justify-content center
|
||
height 100%
|
||
h2 {
|
||
// display none
|
||
margin 0
|
||
padding 20px
|
||
font-weight 600
|
||
}
|
||
.follow-prompt {
|
||
// height 0
|
||
// flex-grow 1
|
||
margin 0
|
||
border-radius 0 0 var(--radius) var(--radius)
|
||
overflow-y auto
|
||
.activity-stream {
|
||
margin 0 !important
|
||
}
|
||
}
|
||
}
|
||
.entry {
|
||
border-radius var(--radius) !important
|
||
}
|
||
}
|
||
|
||
#new_remote_follow {
|
||
position sticky
|
||
bottom 0
|
||
padding 20px
|
||
padding-bottom 60px
|
||
background inherit
|
||
// border-radius var(--radius)
|
||
// margin-inline 15px
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
// That layout between mobile and regular view
|
||
@media (min-width mobileW) and (max-width responsiveW2 - 1) {
|
||
/.layout-single-column #mastodon {
|
||
.ui__header {
|
||
background none !important
|
||
border 0
|
||
margin-inline-end 280px
|
||
padding-top 12px
|
||
// z-index 0
|
||
position static
|
||
}
|
||
.columns-area__panels__main {
|
||
margin-inline 10px !important
|
||
// margin-top -20px
|
||
margin-top 10px
|
||
.columns-area {
|
||
padding-bottom 0 !important
|
||
}
|
||
}
|
||
.dismissable-banner {
|
||
border-top-left-radius 0 !important
|
||
}
|
||
.navigation-panel {
|
||
background none
|
||
border 0
|
||
// padding-top 10px
|
||
width 265px !important
|
||
// height calc(100vh - 50px) !important
|
||
padding-bottom 10px
|
||
// padding-inline 10px
|
||
}
|
||
}
|
||
}
|
||
|
||
// Mobile
|
||
@media (max-width mobileW - 1) {
|
||
compactStatuses()
|
||
.columns-area--mobile > .column > .column-header__wrapper {
|
||
display none
|
||
}
|
||
.column-header {
|
||
border-inline 0
|
||
}
|
||
/.ui__header {
|
||
z-index 101
|
||
border-bottom 0
|
||
box-sizing content-box
|
||
flex-wrap wrap
|
||
min-height 55px
|
||
height auto
|
||
position relative
|
||
padding-block 10px
|
||
box-sizing border-box
|
||
gap 10px
|
||
border 0 !important
|
||
overflow visible
|
||
&::after {
|
||
content ""
|
||
position absolute
|
||
inset-inline-end 54px
|
||
top 100%
|
||
width var(--radius)
|
||
height var(--radius)
|
||
background inherit
|
||
mask radial-gradient(var(--radius) at 0px var(--radius),#0000 100%,#000)
|
||
-webkit-mask @mask
|
||
z-index 9999
|
||
|
||
/.rtl & {
|
||
transform scaleX(-1)
|
||
}
|
||
}
|
||
.ui__header__logo {
|
||
padding-block 5px !important
|
||
}
|
||
.ui__header__links {
|
||
background inherit
|
||
}
|
||
[href="/search"] {
|
||
margin-inline-end 55px
|
||
}
|
||
[href^="/@"], a.permalink[href] {
|
||
position fixed
|
||
inset-inline-end 1px
|
||
width 53px
|
||
display flex
|
||
justify-content center
|
||
background inherit
|
||
}
|
||
|
||
[href="/publish"] {
|
||
position fixed
|
||
bottom 15px
|
||
inset-inline-end 15px
|
||
// margin-inline -60px
|
||
border-radius 100px !important
|
||
height 60px
|
||
width 60px
|
||
font-size 0
|
||
box-shadow var(--shadow-low)
|
||
background inherit
|
||
-webkit-user-drag: none;
|
||
-khtml-user-drag: none;
|
||
-moz-user-drag: none;
|
||
-o-user-drag: none;
|
||
user-drag: none;
|
||
animation scaleIn transBounce1
|
||
&::before {
|
||
content ""
|
||
fa()
|
||
position absolute
|
||
inset 0
|
||
display flex
|
||
justify-content center
|
||
align-items center
|
||
font-size 24px
|
||
}
|
||
&:active {
|
||
animation rainbow 4s infinite linear !important
|
||
}
|
||
}
|
||
}
|
||
.tabs-bar__wrapper {
|
||
top 0
|
||
background none
|
||
}
|
||
.column-back-button.column-back-button {
|
||
border-radius 0 !important
|
||
}
|
||
|
||
// logged out view
|
||
&:has(.navigation-panel__sign-in-banner) {
|
||
.columns-area__panels {
|
||
flex-direction column
|
||
}
|
||
.ui__header::after {
|
||
content unset
|
||
}
|
||
.columns-area__panels__main {
|
||
width 100%
|
||
border-radius 0 !important
|
||
margin 0 !important
|
||
border 0 !important
|
||
}
|
||
.tabs-bar__wrapper {
|
||
transition none !important
|
||
}
|
||
&:has(.column-header__buttons:empty) {
|
||
.tabs-bar__wrapper {
|
||
margin-top -50px
|
||
margin-bottom 2px
|
||
height 48px
|
||
}
|
||
}
|
||
.columns-area__panels__pane--navigational {
|
||
display contents
|
||
.columns-area__panels__pane__inner {
|
||
position relative !important
|
||
inset unset !important
|
||
order -1
|
||
width unset
|
||
height auto
|
||
white-space nowrap
|
||
}
|
||
.navigation-panel {
|
||
flex-direction row
|
||
margin 0
|
||
padding 0
|
||
height auto
|
||
padding 12px 14px
|
||
gap 10px
|
||
border-block 1px solid
|
||
overflow scroll hidden
|
||
&::-webkit-scrollbar {
|
||
display none
|
||
}
|
||
}
|
||
hr {
|
||
display none
|
||
}
|
||
.trends__item__name > span, .trends__item__sparkline {
|
||
display none
|
||
}
|
||
.navigation-panel__legal, h4,
|
||
.getting-started__trends, .trends__item, .trends__item__name {
|
||
all unset
|
||
display contents !important
|
||
&::before, &::after {
|
||
content unset
|
||
}
|
||
}
|
||
&:has(.getting-started__trends) {
|
||
.flex-spacer {
|
||
border-right 1px solid
|
||
margin-block 10px
|
||
}
|
||
.navigation-panel::after {
|
||
content ""
|
||
position sticky
|
||
right -20px
|
||
min-width 150px
|
||
margin-left -50px
|
||
background inherit
|
||
mask linear-gradient(to right, transparent, black)
|
||
-webkit-mask @mask
|
||
pointer-events none
|
||
}
|
||
.trends__item:last-child a {
|
||
position relative
|
||
z-index 3
|
||
}
|
||
}
|
||
a, h4 > span {
|
||
// background var(--elevated-color)
|
||
position relative
|
||
overflow hidden
|
||
border-radius var(--radius)
|
||
padding .8em 1.2em
|
||
font-weight 600
|
||
font-size 1.1em
|
||
text-align center
|
||
min-width max-content
|
||
i {
|
||
font-size 1em
|
||
width auto
|
||
margin-right 0
|
||
}
|
||
&.active {
|
||
padding-inline 1.2em
|
||
position relative
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset 0
|
||
background currentcolor
|
||
opacity .1
|
||
}
|
||
}
|
||
> span:not(:first-child) {
|
||
margin-left .7em
|
||
}
|
||
}
|
||
span {
|
||
display unset
|
||
}
|
||
}
|
||
|
||
}
|
||
.columns-area__panels {
|
||
// overflow-x scroll !important
|
||
justify-content flex-start
|
||
max-width 100% !important
|
||
flex-wrap nowrap !important
|
||
}
|
||
.columns-area__panels__main {
|
||
padding 0 !important
|
||
max-width unset
|
||
border-start-end-radius var(--radius)
|
||
overflow clip !important
|
||
margin-top 1px !important
|
||
flex-grow 1
|
||
// z-index 2
|
||
// order 2
|
||
> .columns-area--mobile {
|
||
overflow visible !important
|
||
}
|
||
~/ .is-composing .columns-area__panels__main {
|
||
padding-bottom 40px !important
|
||
}
|
||
.scrollable, .account__header__image, > div {
|
||
border-radius 0 !important
|
||
}
|
||
|
||
}
|
||
.column {
|
||
flex-grow 1
|
||
overflow clip
|
||
}
|
||
|
||
.dismissable-banner {
|
||
margin 0
|
||
padding-left 4px
|
||
}
|
||
.status {
|
||
padding-top 14px !important
|
||
.status__avatar {
|
||
width 42px !important
|
||
min-width 45px !important
|
||
height 45px !important
|
||
background-size 45px !important
|
||
> div {
|
||
width 100% !important
|
||
height 100% !important
|
||
background-size cover !important
|
||
}
|
||
}
|
||
&::before {
|
||
content unset
|
||
}
|
||
}
|
||
|
||
.status__action-bar {
|
||
margin-bottom -5px
|
||
|
||
.icon-button {
|
||
margin 0 !important
|
||
justify-content center
|
||
}
|
||
}
|
||
|
||
.icon-button:after {
|
||
content unset !important
|
||
}
|
||
|
||
.navigation-panel {
|
||
margin-top -200px
|
||
padding-top 200px
|
||
height calc(100vh + 200px - 55px)
|
||
border 0
|
||
margin-inline-start 1px
|
||
padding-bottom 90px
|
||
}
|
||
|
||
|
||
|
||
|
||
.notification__filter-bar + .scrollable {
|
||
border-radius var(--radius) var(--radius) 0 0 !important
|
||
}
|
||
|
||
.columns-area {
|
||
padding-bottom 0 !important
|
||
overflow hidden !important
|
||
}
|
||
.getting-started {
|
||
padding 20px
|
||
padding-bottom 60px
|
||
}
|
||
.getting-started__wrapper {
|
||
flex-grow 1
|
||
overflow visible !important
|
||
}
|
||
|
||
// ABOUT PAGE
|
||
.about.about.about {
|
||
padding-inline 10px !important
|
||
.account {
|
||
margin-top 0
|
||
}
|
||
.about__header__hero, .about__section.active {
|
||
margin-inline -11px !important
|
||
width unset
|
||
border-radius 0
|
||
// margin 0
|
||
}
|
||
.about__section.active {
|
||
margin-block 20px !important
|
||
}
|
||
.about__section {
|
||
margin-bottom 0
|
||
border-bottom 1px solid
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// SETTINGS PAGE
|
||
/.admin-wrapper {
|
||
.sidebar-wrapper {
|
||
overflow visible !important
|
||
width unset
|
||
.sidebar-wrapper__inner {
|
||
position sticky
|
||
top 0
|
||
max-height 100vh !important
|
||
overflow-y auto !important
|
||
pointer-events all !important
|
||
z-index 100
|
||
.fa {
|
||
margin-inline-end 1em !important
|
||
}
|
||
.sidebar > ul > li {
|
||
overflow hidden
|
||
margin-inline 15px !important
|
||
> a:not(.selected) {
|
||
background none
|
||
}
|
||
a {
|
||
display flex !important
|
||
align-items center
|
||
white-space unset
|
||
}
|
||
&.selected {
|
||
margin 6px
|
||
border-radius var(--radius)
|
||
> a.selected {
|
||
font-weight 600
|
||
color unset
|
||
position relative
|
||
overflow visible
|
||
border-radius 0 !important
|
||
border 0
|
||
|
||
&::after {
|
||
content ""
|
||
position absolute
|
||
top 100%
|
||
inset-inline 0
|
||
height 9999px
|
||
background inherit
|
||
z-index -1
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
> ul {
|
||
border-radius var(--radius) !important
|
||
overflow hidden !important
|
||
gap 2px !important
|
||
margin 8px
|
||
margin-top 0
|
||
background none
|
||
& > li {
|
||
border-radius 8px
|
||
&:not(:first-child):not(:last-child) {
|
||
margin-block 2px
|
||
}
|
||
a {
|
||
padding 14px 16px
|
||
font-weight 600
|
||
border 0
|
||
}
|
||
&:not(.selected) {
|
||
a {
|
||
background-color rgba(150,150,250,0.1)
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
.content__heading {
|
||
margin-bottom 2em
|
||
}
|
||
|
||
h4 {
|
||
// padding-block .2em
|
||
margin 0
|
||
border-bottom 0
|
||
}
|
||
|
||
form > h4 {
|
||
margin-top 2em !important
|
||
border-bottom 0
|
||
margin-bottom 0 !important
|
||
}
|
||
.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__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 {
|
||
flex-grow 1
|
||
> textarea {
|
||
min-height 100%
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> :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, .radio_buttons > ul, .with_block_label.radio_buttons .label_input {
|
||
border-radius var(--radius)
|
||
overflow clip
|
||
padding 0
|
||
display flex
|
||
flex-direction column
|
||
// flex-wrap wrap
|
||
// flex-grow 1
|
||
// justify-content space-between
|
||
gap 2px
|
||
> * {
|
||
background-color var(--elevated-color)
|
||
padding .8rem
|
||
margin-block 0px
|
||
position relative
|
||
border-radius 0 !important
|
||
&:not(p):not(h6):not(.input-copy) {
|
||
&::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
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.input-copy__wrapper {
|
||
border 1px solid var(--border-color-2)
|
||
border-radius var(--radius)
|
||
}
|
||
> .input, .checkbox, .radio {
|
||
flex-grow 1
|
||
&:not(:last-child) {
|
||
margin-bottom 2px
|
||
margin-bottom 0
|
||
}
|
||
&.radio, &.checkbox {
|
||
.hint, label {
|
||
margin-bottom 0 !important
|
||
}
|
||
}
|
||
.label_input {
|
||
flex-direction column
|
||
// gap .7em
|
||
}
|
||
.label_input > label {
|
||
margin-bottom 0
|
||
padding-top .1em
|
||
}
|
||
.label_input__wrapper {
|
||
> :not(.checkbox) {
|
||
margin-top .4em
|
||
}
|
||
}
|
||
.checkbox {
|
||
inset 0
|
||
padding 1em !important
|
||
}
|
||
}
|
||
li.checkbox {
|
||
width calc(50% - 27px)
|
||
}
|
||
li.checkbox label {
|
||
position static
|
||
padding-top 0
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset 0
|
||
}
|
||
input {
|
||
inset 1em !important
|
||
}
|
||
}
|
||
> {
|
||
h6, p {
|
||
margin 0
|
||
&:not(:last-child) {
|
||
padding-bottom 0
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
ul {
|
||
flex-direction row !important
|
||
flex-wrap wrap
|
||
gap 2px
|
||
margin-top .4em
|
||
}
|
||
.spacer {
|
||
border-top 1px solid var(--border-color) !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 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 Fixes
|
||
.layout-multiple-columns #mastodon .columns-area {
|
||
overflow auto hidden !important
|
||
padding 0
|
||
|
||
compactStatuses()
|
||
|
||
.column-header, .scrollable, .column-back-button, .account__header__image {
|
||
border-radius 0 !important
|
||
}
|
||
.icon-button:after {
|
||
content unset !important
|
||
}
|
||
> 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 {
|
||
padding-inline 6px !important
|
||
padding-top 20px !important
|
||
// width 285px
|
||
.drawer__header {
|
||
border-radius var(--radius-round)
|
||
margin-inline 10px
|
||
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
|
||
}
|
||
& > .drawer__pager {
|
||
overflow visible !important
|
||
&, & > .drawer__inner:not(.darker) {
|
||
// overflow visible
|
||
|
||
}
|
||
& > .drawer__inner:not(.darker) {
|
||
top -20px
|
||
// inset-inline -6px
|
||
// padding-inline 6px
|
||
margin-inline-start -6px
|
||
margin-inline-end -4px
|
||
width calc(100% + 10px)
|
||
padding-inline-start 6px
|
||
padding-inline-end 4px
|
||
padding-top 20px
|
||
height calc(100% + 20px)
|
||
}
|
||
}
|
||
.drawer__inner__mastodon {
|
||
margin-inline -6px
|
||
margin-inline-end -4px
|
||
z-index -1
|
||
}
|
||
}
|
||
.search {
|
||
margin-inline 10px
|
||
}
|
||
.drawer__inner:not(.darker), .drawer__inner__mastodon {
|
||
background-color transparent
|
||
border 0 !important
|
||
background-color transparent !important
|
||
}
|
||
.drawer__inner.darker {
|
||
border-radius var(--radius-round) var(--radius-round) 0 0
|
||
// margin-inline 10px
|
||
// width calc(100% - 20px)
|
||
// padding-bottom 10px
|
||
// height calc(100% - 10px)
|
||
}
|
||
|
||
.getting-started__trends {
|
||
padding 0px 20px
|
||
}
|
||
|
||
.status {
|
||
padding-bottom 10px !important
|
||
}
|
||
.detailed-status {
|
||
.status__content {
|
||
font-size 1.3em
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
/ .modal-root__container {
|
||
animation bounceIn .7s
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// GLITCH-SOC FIXES
|
||
/body.app-body.flavour-glitch > #mastodon {
|
||
.compose-form__autosuggest-wrapper > :last-child {
|
||
padding-bottom 2em !important
|
||
}
|
||
.compose-form__buttons {
|
||
width 100%
|
||
> div:last-child {
|
||
margin-inline-start auto
|
||
}
|
||
}
|
||
.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
|
||
}
|
||
}
|
||
|
||
// GLITCH STATUSES
|
||
.collapsed {
|
||
.status__content {
|
||
height auto !important
|
||
overflow visible
|
||
.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
|
||
}
|
||
}
|
||
&.muted {
|
||
.status__content__text ~ * {
|
||
display none
|
||
}
|
||
}
|
||
}
|
||
// make entire post clickable
|
||
.status:not(.status-direct) > .status__content {
|
||
margin-block -90px -100px !important
|
||
padding-block 100px !important
|
||
.status__content__text {
|
||
margin-top 0px
|
||
}
|
||
> :last-child:not(.status__content__text) {
|
||
margin-bottom 5px !important
|
||
}
|
||
}
|
||
.status {
|
||
.full-width {
|
||
margin-inline 0 !important
|
||
}
|
||
.status__action-bar {
|
||
position static
|
||
}
|
||
}
|
||
.status__info {
|
||
.notification__message {
|
||
padding-top 0 !important
|
||
padding-inline-start 0 !important
|
||
}
|
||
}
|
||
.status__display-name {
|
||
line-height 22px
|
||
}
|
||
.display-name__account {
|
||
font-size 15px
|
||
}
|
||
.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
|
||
}
|
||
|
||
.reactions-bar {
|
||
width unset
|
||
margin-top 8px
|
||
button {
|
||
border-radius 6px !important
|
||
padding-block 2px
|
||
@media (pointer: coarse) {
|
||
padding 4px 8px !important
|
||
.reactions-bar__item__emoji {
|
||
height 18px
|
||
width @height
|
||
}
|
||
}
|
||
}
|
||
&:empty {
|
||
display none
|
||
}
|
||
}
|
||
|
||
// Notifications
|
||
.collapsed > .status__info .notification__message {
|
||
padding-bottom 0 !important
|
||
}
|
||
.notification {
|
||
> .notification__message {
|
||
padding-inline 15px !important
|
||
padding-top 18px !important
|
||
}
|
||
.account {
|
||
padding-inline-start 0 !important
|
||
}
|
||
}
|
||
.notification__favourite-icon-wrapper {
|
||
position static
|
||
margin-inline-end 10px
|
||
i {
|
||
width 1.28571429em !important // width in original masto
|
||
text-align center
|
||
}
|
||
}
|
||
.status__prepend, .status__info .notification__message {
|
||
padding-bottom 15px !important
|
||
padding-top 0 !important
|
||
margin-top -5px !important
|
||
.status__prepend-icon-wrapper {
|
||
all unset
|
||
margin-inline-end 10px
|
||
display flex
|
||
i {
|
||
margin auto
|
||
}
|
||
}
|
||
}
|
||
|
||
.detailed-status__wrapper {
|
||
.focusable:not(.status) {
|
||
&::before {
|
||
content unset !important
|
||
}
|
||
}
|
||
}
|
||
|
||
// timeline settings
|
||
.setting-text {
|
||
border-radius 0 !important
|
||
margin 4px
|
||
width calc(100% - 8px)
|
||
}
|
||
.column-settings__pillbar {
|
||
border-radius var(--radius)
|
||
}
|
||
.pillbar-button {
|
||
border-radius 0 !important
|
||
padding 6px
|
||
}
|
||
|
||
// Explore page
|
||
.account-card .media-modal__close {
|
||
left 10px
|
||
top 10px
|
||
&::before {
|
||
content ""
|
||
position absolute
|
||
inset -60px -30px
|
||
background linear-gradient(to right, black, transparent)
|
||
transform rotate(45deg)
|
||
z-index -1
|
||
opacity .5
|
||
}
|
||
}
|
||
|
||
// Advanced View
|
||
/.layout-multiple-columns.flavour-glitch {
|
||
.drawer__inner {
|
||
margin-top -10px
|
||
padding-top 30px !important
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
// below isn't needed for compilation, just for compatability w/ glitch-soc v's < 4.1.5
|
||
/body.app-body.flavour-glitch > #mastodon {
|
||
.scrollable.detailed-status__wrapper {
|
||
box-shadow none
|
||
> div > .focusable[aria-label]:not(.status--in-thread) {
|
||
box-shadow var(--shadow)
|
||
}
|
||
}
|
||
}
|
||
|
||
//////////////////////////////
|
||
// //
|
||
// STYLUS-ONLY OPTIONS //
|
||
// //
|
||
//////////////////////////////
|
||
:root {
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
} |