mirror of
https://github.com/yingziwu/mastodon.git
synced 2026-02-18 16:23:18 +00:00
Merge tag 'v3.3.0rc1'
This commit is contained in:
commit
1c2e3b6e93
484 changed files with 19459 additions and 5709 deletions
File diff suppressed because one or more lines are too long
|
|
@ -794,6 +794,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.status__content,
|
||||
.reply-indicator__content {
|
||||
position: relative;
|
||||
|
|
@ -1067,16 +1071,15 @@
|
|||
}
|
||||
|
||||
.status__relative-time,
|
||||
.status__visibility-icon,
|
||||
.notification__relative_time {
|
||||
color: $dark-text-color;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.status__visibility-icon {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
|
|
@ -1649,11 +1652,11 @@ a.account__display-name {
|
|||
}
|
||||
}
|
||||
|
||||
.star-icon.active {
|
||||
.icon-button.star-icon.active {
|
||||
color: $gold-star;
|
||||
}
|
||||
|
||||
.bookmark-icon.active {
|
||||
.icon-button.bookmark-icon.active {
|
||||
color: $red-bookmark;
|
||||
}
|
||||
|
||||
|
|
@ -1717,6 +1720,20 @@ a.account__display-name {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
|
||||
* {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar,
|
||||
*::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
|
||||
.image-loader__preview-canvas {
|
||||
max-width: $media-modal-media-max-width;
|
||||
|
|
@ -2990,7 +3007,6 @@ button.icon-button i.fa-retweet {
|
|||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button.icon-button.active i.fa-retweet {
|
||||
|
|
@ -4422,8 +4438,6 @@ a.status-card.compact:hover {
|
|||
|
||||
.modal-root {
|
||||
position: relative;
|
||||
transition: opacity 0.3s linear;
|
||||
will-change: opacity;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
|
@ -4472,16 +4486,19 @@ a.status-card.compact:hover {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.extended-video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&__close,
|
||||
&__zoom-button {
|
||||
color: rgba($white, 0.7);
|
||||
|
||||
video {
|
||||
max-width: $media-modal-media-max-width;
|
||||
max-height: $media-modal-media-max-height;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: rgba($white, 0.15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4518,10 +4535,10 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.media-modal__nav {
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
color: $primary-text-color;
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -4532,6 +4549,12 @@ a.status-card.compact:hover {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal__nav--left {
|
||||
|
|
@ -4542,58 +4565,86 @@ a.status-card.compact:hover {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.media-modal__pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.media-modal__overlay {
|
||||
max-width: 600px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
.media-modal__meta {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 20px;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
.picture-in-picture__footer {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: 20px 0;
|
||||
|
||||
&--shifted {
|
||||
bottom: 62px;
|
||||
}
|
||||
.icon-button {
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
pointer-events: auto;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: $ui-secondary-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: rgba($white, 0.15);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
&:focus {
|
||||
background-color: rgba($white, 0.3);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: rgba($highlight-text-color, 0.15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: rgba($highlight-text-color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.star-icon.active {
|
||||
color: $gold-star;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: rgba($gold-star, 0.15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: rgba($gold-star, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal__page-dot {
|
||||
display: inline-block;
|
||||
.media-modal__pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.media-modal__button {
|
||||
background-color: $primary-text-color;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 6px;
|
||||
margin: 10px;
|
||||
.media-modal__page-dot {
|
||||
flex: 0 0 auto;
|
||||
background-color: $white;
|
||||
opacity: 0.4;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
margin: 0 4px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
transition: opacity .2s ease-in-out;
|
||||
|
||||
.media-modal__button--active {
|
||||
background-color: $highlight-text-color;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
|
|
@ -4603,6 +4654,21 @@ a.status-card.compact:hover {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.media-modal__zoom-button {
|
||||
position: absolute;
|
||||
right: 64px;
|
||||
top: 8px;
|
||||
z-index: 100;
|
||||
pointer-events: auto;
|
||||
transition: opacity 0.3s linear;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.media-modal__zoom-button--hidden {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.onboarding-modal,
|
||||
.error-modal,
|
||||
.embed-modal {
|
||||
|
|
@ -5384,7 +5450,6 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.video-player__controls {
|
||||
padding: 0 15px;
|
||||
padding-top: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -5503,7 +5568,8 @@ a.status-card.compact:hover {
|
|||
&__buttons-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
margin: 0 -5px;
|
||||
|
||||
.video-player__download__icon {
|
||||
color: inherit;
|
||||
|
|
@ -5520,22 +5586,13 @@ a.status-card.compact:hover {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.left {
|
||||
button {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.player-button {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
|
||||
&.right {
|
||||
button {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 0 0 auto;
|
||||
background: transparent;
|
||||
padding: 2px 10px;
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
border: 0;
|
||||
color: rgba($white, 0.75);
|
||||
|
|
@ -5553,6 +5610,7 @@ a.status-card.compact:hover {
|
|||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__time-sep,
|
||||
|
|
@ -5672,7 +5730,7 @@ a.status-card.compact:hover {
|
|||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
top: 10px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&__progress,
|
||||
|
|
@ -5681,7 +5739,7 @@ a.status-card.compact:hover {
|
|||
position: absolute;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
top: 10px;
|
||||
top: 14px;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
}
|
||||
|
||||
|
|
@ -5696,7 +5754,7 @@ a.status-card.compact:hover {
|
|||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 6px;
|
||||
top: 10px;
|
||||
margin-left: -6px;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
|
||||
|
|
@ -5720,7 +5778,7 @@ a.status-card.compact:hover {
|
|||
&.detailed,
|
||||
&.fullscreen {
|
||||
.video-player__buttons {
|
||||
button {
|
||||
.player-button {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
|
@ -7180,6 +7238,13 @@ noscript {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ $dark-text-color: $ui-base-lighter-color !default;
|
|||
$secondary-text-color: $ui-secondary-color !default;
|
||||
$highlight-text-color: $ui-highlight-color !default;
|
||||
$action-button-color: $ui-base-lighter-color !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
margin-bottom: 10px;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -442,6 +446,26 @@
|
|||
vertical-align: initial !important;
|
||||
}
|
||||
|
||||
&__interrelationships {
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 16px;
|
||||
|
||||
&.active {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&.passive {
|
||||
color: $passive-text-color;
|
||||
}
|
||||
|
||||
&.active.passive {
|
||||
color: $active-passive-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
tbody td.optional {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue