Merge commit 'fd284311e7' into kb_migration
This commit is contained in:
KMY
commit
287eacf5f3
400 changed files with 4667 additions and 5387 deletions
|
|
@ -2951,6 +2951,7 @@ $ui-header-height: 55px;
|
|||
border-radius: 4px;
|
||||
transition: box-shadow 300ms linear;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
transition: none;
|
||||
|
|
@ -3569,13 +3570,16 @@ button.icon-button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.status-card {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 8px;
|
||||
|
||||
&__actions {
|
||||
bottom: 0;
|
||||
|
|
@ -3586,11 +3590,13 @@ button.icon-button.active i.fa-retweet {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
& > div {
|
||||
background: rgba($base-shadow-color, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 12px 9px;
|
||||
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -3631,7 +3637,8 @@ a.status-card {
|
|||
&:active {
|
||||
.status-card__title,
|
||||
.status-card__host,
|
||||
.status-card__author {
|
||||
.status-card__author,
|
||||
.status-card__description {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -3646,7 +3653,8 @@ a.status-card {
|
|||
&:active {
|
||||
.status-card__title,
|
||||
.status-card__host,
|
||||
.status-card__author {
|
||||
.status-card__author,
|
||||
.status-card__description {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -3679,19 +3687,30 @@ a.status-card {
|
|||
line-height: 24px;
|
||||
color: $primary-text-color;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-card.expanded .status-card__title {
|
||||
white-space: normal;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.status-card__content {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
padding: 15px 0;
|
||||
padding-bottom: 0;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.status-card__host {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-card__author {
|
||||
|
|
@ -3699,17 +3718,33 @@ a.status-card {
|
|||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__description {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
width: 120px;
|
||||
aspect-ratio: 1;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
|
||||
& > .fa {
|
||||
font-size: 21px;
|
||||
|
|
@ -3723,6 +3758,8 @@ a.status-card {
|
|||
|
||||
.status-card__image-image {
|
||||
border-radius: 8px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -3735,6 +3772,8 @@ a.status-card {
|
|||
|
||||
.status-card__image-preview {
|
||||
border-radius: 8px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -3751,6 +3790,28 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
.status-card.expanded {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.status-card.expanded .status-card__image {
|
||||
width: 100%;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.status-card.expanded .status-card__image,
|
||||
.status-card.expanded .status-card__image-image,
|
||||
.status-card.expanded .status-card__image-preview {
|
||||
border-start-end-radius: 8px;
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
.status-card.expanded > a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: block;
|
||||
color: $dark-text-color;
|
||||
|
|
@ -4994,7 +5055,7 @@ a.status-card {
|
|||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
z-index: 99;
|
||||
font-size: 13px;
|
||||
padding: 15px 5px;
|
||||
|
|
@ -7480,6 +7541,16 @@ noscript {
|
|||
}
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.account-role {
|
||||
line-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -7518,10 +7589,6 @@ noscript {
|
|||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.account-role {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
min-width: 22px;
|
||||
max-width: min(8em, 100%);
|
||||
|
|
@ -8361,7 +8428,7 @@ noscript {
|
|||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.skeleton {
|
||||
width: 100%;
|
||||
|
|
@ -8500,13 +8567,13 @@ noscript {
|
|||
.interaction-modal {
|
||||
max-width: 90vw;
|
||||
width: 600px;
|
||||
background: $ui-base-color;
|
||||
background: var(--modal-background-color);
|
||||
border: 1px solid var(--modal-border-color);
|
||||
border-radius: 8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
padding: 40px;
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
|
|
@ -8515,63 +8582,100 @@ noscript {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: $darker-text-color;
|
||||
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
p.hint {
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
color: $highlight-text-color;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__lead {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__choices {
|
||||
display: flex;
|
||||
&__login {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__choice {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
&__input {
|
||||
@include search-input;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 4px 6px;
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: $darker-text-color;
|
||||
margin-bottom: 20px;
|
||||
input {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
border: 0;
|
||||
padding: 15px - 4px 15px - 6px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search__popout {
|
||||
margin-top: -1px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
&.focused &__input {
|
||||
border-color: $highlight-text-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
&.invalid &__input {
|
||||
border-color: $error-red;
|
||||
}
|
||||
|
||||
&.expanded .search__popout {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.expanded &__input {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint - 1px) {
|
||||
&__choices {
|
||||
display: block;
|
||||
|
||||
&__choice {
|
||||
width: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.link-button {
|
||||
font-size: inherit;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue