@ -774,6 +774,28 @@ body > [data-popper-placement] {
opacity 0 . 4s ease ;
opacity 0 . 4s ease ;
}
}
. compose-form__textarea-icons {
display : block ;
position : absolute ;
top : 29 px ;
inset-inline-end : 5 px ;
bottom : 5 px ;
overflow : hidden ;
& > . textarea_icon {
display : block ;
margin-top : 2 px ;
margin-inline-start : 2 px ;
width : 24 px ;
height : 24 px ;
color : $lighter-text-color ;
font-size : 18 px ;
line-height : 24 px ;
text-align : center ;
opacity : 0 .8 ;
}
}
. sign-in-banner {
. sign-in-banner {
padding : 10 px ;
padding : 10 px ;
@ -852,21 +874,33 @@ body > [data-popper-placement] {
clear : both ;
clear : both ;
}
}
. status__content ,
. reply-indicator__content {
. reply-indicator__content {
position : relative ;
position : relative ;
font-size : 1 4 px ;
font-size : 1 5 px ;
line-height : 20 px ;
line-height : 20 px ;
word-wrap : break-word ;
word-wrap : break-word ;
font-weight : 400 ;
font-weight : 400 ;
overflow : hidden ;
overflow : hidden ;
padding-top : 5 px ;
text-overflow : ellipsis ;
color : $inverted-text-color ;
padding-top : 2 px ;
white-space : pre-wrap ;
color : $primary-text-color ;
& : focus {
outline : 0 ;
}
. emojione {
width : 20 px ;
height : 20 px ;
margin : - 3 px 0 0 ;
}
p ,
p ,
pre {
pre {
margin-bottom : 20 px ;
margin-bottom : 20 px ;
white-space : pre-wrap ;
white-space : pre-wrap ;
unicode-bidi : plaintext ;
& : last-child {
& : last-child {
margin-bottom : 0 ;
margin-bottom : 0 ;
@ -874,8 +908,9 @@ body > [data-popper-placement] {
}
}
a {
a {
color : $ lighter -text-color;
color : $ secondary -text-color;
text-decoration : none ;
text-decoration : none ;
unicode-bidi : isolate ;
& : hover {
& : hover {
text-decoration : underline ;
text-decoration : underline ;
@ -892,13 +927,49 @@ body > [data-popper-placement] {
}
}
}
}
. emojione {
a . unhandled-link {
width : 20 px ;
color : $highlight-text-color ;
height : 20 px ;
margin : - 5 px 0 0 ;
. link-origin-tag {
color : $gold-star ;
font-size : 0 .8 em ;
}
}
. status__content__spoiler-link {
background : $action-button-color ;
& : hover ,
& : focus {
background : lighten ( $action-button-color , 7 % ) ;
text-decoration : none ;
}
& : : -moz-focus-inner {
border : 0 ;
}
& : :- moz-focus-inner ,
& : focus ,
& : active {
outline : 0 !important ;
}
}
. status__content__spoiler {
display : none ;
& . status__content__spoiler--visible {
display : block ;
}
}
}
}
}
. status__content {
/ / glitch : necessary for fullwidth media options
overflow : visible ;
}
. announcements__item__content {
. announcements__item__content {
word-wrap : break-word ;
word-wrap : break-word ;
overflow-y : auto ;
overflow-y : auto ;
@ -942,6 +1013,30 @@ body > [data-popper-placement] {
}
}
}
}
. status__content__read-more-button ,
. status__content__translate-button {
display : flex ;
align-items : center ;
font-size : 15 px ;
line-height : 22 px ;
color : $highlight-text-color ;
border : 0 ;
background : transparent ;
padding : 0 ;
padding-top : 16 px ;
text-decoration : none ;
& : hover ,
& : active {
text-decoration : underline ;
}
. icon {
width : 15 px ;
height : 15 px ;
}
}
. translate-button {
. translate-button {
margin-top : 16 px ;
margin-top : 16 px ;
font-size : 15 px ;
font-size : 15 px ;
@ -954,7 +1049,7 @@ body > [data-popper-placement] {
. status__content__spoiler-link {
. status__content__spoiler-link {
display : inline-flex ;
display : inline-flex ;
border-radius : 2 px ;
border-radius : 2 px ;
background : lighten ( $ui-base-color , 30 % ) ;
background : transparent ;
border : 0 ;
border : 0 ;
color : $inverted-text-color ;
color : $inverted-text-color ;
font-weight : 700 ;
font-weight : 700 ;
@ -1016,14 +1111,6 @@ body > [data-popper-placement] {
outline : 0 ;
outline : 0 ;
background : lighten ( $ui-base-color , 4 % ) ;
background : lighten ( $ui-base-color , 4 % ) ;
& . status . status-direct {
background : mix ( lighten ( $ui-base-color , 4 % ) , $ui-highlight-color , 95 % ) ;
& . muted {
background : transparent ;
}
}
. detailed-status ,
. detailed-status ,
. detailed-status__action-bar {
. detailed-status__action-bar {
background : lighten ( $ui-base-color , 8 % ) ;
background : lighten ( $ui-base-color , 8 % ) ;
@ -1057,11 +1144,6 @@ body > [data-popper-placement] {
margin-top : 8 px ; / / glitch : reduced margins
margin-top : 8 px ; / / glitch : reduced margins
}
}
& . status-direct {
background : mix ( $ui-base-color , $ui-highlight-color , 95 % ) ;
border-bottom-color : lighten ( $ui-base-color , 12 % ) ;
}
& . light {
& . light {
. status__relative-time ,
. status__relative-time ,
. status__visibility-icon {
. status__visibility-icon {
@ -1110,6 +1192,10 @@ body > [data-popper-placement] {
margin-inline-start : $thread-margin ;
margin-inline-start : $thread-margin ;
width : calc ( 100 % - ( $thread-margin )) ;
width : calc ( 100 % - ( $thread-margin )) ;
}
}
. status__content__read-more-button {
margin-inline-start : $thread-margin ;
}
}
}
& - - first-in-thread {
& - - first-in-thread {
@ -1209,6 +1295,7 @@ body > [data-popper-placement] {
) ;
) ;
}
}
/ / TODO : review
& . status-direct > . status__content : : after {
& . status-direct > . status__content : : after {
background : linear-gradient (
background : linear-gradient (
rgba ( mix ( $ ui-base-color , $ ui-highlight-color , 95 % ) , 0 ) ,
rgba ( mix ( $ ui-base-color , $ ui-highlight-color , 95 % ) , 0 ) ,
@ -1329,6 +1416,50 @@ body > [data-popper-placement] {
}
}
}
}
@keyframes spring-flip-in {
0 % {
transform : rotate ( 0 deg ) ;
}
30 % {
transform : rotate ( - 242 .4 deg ) ;
}
60 % {
transform : rotate ( - 158 .35 deg ) ;
}
90 % {
transform : rotate ( - 187 .5 deg ) ;
}
100 % {
transform : rotate ( - 180 deg ) ;
}
}
@keyframes spring-flip-out {
0 % {
transform : rotate ( - 180 deg ) ;
}
30 % {
transform : rotate ( 62 .4 deg ) ;
}
60 % {
transform : rotate ( - 21 .635 deg ) ;
}
90 % {
transform : rotate ( 7 .5 deg ) ;
}
100 % {
transform : rotate ( 0 deg ) ;
}
}
. status-check-box__status {
. status-check-box__status {
display : block ;
display : block ;
box-sizing : border-box ;
box-sizing : border-box ;
@ -1385,6 +1516,18 @@ body > [data-popper-placement] {
}
}
}
}
. status__wrapper-direct {
background : mix ( $ui-base-color , $ui-highlight-color , 95 % ) ;
& : focus {
background : mix ( lighten ( $ui-base-color , 4 % ) , $ui-highlight-color , 95 % ) ;
}
. status__prepend {
color : $highlight-text-color ;
}
}
. status__action-bar {
. status__action-bar {
display : flex ;
display : flex ;
align-items : center ;
align-items : center ;
@ -1434,6 +1577,11 @@ body > [data-popper-placement] {
height : 24 px ;
height : 24 px ;
margin : - 1 px 0 0 ;
margin : - 1 px 0 0 ;
}
}
. status__content__spoiler-link {
line-height : 24 px ;
margin : - 1 px 0 0 ;
}
}
}
. media-gallery ,
. media-gallery ,
@ -1469,25 +1617,29 @@ body > [data-popper-placement] {
padding : 8 px 0 ; / / glitch : reduced padding
padding : 8 px 0 ; / / glitch : reduced padding
}
}
. compose-form__textarea-icons {
. detailed-status__wrapper-direct {
display : block ;
. detailed-status ,
position : absolute ;
. detailed-status__action-bar {
top : 29 px ;
background : mix ( $ui-base-color , $ui-highlight-color , 95 % ) ;
inset-inline-end : 5 px ;
}
bottom : 5 px ;
overflow : hidden ;
& > . textarea_icon {
& : focus {
display : block ;
. detailed-status ,
margin-top : 2 px ;
. detailed-status__action-bar {
margin-inline-start : 2 px ;
background : mix ( lighten ( $ui-base-color , 4 % ) , $ui-highlight-color , 95 % ) ;
width : 24 px ;
}
height : 24 px ;
}
color : $lighter-text-color ;
font-size : 18 px ;
. detailed-status__action-bar {
line-height : 24 px ;
border-top-color : mix (
text-align : center ;
lighten ( $ ui-base-color , 8 % ) ,
opacity : 0 .8 ;
$ ui-highlight-color ,
95 %
) ;
}
. status__prepend {
color : $highlight-text-color ;
}
}
}
}
@ -1512,6 +1664,15 @@ body > [data-popper-placement] {
line-height : 18 px ;
line-height : 18 px ;
}
}
. reply-indicator__content {
color : $inverted-text-color ;
font-size : 14 px ;
a {
color : $lighter-text-color ;
}
}
. domain {
. domain {
padding : 10 px ;
padding : 10 px ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
@ -4137,7 +4298,7 @@ a.status-card {
margin : 0 ;
margin : 0 ;
font-size : inherit ;
font-size : inherit ;
flex : auto ;
flex : auto ;
background-color : $ui-base-color ;
background-color : lighten ( $ui-base-color , 8 % ) ;
transition : all 0 .2 s ease ;
transition : all 0 .2 s ease ;
transition-property : background-color , box-shadow ;
transition-property : background-color , box-shadow ;
@ -4615,10 +4776,10 @@ a.status-card {
margin-bottom : 4 px ;
margin-bottom : 4 px ;
display : block ;
display : block ;
background-color : rgba ( $black , 0 .45 ) ;
background-color : rgba ( $black , 0 .45 ) ;
text-transform : uppercase ;
font-size : 11 px ;
font-size : 11 px ;
font-weight : 500 ;
text-transform : uppercase ;
padding : 4 px ;
font-weight : 700 ;
padding : 2 px 6 px ;
border-radius : 4 px ;
border-radius : 4 px ;
opacity : 0 .7 ;
opacity : 0 .7 ;
@ -5173,128 +5334,6 @@ a.status-card {
}
}
}
}
@keyframes spring-flip-in {
0 % {
transform : rotate ( 0 deg ) ;
}
30 % {
transform : rotate ( - 242 .4 deg ) ;
}
60 % {
transform : rotate ( - 158 .35 deg ) ;
}
90 % {
transform : rotate ( - 187 .5 deg ) ;
}
100 % {
transform : rotate ( - 180 deg ) ;
}
}
@keyframes spring-flip-out {
0 % {
transform : rotate ( - 180 deg ) ;
}
30 % {
transform : rotate ( 62 .4 deg ) ;
}
60 % {
transform : rotate ( - 21 .635 deg ) ;
}
90 % {
transform : rotate ( 7 .5 deg ) ;
}
100 % {
transform : rotate ( 0 deg ) ;
}
}
. status__content {
position : relative ;
font-size : 15 px ;
line-height : 20 px ;
word-wrap : break-word ;
font-weight : 400 ;
overflow : visible ;
padding-top : 5 px ;
& : focus {
outline : 0 ;
}
. emojione {
width : 20 px ;
height : 20 px ;
margin : - 3 px 0 0 ;
}
p ,
pre {
margin-bottom : 20 px ;
white-space : pre-wrap ;
unicode-bidi : plaintext ;
& : last-child {
margin-bottom : 0 ;
}
}
a {
color : $secondary-text-color ;
text-decoration : none ;
unicode-bidi : isolate ;
& : hover {
text-decoration : underline ;
}
& . mention {
& : hover {
text-decoration : none ;
span {
text-decoration : underline ;
}
}
}
}
. status__content__spoiler {
display : none ;
& . status__content__spoiler--visible {
display : block ;
}
}
a . unhandled-link {
color : $highlight-text-color ;
. link-origin-tag {
color : $gold-star ;
font-size : 0 .8 em ;
}
}
. status__content__spoiler-link {
background : lighten ( $ui-base-color , 30 % ) ;
& : hover ,
& : focus {
background : lighten ( $ui-base-color , 33 % ) ;
text-decoration : none ;
}
}
}
. notif-cleaning {
. notif-cleaning {
. status ,
. status ,
. notification {
. notification {
@ -5302,18 +5341,6 @@ a.status-card {
}
}
}
}
. notification-follow ,
. notification-follow-request {
position : relative ;
/ / same like Status
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
. account {
border-bottom : 0 none ;
}
}
. language-dropdown {
. language-dropdown {
& __dropdown {
& __dropdown {
background : $simple-background-color ;
background : $simple-background-color ;
@ -8648,6 +8675,7 @@ noscript {
inset-inline-end : 20 px ;
inset-inline-end : 20 px ;
width : 300 px ;
width : 300 px ;
/ / glitch : feature to chose which side the pop-in player is displayed
& . left {
& . left {
inset-inline-end : unset ;
inset-inline-end : unset ;
inset-inline-start : 20 px ;
inset-inline-start : 20 px ;