@ -1311,7 +1311,7 @@ body > [data-popper-placement] {
box-sizing : border-box ;
width : 100 % ;
clear : both ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
& __button {
display : inline ;
@ -1332,19 +1332,14 @@ body > [data-popper-placement] {
. focusable {
& : focus {
outline : 0 ;
background : lighten ( $ui-base-color , 4 % ) ;
. detailed-status ,
. detailed-status__action-bar {
background : lighten ( $ui-base-color , 8 % ) ;
}
background : rgba ( $ui-highlight-color , 0 .05 ) ;
}
}
. status {
padding : 16 px ;
min-height : 54 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
cursor : auto ;
@keyframes fade {
@ -1588,10 +1583,10 @@ body > [data-popper-placement] {
}
. status__wrapper-direct {
background : mix( $ui-base-color , $ui-highlight-color , 95 % ) ;
background : rgba( $ui-highlight-color , 0 .05 ) ;
& : focus {
background : mix( lighten ( $ui-base-color , 4 % ) , $ui-highlight-color , 95 % ) ;
background : rgba( $ui-highlight-color , 0 .05 ) ;
}
. status__prepend {
@ -1616,9 +1611,8 @@ body > [data-popper-placement] {
}
. detailed-status {
background : lighten ( $ui-base-color , 4 % ) ;
padding : 16 px ;
border-top : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-top : 1 px solid var( -- background-border-color ) ;
& - - flex {
display : flex ;
@ -1678,9 +1672,8 @@ body > [data-popper-placement] {
}
. detailed-status__action-bar {
background : lighten ( $ui-base-color , 4 % ) ;
border-top : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-top : 1 px solid var ( -- background-border-color ) ;
border-bottom : 1 px solid var ( -- background-border-color ) ;
display : flex ;
flex-direction : row ;
padding : 10 px 0 ;
@ -1735,7 +1728,7 @@ body > [data-popper-placement] {
. domain {
padding : 10 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
. domain__domain-name {
flex : 1 1 auto ;
@ -1759,7 +1752,7 @@ body > [data-popper-placement] {
. account {
padding : 16 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
. account__display-name {
flex : 1 1 auto ;
@ -2017,7 +2010,7 @@ a.account__display-name {
. notification__report {
padding : 16 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
display : flex ;
gap : 10 px ;
@ -2276,6 +2269,7 @@ a.account__display-name {
. dropdown-menu {
background : var ( -- dropdown-background-color ) ;
backdrop-filter : var ( -- background-filter ) ;
border : 1 px solid var ( -- dropdown-border-color ) ;
padding : 4 px ;
border-radius : 4 px ;
@ -2466,6 +2460,7 @@ $ui-header-height: 55px;
z-index : 3 ;
justify-content : space-between ;
align-items : center ;
backdrop-filter : var ( -- background-filter ) ;
& __logo {
display : inline-flex ;
@ -2514,7 +2509,8 @@ $ui-header-height: 55px;
}
. tabs-bar__wrapper {
background : darken ( $ui-base-color , 8 % ) ;
background : var ( -- background-color-tint ) ;
backdrop-filter : var ( -- background-filter ) ;
position : sticky ;
top : $ui-header-height ;
z-index : 2 ;
@ -2550,8 +2546,15 @@ $ui-header-height: 55px;
flex-direction : column ;
> . scrollable {
background : $ui-base-color ;
border : 1 px solid var ( -- background-border-color ) ;
border-top : 0 ;
border-radius : 0 0 4 px 4 px ;
& . about ,
& . privacy-policy {
border-top : 1 px solid var ( -- background-border-color ) ;
border-radius : 4 px ;
}
}
}
@ -2581,7 +2584,6 @@ $ui-header-height: 55px;
font-size : 16 px ;
align-items : center ;
justify-content : center ;
border-bottom : 2 px solid transparent ;
}
. column ,
@ -2710,8 +2712,7 @@ $ui-header-height: 55px;
. navigation-panel {
margin : 0 ;
background : $ui-base-color ;
border-inline-start : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-inline-start : 1 px solid var ( -- background-border-color ) ;
height : 100 vh ;
}
@ -2729,8 +2730,15 @@ $ui-header-height: 55px;
. layout-single-column . ui__header {
display : flex ;
background : $ui-base-color ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
background : var ( -- background-color-tint ) ;
border-bottom : 1 px solid var ( -- background-border-color ) ;
}
. column > . scrollable ,
. tabs-bar__wrapper . column-header ,
. tabs-bar__wrapper . column-back-button {
border-left : 0 ;
border-right : 0 ;
}
. column-header ,
@ -2788,7 +2796,7 @@ $ui-header-height: 55px;
inset-inline-start : 9 px ;
top : - 13 px ;
background : $ui-highlight-color ;
border : 2 px solid lighten( $ui-base-color , 8 % ) ;
border : 2 px solid var( -- background-color ) ;
padding : 1 px 6 px ;
border-radius : 6 px ;
font-size : 10 px ;
@ -2810,7 +2818,7 @@ $ui-header-height: 55px;
}
. column-link--transparent . icon-with-badge__badge {
border-color : darken( $ui-base-color , 8 % ) ;
border-color : var( -- background-color ) ;
}
. column-title {
@ -3160,7 +3168,7 @@ $ui-header-height: 55px;
flex : 0 0 auto ;
border : 0 ;
background : transparent ;
border-top : 1 px solid lighten( $ui-base-color , 4 % ) ;
border-top : 1 px solid var( -- background-border-color ) ;
margin : 10 px 0 ;
}
@ -3177,13 +3185,14 @@ $ui-header-height: 55px;
overflow : hidden ;
display : flex ;
border-radius : 4 px ;
border : 1 px solid var ( -- background-border-color ) ;
}
. drawer__inner {
position : absolute ;
top : 0 ;
inset-inline-start : 0 ;
background : darken( $ui-base-color , 4 % ) ;
background : var( -- background-color ) ;
box-sizing : border-box ;
padding : 0 ;
display : flex ;
@ -3192,15 +3201,11 @@ $ui-header-height: 55px;
overflow-y : auto ;
width : 100 % ;
height : 100 % ;
& . darker {
background : $ui-base-color ;
}
}
. drawer__inner__mastodon {
background : darken( $ui-base-color , 4 % )
url ( ' data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill=" #{ hex-color ( $ui-base-color )} "/></svg> ' )
background : var ( -- background-color )
url ( ' data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill=" #{ hex-color ( darken ( $ui-base-color , 4 % ) )} "/></svg> ' )
no-repeat bottom / 100 % auto ;
flex : 1 ;
min-height : 47 px ;
@ -3224,7 +3229,7 @@ $ui-header-height: 55px;
. drawer__header {
flex : 0 0 auto ;
font-size : 16 px ;
b ackground: darken ( $ui-base-color , 4 % ) ;
b order: 1 px solid var ( -- background-border-color ) ;
margin-bottom : 10 px ;
display : flex ;
flex-direction : row ;
@ -3234,7 +3239,7 @@ $ui-header-height: 55px;
a : hover ,
a : focus ,
a : active {
background: $ui-base -color;
color: $primary-text -color;
}
}
@ -3279,15 +3284,14 @@ $ui-header-height: 55px;
. column-back-button {
box-sizing : border-box ;
width : 100 % ;
background : $ui-base-color ;
background : transparent ;
border : 1 px solid var ( -- background-border-color ) ;
border-radius : 4 px 4 px 0 0 ;
color : $highlight-text-color ;
cursor : pointer ;
flex : 0 0 auto ;
font-size : 16 px ;
line-height : inherit ;
border : 0 ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
text-align : unset ;
padding : 13 px ;
margin : 0 ;
@ -3300,13 +3304,17 @@ $ui-header-height: 55px;
& : hover {
text-decoration : underline ;
}
@media screen and ( max-width : $no-gap-breakpoint ) {
border-top : 0 ;
}
}
. column-header__back-button {
display : flex ;
align-items : center ;
gap : 5 px ;
background : $ui-base-color ;
background : transparent ;
border : 0 ;
font-family : inherit ;
color : $highlight-text-color ;
@ -3412,8 +3420,6 @@ $ui-header-height: 55px;
}
. column-link {
background : lighten ( $ui-base-color , 8 % ) ;
color : $primary-text-color ;
display : flex ;
align-items : center ;
gap : 5 px ;
@ -3423,12 +3429,18 @@ $ui-header-height: 55px;
overflow : hidden ;
white-space : nowrap ;
border : 0 ;
background : transparent ;
color : $secondary-text-color ;
border-left : 4 px solid transparent ;
& : hover ,
& : focus ,
& : active {
background : lighten ( $ui-base-color , 11 % ) ;
color : $primary-text-color ;
}
& . active {
color : $highlight-text-color ;
}
& : focus {
@ -3440,22 +3452,6 @@ $ui-header-height: 55px;
border-radius : 0 ;
}
& - - transparent {
background : transparent ;
color : $secondary-text-color ;
& : hover ,
& : focus ,
& : active {
background : transparent ;
color : $primary-text-color ;
}
& . active {
color : $highlight-text-color ;
}
}
& - - logo {
background : transparent ;
padding : 10 px ;
@ -3480,8 +3476,8 @@ $ui-header-height: 55px;
}
. column-subheading {
background : $ui-base-color ;
color : $dark -text-color;
background : darken ( $ui-base-color , 4 % ) ;
color : $dark er -text-color;
padding : 8 px 20 px ;
font-size : 12 px ;
font-weight : 500 ;
@ -3489,12 +3485,6 @@ $ui-header-height: 55px;
cursor : default ;
}
. getting-started__wrapper ,
. getting-started ,
. flex-spacer {
background : $ui-base-color ;
}
. getting-started__wrapper {
flex : 0 0 auto ;
}
@ -3506,6 +3496,8 @@ $ui-header-height: 55px;
. getting-started {
color : $dark-text-color ;
overflow : auto ;
border : 1 px solid var ( -- background-border-color ) ;
border-top : 0 ;
& __trends {
flex : 0 1 auto ;
@ -3514,7 +3506,7 @@ $ui-header-height: 55px;
margin-top : 10 px ;
h4 {
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
padding : 10 px ;
font-size : 12 px ;
text-transform : uppercase ;
@ -3636,7 +3628,7 @@ $ui-header-height: 55px;
margin-top : 14 px ;
text-decoration : none ;
overflow : hidden ;
border : 1 px solid lighten( $ui-base-color , 8 % ) ;
border : 1 px solid var( -- background-border-color ) ;
border-radius : 8 px ;
& __actions {
@ -3893,7 +3885,7 @@ a.status-card {
}
. load-gap {
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
}
. timeline-hint {
@ -3926,7 +3918,8 @@ a.status-card {
font-size : 16 px ;
font-weight : 500 ;
color : $dark-text-color ;
background : $ui-base-color ;
border : 1 px solid var ( -- background-border-color ) ;
border-top : 0 ;
cursor : default ;
display : flex ;
flex : 1 1 auto ;
@ -4002,8 +3995,7 @@ a.status-card {
. column-header {
display : flex ;
font-size : 16 px ;
background : $ui-base-color ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border : 1 px solid var ( -- background-border-color ) ;
border-radius : 4 px 4 px 0 0 ;
flex : 0 0 auto ;
cursor : pointer ;
@ -4070,6 +4062,10 @@ a.status-card {
padding-top : 16 px ;
}
}
@media screen and ( max-width : $no-gap-breakpoint ) {
border-top : 0 ;
}
}
. column-header__buttons {
@ -4089,9 +4085,9 @@ a.status-card {
display : flex ;
justify-content : center ;
align-items : center ;
background : $ui-base-color ;
border : 0 ;
color : $darker-text-color ;
background : transparent ;
cursor : pointer ;
font-size : 16 px ;
padding : 0 15 px ;
@ -4110,7 +4106,6 @@ a.status-card {
& . active {
color : $primary-text-color ;
background : lighten ( $ui-base-color , 4 % ) ;
& : hover {
color : $primary-text-color ;
@ -4127,7 +4122,6 @@ a.status-card {
max-height : 70 vh ;
overflow : hidden ;
overflow-y : auto ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
color : $darker-text-color ;
transition :
max-height 150ms ease-in-out ,
@ -4149,13 +4143,14 @@ a.status-card {
height : 0 ;
background : transparent ;
border : 0 ;
border-top : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-top : 1 px solid var( -- background-border-color ) ;
margin : 10 px 0 ;
}
}
. column-header__collapsible-inner {
background : $ui-base-color ;
border : 1 px solid var ( -- background-border-color ) ;
border-top : 0 ;
}
. column-header__setting-btn {
@ -4401,9 +4396,8 @@ a.status-card {
}
. account--panel {
background : lighten ( $ui-base-color , 4 % ) ;
border-top : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid lighten ( $ui-base-color , 8 % ) ;
border-top : 1 px solid var ( -- background-border-color ) ;
border-bottom : 1 px solid var ( -- background-border-color ) ;
display : flex ;
flex-direction : row ;
padding : 10 px 0 ;
@ -4609,7 +4603,6 @@ a.status-card {
. empty-column-indicator ,
. follow_requests-unlocked_explanation {
color : $dark-text-color ;
background : $ui-base-color ;
text-align : center ;
padding : 20 px ;
font-size : 15 px ;
@ -4636,14 +4629,14 @@ a.status-card {
. follow_requests-unlocked_explanation {
background : darken ( $ui-base-color , 4 % ) ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
contain : initial ;
flex-grow : 0 ;
}
. error-column {
padding : 20 px ;
b ackground: $ui-base-color ;
b order: 1 px solid var ( -- background-border-color ) ;
border-radius : 4 px ;
display : flex ;
flex : 1 1 auto ;
@ -4858,7 +4851,7 @@ a.status-card {
width : 100 % ;
height : 6 px ;
border-radius : 6 px ;
background : darken( $ui-base-color , 8 % ) ;
background : var( -- background-color ) ;
position : relative ;
margin-top : 5 px ;
}
@ -5280,7 +5273,7 @@ a.status-card {
}
. search-results__section {
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
& : last-child {
border-bottom : 0 ;
@ -5288,7 +5281,7 @@ a.status-card {
& __header {
background : darken ( $ui-base-color , 4 % ) ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
padding : 15 px ;
font-weight : 500 ;
font-size : 14 px ;
@ -6335,7 +6328,7 @@ a.status-card {
. attachment-list {
display : flex ;
font-size : 14 px ;
border : 1 px solid lighten( $ui-base-color , 8 % ) ;
border : 1 px solid var( -- background-border-color ) ;
border-radius : 4 px ;
margin-top : 16 px ;
overflow : hidden ;
@ -6345,7 +6338,7 @@ a.status-card {
color : $dark-text-color ;
padding : 8 px 18 px ;
cursor : default ;
border-inline-end : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-inline-end : 1 px solid var( -- background-border-color ) ;
display : flex ;
flex-direction : column ;
align-items : center ;
@ -6497,7 +6490,7 @@ a.status-card {
overflow : hidden ;
box-sizing : border-box ;
position : relative ;
background : darken( $ui-base-color , 8 % ) ;
background : var( -- background-color ) ;
border-radius : 8 px ;
padding-bottom : 44 px ;
width : 100 % ;
@ -6893,7 +6886,6 @@ a.status-card {
. scrollable . account-card {
margin : 10 px ;
background : lighten ( $ui-base-color , 8 % ) ;
}
. scrollable . account-card__title__avatar {
@ -6904,11 +6896,7 @@ a.status-card {
}
. scrollable . account-card__bio : : after {
background : linear-gradient (
to left ,
lighten ( $ ui-base-color , 8 % ) ,
transparent
) ;
background : linear-gradient ( to left , var ( -- background-color ) , transparent ) ;
}
. account-gallery__container {
@ -6937,8 +6925,8 @@ a.status-card {
. notification__filter-bar ,
. account__section-headline {
b ackground: $ui-base-color ;
border- bottom: 1 px solid lighten ( $ui-base-color , 8 % ) ;
b order: 1 px solid var ( -- background-border-color ) ;
border- top: 0 ;
cursor : default ;
display : flex ;
flex-shrink : 0 ;
@ -6979,10 +6967,15 @@ a.status-card {
}
}
}
. scrollable & {
border-left : 0 ;
border-right : 0 ;
}
}
. filter-form {
background : $ui-base-color ;
b order-bottom: 1 px solid var ( -- background-border-color ) ;
& __column {
display : flex ;
@ -7200,7 +7193,8 @@ noscript {
justify-content : flex-start ;
gap : 15 px ;
align-items : center ;
background : lighten ( $ui-base-color , 4 % ) ;
border : 1 px solid var ( -- background-border-color ) ;
border-top : 0 ;
label {
flex : 1 1 auto ;
@ -7301,7 +7295,7 @@ noscript {
. list {
padding : 10 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
}
. list__wrapper {
@ -7445,7 +7439,7 @@ noscript {
height : 145 px ;
position : relative ;
background : darken ( $ui-base-color , 4 % ) ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
img {
object-fit : cover ;
@ -7459,7 +7453,7 @@ noscript {
& __bar {
position : relative ;
padding : 0 20 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
. avatar {
display : block ;
@ -7467,8 +7461,8 @@ noscript {
width : 94 px ;
. account__avatar {
background : darken( $ui-base-color , 8 % ) ;
border : 2 px solid $ui-base-color ;
background : var( -- background-color ) ;
border : 2 px solid var ( -- background-border-color ) ;
}
}
}
@ -7583,13 +7577,12 @@ noscript {
margin : 0 ;
margin-top : 16 px ;
border-radius : 4 px ;
background : darken ( $ui-base-color , 4 % ) ;
border : 0 ;
border : 1 px solid var ( -- background-border-color ) ;
dl {
display : block ;
padding : 11 px 16 px ;
border-bottom-color : lighten( $ui-base-color , 4 % ) ;
border-bottom-color : var( -- background-border-color ) ;
}
dd ,
@ -7764,7 +7757,7 @@ noscript {
display : flex ;
align-items : center ;
padding : 15 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
gap : 15 px ;
& : last-child {
@ -7882,7 +7875,7 @@ noscript {
. conversation {
display : flex ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
padding : 5 px ;
padding-bottom : 0 ;
@ -8237,7 +8230,7 @@ noscript {
. picture-in-picture-placeholder {
box-sizing : border-box ;
border : 2 px dashed lighten( $ui-base-color , 8 % ) ;
border : 2 px dashed var( -- background-border-color ) ;
background : $base-shadow-color ;
display : flex ;
flex-direction : column ;
@ -8265,7 +8258,7 @@ noscript {
. notifications-permission-banner {
padding : 30 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
display : flex ;
flex-direction : column ;
align-items : center ;
@ -8335,7 +8328,7 @@ noscript {
color : $primary-text-color ;
text-decoration : none ;
padding : 15 px ;
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
gap : 15 px ;
& : last-child {
@ -8714,7 +8707,6 @@ noscript {
}
. privacy-policy {
background : $ui-base-color ;
padding : 20 px ;
@media screen and ( min-width : $no-gap-breakpoint ) {
@ -9083,6 +9075,7 @@ noscript {
. about {
padding : 20 px ;
border-top : 1 px solid var ( -- background-border-color ) ;
@media screen and ( min-width : $no-gap-breakpoint ) {
border-radius : 4 px ;
@ -9129,7 +9122,7 @@ noscript {
}
& __meta {
b ackground: lighten ( $ui-base-color , 4 % ) ;
b order: 1 px solid var ( -- background-border-color ) ;
border-radius : 4 px ;
display : flex ;
margin-bottom : 30 px ;
@ -9145,7 +9138,7 @@ noscript {
width : 0 ;
border : 0 ;
border-style : solid ;
border-color : lighten( $ui-base-color , 8 % ) ;
border-color : var( -- background-border-color ) ;
border-left-width : 1 px ;
min-height : calc ( 100 % - 60 px ) ;
flex : 0 0 auto ;
@ -9253,7 +9246,7 @@ noscript {
line-height : 22 px ;
padding : 20 px ;
border-radius : 4 px ;
b ackground: lighten ( $ui-base-color , 4 % ) ;
b order: 1 px solid var ( -- background-border-color ) ;
color : $highlight-text-color ;
cursor : pointer ;
}
@ -9263,7 +9256,7 @@ noscript {
}
& __body {
border : 1 px solid lighten( $ui-base-color , 4 % ) ;
border : 1 px solid var( -- background-border-color ) ;
border-top : 0 ;
padding : 20 px ;
font-size : 15 px ;
@ -9273,18 +9266,17 @@ noscript {
& __domain-blocks {
margin-top : 30 px ;
background : darken ( $ui-base-color , 4 % ) ;
border : 1 px solid lighten ( $ui-base-color , 4 % ) ;
border : 1 px solid var ( -- background-border-color ) ;
border-radius : 4 px ;
& __domain {
border-bottom : 1 px solid lighten( $ui-base-color , 4 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
padding : 10 px ;
font-size : 15 px ;
color : $darker-text-color ;
& : nth-child ( 2n ) {
background : darken ( $ui-base-color , 2 % ) ;
background : darken ( $ui-base-color , 4 % ) ;
}
& : last-child {
@ -9380,7 +9372,7 @@ noscript {
}
. hashtag-header {
border-bottom : 1 px solid lighten( $ui-base-color , 8 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
padding : 15 px ;
font-size : 17 px ;
line-height : 22 px ;
@ -9442,8 +9434,8 @@ noscript {
gap : 12 px ;
padding : 16 px 0 ;
padding-bottom : 0 ;
border-bottom : 1 px solid mix( $ui-base-color , $ui-highlight-color , 75 % ) ;
background : mix( $ui-base-color , $ui-highlight-color , 95 % ) ;
border-bottom : 1 px solid var( -- background-border-color ) ;
background : rgba( $ui-highlight-color , 0 .05 ) ;
& __header {
display : flex ;
@ -9527,8 +9519,8 @@ noscript {
overflow-x : scroll ;
& __card {
background : darken( $ui-base-color , 4 % ) ;
border : 1 px solid lighten( $ui-base-color , 8 % ) ;
background : var( -- background-color ) ;
border : 1 px solid var( -- background-border-color ) ;
border-radius : 4 px ;
display : flex ;
flex-direction : column ;
@ -9565,7 +9557,7 @@ noscript {
. account__avatar {
flex-shrink : 0 ;
align-self : flex-end ;
border : 1 px solid lighten( $ui-base-color , 8 % ) ;
border : 1 px solid var( -- background-border-color ) ;
background-color : $ui-base-color ;
}