Merge remote-tracking branch 'parent/main' into kbtopic-remove-quote
This commit is contained in:
KMY
commit
7c65b6f9df
464 changed files with 8217 additions and 8135 deletions
|
|
@ -2,8 +2,8 @@
|
|||
@use 'functions' as *;
|
||||
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$black: #000; // Black
|
||||
$white: #fff; // White
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #563acc; // Iris
|
||||
|
|
|
|||
|
|
@ -114,15 +114,14 @@ $content-width: 840px;
|
|||
|
||||
a {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 15px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
transition-property: color, background-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
|
|
@ -1105,7 +1104,7 @@ a.name-tag,
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__permissions {
|
||||
|
|
@ -1135,6 +1134,15 @@ a.name-tag,
|
|||
}
|
||||
}
|
||||
|
||||
.rule-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a.table-action-link {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__counters.admin-account-counters {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -1437,8 +1445,8 @@ a.sparkline {
|
|||
inset-inline-start: 10px;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
url('../images/warning-stripes.svg') repeat-y left,
|
||||
url('../images/warning-stripes.svg') repeat-y right,
|
||||
url('@/images/warning-stripes.svg') repeat-y left,
|
||||
url('@/images/warning-stripes.svg') repeat-y right,
|
||||
var(--background-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -645,7 +645,7 @@ body > [data-popper-placement] {
|
|||
align-items: stretch;
|
||||
|
||||
&__border {
|
||||
background: url('../images/warning-stripes.svg') repeat-y;
|
||||
background: url('@/images/warning-stripes.svg') repeat-y;
|
||||
width: 5px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
|
|
@ -1436,6 +1436,10 @@ body > [data-popper-placement] {
|
|||
}
|
||||
}
|
||||
|
||||
.status--has-quote .quote-inline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 16px;
|
||||
min-height: 54px;
|
||||
|
|
@ -1506,8 +1510,12 @@ body > [data-popper-placement] {
|
|||
}
|
||||
}
|
||||
|
||||
&--is-quote {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&--in-thread {
|
||||
$thread-margin: 46px + 10px;
|
||||
--thread-margin: calc(46px + 8px);
|
||||
|
||||
border-bottom: 0;
|
||||
|
||||
|
|
@ -1524,16 +1532,16 @@ body > [data-popper-placement] {
|
|||
.hashtag-bar,
|
||||
.content-warning,
|
||||
.filter-warning {
|
||||
margin-inline-start: $thread-margin;
|
||||
width: calc(100% - $thread-margin);
|
||||
margin-inline-start: var(--thread-margin);
|
||||
width: calc(100% - var(--thread-margin));
|
||||
}
|
||||
|
||||
.more-from-author {
|
||||
width: calc(100% - $thread-margin + 2px);
|
||||
width: calc(100% - var(--thread-margin) + 2px);
|
||||
}
|
||||
|
||||
.status__content__read-more-button {
|
||||
margin-inline-start: $thread-margin;
|
||||
margin-inline-start: var(--thread-margin);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1943,6 +1951,81 @@ body > [data-popper-placement] {
|
|||
}
|
||||
}
|
||||
|
||||
.status__quote {
|
||||
position: relative;
|
||||
margin-block-start: 16px;
|
||||
margin-inline-start: 36px;
|
||||
border-radius: 8px;
|
||||
color: var(--nested-card-text);
|
||||
background: var(--nested-card-background);
|
||||
border: var(--nested-card-border);
|
||||
|
||||
@media screen and (min-width: $mobile-breakpoint) {
|
||||
margin-inline-start: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.status__quote--error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.status__quote-author-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
margin-block-start: 10px;
|
||||
padding: 5px 12px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
letter-spacing: 0;
|
||||
text-decoration: none;
|
||||
color: $highlight-text-color;
|
||||
background: var(--nested-card-background);
|
||||
border: var(--nested-card-border);
|
||||
border-radius: 4px;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($highlight-text-color, 4%);
|
||||
color: lighten($highlight-text-color, 4%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
}
|
||||
|
||||
.status__quote-icon {
|
||||
position: absolute;
|
||||
inset-block-start: 18px;
|
||||
inset-inline-start: -40px;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 5px;
|
||||
color: #6a49ba;
|
||||
z-index: 10;
|
||||
|
||||
.status__quote--error & {
|
||||
inset-block-start: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@media screen and (min-width: $mobile-breakpoint) {
|
||||
inset-inline-start: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -2161,6 +2244,7 @@ body > [data-popper-placement] {
|
|||
display: block;
|
||||
position: relative;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
background: var(--surface-background-color);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -2237,6 +2321,37 @@ a .account__avatar {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
display: flex;
|
||||
|
||||
--avatar-height: 28px;
|
||||
|
||||
&:not(.avatar-group--compact) {
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
height: var(--avatar-height);
|
||||
overflow-y: clip;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-group--compact {
|
||||
& > :not(:first-child) {
|
||||
margin-inline-start: -12px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
box-shadow: 0 0 0 2px var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.account__avatar-overlay {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -2348,16 +2463,6 @@ a.account__display-name {
|
|||
}
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
|
||||
&.status__avatar__compact {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
.status__content,
|
||||
.status__content p,
|
||||
|
|
@ -3658,7 +3763,8 @@ $ui-header-logo-wordmark-width: 99px;
|
|||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
.react-toggle-screenreader-only,
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
|
|
@ -8583,6 +8689,20 @@ noscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__familiar-followers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-block: 16px;
|
||||
color: $darker-text-color;
|
||||
|
||||
a:any-link {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__contents {
|
||||
|
|
@ -8807,7 +8927,7 @@ noscript {
|
|||
}
|
||||
|
||||
a {
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8876,6 +8996,8 @@ noscript {
|
|||
position: absolute;
|
||||
bottom: 3px;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -10757,7 +10879,8 @@ noscript {
|
|||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
|
||||
.logo {
|
||||
width: 16px;
|
||||
|
|
@ -10851,12 +10974,6 @@ noscript {
|
|||
overflow: hidden;
|
||||
container-type: inline-size;
|
||||
|
||||
@container (width < 350px) {
|
||||
&__header time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -10888,7 +11005,8 @@ noscript {
|
|||
|
||||
&__label {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px 8px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $darker-text-color;
|
||||
|
|
@ -10906,6 +11024,13 @@ noscript {
|
|||
time {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
@container (width < 350px) {
|
||||
time,
|
||||
&-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -10923,14 +11048,6 @@ noscript {
|
|||
}
|
||||
}
|
||||
|
||||
&__avatar-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
overflow-y: hidden;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -10965,6 +11082,7 @@ noscript {
|
|||
line-height: 22px;
|
||||
color: $darker-text-color;
|
||||
-webkit-line-clamp: 4;
|
||||
line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -11120,7 +11238,15 @@ noscript {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
&__number {
|
||||
&__numbers,
|
||||
&__familiar-followers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&__numbers {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $secondary-text-color;
|
||||
|
|
@ -11268,9 +11394,9 @@ noscript {
|
|||
.content-warning {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
color: $secondary-text-color;
|
||||
border: 1px solid rgba($ui-highlight-color, 0.15);
|
||||
background: var(--nested-card-background);
|
||||
color: var(--nested-card-text);
|
||||
border: var(--nested-card-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px (5px + 8px);
|
||||
position: relative;
|
||||
|
|
@ -11408,3 +11534,42 @@ noscript {
|
|||
.lists-scrollable {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.featured-carousel {
|
||||
background: var(--surface-background-color);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
touch-action: pan-x;
|
||||
|
||||
&__slides {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
&__slide {
|
||||
flex: 0 0 auto;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.status {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 8px 16px;
|
||||
color: $darker-text-color;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex-grow: 1;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@
|
|||
--rich-text-container-color: rgba(87, 24, 60, 100%);
|
||||
--rich-text-text-color: rgba(255, 175, 212, 100%);
|
||||
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
|
||||
--nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
|
||||
--nested-card-text: #{$secondary-text-color};
|
||||
--nested-card-border: 1px solid
|
||||
color(from #{$ui-highlight-color} srgb r g b / 15%);
|
||||
--input-placeholder-color: #{$dark-text-color};
|
||||
--input-background-color: var(--surface-variant-background-color);
|
||||
--on-input-color: #{$secondary-text-color};
|
||||
|
|
|
|||
|
|
@ -405,7 +405,7 @@ code {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
background: url('images/void.png');
|
||||
background: url('@/images/void.png');
|
||||
|
||||
&[src$='missing.png'] {
|
||||
visibility: hidden;
|
||||
|
|
@ -1168,7 +1168,7 @@ code {
|
|||
|
||||
&__type {
|
||||
color: $darker-text-color;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1456,6 +1456,12 @@ code {
|
|||
display: block;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1490,6 +1496,12 @@ code {
|
|||
|
||||
&:last-child {
|
||||
margin-inline-end: 0;
|
||||
|
||||
.icon {
|
||||
vertical-align: -5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
content: '';
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
mask-image: url('../images/quote.svg');
|
||||
mask-image: url('@/images/quote.svg');
|
||||
background-color: var(--rich-text-decorations-color);
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue