@ -252,13 +252,14 @@
& . overlayed {
box-sizing : content-box ;
background : rgba ( $base-overlay-background , 0 .6 ) ;
color : rgba ( $primary-text-color , 0 .7 ) ;
background : rgba ( $black , 0 .65 ) ;
backdrop-filter : blur ( 10 px ) saturate ( 180 % ) contrast ( 75 % ) brightness ( 70 % ) ;
color : rgba ( $white , 0 .7 ) ;
border-radius : 4 px ;
padding : 2 px ;
& : hover {
background : rgba ( $b ase-over lay-ba ckground , 0 .9 ) ;
background : rgba ( $b lack, 0 .9 ) ;
}
}
@ -1352,6 +1353,10 @@ body > [data-popper-placement] {
}
}
. scrollable > div : first-child . detailed-status {
border-top : 0 ;
}
. detailed-status__meta {
margin-top : 16 px ;
color : $dark-text-color ;
@ -3504,12 +3509,10 @@ button.icon-button.active i.fa-retweet {
}
. status-card {
display : block ;
position : relative ;
display : flex ;
font-size : 14 px ;
border : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-radius : 4 px ;
color : $dark-text-color ;
color : $darker-text-color ;
margin-top : 14 px ;
text-decoration : none ;
overflow : hidden ;
@ -3563,8 +3566,29 @@ button.icon-button.active i.fa-retweet {
a . status-card {
cursor : pointer ;
& : hover {
background : lighten ( $ui-base-color , 8 % ) ;
& : hover ,
& : focus ,
& : active {
. status-card__title ,
. status-card__host ,
. status-card__author {
color : $highlight-text-color ;
}
}
}
. status-card a {
color : inherit ;
text-decoration : none ;
& : hover ,
& : focus ,
& : active {
. status-card__title ,
. status-card__host ,
. status-card__author {
color : $highlight-text-color ;
}
}
}
@ -3590,42 +3614,42 @@ a.status-card {
. status-card__title {
display : block ;
font-weight : 500 ;
margin-bottom : 5 px ;
color : $darker-text-color ;
font-weight : 700 ;
font-size : 19 px ;
line-height : 24 px ;
color : $primary-text-color ;
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
text-decoration : none ;
}
. status-card__content {
flex : 1 1 auto ;
overflow : hidden ;
padding : 14 px 14 px 14 px 8 px ;
padding : 15 px 0 ;
padding-bottom : 0 ;
}
. status-card__description {
color : $darker-text-color ;
overflow : hidden ;
display : - webkit-box ;
-webkit-box-orient : vertical ;
-webkit-line-clamp : 2 ;
. status-card__host {
display : block ;
font-size : 14 px ;
margin-bottom : 8 px ;
}
. status-card__ host {
. status-card__ author {
display : block ;
margin-top : 5 px ;
font-size : 13 px ;
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
margin-top : 8 px ;
font-size : 14 px ;
color : $primary-text-color ;
strong {
font-weight : 500 ;
}
}
. status-card__image {
flex: 0 0 100 px ;
width: 100 % ;
background : lighten ( $ui-base-color , 8 % ) ;
position : relative ;
border-radius : 8 px ;
& > . fa {
font-size : 21 px ;
@ -3637,50 +3661,8 @@ a.status-card {
}
}
. status-card . horizontal {
display : block ;
. status-card__image {
width : 100 % ;
}
. status-card__image-image ,
. status-card__image-preview {
border-radius : 4 px 4 px 0 0 ;
}
. status-card__title {
white-space : inherit ;
}
}
. status-card . compact {
border-color : lighten ( $ui-base-color , 4 % ) ;
& . interactive {
border : 0 ;
}
. status-card__content {
padding : 8 px ;
padding-top : 10 px ;
}
. status-card__title {
white-space : nowrap ;
}
. status-card__image {
flex : 0 0 60 px ;
}
}
a . status-card . compact : hover {
background-color : lighten ( $ui-base-color , 4 % ) ;
}
. status-card__image-image {
border-radius : 4px 0 0 4 px ;
border-radius : 8 px ;
display : block ;
margin : 0 ;
width : 100 % ;
@ -3691,7 +3673,7 @@ a.status-card.compact:hover {
}
. status-card__image-preview {
border-radius : 4px 0 0 4 px ;
border-radius : 8 px ;
display : block ;
margin : 0 ;
width : 100 % ;
@ -4204,6 +4186,7 @@ a.status-card.compact:hover {
margin : 0 ;
border : 0 ;
border-radius : 4 px ;
color : $white ;
& __label {
display : flex ;
@ -4211,7 +4194,6 @@ a.status-card.compact:hover {
justify-content : center ;
gap : 8 px ;
flex-direction : column ;
color : $primary-text-color ;
font-weight : 500 ;
font-size : 14 px ;
}
@ -5033,7 +5015,6 @@ a.status-card.compact:hover {
position : absolute ;
top : 16 px ;
inset-inline-end : 10 px ;
z-index : 2 ;
display : inline-block ;
opacity : 0 ;
transition : all 100 ms linear ;
@ -5172,9 +5153,9 @@ a.status-card.compact:hover {
display : flex ;
}
. video-modal__container {
. video-modal . video-player {
max-height : 80 vh ;
max-width : 100 vw ;
max-height : 100 vh ;
}
. audio-modal__container {
@ -6192,7 +6173,7 @@ a.status-card.compact:hover {
box-sizing : border-box ;
margin-top : 8 px ;
overflow : hidden ;
border-radius : 4 px ;
border-radius : 8 px ;
position : relative ;
width : 100 % ;
min-height : 64 px ;
@ -6207,7 +6188,7 @@ a.status-card.compact:hover {
box-sizing : border-box ;
display : block ;
position : relative ;
border-radius : 4 px ;
border-radius : 8 px ;
overflow : hidden ;
& - - tall {
@ -6293,7 +6274,7 @@ a.status-card.compact:hover {
box-sizing : border-box ;
position : relative ;
background : darken ( $ui-base-color , 8 % ) ;
border-radius : 4 px ;
border-radius : 8 px ;
padding-bottom : 44 px ;
width : 100 % ;
@ -6360,7 +6341,7 @@ a.status-card.compact:hover {
position : relative ;
background : $base-shadow-color ;
max-width : 100 % ;
border-radius : 4 px ;
border-radius : 8 px ;
box-sizing : border-box ;
color : $white ;
display : flex ;
@ -6377,8 +6358,6 @@ a.status-card.compact:hover {
video {
display : block ;
max-width : 100 vw ;
max-height : 80 vh ;
z-index : 1 ;
}
@ -6386,22 +6365,15 @@ a.status-card.compact:hover {
width : 100 % !important ;
height : 100 % !important ;
margin : 0 ;
aspect-ratio : auto !important ;
video {
max-width : 100 % !important ;
max-height : 100 % !important ;
width : 100 % !important ;
height : 100 % !important ;
outline : 0 ;
}
}
& . inline {
video {
object-fit : contain ;
}
}
& __controls {
position : absolute ;
direction : ltr ;
@ -8163,6 +8135,7 @@ noscript {
. search__input {
border : 1 px solid lighten ( $ui-base-color , 8 % ) ;
padding : 10 px ;
padding-inline-end : 28 px ;
}
. search__popout {
@ -8191,8 +8164,9 @@ noscript {
align-items : center ;
color : $primary-text-color ;
text-decoration : none ;
padding : 15 px 0 ;
padding : 15 px ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
gap : 15 px ;
& : last-child {
border-bottom : 0 ;
@ -8201,33 +8175,40 @@ noscript {
& : hover ,
& : active ,
& : focus {
background-color : lighten ( $ui-base-color , 4 % ) ;
color : $highlight-text-color ;
. story__details__publisher ,
. story__details__shared {
color : $highlight-text-color ;
}
}
& __details {
padding : 0 15 px ;
flex : 1 1 auto ;
& __publisher {
color : $darker-text-color ;
margin-bottom : 4 px ;
margin-bottom : 8 px ;
}
& __title {
font-size : 19 px ;
line-height : 24 px ;
font-weight : 500 ;
margin-bottom : 4 px ;
margin-bottom : 8 px ;
}
& __shared {
color : $darker-text-color ;
}
strong {
font-weight : 500 ;
}
}
& __thumbnail {
flex : 0 0 auto ;
margin : 0 15 px ;
position : relative ;
width : 120 px ;
height : 120 px ;
@ -8238,7 +8219,7 @@ noscript {
}
img {
border-radius : 4 px ;
border-radius : 8 px ;
display : block ;
margin : 0 ;
width : 100 % ;
@ -8247,7 +8228,7 @@ noscript {
}
& __preview {
border-radius : 4 px ;
border-radius : 8 px ;
display : block ;
margin : 0 ;
width : 100 % ;
@ -8263,6 +8244,23 @@ noscript {
}
}
}
& . expanded {
flex-direction : column ;
. story__thumbnail {
order : 1 ;
width : 100 % ;
height : auto ;
aspect-ratio : 1 .91 / 1 ;
}
. story__details {
order : 2 ;
width : 100 % ;
flex : 0 0 auto ;
}
}
}
. server-banner {