4.2.0-Beta2 test update
This commit is contained in:
root
@ -424,6 +424,10 @@ html {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.column-settings__hashtags .column-select__option {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dashboard__quick-access,
|
||||
.focal-point__preview strong,
|
||||
.admin-wrapper .content__heading__tabs a.selected {
|
||||
|
||||
@ -187,7 +187,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.account-role,
|
||||
.information-badge,
|
||||
.simple_form .recommended,
|
||||
.simple_form .not_recommended {
|
||||
@ -212,10 +211,30 @@
|
||||
}
|
||||
|
||||
.account-role {
|
||||
display: inline-flex;
|
||||
padding: 4px;
|
||||
padding-inline-end: 8px;
|
||||
border: 1px solid $highlight-text-color;
|
||||
color: $highlight-text-color;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 16px;
|
||||
gap: 4px;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
|
||||
.fa {
|
||||
color: var(--user-role-accent, $highlight-text-color);
|
||||
svg {
|
||||
width: auto;
|
||||
height: 15px;
|
||||
opacity: 0.85;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&__domain {
|
||||
font-weight: 400;
|
||||
opacity: 0.75;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -164,7 +164,7 @@ body {
|
||||
a {
|
||||
&:focus {
|
||||
border-radius: 4px;
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
outline: $ui-button-focus-outline;
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
|
||||
@ -170,11 +170,6 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-multiple-columns &.button--with-bell {
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.column__wrapper {
|
||||
@ -1116,7 +1111,8 @@ body > [data-popper-placement] {
|
||||
.audio-player,
|
||||
.attachment-list,
|
||||
.picture-in-picture-placeholder,
|
||||
.status-card {
|
||||
.status-card,
|
||||
.hashtag-bar {
|
||||
margin-inline-start: $thread-margin;
|
||||
width: calc(100% - ($thread-margin));
|
||||
}
|
||||
@ -3283,6 +3279,8 @@ $ui-header-height: 55px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -3294,6 +3292,11 @@ $ui-header-height: 55px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border-color: $ui-button-focus-outline-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
color: $ui-secondary-color;
|
||||
@ -3510,13 +3513,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;
|
||||
@ -3527,11 +3533,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;
|
||||
@ -3572,7 +3580,8 @@ a.status-card {
|
||||
&:active {
|
||||
.status-card__title,
|
||||
.status-card__host,
|
||||
.status-card__author {
|
||||
.status-card__author,
|
||||
.status-card__description {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
@ -3587,7 +3596,8 @@ a.status-card {
|
||||
&:active {
|
||||
.status-card__title,
|
||||
.status-card__host,
|
||||
.status-card__author {
|
||||
.status-card__author,
|
||||
.status-card__description {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
@ -3620,19 +3630,32 @@ 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;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -3640,17 +3663,30 @@ 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;
|
||||
|
||||
& > .fa {
|
||||
font-size: 21px;
|
||||
@ -3663,7 +3699,6 @@ a.status-card {
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
@ -3674,7 +3709,6 @@ a.status-card {
|
||||
}
|
||||
|
||||
.status-card__image-preview {
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
@ -3691,6 +3725,37 @@ 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__image,
|
||||
.status-card__image-image,
|
||||
.status-card__image-preview {
|
||||
border-start-start-radius: 8px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -3896,7 +3961,7 @@ a.status-card {
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
outline: $ui-button-focus-outline;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -4180,16 +4245,19 @@ a.status-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba($black, 0.5);
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: $white;
|
||||
|
||||
&__label {
|
||||
background-color: rgba($black, 0.45);
|
||||
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||
border-radius: 6px;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -4203,6 +4271,13 @@ a.status-card {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.spoiler-button__overlay__label {
|
||||
background-color: rgba($black, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4902,7 +4977,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;
|
||||
@ -5050,6 +5125,7 @@ a.status-card {
|
||||
|
||||
&.active {
|
||||
transform: rotate(90deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -5746,15 +5822,16 @@ a.status-card {
|
||||
}
|
||||
|
||||
.button.button-secondary {
|
||||
border-color: $ui-button-secondary-border-color;
|
||||
color: $ui-button-secondary-color;
|
||||
border-color: $inverted-text-color;
|
||||
color: $inverted-text-color;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: $ui-button-secondary-focus-background-color;
|
||||
color: $ui-button-secondary-focus-color;
|
||||
background: transparent;
|
||||
border-color: $ui-button-background-color;
|
||||
color: $ui-button-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8218,7 +8295,7 @@ noscript {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.skeleton {
|
||||
width: 100%;
|
||||
@ -8463,6 +8540,44 @@ noscript {
|
||||
}
|
||||
}
|
||||
|
||||
&__choices {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
|
||||
&__choice {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $darker-text-color;
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint - 1px) {
|
||||
&__choices {
|
||||
flex-direction: column;
|
||||
|
||||
&__choice {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-button {
|
||||
font-size: inherit;
|
||||
display: inline;
|
||||
@ -9151,3 +9266,55 @@ noscript {
|
||||
background: rgba($ui-base-color, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-header {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: $darker-text-color;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 15px;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 22px;
|
||||
line-height: 33px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-bar {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
color: $dark-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -309,9 +309,19 @@ code {
|
||||
border-radius: 4px;
|
||||
background: url('images/void.png');
|
||||
|
||||
&[src$='missing.png'] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&#account_avatar-preview {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -43,6 +43,8 @@ $ui-highlight-color: $classic-highlight-color !default;
|
||||
$ui-button-color: $white !default;
|
||||
$ui-button-background-color: $blurple-500 !default;
|
||||
$ui-button-focus-background-color: $blurple-600 !default;
|
||||
$ui-button-focus-outline-color: $blurple-400 !default;
|
||||
$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
|
||||
|
||||
$ui-button-secondary-color: $grey-100 !default;
|
||||
$ui-button-secondary-border-color: $grey-100 !default;
|
||||
@ -57,7 +59,7 @@ $ui-button-tertiary-focus-color: $white !default;
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
|
||||
$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
|
||||
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
|
||||
|
||||
// Variables for texts
|
||||
|
||||
Reference in New Issue
Block a user