Merge pull request #801 from kmycode/upstream-20240817
Upstream 20240817
This commit is contained in:
commit
fef0b7e28b
97 changed files with 1377 additions and 472 deletions
|
@ -697,7 +697,7 @@ body,
|
|||
top: 15px;
|
||||
|
||||
.avatar {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
@ -748,7 +748,7 @@ body,
|
|||
top: 15px;
|
||||
|
||||
.avatar {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
@ -872,6 +872,7 @@ a.name-tag,
|
|||
|
||||
.account {
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-inline-start: 0;
|
||||
|
@ -1602,7 +1603,7 @@ a.sparkline {
|
|||
position: absolute;
|
||||
inset-inline-start: 15px;
|
||||
top: 15px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
|
|
@ -1878,6 +1878,7 @@ body > [data-popper-placement] {
|
|||
|
||||
.account {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
|
@ -2066,13 +2067,14 @@ body > [data-popper-placement] {
|
|||
.account__avatar {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
}
|
||||
|
||||
&-inline {
|
||||
|
@ -2926,7 +2928,7 @@ $ui-header-logo-wordmark-width: 99px;
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (width >= 631px) {
|
||||
@media screen and (width > $mobile-breakpoint) {
|
||||
.columns-area {
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -4393,6 +4395,10 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
.timeline-hint--with-descendants {
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.regeneration-indicator {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
@ -4647,10 +4653,19 @@ a.status-card {
|
|||
opacity: 1;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
border-left: 1px solid var(--background-border-color);
|
||||
border-right: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0.5;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.animating {
|
||||
|
@ -4667,13 +4682,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__setting-btn {
|
||||
|
@ -6013,7 +6022,7 @@ a.status-card {
|
|||
user-select: text;
|
||||
display: flex;
|
||||
|
||||
@media screen and (width <= 630px) {
|
||||
@media screen and (width <= $mobile-breakpoint) {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
@ -6372,7 +6381,7 @@ a.status-card {
|
|||
border-radius: 0 0 16px 16px;
|
||||
border-top: 0;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
@media screen and (max-width: $mobile-breakpoint) {
|
||||
border-radius: 0;
|
||||
border-bottom: 0;
|
||||
padding-bottom: 32px;
|
||||
|
@ -7667,9 +7676,18 @@ a.status-card {
|
|||
}
|
||||
|
||||
.scrollable .account-card__title__avatar {
|
||||
img,
|
||||
img {
|
||||
border: 2px solid var(--background-color);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable .account-card__header {
|
||||
img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -8402,7 +8420,7 @@ noscript {
|
|||
.account__avatar {
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9531,8 +9549,9 @@ noscript {
|
|||
backdrop-filter: var(--background-filter);
|
||||
border: 1px solid var(--modal-border-color);
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
@media screen and (max-width: $mobile-breakpoint) {
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-bottom: 0;
|
||||
padding-bottom: 32px;
|
||||
|
@ -10900,6 +10919,13 @@ noscript {
|
|||
gap: 8px;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
container-type: inline-size;
|
||||
|
||||
@container (width < 350px) {
|
||||
&__header time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
@ -10958,6 +10984,11 @@ noscript {
|
|||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__additional-content {
|
||||
color: $darker-text-color;
|
||||
margin-top: -8px; // to offset the parent's `gap` property
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-group {
|
||||
|
|
|
@ -81,7 +81,7 @@
|
|||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -324,7 +324,7 @@ code {
|
|||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
background: url('images/void.png');
|
||||
|
||||
&[src$='missing.png'] {
|
||||
|
|
|
@ -54,40 +54,21 @@ table {
|
|||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: lighten($ui-base-color, 4%) rgba($base-overlay-background, 0.1);
|
||||
scrollbar-color: var(--background-border-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 0px none $base-border-color;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background-color: $ui-highlight-color;
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border: 0px none $base-border-color;
|
||||
border-radius: 0;
|
||||
background: rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: $ui-base-color;
|
||||
background-color: var(--background-border-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
|
|
|
@ -93,6 +93,7 @@ $media-modal-media-max-width: 100%;
|
|||
$media-modal-media-max-height: 80%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
$mobile-breakpoint: 630px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
|
@ -113,4 +114,5 @@ $font-monospace: 'mastodon-font-monospace' !default;
|
|||
--surface-background-color: #{darken($ui-base-color, 4%)};
|
||||
--surface-variant-background-color: #{$ui-base-color};
|
||||
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--avatar-border-radius: 8px;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue